{
  "id": "v1-w2-545b",
  "long_id": "v1.web-2-0-gloss.landing.s05.p04.t05.u11",
  "name": "Web 2.0 gloss plans and sign-up page",
  "era": {
    "slug": "web-2-0-gloss",
    "code": "w2",
    "name": "Web 2.0 gloss",
    "years": [
      2005,
      2009
    ],
    "description": "The start-up web, 2005 to 2009: glossy gradient bars and buttons, rounded hairline boxes, friendly lower-case wordmarks, big claims in a pale hero, and badges that say new."
  },
  "archetype": "landing",
  "mode": "mix",
  "viewport": {
    "width": 1024,
    "fluid": false
  },
  "summary": "The plans page of a hosted web product in the Web 2.0 look: one rounded white sheet floating on a striped, sunny page, opened by a thin glossy strip and a tall white row with the brand and a few large word links, then a dark band with the claim and a ticked list, four plan boxes side by side and a long comparison table. It was common from about 2005 to 2009 on the sites of small web applications sold by the month, where the price list was the most visited page after the front page. Corners are round (6 to 10px), every box has a hard lower edge instead of a soft shadow, type is Trebuchet at 13px, and gloss is a single soft fade from light to dark on the strip, the buttons and the table head.",
  "url": "https://chrono.skin/s/v1-w2-545b",
  "preview_url": "https://chrono.skin/s/v1-w2-545b/specimen.html",
  "files": {
    "STYLE.md": "# Web 2.0 gloss plans and sign-up page\n\n## Summary\n\nThe plans page of a hosted web product in the Web 2.0 look: one rounded white sheet floating on a striped, sunny page, opened by a thin glossy strip and a tall white row with the brand and a few large word links, then a dark band with the claim and a ticked list, four plan boxes side by side and a long comparison table. It was common from about 2005 to 2009 on the sites of small web applications sold by the month, where the price list was the most visited page after the front page. Corners are round (6 to 10px), every box has a hard lower edge instead of a soft shadow, type is Trebuchet at 13px, and gloss is a single soft fade from light to dark on the strip, the buttons and the table head.\n\n## Layout\n\n- Page width is fixed: `--size-page` = 900px, the width of the sheet, centred in a 1024px viewport with the patterned page showing on all four sides (`--space-5` above, `--space-6` below). It does not stretch.\n- Everything lives in `.ds-page__sheet`: a box in `--color-canvas` with a 1px `--color-border-strong` frame, `--radius-page` corners and `--shadow-panel`. No text ever sits on the page outside the sheet, so a palette may give the page any colour.\n- Navigation is at the top of the sheet in two rows: `.ds-nav__strip` (`--size-strip` 28px), a glossy strip in the bar colour with one sentence and the account links, then `.ds-nav__row` (`--size-nav` 66px) on the canvas with the brand at the left and, at the right, three large word links and the sign-up button. There is no search field and no second level.\n- Content sits in `.ds-page__body`, padded `--size-pad` (30px) at the sides, so the working width is 840px. Home page, top to bottom: the hero band, bleeding to both edges of the sheet; the `.ds-grid` of four plan boxes; the `.ds-stats` band; a `.ds-section` with its `.ds-section__head` (title and line on the left, the `.ds-tabs` control on the right) over the comparison `.ds-table`; then `.ds-page__columns` with the questions (`.ds-faq`, two columns of them) beside one `.ds-panel` in the rail. The footer strip closes the sheet.\n- Spacing scale: `--space-1` 3px (inside controls, between a title and its line), `--space-2` 6px (gaps between buttons, table cell padding, plan lines), `--space-3` 10px (list row padding, notice padding, gaps in the hero list), `--space-4` 16px (panel and plan box padding, gap between plan boxes, form rows), `--space-5` 24px (gap between stacked blocks, between the rail's blocks, form padding), `--space-6` 36px (hero padding, gap above a headed section; the largest gap on the page).\n- Fixed sizes: buttons and inputs `--size-control` 26px tall, the hero field and button `--size-control-large` 40px, the hero's list `--size-points` 300px, a tick `--size-tick` 18px, the status column of a list `--size-mark` 72px, form fields `--size-field` 300px beside a `--size-label` 130px label column, the dialog `--size-dialog` 400px.\n- Views: the specimen is one example site of five screens, each a `.ds-view` section inside `.ds-page__body`, with the header and the footer written once around them in the sheet. `home` is the plans page (hero, the four plans, stats, the comparison table under its tabs, questions and a panel). `tour` is one page of the tour (text, the example inbox as a list, pagination from page to page; the tour's contents in the rail). `signup` is the sign-up form for one plan (notices, the form; the plan summary and questions in the rail). `billing` is the plan page of a customer (tabs in the page header, usage stats, a toolbar, the invoice table with its badges and their key, the confirming dialog; the current plan, an empty state for extras and the account menu in the rail). `help` is a help article (prose and onward links beside the topics). Links are plain `href=\"#name\"`. The word link of the showing view is marked by a `.ds-page:has(#name:target)` rule, Plans also when no view is named and for `signup`; for `billing` the strip's sign-in link loses its underline.\n- Inner pages drop the hero, the plan boxes and the comparison table. In `.ds-page__body`, top to bottom: `.ds-breadcrumb`, then `.ds-page-header` in the hero's place, a strip in `--color-surface-alt` that bleeds to both edges of the sheet (title and one line on the left; buttons, or the `.ds-tabs` control when the page has views of one object, on the right), then an optional `.ds-stats` band, then `.ds-page__columns` 24px below: `.ds-page__main` (560px) and `.ds-page__rail` of `--size-rail` (250px) on the right, `--size-gutter` (30px) apart. The main column starts with the notices above a form, or a `.ds-buttons--bar` toolbar above a table; further blocks follow as `.ds-section` blocks (`.ds-section--tight`, 24px, when they belong to the block above). The rail holds `.ds-panel` and `.ds-sidebar` blocks about the same subject, enough of them that it ends near the main column; a block that belongs to neither goes below the columns across the full width.\n- Lists and tables are rows divided by 1px rules inside one rounded frame; the plan boxes and panels are the only cards.\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\n- One family: `--font-body`, `--font-heading` and `--font-ui` are Trebuchet MS with Helvetica and Arial behind it. `--font-mono` (Consolas, Lucida Console) is for inline code only.\n- `--text-base` 13px at `--line-body` 1.45. `--text-small` 11px for meta lines, the strip, badges, hints and the footer. `--text-ui` 13px bold (`--weight-ui`) for buttons, tabs and table heads.\n- `--text-display` 30px bold: the hero title and the price in a plan box. `--text-h1` 24px: the brand name, page titles, section titles. `--text-h2` 18px: plan names, panel titles, section labels, stat numbers. `--text-h3` 15px: questions, sidebar titles, the hero list. `--text-large` 17px: the word links, the hero lead, field and button. Nothing is larger than 30px.\n- No tracking, no uppercase transform. Links in running text are underlined (`--link-decoration`) and lose the underline on hover (`--link-decoration-hover` is none); titles, navigation and sidebar links are not underlined (`--link-decoration-quiet`).\n- `--color-page` #ffe080 with `--fill-page`, vertical stripes 24px wide made by mixing the page colour with white: the field the sheet floats on. `--color-canvas` white is the sheet.\n- `--color-bar` #f08c00 orange with `--fill-bar` (one fade, light at the top) and white `--color-bar-text` carrying `--shadow-text`: the strip, the table head and the dialog title. `--color-bar-alt` #fff3c4 with `--fill-bar-alt`: the stats band and the footer; text on it is `--color-bar-alt-text`, links keep `--color-link`.\n- `--color-inverse` #304860 slate with `--fill-inverse` and `--color-inverse-text`: the hero band only. The box around the ticked list and the small note are `--color-inverse-text` mixed with `transparent`.\n- `--color-text` #444444 body; `--color-text-muted` #8c8372 meta and \"not in this plan\"; `--color-heading` #1f1f1f titles, prices, row labels; `--color-heading-alt` #c85a00 panel titles, section labels and prose h2.\n- `--color-link` #1a54ae, `--color-link-hover` #e06000, `--color-link-visited` #6a5a9c, `--color-link-active` #a03000, `--color-link-quiet` #6b6455 for lead lines and tags.\n- `--color-surface-alt` #fffbea: alternate rows, the page header strip, the form box, the empty state, the dialog's action strip. `--color-surface-strong` #ffefb8: group rows of the table and tags.\n- `--color-fill-1` to `--color-fill-4` (yellow, pale blue, pale green, peach): the head of each plan box. Block backgrounds only; text on them is `--color-heading` and `--color-text`.\n- `--color-accent` #ffb030 amber with `--fill-accent` and `--color-accent-text`: the pill badge, the current tab segment, the current page number, the ticks, the frame of the featured plan and the rule under the current word link. `--color-accent-alt` #f03840: the NEW marker only, with `--color-button-text`.\n- `--color-button` #4f9412 green with `--fill-button`, white bold text and `--shadow-text`: the primary button and the brand tile. `--color-button-secondary` #fff6d6 with `--fill-button-secondary` and `--color-button-secondary-text` in a `--color-border-strong` outline: every other button, the tabs control and page numbers.\n- Borders: 1px `--color-border` #e3d5a3 for boxes, `--color-border-muted` #f0e6c0 between rows, `--color-border-strong` #c9a23c for the sheet, secondary buttons and the dialog; `--border-width-strong` 2px for the featured plan, the dialog and the rule under a section label or sidebar title.\n- `--color-notice` with an accent border for notices and `mark`; `--color-danger` on `--color-danger-surface` for errors; `--color-danger` also fills the destructive button and the danger badge. `--color-success` and `--color-warning` are status badge fills, with `--color-button-text` and `--color-accent-text` on them.\n- Radii: `--radius-control` 6px (buttons, inputs, tabs control, page numbers), `--radius-panel` 8px (plan boxes, panels, table, list, notices, dialog), `--radius-pill` 9px (badges), `--radius-page` 10px (the sheet).\n- Shadows are hard edges, not blurs: `--shadow-panel` (2px under the sheet, plan boxes and panels), `--shadow-control` (1px under buttons and the tabs control), `--shadow-control-hover` 2px, `--shadow-control-pressed` inset. Only `--shadow-dialog` is soft. `--transition` is none.\n- One-off shades are `color-mix()` over tokens: the button outlines (`--color-button` or `--color-danger` mixed with `--color-shadow`), the fade of the destructive button (`--color-danger` mixed with `--color-surface`), and the translucent box in the hero.\n\n- Matte, not glossy: `--fill-bar-alt`, `--fill-inverse`, `--fill-accent`, `--fill-panel` and `--fill-button-secondary` are flat colours. Only `--fill-bar` (12% lighter at the top) and `--fill-button` (18% lighter at the top) carry a soft sheen with no hard break.\n- Softly rounded boxes, nearly square controls: `--radius-panel` and `--radius-page` 6px, `--radius-control` and `--radius-pill` 3px.\n- No shadows of any kind: `--shadow-panel`, `--shadow-control*`, `--shadow-dialog` and `--shadow-text` are none.\n- `--border-width` and `--border-width-strong` are 1px solid. `--focus-ring` is a 1px dotted outline in `--color-focus`. `--transition` none.\n\n## Components\n\n- `.ds-page`: on `<body>`; paints `--fill-page`. `.ds-page__sheet` is the floating sheet, `.ds-page__body` the padded content, `.ds-page__columns` holds `.ds-page__main` and `.ds-page__rail`. `.ds-section` separates blocks by 36px (`.ds-section--tight` 24px); `.ds-section__head` puts a `.ds-section__title` and `.ds-section__lead` beside a control; `.ds-section__label` is a smaller orange heading over a 2px rule. `.ds-view` is one screen of the example site (`.ds-view--home` the one shown first).\n- `.ds-nav`: the header at the top of the sheet. `.ds-nav__strip` holds `.ds-nav__note` and `.ds-nav__tools` of underlined `.ds-nav__tool` links (the one whose page shows sits on a darker rounded block); `.ds-nav__row` holds the `.ds-brand`, `.ds-nav__links` of large `.ds-nav__link` words (current: `is-current`, heading colour over a 2px accent rule) and one small primary button.\n- `.ds-brand`: the site's mark and name at the left of the header row, linking home; one per page. `.ds-brand__mark` is a tile dressed like the primary button (`--fill-button`, a darker outline, `--radius-control`, `--shadow-control`) with the mark in `--color-button-text`, 1.4 times the size of the name. `.ds-brand__name` is the name in `--font-heading` at `--text-h1` in `--color-heading`, because it sits on the canvas. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-hero`: the page introduction, an inverted band across the sheet. `.ds-hero__main` holds `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__action` (a `.ds-form__input--large` and a `.ds-button--large`) and `.ds-hero__note` with a `.ds-hero__note-link`; `.ds-hero__points` on the right is a translucent box of `.ds-hero__point` lines (last: `is-last`), each starting with a round `.ds-hero__tick`. One per site, on the home page.\n- `.ds-page-header`: the head of an inner page instead of the hero: a tinted strip across the sheet with `.ds-page-header__main` (`.ds-page-header__title`, one `.ds-page-header__text` line) and `.ds-page-header__actions` (at most two buttons, or the tabs control). One per inner page.\n- `.ds-stat`: one figure; three of them sit in the `.ds-stats` band (first: `is-first`), divided by vertical rules. `.ds-stat__number` (18px bold) and `.ds-stat__label` (11px) share one line. For totals under the plans or under a page header.\n- `.ds-grid`: the row of four plans. Each `.ds-grid__cell` (`--1` to `--4` for the fill of its head; `is-featured` for the 2px accent frame) has a `.ds-grid__head` with `.ds-grid__title`, `.ds-grid__price`, `.ds-grid__per` and an optional `.ds-grid__flag` badge, and a `.ds-grid__body` with `.ds-grid__lines` of ruled `.ds-grid__line` entries (`is-off` for what a plan lacks), an optional `.ds-grid__text` and one `.ds-button--wide`. Use it for two to four things offered side by side; only the featured one gets a primary button.\n- `.ds-tabs`: a joined control of two to four segments (`.ds-tabs__item`, first: `is-first`; `.ds-tabs__tab`, current: `is-current` in the accent fill; `.ds-tabs__count` for a plain number). It sits at the right end of a `.ds-section__head` or in a page header, never on a line of its own.\n- `.ds-prose`: long text: h1, h2 (orange), h3, p, ul, ol, code, strong, mark and underlined links.\n- `.ds-link`: any link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--title` (no underline) for titles and sidebar entries, `.ds-link--quiet` (grey, no underline). `.ds-links` lays several out in a row.\n- `.ds-button`: primary action: green fade, white bold 13px, 26px tall, 6px corners, a hard 1px lower edge. Variants `.ds-button--secondary` (cream, the usual button), `.ds-button--danger` (`--color-danger`, only for what removes or cannot be undone), `.ds-button--large` (40px, the hero) and `.ds-button--wide` (fills its box). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row; `.ds-buttons--bar` the toolbar over a table. One primary button per form, panel, plan row or dialog.\n- `.ds-form`: a tinted rounded box with labels in a left column: `.ds-form__row`, bold `.ds-form__label`, `.ds-form__field` holding `.ds-form__input`, `.ds-form__select` or `.ds-form__textarea` (300px wide, corners of `--radius-control`); `.ds-form__hint` and `.ds-form__error`; `is-error`, `is-focus`, `is-disabled`; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions` under a rule, aligned with the fields. `.ds-form__input--large` is the hero field.\n- `.ds-table`: a rounded frame with a glossy `.ds-table__head` row, `.ds-table__row` (`is-alt` for alternate rows) of `.ds-table__cell`; `is-label` bolds the first column of a comparison, `is-numeric` right-aligns and bolds, `is-off` greys what is missing; `.ds-table__group` is a full-width group row in `--color-surface-strong`; `.ds-table__note` a small line under the table.\n- `.ds-list`: rows in a rounded frame: each `.ds-list__item` (first: `is-first`, alternate: `is-alt`) has a `.ds-list__mark` column with one status badge, a `.ds-list__body` (`.ds-list__title` holding a `.ds-link--title`, `.ds-list__meta`) and a right-aligned `.ds-list__side`.\n- `.ds-faq`: two columns of `.ds-faq__item`, each a bold `.ds-faq__question` over a plain `.ds-faq__answer`.\n- `.ds-panel`: a rounded box with the panel fade and the hard lower edge: `.ds-panel__title`, `.ds-panel__body` with `.ds-panel__text`, optional `.ds-panel__lines` of `.ds-panel__line` pairs (`is-total` for the bold last one) and `.ds-panel__actions`. `.ds-panel--last` drops the lower margin. For a short invitation or a summary in the rail.\n- `.ds-badge`: small bold pill, amber by default. Variants `.ds-badge--count` (button colours), `.ds-badge--tag` (pale, outlined, a label link), `.ds-badge--new` (red, the word NEW typed in capitals), and the status pills `.ds-badge--success`, `.ds-badge--warning`, `.ds-badge--danger`; one per row. `.ds-badges` lays a key out in a row.\n- `.ds-sidebar`: a block of links in the rail: `.ds-sidebar__title` over a 2px rule, `.ds-sidebar__list` of ruled `.ds-sidebar__item` rows (current: `is-current`), each a link with an optional `.ds-sidebar__count`. `.ds-sidebar--after` adds space above a block that follows a box.\n- `.ds-notice`: a rounded message: pale yellow with an accent border and a bold `.ds-notice__title`. `.ds-notice--error` in the danger colours. `is-first` removes the top margin.\n- `.ds-pagination`: a centred row of small cream keys: `.ds-pagination__link`, current `is-current` (accent fill), unavailable `is-disabled`, `.ds-pagination__gap`.\n- `.ds-breadcrumb`: an 11px trail of `.ds-link` items with `.ds-breadcrumb__sep` and a bold `.ds-breadcrumb__current`, above the page header.\n- `.ds-dialog`: a rounded box in a 2px frame with a glossy `.ds-dialog__title` bar (holding `.ds-dialog__close`), `.ds-dialog__body` with `.ds-dialog__text`, and a `.ds-dialog__actions` strip with the buttons at the right. It sits on `.ds-dialog__backdrop`.\n- `.ds-empty`: a tinted rounded box with `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: the pale strip that closes the sheet: `.ds-footer__links` on the left, `.ds-footer__legal` on the right.\n- `.ds-menu`: a drop-down under a link of the header row, for the pages of the section it names (the four pages of the tour). The `li` carries `.ds-menu`, its link gets a `.ds-menu__caret`, and `.ds-menu__list` holds `.ds-menu__item` rows of `.ds-menu__link`; `is-ruled` draws a hairline above a row. A white hairline box with rounded lower corners that opens on hover and on keyboard focus (`is-open` shows it statically). One level only.\n- `.ds-tooltip`: a small round question mark (`.ds-tooltip__trigger`, a link to the help page) that shows `.ds-tooltip__tip`, a pale speech bubble in the notice colours, above it on hover or focus. It follows a row label of the plan table or a form label and explains one word in one sentence; a price or a limit is never hidden in it.\n- `.ds-accordion`: questions that open and close: a hairline box of `details.ds-accordion__item` (first: `is-first`), each a pale glossy `.ds-accordion__title` strip with a plus or minus sign and a `.ds-accordion__body` line. For the three questions beside the sign-up form; the open list on the front page stays `.ds-faq`.\n- `.ds-progress`: how much of a plan is used: `progress.ds-progress__bar`, a pill-shaped track filled with the glossy button fill, with an optional `.ds-progress__label` line above it. Variants of the bar: `.ds-progress__bar--success` (plenty left), `--warning` (nearly full), `--danger` (full). In `.ds-stats--meters` one sits under each figure of the account page.\n- `.ds-avatar`: the picture of a person: a 22px rounded tile with a head and shoulders drawn in CSS, tinted by `.ds-avatar--1` to `--4`. It sits before a name or a \"write to us\" link in a sidebar row (`.ds-sidebar__item--person` centres the row); `.ds-avatar--large` doubles it. Decorative: the words beside it carry the meaning.\n\n## Never\n\n- `row-gap <= 16px`: rows touch, divided by a rule.\n- `block-gap <= 36px`: sections are at most 36px apart.\n- `content-width <= 900px`: all text stays inside the sheet.\n- `palette-colours <= 36`: slate tints, steel blue, black, greys, one orange, one brown and the status colours.\n- `font-size <= 30px`: the hero title and the prices are the largest text.\n- `font-size >= 11px`: nothing is smaller than the meta size.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 2`: Trebuchet for everything, a monospace for inline code.\n- `line-height <= 1.45`: body text is set at 1.45.\n- `letter-spacing = 0px`: no tracking anywhere.\n- `uppercase-text = 0%`: nothing is uppercased by CSS.\n- `underlined-links <= 60%`: titles, navigation, tabs and sidebar links are not underlined.\n- `border-radius <= 6px`: corners are 3 or 6px.\n- `border-width <= 1px`: every border and rule is a 1px hairline.\n- `box-shadow = none`: nothing casts a shadow.\n- `text-shadow = none`: text is flat on its bar.\n- `gradient-fills <= 10%`: only the bar, the table head and the primary button carry a sheen.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. Things offered side by side are `.ds-grid` cells with a coloured head; anything compared line by line is a `.ds-table` with `is-label` and group rows; a short invitation or a sum is a `.ds-panel` in the rail and a set of links a `.ds-sidebar`. A new band across the sheet takes `--fill-bar-alt` (or `--fill-inverse` for the one introduction of the site) and bleeds to the edges with a negative margin of `--size-pad`; a new box takes `--color-surface`, a 1px `--color-border`, `--radius-panel` and `--shadow-panel`. Keep the fade to bars, buttons and badges, keep rows ruled instead of carded, and make any extra shade with `color-mix()` over existing colour tokens.\n",
    "components.css": ":root {\n  --size-page: 900px;\n  --size-pad: 30px;\n  --size-rail: 250px;\n  --size-gutter: 30px;\n  --size-strip: 28px;\n  --size-nav: 66px;\n  --size-control: 26px;\n  --size-control-large: 40px;\n  --size-points: 300px;\n  --size-tick: 18px;\n  --size-mark: 72px;\n  --size-field: 300px;\n  --size-label: 130px;\n  --size-textarea: 70px;\n  --size-dialog: 400px;\n  --space-1: 3px;\n  --space-2: 6px;\n  --space-3: 10px;\n  --space-4: 16px;\n  --space-5: 24px;\n  --space-6: 36px;\n  --size-drop: 190px;\n  --size-tip: 220px;\n  --size-meter: 12px;\n  --size-avatar: 22px;\n}\n\n/* shell: one rounded sheet floating on the patterned page; header, bands and footer all live inside it */\n.ds-page {\n  margin: 0;\n  padding: var(--space-5) 0 var(--space-6);\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 { box-sizing: border-box; }\n.ds-page__sheet {\n  width: var(--size-page);\n  margin: 0 auto;\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-page);\n  background: var(--color-canvas);\n  box-shadow: var(--shadow-panel);\n  overflow: hidden;\n}\n.ds-page__body { padding: 0 var(--size-pad) var(--space-6); }\n.ds-page__columns {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--size-gutter);\n  margin: var(--space-5) 0 0;\n}\n.ds-page__main {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-page__rail {\n  flex: 0 0 var(--size-rail);\n  width: var(--size-rail);\n}\n.ds-section { margin: var(--space-6) 0 0; }\n.ds-section--tight { margin-top: var(--space-5); }\n.ds-section__title {\n  margin: 0 0 var(--space-1);\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: 0;\n  color: var(--color-link-quiet);\n}\n.ds-section__head {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-5);\n  margin: 0 0 var(--space-4);\n}\n.ds-section__label {\n  margin: 0 0 var(--space-3);\n  padding: 0 0 var(--space-2);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border);\n  color: var(--color-heading-alt);\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\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/* nav: a thin bar of account links, then a tall white row with the brand, large word links and the sign-up button */\n.ds-nav { margin: 0; }\n.ds-nav__strip {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  height: var(--size-strip);\n  padding: 0 var(--size-pad);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  font-size: var(--text-small);\n  text-shadow: var(--shadow-text);\n}\n.ds-nav__note { margin: 0; }\n.ds-nav__tools {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__tool {\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  text-decoration: var(--link-decoration);\n}\n.ds-nav__tool:hover,\n.ds-nav__tool.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-nav__row {\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\n  height: var(--size-nav);\n  padding: 0 var(--size-pad);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-brand {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--space-2);\n  margin-right: auto;\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--text-h1) * 1.4);\n  height: calc(var(--text-h1) * 1.4);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 70%, var(--color-shadow));\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 72%;\n  height: 72%;\n}\n.ds-brand__name {\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(--display-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-nav__links {\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__link {\n  display: block;\n  padding: var(--space-1) 0;\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  color: var(--color-link);\n  font-family: var(--font-ui);\n  font-size: var(--text-large);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover { color: var(--color-link-hover); }\n.ds-nav__link.is-current {\n  border-bottom-color: var(--color-accent);\n  color: var(--color-heading);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"] { border-bottom-color: var(--color-accent); color: var(--color-heading); }\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"] { border-bottom-color: var(--color-accent); color: var(--color-heading); }\n.ds-page:has(#tour:target) .ds-nav__link[href=\"#tour\"] { border-bottom-color: var(--color-accent); color: var(--color-heading); }\n.ds-page:has(#help:target) .ds-nav__link[href=\"#help\"] { border-bottom-color: var(--color-accent); color: var(--color-heading); }\n.ds-page:has(#signup:target) .ds-nav__link[href=\"#home\"] { border-bottom-color: var(--color-accent); color: var(--color-heading); }\n.ds-page:has(#billing:target) .ds-nav__tool[href=\"#billing\"] {\n  padding: var(--space-1) var(--space-2);\n  border-radius: var(--radius-control);\n  background: color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow));\n  outline: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 30%, transparent);\n  outline-offset: calc(0px - var(--border-width));\n  text-decoration: none;\n}\n\n/* hero: an inverted band across the sheet; claim, a field with the main action, and a list of ticked points */\n.ds-hero {\n  display: flex;\n  align-items: center;\n  gap: var(--space-6);\n  margin: 0 calc(0px - var(--size-pad));\n  padding: var(--space-6) var(--size-pad);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n}\n.ds-hero__main {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-hero__title {\n  margin: 0 0 var(--space-2);\n  color: var(--color-inverse-text);\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}\n.ds-hero__lead {\n  margin: 0 0 var(--space-4);\n  font-size: var(--text-large);\n  line-height: var(--line-body);\n}\n.ds-hero__action {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n}\n.ds-hero__note {\n  margin: var(--space-3) 0 0;\n  font-size: var(--text-small);\n  opacity: 0.8;\n}\n.ds-hero__note-link {\n  color: var(--color-inverse-text);\n  text-decoration: var(--link-decoration);\n}\n.ds-hero__points {\n  flex: 0 0 var(--size-points);\n  margin: 0;\n  padding: var(--space-4) var(--space-5);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 25%, transparent);\n  border-radius: var(--radius-panel);\n  background: color-mix(in srgb, var(--color-inverse-text) 8%, transparent);\n  list-style: none;\n  font-size: var(--text-h3);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n.ds-hero__point {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  margin: 0 0 var(--space-3);\n}\n.ds-hero__point.is-last { margin-bottom: 0; }\n.ds-hero__tick {\n  display: flex;\n  flex: 0 0 var(--size-tick);\n  align-items: center;\n  justify-content: center;\n  width: var(--size-tick);\n  height: var(--size-tick);\n  border-radius: 50%;\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n}\n.ds-hero__tick svg {\n  display: block;\n  width: 62%;\n  height: 62%;\n}\n\n/* grid: the plans, four columns; a block of colour with the name and price over a white list of what is in it */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  align-items: start;\n  gap: var(--space-4);\n  margin: var(--space-5) 0 0;\n}\n.ds-grid__cell {\n  position: relative;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface);\n  box-shadow: var(--shadow-panel);\n  text-align: center;\n  overflow: hidden;\n}\n.ds-grid__cell.is-featured { border: var(--border-width-strong) var(--border-style) var(--color-accent); }\n.ds-grid__head {\n  padding: var(--space-4) var(--space-3) var(--space-3);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--color-surface-alt);\n}\n.ds-grid__cell--1 .ds-grid__head { background: var(--color-fill-1); }\n.ds-grid__cell--2 .ds-grid__head { background: var(--color-fill-2); }\n.ds-grid__cell--3 .ds-grid__head { background: var(--color-fill-3); }\n.ds-grid__cell--4 .ds-grid__head { background: var(--color-fill-4); }\n.ds-grid__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-grid__price {\n  margin: var(--space-1) 0 0;\n  color: var(--color-heading);\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}\n.ds-grid__per {\n  margin: 0;\n  color: var(--color-text);\n  font-size: var(--text-small);\n}\n.ds-grid__flag { margin: var(--space-2) 0 0; }\n.ds-grid__body { padding: var(--space-3) var(--space-4) var(--space-4); }\n.ds-grid__lines {\n  margin: 0 0 var(--space-4);\n  padding: 0;\n  list-style: none;\n}\n.ds-grid__line {\n  padding: var(--space-2) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-grid__line.is-off { color: var(--color-text-muted); }\n.ds-grid__text {\n  margin: var(--space-3) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* stats: one tinted band, the figures side by side with rules between */\n.ds-stats {\n  display: flex;\n  margin: var(--space-5) 0 0;\n  padding: var(--space-3) 0;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  list-style: none;\n}\n.ds-stat {\n  display: flex;\n  flex: 1 1 0;\n  align-items: baseline;\n  justify-content: center;\n  gap: var(--space-2);\n  min-width: 0;\n  padding: 0 var(--space-3);\n  border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat.is-first { border-left: 0; }\n.ds-stat__number {\n  color: var(--color-bar-alt-text);\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-stat__label {\n  color: var(--color-bar-alt-text);\n  font-size: var(--text-small);\n}\n\n/* tabs: one joined control of segments; the current segment takes the accent fill */\n.ds-tabs {\n  display: flex;\n  flex: 0 0 auto;\n  margin: 0;\n  padding: 0;\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-control);\n  background: var(--fill-button-secondary);\n  box-shadow: var(--shadow-control);\n  list-style: none;\n  overflow: hidden;\n}\n.ds-tabs__item { border-left: var(--border-width) var(--border-style) var(--color-border-strong); }\n.ds-tabs__item.is-first { border-left: 0; }\n.ds-tabs__tab {\n  display: block;\n  padding: 0 var(--space-4);\n  color: var(--color-button-secondary-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--size-control);\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { text-decoration: underline; }\n.ds-tabs__tab.is-current {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n}\n.ds-tabs__count { font-weight: var(--weight-body); }\n\n/* page header: head of an inner page; a tinted strip across the sheet under the breadcrumb */\n.ds-page-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-5);\n  margin: 0 calc(0px - var(--size-pad));\n  padding: var(--space-4) var(--size-pad);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--color-surface-alt);\n}\n.ds-page-header__main {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-page-header__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-page-header__text {\n  margin: var(--space-1) 0 0;\n  color: var(--color-link-quiet);\n}\n.ds-page-header__actions {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* typography */\n.ds-prose { margin: 0; }\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: var(--space-5) 0 var(--space-2);\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 { margin-top: 0; font-size: var(--text-h1); }\n.ds-prose h2 { color: var(--color-heading-alt); font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); }\n.ds-prose p { margin: 0 0 var(--space-3); }\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-3);\n  padding: 0 0 0 var(--space-5);\n}\n.ds-prose li { margin: 0 0 var(--space-1); }\n.ds-prose strong { font-weight: var(--weight-bold); }\n.ds-prose mark {\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-control);\n  background: var(--color-surface-alt);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-prose a { color: var(--color-link); text-decoration: var(--link-decoration); }\n\n/* links */\n.ds-links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-5);\n  margin: 0;\n}\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited { color: var(--color-link-visited); }\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 { color: var(--color-link-active); }\n.ds-link:focus-visible,\n.ds-link.is-focus { outline: var(--focus-ring); }\n.ds-link--title { text-decoration: var(--link-decoration-quiet); }\n.ds-link--quiet {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover { color: var(--color-link); }\n\n/* buttons */\n.ds-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n}\n.ds-buttons--bar { margin: 0 0 var(--space-4); }\n.ds-button {\n  display: inline-block;\n  height: var(--size-control);\n  margin: 0;\n  padding: 0 var(--space-4);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 75%, var(--color-shadow));\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  box-shadow: var(--shadow-control);\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: calc(var(--size-control) - var(--border-width) - var(--border-width));\n  text-align: center;\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  transition: var(--transition);\n  cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  box-shadow: var(--shadow-control-hover);\n  color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n  background: var(--color-button);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus { outline: var(--focus-ring); }\n.ds-button--large {\n  height: var(--size-control-large);\n  padding: 0 var(--space-5);\n  font-size: var(--text-large);\n  line-height: calc(var(--size-control-large) - var(--border-width) - var(--border-width));\n}\n.ds-button--wide {\n  display: block;\n  width: 100%;\n}\n.ds-button--secondary {\n  border-color: var(--color-border-strong);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  border-color: var(--color-link-quiet);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active { background: var(--color-button-secondary); }\n.ds-button--danger {\n  border-color: color-mix(in srgb, var(--color-danger) 75%, var(--color-shadow));\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-surface) 30%) 0, var(--color-danger) 70%);\n  color: var(--color-button-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-surface) 42%) 0, color-mix(in srgb, var(--color-danger), var(--color-surface) 10%) 70%);\n  color: var(--color-button-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active { background: var(--color-danger); }\n.ds-button:disabled,\n.ds-button.is-disabled {\n  border-color: var(--color-border);\n  background: var(--color-disabled);\n  box-shadow: none;\n  color: var(--color-disabled-text);\n  text-shadow: none;\n  cursor: default;\n}\n\n/* form: a tinted, framed box; labels in a left column */\n.ds-form {\n  margin: 0;\n  padding: 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}\n.ds-form__row {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-4);\n  margin: 0 0 var(--space-3);\n}\n.ds-form__label {\n  flex: 0 0 var(--size-label);\n  padding-top: var(--space-1);\n  color: var(--color-heading);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n}\n.ds-form__field {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  width: var(--size-field);\n  max-width: 100%;\n  margin: 0;\n  padding: var(--space-1) var(--space-2);\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-body);\n}\n.ds-form__input,\n.ds-form__select { height: var(--size-control); }\n.ds-form__select { width: auto; padding: 0 var(--space-1); }\n.ds-form__input--large {\n  flex: 1 1 0;\n  width: auto;\n  min-width: 0;\n  height: var(--size-control-large);\n  padding: 0 var(--space-3);\n  font-size: var(--text-large);\n}\n.ds-form__textarea {\n  display: block;\n  height: var(--size-textarea);\n  resize: vertical;\n}\n.ds-form__input:focus,\n.ds-form__input.is-focus,\n.ds-form__select:focus,\n.ds-form__select.is-focus,\n.ds-form__textarea:focus,\n.ds-form__textarea.is-focus {\n  outline: var(--focus-ring);\n  border-color: var(--color-focus);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n  border-color: var(--color-border);\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n}\n.ds-form__input.is-error {\n  border-color: var(--color-danger);\n  background: var(--color-danger-surface);\n}\n.ds-form__error {\n  margin: var(--space-1) 0 0;\n  color: var(--color-danger);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n  margin: var(--space-1) 0 0;\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  padding-top: var(--space-1);\n}\n.ds-form__checkbox { margin: 0; }\n.ds-form__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  margin: var(--space-4) 0 0;\n  padding: var(--space-4) 0 0 calc(var(--size-label) + var(--space-4));\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n\n/* table: the comparison of plans; a glossy head, group rows, ruled rows */\n.ds-table {\n  width: 100%;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-collapse: separate;\n  border-spacing: 0;\n  border-radius: var(--radius-panel);\n  overflow: hidden;\n  line-height: var(--line-body);\n}\n.ds-table__head {\n  padding: var(--space-2) var(--space-4);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-align: left;\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n}\n.ds-table__group {\n  padding: var(--space-1) var(--space-4);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  text-align: left;\n}\n.ds-table__cell {\n  padding: var(--space-2) var(--space-4);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  background: var(--color-surface);\n  color: var(--color-text);\n  vertical-align: middle;\n}\n.ds-table__row.is-alt .ds-table__cell { background: var(--color-surface-alt); }\n.ds-table__cell.is-label {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-table__head.is-numeric,\n.ds-table__cell.is-numeric { text-align: right; }\n.ds-table__cell.is-numeric { font-weight: var(--weight-bold); }\n.ds-table__cell.is-off { color: var(--color-text-muted); }\n.ds-table__note {\n  margin: var(--space-2) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* list: rows of mail in a framed box; a status mark, the subject, who and when */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface);\n  list-style: none;\n  overflow: hidden;\n}\n.ds-list__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-3) var(--space-4);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item.is-first { border-top: 0; }\n.ds-list__item.is-alt { background: var(--color-surface-alt); }\n.ds-list__mark {\n  flex: 0 0 var(--size-mark);\n  width: var(--size-mark);\n}\n.ds-list__body {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-list__title {\n  margin: 0;\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n}\n.ds-list__meta {\n  margin: 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-list__side {\n  flex: 0 0 auto;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  text-align: right;\n}\n\n/* questions: bold question, plain answer, two columns of them */\n.ds-faq {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: var(--space-4) var(--size-gutter);\n  margin: 0;\n}\n.ds-faq__item { margin: 0; }\n.ds-faq__question {\n  margin: 0 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-faq__answer { margin: 0; }\n\n/* badge: pill with the accent fill; flat status pills, a count, a tag, a new marker */\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: calc(var(--text-small) + var(--space-2));\n  text-decoration: none;\n  vertical-align: baseline;\n  white-space: nowrap;\n}\n.ds-badge--count {\n  background: var(--color-button);\n  color: var(--color-button-text);\n}\n.ds-badge--tag {\n  border: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--color-surface-strong);\n  color: var(--color-link-quiet);\n  font-weight: var(--weight-body);\n  line-height: calc(var(--text-small) + var(--space-1));\n}\n.ds-badge--tag:hover,\n.ds-badge--tag.is-hover { color: var(--color-link); }\n.ds-badge--new {\n  background: var(--color-accent-alt);\n  color: var(--color-button-text);\n}\n.ds-badge--success {\n  background: var(--color-success);\n  color: var(--color-button-text);\n}\n.ds-badge--warning {\n  background: var(--color-warning);\n  color: var(--color-accent-text);\n}\n.ds-badge--danger {\n  background: var(--color-danger);\n  color: var(--color-button-text);\n}\n.ds-badges {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-4);\n  margin: var(--space-3) 0 0;\n  color: var(--color-link-quiet);\n  font-size: var(--text-small);\n}\n\n/* panel: a rounded box with a faint fade and a hard lower edge */\n.ds-panel {\n  margin: 0 0 var(--space-5);\n  padding: var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-panel--last { margin-bottom: 0; }\n.ds-panel__title {\n  margin: 0 0 var(--space-2);\n  color: var(--color-heading-alt);\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-panel__body { margin: 0; }\n.ds-panel__text { margin: 0 0 var(--space-3); }\n.ds-panel__lines {\n  margin: 0 0 var(--space-3);\n  padding: 0;\n  list-style: none;\n}\n.ds-panel__line {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-1) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-panel__line.is-total {\n  border-bottom: 0;\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-panel__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-3);\n}\n\n/* sidebar: a headed block of links in the right rail */\n.ds-sidebar { margin: 0 0 var(--space-5); }\n.ds-sidebar__title {\n  margin: 0;\n  padding: 0 0 var(--space-2);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-border);\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-sidebar__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-sidebar__item {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-2);\n  padding: var(--space-2) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-sidebar__item.is-current { font-weight: var(--weight-bold); }\n.ds-sidebar__item.is-current .ds-link { color: var(--color-heading); }\n.ds-sidebar__count {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  white-space: nowrap;\n}\n\n/* notice */\n.ds-notice {\n  margin: var(--space-3) 0 0;\n  padding: var(--space-3) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-accent);\n  border-radius: var(--radius-panel);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n}\n.ds-notice.is-first { margin-top: 0; }\n.ds-notice__title { font-weight: var(--weight-bold); }\n.ds-notice--error {\n  border-color: var(--color-danger);\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n}\n\n/* pagination: small glossy keys */\n.ds-pagination {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-1);\n  margin: var(--space-5) 0 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--text-small);\n}\n.ds-pagination__link {\n  display: block;\n  padding: var(--space-1) var(--space-3);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-control);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  font-weight: var(--weight-bold);\n  text-decoration: none;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { border-color: var(--color-link-quiet); }\n.ds-pagination__link.is-current {\n  border-color: var(--color-accent);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n}\n.ds-pagination__link.is-disabled {\n  border-color: var(--color-border);\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n  font-weight: var(--weight-body);\n}\n.ds-pagination__gap { padding: 0 var(--space-1); color: var(--color-text-muted); }\n\n/* breadcrumb */\n.ds-breadcrumb {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: var(--space-3) 0;\n  list-style: none;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  line-height: var(--line-body);\n}\n.ds-breadcrumb__sep { color: var(--color-text-muted); }\n.ds-breadcrumb__current { color: var(--color-text); font-weight: var(--weight-bold); }\n\n/* dialog: a rounded box with a glossy title bar on a dimmed field */\n.ds-dialog__backdrop {\n  display: flex;\n  justify-content: center;\n  padding: var(--space-5);\n  border-radius: var(--radius-panel);\n  background: var(--color-overlay);\n}\n.ds-dialog {\n  width: var(--size-dialog);\n  max-width: 100%;\n  border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface);\n  box-shadow: var(--shadow-dialog);\n  overflow: hidden;\n}\n.ds-dialog__title {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-body);\n  text-shadow: var(--shadow-text);\n}\n.ds-dialog__close {\n  color: var(--color-bar-text);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  text-decoration: var(--link-decoration);\n}\n.ds-dialog__body { padding: var(--space-4); }\n.ds-dialog__text { margin: 0; }\n.ds-dialog__actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  padding: var(--space-3) var(--space-4);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  background: var(--color-surface-alt);\n}\n\n/* empty state */\n.ds-empty {\n  padding: var(--space-5) var(--space-4);\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__title {\n  margin: 0 0 var(--space-1);\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-empty__text {\n  margin: 0 0 var(--space-3);\n  color: var(--color-link-quiet);\n}\n\n/* footer: the foot of the sheet, a pale strip with links on the left and small print on the right */\n.ds-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-5);\n  margin: 0;\n  padding: var(--space-4) var(--size-pad);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-size: var(--text-small);\n}\n.ds-footer__links {\n  display: flex;\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-weight: var(--weight-bold);\n}\n.ds-footer__legal { margin: 0; }\n.ds-sidebar--after { margin-top: var(--space-5); }\n\n/* menu: a drop-down under a navigation item; it opens on hover and on keyboard focus */\n.ds-menu { position: relative; }\n.ds-menu__caret {\n  display: inline-block;\n  width: calc(var(--text-small) * 0.6);\n  height: calc(var(--text-small) * 0.36);\n  background: currentColor;\n  clip-path: polygon(0 0, 100% 0, 50% 100%);\n  margin-left: var(--space-1);\n  font-size: var(--text-small);\n  vertical-align: calc(var(--text-small) * 0.14);\n}\n.ds-menu__list {\n  display: none;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 20;\n  width: var(--size-drop);\n  margin: 0;\n  padding: var(--space-1) 0;\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n  background: var(--color-surface);\n  box-shadow: var(--shadow-dialog);\n  list-style: none;\n  text-align: left;\n  text-shadow: none;\n}\n.ds-menu:hover .ds-menu__list,\n.ds-menu:focus-within .ds-menu__list,\n.ds-menu.is-open .ds-menu__list { display: block; }\n.ds-menu__item.is-ruled {\n  margin-top: var(--space-1);\n  padding-top: var(--space-1);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-menu__link {\n  display: block;\n  padding: var(--space-2) var(--space-3);\n  color: var(--color-link);\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  text-decoration: var(--link-decoration-quiet);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n  background: var(--color-surface-strong);\n  color: var(--color-link-hover);\n}\n.ds-menu__link:focus-visible,\n.ds-menu__link.is-focus { outline: var(--focus-ring); }\n\n/* accordion: questions that open and close, one glossy strip each */\n.ds-accordion {\n  margin: 0 0 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);\n  overflow: hidden;\n}\n.ds-accordion__item { border-top: var(--border-width) var(--border-style) var(--color-border); }\n.ds-accordion__item.is-first { border-top: 0; }\n.ds-accordion__title {\n  display: block;\n  padding: var(--space-2) var(--space-3);\n  background: linear-gradient(to bottom, var(--color-surface-alt) 0, var(--color-surface-strong) 100%);\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  cursor: pointer;\n}\n.ds-accordion__title::-webkit-details-marker { display: none; }\n.ds-accordion__title::before {\n  content: \"\";\n  display: inline-block;\n  width: calc(var(--text-ui) * 0.7);\n  height: calc(var(--text-ui) * 0.7);\n  margin-right: calc(var(--space-4) - calc(var(--text-ui) * 0.7));\n  background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-ui) * 0.12)) no-repeat, linear-gradient(currentColor, currentColor) center / max(var(--border-width), calc(var(--text-ui) * 0.12)) 100% no-repeat;\n  color: var(--color-link-quiet);\n}\n.ds-accordion__item[open] > .ds-accordion__title::before { background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-ui) * 0.12)) no-repeat; }\n.ds-accordion__title:hover,\n.ds-accordion__title.is-hover { color: var(--color-link); }\n.ds-accordion__title:focus-visible,\n.ds-accordion__title.is-focus { outline: var(--focus-ring); }\n.ds-accordion__body {\n  margin: 0;\n  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + var(--space-4));\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  color: var(--color-text);\n}\n\n/* tooltip: a question mark that shows a speech-bubble hint on hover or focus */\n.ds-tooltip {\n  display: inline-block;\n  position: relative;\n  vertical-align: baseline;\n}\n.ds-tooltip__trigger {\n  display: inline-block;\n  width: calc(var(--text-small) * 1.5);\n  height: calc(var(--text-small) * 1.5);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: 50%;\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: calc(var(--text-small) * 1.5 - var(--border-width) - var(--border-width));\n  text-align: center;\n  text-decoration: none;\n  text-shadow: none;\n  cursor: help;\n}\n.ds-tooltip__trigger:focus-visible,\n.ds-tooltip__trigger.is-focus { outline: var(--focus-ring); }\n.ds-tooltip__tip {\n  display: none;\n  position: absolute;\n  bottom: calc(100% + var(--space-3));\n  left: calc(0px - var(--space-3));\n  z-index: 30;\n  width: var(--size-tip);\n  padding: var(--space-2) var(--space-3);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 45%, var(--color-notice));\n  border-radius: var(--radius-control);\n  background: var(--color-notice);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-notice-text);\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  text-align: left;\n  text-shadow: none;\n  white-space: normal;\n}\n.ds-tooltip__tip::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: calc(var(--space-3) + var(--text-small) * 0.75 - var(--space-2));\n  width: calc(var(--space-2) * 2);\n  height: calc(var(--space-2) * 2);\n  margin-top: calc(0px - var(--space-2));\n  border-right: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 45%, var(--color-notice));\n  border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 45%, var(--color-notice));\n  background: var(--color-notice);\n  transform: rotate(45deg);\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip { display: block; }\n\n/* progress: a glossy bar in a track, with a line saying what it measures */\n.ds-progress { margin: 0 0 var(--space-3); }\n.ds-progress__label {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-2);\n  margin: 0 0 var(--space-1);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-progress__bar {\n  display: block;\n  width: 100%;\n  height: var(--size-meter);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-pill);\n  background: var(--color-surface-strong);\n  overflow: hidden;\n  appearance: none;\n}\n.ds-progress__bar::-webkit-progress-bar { background: var(--color-surface-strong); }\n.ds-progress__bar::-webkit-progress-value { background: var(--fill-button); }\n.ds-progress__bar::-moz-progress-bar { background: var(--fill-button); }\n.ds-progress__bar--success::-webkit-progress-value { background: var(--color-success); }\n.ds-progress__bar--success::-moz-progress-bar { background: var(--color-success); }\n.ds-progress__bar--warning::-webkit-progress-value { background: var(--color-warning); }\n.ds-progress__bar--warning::-moz-progress-bar { background: var(--color-warning); }\n.ds-progress__bar--danger::-moz-progress-bar { background: var(--color-danger); }\n\n/* avatar: the picture of a member who has not sent one, a head and shoulders on a small tile */\n.ds-avatar {\n  display: inline-block;\n  flex: 0 0 auto;\n  position: relative;\n  width: var(--size-avatar);\n  height: var(--size-avatar);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n  background: var(--color-surface-strong);\n  overflow: hidden;\n  vertical-align: middle;\n}\n.ds-avatar::before,\n.ds-avatar::after {\n  content: \"\";\n  position: absolute;\n  border-radius: 50%;\n  background: var(--color-text-muted);\n  opacity: 0.55;\n}\n.ds-avatar::before {\n  top: 16%;\n  left: 32%;\n  width: 36%;\n  height: 36%;\n}\n.ds-avatar::after {\n  top: 58%;\n  left: 12%;\n  width: 76%;\n  height: 76%;\n}\n.ds-avatar--1 { background: var(--color-fill-1); }\n.ds-avatar--3 { background: var(--color-fill-3); }\n.ds-avatar--large {\n  width: calc(var(--size-avatar) * 2);\n  height: calc(var(--size-avatar) * 2);\n}\n\n/* where the added pieces sit in this layout */\n.ds-table__cell .ds-tooltip { margin-left: var(--space-1); }\n.ds-stats--meters .ds-stat { flex-wrap: wrap; }\n.ds-stats--meters .ds-progress {\n  flex: 0 0 100%;\n  margin: var(--space-2) 0 0;\n}\n.ds-sidebar .ds-accordion { margin: var(--space-2) 0 0; }\n.ds-sidebar__item--person { align-items: center; }\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>chronoskin: Web 2.0 gloss plans and sign-up 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<div class=\"ds-page__sheet\">\n\n<header class=\"ds-nav\" data-component=\"nav\">\n  <div class=\"ds-nav__strip\">\n    <p class=\"ds-nav__note\">Thirty days free on every plan. No card needed to start.</p>\n    <ul class=\"ds-nav__tools\">\n      <li><a class=\"ds-nav__tool\" href=\"#billing\">Customer sign in</a></li>\n      <li><a class=\"ds-nav__tool\" href=\"#help\">Questions</a></li>\n    </ul>\n  </div>\n  <div class=\"ds-nav__row\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#\"><span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M2.5 10.5V8a5 5 0 0 1 5-5h9a5 5 0 0 1 5 5v2.5z\" opacity=\".55\"/><path d=\"M2.5 10.5h19V13a5 5 0 0 1-5 5H12l-4.5 3.8V18a5 5 0 0 1-5-5z\"/></svg></span><span class=\"ds-brand__name\">chronoskin</span></a>\n    <ul class=\"ds-nav__links\">\n      <li><a class=\"ds-nav__link\" href=\"#home\">Plans</a></li>\n      <li class=\"ds-menu\" data-component=\"menu\"><a class=\"ds-nav__link\" href=\"#tour\">Tour <span class=\"ds-menu__caret\"></span></a>\n        <ul class=\"ds-menu__list\">\n          <li class=\"ds-menu__item\"><a class=\"ds-menu__link\" href=\"#tour\">1. The shared inbox</a></li>\n          <li class=\"ds-menu__item\"><a class=\"ds-menu__link\" href=\"#tour\">2. Saved replies</a></li>\n          <li class=\"ds-menu__item\"><a class=\"ds-menu__link\" href=\"#tour\">3. Notes for the team</a></li>\n          <li class=\"ds-menu__item\"><a class=\"ds-menu__link\" href=\"#tour\">4. The weekly report</a></li>\n        </ul>\n      </li>\n      <li><a class=\"ds-nav__link\" href=\"#help\">Help</a></li>\n    </ul>\n    <a class=\"ds-button\" href=\"#signup\">Sign up</a>\n  </div>\n</header>\n\n<div class=\"ds-page__body\">\n\n  <section class=\"ds-view ds-view--home\" id=\"home\">\n\n    <div class=\"ds-hero\" data-component=\"hero\">\n      <div class=\"ds-hero__main\">\n        <h1 class=\"ds-hero__title\">One inbox for the whole shop</h1>\n        <p class=\"ds-hero__lead\">chronoskin puts the mail from your customers on one page, so everyone can see what has been answered and what is still waiting.</p>\n        <form class=\"ds-hero__action\" action=\"#\">\n          <input class=\"ds-form__input ds-form__input--large\" type=\"text\" value=\"you@yourshop.example\" aria-label=\"Your mail address\">\n          <a class=\"ds-button ds-button--large\" href=\"#signup\">Start free</a>\n        </form>\n        <p class=\"ds-hero__note\">Pick a plan below, or <a class=\"ds-hero__note-link\" href=\"#tour\">take the tour</a> first. You can change plans whenever you like.</p>\n      </div>\n      <ul class=\"ds-hero__points\">\n        <li class=\"ds-hero__point\"><span class=\"ds-hero__tick\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 8.5l3.2 3.2L13 5\"/></svg></span>Every plan free for thirty days</li>\n        <li class=\"ds-hero__point\"><span class=\"ds-hero__tick\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 8.5l3.2 3.2L13 5\"/></svg></span>No contract, leave in two clicks</li>\n        <li class=\"ds-hero__point\"><span class=\"ds-hero__tick\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 8.5l3.2 3.2L13 5\"/></svg></span>Your mail stays yours to take away</li>\n        <li class=\"ds-hero__point is-last\"><span class=\"ds-hero__tick\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 8.5l3.2 3.2L13 5\"/></svg></span>Nothing to install</li>\n      </ul>\n    </div>\n\n    <div class=\"ds-grid\" data-component=\"grid\">\n      <div class=\"ds-grid__cell ds-grid__cell--1\">\n        <div class=\"ds-grid__head\">\n          <h2 class=\"ds-grid__title\">Solo</h2>\n          <p class=\"ds-grid__price\">Free</p>\n          <p class=\"ds-grid__per\">for as long as you like</p>\n        </div>\n        <div class=\"ds-grid__body\">\n          <ul class=\"ds-grid__lines\">\n            <li class=\"ds-grid__line\">1 mailbox</li>\n            <li class=\"ds-grid__line\">1 person answering</li>\n            <li class=\"ds-grid__line\">100 MB for attachments</li>\n            <li class=\"ds-grid__line is-off\">No team notes</li>\n          </ul>\n          <a class=\"ds-button ds-button--secondary ds-button--wide\" href=\"#signup\">Start with Solo</a>\n        </div>\n      </div>\n      <div class=\"ds-grid__cell ds-grid__cell--2\">\n        <div class=\"ds-grid__head\">\n          <h2 class=\"ds-grid__title\">Shop</h2>\n          <p class=\"ds-grid__price\">$12</p>\n          <p class=\"ds-grid__per\">a month</p>\n        </div>\n        <div class=\"ds-grid__body\">\n          <ul class=\"ds-grid__lines\">\n            <li class=\"ds-grid__line\">3 mailboxes</li>\n            <li class=\"ds-grid__line\">3 people answering</li>\n            <li class=\"ds-grid__line\">1 GB for attachments</li>\n            <li class=\"ds-grid__line\">Team notes</li>\n          </ul>\n          <a class=\"ds-button ds-button--secondary ds-button--wide\" href=\"#signup\">Try Shop free</a>\n        </div>\n      </div>\n      <div class=\"ds-grid__cell ds-grid__cell--3 is-featured\">\n        <div class=\"ds-grid__head\">\n          <h2 class=\"ds-grid__title\">Team</h2>\n          <p class=\"ds-grid__price\">$29</p>\n          <p class=\"ds-grid__per\">a month</p>\n          <p class=\"ds-grid__flag\"><span class=\"ds-badge\">Most teams pick this</span></p>\n        </div>\n        <div class=\"ds-grid__body\">\n          <ul class=\"ds-grid__lines\">\n            <li class=\"ds-grid__line\">10 mailboxes</li>\n            <li class=\"ds-grid__line\">12 people answering</li>\n            <li class=\"ds-grid__line\">5 GB for attachments</li>\n            <li class=\"ds-grid__line\">Team notes and reports</li>\n          </ul>\n          <a class=\"ds-button ds-button--wide\" href=\"#signup\">Try Team free</a>\n        </div>\n      </div>\n      <div class=\"ds-grid__cell ds-grid__cell--4\">\n        <div class=\"ds-grid__head\">\n          <h2 class=\"ds-grid__title\">Office</h2>\n          <p class=\"ds-grid__price\">$79</p>\n          <p class=\"ds-grid__per\">a month</p>\n        </div>\n        <div class=\"ds-grid__body\">\n          <ul class=\"ds-grid__lines\">\n            <li class=\"ds-grid__line\">40 mailboxes</li>\n            <li class=\"ds-grid__line\">50 people answering</li>\n            <li class=\"ds-grid__line\">25 GB for attachments</li>\n            <li class=\"ds-grid__line\">Everything in Team</li>\n          </ul>\n          <a class=\"ds-button ds-button--secondary ds-button--wide\" href=\"#signup\">Try Office free</a>\n        </div>\n      </div>\n    </div>\n\n    <ul class=\"ds-stats\" data-component=\"stats\">\n      <li class=\"ds-stat is-first\"><span class=\"ds-stat__number\">6,400</span><span class=\"ds-stat__label\">shops and offices signed up</span></li>\n      <li class=\"ds-stat\"><span class=\"ds-stat__number\">2.1 million</span><span class=\"ds-stat__label\">letters answered last year</span></li>\n      <li class=\"ds-stat\"><span class=\"ds-stat__number\">9 in 10</span><span class=\"ds-stat__label\">stay after the free month</span></li>\n    </ul>\n\n    <section class=\"ds-section\">\n      <div class=\"ds-section__head\">\n        <div>\n          <h2 class=\"ds-section__title\">The plans, line by line</h2>\n          <p class=\"ds-section__lead\">Everything each plan holds. Pay by the year and two months are on us.</p>\n        </div>\n        <ul class=\"ds-tabs\" data-component=\"tabs\">\n          <li class=\"ds-tabs__item is-first\"><a class=\"ds-tabs__tab is-current\" href=\"#home\">By the month</a></li>\n          <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab\" href=\"#home\">By the year <span class=\"ds-tabs__count\">(2 months free)</span></a></li>\n        </ul>\n      </div>\n      <table class=\"ds-table\" data-component=\"table\">\n        <thead>\n          <tr>\n            <th class=\"ds-table__head\">What you get</th>\n            <th class=\"ds-table__head is-numeric\">Solo</th>\n            <th class=\"ds-table__head is-numeric\">Shop</th>\n            <th class=\"ds-table__head is-numeric\">Team</th>\n            <th class=\"ds-table__head is-numeric\">Office</th>\n          </tr>\n        </thead>\n        <tbody>\n            <tr><th class=\"ds-table__group\" colspan=\"5\" scope=\"colgroup\">Mail</th></tr>\n            <tr class=\"ds-table__row\">\n              <td class=\"ds-table__cell is-label\">Shared mailboxes <span class=\"ds-tooltip\" data-component=\"tooltip\"><a class=\"ds-tooltip__trigger\" href=\"#help\" aria-describedby=\"tip-mailbox\">?</a><span class=\"ds-tooltip__tip\" id=\"tip-mailbox\" role=\"tooltip\">One address your customers write to, such as orders or returns.</span></span></td>\n              <td class=\"ds-table__cell is-numeric\">1</td>\n              <td class=\"ds-table__cell is-numeric\">3</td>\n              <td class=\"ds-table__cell is-numeric\">10</td>\n              <td class=\"ds-table__cell is-numeric\">40</td>\n            </tr>\n            <tr class=\"ds-table__row is-alt\">\n              <td class=\"ds-table__cell is-label\">People answering</td>\n              <td class=\"ds-table__cell is-numeric\">1</td>\n              <td class=\"ds-table__cell is-numeric\">3</td>\n              <td class=\"ds-table__cell is-numeric\">12</td>\n              <td class=\"ds-table__cell is-numeric\">50</td>\n            </tr>\n            <tr class=\"ds-table__row\">\n              <td class=\"ds-table__cell is-label\">Room for attachments</td>\n              <td class=\"ds-table__cell is-numeric\">100 MB</td>\n              <td class=\"ds-table__cell is-numeric\">1 GB</td>\n              <td class=\"ds-table__cell is-numeric\">5 GB</td>\n              <td class=\"ds-table__cell is-numeric\">25 GB</td>\n            </tr>\n            <tr><th class=\"ds-table__group\" colspan=\"5\" scope=\"colgroup\">Working together</th></tr>\n            <tr class=\"ds-table__row is-alt\">\n              <td class=\"ds-table__cell is-label\">Saved replies</td>\n              <td class=\"ds-table__cell is-numeric\">10</td>\n              <td class=\"ds-table__cell is-numeric\">50</td>\n              <td class=\"ds-table__cell is-numeric\">unlimited</td>\n              <td class=\"ds-table__cell is-numeric\">unlimited</td>\n            </tr>\n            <tr class=\"ds-table__row\">\n              <td class=\"ds-table__cell is-label\">Notes only the team sees</td>\n              <td class=\"ds-table__cell is-numeric is-off\">not in this plan</td>\n              <td class=\"ds-table__cell is-numeric\"><span class=\"ds-badge ds-badge--success\">Included</span></td>\n              <td class=\"ds-table__cell is-numeric\"><span class=\"ds-badge ds-badge--success\">Included</span></td>\n              <td class=\"ds-table__cell is-numeric\"><span class=\"ds-badge ds-badge--success\">Included</span></td>\n            </tr>\n            <tr class=\"ds-table__row is-alt\">\n              <td class=\"ds-table__cell is-label\">Weekly report by mail</td>\n              <td class=\"ds-table__cell is-numeric is-off\">not in this plan</td>\n              <td class=\"ds-table__cell is-numeric\"><span class=\"ds-badge ds-badge--warning\">Add-on</span></td>\n              <td class=\"ds-table__cell is-numeric\"><span class=\"ds-badge ds-badge--success\">Included</span></td>\n              <td class=\"ds-table__cell is-numeric\"><span class=\"ds-badge ds-badge--success\">Included</span></td>\n            </tr>\n            <tr><th class=\"ds-table__group\" colspan=\"5\" scope=\"colgroup\">Safe and sound</th></tr>\n            <tr class=\"ds-table__row\">\n              <td class=\"ds-table__cell is-label\">Nightly copy of everything</td>\n              <td class=\"ds-table__cell is-numeric\"><span class=\"ds-badge ds-badge--success\">Included</span></td>\n              <td class=\"ds-table__cell is-numeric\"><span class=\"ds-badge ds-badge--success\">Included</span></td>\n              <td class=\"ds-table__cell is-numeric\"><span class=\"ds-badge ds-badge--success\">Included</span></td>\n              <td class=\"ds-table__cell is-numeric\"><span class=\"ds-badge ds-badge--success\">Included</span></td>\n            </tr>\n            <tr class=\"ds-table__row is-alt\">\n              <td class=\"ds-table__cell is-label\">Encrypted pages (SSL)</td>\n              <td class=\"ds-table__cell is-numeric is-off\">not in this plan</td>\n              <td class=\"ds-table__cell is-numeric is-off\">not in this plan</td>\n              <td class=\"ds-table__cell is-numeric\"><span class=\"ds-badge ds-badge--success\">Included</span></td>\n              <td class=\"ds-table__cell is-numeric\"><span class=\"ds-badge ds-badge--success\">Included</span></td>\n            </tr>\n            <tr class=\"ds-table__row\">\n              <td class=\"ds-table__cell is-label\">Answer from us within</td>\n              <td class=\"ds-table__cell is-numeric\">3 days</td>\n              <td class=\"ds-table__cell is-numeric\">1 day</td>\n              <td class=\"ds-table__cell is-numeric\">4 hours</td>\n              <td class=\"ds-table__cell is-numeric\">1 hour</td>\n            </tr>\n            <tr class=\"ds-table__row is-alt\">\n              <td class=\"ds-table__cell is-label\">Price a month</td>\n              <td class=\"ds-table__cell is-numeric\">Free</td>\n              <td class=\"ds-table__cell is-numeric\">$12</td>\n              <td class=\"ds-table__cell is-numeric\">$29</td>\n              <td class=\"ds-table__cell is-numeric\">$79</td>\n            </tr>\n        </tbody>\n      </table>\n      <p class=\"ds-table__note\">Prices are in dollars and exclude tax. A mailbox is one address your customers write to, such as orders or returns.</p>\n    </section>\n\n    <div class=\"ds-page__columns\">\n      <div class=\"ds-page__main\">\n        <h2 class=\"ds-section__label\">Questions people ask before signing up</h2>\n        <div class=\"ds-faq\">\n          <div class=\"ds-faq__item\">\n            <h3 class=\"ds-faq__question\">What happens after thirty days?</h3>\n            <p class=\"ds-faq__answer\">We ask for a card. If you give none, the account drops to Solo and nothing is lost.</p>\n          </div>\n          <div class=\"ds-faq__item\">\n            <h3 class=\"ds-faq__question\">Can I change plans later?</h3>\n            <p class=\"ds-faq__answer\">Up or down, at any time, from the <a class=\"ds-link\" href=\"#billing\">plan page</a>. The price changes from the next month.</p>\n          </div>\n          <div class=\"ds-faq__item\">\n            <h3 class=\"ds-faq__question\">Do my customers see any of this?</h3>\n            <p class=\"ds-faq__answer\">No. They write to your usual address and get an answer from it.</p>\n          </div>\n          <div class=\"ds-faq__item\">\n            <h3 class=\"ds-faq__question\">How do I leave?</h3>\n            <p class=\"ds-faq__answer\">Two clicks, and you can take every letter with you as one file. <a class=\"ds-link\" href=\"#help\">More answers</a></p>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-page__rail\">\n        <section class=\"ds-panel ds-panel--last\" data-component=\"panel\">\n          <h2 class=\"ds-panel__title\">Not sure which one?</h2>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__text\">Start with Team. If a month shows you need less, move down and pay less from then on.</p>\n            <div class=\"ds-panel__actions\">\n              <a class=\"ds-button\" href=\"#signup\">Try Team free</a>\n              <a class=\"ds-link\" href=\"#tour\">Tour first</a>\n            </div>\n          </div>\n        </section>\n      </div>\n    </div>\n\n  </section>\n\n  <section class=\"ds-view\" id=\"tour\">\n\n    <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#home\">Plans</a></li>\n      <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n      <li><a class=\"ds-link\" href=\"#tour\">Tour</a></li>\n      <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n      <li class=\"ds-breadcrumb__current\">The shared inbox</li>\n    </ol>\n\n    <div class=\"ds-page-header\" data-component=\"page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">The shared inbox</h1>\n        <p class=\"ds-page-header__text\">Page one of four: where the mail arrives and how you see who is on it.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#home\">See the plans</a>\n        <a class=\"ds-button\" href=\"#signup\">Try it free</a>\n      </div>\n    </div>\n\n    <div class=\"ds-page__columns\">\n      <div class=\"ds-page__main\">\n        <div class=\"ds-prose\">\n          <p>Mail to your shop address lands here, newest first. Each letter carries one mark: waiting, answered, or handed to someone by name. Nobody answers twice, and nothing sits unseen over a weekend.</p>\n        </div>\n\n        <section class=\"ds-section ds-section--tight\">\n          <h2 class=\"ds-section__label\">What the team sees on a Monday</h2>\n          <ol class=\"ds-list\" data-component=\"list\">\n            <li class=\"ds-list__item is-first\">\n              <span class=\"ds-list__mark\"><span class=\"ds-badge ds-badge--new\">NEW</span></span>\n              <div class=\"ds-list__body\">\n                <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#tour\">Is the blue kettle back in stock?</a></h3>\n                <p class=\"ds-list__meta\">from Ines Varga, to orders, nobody on it yet</p>\n              </div>\n              <span class=\"ds-list__side\">9:12</span>\n            </li>\n            <li class=\"ds-list__item is-alt\">\n              <span class=\"ds-list__mark\"><span class=\"ds-badge ds-badge--warning\">Waiting</span></span>\n              <div class=\"ds-list__body\">\n                <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#tour\">Parcel arrived with a cracked lid</a></h3>\n                <p class=\"ds-list__meta\">from Tobias Renn, to returns, with Maren since Friday</p>\n              </div>\n              <span class=\"ds-list__side\">Friday</span>\n            </li>\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__mark\"><span class=\"ds-badge ds-badge--success\">Answered</span></span>\n              <div class=\"ds-list__body\">\n                <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title is-visited\" href=\"#tour\">Do you ship to the islands?</a></h3>\n                <p class=\"ds-list__meta\">from Annika Dorn, to orders, answered by Oskar</p>\n              </div>\n              <span class=\"ds-list__side\">Friday</span>\n            </li>\n            <li class=\"ds-list__item is-alt\">\n              <span class=\"ds-list__mark\"><span class=\"ds-badge ds-badge--success\">Answered</span></span>\n              <div class=\"ds-list__body\">\n                <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title is-visited\" href=\"#tour\">Invoice for the March order, please</a></h3>\n                <p class=\"ds-list__meta\">from the Lantern Room, to accounts, answered by Maren</p>\n              </div>\n              <span class=\"ds-list__side\">Thursday</span>\n            </li>\n          </ol>\n        </section>\n\n        <section class=\"ds-section ds-section--tight\">\n          <div class=\"ds-prose\">\n            <h3>Hand a letter to someone</h3>\n            <p>Pick a name and the letter moves to that person's list, with a note only the team can read. The customer sees one tidy answer.</p>\n          </div>\n        </section>\n\n        <ul class=\"ds-pagination\" data-component=\"pagination\">\n          <li><span class=\"ds-pagination__link is-disabled\">Previous</span></li>\n          <li><span class=\"ds-pagination__link is-current\">1</span></li>\n          <li><a class=\"ds-pagination__link\" href=\"#tour\">2</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#tour\">3</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#tour\">4</a></li>\n          <li><a class=\"ds-pagination__link\" href=\"#tour\">Next: saved replies</a></li>\n        </ul>\n      </div>\n\n      <div class=\"ds-page__rail\">\n        <nav class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">The tour</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-current\"><a class=\"ds-link ds-link--title\" href=\"#tour\">1. The shared inbox</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#tour\">2. Saved replies</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#tour\">3. Notes for the team</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#tour\">4. The weekly report</a></li>\n          </ul>\n        </nav>\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Seen enough?</h2>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__text\">Every plan is free for thirty days, and setting up takes about four minutes.</p>\n            <div class=\"ds-panel__actions\">\n              <a class=\"ds-button\" href=\"#signup\">Sign up</a>\n              <a class=\"ds-link\" href=\"#home\">Compare plans</a>\n            </div>\n          </div>\n        </section>\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Works with</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#help\">The address you have</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#help\">Any mail program</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#help\">Your shop's order numbers</a></li>\n          </ul>\n        </nav>\n      </div>\n    </div>\n\n  </section>\n\n  <section class=\"ds-view\" id=\"signup\">\n\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#home\">Plans</a></li>\n      <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n      <li><a class=\"ds-link\" href=\"#home\">Team</a></li>\n      <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n      <li class=\"ds-breadcrumb__current\">Sign up</li>\n    </ol>\n\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Sign up for the Team plan</h1>\n        <p class=\"ds-page-header__text\">Four fields and you are in. We ask for a card only when the free month ends.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#home\">Pick another plan</a>\n      </div>\n    </div>\n\n    <div class=\"ds-page__columns\">\n      <div class=\"ds-page__main\">\n\n        <div data-component=\"notice\">\n          <p class=\"ds-notice ds-notice--error is-first\"><span class=\"ds-notice__title\">Almost there.</span> One of the fields below needs another look.</p>\n          <p class=\"ds-notice\"><span class=\"ds-notice__title\">Free until 6 December.</span> Nothing is charged before then, and we write to you three days ahead.</p>\n        </div>\n\n        <section class=\"ds-section ds-section--tight\">\n          <form class=\"ds-form\" data-component=\"form\" action=\"#\">\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"f-name\">Your name</label>\n              <div class=\"ds-form__field\">\n                <input class=\"ds-form__input\" id=\"f-name\" type=\"text\" value=\"Maren Holt\">\n              </div>\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"f-mail\">Mail address</label>\n              <div class=\"ds-form__field\">\n                <input class=\"ds-form__input is-error\" id=\"f-mail\" type=\"text\" value=\"maren@kettleshop\">\n                <p class=\"ds-form__error\">This address is missing its ending, such as .example.</p>\n              </div>\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"f-site\">Name of the account</label>\n              <div class=\"ds-form__field\">\n                <input class=\"ds-form__input\" id=\"f-site\" type=\"text\" value=\"kettleshop\">\n                <p class=\"ds-form__hint\">Your team signs in at kettleshop.chronoskin.example.</p>\n              </div>\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"f-plan\">Plan</label>\n              <div class=\"ds-form__field\">\n                <select class=\"ds-form__select\" id=\"f-plan\">\n                  <option>Team, $29 a month</option>\n                  <option>Shop, $12 a month</option>\n                  <option>Office, $79 a month</option>\n                  <option>Solo, free</option>\n                </select>\n              </div>\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"f-first\">First mailbox</label>\n              <div class=\"ds-form__field\">\n                <textarea class=\"ds-form__textarea\" id=\"f-first\">orders@kettleshop.example</textarea>\n                <p class=\"ds-form__hint\">One address to a line. More can be added later.</p>\n              </div>\n            </div>\n            <div class=\"ds-form__row\">\n              <span class=\"ds-form__label\">The small print</span>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> I have read the terms of use</label>\n              </div>\n            </div>\n            <div class=\"ds-form__actions\">\n              <button class=\"ds-button\" type=\"button\">Create the account</button>\n              <a class=\"ds-link\" href=\"#home\">or go back to the plans</a>\n            </div>\n          </form>\n        </section>\n      </div>\n\n      <div class=\"ds-page__rail\">\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Your plan</h2>\n          <div class=\"ds-panel__body\">\n            <ul class=\"ds-panel__lines\">\n              <li class=\"ds-panel__line\"><span>Team</span><span>$29 a month</span></li>\n              <li class=\"ds-panel__line\"><span>First thirty days</span><span>free</span></li>\n              <li class=\"ds-panel__line is-total\"><span>To pay today</span><span>$0</span></li>\n            </ul>\n            <p class=\"ds-panel__text\">10 mailboxes, 12 people answering, 5 GB for attachments, team notes and reports.</p>\n            <div class=\"ds-panel__actions\">\n              <a class=\"ds-link\" href=\"#home\">Compare the plans</a>\n            </div>\n          </div>\n        </section>\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Before you sign up</h2>\n          <div class=\"ds-accordion\" data-component=\"accordion\">\n            <details class=\"ds-accordion__item is-first\" open>\n              <summary class=\"ds-accordion__title\">What happens after thirty days?</summary>\n              <p class=\"ds-accordion__body\">We ask for a card. Give none and the account drops to Solo.</p>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__title\">Can I keep my address?</summary>\n              <p class=\"ds-accordion__body\">Yes. Your customers go on writing where they always wrote.</p>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__title\">How do I leave?</summary>\n              <p class=\"ds-accordion__body\">Two clicks, and every letter comes with you as one file.</p>\n            </details>\n          </div>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#tour\">Take the tour first</a></li>\n          </ul>\n        </nav>\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Rather talk to someone?</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item ds-sidebar__item--person\"><span class=\"ds-avatar ds-avatar--1\" data-component=\"avatar\"></span><span class=\"ds-avatar ds-avatar--3\"></span><a class=\"ds-link ds-link--title\" href=\"#help\">Write to us two</a><span class=\"ds-sidebar__count\">answer in a day</span></li>\n          </ul>\n        </nav>\n      </div>\n    </div>\n\n  </section>\n\n  <section class=\"ds-view\" id=\"billing\">\n\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#home\">chronoskin</a></li>\n      <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n      <li><a class=\"ds-link\" href=\"#billing\">Your account</a></li>\n      <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n      <li class=\"ds-breadcrumb__current\">Plan and invoices</li>\n    </ol>\n\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Plan and invoices</h1>\n        <p class=\"ds-page-header__text\">kettleshop is on the Team plan, paid by the month, next on 6 January.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <ul class=\"ds-tabs\">\n          <li class=\"ds-tabs__item is-first\"><a class=\"ds-tabs__tab is-current\" href=\"#billing\">Invoices <span class=\"ds-tabs__count\">(4)</span></a></li>\n          <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab\" href=\"#billing\">Card</a></li>\n          <li class=\"ds-tabs__item\"><a class=\"ds-tabs__tab\" href=\"#billing\">People</a></li>\n        </ul>\n      </div>\n    </div>\n\n    <ul class=\"ds-stats ds-stats--meters\">\n      <li class=\"ds-stat is-first\"><span class=\"ds-stat__number\">7 of 10</span><span class=\"ds-stat__label\">mailboxes in use</span><div class=\"ds-progress\" data-component=\"progress\"><progress class=\"ds-progress__bar\" value=\"7\" max=\"10\">7 of 10</progress></div></li>\n      <li class=\"ds-stat\"><span class=\"ds-stat__number\">9 of 12</span><span class=\"ds-stat__label\">people answering</span><div class=\"ds-progress\"><progress class=\"ds-progress__bar ds-progress__bar--warning\" value=\"9\" max=\"12\">9 of 12</progress></div></li>\n      <li class=\"ds-stat\"><span class=\"ds-stat__number\">1.8 GB</span><span class=\"ds-stat__label\">of 5 GB filled</span><div class=\"ds-progress\"><progress class=\"ds-progress__bar ds-progress__bar--success\" value=\"18\" max=\"50\">1.8 of 5 GB</progress></div></li>\n    </ul>\n\n    <div class=\"ds-page__columns\">\n      <div class=\"ds-page__main\">\n\n        <div class=\"ds-buttons ds-buttons--bar\" data-component=\"buttons\">\n          <a class=\"ds-button\" href=\"#home\">Move up a plan</a>\n          <button class=\"ds-button ds-button--secondary\" type=\"button\">Download all invoices</button>\n          <button class=\"ds-button is-disabled\" type=\"button\" disabled>Pay now</button>\n          <button class=\"ds-button ds-button--danger\" type=\"button\">Close the account</button>\n        </div>\n\n        <table class=\"ds-table\">\n          <thead>\n            <tr>\n              <th class=\"ds-table__head\">Invoice</th>\n              <th class=\"ds-table__head\">For</th>\n              <th class=\"ds-table__head\">Status</th>\n              <th class=\"ds-table__head is-numeric\">Amount</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr class=\"ds-table__row\">\n              <td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#billing\">No. 0412</a></td>\n              <td class=\"ds-table__cell\">Team, December</td>\n              <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--warning\">Due 6 Dec</span></td>\n              <td class=\"ds-table__cell is-numeric\">$29.00</td>\n            </tr>\n            <tr class=\"ds-table__row is-alt\">\n              <td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#billing\">No. 0377</a></td>\n              <td class=\"ds-table__cell\">Team, November</td>\n              <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">Paid</span></td>\n              <td class=\"ds-table__cell is-numeric\">$29.00</td>\n            </tr>\n            <tr class=\"ds-table__row\">\n              <td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#billing\">No. 0341</a></td>\n              <td class=\"ds-table__cell\">Shop, October</td>\n              <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--danger\">Card refused</span></td>\n              <td class=\"ds-table__cell is-numeric\">$12.00</td>\n            </tr>\n            <tr class=\"ds-table__row is-alt\">\n              <td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#billing\">No. 0298</a></td>\n              <td class=\"ds-table__cell\">Shop, September</td>\n              <td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">Paid</span></td>\n              <td class=\"ds-table__cell is-numeric\">$12.00</td>\n            </tr>\n          </tbody>\n        </table>\n        <p class=\"ds-badges\" data-component=\"badge\">\n          <span><span class=\"ds-badge ds-badge--success\">Paid</span> thank you</span>\n          <span><span class=\"ds-badge ds-badge--warning\">Due</span> charged on that day</span>\n          <span><span class=\"ds-badge ds-badge--danger\">Card refused</span> try another card</span>\n          <span><span class=\"ds-badge ds-badge--new\">NEW</span> since your last visit</span>\n          <span><span class=\"ds-badge\">Current plan</span></span>\n          <span><span class=\"ds-badge ds-badge--count\">4</span> invoices</span>\n          <span><a class=\"ds-badge ds-badge--tag\" href=\"#billing\">monthly</a></span>\n        </p>\n\n        <section class=\"ds-section ds-section--tight\">\n          <div class=\"ds-dialog__backdrop\">\n            <div class=\"ds-dialog\" data-component=\"dialog\" role=\"dialog\" aria-labelledby=\"dlg-title\">\n              <h2 class=\"ds-dialog__title\" id=\"dlg-title\">Close the kettleshop account? <a class=\"ds-dialog__close\" href=\"#billing\">close</a></h2>\n              <div class=\"ds-dialog__body\">\n                <p class=\"ds-dialog__text\">All seven mailboxes stop receiving at once. You have thirty days to take your letters away as one file.</p>\n              </div>\n              <div class=\"ds-dialog__actions\">\n                <a class=\"ds-button ds-button--secondary\" href=\"#billing\">Keep the account</a>\n                <button class=\"ds-button ds-button--danger\" type=\"button\">Close it</button>\n              </div>\n            </div>\n          </div>\n        </section>\n      </div>\n\n      <div class=\"ds-page__rail\">\n        <section class=\"ds-panel\">\n          <h2 class=\"ds-panel__title\">Team plan <span class=\"ds-badge\">Current plan</span></h2>\n          <div class=\"ds-panel__body\">\n            <ul class=\"ds-panel__lines\">\n              <li class=\"ds-panel__line\"><span>Each month</span><span>$29</span></li>\n              <li class=\"ds-panel__line\"><span>Card ending</span><span>4410</span></li>\n              <li class=\"ds-panel__line is-total\"><span>Next charge</span><span>6 January</span></li>\n            </ul>\n            <div class=\"ds-panel__actions\">\n              <a class=\"ds-button ds-button--secondary\" href=\"#home\">Change plan</a>\n            </div>\n          </div>\n        </section>\n\n        <h2 class=\"ds-sidebar__title\">Extras</h2>\n        <div class=\"ds-empty\" data-component=\"empty\">\n          <h3 class=\"ds-empty__title\">No extras yet</h3>\n          <p class=\"ds-empty__text\">More room or a second weekly report can be added to any plan.</p>\n          <a class=\"ds-button ds-button--secondary\" href=\"#home\">See the extras</a>\n        </div>\n\n        <nav class=\"ds-sidebar ds-sidebar--after\">\n          <h2 class=\"ds-sidebar__title\">Your account</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-current\"><a class=\"ds-link ds-link--title\" href=\"#billing\">Plan and invoices</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#billing\">Mailboxes</a><span class=\"ds-sidebar__count\">7</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#billing\">People</a><span class=\"ds-sidebar__count\">9</span></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#help\">Help</a></li>\n          </ul>\n        </nav>\n      </div>\n    </div>\n\n  </section>\n\n  <section class=\"ds-view\" id=\"help\">\n\n    <ol class=\"ds-breadcrumb\">\n      <li><a class=\"ds-link\" href=\"#home\">Plans</a></li>\n      <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n      <li><a class=\"ds-link\" href=\"#help\">Help</a></li>\n      <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n      <li class=\"ds-breadcrumb__current\">Plans and paying</li>\n    </ol>\n\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <h1 class=\"ds-page-header__title\">Help</h1>\n        <p class=\"ds-page-header__text\">Plain answers about plans, paying and leaving, written by the two people who run chronoskin.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#signup\">Sign up</a>\n      </div>\n    </div>\n\n    <div class=\"ds-page__columns\">\n      <div class=\"ds-page__main\">\n        <div class=\"ds-prose\" data-component=\"typography\">\n          <h1>Plans and paying</h1>\n          <p>Every account starts with thirty free days on the plan you picked. <mark>Nothing is charged until that month is over</mark>, and we write to you three days before it ends.</p>\n          <h2>Changing plans</h2>\n          <p>Move up or down from the <a href=\"#billing\">plan page</a>. <strong>Moving down never deletes mail</strong>; mailboxes over the new limit stop receiving until you pick which ones to keep.</p>\n          <h3>What counts as a mailbox</h3>\n          <ul>\n            <li>One address your customers write to.</li>\n            <li>Any number of people can answer from it.</li>\n            <li>Addresses that only forward do not count.</li>\n          </ul>\n          <h2>Leaving</h2>\n          <p>Close the account from the plan page. For thirty days after, every letter can be fetched as one file from <code>/export</code> on your account address.</p>\n        </div>\n\n        <section class=\"ds-section ds-section--tight\">\n          <h2 class=\"ds-section__label\">Where to go next</h2>\n          <p class=\"ds-links\" data-component=\"links\">\n            <a class=\"ds-link\" href=\"#home\">Compare the plans</a>\n            <a class=\"ds-link is-visited\" href=\"#tour\">Take the tour</a>\n            <a class=\"ds-link is-hover\" href=\"#signup\">Sign up free</a>\n            <a class=\"ds-link is-active\" href=\"#billing\">Your plan page</a>\n          </p>\n        </section>\n      </div>\n\n      <div class=\"ds-page__rail\">\n        <nav class=\"ds-sidebar\">\n          <h2 class=\"ds-sidebar__title\">Help topics</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li class=\"ds-sidebar__item is-current\"><a class=\"ds-link ds-link--title\" href=\"#help\">Plans and paying</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#help\">Setting up a mailbox</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#help\">Inviting the team</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#help\">Saved replies</a></li>\n            <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#help\">Taking your mail away</a></li>\n          </ul>\n        </nav>\n        <section class=\"ds-panel ds-panel--last\">\n          <h2 class=\"ds-panel__title\">Still stuck?</h2>\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-panel__text\">Write to us. A person answers, usually the same day, a little slower at weekends.</p>\n            <div class=\"ds-panel__actions\">\n              <a class=\"ds-button ds-button--secondary\" href=\"#help\">Write to us</a>\n            </div>\n          </div>\n        </section>\n      </div>\n    </div>\n\n  </section>\n\n</div>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <ul class=\"ds-footer__links\">\n    <li><a class=\"ds-link\" href=\"#home\">Plans</a></li>\n    <li><a class=\"ds-link\" href=\"#tour\">Tour</a></li>\n    <li><a class=\"ds-link\" href=\"#help\">Help</a></li>\n    <li><a class=\"ds-link\" href=\"#help\">Terms of use</a></li>\n    <li><a class=\"ds-link\" href=\"#help\">Privacy</a></li>\n  </ul>\n  <p class=\"ds-footer__legal\">Your mail on chronoskin is yours; take it with you whenever you like.</p>\n</footer>\n\n</div>\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.web-2-0-gloss.landing.s05.p04.t05.u11\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"web-2-0-gloss\",\n    \"years\": [\n      2005,\n      2009\n    ]\n  },\n  \"archetype\": \"landing\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1024,\n    \"fluid\": false\n  },\n  \"source\": \"https://chrono.skin/s/v1-w2-545b\",\n  \"short\": \"v1-w2-545b\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #bbccd9;\n  --color-canvas: #edf2f6;\n  --color-surface: #ffffff;\n  --color-surface-alt: #f8f8f8;\n  --color-surface-strong: #cadcea;\n  --color-bar: #133855;\n  --color-bar-text: #ffffff;\n  --color-bar-alt: #cadcea;\n  --color-bar-alt-text: #133855;\n  --color-inverse: #444444;\n  --color-inverse-text: #ffffff;\n  --color-text: #444444;\n  --color-text-muted: #888888;\n  --color-heading: #000000;\n  --color-heading-alt: #133855;\n  --color-link: #336699;\n  --color-link-quiet: #666666;\n  --color-link-visited: #5c8ab3;\n  --color-link-hover: #4183c4;\n  --color-link-active: #000000;\n  --color-border: #c6ccd3;\n  --color-border-strong: #b4b4b4;\n  --color-border-muted: #ebeef1;\n  --color-accent: #f0a030;\n  --color-accent-text: #000000;\n  --color-accent-alt: #9c4a1c;\n  --color-fill-1: #ffffff;\n  --color-fill-2: #cadcea;\n  --color-fill-3: #f0f0f8;\n  --color-fill-4: #e0e0e0;\n  --color-button: #000000;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffffff;\n  --color-button-secondary: #f0f0f0;\n  --color-button-secondary-text: #444444;\n  --color-input: #ffffff;\n  --color-input-text: #000000;\n  --color-input-border: #b4b4b4;\n  --color-disabled: #f0f0f0;\n  --color-disabled-text: #888888;\n  --color-danger: #c01500;\n  --color-danger-surface: #fee5f2;\n  --color-success: #3b7a1f;\n  --color-warning: #ffe28a;\n  --color-notice: #fffbe4;\n  --color-notice-text: #444444;\n  --color-focus: #4183c4;\n  --color-shadow: #000000;\n  --color-overlay: rgba(0, 0, 0, 0.5);\n}\n\n/* @part type */\n:root {\n  --font-body: \"Trebuchet MS\", Helvetica, Arial, sans-serif;\n  --font-heading: \"Trebuchet MS\", Helvetica, Arial, sans-serif;\n  --font-ui: \"Trebuchet MS\", Helvetica, Arial, sans-serif;\n  --font-mono: Consolas, \"Lucida Console\", monospace;\n  --text-base: 13px;\n  --text-small: 11px;\n  --text-ui: 13px;\n  --text-large: 17px;\n  --text-display: 30px;\n  --text-h1: 24px;\n  --text-h2: 18px;\n  --text-h3: 15px;\n  --line-body: 1.45;\n  --line-heading: 1.15;\n  --line-display: 1.05;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 700;\n  --weight-display: 700;\n  --weight-ui: 700;\n  --heading-transform: none;\n  --heading-tracking: 0;\n  --display-tracking: 0;\n  --figure-shift: 0em;\n  --ui-transform: none;\n  --link-decoration: underline;\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: 3px;\n  --radius-panel: 6px;\n  --radius-pill: 3px;\n  --radius-page: 6px;\n  --shadow-panel: none;\n  --shadow-control: none;\n  --shadow-control-hover: none;\n  --shadow-control-pressed: none;\n  --shadow-dialog: none;\n  --shadow-text: none;\n  --fill-page: var(--color-page);\n  --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 12%) 0, var(--color-bar) 100%);\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: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 18%) 0, var(--color-button) 100%);\n  --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 6%) 0, color-mix(in srgb, var(--color-button), black 14%) 100%);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 1px dotted var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 0px;\n}\n"
  }
}
