@felloinnovations/brand-kit 0.4.0 → 0.5.0

package/design-system/components/Matrix/style.css

@@ -0,0 +1,84 @@
+/* ---- Matrix: Seth's answers grid (305:2341). A yes-or-no answer for each question (a row) and each source (a column),
+   in a rim: one column template shared by the head and every row (20 in, 16 out, a 200 px question column, equal
+   columns 2 apart), so the heads centre over their cells. Hovering or focusing a row dims every other row to 0.2 and
+   shows the whole question in a navy note over it. Under 40rem the question column takes the room and the source names
+   drop to their marks. ---- */
+.ws-matrix { --ws-matrix-cols: 4; --ws-matrix-first: var(--space-9xl); --ws-matrix-cell: minmax(0, 1fr); --ws-matrix-dim: 0.2; container: ws-matrix / inline-size; display: flex; flex-direction: column; padding: var(--ws-rim); border-radius: var(--ws-radius-card); background: var(--ws-tray); }
+.ws-matrix__table { display: flex; flex-direction: column; }
+.ws-matrix__row { display: grid; grid-template-columns: var(--ws-matrix-first) repeat(var(--ws-matrix-cols), var(--ws-matrix-cell)); column-gap: var(--space-3xs); min-height: var(--ws-row-h); padding: var(--ws-line) var(--space-md) var(--ws-line) var(--ws-card-inset); background: var(--color-bg-page); }
+/* Rows are joined by 0.5 px lines, full width, drawn inside the row's top (Seth's 48 includes its line, so a border would
+   add 0.5 a row); the rim's inner corners on the first and last row. */
+.ws-matrix__body > .ws-matrix__row, .ws-matrix__foot { box-shadow: inset 0 var(--ws-hairline) 0 var(--ws-edge); }
+.ws-matrix__head > .ws-matrix__row { border-radius: var(--ws-radius-card-inner) var(--ws-radius-card-inner) 0 0; }
+.ws-matrix__table:last-child .ws-matrix__body > .ws-matrix__row:last-child, .ws-matrix__foot { border-radius: 0 0 var(--ws-radius-card-inner) var(--ws-radius-card-inner); }
+/* Head: 16 above and below; "Question" in 13 / 18 medium muted; each source a 20 px mark and its name, 15 / 22 semibold,
+   centred over its column (the head cell carries the name as its aria-label too). */
+.ws-matrix__head > .ws-matrix__row { align-items: center; padding-block: var(--space-md); }
+.ws-matrix__corner { font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; color: var(--color-text-muted); text-align: left; }
+.ws-matrix__col { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); min-width: 0; font-size: var(--ws-text-section); line-height: var(--ws-leading-section); font-weight: 600; color: var(--color-text-heading); }
+.ws-matrix__mark { flex-shrink: 0; width: var(--ws-icon-lg); height: var(--ws-icon-lg); }
+.ws-matrix__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* The question: 14 / 20 medium navy with a 1 px dotted underline, the cue that the whole question shows on hover or focus. */
+.ws-matrix__q-cell { display: flex; align-items: center; min-width: 0; padding-right: var(--space-md); }
+.ws-matrix__q-wrap { position: relative; display: inline-flex; min-width: 0; }
+.ws-matrix__q { min-width: 0; padding: 0; border: 0; background: none; font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 500; color: var(--color-text-heading); text-align: left; text-decoration: underline dotted var(--ws-line); text-underline-offset: var(--ws-halo); cursor: help; }
+/* On touch the question's box grows to 24 without moving a thing. */
+@media (pointer: coarse) { .ws-matrix__q { padding-block: var(--space-3xs); margin-block: calc(var(--space-3xs) * -1); } }
+/* A cell: the row's height less its 1 px in, 2 px corners; named = the strong tone, not named = the empty track; the
+   source's mark centred in it (a dimmed mark on the empty track). Its words are for a screen reader. */
+.ws-matrix__cell { display: flex; align-items: center; justify-content: center; min-height: calc(var(--ws-row-h) - var(--ws-line) * 2); border-radius: var(--ws-radius-chip); background: var(--ws-track); color: var(--color-text-heading); }
+.ws-matrix__cell--yes { background: var(--ws-rating-strong); }
+/* In dark the strong tone is a light teal, so the mark on it takes the ground's dark (navy on teal in light). */
+[data-theme="dark"] .ws-matrix__cell--yes { color: var(--color-bg-page); }
+@media (prefers-color-scheme: dark) { [data-theme="system"] .ws-matrix__cell--yes { color: var(--color-bg-page); } }
+.ws-matrix__cell:not(.ws-matrix__cell--yes) > .ws-matrix__mark { opacity: var(--ws-dim); }
+.ws-matrix__cell.ws-shimmer { background: var(--ws-shimmer); background-size: 300% 100%; }
+/* The note (Seth's navy tip): the act fill, 4 px corners, 14 / 20 words that wrap at 300 (the note 324 with its 12 px
+   sides, as Tooltip --note), left-anchored so its words start on the question's, a 12 x 6 caret over the word, 3 above
+   it. No shadow. */
+.ws-matrix__tip { position: absolute; z-index: 1; left: calc(var(--space-sm) * -1); bottom: calc(100% + var(--ws-halo) + var(--space-xxs-plus)); width: max-content; max-width: min(calc(var(--ws-float-width) + var(--space-sm) * 2), calc(100cqi - var(--space-lg))); padding: var(--space-xs-plus) var(--space-sm); border-radius: var(--ws-radius-control); background: var(--color-text-heading); color: var(--ws-on-act); font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 400; text-align: left; white-space: normal; visibility: hidden; opacity: 0; pointer-events: none; }
+.ws-matrix__tip::after { content: ""; position: absolute; top: 100%; left: calc(var(--space-lg) + var(--space-xxs-plus)); width: var(--space-sm); height: var(--space-xxs-plus); background: inherit; clip-path: polygon(0 0, 100% 0, 50% 100%); }
+.ws-matrix__q:focus + .ws-matrix__tip, .ws-matrix__q[aria-expanded="true"] + .ws-matrix__tip { visibility: visible; opacity: 1; }
+/* Keyboard focus draws the ring 4 px round the question: the note's caret keeps its 3 px clear of the ring, not the word. */
+.ws-matrix__q:focus-visible + .ws-matrix__tip { bottom: calc(100% + var(--ws-focus-offset) + var(--ws-focus-width) + var(--ws-halo) + var(--space-xxs-plus)); }
+/* Focusing (or tapping) a row dims the others, as hover does. Row grounds, lines, the head and the foot stay. */
+.ws-matrix__body:has(> .ws-matrix__row:focus-within) > .ws-matrix__row:not(:focus-within) > * { opacity: var(--ws-matrix-dim); }
+@media (hover: hover) {
+  .ws-matrix__body > .ws-matrix__row:hover .ws-matrix__tip { visibility: visible; opacity: 1; }
+  .ws-matrix__body:has(> .ws-matrix__row:hover) > .ws-matrix__row:not(:hover) > * { opacity: var(--ws-matrix-dim); }
+}
+/* The note covers the row above, so Escape must hide it without moving the pointer (WCAG 1.4.13): a page script sets
+   data-tip="hidden" on the row and clears it when the pointer or focus leaves. */
+.ws-matrix__body > .ws-matrix__row[data-tip="hidden"] .ws-matrix__tip { visibility: hidden; opacity: 0; }
+/* Motion: the dim and the note fade on hover's 200 ms after a 40 ms intent; the note leaves on the 120 ms exit. */
+@media (prefers-reduced-motion: no-preference) {
+  .ws-matrix__row > * { transition: opacity var(--ws-duration-hover) var(--ws-ease-soft); }
+  .ws-matrix__tip { transition: opacity var(--ws-duration-exit) var(--ws-ease-exit), visibility 0s linear var(--ws-duration-exit); }
+  .ws-matrix__q:focus + .ws-matrix__tip, .ws-matrix__q[aria-expanded="true"] + .ws-matrix__tip { transition: opacity var(--ws-duration-hover) var(--ws-ease-soft) var(--ws-hover-intent), visibility 0s linear var(--ws-hover-intent); }
+}
+@media (hover: hover) and (prefers-reduced-motion: no-preference) {
+  .ws-matrix__body > .ws-matrix__row:hover .ws-matrix__tip { transition: opacity var(--ws-duration-hover) var(--ws-ease-soft) var(--ws-hover-intent), visibility 0s linear var(--ws-hover-intent); }
+}
+/* Foot (Seth's "Behind the answers"): a folded row in the rim, 16 above and below, title, line, chevron. */
+.ws-matrix__foot { background: var(--color-bg-page); }
+.ws-matrix__foot > summary { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-md) var(--space-md) var(--ws-card-inset); border-radius: inherit; list-style: none; cursor: pointer; }
+.ws-matrix__foot > summary::-webkit-details-marker { display: none; }
+.ws-matrix__foot > summary:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+.ws-matrix__foot-title { flex: none; font-size: var(--ws-text-section); line-height: var(--ws-leading-section); font-weight: 600; color: var(--color-text-heading); }
+.ws-matrix__foot-line { flex: 1; min-width: 0; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; color: var(--color-text-muted); }
+.ws-matrix__foot > summary > svg { flex-shrink: 0; width: var(--ws-icon); height: var(--ws-icon); color: var(--color-text-heading); }
+.ws-matrix__foot[open] > summary > svg { transform: rotate(180deg); }
+.ws-matrix__foot-body { padding: 0 var(--space-md) var(--space-md) var(--ws-card-inset); }
+@media (prefers-reduced-motion: no-preference) { .ws-matrix__foot > summary > svg { transition: transform var(--ws-duration-settle) var(--ws-ease-soft); } }
+/* Narrow: the question column takes the room, each source column 32 wide and only its mark (the head cell's aria-label
+   names it, so a screen reader still hears the source); the question 8 from the cells. The foot's line drops under its
+   title, the chevron staying at the end of the title's line. */
+@container ws-matrix (max-width: 40rem) {
+  .ws-matrix__row { grid-template-columns: minmax(0, 1fr) repeat(var(--ws-matrix-cols), var(--space-xl)); }
+  .ws-matrix__name { display: none; }
+  .ws-matrix__q-cell { padding-right: var(--space-xs); }
+  .ws-matrix__q { white-space: normal; }
+  .ws-matrix__foot > summary { flex-wrap: wrap; row-gap: var(--space-xxs); }
+  .ws-matrix__foot > summary > svg { margin-left: auto; }
+  .ws-matrix__foot-line { flex-basis: 100%; order: 1; }
+}

package/design-system/components/Menu/README.md

@@ -1,67 +1,98 @@
-A small panel of rows, lifted off the page: the one menu, for an account, a page or a short list of choices.
+A small panel of rows lifted off the page: the one menu, for an account, a page's "more", or a short list of choices.
 
 ## Use it when
 
-- A button opens a short, flat list of actions or links (the account menu, a page's "more" menu, a chat's own options).
-- Showing what the person can do next from one place, without leaving the screen.
-- Grouping a few related actions with a line between groups (an "owner only" row, a destructive action set apart).
+- A button opens a short, flat list of actions or links (the account menu, a row's "more", a chat's options).
+- The person picks one of a few ways to see something (sort, group), and the choice shows its tick.
+- A few related actions are grouped, with a line between groups.
 
 ## Not for
 
-- A thing's full detail opened from the chat: use `Panel`.
-- A short task needing the person's full attention: use `Dialog`.
-- A long list of records to browse: use a list of rows (`.ws-row`) or a `Table`.
-- A tab switch between a few fixed views: use `Segmented`.
+- A thing's full detail: use `Panel`.
+- A short task that needs the person's full attention: use `Dialog`.
+- A note or a one-field form: use `Popover`.
+- A long list of records: use rows or a `Table`.
+- A switch between a few fixed views: use `Segmented`.
 
 ## Anatomy
 
-- The panel (`ws-menu`): a card lifted off the page, `--ws-radius-card` (8 px) corners, the cream (`--color-bg-page`) background, `--ws-shadow-lift` (the one lift a menu is allowed), `--space-xxs` (4 px) padding, at least 200 px wide.
-- Each row (`ws-menu-item` / `MenuItem`): a 32 px line (40 px under a finger), growing to fit two lines of words if needed, `--ws-radius-control` (4 px) corners, 14 px medium navy words, a 16 px line icon before the words where one is given.
-- A hairline (`ws-menu-line`, `--ws-menu-line`) separates groups of rows.
-- A row is a link (`href`) when it goes somewhere, a button (`onClick`) when it does something.
+- The panel (`ws-menu`): `--ws-raised` ground, 10 px corners (North's menu, `--ws-radius-menu`), the 0.5 px
+  hairline and the menu drop (`--ws-shadow-hairline`, `--ws-shadow-menu`), 4 px inside, at least 200 wide. Never
+  wider than the window less 32 or taller than it less 32; past that it scrolls on its own.
+- A row (`ws-menu-item`): 8 above and below 13 / 18 medium navy words, 10 at the sides, 6 px corners
+  (`--ws-radius-row`), so 34 tall; 40 on touch. A 16 px muted line icon before the words when given
+  (`ws-menu-item__icon`), 8 apart. A row is a link when it goes somewhere, a button when it does something.
+- A hint (`ws-menu-item__hint`, inside `ws-menu-item__words`): an 11 / 13 muted line under the words, 2 apart; the icon
+  then sits on the words' first line.
+- A tick (`ws-menu-item__tick`): 16 px navy at the row's end, shown only on the chosen row of a choice.
+- The line between groups (`ws-menu-line`): 1 px of `--ws-menu-line`, 4 above and below, the menu's full width.
 
 ## Variants and sizes
 
-| Row kind | Element | `role` |
+| Row | Element | `role` |
 | --- | --- | --- |
-| Goes somewhere | `MenuItem href=...` | `menuitem` (as a link) |
-| Does something | `MenuItem onClick=...` | `menuitem` |
-| A toggle choice | `MenuItem role="menuitemradio" aria-checked` | `menuitemradio` |
-| The current item | `current` | adds the sunk background and, for a link, `aria-current="page"` |
+| Goes somewhere | `<a class="ws-menu-item">` | `menuitem` |
+| Does something | `<button class="ws-menu-item">` | `menuitem` |
+| A choice | `<button class="ws-menu-item">` with `ws-menu-item__tick` | `menuitemradio` or `menuitemcheckbox`, `aria-checked` |
+| The current item | `aria-current="page"` (or `ws-menu-item--current`) | keeps the `--ws-menu-hover` tint |
 
 ## States
 
-- **Default**: the cream row on the lifted panel.
-- **Hover**: the row tints to `--ws-surface-sunk`.
-- **Pressed**: a step further to `--ws-surface-press`.
-- **Focus**: the shadow focus ring (`--shadow-focus-ring`) on the row.
-- **Current**: a persistent `--ws-surface-sunk` background (not just on hover), for the item the person is already on.
-- **Disabled**: 40% opacity, no pointer events; used sparingly, with a short reason beside it if one is needed ("owner only").
-- **Leaving**: the panel fades and settles a hair smaller on the exit curve (`ws-menu-out`), taking no presses while it goes.
-- **Long label**: a row grows from 32 to accommodate two lines rather than truncating silently.
+- **Default**: rows on the raised ground.
+- **Hover**: the navy wash (`--ws-hover`, .05) over `--ws-duration-hover`; only for pointers that hover, so a tap
+  never leaves it behind.
+- **Pressed**: the press tint (`--ws-surface-press`), at once; the current row too.
+- **Focus**: the 2 px navy ring drawn inside the row.
+- **Current**: a steady `--ws-menu-hover` tint.
+- **Chosen**: the tick shows (`aria-checked="true"`).
+- **Disabled**: 50%, no presses; say why in its own words ("Billing (owner only)").
+- **Long label**: the row grows to two lines; words are never cut.
+- **Opening** (North js@620042, "Messages and steps settle"): it grows out of the corner it hangs from, 4 px toward
+  its button and .97 (`--ws-open-scale`), on the settle spring (`--ws-spring-settle`, .32 / .1, 450 ms to rest). A
+  native popover does it with `@starting-style`; one the app mounts plays `ws-menu-in`.
+- **Leaving** (`data-leaving`, or a native popover closing): it goes back into that corner (the same 4 px and .97,
+  fading) over `--ws-duration-exit` (120 ms) on `--ws-ease-exit`, faster than it came, taking no presses. A native
+  popover keeps its box while it leaves (`display` and `overlay` transition with `allow-discrete`), and a close
+  mid-entrance turns back from where it is. Wait 120 ms after `data-leaving` before removing it.
+- **Opened above** (it flipped, or the app placed it there): where the browser places it by anchor the nudge rides on
+  the margin, which the flip fallbacks turn with it, so it still comes from its button; it scales from the top right
+  either way (CSS cannot tell `transform-origin` which fallback won). An app that places it (Floating UI, Radix) sets
+  `data-side="top"`, and the nudge and the corner both turn round.
 
 ## Behaviour
 
-- Keyboard: rows are real links or buttons in document order; arrow-key roving focus is used only where the menu is a true `menu`/`menuitem` set with a library behind it, never hand-rolled.
-- Pointer: a click on a row runs its action or follows its link at once; a click outside the menu (its dismiss handler, `useDismiss`) closes it.
-- Touch: rows meet 40 px when the device is coarse-pointer (`@media (pointer: coarse)` lifts the row's own controls, not the menu row itself, which is already tall enough).
-- Motion: the panel rises in (`ws-menu`, `--ws-duration-gentle` on `--ws-ease-soft`) and, on close, fades and shrinks slightly (`ws-menu-out`, `--ws-duration-instant` on `--ws-ease-exit`).
-- Reduced motion: the panel appears and disappears without the rise or shrink.
+- Placement (K9): open it in the top layer with the native `popover` attribute and its button's `popovertarget`.
+  Nothing then cuts it (a card, a dialog, a scroller). Where the browser places by anchor, it hangs 8 under its
+  button, right edges flush (left edges once it flips to the other side). A tall one stays under its button, capped
+  to the room below less 8 and scrolling inside, so it never covers the button; it flips above only when less than
+  200 px (or less than its own height) fits below, and a menu wider than either side of its button (a phone) centres
+  in the window under it. The button is its anchor when the button opens it (or `showPopover({ source: button })`).
+  In a React app, portal it (Radix, Floating UI) with
+  `flip` and `shift`; in a scoped app the portal root carries `class="fello"`. A native popover needs no portal: it
+  stays where it is in the page, so it keeps the `.fello` scope and the page's tokens.
+- Keyboard: `popover="auto"` closes on Escape and on a press outside, and focus goes back to the button. Arrow keys
+  move between rows only where a library gives the menu roving focus; never hand-rolled.
+- Pointer: a press on a row runs it, then the app closes the menu (`hidePopover()`); a link row closes it by going.
+- Touch: rows are 40 tall.
+- Reduced motion: it appears and goes at once. A browser without `@starting-style` or `linear()` shows and hides it
+  at once too; nothing else changes.
+- The preview's last two stacks are live: press Sort, and Move (at the page's foot, so it opens above).
 
 ## Content
 
-- Each row's words are a short verb phrase or a destination name, sentence case, no em dash ("Invite your team", not "Team Invitation").
-- A disabled row's reason, if any, is part of its own words or a short line beside it, never a separate tooltip only.
-- Destructive or rare actions ("Sign out") sit last, after a hairline, so they are never the first thing pressed by habit.
+- Each row is a short verb phrase or a place's name, sentence case ("Invite your team").
+- A hint says what the row does in a few words, never a second label.
+- A disabled row's reason is part of its own words.
+- Rare or destructive rows ("Sign out") sit last, after a line.
 
 ## Props
 
-**`MenuItem`**
+**`MenuItem`** (the reference implementation)
 
 | Name | Type | Meaning |
 | --- | --- | --- |
 | `href` | string | Makes the row a link. |
-| `scroll` | boolean | For a link: `false` keeps the page where it is (a menu that changes the address's query). |
+| `scroll` | boolean | For a link: `false` keeps the page where it is. |
 | `current` | boolean | Marks the row the person is already on. |
 | `className` | string | Layout only. |
 | `children` | `ReactNode` | The row's icon and words. |
@@ -69,12 +100,57 @@ A small panel of rows, lifted off the page: the one menu, for an account, a page
 
 ## Rules
 
-- One component for every menu (16 Oct 2026: there had been seven of them): never a hand-styled dropdown panel.
-- A menu is lifted (`ws-shadow-lift`); it is one of the few surfaces in the system allowed a float shadow, since it genuinely sits above the page.
-- `useDismiss` closes the menu on an outside click or Escape; a menu never stays open once the person has clearly moved on.
+- One component for every menu: never a hand-styled dropdown.
+- In one menu every row has an icon or none does, so the words share one edge (an icon row's words start 24 further in).
+- A menu floats, so it is one of the few things with a shadow: the menu drop, never a lift on a card.
+- It closes once the person has moved on: Escape, a press outside, a row chosen.
 
 ## Source
 
-- **Derived from**: the system's lifted-panel and hairline rules (`ws-menu`, `ws-menu-item`, `ws-menu-line`, the
-  `--ws-menu-line` token, `--ws-shadow-lift`).
-- **Precedent**: the first product built on the system.
+**Derived from**: Seth's North menu (style1.css:657-660: 10 px corners, 4 inside, rows 8 / 10 with 6 px corners, 13 px
+medium words over a quieter line, navy .05 hover, `0 16px 32px -16px` drop; P1, popovers 8 under, from their corner,
+js@620042), Revenue OS K9 (17 of 76 menus cut at 1440), and the field fixes (gated hover, press tint, disabled 50%).
+**Precedent**: the first product built on the system.
+
+## Markup
+
+```html
+<button type="button" class="ws-btn ws-btn--secondary" popovertarget="account-menu">Dana Reyes</button>
+<div id="account-menu" class="ws-menu" role="menu" aria-label="Account" popover>
+  <a href="/profile" class="ws-menu-item" role="menuitem">
+    <svg class="ws-menu-item__icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="5.5" r="2.5" stroke="currentColor" stroke-width="1.5"/><path d="M3 13c0-2.5 2.2-4 5-4s5 1.5 5 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+    Your profile
+  </a>
+  <div class="ws-menu-line" role="separator"></div>
+  <button type="button" class="ws-menu-item" role="menuitem">
+    <svg class="ws-menu-item__icon" viewBox="0 0 16 16" fill="none"><path d="M6 4H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2M10 11l3-3-3-3M13 8H6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+    Sign out
+  </button>
+</div>
+
+<!-- a choice: no icons, the tick at the row's end -->
+<button type="button" class="ws-btn ws-btn--secondary" popovertarget="sort-menu">Sort</button>
+<div id="sort-menu" class="ws-menu" role="menu" aria-label="Sort the list" popover>
+  <button type="button" class="ws-menu-item" role="menuitemradio" aria-checked="true">
+    <span class="ws-menu-item__words">
+      <span>Needs you first</span>
+      <span class="ws-menu-item__hint">Overdue calls, then the oldest reply</span>
+    </span>
+    <svg class="ws-menu-item__tick" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+  </button>
+  <button type="button" class="ws-menu-item" role="menuitemradio" aria-checked="false">
+    <span class="ws-menu-item__words">
+      <span>Newest first</span>
+      <span class="ws-menu-item__hint">By when the lead came in</span>
+    </span>
+    <svg class="ws-menu-item__tick" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+  </button>
+</div>
+<!-- where a browser needs the anchor said: style="anchor-name: --account" on the button,
+     style="position-anchor: --account" on the menu -->
+```
+
+## Styles
+
+`Menu/style.css` reshapes the house `.ws-menu`, `.ws-menu-item` and `.ws-menu-line`; all are in `bundle.css` and
+`fello.css`. Tokens only, so it turns dark with the page.

package/design-system/components/Menu/preview.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Overlays" height=262 -->
+<!-- @dsCard group="Overlays" height=310 -->
 <!doctype html>
 <html>
 <head>
@@ -10,34 +10,96 @@
 <body>
 <div class="ws-stage ws-stage--grey">
 
-  <div class="ws-stack" style="width: 240px;">
-    <span class="ws-muted">Account menu, lifted on ws-shadow-lift</span>
-    <div class="ws-menu" role="menu" aria-label="Account">
-      <button type="button" class="ws-menu-item" role="menuitem">
-        <svg class="ws-menu-item__icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="5.5" r="2.5" stroke="currentColor" stroke-width="1.5"/><path d="M3 13c0-2.5 2.2-4 5-4s5 1.5 5 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
-        Your profile
-      </button>
-      <button type="button" class="ws-menu-item" role="menuitem">
-        <svg class="ws-menu-item__icon" viewBox="0 0 16 16" fill="none"><path d="M8 2v2M8 12v2M3 8H1M15 8h-2M4 4l1.4 1.4M10.6 10.6L12 12M4 12l1.4-1.4M10.6 5.4L12 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="8" r="2.5" stroke="currentColor" stroke-width="1.5"/></svg>
-        Settings
-      </button>
-      <div class="ws-menu-line"></div>
-      <button type="button" class="ws-menu-item" role="menuitem">
-        <svg class="ws-menu-item__icon" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="2.5" width="11" height="11" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M6 8h4M8 6v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
-        Invite your team
+  <div class="ws-stack" style="width: 260px;">
+    <span class="ws-muted">Hangs 8 under its button, right edges flush; the current row is tinted</span>
+    <div class="ws-stack" style="align-items: flex-end; gap: var(--space-xs);">
+      <button type="button" class="ws-btn ws-btn--secondary" aria-haspopup="menu" aria-expanded="true">Dana Reyes</button>
+      <div class="ws-menu" role="menu" aria-label="Account" style="width: 240px;">
+        <a href="#profile" class="ws-menu-item" role="menuitem" aria-current="page">
+          <svg class="ws-menu-item__icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="5.5" r="2.5" stroke="currentColor" stroke-width="1.5"/><path d="M3 13c0-2.5 2.2-4 5-4s5 1.5 5 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+          Your profile
+        </a>
+        <button type="button" class="ws-menu-item" role="menuitem">
+          <svg class="ws-menu-item__icon" viewBox="0 0 16 16" fill="none"><path d="M8 2v2M8 12v2M3 8H1M15 8h-2M4 4l1.4 1.4M10.6 10.6L12 12M4 12l1.4-1.4M10.6 5.4L12 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="8" r="2.5" stroke="currentColor" stroke-width="1.5"/></svg>
+          Settings
+        </button>
+        <div class="ws-menu-line" role="separator"></div>
+        <button type="button" class="ws-menu-item" role="menuitem">
+          <svg class="ws-menu-item__icon" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="2.5" width="11" height="11" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M6 8h4M8 6v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+          Invite your team
+        </button>
+        <button type="button" class="ws-menu-item" role="menuitem" aria-disabled="true">
+          <svg class="ws-menu-item__icon" viewBox="0 0 16 16" fill="none"><rect x="3.5" y="7" width="9" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2" stroke="currentColor" stroke-width="1.5"/></svg>
+          Billing (owner only)
+        </button>
+        <div class="ws-menu-line" role="separator"></div>
+        <button type="button" class="ws-menu-item" role="menuitem">
+          <svg class="ws-menu-item__icon" viewBox="0 0 16 16" fill="none"><path d="M6 4H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2M10 11l3-3-3-3M13 8H6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          Sign out
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 260px;">
+    <span class="ws-muted">Rows with a hint, and a choice that shows its tick</span>
+    <div class="ws-menu" role="menu" aria-label="Sort the list">
+      <button type="button" class="ws-menu-item" role="menuitemradio" aria-checked="true">
+        <span class="ws-menu-item__words">
+          <span>Needs you first</span>
+          <span class="ws-menu-item__hint">Overdue calls, then the oldest reply</span>
+        </span>
+        <svg class="ws-menu-item__tick" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
       </button>
-      <button type="button" class="ws-menu-item" role="menuitem" disabled aria-disabled="true">
-        <svg class="ws-menu-item__icon" viewBox="0 0 16 16" fill="none"><rect x="3.5" y="7" width="9" height="6" rx="1.5" stroke="currentColor" stroke-width="1.5"/><path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2" stroke="currentColor" stroke-width="1.5"/></svg>
-        Billing (owner only)
+      <button type="button" class="ws-menu-item" role="menuitemradio" aria-checked="false">
+        <span class="ws-menu-item__words">
+          <span>Newest first</span>
+          <span class="ws-menu-item__hint">By when the lead came in</span>
+        </span>
+        <svg class="ws-menu-item__tick" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
       </button>
-      <div class="ws-menu-line"></div>
-      <button type="button" class="ws-menu-item" role="menuitem">
-        <svg class="ws-menu-item__icon" viewBox="0 0 16 16" fill="none"><path d="M6 4H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2M10 11l3-3-3-3M13 8H6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
-        Sign out
+      <button type="button" class="ws-menu-item" role="menuitemradio" aria-checked="false">
+        <span class="ws-menu-item__words">
+          <span>Biggest deal first</span>
+          <span class="ws-menu-item__hint">By the quote, then by the stage</span>
+        </span>
+        <svg class="ws-menu-item__tick" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
       </button>
     </div>
   </div>
 
+  <div class="ws-stack" style="width: 260px;">
+    <span class="ws-muted">A long row wraps to two lines instead of cutting its words</span>
+    <div class="ws-menu" role="menu" aria-label="This lead">
+      <button type="button" class="ws-menu-item" role="menuitem">Copy the link</button>
+      <button type="button" class="ws-menu-item" role="menuitem">Move to the team list so someone new can try them</button>
+      <div class="ws-menu-line" role="separator"></div>
+      <button type="button" class="ws-menu-item" role="menuitem">Archive</button>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 260px;" data-live>
+    <span class="ws-muted">Live: press Sort. It grows out of its corner on the settle spring and goes back into it faster; Move, at the foot of the page, opens above when there is no room under it</span>
+    <div class="ws-cluster" style="justify-content: space-between;">
+      <button type="button" class="ws-btn ws-btn--secondary" popovertarget="menu-live" aria-haspopup="menu">Sort</button>
+    </div>
+    <div id="menu-live" class="ws-menu" popover role="menu" aria-label="Sort the list" style="width: 240px;">
+      <button type="button" class="ws-menu-item" role="menuitemradio" aria-checked="true" popovertarget="menu-live" popovertargetaction="hide">Needs you first<svg class="ws-menu-item__tick" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
+      <button type="button" class="ws-menu-item" role="menuitemradio" aria-checked="false" popovertarget="menu-live" popovertargetaction="hide">Newest first<svg class="ws-menu-item__tick" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
+      <button type="button" class="ws-menu-item" role="menuitemradio" aria-checked="false" popovertarget="menu-live" popovertargetaction="hide">Biggest deal first<svg class="ws-menu-item__tick" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 100%; align-items: flex-end;" data-live>
+    <button type="button" class="ws-btn ws-btn--secondary" popovertarget="menu-live-up" aria-haspopup="menu">Move</button>
+    <div id="menu-live-up" class="ws-menu" popover role="menu" aria-label="Move this lead" style="width: 240px;">
+      <button type="button" class="ws-menu-item" role="menuitem" popovertarget="menu-live-up" popovertargetaction="hide">To the team list</button>
+      <button type="button" class="ws-menu-item" role="menuitem" popovertarget="menu-live-up" popovertargetaction="hide">To Dana Reyes</button>
+      <div class="ws-menu-line" role="separator"></div>
+      <button type="button" class="ws-menu-item" role="menuitem" popovertarget="menu-live-up" popovertargetaction="hide">Archive</button>
+    </div>
+  </div>
+
 </div>
 </body>
 </html>

package/design-system/components/Menu/style.css

@@ -0,0 +1,61 @@
+/* ---- Menu: the house .ws-menu in Seth's North shape (C43): 10 px corners on the hairline and the menu drop, 6 px rows of
+   13 px words with an 11 px hint, opened in the top layer and kept on screen ---- */
+/* The panel: never taller or wider than the window (K9), its own scroll past that. Its corner is where it grows from:
+   the top right, under the button it hangs from (North P1). */
+.ws-menu { max-width: calc(100vw - var(--space-xl)); max-height: calc(100dvh - var(--space-xl)); overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: var(--ws-radius-menu); color: inherit; box-shadow: var(--ws-shadow-hairline), var(--ws-shadow-menu); transform-origin: top right; }
+/* A row: 8 above and below 13 / 18 words, 10 at the sides, 6 px corners; 40 tall on touch (house K10). The hover wash is
+   gated to pointers that hover, so a tap never leaves it behind; a press is the press tint. */
+.ws-menu-item { padding: var(--space-xs) var(--space-xs-plus); border-radius: var(--ws-radius-row); text-decoration: none; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+.ws-menu-item:hover { background: none; }
+@media (hover: hover) { .ws-menu-item:hover { background: var(--ws-hover); } }
+/* Both ways of marking the current row weigh the same, so neither loses its tint to the hover rules above. */
+.ws-menu-item[aria-current], .ws-menu-item.ws-menu-item--current { background: var(--ws-menu-hover); }
+/* The press comes last, so the current row answers a press too. */
+.ws-menu-item:active { background: var(--ws-surface-press); transition-duration: var(--ws-duration-instant); }
+.ws-menu-item:disabled, .ws-menu-item[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
+/* The line between groups runs the menu's full width, past its 4 px padding (North D1). */
+.ws-menu-line { margin-inline: calc(var(--space-xxs) * -1); }
+.ws-menu-item__icon { flex-shrink: 0; width: var(--ws-icon); height: var(--ws-icon); color: var(--color-text-muted); }
+/* A row with a hint: the words over an 11 / 13 line, the icon and the tick centred on the first line. */
+.ws-menu-item__words { display: flex; flex: 1; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
+.ws-menu-item__hint { font-size: var(--ws-text-micro); line-height: var(--ws-leading-micro); font-weight: 400; color: var(--color-text-muted); }
+.ws-menu-item:has(.ws-menu-item__hint) { align-items: flex-start; }
+.ws-menu-item:has(.ws-menu-item__hint) > :is(.ws-menu-item__icon, .ws-menu-item__tick) { margin-block: calc((var(--ws-leading-control) - var(--ws-icon)) / 2); }
+/* A choice (menuitemradio, menuitemcheckbox): the tick at the row's end shows only when it is chosen. */
+.ws-menu-item__tick { flex-shrink: 0; width: var(--ws-icon); height: var(--ws-icon); margin-left: auto; color: var(--color-text-heading); visibility: hidden; }
+.ws-menu-item[aria-checked="true"] > .ws-menu-item__tick { visibility: visible; }
+/* The top layer (K9): opened with the native popover attribute it sits above every card, dialog and scroller that would
+   cut it. Where the browser places it by anchor, it hangs 8 under its button, right edges flush (left edges once it
+   flips to the other side). A tall one keeps hanging there, capped to the room below (8 short of the window's edge)
+   and scrolling inside, so it never slides over its button; it flips above only when less than 200 px (or less than
+   its own height) fits below. Wider than either side of its button (a phone), it centres in the window under it.
+   Without anchor placement, the app places it (Floating UI flip and shift). */
+.ws-menu[popover]:not(:popover-open) { display: none; }
+@supports (position-area: block-end) {
+  .ws-menu[popover] { inset: auto; margin: var(--space-xs) 0; position-area: block-end span-inline-start; justify-self: end; position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline, --ws-menu-wide, --ws-menu-wide flip-block; max-height: calc(100% - var(--space-xs) * 2); min-height: calc-size(max-content, min(size, var(--space-9xl))); }
+}
+@position-try --ws-menu-wide { position-area: block-end span-all; justify-self: center; }
+/* Motion (D7, North js@620042: from y -4 and scale .97 on "Messages and steps settle", the settle spring .32 / .1; out
+   the same way over .12 s): it grows out of the corner it hangs from, toward its button, and settles on the spring; it
+   goes back into that corner faster. --ws-menu-from is the nudge, toward the button: up under it, down over it. An app
+   that places it (Floating UI, Radix) says which side with data-side="top"; where the browser places it by anchor, the
+   nudge rides on the margin toward the button instead, which the flip fallbacks turn with it (the corner it scales
+   from stays the top right there: CSS cannot tell a fallback's side to transform-origin). A native popover enters and
+   leaves by transitions (@starting-style, display and overlay allow-discrete), so a close mid-entrance turns back from
+   where it is; one the app mounts plays ws-menu-in and, with data-leaving, ws-menu-out before it is removed. */
+.ws-menu { --ws-menu-from: calc(var(--ws-nudge) * -1); }
+.ws-menu[data-side="top"] { --ws-menu-from: var(--ws-nudge); transform-origin: bottom right; }
+@keyframes ws-menu-in { from { opacity: 0; transform: translateY(var(--ws-menu-from)) scale(var(--ws-open-scale)); } }
+@keyframes ws-menu-out { to { opacity: 0; transform: translateY(var(--ws-menu-from)) scale(var(--ws-open-scale)); } }
+@media (prefers-reduced-motion: no-preference) {
+  .ws-menu:not([popover]) { animation: ws-menu-in var(--ws-spring-settle-duration) var(--ws-spring-settle) backwards; }
+  .ws-menu[data-leaving] { animation: ws-menu-out var(--ws-duration-exit) var(--ws-ease-exit) forwards; pointer-events: none; }
+  .ws-menu[popover] { transition: opacity var(--ws-spring-settle-duration) var(--ws-spring-settle), transform var(--ws-spring-settle-duration) var(--ws-spring-settle), margin-block var(--ws-spring-settle-duration) var(--ws-spring-settle), overlay var(--ws-duration-exit) allow-discrete, display var(--ws-duration-exit) allow-discrete; }
+  .ws-menu[popover]:not(:popover-open) { opacity: 0; transform: translateY(var(--ws-menu-from)) scale(var(--ws-open-scale)); transition-duration: var(--ws-duration-exit); transition-timing-function: var(--ws-ease-exit); }
+  @starting-style { .ws-menu[popover]:popover-open { opacity: 0; transform: translateY(var(--ws-menu-from)) scale(var(--ws-open-scale)); } }
+  @supports (position-area: block-end) {
+    .ws-menu[popover]:not([data-side]) { --ws-menu-from: 0px; }
+    .ws-menu[popover]:not([data-side]):not(:popover-open) { margin-block-start: calc(var(--space-xs) - var(--ws-nudge)); }
+    @starting-style { .ws-menu[popover]:not([data-side]):popover-open { margin-block-start: calc(var(--space-xs) - var(--ws-nudge)); } }
+  }
+}

package/design-system/components/Meter/README.md

@@ -1,9 +1,10 @@
-A running job's progress: a thin pill track that fills to the latest count, beside the words that say what it is doing.
+A count on a thin 4 px track: a running job's progress beside its words, or a share in a row with its name above it.
 
 **Use it when**
 
 - Something is running now and the backend actually counts its parts ("2 of 7"), so the bar is never a guess.
 - A card's one act needs to show it is moving without a full `Stepper` (a mission pill at the foot of the screen, a running card in the chat).
+- A short list of shares, each a row with its name and value above a thin track (Seth's "Seats Felix absorbs").
 
 **Not for**
 
@@ -13,8 +14,14 @@ A running job's progress: a thin pill track that fills to the latest count, besi
 
 **Anatomy**
 
-- Track: `--space-xxs` (4 px) tall, `--radius-full` pill, `--color-gray-2` ground.
-- Fill: the same pill shape, solid `--color-brand-navy`, its width the count's share, growing to a new figure inside the fixed track rather than the track itself resizing.
+- Track: 4 px tall (`--space-xxs`), 2 px corners (Seth), `--ws-track` ground.
+- Fill: the same shape, solid navy (`--color-text-heading`; teal when finished), its width the count's share, growing to a
+  new figure inside the fixed track rather than the track itself resizing.
+- `--pill`: the 12 px mission pill, round ends.
+- Rows (`.ws-meter__rows`): each row 8 above and below, 14 at the sides, a 0.5 px divider between rows (none above the first). On its line the name
+  (13/18 medium navy, one line, a `title` when it can truncate) and the value 8 after it (12/16 semibold navy, or
+  `--quiet` 12/16 medium muted for "none" and "stays"); 4 under it the track; 4 under that an 11/13 muted caption.
+  A row with no share has no track.
 - Words beside it: `ws-muted`, tabular numerals ("2 of 7").
 - Above the bar, the running step's own line: its words, a middle dot, and the elapsed clock ("0:42", "12:05", "1:02:05"), in `--color-text-interactive` (mid blue) while it ticks.
 
@@ -26,6 +33,13 @@ A running job's progress: a thin pill track that fills to the latest count, besi
 | Without a count | Only the step and its clock show; no bar is drawn, ever, when the backend has not actually counted parts |
 | Finished | The clock stops ticking (no interval), the bar (if any) sits at its final share |
 
+**Parts and modifiers**
+
+- `.ws-meter__card`: the running card: the step and its clock, then the meter, 4 apart, the card's padding inside.
+- `.ws-meter__step`: the step's words, 14/20 in `--color-text-interactive`, tabular.
+- `.ws-meter__step--done`: a finished step, in muted grey.
+- `.ws-meter__fill--done`: a finished run's fill, in `--color-stat-positive`.
+
 **States**
 
 - Running: the clock ticks once a second from when the job started; the bar's width follows each new count.
@@ -38,7 +52,7 @@ A running job's progress: a thin pill track that fills to the latest count, besi
 **Behaviour**
 
 - Decorative to a screen reader (the bar carries no `aria-*` of its own); the words beside it ("2 of 7") and the step's own text are what a screen reader reads.
-- Motion: the fill's width transitions over `--ws-duration-gentle` on the soft curve as each new count arrives; the clock re-renders its text once a second while running, brought up to date at once when the run started before the page caught up.
+- Motion: the fill's width moves over 700 ms on the settle curve (`--ws-duration-fill`, `--ws-ease-settle`) as each new count arrives; the clock re-renders its text once a second while running, brought up to date at once when the run started before the page caught up.
 - No pointer or keyboard behaviour.
 
 **Content**
@@ -62,6 +76,27 @@ A running job's progress: a thin pill track that fills to the latest count, besi
 
 **Source**
 
+- **Seth**: the 4 px track with 2 px corners and the seat rows, Tally report (319:3426 to 319:3432). His seat fill is
+  #2C4870 (agent/tally), the fill's `--ws-agent-tally` (the act itself in dark).
 - **Derived from**: the system's fixed-track fill rule, "a card's progress meter: its bar grows to the new figure
   inside a fixed track," and the no-invented-count rule.
 - **Precedent**: the first product built on the system.
+
+**Markup**
+
+```html
+<span class="ws-meter" aria-hidden="true">
+  <span class="ws-meter__track"><span class="ws-meter__fill" style="width: 28.6%;"></span></span>
+  <span class="ws-meter__words">2 of 7</span>
+</span>
+
+<ul class="ws-meter__rows" aria-label="Seats Felix absorbs">
+  <li class="ws-meter__row">
+    <span class="ws-meter__line"><span class="ws-meter__name">ISAs</span><span class="ws-meter__value">50%</span></span>
+    <span class="ws-meter__track" aria-hidden="true"><span class="ws-meter__fill" style="width: 50%;"></span></span>
+    <span class="ws-meter__caption">4, typical for your team</span>
+  </li>
+</ul>
+```
+
+**Styles**: `Meter/style.css`, in `bundle.css` and `fello.css` as `.ws-meter`. Every value is a token.

package/design-system/components/Meter/preview.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Progress" height=200 -->
+<!-- @dsCard group="Progress" height=420 -->
 <!doctype html>
 <html>
 <head>
@@ -55,6 +55,23 @@
     </div>
   </div>
 
+  <div class="ws-stack" style="width: 340px; max-width: 100%;">
+    <span class="ws-muted">Rows: a seat's share on the 4 px track, its caption under it, 0.5 px dividers</span>
+    <ul class="ws-meter__rows" aria-label="Seats Felix absorbs">
+      <li class="ws-meter__row">
+        <span class="ws-meter__line"><span class="ws-meter__name">ISAs</span><span class="ws-meter__value">50%</span></span>
+        <span class="ws-meter__track" aria-hidden="true"><span class="ws-meter__fill" style="width: 50%;"></span></span>
+        <span class="ws-meter__caption">4, typical for your team</span>
+      </li>
+      <li class="ws-meter__row">
+        <span class="ws-meter__line"><span class="ws-meter__name">Marketing managers</span><span class="ws-meter__value ws-meter__value--quiet">none, typical</span></span>
+      </li>
+      <li class="ws-meter__row">
+        <span class="ws-meter__line"><span class="ws-meter__name" title="Transaction coordinators and closing assistants">Transaction coordinators and closing assistants</span><span class="ws-meter__value ws-meter__value--quiet">stays</span></span>
+      </li>
+    </ul>
+  </div>
+
 </div>
 </body>
 </html>