# HYROS brand system — the LLM file
# Version 2 (CL1 design language) · September 2026 · source of truth: hyros.com/brand
# Hand this whole file to an AI (Claude, GPT, Cursor…) and it can rebuild any HYROS page, section or animation on brand, pixel for pixel.
# Every value below is read from the live site's code (Framer code file NewClConcepts.tsx) — nothing is approximate.

## 0. How to use this file
- Read section 1 (rules) before designing anything. Then pick a page recipe (section 12) and compose it from the components (section 8) and the dashboard / console kit (section 9) with the tokens (section 2) and type (section 3).
- The zebra print (section 5) is the ONLY texture. Its full SVG is in Appendix A — paste it, do not redraw it.
- Sven (section 7) is a fixed 13×15 pixel grid — render the grid, never draw a "new Sven".
- Every dashboard, report, console and UI graphic (section 9) is built from ONE window + terminal kit — arrange its parts, never invent a new chart or window style.
- Animations (section 11) are timed class flips and requestAnimationFrame loops. The timings are exact.
- Copy is verbatim (section 13). Never invent slogans, testimonials or numbers.
- All downloadable files (logos, marks, Sven, zebra backgrounds, fonts) are listed with URLs in sections 3, 5, 6 and 7.

## 1. What HYROS is, and the design language
HYROS is AI ad tracking and attribution for businesses that buy ads — e-commerce, SaaS, info/education, call-based sales and agencies. It catches the sales Meta and Google miss and feeds them back to the ad platforms' AI, so the same ad spend buys more customers. The mascot is Sven, the HYROS AI, a pixel creature.

The design language (internally "CL1"; think Anthropic/Claude's documentation aesthetic applied to a marketing site): warm cream ground, a big Book-weight serif, quiet mono labels, ONE purple accent, white windows that show the product, and an organic zebra-stripe print as the single texture. Technical, minimal, friendly. No gradients, no drop shadows on type, no pink, gold or green from the old brand.

Hard rules
- One accent per element. Purple (#5150F6) marks "the point": HYROS's number, the purple dot on an icon, the second sentence of a headline, links. Never two accents in one mark.
- Terracotta (#D0603F) exists ONLY inside data: a tinted cell, a ✕ mark, a "never tracked" tag inside a table. Never in icons, headlines, buttons, badges, illustrations.
- Backgrounds are flat: cream, white, panel, lavender, ink. Texture = the zebra print at 5–11% opacity, always clipped by the box it fills.
- Bold is never used for emphasis in body copy. `<b>` renders at weight 400; emphasis = INK on a grey line, or purple.
- Sven is sacred pixels: the 13×15 grid, crisp edges, no smoothing, outlines, gradients, badges, shadows or recolouring except the listed colourways.
- Customer quotes stay verbatim. Real headshots and screenshots only. Figures in product windows are illustrative and stay in the same ratios (Meta ≈ 70% of HYROS so "30% more" is honest).
- Mobile first: every section must work at 390px; the phone rules are in Appendix C and the component notes.
- prefers-reduced-motion and the Framer canvas get the finished static frame of every animation.

## 2. Tokens
```css
:root {
  /* grounds */
  --cream: #FAF9F5;      /* page background */
  --white: #FFFFFF;      /* alternating section bands, windows, cards */
  --panel: #F6F5F0;      /* hero panel, dotted panel, guarantee panel */
  --card: #FCFBF8;       /* window header rows, picker rows, the button card */
  --cream2: #EDEBE3;     /* soft button ground, backdrop panels, quiet cells (#EAE8E0 for the soft button) */
  --grey-band: #F3F2ED;  /* the greyer cream under a bolder grey zebra band */
  --lavbg: #EEEEFB;      /* HYROS column band, lavender stages, pills, the lavender zebra ground */
  --dark: #161514;       /* the dark zebra container (hero only) */
  /* ink + text */
  --ink: #1F1E1D;        /* headlines, dark buttons, terminal background */
  --lede: #55534E;       /* ledes and subs, 16.5–18px */
  --body: #5E5D59;       /* 15px body text */
  --label: #8B8984;      /* mono labels, captions, quiet text */
  --ghost: #9A9891;      /* the grey half of a type lockup (also #A09E98 for unlit rows) */
  --hair: rgba(31,30,29,.11);   /* every border; rgba(31,30,29,.06) for row dividers; .08 on backdrop panels */
  /* accent */
  --brand: #5150F6;      /* THE accent */
  --lav: #A5A4FA;        /* Sven body, sparkline fills, dashed connectors, accents on dark */
  /* data only */
  --miss: #D0603F;       /* ✕ marks */  --miss-text: #B5533A;  --miss-fill: rgba(217,119,87,.16);
  /* radii */
  --r-btn: 7px; --r-win: 12px; --r-card: 16px; --r-pill: 18px; /* 18–22 */ --r-panel: 24px; --r-stadium: 999px;
  /* shadows (windows only, never on type) */
  --sh-win: 0 26px 60px -30px rgba(31,30,29,.4);
  --sh-card: 0 12px 34px -26px rgba(31,30,29,.35);
  --sh-pill: 0 6px 18px rgba(31,30,29,.05);
  --sh-term: 0 24px 50px -30px rgba(31,30,29,.5);
  /* layout */
  --container: 1180px; --gutter: 32px; /* 20px on phones */ --section-pad: 96px; /* 88–112 */
}
```
Third-party colours appear only on real third-party logos (Shopify green etc.).

## 3. Type
| Role | Face | Size / weight | Notes |
|---|---|---|---|
| Hero H1 | P22 Mackinac | 50–64px, Book 400, line-height 1.06–1.12, letter-spacing −0.012em | the home hero is 50px, `white-space: nowrap`, 40px on phones |
| Section H2 | P22 Mackinac | 44–56px, Medium 500, lh 1.1, ls −0.012em | second sentence or last word in purple |
| Sub-H2 / two-column titles | P22 Mackinac | 40–44px Medium | |
| Card / note titles | P22 Mackinac | 19–20px Medium, lh 1.3 | feature notes, picker rows, FAQ questions |
| Big figures | P22 Mackinac | 36–96px Medium, ls −0.015 to −0.03em | tabular numerals where they count |
| Grey serif lede | P22 Mackinac | 22–26px Medium, lh 1.28–1.3, colour #9A9891, `text-wrap: pretty` | the pitch under a headline, max-width 640–720 |
| Lede | Inter | 16.5–18.5px 400, lh 1.55–1.6, #55534E | max-width 560, `text-wrap: balance` |
| Body | Inter | 15px 400, lh 1.6, ls −0.01em, #5E5D59 | max-width 470 |
| Buttons | Inter | 15px 400, line-height 1 | never Medium |
| Nav links | Inter | 12px 400, rgba(31,30,29,.78) | 56px bar |
| Mono labels / kickers | Geist Mono | 10.5px, ls .1em, uppercase, #8B8984 | table headers, window URLs (12–13px, not uppercase) |
| Terminal text | Geist Mono | 12–13px | |
| Quote lines | Inter | 13.5–14px, INK, name in #8B8984 | one line, 26–36px avatar |

Font files (the site loads exactly these)
```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&display=block');
@font-face { font-family: 'P22 Mackinac'; src: url('https://go.hyros.com/assets/fonts/mackinac-book.woff2') format('woff2'); font-weight: 400; font-display: block }
@font-face { font-family: 'P22 Mackinac'; src: url('https://go.hyros.com/assets/fonts/mackinac/mackinac-medium.woff2') format('woff2'); font-weight: 500; font-display: block }
/* stacks */
--serif: 'P22 Mackinac', Georgia, serif;
--sans: 'Inter', 'Helvetica Neue', sans-serif;
--mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
```
P22 Mackinac is licensed to HYROS for hyros.com / go.hyros.com web use (Book + Medium only). Do not ship the files elsewhere; reference them from these URLs on HYROS properties, or use Georgia as the fallback in mock-ups.

Type lockups
- Ink→grey lockup: one serif block at one size (40–44px Medium). The claim in INK, the explanation continues in GHOST #9A9891. Purple may colour one word. No kicker above it.
- Grey serif lede: headline 44–56px Medium (INK, purple half-sentence) + explanation block in Mackinac Medium 22–26px GHOST. A mono kicker may sit above the pair.
- Pill headline: 34–38px Medium inside a white pill card when the headline sits on the zebra print.
- Rotating word (`Rotator`): 2.4s hold, 290ms out (opacity 0 + 8px drop), purple; one per page.
- Ellipses are typographic (…). Headlines end with a full stop.

## 4. Layout rhythm
- Container 1180px, side padding 32px (20px on phones). Section top padding 88–112px.
- Alternate backgrounds: cream → white band (hairline top + bottom) → cream. Alternate alignment: centered → two-column → centered.
- One visual per section: headline + at most one window / strip / graph / icon row.
- At most one framed panel per page (the dotted panel or the guarantee panel). Never a box inside a box.
- Two-column sections: `grid-template-columns: 1fr 1fr`, gap 48–72px, text column max 480px, on phones one column.
- Inside a white section a second idea sits under a hairline (`margin-top: 72px; padding-top: 64px; border-top: var(--hair)`).
- Never two zebra bands of the same colour in a row; a white band always separates a lavender band from a grey one.
- Text that must sit on a zebra print goes in a white pill card (radius 18–22, hairline, --sh-pill). A serif headline may sit raw on the lavender print at .09.
- Phone breakpoint: `@media (max-width: 760px)` — grids collapse to one column, H1 40px, H2 31–36px, buttons stack full-width, the hero panel becomes a 440px-tall stage with the window zoomed to .68.

## 5. The zebra print
17 organic stripes in a `viewBox="0 0 800 600"`, group rotated −18° about the centre, `preserveAspectRatio="xMidYMid slice"`, absolutely positioned to fill its parent, which must have `position: relative; overflow: hidden`. Content above it gets `position: relative; z-index: 1`. Stripes draw larger on wide boxes (the print scales to the box) — accepted.

Colourways (the only ones)
| Name | Ground | Stripes | Opacity | Where |
|---|---|---|---|---|
| Lavender | #EEEEFB | #5150F6 | .09 | hero panel, MCP band, results heroes, pricing hero |
| Lavender strong | #EEEEFB | #5150F6 | .11 | the picker band, the swarm "you get" band |
| Grey | #FAF9F5 | #1F1E1D | .05 | delayed-sales band, extension band, review walls |
| Grey band | #F3F2ED | #1F1E1D | .05 | a bolder grey band (masked away from a text column) |
| Dark | #161514 | #FFFFFF | .07 | the dark hero (swarm-data, black-friday), white type on it; the black-friday page continues on #0E0D0D below it |

Masks: a band can fade the print away from its text column: `mask-image: linear-gradient(90deg, #000 40%, rgba(0,0,0,.16) 60%)` (or `100deg, transparent 26%, #000 64%` to keep it on the right).

Ready-made backgrounds (PNG, sRGB) and vector files — https://go.hyros.com/assets/brand/zebra/
- zebra-{lavender|lavender-strong|grey|grey-band|dark}-wide.png — 2400×1500
- zebra-{…}-tall.png — 1200×2400 (phone)
- zebra-{…}-square.png — 1600×1600
- zebra-{…}.svg — the same, as vectors with the ground
- zebra-print-brand.svg / zebra-print-ink.svg / zebra-print-white.svg — stripes only, transparent, for your own ground

Component (React/JSX)
```jsx
function ZebraPrint({ color, opacity }) {
  return (
    <svg className="eo-zp" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <g fill={color} opacity={opacity} transform="rotate(-18 400 300)">{ZEBRA_PATHS.map((d, i) => <path key={i} d={d} />)}</g>
    </svg>
  )
}
// .eo-zp { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
// usage: <div className="band" style={{ position: "relative", overflow: "hidden", background: "#EEEEFB" }}><ZebraPrint color="#5150F6" opacity={.09} /><div style={{ position: "relative", zIndex: 1 }}>…</div></div>
```
The 17 path strings (ZEBRA_PATHS) are in Appendix A as a complete SVG.

## 6. Logo
The logo is Sven's pixel face (the mark) + the serif logotype "Hyros" (title case, one vector — never retype it in a live font). The standalone face is the mark for avatars, favicons and tight spaces. Clear space ≈ 25% of the mark's height on all sides. Scale in whole steps so the pixels stay crisp; SVG preferred.

| File | Use | SVG | PNG |
|---|---|---|---|
| Logo · Hyros Blue | on cream / white | https://go.hyros.com/assets/brand/logo/hyros-logo-blue.svg | https://go.hyros.com/assets/brand/logo/hyros-logo-blue.png (2400×680, transparent) |
| Logo · White | on ink, on the dark zebra, on solid purple | https://go.hyros.com/assets/brand/logo/hyros-logo-white.svg | https://go.hyros.com/assets/brand/logo/hyros-logo-white.png |
| Logo · Ink | on cream / white when purple would be a second accent | https://go.hyros.com/assets/brand/logo/hyros-logo-ink.svg | https://go.hyros.com/assets/brand/logo/hyros-logo-ink.png |
| Mark · Hyros Blue | avatars, favicons | https://go.hyros.com/assets/brand/mark/hyros-mark-blue.svg | https://go.hyros.com/assets/brand/mark/hyros-mark-blue.png (896×1076) |
| Mark · White | on ink / purple | https://go.hyros.com/assets/brand/mark/hyros-mark-white.svg | https://go.hyros.com/assets/brand/mark/hyros-mark-white.png |
| Mark · Ink | on light | https://go.hyros.com/assets/brand/mark/hyros-mark-ink.svg | https://go.hyros.com/assets/brand/mark/hyros-mark-ink.png |
| Box logo | app icon / avatar on any background (purple rounded square, white face) | https://go.hyros.com/assets/brand/mark/hyros-mark-box.svg | https://go.hyros.com/assets/brand/mark/hyros-mark-box.png (1024×1024) |

In the site nav the logo renders at 20px tall (`.ncl-logo { height: 20px; width: auto }`), Hyros Blue on cream. Never stretch, outline, shadow or recolour outside these variants; never place the white versions on light grounds.

## 7. Sven — the mascot
A fixed 13-column × 15-row pixel grid. "X" is a body cell; the eyes are two 1.8×2 cells at (4,8) and (7.2,8) in the contrast colour.
```
XX.........XX
XX.........XX
XXXX.....XXXX
XXXX.....XXXX
XXXXX...XXXXX
XXXXXX.XXXXXX
XXXXXXXXXXXXX
XXXXXXXXXXXXX
XXXXXXXXXXXXX
XXXXXXXXXXXXX
XXXXXXXXXXXXX
..XXXXXXXXX..
..XXXXXXXXX..
XXXX.XXX.XXXX
XXXX.XXX.XXXX
```
Colourways: Lavender body #A5A4FA + white eyes (the default, on white, cream and LAVBG); White body + purple eyes (on solid purple / ink); Hyros Blue body + white eyes (the logo mark); Ink body + white eyes.
Files — https://go.hyros.com/assets/brand/sven/sven-{lavender|white|blue|ink}.svg and .png (1040×1200, transparent).
Sizes: 56–120px on pages; 110px in the get-started tile; 13px cells at 8× for a 104px figure.
Render as SVG rects with `shape-rendering: crispEdges` (Appendix B). Per-model props (a shopping bag, a laptop, a phone, a mortarboard) are small purple (#5150F6) shapes beside the head — the single accent — used only in the business-model picker.
Motion (get-started page): "thinking" = a gentle 1.8s bob (`translateY(0 → -3px)`), the eyes glance left/right and blink, three purple thought dots rise off the top-right of the head; "spin" = one 360° rotate over .8s with `cubic-bezier(.2,.7,.2,1)` after each form step. Reduced motion: none of it.
Drawn Sven (`SvenLine`) for the line-icon family: the silhouette traced as one INK outline (pixel staircase kept, cell 5px, stroke 1.6, round joins), two short vertical strokes for eyes. Dim a "bad" instance to .42 opacity.
Never: badges, overlays, shadows, smoothing, rotation of the grid (except the spin), or a "new" Sven.

## 8. Components
Every component below is a named class in the site's code; the exact CSS is in Appendix C. Use as-is.
- **Nav** `.ncl-nav` — 56px bar on the page ground, logo left (20px), 12px links with 9px chevrons, "Login" soft pill + "Book a demo" INK pill right. Dropdowns: white card, hairline, radius 14, two-column link lists with a mono kicker. Phone: hamburger → full-screen white overlay with accordion groups and a bottom "Book Set Up Call" INK button.
- **Hero (home)** `.cx-wrap` — two columns (1fr 1.05fr): left `.cx-left` centered text (H1 50px nowrap with a Rotator, `.cx-sub` 18px, the button card, the Tony Robbins line); right `.cx-panel` — a 600px-tall LAVBG panel (radius 14, hairline) with the lavender zebra print and the animated windows (section 10).
- **Button card** `.cx-card` — 336px card (#FCFBF8, hairline .14, radius 16, padding 18, --sh-card) holding a full-width INK button `.cx-btn-dark` (15px, padding 13/16, radius 7) over a white outlined `.cx-btn-soft` (border rgba(31,30,29,.18)) with a 12px ↓.
- **Hero quote line** `.cx-tq.is-a` — one 13px line under the card: "Hyros allowed us to scale our ad spend by 43%" in INK, " — Tony Robbins Ad Team" in #8B8984; wraps to two lines on phones.
- **Buttons** `.ncl-btn-dark` INK / white text, 15px, padding 13/22, radius 7, inline-flex gap 9; `.ncl-btn-soft` #EAE8E0 / INK. Small `.pcx-btn` 13px on cards. Never Medium weight, never a shadow, never pink.
- **Window** `.cx-win` — white, hairline, radius 12, --sh-win, `overflow: hidden`; title bar `.c1-winbar` with three 7px dots (#D9D7CF) and a centered mono URL; rows `.c1-row` 13px with rgba(31,30,29,.06) dividers; the HYROS column is a LAVBG band with purple figures; caption row 12.5px with purple emphasis. Max 480px in the hero panel, `max-width: none` in two-column sections.
- **Report strip** `.st2-win` — a 980px window with mono label / 38px serif figure / sparkline / 12.5px label per cell; the hero figure purple, the rest INK; footer row with a check and a source line.
- **Dark terminal** `.bx-term` — INK background, radius 10, mono 12px, purple step dots, LAV accents, --sh-term. Typed prompt → steps → output. Fixed height (340px), content scrolls to the newest line; a window never grows while animating.
- **Mono label / kicker** `.hs-k` — Geist Mono 10.5px, uppercase, ls .1em, #8B8984 (purple `.eo-head .hs-k` above a section H2).
- **Section head** `.eo-head` — kicker + `.eo-h2` (44px Medium, purple `<b>`) + `.eo-lede` (17px, #55534E, max 480 / 560 centered).
- **Chips** `.c1-chip` — white, hairline, radius 10, padding 9/15, 13px; a purple text chip for "+ 5,000 more". The brands strip `.cx-proof`: "Tracking $5B+ in ad spend for:" then Tony Robbins / Alex Hormozi / Whop / ClickFunnels / Jay Shetty / + 5,000 more.
- **White pill card** `.eo-qpill`, `.pk-left`, `.sw-qpill` — white, hairline, radius 18–22, padding 22–44, --sh-pill. Holds a headline, a quote or a text block ON the zebra print. Quote pills: 36px avatar, 14px text, INK name; stadium (radius 999) for the compact form.
- **Black pill** `.eo-mx-pill` — INK, white 15px Medium text, radius 999, padding 12/22, optional LAV › caret. One line that must pop; may straddle a seam with a 3px white ring.
- **Dark cards** `.eo-pc.is-dark` — INK, radius 16, white line icon with a LAV accent, LAV mono number, white 20px serif title, 14.5px sub at rgba(255,255,255,.62). Three in a row = the process steps. Light variants: numeral cards (64px INK serif numeral) and flow tiles (48px INK tile with a 40px white icon, dashed purple connectors).
- **Backdrop panel** — #EDEBE3, radius 20, hairline .08, padding 44/40: the one way to give a window "ground" inside a white section.
- **Guarantee panel** `.bx-finpanel` — PANEL #F6F5F0, hairline .12, radius 14, padding 72/32, centered: shield line icon, mono kicker "The HYROS Guarantee", 44px H2 "Your ads grow. **Or you don't pay.**" (purple second sentence), lede, dark + soft buttons, a quiet 13px line.
- **Dotted panel** `.pk-box` — white/PANEL, 18px dot grid, radius 24, hairline; contents: mono kicker, left-aligned H2, cards.
- **Power-brand quote band** `.rs-splice` — a full-width band (lavender / grey / dark zebra, rotating in that order between case studies) holding ONE white card (max 720, radius 22, padding 36/40): a 56px serif “ mark in purple, the quote in Mackinac Medium 24–28px (22px when longer than 110 characters), then a 34px round headshot + INK name + #8B8984 source.
- **Dark zebra container** `.sw-dark` — #161514, radius 28, hairline rgba(255,255,255,.08), the white zebra at .07; mono kicker + big LAV figure, white serif sub, Inter copy at rgba(255,255,255,.7) with emphasis in white. Hero container only, on the cream ground under the H1.
- **FAQ** `.eo-faq` — white band, line icon, 48px "Questions, answered.", one white hairline card (820px, padding 6/30): 19px serif questions on hairline rows, 15px Inter answers, purple ⊕ → ⊖ on LAVBG, `grid-template-rows: 0fr → 1fr` expand, first item open.
- **Footer** `Foot1x` — hairline top, 1180 container: logo (20px), tag "Legendary tracking and AI optimization for Ads", four hairline badges (SOC 2 / GDPR / Google Play / App Store), four link columns (Product / About us / Legal / Support, 12.5px INK heads, 13px #55534E links at line-height 2), hairline bottom row with © and Facebook Community / X / LinkedIn. Phone: two columns, the logo block full width.

## 9. Dashboards, consoles & UI graphics — the product-window kit
Every product graphic on the site — the home hero loop, the sales-page heroes, the /enterprise MCP stage, the swarm explainer, the supplement dashboard — is ONE kit: a white window with the three-dot bar, mono labels, serif figures, lavender data, purple for the one thing HYROS changed, and an INK console that types the prompt, works the steps and pushes the result into the window. The CSS for every class below is in Appendix C (phone rules in Appendix D). The live reference is hyros.com/enterprise (`McpStage`): the window sits on a white band, cut by the band's bottom edge; the console continues at the same width in the lavender zebra band below; the step strip sits under the console.

### 9.1 The window
- Shell `.cx-win` / `.eo-dash` — #FFFFFF, hairline border, radius 12 (14 for the dashboard), --sh-win `0 26px 60px -30px rgba(31,30,29,.4)` (`0 30px 60px -36px rgba(31,30,29,.35)` on the split device), `overflow: hidden`, text left. Max 480px in a hero panel, 760px as the split device, `max-width: none` in two-column sections.
- Title bar `.c1-winbar` — padding 13/18, hairline bottom, three 9px CREAM2 dots left (`.c1-windot`), the address centered in Geist Mono 11.5px #8B8984 (`.c1-winurl`): "hyros.com/reports", "app.hyros.com · dashboard", "sheets · enterprise reporting hub". Never a real browser chrome, never coloured dots.
- App nav `.mcp-dnav` — a row of 11.5px #55534E items (padding 4/9, radius 6) under the bar; the active item is a LAVBG pill in purple Medium (`.is-on`); an item HYROS just added arrives as `.is-new` (same pill, `mcpPop` .5s). Right-aligned `.mcp-model`: mono 10px #8B8984 with a 6px dot — "Model · last click" in grey, "Model · LTV-weighted" in purple with a purple dot once the model is live.
- Rows `.c1-row` — 13–13.5px INK at .85, dividers rgba(31,30,29,.06), header row mono 10.5px uppercase ls .1em; the HYROS column is a LAVBG band with purple mono numbers (padding 3/10, radius 6). Ad-platform numbers stay ≈ 70% of HYROS's.
- Caption `.cx-cap` — 12.5px #55534E on a hairline, purple `<b>` for the claim ("HYROS caught **30% more sales** than the ad platform reported.").

### 9.2 Dashboard parts (`McpDash` / `EoDashWin` — the "app.hyros.com" window)
- KPI tiles `.eo-dash-kpis` — grid `repeat(4, 1fr)`, gap 10, padding 14/18/12. A tile `.eo-kpi`: #FCFBF8, hairline, radius 10, padding 10/12/8. Inside: the mono label `.hs-k` ("REVENUE", "LTV · 90D"), the figure in P22 Mackinac Medium 22px INK (`b`), the delta in Geist Mono 10.5px ls .04em PURPLE (`em` — up AND down deltas are purple: purple means "HYROS moved this", never "good"), a 56×18 sparkline bottom-right (`Spark`: LAV fill rgba(81,80,246,.12) under a 1.4px purple line). The highlight tile `.is-ltv` spans two columns on LAVBG with a purple .3 border and a purple figure, and pops in (`mcpPop` .55s). A recomputed tile flashes a purple ring (`mcpFlash` 1.2s).
- Figures tween: `McpNum` counts from the old value to the new over 750ms (ease-out cubic) whenever a value changes — never a snap.
- Chart `.eo-dash-chart` — the mono title "ATTRIBUTED REVENUE BY DAY" left, the legend right (11px: a LAV square = Revenue, an INK line = ROAS, a coral #F28B82 line = the metric HYROS just added); `viewBox 0 0 720 120`, 30 LAV bars (16 wide on a 24 pitch, rx 2), ROAS as a 1.6px INK polyline; a new series draws itself in (`mcpDraw`: stroke-dashoffset 1000 → 0 over 1.4s); bars re-height over .8s when the model changes.
- Table `.eo-dash-tbl` — `.eo-dr` grid 2fr 1fr 1fr 1fr .8fr, 12.5px INK, padding 9/18, dividers .06; the header row (`.is-h`) is mono 10.5px uppercase #8B8984 on #FCFBF8; the ROAS column is purple (`.is-roas`) and flashes on a recompute. Columns: Campaign / Platform / Spend / Revenue / ROAS.
- Funnel pane `.mcp-flow` — cards `.mcp-fcard` (#FCFBF8, hairline, radius 10: mono label + 22px serif figure) joined by `.mcp-farr` (46px wide, a dashed LAV .5 line with an arrow head, the drop "−14%" in mono 10px above it); under them `.mcp-fchan` chips (white hairline stadium, "Meta 46%") and the "LTV by first click" line.
- Client table `.mcp-cl` — grid 1.6fr .7fr .7fr .8fr 1.4fr; status is written in words: "● on target" #1F8A5B / "▲ CPA over target" #B5533A — the ONLY green and terracotta in the system, and only inside data cells. Footer `.mcp-clfoot`: mono "KPIS" + the targets.
- Spreadsheet `.mcp-sheet` — the enterprise reporting hub: Inter 11.5px, #F3F2EC gutters and bars, a column-letter row, a numbered first column; the two HYROS columns slide open (`.hy`: width 0 → 108px over .8s, LAVBG + purple) and their cells pop in one per 110ms (`mcpCell`).
- Panes: the window holds three panes side by side (`.mcp-panes` 300% wide; `.is-funnel` / `.is-clients` translate −33.3% / −66.7% over .75s cubic-bezier(.2,.7,.2,1)) — the app "opens" the feature HYROS just built.
- `.is-static` (reduced motion, the Framer canvas) kills every transition and animation and shows the finished state.

### 9.3 The console (`.bx-term` — "hyros-mcp")
- Shell — INK #1F1E1D, radius 10 (`radius 0 0 14 14` and `.is-bare`, no bar, when it continues a window in the split device), --sh-term, `overflow: hidden`. Bar `.bx-termbar`: three 8px dots at rgba(255,255,255,.18), the title centered in mono 10.5px ls .06em at .4 white ("hyros-mcp · report").
- Screen `.bx-code` — Geist Mono 12px, line-height 1.75, rgba(245,244,239,.86), padding 18/20/22. `.bx-code2.is-fixed` is 340px tall (360 on the enterprise stage, 320 on phones), `overflow: hidden`, `scroll-behavior: smooth`: the newest line is kept in view by scrolling the screen (`scrollTop = scrollHeight` whenever scrollHeight changes). The window NEVER grows while it animates.
- Lines (`.bx-ln`, min-height 21px): the prompt is "›" at .5 white + white text + a 7×13 LAV caret blinking at 1s; a step shows a 9px spinner ring (`.bx-spin`, LAV top) that becomes a LAV ● 650ms later; the assistant's question is "✦" + white 13px (`.mcp-ask`); progress is a 150×5 LAV pill (`.mcp-bar`); results are "✓ …" in #C5C4FB (`.ok`); warnings #F0A28C; a highlighted phrase in the prompt is white 700 on rgba(165,164,250,.22), radius 3 (`.mcp-bold`). Every new line rises in (`bxIn` .35s: opacity 0 + 4px).
- Output blocks `.bx-out` (`bxIn` .5s): `.bx-tbl` a 3-column grid (a report); `.bx-app` a rounded hairline panel (rgba(255,255,255,.12) border, .03 fill) titled with a 7px purple dot + the app name, holding funnel rows `.bx-fr` (label / a LAV bar that grows in .8s with a 120ms stagger / value) or client rows `.bx-cl` (140ms stagger); `.bx-sheet` a white Inter sheet inside the terminal whose HYROS columns slide open (`.is-slid`).
- Tabs / step strip `.bx-tabs` — a segmented pill: CREAM2 track, radius 8, padding 3; items 11.5px #55534E, padding 5/10, radius 6; the active one white + INK + `0 1px 2px rgba(31,30,29,.08)`. UNDER a console (`.is-below`) the track is white with a hairline and the active item is LAVBG + purple; `.mcp-tabs` prefixes each item with a mono "01" that turns purple when on. A click pins a tab (the auto-cycle stops). The sales heroes use the quieter `.eo-seqsteps` strip (mono, purple = on, INK = done).

### 9.4 Timing (read from the code)
- Typing: 22ms per character on the MCP stage, 24ms in the enterprise console, 27ms in the home composer, then ~300ms settle. Work steps land every 850ms (900ms in the console); each dot fills 650ms after its line appears. The output block lands 150–300ms after the last step; "Pushing to your Hyros app" 1.7s after the output; the window above reacts 600ms after the push; a pane slides 300ms later; the "✓ done" line 900ms after that; then a 2.6–3.6s hold and the next tab starts.
- The stage opens with "Connecting to your Hyros app" (500ms) → "Connecting Claude to Hyros MCP" + a 1.3s bar (1500ms) → "✦ What do you want to do with your Hyros data?" (3300ms) → the first prompt types.
- The five enterprise-stage scripts (`MCP_STEPS`, verbatim):
| # | Tab | Prompt | Work | Push → Done | Hold |
|---|---|---|---|---|---|
| 01 | Any metric | Add subscriptions and LTV as metrics, layer it into our charts. | Reading subscription events — 4,812 active subs → Computing LTV per customer cohort → Layering Subs onto the attributed revenue chart | Pushing to your Hyros app → ✓ 2 metrics live → LTV, Subs | 2.6s |
| 02 | Attribution | Make a new LTV based attribution model based on the equation I'm uploading so we can value social media clicks in the journey more. | Reading uploaded algorithm — ltv_model.py → Increasing weights on social clicks → Lowering last-click weight → Optimizing for LTV → Factoring in multi-click journeys and time on page | Pushing to your Hyros app → ✓ Model live → every report recalculated | 3.0s |
| 03 | Custom features | Make a custom funnel reporting app with a custom attribution model that tracks LTV across all ad clicks. | Reading click + sale history — all channels → Designing attribution model — multi-touch, LTV-weighted → Building funnel report app | Pushing to your Hyros app → ✓ Live in your Hyros app → Funnel Report | 3.2s |
| 04 | Client dashboard | Make a custom client dashboard that lets me detect key metrics in each client and analyze on the fly based on our agency's specific KPIs. | Loading 12 client accounts → Mapping your KPIs — CPA target, ROAS floor, LTV:CAC → Building dashboard + alerts | Pushing to your Hyros app → ✓ Live in your Hyros app → Client dashboard · 2 alerts | 3.2s |
| 05 | Reporting integration | Take the accurate HYROS data and integrate it into all our current reporting systems. | Connecting Google Sheets · Looker · HubSpot → Mapping HYROS fields → your columns | Pushing to your enterprise reporting hub → ✓ Synced → Google Sheets · Looker · HubSpot | 3.6s |
- The four enterprise-console tabs (`CT`, the how-it-works console): Custom report — "Show me ROAS by product line across Meta and Google, last 90 days." · Attribution app — "Make a custom funnel reporting app with a custom attribution model that tracks LTV across all ad clicks." · Client dashboard — "Make a custom client dashboard that lets me detect key metrics in each client and analyze on the fly based on our agency's specific KPIs." · Reporting integration — "Take the accurate HYROS data and integrate it into all our current reporting systems.". Same beats, no intro.
- Focus beat (the sales heroes, end of a scene): `--fp` eases 0 → 1 over .9s; the window scales `1 + .09·fp` and lifts, everything else dims to .22, the caption grows to 15.5px INK — hold, then the next scene.
- Reduced motion / the canvas: the finished frame everywhere (`t = 1e9`, `.is-static`).

### 9.5 Rules for any new dashboard, console or UI graphic
1. Build it from these classes. A new screen is a new arrangement of bar + nav + tiles + chart + table + console — never a new style.
2. Purple marks what HYROS changed or added: a delta, the HYROS column, a new nav item, the ✓ line, the active tab. It never means "good". Green #1F8A5B / terracotta #B5533A only inside status cells.
3. Labels are Geist Mono 10.5px uppercase; figures are P22 Mackinac Medium (22px in tiles, 38px in strips); everything else inside a window is Inter 11.5–13.5px. Tabular numerals.
4. Grounds: a white window on a cream, white or lavender band; tiles and header rows #FCFBF8; the console is INK. No gradients, no zebra striping in tables, no shadows on type; hairlines .06 inside a window, .11 around it.
5. Data is illustrative but honest: the ad platform ≈ 70% of HYROS, deltas 15–30%, CPA down / ROAS up, money formatted en-US.
6. Windows never resize while animating; content scrolls inside a fixed screen. One window per section; the split device (a window cut by the band edge + the console below) is the only stacked form.
7. Every animation has a finished static frame for reduced motion and the canvas.

## 10. Icons — the line-icon family (site-wide)
- Canvas 96×72, `viewBox="0 0 96 72"`, rendered at 96px, never scaled.
- Stroke INK #1F1E1D, width 1.6, round caps and joins, `fill: none` everywhere.
- Exactly one purple accent: a filled circle r 3.2 (#5150F6), or one small purple-filled shape ≤ 12px.
- Secondary strokes may be dashed (`3 3`) in INK to mean "missing". No second colour, no fills, no text.
- The window is the primary motif: rounded rect 68×52 at (14,10), rx 6, title line at y 22, two 3px dashes at y 16.
- Placement: centered above a section H2 with 22px below it, or left-aligned above the kicker in a two-column section. Never inside a card or window.
- Inline chip icons: same language at 22px (1.5 stroke, no accent). Data marks (not icons): ✕ #D0603F and ✓ #5150F6, 15px, only next to numbers.
- The one face allowed besides Sven: `Wink` — a 24–44px smiley with one purple open eye.

## 11. Motion
Rules
- Motion lives in windows and terminals only. Sections themselves only fade / rise once.
- Beats are cumulative classes (`at-a at-b at-c…` on the scene); 120ms cascades; 0.5–0.55s crossfades; marks pop with overshoot (`hsPop`: scale 0 → 1.45 at 55% → 1, 0.45s).
- Loops: one requestAnimationFrame driving `t` in seconds; every value derived from `t` at render time (positions from a Bézier, counters from arrivals, colours mixed); a hold at the end, then an `is-out` fade (opacity 0 over .5s) before the reset — never a snap.
- Arrival tick: the figure that changes turns purple and scales 1.1 for .12s, back over .35s.
- Play-once sections: IntersectionObserver at threshold .12–.25, then a timed cascade — headline fade (.6s) → window rises out of the band edge (translateY(105%) → 0, 1.1s, cubic-bezier(.2,.7,.2,1), .25s delay) → console unfolds (clip-path inset(0 0 100% 0) → inset(0), .9s, 1.15s delay) → typing starts at 1.5s → tabs / sub fade at 2s. A pill on a seam appears last (1.9s).
- Typing: 27ms per character in the hero composer, 22ms in the MCP console; the caret is a 1px INK bar blinking at 1s.
- Word rotators: 2.4s hold, 290ms out (8px drop + fade).
- Reduced motion / Framer canvas: the finished frame (state initialised to the last beat).

The home hero loop (`HeroSeq`) — exact timeline, loops forever, 54.96s per cycle
Scenes are absolutely stacked in the lavender panel; the active scene is `.is-on` (opacity 1, others fade .5s, translateY 14px + scale .985 → none). Each phase name = scene number + beat letter; the beat letters accumulate on the scene as `at-a`, `at-b`… so CSS can stage the window.
| Phase | ms | What happens |
|---|---|---|
| s1a | 1300 | Scene 1 — the report window (hyros.com/reports) fades in: Ad set / Meta / HYROS header |
| s1b | 1500 | rows appear (Hook V3 — founder story 96 → 137, Free trial — lookalike 5% 73 → 104, Demo bookings — video #3 67 → 96, Retargeting — 30d 45 → 65), ✕ marks pop on the Meta column, ✓ on HYROS |
| s1c | 1500 | totals row 322 vs 460; caption "HYROS caught 30% more sales than the ad platform reported." |
| s1d | 3000 | the window scales 1.14 and lifts 16px, rows dim to .28 — the hold |
| s2a | 1000 | Scene 2 — the sync window (hyros.com/sync): HYROS node left, Meta + Google nodes right, dashed LAV connectors |
| s2b | 1900 | tokens travel along the connectors for 2.2s ("138 sales attributed" … "Receiving conversions ✓", "Optimizing delivery / bids") |
| s2c | 2700 | the platforms' status pills settle; caption "Send sales ad platforms missed. Improve their AI targeting." |
| s2d | 3000 | the closing zoom: the window scales 1.14 and lifts 16px, the flow dims to .28, the caption grows to 15px INK with the second sentence on a LAVBG highlight — the hold |
| s3a | 1400 | Scene 3 — the CPA ledger (hyros.com/cpa): "Cost to acquire a customer" $100 |
| s3b | 1900 | row "Media buyers make better decisions −10%" lights, the figure counts down to $90 over .9s (ease-out cubic) |
| s3c | 3000 | row "AI targeting optimized −10%" lights, the figure counts to $81; caption "Ad waste less. AI targeting improves. You get customers cheaper." |
| s3d | 3000 | the closing zoom (same as s1d / s2d): window 1.14, ledger dims, the caption pops |
| s4a | 1500 | Scene 4 — the MCP chat (hyros.com/mcp): "Connecting to Claude MCP" + progress bar fills 1.2s |
| s4b | 1700 | "Claude MCP connected" slim bar; the composer appears |
| s4c | 1400 | user bubble: "Claude, based on Hyros swarm data, which ads should we cut and which should we scale based on LTV?" (the phrase in purple Medium) |
| s4d | 3200 | thinking dots → the answer card: SCALE Hook V3 — founder story ROAS 3.1× · LTV $412 / CUT Retargeting — 30d ROAS 0.9× · LTV $88 / BEST LTV Free trial — lookalike 5% LTV $540; "Would you like me to apply this to your ads?" |
| s4e | 1700 | "Applying to Meta + Google" progress bar fills |
| s4f | 2300 | "APPLIED — 2 AD SETS UPDATED" in purple mono — the hold |
| s4g | 3000 | the closing zoom on the chat (window 1.14, the conversation dims to .28) and the shared caption bar (the same .cx-cap the other scenes end on, 15px ink, the focus phrase in a lavender pill) rises over the composer: "Unify your attribution. Connect it to Claude. Analyze and act on it." — the hold |
| s5a | 4100 | Scene 5 — the request is typed into the composer at 27ms/char ("Make me a custom attribution model and an LTV dashboard based on our data. Add it to my Hyros app as a new feature.", 115 chars ≈ 3.1s) then holds 1s on the finished text |
| s5b | 2400 | the user bubble sends; "Building your feature" card: progress bar fills 1.2s, sub "Reading attribution data · Designing model · Generating dashboard" |
| s5c | 5460 | Scene 6 — the LTV Dashboard window (app.hyros.com/ltv-dashboard, "New feature" LAVBG tag): tiles 90-day LTV $412 / Payback 34 days / Best channel Meta, LTV by channel bars (Meta 412 purple, Google 377, TikTok 291, Email 208) and the attribution-weights stack (First touch 20% / Assists 30% / Last touch 50%) animate in; caption "Build any feature, app, report. Add it to your Hyros app in a prompt." — the long hold |
| s5d | 3000 | the closing zoom on the dashboard (window 1.14, tiles and charts dim, the caption pops), then the loop restarts at s1a |

Other site animations
- Sales-page live-orders hero: phases a → d over a Bézier timeline — Meta's pixel misses orders (✕ rows, lost income counter in terracotta) → the HYROS swarm pixel connects (progress line) → orders attribute one by one (✓, purple) → attributed income counts up with a +30% pill; `is-out` fade, then reset.
- MCP console (`EntConsole`): typed prompt at 22ms/char → steps with purple dots → output rows; fixed 340px screen, scrolls to the newest line.
- Get-started Sven: thinking bob + blink + thought dots on load and during the "thinking" beat (1.8s / 1.1s); one 360° spin after each step.
- Results power-brand bands and every section: one fade/rise on reveal (opacity 0 + translateY 8–14px → none, .6s).

The swarm-data hero loop (`SwAnim`) — five scenes, 29.6s, cumulative beats `at-1…at-4` on the scene, one rAF for the counters, scenes crossfade .5s (opacity + 10px rise)
| Phase | ms | What happens |
|---|---|---|
| a1 | 600 | Connect — the brand tile (white 64px rounded square, storefront line icon with a purple door, mono "YOUR BRAND" in LAV) scales in at the centre of three LAV rings |
| a2 | 2400 | eight Svens (LAV, 28–34px) pop in around the rings one per 220ms with dashed LAV lines to the brand; the console bar fills "Connecting to swarm network · n of 12 nodes" |
| a3 | 1600 | two sonar rings pulse outward (scale .6 → 3.4, 1.6s, staggered .8s); "Swarm network connected · 12 of 12 nodes" |
| b1 | 900 | Recognize — a visitor card slides in from the left (yourstore.com bar, avatar, "New visitor · landing from a Meta ad"); six data-point pills appear dim (Device · Email · Cookie · Click ID · IP · Session) |
| b2 | 1800 | a LAV scan line sweeps the card; the pills light one by one (white text, LAV dot + value); "Analyzing visitor · n of 6 data points" |
| b3 | 700 | the "RECOGNIZED" stamp (LAV outline, mono, −6°) pops under the card with overshoot |
| b4 | 2600 | the history panel rises (Customer #4821 · 14 events: Clicked Meta ad · Hook V3 14d ago / Visited /pricing 9d / Purchased $340 6d / Reordered $120 2d / Opened email · Spring drop today), rows cascade 160ms; "Recognized · full history loaded" |
| c1 | 800 | Catch — two columns fade in: "Ad pixel" (hairline) and "Swarm data" (LAV rim + tint) |
| c2 | 2200 | the serif counters run 0 → 322 and 0 → 460 (ease-out cubic) with bars underneath; "Catching sales the pixel missed" |
| c3 | 2400 | the "+30%" LAV pill pops beside 460; the console becomes the caption "Swarm data caught 30% more sales than ad pixels." |
| d1 | 700 | Optimize — HYROS node left, "Cost to acquire $100" centre top, Meta + Google cards right on dashed curves |
| d2 | 3200 | eight glowing signal dots travel HYROS → Meta / Google alternately (one every 300ms, 900ms flight); each arrival steps the CPA down 100 → 97 → 94 → 91 → 88 → 86 → 84 → 82 → 81 (LAV, "−n%"); "Optimize ad platform AI targeting · n of 8 signals" |
| d3 | 2000 | "AI targeting optimized" LAV pills on both platforms; hold |
| e1 | 900 | Scale — the "Recent sales" panel (6 orders with LTV) fades in dim |
| e2 | 1800 | rows light in sequence; the top-LTV rows get a LAV tint + "TOP 20%" tag; "Analyzing sales · n of 6 orders" |
| e3 | 2400 | the AOV and 90-day LTV tiles count $86 → $104 (+21%) and $412 → $540 (+31%); "Optimizing for highest value customers"; the bar fills |
| e4 | 2600 | hold with "Meta AI · optimizing for highest value customers", then the loop restarts at a1 |
Reduced motion and the Framer canvas show scene A finished (all nodes connected).

## 12. Page recipes (band order, top to bottom)
Home (hyros.com)
1. Nav
2. Hero `.cx-wrap`: left — H1 "Same ad spend. / 15% more {sales. | calls. | leads. | ROAS.}" (Rotator, purple), sub "Catch sales Meta and Google miss. / Optimize Ad AIs. Get customers cheaper.", button card (Book Setup Call → the booking link; See How It Works ↓ → #brands), the Tony Robbins line; right — the lavender zebra panel with the HeroSeq loop.
3. Brands strip `.cx-proof` (cream): "Tracking $5B+ in ad spend for:" + chips.
4. Stats (white band): line icon, "Brands that add Hyros see", the report strip (5,000+ brands · last 12 months; guaranteed or you don't pay).
5. Business-model picker (lavender-strong zebra band): pill headline "See how Hyros Works. Pick your business model.", five model cards with Sven + prop, two CTAs.
6. MCP (white → lavender zebra, the split device): "Your data, where YOU work." console + dashboard; "What could you build with the Hyros MCP?" + Learn More / MCP documentation.
7. Guarantee panel.
8. FAQ (white) — optional on the home; always on sales pages.
9. Footer.

Sales page (ecommerce / saas / info-education / call-tracking; agency is a variant)
hero (lavender zebra panel right, text left, model kicker) → problem (cream, two-column: "Your ad platform's pixel is guessing." + Ads Manager window) → fix (white: "The HYROS swarm pixel doesn't guess." checks) → definition band (lavender zebra, graph + quote pills) → process intro + three dark step cards (white) → step two-column (white) → grey zebra band (text in a white box + window) → step two-column with a backdrop panel (white) → lavender band closer → dashboard/MCP merge (white → lavender zebra) → extension (grey zebra) → guarantee panel → FAQ (white) → footer. Bottom CTA: "Book Setup Call" + "See FAQ" / "See Results" (→ the model's results page).

Results page (our-results, ecom-, saas-, education-, call-, agency-results)
lavender zebra hero (mono kicker, H1 with purple half, grey lede, trust row, two buttons) → case studies (white cards: logo, headline, figures, quote) interleaved with the power-brand quote bands rotating lavender → grey → dark → quote wall → trust row → guarantee → footer.

Swarm-data (explainer)
DARK hero: the black zebra (#161514, white print .07) spans the nav and the hero — the nav goes white (white logo SVG, links rgba(255,255,255,.78), no Login, a white "Book Setup" pill); centered stage: mono kicker, "AI Swarm Data" over the rotating line in LAV (Cuts CPA. / Improves Ad AI. / Grows AOV. / Attributes. Everything.), a CTA box (rgba(255,255,255,.05) card, hairline .14, radius 16: outlined "See how it works ↓" + white "Book Set Up"), then the swarm animation in a 760px dark window (#1B1A19, hairline .1, radius 14, mono URL hyros.com/swarm, a five-step strip Connect · Recognize · Catch · Optimize · Scale with the active step in LAV, a 700×320 stage scaled to the window's width, a console row: LAV dot + mono line + progress bar + mono right label) → "Who uses it." on an INK band: the white crowd line icon (three people, LAV accent), then eight dark cards in a 4×2 grid (rgba(255,255,255,.04), hairline .1, radius 18) — each leads with "#1" in 26px LAV serif + the rank in LAV mono (Tony Robbins Ad Team · Alex Hormozi · Whop · Jay Shetty Ad Team · Luxury Bazaar · Ben Heath · Sam Ovens · Playboy Ecommerce), the power statement in white Mackinac Medium 21px, a 34px headshot + name — then the "So how does it work?" cue → white numeral cards + a dark pixel card → lavender zebra "you get" (white cards + result strip) → two-column loop on white (checks left, the sales pages' sync/CPA loop window on the backdrop panel right: HYROS sends sales back, each conversion ticks Meta's and Google's CPA down, "Watch CPA drop.") → the MCP merge from the enterprise page (white → lavender zebra split device: "Data Built To Be Built With / Any {App | Feature | Report | Tool | Dataset} You Want.", the MCP sub, the dashboard window rising into the console with its five tabs) → grey zebra picker (headline in a white card, five model cards, no button) → the home page's guarantee panel (shield icon, "The HYROS Guarantee", "Your ads grow. Or you don't pay.", Book a demo + Show Me How) → footer.

Enterprise / MCP
lavender hero with the console + dashboard animation and the 5-step picker → how-it-works (white cards, one dark) → "you could build" cards → CTA panel ("Book Custom Set Up Call" → app.iclosed.io/e/hyros/custom) → footer.

Pricing
the lavender zebra runs full-bleed behind the menu (the nav sits inside the hero band, no separate cream bar) → the price picker window (Sven, the revenue slider, the price, "Book Setup" + "Plan Details", then the rotating one-line testimonial — six power statements, 3.8s each, the home hero's quiet 13px line) → plan cards → FAQ → the guarantee panel ("Book Setup" + "Plan Details") → footer.

Black Friday (hyros.com/black-friday-2026 — the dark page, every band dark)
the swarm-data DARK hero (black zebra spanning the white nav; centered: mono kicker "Black Friday 2026", serif pre-head "For Brands With Heavy Q4 Ad Sales" in cream, H1 "Make **10-20% In Q4** From / the same ad spend..." (the figure in LAV), the sub in rgba(255,255,255,.7), the swarm loop themed for the day — URL hyros.com/black-friday, "landing from a Black Friday ad", "sales caught · Black Friday week", "Black Friday sales" — then the CTA card (white "Book Set Up" + outlined "See How It Works ↓"), the quiet line "Book a demo before **{deadline}** and get" (deadline = the `bfDeadline` control, LAV) over four perk pills (LAV check dot, hairline .12, radius 999: Locked in lower grandfather pricing · Full AI automation suite upgrade · VIP ad analyst upgrade at no cost · Enterprise level MCP access)) → the page ground turns #0E0D0D: how-it-works (mono kicker, H2 "Ad platforms miss your sales. **HYROS spots them.**", two dark cards — the problem (hairline) and the fix (LAV hairline, LAV kickers) with the old page's copy verbatim — then the "Critical" alarm card: a dark zebra card, LAVBG "● CRITICAL" chip, "Do not wait till Black Friday.", the 2-3 weeks / MUST start early line, the CTA card again (Book Set Up + "Watch A 90 Second Demo" → /product-tour) with the deadline line + pills) → "Who uses it." (the swarm-data #1 wall, no cue) → the business-model picker in dark (the home picker's markup on rgba(255,255,255,.03) with .05 cards, LAV numerals, white titles) → the guarantee panel in dark ("We set it up for you. Same day improvements in ad ROI." kicker, "Results guaranteed **or you do not pay.**", Book Set Up + Watch A 90 Second Demo, "Book a demo before {deadline} and lock in the Black Friday perks") → FAQ in dark (the home FAQ, white type, .08 hairlines) → the dark footer (`Foot1x dark`: white logo, rgba(255,255,255,.6) links).

Thank-you (go.hyros.com, after booking)
intro (Sven swoops in on cream with brand-palette bursts, types "Thanks so much for booking", then "Important: Please watch this QUICK video or we may have to cancel your call!") → white hero band: mono kicker, "How We Will Grow Your Ads **Guaranteed.**", the video in a window on the lavender zebra panel, booked-time LAVBG pill, the confirm warning as a black pill, dark + soft calendar buttons → FAQ card → footer with the fine print.

Get-started (go.hyros.com/get-started-1)
white ground, Sven (110px, lavender, thinking) centered over one typed serif line and ONE control group at a time: email → business model + revenue → name / website / ad spend → the booking sheet (INK confirm, mono labels, LAVBG selected day/slot). Sven spins between steps; the group slides out left; the line deletes and retypes.

## 13. Copy — voice and the approved lines
Voice: plain, confident, short. Sentence case. Headlines are claims that end with a full stop; the second sentence or the last word is the purple "point". Numbers are the argument (15%, 30%, 43%). No exclamation marks in headlines, no slogans (none are approved — do not invent any). Emphasis is colour, never bold.
Approved headlines (verbatim)
- "Same ad spend. 15% more sales." (home; rotating sales / calls / leads / ROAS)
- "Catch sales Meta and Google miss. Optimize Ad AIs. Get customers cheaper." (home sub)
- "How we grow E-Com ad ROI." / "Guaranteed — or you don't pay."
- "Your ad platform's pixel is guessing." · "The HYROS swarm pixel doesn't guess."
- "Delayed sales are our specialty." · "Your data, where YOU work." · "As easy as 1 2 3, Done." · "One easy dashboard… With a twist"
- "Brands that add Hyros see" · "See how Hyros Works. Pick your business model." · "What could you build with the Hyros MCP?"
- "Your ads grow. Or you don't pay." (the guarantee) · "Questions, answered." (FAQ)
- "How We Will Grow Your Ads Guaranteed." (thank-you) · "Thanks so much for booking"
Buttons: "Book Setup Call", "See How It Works ↓", "Book a demo", "Login", "Book Custom Set Up Call", "Apply Now" (basic pages), "Begin Booking".
Quotes (verbatim, with the names): "Hyros allowed us to scale our ad spend by 43%" — Tony Robbins Ad Team · "In just 6 months, Hyros allowed us to scale our ad spend by 43% for Business Mastery and over 100% for Unleash The Power Within." — Tony Robbins Ad Team, tonyrobbins.com · "A measurably better return on every ad dollar we invest" — Luxury Bazaar · "HYROS revolutionized our decision making process" — Playboy Ecommerce.
Footer tag: "Legendary tracking and AI optimization for Ads". Legal line: "© 2026 Hyros INC. All rights reserved."

## 14. Do / Don't
Do: open sections, one idea each, big Book serif, quiet mono, purple once, white boxes for text on a print, INK for the thing that must pop (cards, columns, a pill), the drawn Sven for illustration, windows for the product.
Don't: fill an icon, colour an icon terracotta, put a badge on the pixel Sven, box a quote inside a white section (pills are for the print only), stack two framed panels, use Medium weight on sans below 15px, use bold for emphasis, add a colour for one section, let a window grow while it animates, put two zebra bands of the same colour together, use gradients, pink, gold or green, retype the logotype.

## Appendix A — the zebra print, complete SVG (paste as-is; change fill/opacity only)
```html
<svg viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice" aria-hidden="true" style="position:absolute;inset:0;width:100%;height:100%;pointer-events:none">
  <g fill="#5150F6" opacity=".09" transform="rotate(-18 400 300)">
    <path d="M-120 -64.0 L-108 -62.4 L-96 -60.5 L-84 -58.2 L-72 -55.5 L-60 -52.5 L-48 -49.3 L-36 -45.9 L-24 -42.3 L-12 -38.7 L0 -35.3 L12 -31.9 L24 -28.8 L36 -26.0 L48 -23.5 L60 -21.5 L72 -19.8 L84 -18.6 L96 -17.7 L108 -17.1 L120 -16.9 L132 -16.8 L144 -16.8 L156 -16.9 L168 -16.9 L180 -16.8 L192 -16.5 L204 -16.0 L216 -15.1 L228 -14.0 L240 -12.5 L252 -10.7 L264 -8.7 L276 -6.5 L288 -4.1 L300 -1.7 L312 0.7 L324 2.9 L336 5.0 L348 6.8 L360 8.2 L372 9.3 L384 10.0 L396 10.3 L408 10.3 L420 9.8 L432 9.1 L444 8.2 L456 7.2 L468 6.1 L480 5.0 L492 4.1 L504 3.3 L516 2.9 L528 2.8 L540 3.0 L552 3.7 L564 4.7 L576 6.1 L588 7.8 L600 9.7 L612 11.9 L624 14.1 L636 16.4 L648 18.6 L660 20.7 L672 22.6 L684 24.2 L696 25.5 L708 26.5 L720 27.2 L732 27.6 L744 27.7 L756 27.6 L768 27.5 L780 27.2 L792 27.0 L804 27.0 L816 27.1 L828 27.5 L840 28.2 L852 29.4 L864 30.9 L876 32.9 L888 35.2 L900 37.9 L912 41.0 L924 44.2 L936 47.6 L948 51.1 L960 54.6 L960 58.1 L948 55.4 L936 52.5 L924 49.6 L912 47.0 L900 44.6 L888 42.6 L876 41.1 L864 40.0 L852 39.3 L840 39.1 L828 39.4 L816 40.0 L804 41.0 L792 42.1 L780 43.4 L768 44.7 L756 45.9 L744 47.0 L732 47.8 L720 48.3 L708 48.4 L696 48.1 L684 47.4 L672 46.2 L660 44.7 L648 42.8 L636 40.7 L624 38.3 L612 35.9 L600 33.5 L588 31.1 L576 28.9 L564 26.9 L552 25.2 L540 23.9 L528 22.9 L516 22.2 L504 21.9 L492 21.8 L480 22.0 L468 22.4 L456 22.9 L444 23.4 L432 23.9 L420 24.2 L408 24.4 L396 24.4 L384 24.0 L372 23.4 L360 22.6 L348 21.4 L336 20.0 L324 18.5 L312 16.8 L300 15.0 L288 13.3 L276 11.6 L264 10.1 L252 8.7 L240 7.6 L228 6.7 L216 6.1 L204 5.7 L192 5.5 L180 5.4 L168 5.5 L156 5.5 L144 5.5 L132 5.3 L120 4.9 L108 4.2 L96 3.1 L84 1.5 L72 -0.5 L60 -3.0 L48 -6.0 L36 -9.5 L24 -13.3 L12 -17.5 L0 -21.9 L-12 -26.4 L-24 -31.1 L-36 -35.6 L-48 -40.1 L-60 -44.3 L-72 -48.2 L-84 -51.7 L-96 -54.9 L-108 -57.7 L-120 -60.2 Z"/>
    <path d="M-120 -5.9 L-108 -2.8 L-96 0.8 L-84 4.8 L-72 8.9 L-60 13.1 L-48 17.3 L-36 21.1 L-24 24.6 L-12 27.6 L0 29.9 L12 31.6 L24 32.7 L36 33.2 L48 33.2 L60 32.8 L72 32.1 L84 31.5 L96 30.9 L108 30.7 L120 30.9 L132 31.7 L144 33.0 L156 35.1 L168 37.8 L180 41.1 L192 44.9 L204 49.1 L216 53.5 L228 57.9 L240 62.2 L252 66.3 L264 70.0 L276 73.2 L288 75.9 L300 78.1 L312 79.9 L324 81.2 L336 82.3 L348 83.3 L360 84.3 L372 85.5 L384 87.1 L396 89.1 L408 91.7 L420 95.0 L432 98.8 L444 103.3 L456 108.3 L468 113.7 L480 119.4 L492 125.2 L504 130.9 L516 136.4 L528 141.4 L540 146.0 L552 149.9 L564 153.1 L576 155.7 L588 157.7 L600 159.1 L612 160.1 L624 160.8 L636 161.5 L648 162.2 L660 163.0 L672 164.3 L684 165.9 L696 168.1 L708 170.8 L720 173.9 L732 177.5 L744 181.4 L756 185.5 L768 189.6 L780 193.5 L792 197.2 L804 200.4 L816 203.1 L828 205.2 L840 206.6 L852 207.5 L864 207.8 L876 207.6 L888 207.1 L900 206.5 L912 205.9 L924 205.5 L936 205.4 L948 205.9 L960 206.9 L960 211.6 L948 211.2 L936 211.2 L924 211.6 L912 212.3 L900 213.2 L888 214.1 L876 214.9 L864 215.4 L852 215.5 L840 215.2 L828 214.3 L816 212.8 L804 210.8 L792 208.4 L780 205.6 L768 202.6 L756 199.5 L744 196.5 L732 193.7 L720 191.3 L708 189.3 L696 187.7 L684 186.7 L672 186.2 L660 186.0 L648 186.1 L636 186.4 L624 186.5 L612 186.5 L600 186.1 L588 185.1 L576 183.4 L564 181.0 L552 177.8 L540 173.7 L528 168.9 L516 163.4 L504 157.4 L492 151.1 L480 144.6 L468 138.1 L456 131.7 L444 125.8 L432 120.4 L420 115.5 L408 111.3 L396 107.8 L384 104.9 L372 102.6 L360 100.6 L348 99.0 L336 97.5 L324 96.0 L312 94.3 L300 92.4 L288 90.1 L276 87.4 L264 84.3 L252 80.9 L240 77.1 L228 73.2 L216 69.2 L204 65.3 L192 61.7 L180 58.4 L168 55.6 L156 53.4 L144 51.8 L132 50.8 L120 50.4 L108 50.4 L96 50.7 L84 51.3 L72 51.9 L60 52.3 L48 52.3 L36 51.9 L24 50.8 L12 49.1 L0 46.6 L-12 43.4 L-24 39.5 L-36 35.1 L-48 30.1 L-60 24.9 L-72 19.6 L-84 14.3 L-96 9.1 L-108 4.3 L-120 -0.3 Z"/>
    <path d="M-120 48.4 L-108 51.1 L-96 54.3 L-84 58.0 L-72 62.1 L-60 66.4 L-48 70.9 L-36 75.4 L-24 79.9 L-12 84.1 L0 88.0 L12 91.5 L24 94.5 L36 97.1 L48 99.1 L60 100.6 L72 101.6 L84 102.3 L96 102.7 L108 102.9 L120 103.1 L132 103.3 L144 103.8 L156 104.5 L168 105.6 L180 107.2 L192 109.2 L204 111.6 L216 114.5 L228 117.7 L240 121.2 L252 124.8 L264 128.5 L276 132.2 L288 135.6 L300 138.8 L312 141.5 L324 143.7 L336 145.5 L348 146.7 L360 147.3 L372 147.5 L384 147.2 L396 146.6 L408 145.7 L420 144.8 L432 143.8 L444 143.0 L456 142.5 L468 142.3 L480 142.5 L492 143.2 L504 144.4 L516 146.0 L528 148.0 L540 150.4 L552 153.1 L564 155.9 L576 158.7 L588 161.5 L600 164.0 L612 166.2 L624 168.1 L636 169.5 L648 170.4 L660 170.8 L672 170.8 L684 170.3 L696 169.6 L708 168.6 L720 167.5 L732 166.4 L744 165.5 L756 164.9 L768 164.6 L780 164.7 L792 165.4 L804 166.6 L816 168.4 L828 170.6 L840 173.3 L852 176.4 L864 179.7 L876 183.2 L888 186.7 L900 190.1 L912 193.3 L924 196.2 L936 198.7 L948 200.8 L960 202.4 L960 205.6 L948 204.5 L936 202.8 L924 200.6 L912 198.1 L900 195.2 L888 192.2 L876 189.1 L864 186.1 L852 183.4 L840 180.9 L828 178.8 L816 177.3 L804 176.3 L792 175.9 L780 176.1 L768 176.8 L756 178.0 L744 179.6 L732 181.4 L720 183.4 L708 185.3 L696 187.1 L684 188.7 L672 189.8 L660 190.5 L648 190.6 L636 190.1 L624 189.0 L612 187.4 L600 185.3 L588 182.7 L576 179.9 L564 176.8 L552 173.7 L540 170.6 L528 167.7 L516 165.1 L504 162.9 L492 161.0 L480 159.7 L468 158.7 L456 158.2 L444 158.1 L432 158.2 L420 158.5 L408 158.9 L396 159.3 L384 159.5 L372 159.4 L360 159.0 L348 158.2 L336 157.0 L324 155.3 L312 153.2 L300 150.7 L288 147.8 L276 144.7 L264 141.5 L252 138.2 L240 135.1 L228 132.1 L216 129.3 L204 127.0 L192 125.0 L180 123.4 L168 122.2 L156 121.4 L144 120.8 L132 120.5 L120 120.3 L108 120.0 L96 119.6 L84 119.0 L72 118.0 L60 116.5 L48 114.5 L36 111.9 L24 108.7 L12 104.9 L0 100.6 L-12 95.9 L-24 90.8 L-36 85.4 L-48 80.0 L-60 74.7 L-72 69.4 L-84 64.5 L-96 60.0 L-108 55.9 L-120 52.1 Z"/>
    <path d="M-120 116.2 L-108 116.8 L-96 117.7 L-84 118.8 L-72 120.2 L-60 121.9 L-48 123.7 L-36 125.7 L-24 127.8 L-12 129.9 L0 132.0 L12 134.1 L24 136.0 L36 137.8 L48 139.5 L60 140.9 L72 142.2 L84 143.2 L96 144.1 L108 144.7 L120 145.3 L132 145.7 L144 146.1 L156 146.5 L168 147.0 L180 147.5 L192 148.3 L204 149.3 L216 150.5 L228 152.0 L240 153.8 L252 155.9 L264 158.3 L276 161.0 L288 164.0 L300 167.1 L312 170.5 L324 174.0 L336 177.5 L348 181.0 L360 184.5 L372 187.9 L384 191.1 L396 194.1 L408 196.8 L420 199.3 L432 201.5 L444 203.5 L456 205.2 L468 206.6 L480 207.8 L492 208.9 L504 209.9 L516 210.8 L528 211.7 L540 212.6 L552 213.7 L564 214.8 L576 216.2 L588 217.7 L600 219.4 L612 221.4 L624 223.5 L636 225.8 L648 228.3 L660 230.8 L672 233.5 L684 236.1 L696 238.7 L708 241.2 L720 243.6 L732 245.7 L744 247.6 L756 249.3 L768 250.6 L780 251.6 L792 252.3 L804 252.7 L816 252.9 L828 252.8 L840 252.5 L852 252.1 L864 251.6 L876 251.0 L888 250.5 L900 250.1 L912 249.9 L924 249.8 L936 250.0 L948 250.4 L960 251.1 L960 253.9 L948 253.8 L936 253.9 L924 254.2 L912 254.7 L900 255.5 L888 256.5 L876 257.6 L864 258.8 L852 260.0 L840 261.2 L828 262.3 L816 263.2 L804 263.9 L792 264.4 L780 264.6 L768 264.4 L756 264.0 L744 263.2 L732 262.0 L720 260.6 L708 258.9 L696 257.0 L684 254.9 L672 252.6 L660 250.3 L648 247.9 L636 245.5 L624 243.1 L612 240.9 L600 238.7 L588 236.7 L576 234.8 L564 233.0 L552 231.3 L540 229.7 L528 228.1 L516 226.6 L504 225.0 L492 223.4 L480 221.8 L468 219.9 L456 218.0 L444 215.9 L432 213.5 L420 211.0 L408 208.3 L396 205.4 L384 202.4 L372 199.3 L360 196.1 L348 192.8 L336 189.6 L324 186.4 L312 183.4 L300 180.5 L288 177.9 L276 175.5 L264 173.3 L252 171.4 L240 169.8 L228 168.5 L216 167.5 L204 166.6 L192 166.0 L180 165.4 L168 165.0 L156 164.6 L144 164.1 L132 163.5 L120 162.9 L108 162.0 L96 160.8 L84 159.5 L72 157.8 L60 155.9 L48 153.7 L36 151.3 L24 148.7 L12 145.8 L0 142.9 L-12 139.9 L-24 136.9 L-36 134.0 L-48 131.2 L-60 128.6 L-72 126.2 L-84 124.1 L-96 122.2 L-108 120.7 L-120 119.3 Z"/>
    <path d="M-120 187.0 L-108 186.0 L-96 184.9 L-84 183.7 L-72 182.5 L-60 181.5 L-48 180.7 L-36 180.2 L-24 180.1 L-12 180.4 L0 181.1 L12 182.3 L24 183.8 L36 185.6 L48 187.7 L60 190.0 L72 192.4 L84 194.8 L96 197.2 L108 199.4 L120 201.4 L132 203.2 L144 204.7 L156 205.9 L168 206.8 L180 207.6 L192 208.2 L204 208.7 L216 209.2 L228 209.8 L240 210.5 L252 211.5 L264 212.8 L276 214.5 L288 216.6 L300 219.1 L312 222.1 L324 225.4 L336 229.2 L348 233.1 L360 237.3 L372 241.6 L384 245.9 L396 250.1 L408 254.1 L420 257.8 L432 261.2 L444 264.3 L456 266.9 L468 269.1 L480 270.9 L492 272.3 L504 273.5 L516 274.4 L528 275.1 L540 275.9 L552 276.6 L564 277.4 L576 278.5 L588 279.7 L600 281.2 L612 283.0 L624 285.0 L636 287.3 L648 289.8 L660 292.4 L672 295.1 L684 297.7 L696 300.1 L708 302.4 L720 304.4 L732 306.0 L744 307.2 L756 308.0 L768 308.4 L780 308.3 L792 307.9 L804 307.2 L816 306.2 L828 305.0 L840 303.8 L852 302.7 L864 301.7 L876 300.9 L888 300.4 L900 300.3 L912 300.6 L924 301.3 L936 302.4 L948 303.9 L960 305.7 L960 311.5 L948 311.2 L936 310.9 L924 311.0 L912 311.5 L900 312.4 L888 313.6 L876 315.2 L864 317.0 L852 319.0 L840 321.0 L828 323.0 L816 324.9 L804 326.4 L792 327.7 L780 328.4 L768 328.7 L756 328.5 L744 327.7 L732 326.4 L720 324.5 L708 322.2 L696 319.6 L684 316.6 L672 313.5 L660 310.3 L648 307.2 L636 304.2 L624 301.4 L612 298.8 L600 296.6 L588 294.8 L576 293.3 L564 292.1 L552 291.2 L540 290.5 L528 290.0 L516 289.5 L504 289.0 L492 288.4 L480 287.6 L468 286.5 L456 285.1 L444 283.4 L432 281.3 L420 278.9 L408 276.2 L396 273.1 L384 269.9 L372 266.5 L360 263.1 L348 259.7 L336 256.4 L324 253.2 L312 250.3 L300 247.6 L288 245.2 L276 243.1 L264 241.3 L252 239.7 L240 238.3 L228 236.9 L216 235.7 L204 234.4 L192 232.9 L180 231.3 L168 229.5 L156 227.4 L144 225.0 L132 222.3 L120 219.3 L108 216.1 L96 212.8 L84 209.3 L72 205.8 L60 202.5 L48 199.3 L36 196.3 L24 193.8 L12 191.6 L0 189.9 L-12 188.7 L-24 188.0 L-36 187.7 L-48 187.9 L-60 188.4 L-72 189.1 L-84 189.9 L-96 190.8 L-108 191.5 L-120 191.8 Z"/>
    <path d="M-120 211.7 L-108 213.9 L-96 216.3 L-84 218.8 L-72 221.5 L-60 224.3 L-48 227.1 L-36 230.0 L-24 232.9 L-12 235.8 L0 238.7 L12 241.5 L24 244.3 L36 247.0 L48 249.5 L60 252.0 L72 254.4 L84 256.7 L96 258.8 L108 260.9 L120 263.0 L132 264.9 L144 266.9 L156 268.8 L168 270.8 L180 272.8 L192 274.9 L204 277.1 L216 279.4 L228 281.9 L240 284.5 L252 287.3 L264 290.3 L276 293.4 L288 296.7 L300 300.2 L312 303.9 L324 307.7 L336 311.6 L348 315.7 L360 319.8 L372 324.0 L384 328.1 L396 332.3 L408 336.5 L420 340.5 L432 344.5 L444 348.3 L456 352.0 L468 355.5 L480 358.8 L492 361.9 L504 364.8 L516 367.5 L528 370.1 L540 372.4 L552 374.5 L564 376.5 L576 378.3 L588 380.1 L600 381.7 L612 383.3 L624 384.8 L636 386.3 L648 387.9 L660 389.4 L672 391.1 L684 392.8 L696 394.6 L708 396.5 L720 398.5 L732 400.6 L744 402.9 L756 405.2 L768 407.6 L780 410.0 L792 412.5 L804 415.0 L816 417.5 L828 420.0 L840 422.4 L852 424.8 L864 427.0 L876 429.2 L888 431.1 L900 433.0 L912 434.6 L924 436.1 L936 437.4 L948 438.6 L960 439.6 L960 443.1 L948 442.7 L936 442.0 L924 441.2 L912 440.1 L900 438.9 L888 437.6 L876 436.2 L864 434.8 L852 433.2 L840 431.6 L828 430.0 L816 428.4 L804 426.9 L792 425.4 L780 423.9 L768 422.5 L756 421.1 L744 419.9 L732 418.7 L720 417.6 L708 416.5 L696 415.5 L684 414.5 L672 413.5 L660 412.4 L648 411.3 L636 410.2 L624 408.9 L612 407.5 L600 405.9 L588 404.1 L576 402.1 L564 399.9 L552 397.5 L540 394.8 L528 391.8 L516 388.6 L504 385.1 L492 381.4 L480 377.5 L468 373.4 L456 369.1 L444 364.7 L432 360.2 L420 355.6 L408 351.0 L396 346.4 L384 341.9 L372 337.5 L360 333.2 L348 329.0 L336 325.1 L324 321.3 L312 317.8 L300 314.5 L288 311.5 L276 308.6 L264 306.1 L252 303.7 L240 301.5 L228 299.5 L216 297.6 L204 295.8 L192 294.1 L180 292.4 L168 290.8 L156 289.0 L144 287.2 L132 285.3 L120 283.3 L108 281.1 L96 278.7 L84 276.1 L72 273.3 L60 270.3 L48 267.2 L36 263.8 L24 260.3 L12 256.6 L0 252.8 L-12 248.9 L-24 245.0 L-36 241.1 L-48 237.2 L-60 233.3 L-72 229.6 L-84 225.9 L-96 222.4 L-108 219.1 L-120 215.8 Z"/>
    <path d="M-120 277.1 L-108 276.2 L-96 275.6 L-84 275.1 L-72 275.0 L-60 275.3 L-48 276.0 L-36 277.1 L-24 278.7 L-12 280.7 L0 283.1 L12 285.9 L24 289.0 L36 292.4 L48 295.9 L60 299.6 L72 303.4 L84 307.1 L96 310.8 L108 314.4 L120 317.8 L132 321.0 L144 323.9 L156 326.7 L168 329.2 L180 331.6 L192 333.8 L204 335.9 L216 338.0 L228 340.0 L240 342.1 L252 344.3 L264 346.7 L276 349.3 L288 352.1 L300 355.2 L312 358.6 L324 362.3 L336 366.2 L348 370.3 L360 374.7 L372 379.2 L384 383.7 L396 388.2 L408 392.7 L420 396.9 L432 401.0 L444 404.7 L456 408.1 L468 411.0 L480 413.5 L492 415.5 L504 417.1 L516 418.1 L528 418.7 L540 418.9 L552 418.8 L564 418.3 L576 417.7 L588 416.9 L600 416.1 L612 415.3 L624 414.6 L636 414.2 L648 414.0 L660 414.1 L672 414.5 L684 415.4 L696 416.6 L708 418.2 L720 420.1 L732 422.4 L744 425.0 L756 427.7 L768 430.7 L780 433.7 L792 436.8 L804 439.8 L816 442.8 L828 445.6 L840 448.3 L852 450.7 L864 453.0 L876 455.1 L888 457.1 L900 458.9 L912 460.6 L924 462.2 L936 463.8 L948 465.5 L960 467.3 L960 471.5 L948 470.7 L936 470.0 L924 469.3 L912 468.6 L900 467.9 L888 467.0 L876 466.1 L864 465.0 L852 463.6 L840 462.0 L828 460.3 L816 458.2 L804 456.0 L792 453.7 L780 451.2 L768 448.7 L756 446.2 L744 443.7 L732 441.4 L720 439.2 L708 437.2 L696 435.5 L684 434.0 L672 432.9 L660 432.1 L648 431.5 L636 431.2 L624 431.2 L612 431.3 L600 431.5 L588 431.8 L576 432.1 L564 432.2 L552 432.3 L540 432.1 L528 431.6 L516 430.9 L504 429.7 L492 428.3 L480 426.4 L468 424.1 L456 421.5 L444 418.6 L432 415.4 L420 411.9 L408 408.3 L396 404.6 L384 400.8 L372 397.1 L360 393.4 L348 389.8 L336 386.4 L324 383.1 L312 380.1 L300 377.3 L288 374.7 L276 372.2 L264 369.9 L252 367.7 L240 365.5 L228 363.3 L216 361.0 L204 358.6 L192 356.1 L180 353.3 L168 350.3 L156 347.0 L144 343.4 L132 339.5 L120 335.4 L108 331.0 L96 326.4 L84 321.7 L72 317.0 L60 312.3 L48 307.6 L36 303.1 L24 298.9 L12 295.0 L0 291.5 L-12 288.4 L-24 285.8 L-36 283.7 L-48 282.1 L-60 280.9 L-72 280.3 L-84 280.0 L-96 280.0 L-108 280.3 L-120 280.6 Z"/>
    <path d="M-120 336.8 L-108 337.9 L-96 338.8 L-84 339.4 L-72 340.0 L-60 340.5 L-48 341.0 L-36 341.8 L-24 342.7 L-12 344.0 L0 345.7 L12 347.8 L24 350.4 L36 353.5 L48 357.1 L60 361.1 L72 365.6 L84 370.4 L96 375.5 L108 380.7 L120 386.1 L132 391.4 L144 396.6 L156 401.6 L168 406.3 L180 410.7 L192 414.6 L204 418.1 L216 421.2 L228 423.8 L240 426.0 L252 427.9 L264 429.4 L276 430.8 L288 432.0 L300 433.2 L312 434.4 L324 435.7 L336 437.3 L348 439.1 L360 441.2 L372 443.7 L384 446.4 L396 449.5 L408 452.9 L420 456.5 L432 460.3 L444 464.2 L456 468.0 L468 471.8 L480 475.4 L492 478.7 L504 481.6 L516 484.2 L528 486.2 L540 487.8 L552 488.9 L564 489.5 L576 489.7 L588 489.5 L600 489.0 L612 488.2 L624 487.3 L636 486.4 L648 485.5 L660 484.8 L672 484.3 L684 484.2 L696 484.4 L708 485.1 L720 486.2 L732 487.7 L744 489.7 L756 492.1 L768 494.8 L780 497.8 L792 501.0 L804 504.2 L816 507.5 L828 510.7 L840 513.7 L852 516.5 L864 519.0 L876 521.2 L888 523.1 L900 524.7 L912 525.9 L924 526.9 L936 527.6 L948 528.3 L960 528.9 L960 534.2 L948 534.8 L936 535.2 L924 535.3 L912 535.1 L900 534.5 L888 533.6 L876 532.3 L864 530.6 L852 528.5 L840 526.0 L828 523.2 L816 520.2 L804 517.0 L792 513.7 L780 510.4 L768 507.3 L756 504.4 L744 501.8 L732 499.6 L720 497.7 L708 496.3 L696 495.4 L684 494.9 L672 494.8 L660 495.1 L648 495.7 L636 496.5 L624 497.5 L612 498.5 L600 499.5 L588 500.3 L576 500.8 L564 501.1 L552 501.0 L540 500.5 L528 499.6 L516 498.2 L504 496.5 L492 494.3 L480 491.8 L468 489.1 L456 486.1 L444 483.0 L432 479.9 L420 476.7 L408 473.7 L396 470.8 L384 468.2 L372 465.7 L360 463.4 L348 461.4 L336 459.6 L324 457.9 L312 456.3 L300 454.7 L288 453.1 L276 451.3 L264 449.3 L252 447.0 L240 444.4 L228 441.4 L216 437.9 L204 433.9 L192 429.5 L180 424.7 L168 419.5 L156 414.0 L144 408.2 L132 402.2 L120 396.2 L108 390.3 L96 384.5 L84 378.9 L72 373.7 L60 368.9 L48 364.6 L36 360.8 L24 357.5 L12 354.8 L0 352.6 L-12 350.9 L-24 349.5 L-36 348.5 L-48 347.7 L-60 347.0 L-72 346.3 L-84 345.6 L-96 344.6 L-108 343.3 L-120 341.5 Z"/>
    <path d="M-120 426.4 L-108 428.1 L-96 430.0 L-84 432.0 L-72 434.2 L-60 436.5 L-48 438.9 L-36 441.3 L-24 443.8 L-12 446.2 L0 448.6 L12 450.9 L24 453.0 L36 454.9 L48 456.5 L60 457.9 L72 459.0 L84 459.8 L96 460.3 L108 460.5 L120 460.5 L132 460.2 L144 459.6 L156 458.9 L168 458.0 L180 457.1 L192 456.1 L204 455.1 L216 454.2 L228 453.4 L240 452.8 L252 452.3 L264 452.1 L276 452.1 L288 452.3 L300 452.8 L312 453.5 L324 454.4 L336 455.6 L348 456.8 L360 458.2 L372 459.7 L384 461.1 L396 462.6 L408 464.1 L420 465.4 L432 466.6 L444 467.7 L456 468.6 L468 469.4 L480 470.0 L492 470.5 L504 470.8 L516 471.0 L528 471.1 L540 471.3 L552 471.4 L564 471.6 L576 471.9 L588 472.3 L600 473.0 L612 473.9 L624 475.0 L636 476.5 L648 478.3 L660 480.3 L672 482.7 L684 485.4 L696 488.3 L708 491.5 L720 494.9 L732 498.4 L744 502.1 L756 505.8 L768 509.5 L780 513.2 L792 516.8 L804 520.3 L816 523.6 L828 526.7 L840 529.6 L852 532.3 L864 534.7 L876 537.0 L888 539.0 L900 540.9 L912 542.6 L924 544.3 L936 545.8 L948 547.3 L960 548.9 L960 552.4 L948 551.6 L936 550.7 L924 549.8 L912 548.9 L900 547.9 L888 546.8 L876 545.7 L864 544.3 L852 542.8 L840 541.1 L828 539.3 L816 537.2 L804 535.0 L792 532.6 L780 530.0 L768 527.3 L756 524.5 L744 521.7 L732 518.9 L720 516.1 L708 513.3 L696 510.6 L684 508.1 L672 505.7 L660 503.5 L648 501.4 L636 499.6 L624 497.9 L612 496.5 L600 495.1 L588 494.0 L576 492.9 L564 492.0 L552 491.1 L540 490.2 L528 489.4 L516 488.5 L504 487.6 L492 486.6 L480 485.5 L468 484.4 L456 483.2 L444 481.9 L432 480.6 L420 479.2 L408 477.8 L396 476.5 L384 475.2 L372 474.0 L360 472.9 L348 472.0 L336 471.3 L324 470.8 L312 470.6 L300 470.5 L288 470.8 L276 471.2 L264 471.9 L252 472.8 L240 473.8 L228 475.0 L216 476.2 L204 477.4 L192 478.6 L180 479.7 L168 480.6 L156 481.4 L144 481.8 L132 482.0 L120 481.8 L108 481.3 L96 480.4 L84 479.1 L72 477.4 L60 475.4 L48 473.0 L36 470.3 L24 467.3 L12 464.2 L0 460.9 L-12 457.5 L-24 454.0 L-36 450.6 L-48 447.2 L-60 444.0 L-72 440.9 L-84 437.9 L-96 435.1 L-108 432.5 L-120 430.0 Z"/>
    <path d="M-120 459.2 L-108 460.5 L-96 461.9 L-84 463.4 L-72 465.0 L-60 466.9 L-48 469.0 L-36 471.3 L-24 473.9 L-12 476.8 L0 479.8 L12 483.1 L24 486.4 L36 489.8 L48 493.2 L60 496.6 L72 499.8 L84 502.8 L96 505.6 L108 508.0 L120 510.2 L132 512.0 L144 513.6 L156 514.8 L168 515.7 L180 516.5 L192 517.0 L204 517.5 L216 517.9 L228 518.3 L240 518.8 L252 519.5 L264 520.3 L276 521.4 L288 522.7 L300 524.3 L312 526.0 L324 528.1 L336 530.3 L348 532.6 L360 535.0 L372 537.4 L384 539.8 L396 542.1 L408 544.2 L420 546.2 L432 547.8 L444 549.2 L456 550.4 L468 551.2 L480 551.8 L492 552.2 L504 552.4 L516 552.5 L528 552.5 L540 552.5 L552 552.7 L564 552.9 L576 553.4 L588 554.1 L600 555.1 L612 556.4 L624 558.0 L636 559.9 L648 562.1 L660 564.6 L672 567.3 L684 570.1 L696 572.9 L708 575.9 L720 578.7 L732 581.5 L744 584.1 L756 586.5 L768 588.7 L780 590.7 L792 592.4 L804 593.9 L816 595.2 L828 596.4 L840 597.4 L852 598.4 L864 599.5 L876 600.6 L888 601.9 L900 603.3 L912 605.1 L924 607.1 L936 609.3 L948 611.9 L960 614.8 L960 618.5 L948 616.6 L936 614.9 L924 613.4 L912 612.3 L900 611.4 L888 610.8 L876 610.4 L864 610.2 L852 610.0 L840 609.8 L828 609.5 L816 609.1 L804 608.4 L792 607.5 L780 606.3 L768 604.8 L756 602.9 L744 600.8 L732 598.3 L720 595.6 L708 592.7 L696 589.7 L684 586.6 L672 583.5 L660 580.5 L648 577.7 L636 575.0 L624 572.6 L612 570.5 L600 568.7 L588 567.3 L576 566.1 L564 565.2 L552 564.6 L540 564.2 L528 564.0 L516 563.8 L504 563.7 L492 563.5 L480 563.3 L468 562.9 L456 562.4 L444 561.7 L432 560.7 L420 559.6 L408 558.3 L396 556.8 L384 555.2 L372 553.5 L360 551.8 L348 550.1 L336 548.4 L324 546.8 L312 545.4 L300 544.1 L288 542.9 L276 541.9 L264 541.1 L252 540.4 L240 539.7 L228 539.1 L216 538.5 L204 537.7 L192 536.9 L180 535.8 L168 534.4 L156 532.8 L144 530.8 L132 528.5 L120 525.8 L108 522.8 L96 519.4 L84 515.7 L72 511.8 L60 507.7 L48 503.6 L36 499.4 L24 495.2 L12 491.1 L0 487.3 L-12 483.6 L-24 480.2 L-36 477.2 L-48 474.4 L-60 471.9 L-72 469.7 L-84 467.7 L-96 465.9 L-108 464.2 L-120 462.3 Z"/>
    <path d="M-120 494.3 L-108 498.3 L-96 502.3 L-84 506.2 L-72 510.1 L-60 513.8 L-48 517.3 L-36 520.6 L-24 523.8 L-12 526.7 L0 529.4 L12 532.0 L24 534.4 L36 536.8 L48 539.2 L60 541.6 L72 544.1 L84 546.8 L96 549.8 L108 553.0 L120 556.4 L132 560.2 L144 564.2 L156 568.6 L168 573.1 L180 577.9 L192 582.9 L204 587.9 L216 592.9 L228 597.9 L240 602.8 L252 607.6 L264 612.0 L276 616.3 L288 620.2 L300 623.8 L312 627.0 L324 629.9 L336 632.6 L348 635.0 L360 637.1 L372 639.2 L384 641.1 L396 643.0 L408 645.0 L420 647.0 L432 649.1 L444 651.4 L456 654.0 L468 656.7 L480 659.6 L492 662.7 L504 665.9 L516 669.3 L528 672.6 L540 676.0 L552 679.4 L564 682.5 L576 685.5 L588 688.3 L600 690.8 L612 692.9 L624 694.8 L636 696.2 L648 697.4 L660 698.3 L672 698.9 L684 699.3 L696 699.5 L708 699.7 L720 699.8 L732 700.0 L744 700.4 L756 700.9 L768 701.6 L780 702.5 L792 703.8 L804 705.3 L816 707.2 L828 709.2 L840 711.5 L852 714.0 L864 716.6 L876 719.3 L888 722.0 L900 724.7 L912 727.2 L924 729.6 L936 731.8 L948 733.8 L960 735.6 L960 742.5 L948 741.7 L936 740.4 L924 738.6 L912 736.5 L900 734.2 L888 731.7 L876 729.1 L864 726.5 L852 724.0 L840 721.6 L828 719.4 L816 717.5 L804 715.8 L792 714.6 L780 713.7 L768 713.1 L756 713.0 L744 713.1 L732 713.5 L720 714.2 L708 715.0 L696 715.8 L684 716.7 L672 717.5 L660 718.1 L648 718.5 L636 718.6 L624 718.4 L612 717.8 L600 716.9 L588 715.5 L576 713.8 L564 711.8 L552 709.4 L540 706.8 L528 704.0 L516 701.0 L504 697.9 L492 694.8 L480 691.6 L468 688.4 L456 685.3 L444 682.3 L432 679.2 L420 676.3 L408 673.3 L396 670.4 L384 667.4 L372 664.3 L360 661.1 L348 657.8 L336 654.3 L324 650.5 L312 646.5 L300 642.3 L288 637.8 L276 633.1 L264 628.2 L252 623.1 L240 618.0 L228 612.8 L216 607.5 L204 602.4 L192 597.4 L180 592.6 L168 588.0 L156 583.7 L144 579.7 L132 576.0 L120 572.7 L108 569.6 L96 566.8 L84 564.2 L72 561.8 L60 559.5 L48 557.2 L36 554.8 L24 552.4 L12 549.7 L0 546.9 L-12 543.7 L-24 540.3 L-36 536.5 L-48 532.4 L-60 528.0 L-72 523.2 L-84 518.3 L-96 513.1 L-108 507.8 L-120 502.0 Z"/>
    <path d="M-120 578.7 L-108 582.6 L-96 586.4 L-84 590.3 L-72 594.0 L-60 597.5 L-48 600.8 L-36 603.8 L-24 606.5 L-12 608.9 L0 610.9 L12 612.5 L24 613.8 L36 614.7 L48 615.3 L60 615.7 L72 615.9 L84 615.9 L96 615.9 L108 615.8 L120 615.8 L132 615.8 L144 616.0 L156 616.4 L168 616.9 L180 617.8 L192 618.8 L204 620.1 L216 621.6 L228 623.3 L240 625.2 L252 627.2 L264 629.3 L276 631.5 L288 633.6 L300 635.7 L312 637.6 L324 639.4 L336 641.0 L348 642.4 L360 643.6 L372 644.6 L384 645.4 L396 646.0 L408 646.5 L420 646.9 L432 647.2 L444 647.6 L456 648.0 L468 648.5 L480 649.2 L492 650.2 L504 651.4 L516 653.0 L528 654.8 L540 657.0 L552 659.6 L564 662.5 L576 665.8 L588 669.3 L600 673.0 L612 676.9 L624 681.0 L636 685.1 L648 689.2 L660 693.2 L672 697.1 L684 700.9 L696 704.4 L708 707.6 L720 710.5 L732 713.2 L744 715.5 L756 717.6 L768 719.3 L780 720.9 L792 722.2 L804 723.4 L816 724.5 L828 725.5 L840 726.6 L852 727.7 L864 728.8 L876 730.2 L888 731.7 L900 733.4 L912 735.2 L924 737.3 L936 739.5 L948 741.9 L960 744.3 L960 748.1 L948 746.2 L936 744.2 L924 742.2 L912 740.3 L900 738.6 L888 737.1 L876 735.8 L864 734.6 L852 733.7 L840 732.8 L828 732.1 L816 731.4 L804 730.7 L792 730.0 L780 729.2 L768 728.3 L756 727.2 L744 725.8 L732 724.3 L720 722.4 L708 720.3 L696 717.9 L684 715.3 L672 712.5 L660 709.4 L648 706.2 L636 702.9 L624 699.5 L612 696.1 L600 692.7 L588 689.5 L576 686.4 L564 683.4 L552 680.7 L540 678.2 L528 675.9 L516 673.9 L504 672.1 L492 670.5 L480 669.1 L468 667.9 L456 666.8 L444 665.7 L432 664.7 L420 663.6 L408 662.5 L396 661.2 L384 659.9 L372 658.4 L360 656.8 L348 654.9 L336 653.0 L324 650.9 L312 648.7 L300 646.5 L288 644.2 L276 641.9 L264 639.7 L252 637.7 L240 635.7 L228 634.0 L216 632.5 L204 631.3 L192 630.3 L180 629.6 L168 629.2 L156 628.9 L144 628.9 L132 629.1 L120 629.3 L108 629.6 L96 629.8 L84 630.0 L72 630.0 L60 629.7 L48 629.2 L36 628.4 L24 627.1 L12 625.5 L0 623.4 L-12 620.8 L-24 617.9 L-36 614.5 L-48 610.8 L-60 606.7 L-72 602.4 L-84 597.8 L-96 593.1 L-108 588.3 L-120 583.2 Z"/>
    <path d="M266 227.4 L276 229.2 L286 230.9 L296 232.5 L306 234.0 L316 235.4 L326 236.8 L336 238.0 L346 239.2 L356 240.2 L366 241.2 L376 242.0 L386 242.8 L396 243.5 L406 244.1 L416 244.6 L426 245.1 L436 245.4 L446 245.7 L456 246.0 L466 246.2 L476 246.4 L486 246.5 L496 246.7 L506 246.8 L516 246.9 L526 247.1 L536 247.2 L546 247.4 L556 247.7 L566 248.0 L576 248.3 L576 249.2 L566 250.9 L556 252.4 L546 253.9 L536 255.3 L526 256.6 L516 257.9 L506 259.0 L496 260.1 L486 261.0 L476 261.7 L466 262.3 L456 262.6 L446 262.8 L436 262.8 L426 262.6 L416 262.1 L406 261.4 L396 260.5 L386 259.3 L376 257.9 L366 256.2 L356 254.3 L346 252.2 L336 249.8 L326 247.2 L316 244.5 L306 241.5 L296 238.3 L286 235.0 L276 231.4 L266 227.4 Z"/>
    <path d="M381 532.3 L391 534.6 L401 536.9 L411 539.4 L421 541.9 L431 544.5 L441 547.2 L451 549.9 L461 552.7 L471 555.4 L481 558.2 L491 560.9 L501 563.6 L511 566.3 L521 568.9 L531 571.5 L541 574.0 L551 576.4 L561 578.7 L571 580.9 L581 583.0 L591 585.0 L601 586.8 L611 588.6 L621 590.2 L631 591.7 L641 593.1 L651 594.4 L661 595.6 L671 596.7 L681 597.7 L681 598.3 L671 599.6 L661 600.5 L651 601.2 L641 601.6 L631 601.9 L621 601.9 L611 601.6 L601 601.1 L591 600.3 L581 599.3 L571 597.9 L561 596.3 L551 594.4 L541 592.3 L531 589.9 L521 587.2 L511 584.3 L501 581.1 L491 577.8 L481 574.2 L471 570.5 L461 566.6 L451 562.6 L441 558.5 L431 554.3 L421 550.1 L411 545.7 L401 541.4 L391 537.0 L381 532.3 Z"/>
    <path d="M-4 36.9 L6 39.4 L16 41.8 L26 44.2 L36 46.5 L46 48.7 L56 50.7 L66 52.6 L76 54.3 L86 55.9 L96 57.2 L106 58.3 L116 59.3 L126 60.0 L136 60.6 L146 61.0 L156 61.2 L166 61.3 L176 61.4 L186 61.3 L196 61.2 L196 63.5 L186 65.6 L176 67.5 L166 69.2 L156 70.5 L146 71.6 L136 72.2 L126 72.4 L116 72.2 L106 71.6 L96 70.5 L86 68.9 L76 66.8 L66 64.3 L56 61.4 L46 58.1 L36 54.4 L26 50.5 L16 46.2 L6 41.8 L-4 36.9 Z"/>
    <path d="M156 54.6 L166 55.0 L176 55.6 L186 56.3 L196 57.2 L206 58.4 L216 59.7 L226 61.2 L236 63.0 L246 64.9 L256 67.0 L266 69.3 L276 71.7 L286 74.3 L296 77.0 L306 79.7 L316 82.5 L326 85.3 L336 88.1 L336 89.7 L326 90.4 L316 90.7 L306 90.7 L296 90.4 L286 89.7 L276 88.8 L266 87.5 L256 85.8 L246 83.9 L236 81.6 L226 79.0 L216 76.2 L206 73.1 L196 69.8 L186 66.3 L176 62.7 L166 58.8 L156 54.6 Z"/>
    <path d="M26 225.0 L36 226.8 L46 228.4 L56 230.0 L66 231.4 L76 232.8 L86 234.0 L96 235.1 L106 236.2 L116 237.1 L126 237.9 L136 238.6 L146 239.2 L156 239.7 L166 240.1 L176 240.5 L186 240.7 L196 241.0 L206 241.2 L216 241.3 L226 241.5 L236 241.6 L246 241.8 L256 241.9 L266 242.1 L276 242.3 L286 242.6 L296 243.0 L306 243.4 L316 243.9 L316 246.2 L306 248.0 L296 249.7 L286 251.3 L276 252.9 L266 254.3 L256 255.7 L246 256.9 L236 258.0 L226 258.9 L216 259.7 L206 260.2 L196 260.5 L186 260.6 L176 260.4 L166 260.0 L156 259.3 L146 258.3 L136 257.0 L126 255.4 L116 253.6 L106 251.5 L96 249.1 L86 246.4 L76 243.5 L66 240.3 L56 236.9 L46 233.3 L36 229.4 L26 225.0 Z"/>
  </g>
</svg>
```

## Appendix B — Sven as SVG (lavender colourway; swap the two fills for the other colourways)
```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 15" shape-rendering="crispEdges" role="img" aria-label="Sven">
  <rect x="0" y="0" width="2.02" height="1.02" fill="#A5A4FA"/>
  <rect x="11" y="0" width="2.02" height="1.02" fill="#A5A4FA"/>
  <rect x="0" y="1" width="2.02" height="1.02" fill="#A5A4FA"/>
  <rect x="11" y="1" width="2.02" height="1.02" fill="#A5A4FA"/>
  <rect x="0" y="2" width="4.02" height="1.02" fill="#A5A4FA"/>
  <rect x="9" y="2" width="4.02" height="1.02" fill="#A5A4FA"/>
  <rect x="0" y="3" width="4.02" height="1.02" fill="#A5A4FA"/>
  <rect x="9" y="3" width="4.02" height="1.02" fill="#A5A4FA"/>
  <rect x="0" y="4" width="5.02" height="1.02" fill="#A5A4FA"/>
  <rect x="8" y="4" width="5.02" height="1.02" fill="#A5A4FA"/>
  <rect x="0" y="5" width="6.02" height="1.02" fill="#A5A4FA"/>
  <rect x="7" y="5" width="6.02" height="1.02" fill="#A5A4FA"/>
  <rect x="0" y="6" width="13.02" height="1.02" fill="#A5A4FA"/>
  <rect x="0" y="7" width="13.02" height="1.02" fill="#A5A4FA"/>
  <rect x="0" y="8" width="13.02" height="1.02" fill="#A5A4FA"/>
  <rect x="0" y="9" width="13.02" height="1.02" fill="#A5A4FA"/>
  <rect x="0" y="10" width="13.02" height="1.02" fill="#A5A4FA"/>
  <rect x="2" y="11" width="9.02" height="1.02" fill="#A5A4FA"/>
  <rect x="2" y="12" width="9.02" height="1.02" fill="#A5A4FA"/>
  <rect x="0" y="13" width="4.02" height="1.02" fill="#A5A4FA"/>
  <rect x="5" y="13" width="3.02" height="1.02" fill="#A5A4FA"/>
  <rect x="9" y="13" width="4.02" height="1.02" fill="#A5A4FA"/>
  <rect x="0" y="14" width="4.02" height="1.02" fill="#A5A4FA"/>
  <rect x="5" y="14" width="3.02" height="1.02" fill="#A5A4FA"/>
  <rect x="9" y="14" width="4.02" height="1.02" fill="#A5A4FA"/>
  <rect x="4" y="8" width="1.8" height="2" fill="#FFFFFF"/>
  <rect x="7.2" y="8" width="1.8" height="2" fill="#FFFFFF"/>
</svg>
```
CSS for the animated version (get-started page): `.sven-svg { overflow: visible } .sv-px { fill: #A5A4FA } .sv-eye { fill: #fff } .is-think .sv-bod { animation: sv-bob 1.8s ease-in-out infinite } .is-think .sv-eyes { animation: sv-look 1.8s steps(1) infinite } .is-think .sv-eye { animation: sv-blink 1.8s steps(1) infinite } .is-think .sv-dot { animation: sv-dot 1.8s ease-out infinite } .is-spin { animation: sv-spin .8s cubic-bezier(.2,.7,.2,1) 1 }` with `@keyframes sv-bob { 50% { transform: translateY(-3px) } }`, `sv-look { 30% { transform: translateX(.6px) } 60% { transform: translateX(-.6px) } }`, `sv-blink { 70%, 74% { transform: scaleY(.1) } }` (transform-origin 50% 90%), `sv-dot { 0% { opacity: 0; transform: translateY(2px) } 30% { opacity: 1 } 100% { opacity: 0; transform: translateY(-4px) } }`, `sv-spin { to { rotate: 360deg } }`.

## Appendix C — reference CSS, verbatim from the site (desktop; the phone block in Appendix D)
```css
.ncl { width: 100%; min-height: 0; background: #FAF9F5; font-family: 'Inter', 'Styrene B', 'Helvetica Neue', sans-serif; color: #1F1E1D; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility }
.ncl-nav { height: 56px; position: relative; z-index: 60 }
.ncl-navin { max-width: 1180px; height: 100%; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between }
.ncl-logo { height: 20px; width: auto; display: block }
.ncl-navr { display: flex; align-items: center; gap: 20px }
.ncl-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 400; color: rgba(31,30,29,.78); white-space: nowrap; background: none; border: 0; padding: 0; margin: 0; font-family: inherit; cursor: pointer; transition: color .15s ease }
.ncl-h1 { font-family: 'P22 Mackinac', 'P22 Mackinack', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; color: #1F1E1D }
.ncl-sub { font-weight: 400; font-size: 18.5px; line-height: 1.55; color: #55534E }
.ncl-btns { display: flex; align-items: center; justify-content: center; gap: 12px }
.ncl-btn-dark { display: inline-flex; align-items: center; gap: 9px; background: #1F1E1D; color: #FFFFFF; font-size: 15px; font-weight: 400; line-height: 1; padding: 13px 22px; border-radius: 7px; white-space: nowrap }
.ncl-btn-soft { display: inline-flex; align-items: center; gap: 9px; background: #EAE8E0; color: rgba(31,30,29,.9); font-size: 15px; font-weight: 400; line-height: 1; padding: 13px 20px; border-radius: 7px; white-space: nowrap }
.cx-wrap { max-width: 1180px; margin: 0 auto; padding: 52px 32px 0; display: grid; grid-template-columns: 500px 1fr; gap: 52px; align-items: center }
.cx-left { text-align: center }
.cx-left .ncl-h1 { font-size: 50px; line-height: 1.12; white-space: nowrap }
.cx-sub { margin-top: 20px; font-size: 18px; line-height: 1.55; color: #55534E }
.cx-card { margin: 30px auto 0; max-width: 336px; background: #FCFBF8; border: 1px solid rgba(31,30,29,.14); border-radius: 16px; padding: 18px; box-shadow: 0 12px 34px -26px rgba(31,30,29,.35) }
.cx-btn-dark { display: block; text-align: center; background: #1F1E1D; color: #FFFFFF; font-size: 15px; font-weight: 400; line-height: 1; padding: 13px 16px; border-radius: 7px }
.cx-btn-soft { display: block; text-align: center; margin-top: 10px; background: #FFFFFF; border: 1px solid rgba(31,30,29,.18); color: rgba(31,30,29,.9); font-size: 15px; font-weight: 400; line-height: 1; padding: 12px 16px; border-radius: 7px }
.cx-btn-soft i { font-style: normal; font-size: 12px; color: rgba(31,30,29,.5); margin-left: 6px }
.cx-fine { margin-top: 18px; font-size: 12.5px; color: #6B6862; white-space: nowrap }
.cx-tq { margin: 20px auto 0; max-width: 480px; text-align: center }
.cx-tq.is-a { max-width: none; font-size: 13px; line-height: 1.6; color: #1F1E1D; white-space: nowrap }
.cx-tq.is-a span { color: #8B8984 }
.cx-rot { display: inline-block; min-width: 2.75em; text-align: left; color: #5150F6; transition: opacity .28s ease, transform .28s ease }
.cx-rot.is-out { opacity: 0; transform: translateY(8px) }
.cx-panel { position: relative; min-height: 600px; border: 1px solid rgba(31,30,29,.12); border-radius: 14px; background: #F6F5F0; display: flex; align-items: center; justify-content: center; padding: 40px }
.cx-win { width: 100%; max-width: 480px; background: #FFFFFF; border: 1px solid rgba(31,30,29,.11); border-radius: 12px; box-shadow: 0 26px 60px -30px rgba(31,30,29,.4); overflow: hidden; text-align: left }
.cx-win .c1-row { padding: 11px 18px; font-size: 13px }
.cx-cap { padding: 12px 18px 14px; font-size: 12.5px; color: #55534E; border-top: 1px solid rgba(31,30,29,.11) }
.c1-winbar { position: relative; display: flex; align-items: center; gap: 7px; padding: 13px 18px; border-bottom: 1px solid rgba(31,30,29,.11) }
.c1-windot { width: 9px; height: 9px; border-radius: 50%; background: #EDEBE3 }
.c1-winurl { position: absolute; left: 50%; transform: translateX(-50%); font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11.5px; color: #5E5D59 }
.c1-row { display: grid; grid-template-columns: 1fr 96px 108px; align-items: center; padding: 12px 22px; font-size: 13.5px; color: rgba(31,30,29,.85); text-align: left }
.c1-row + .c1-row { border-top: 1px solid rgba(31,30,29,.06) }
.c1-row.is-h { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #5E5D59; font-weight: 400 }
.c1-chip { background: #FFFFFF; border: 1px solid rgba(31,30,29,.11); border-radius: 10px; padding: 9px 15px; font-size: 13px; font-weight: 400; color: rgba(31,30,29,.75); white-space: nowrap }
.c1-chips { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px }
.cx-proof { max-width: 1180px; margin: 0 auto; padding: 56px 32px 0; text-align: center }
.c1-proof-l { font-size: 13px; color: #55534E }
.hs-k { font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #8B8984 }
.hs-lav { background: #EEEEFB; border-color: rgba(81,80,246,.14) }
.eo-zp { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
.eo-zpanel { overflow: hidden }
.eo-h2 { font-family: 'P22 Mackinac', 'P22 Mackinack', Georgia, serif; font-weight: 500; font-size: 44px; line-height: 1.1; letter-spacing: -0.012em; color: #1F1E1D; margin-top: 14px }
.eo-lede { font-size: 17px; line-height: 1.6; color: #55534E; margin-top: 16px; max-width: 480px }
.eo-head.is-center { text-align: center }
.eo-pc { position: relative; border: 1px solid rgba(31,30,29,.11); border-radius: 16px; background: #FCFBF8; padding: 26px 26px 28px }
.eo-pc.is-dark { background: #1F1E1D; border-color: #1F1E1D }
.eo-qpill { background: #FFFFFF; border: 1px solid rgba(31,30,29,.11); border-radius: 18px; padding: 18px 26px; box-shadow: 0 6px 18px rgba(31,30,29,.05) }
.eo-mx-pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; background: #1F1E1D; color: #FFFFFF; border-radius: 999px; padding: 12px 22px; font-size: 15px; font-weight: 500; letter-spacing: -0.005em }
.bx-term { margin-top: 12px; background: #1F1E1D; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(31,30,29,.5) }
.bx-fin { max-width: 1180px; margin: 88px auto 0; padding: 0 32px }
.bx-finpanel { border: 1px solid rgba(31,30,29,.12); border-radius: 14px; background: #F6F5F0; padding: 72px 32px 68px; text-align: center }
.bx-kick { font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #5E5D59; margin-top: 14px }
.bx-h2 { font-family: 'P22 Mackinac', 'P22 Mackinack', Georgia, serif; font-weight: 500; font-size: 56px; line-height: 1.1; letter-spacing: -0.012em; color: #1F1E1D; margin-top: 18px }
.bx-lede { font-size: 15.5px; line-height: 1.6; color: #55534E; max-width: 620px; margin: 16px auto 0 }
.bx-quiet { font-size: 13px; color: #55534E; margin-top: 22px }
.st2-win { max-width: 980px; margin: 36px auto 0; background: #FFFFFF; border: 1px solid rgba(31,30,29,.11); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(31,30,29,.05); text-align: left }
.pk-box { border: 1px solid rgba(31,30,29,.11); border-radius: 24px; background: #FFFFFF; padding: 52px 48px; display: grid; grid-template-columns: 1fr 1.35fr; gap: 48px; align-items: start; text-align: left }
.rs-splice { position: relative; overflow: hidden; padding: 64px 32px; text-align: center }
.rs-splice-card { max-width: 760px; margin: 0 auto; background: #FFFFFF; border: 1px solid rgba(31,30,29,.11); border-radius: 22px; padding: 34px 44px 32px; box-shadow: 0 6px 18px rgba(31,30,29,.05) }
.rs-splice-q { margin: 0 auto; max-width: 620px; font-family: 'P22 Mackinac', 'P22 Mackinack', Georgia, serif; font-weight: 500; font-size: 25px; line-height: 1.3; letter-spacing: -0.012em; color: #1F1E1D; text-wrap: balance }
.rs-splice-who { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 22px 0 0 }
.sw-dark { position: relative; overflow: hidden; margin: 44px auto 0; max-width: 1080px; background: #161514; border: 1px solid rgba(255,255,255,.08); border-radius: 28px; padding: 56px 48px 48px; color: #FFFFFF; box-shadow: 0 40px 80px -48px rgba(31,30,29,.55) }
.sw-dark-in { position: relative; z-index: 1 }
.bx-foot { max-width: 1180px; margin: 96px auto 0; padding: 40px 32px 36px; border-top: 1px solid rgba(31,30,29,.11); text-align: left }
.bx-fgrid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px }
.bx-tag { font-size: 13.5px; line-height: 1.5; color: #55534E; margin-top: 14px; max-width: 220px }
.bx-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px }
.bx-badge { font-size: 11px; font-weight: 400; color: #1F1E1D; border: 1px solid rgba(31,30,29,.11); border-radius: 6px; padding: 4px 8px; background: #FFFFFF }
.bx-fh { font-size: 12.5px; font-weight: 400; color: #1F1E1D; margin-bottom: 12px }
.bx-fl { font-size: 13px; color: #55534E; line-height: 2 }
.bx-fl a { display: block; color: #55534E; text-decoration: none; transition: color .15s ease }
.bx-fbot { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(31,30,29,.11); font-size: 12px; color: #55534E }
.hseq { overflow: hidden }
.hseq .hs-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 40px; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .55s ease, transform .55s ease; pointer-events: none }
.hseq .hs-scene.is-on { opacity: 1; transform: none; transition-delay: .18s }
.hs-msg { max-width: 86%; font-size: 12.5px; line-height: 1.5; color: #1F1E1D; border-radius: 12px; padding: 9px 12px; opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease }
.hs-comp { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 18px 16px; padding: 9px 12px; border: 1px solid rgba(31,30,29,.11); border-radius: 9px; font-size: 12.5px; color: #A09E98; background: #FFFFFF; opacity: 0; transition: opacity .4s ease, box-shadow .4s ease, border-color .4s ease }
.hs-prog { height: 6px; width: 240px; max-width: 100%; background: #EEEEFB; border-radius: 999px; overflow: hidden; margin-top: 10px }
.hs-prog i { display: block; height: 100%; width: 0; background: #5150F6; border-radius: 999px; transition: width 1.2s cubic-bezier(.3,.6,.3,1) }
.eo-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; background: none; border: 0; padding: 20px 0; margin: 0; text-align: left; cursor: pointer; font-family: 'P22 Mackinac', 'P22 Mackinack', Georgia, serif; font-weight: 500; font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; color: #1F1E1D }
.bx-tabs { display: inline-flex; gap: 2px; background: #EDEBE3; border-radius: 8px; padding: 3px }
.bx-tab { font-size: 11.5px; color: #55534E; padding: 5px 10px; border-radius: 6px; white-space: nowrap }
.bx-tab.is-on { background: #FFFFFF; color: #1F1E1D; box-shadow: 0 1px 2px rgba(31,30,29,.08) }
.bx-termbar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08) }
.bx-termbar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18) }
.bx-termtitle { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10.5px; letter-spacing: .06em; color: rgba(245,244,239,.4); pointer-events: none }
.bx-code { padding: 18px 20px 22px; font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; line-height: 1.75; color: rgba(245,244,239,.86); white-space: pre }
.bx-code .p { color: #A5A4FA }
.bx-code .d { color: rgba(245,244,239,.5) }
.bx-code .h { color: #FFFFFF }
.bx-code2 { white-space: normal; min-height: 372px }
.bx-code2.is-fixed { height: 340px; min-height: 0; overflow: hidden; scroll-behavior: smooth }
.bx-ln { min-height: 21px }
.bx-prompt { margin-bottom: 12px }
.bx-step { animation: bxIn .35s ease }
.bx-caret { display: inline-block; width: 7px; height: 13px; background: #A5A4FA; vertical-align: -2px; margin-left: 2px; animation: hsCaret 1s steps(1) infinite }
.bx-spin { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(245,244,239,.25); border-top-color: #A5A4FA; vertical-align: -1px; animation: bxSpin .8s linear infinite }
.bx-out { margin-top: 12px; animation: bxIn .5s ease }
.bx-gap { margin-top: 10px }
.bx-code .ok { color: #C5C4FB }
.bx-tbl { display: grid; grid-template-columns: 1.4fr 1fr 1fr; row-gap: 2px; column-gap: 12px; margin-top: 4px }
.bx-app { border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 10px 12px 12px; background: rgba(255,255,255,.03); margin-top: 2px }
.bx-apph { display: flex; align-items: center; gap: 8px; color: #FFFFFF; margin-bottom: 8px }
.bx-apph i { width: 7px; height: 7px; border-radius: 50%; background: #5150F6; display: inline-block }
.bx-fr { display: grid; grid-template-columns: 74px 1fr 56px; gap: 10px; align-items: center; margin-top: 5px; animation: bxIn .4s ease both; animation-delay: calc(var(--i) * 120ms) }
.bx-fr em { font-style: normal; text-align: right; color: rgba(245,244,239,.6) }
.bx-fb { font-size: 13.5px; line-height: 1.55; color: #55534E; margin-top: 6px }
.bx-fb i { display: block; height: 100%; background: #A5A4FA; border-radius: 999px; transform-origin: left; animation: bxGrow .8s cubic-bezier(.3,.6,.3,1) both; animation-delay: calc(var(--i) * 120ms + 150ms) }
.bx-ltv { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); color: rgba(245,244,239,.6) }
.bx-cl { display: grid; grid-template-columns: 1.5fr .7fr .7fr .8fr 1.5fr; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.06); animation: bxIn .4s ease both; animation-delay: calc(var(--i) * 140ms + 100ms) }
.bx-cl.is-h { border-top: 0; color: rgba(245,244,239,.45); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; animation: none }
.bx-sheet { background: #FFFFFF; border-radius: 6px; overflow: hidden; color: #1F1E1D; font-family: 'Inter', 'Styrene B', 'Helvetica Neue', sans-serif; font-size: 11.5px; border: 1px solid rgba(255,255,255,.2) }
.bx-sr { display: flex; border-top: 1px solid #E6E4DD }
.bx-sr.is-h { border-top: 0; background: #F3F2EC; color: #55534E; font-size: 10.5px }
.bx-sr span { padding: 6px 9px; border-left: 1px solid #E6E4DD; white-space: nowrap; overflow: hidden; box-sizing: border-box; flex: none }
.bx-sr .nw { width: 0; padding-left: 0; padding-right: 0; border-left-width: 0; opacity: 0; color: #5150F6; background: #EEEEFB; transition: width .8s cubic-bezier(.3,.6,.3,1), padding .8s cubic-bezier(.3,.6,.3,1), border-left-width .8s, opacity .4s ease .5s }
.bx-sheet.is-slid .bx-sr .nw { width: 96px; padding-left: 9px; padding-right: 9px; border-left-width: 1px; opacity: 1 }
.bx-console { text-align: left }
.bx-code .is-hid { opacity: 0 }
.eo-dash { max-width: none; width: 100%; border-radius: 14px 14px 0 0; border-bottom: 0; box-shadow: 0 30px 60px -36px rgba(31,30,29,.35); text-align: left }
.eo-dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px 18px 12px }
.eo-kpi { border: 1px solid rgba(31,30,29,.11); border-radius: 10px; padding: 10px 12px 8px; background: #FCFBF8; position: relative }
.eo-kpi b { display: block; font-family: 'P22 Mackinac', 'P22 Mackinack', Georgia, serif; font-weight: 500; font-size: 22px; line-height: 1.1; color: #1F1E1D; margin-top: 5px }
.eo-kpi em { font-style: normal; font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10.5px; letter-spacing: .04em; margin-top: 4px; display: block; color: #5150F6 }
.eo-kpi svg { position: absolute; right: 10px; bottom: 10px; width: 56px; height: 18px }
.eo-dash-chart { padding: 6px 18px 12px }
.eo-dash-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #55534E }
.eo-dash-chart svg { display: block; width: 100%; height: 120px }
.eo-dash-tbl { border-top: 1px solid rgba(31,30,29,.06) }
.eo-dr { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr .8fr; gap: 12px; padding: 9px 18px; font-size: 12.5px; color: #1F1E1D; border-top: 1px solid rgba(31,30,29,.06) }
.eo-mx-dashwrap { height: 300px; overflow: hidden; margin: 44px auto 0; max-width: 760px }
.eo-mx-console { max-width: 760px; margin: 0 auto }
.eo-mx-console .bx-term { max-width: none; margin-top: 0; text-align: left; box-shadow: 0 30px 60px -36px rgba(31,30,29,.45) }
.eo-mx-console .bx-term.is-bare { border-radius: 0 0 14px 14px }
.eo-mx-console .is-below .bx-tabs { margin-top: 16px; background: #FFFFFF; border: 1px solid rgba(31,30,29,.11) }
.mcp-dashwrap { height: 352px; margin-top: 40px }
.mcp-body { position: relative; overflow: hidden }
.mcp-panes { display: flex; width: 300%; transition: transform .75s cubic-bezier(.2,.7,.2,1) }
.mcp-panes.is-funnel { transform: translateX(-33.3333%) }
.mcp-dnav { display: flex; align-items: center; gap: 4px; padding: 8px 14px; border-bottom: 1px solid rgba(31,30,29,.06); font-size: 11.5px; color: #55534E }
.mcp-dnav > span { padding: 4px 9px; border-radius: 6px; white-space: nowrap }
.mcp-dnav > span.is-on { background: #EEEEFB; color: #5150F6; font-weight: 500 }
.mcp-dnav > span.is-new { background: #EEEEFB; color: #5150F6; font-weight: 500; animation: mcpPop .5s cubic-bezier(.2,.8,.2,1) both }
.mcp-model { margin-left: auto; font-style: normal; font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10px; letter-spacing: .06em; color: #8B8984; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap }
.mcp-model.is-new { color: #5150F6 }
.mcp-kpis { padding-top: 12px }
.eo-kpi.is-ltv { grid-column: span 2; background: #EEEEFB; border-color: rgba(81,80,246,.3); animation: mcpPop .55s cubic-bezier(.2,.8,.2,1) both }
.eo-kpi.is-flash { animation: mcpFlash 1.2s ease }
.mcp-bar { transition: height .8s cubic-bezier(.2,.7,.2,1), y .8s cubic-bezier(.2,.7,.2,1) }
.mcp-ln { transition: opacity .6s ease }
.mcp-subs { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: mcpDraw 1.4s cubic-bezier(.3,.6,.3,1) forwards }
.eo-dash-leg i.is-subs { border-top-color: #F28B82 }
.mcp-flow { display: flex; align-items: stretch; padding: 22px 18px 8px }
.mcp-fnode { display: flex; align-items: center; flex: 1; min-width: 0; animation: bxIn .5s ease both; animation-delay: calc(var(--i) * 120ms + 350ms) }
.mcp-fcard { flex: 1; background: #FCFBF8; border: 1px solid rgba(31,30,29,.11); border-radius: 10px; padding: 10px 12px 9px; min-width: 0 }
.mcp-farr { flex: none; width: 46px; position: relative; text-align: center; font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10px; color: #8B8984; padding-bottom: 14px }
.mcp-fchan { display: flex; align-items: center; gap: 10px; padding: 10px 18px 14px; font-size: 11.5px; color: #55534E; flex-wrap: wrap }
.mcp-fltv { margin-left: auto; color: #8B8984 }
.mcp-cl { display: grid; grid-template-columns: 1.6fr .7fr .7fr .8fr 1.4fr; gap: 10px; padding: 9px 18px; font-size: 12.5px; color: #1F1E1D; border-top: 1px solid rgba(31,30,29,.06); animation: bxIn .45s ease both; animation-delay: calc(var(--i) * 110ms + 350ms) }
.mcp-cl.is-h { font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #8B8984; border-top: 0; background: #FCFBF8; animation: none; margin-top: 8px }
.mcp-ok { color: #1F8A5B; font-weight: 500 }
.mcp-clfoot { padding: 10px 18px; font-size: 11.5px; color: #55534E; border-top: 1px solid rgba(31,30,29,.06); display: flex; gap: 10px; align-items: center }
.mcp-sheet { position: absolute; inset: 0; background: #FFFFFF; opacity: 0; pointer-events: none; transition: opacity .5s ease; font-family: 'Inter', 'Styrene B', 'Helvetica Neue', sans-serif; font-size: 11.5px; color: #1F1E1D }
.mcp-shbar { display: flex; align-items: center; gap: 4px; padding: 8px 14px; border-bottom: 1px solid #E6E4DD; font-size: 11.5px; color: #55534E; background: #F3F2EC }
.mcp-sr { display: flex; border-top: 1px solid #E6E4DD }
.mcp-sr span { padding: 7px 10px; border-left: 1px solid #E6E4DD; white-space: nowrap; overflow: hidden; flex: none; box-sizing: border-box }
.mcp-sr .hy { width: 0; padding-left: 0; padding-right: 0; border-left-width: 0; opacity: 0; color: #5150F6; background: #EEEEFB; transition: width .8s cubic-bezier(.3,.6,.3,1), padding .8s cubic-bezier(.3,.6,.3,1), border-left-width .8s, opacity .4s ease .4s }
.mcp-sheet.is-cols .mcp-sr .hy { width: 108px; padding-left: 10px; padding-right: 10px; border-left-width: 1px; opacity: 1 }
.mcp-sr .hy b { font-weight: 500; opacity: 0; transform: translateY(4px); display: inline-block }
.mcp-console .bx-code2.is-fixed { height: 360px }
.mcp-ask .h { font-size: 13px }
.bx-code .mcp-bar { display: inline-block; width: 150px; height: 5px; background: rgba(255,255,255,.12); border-radius: 999px; vertical-align: middle; margin-left: 10px; overflow: hidden }
.mcp-tabs { flex-wrap: wrap; justify-content: center }
.mcp-dash.is-static .mcp-panes, .mcp-dash.is-static .mcp-bar, .mcp-dash.is-static .mcp-ln, .mcp-dash.is-static .mcp-sheet, .mcp-dash.is-static .mcp-sr .hy { transition: none }
.eo-seqsteps { display: flex; justify-content: space-between; gap: 6px; padding: 8px 16px; font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #A09E98; background: #FCFBF8; border-bottom: 1px solid rgba(31,30,29,.06); white-space: nowrap }
.eo-seqsteps .is-on { color: #5150F6 }
@keyframes bxIn { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
@keyframes bxSpin { to { transform: rotate(360deg) } }
@keyframes bxGrow { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes hsCaret { 50% { opacity: 0 } }
@keyframes mcpPop { from { opacity: 0; transform: scale(.82) } 60% { transform: scale(1.04) } to { opacity: 1; transform: none } }
@keyframes mcpFlash { 0% { box-shadow: 0 0 0 0 rgba(81,80,246,.0) } 25% { box-shadow: 0 0 0 4px rgba(81,80,246,.28); border-color: #5150F6 } 100% { box-shadow: 0 0 0 0 rgba(81,80,246,0) } }
@keyframes mcpFlashTxt { 0% { color: #5150F6 } 100% { color: inherit } }
@keyframes mcpDraw { to { stroke-dashoffset: 0 } }
@keyframes mcpCell { to { opacity: 1; transform: none } }
```

## Appendix D — phone rules (@media (max-width: 760px)) for the components above
```css
.cx-wrap { grid-template-columns: 1fr; gap: 28px; padding: 24px 20px 0 }
.cx-left .ncl-h1 { font-size: 40px; line-height: 1.1; white-space: normal }
.cx-sub { font-size: 16px; line-height: 1.5; margin-top: 14px }
.cx-card { max-width: none; margin-top: 22px }
.cx-fine { white-space: normal; font-size: 12px; line-height: 1.6 }
.cx-tq { margin-top: 18px; max-width: 340px } .cx-tq.is-a { white-space: normal; font-size: 13px } .cx-tq.is-a span { display: block; margin-top: 2px } .cx-tq.is-b .cx-tqq { font-size: 17px } .cx-tq.is-c { font-size: 13px; max-width: none }
.cx-panel { min-height: 0; height: 440px; padding: 0 }
.hseq .hs-scene { padding: 14px } .hseq .hs-scene > .cx-win { zoom: .68 }
.cx-proof { padding: 40px 20px 0 } .c1-chips { gap: 6px } .c1-chip { padding: 8px 12px; font-size: 12.5px }
.bx-tabs { display: flex; flex-wrap: wrap; justify-content: center } .bx-tab { font-size: 11px; padding: 5px 9px }
.bx-code { font-size: 11px; padding: 14px 14px 18px } .bx-code2 { height: 320px; min-height: 0; overflow: hidden; scroll-behavior: smooth } .bx-out { overflow: hidden }
.bx-sheet { font-size: 10.5px } .bx-sr span:first-child { width: 92px } .bx-sr span:nth-child(2), .bx-sr span:nth-child(6) { display: none } .bx-sr span:nth-child(3) { width: 84px } .bx-sheet.is-slid .bx-sr .nw { width: 72px; padding-left: 7px; padding-right: 7px }
.bx-cl { font-size: 10.5px; gap: 6px } .bx-tbl { font-size: 11px; column-gap: 8px } .bx-fr { grid-template-columns: 64px 1fr 48px }
.ncl-btns { flex-direction: column; align-items: stretch } .ncl-btns .ncl-btn-dark, .ncl-btns .ncl-btn-soft { justify-content: center }
.bx-fin { margin-top: 56px; padding: 0 20px } .bx-finpanel { padding: 44px 22px 40px } .bx-finpanel .bx-h2 { font-size: 34px } .bx-lede { font-size: 15px } .bx-quiet { font-size: 12.5px }
.bx-foot { margin-top: 56px; padding: 32px 20px 28px } .bx-fgrid { grid-template-columns: 1fr 1fr; gap: 26px 20px } .bx-fgrid > div:first-child { grid-column: 1 / -1 } .bx-tag { max-width: 300px }
.bx-fh { margin-bottom: 8px } .bx-fl { font-size: 13.5px; line-height: 1.95 } .bx-fbot { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 32px } .bx-fbot span:first-child, .bx-fbot a:first-child { margin-left: 0 }
.eo-mx-top { padding: 64px 20px 0 } .eo-mx-h2 { font-size: 34px } .eo-mx-lede { font-size: 15px } .eo-mx-lede.is-serif { font-size: 20px }
.eo-mx-pill { white-space: normal; text-align: left; font-size: 13.5px; padding: 10px 16px; max-width: 100% } .eo-mx-pill.is-join { margin-top: -20px }
.eo-mx-dashwrap { height: 250px; margin-top: 28px } .eo-dash-kpis { grid-template-columns: 1fr 1fr; padding: 12px 14px 10px; gap: 8px } .eo-dash-head { padding: 8px 14px; flex-wrap: wrap; gap: 6px } .eo-dash-chart { padding: 6px 14px 10px }
.eo-dr { grid-template-columns: 1.6fr .8fr .9fr .9fr .7fr; gap: 6px; padding: 8px 12px; font-size: 11px }
.eo-mx-bot { padding: 0 20px 72px } .eo-mx-h1 { font-size: 34px; margin-top: 40px } .eo-mx-sub { font-size: 15px }
.eo-faq { padding-top: 64px } .eo-faq-h2 { font-size: 34px } .eo-faq-list { padding: 4px 18px; margin-top: 28px } .eo-faq-q { font-size: 17px; padding: 16px 0 }
.c1-winurl { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70% }
.mcp-yw { padding: 20px 18px; gap: 14px } .mcp-yw .st-sketch { width: 64px; height: 48px } .mcp-ywt { font-size: 22px }
.mcp-stage .eo-mx-top { padding-top: 48px } .mcp-h1 { font-size: 38px } .mcp-dashwrap { height: 320px; margin-top: 28px }
.mcp-dnav { flex-wrap: wrap; gap: 4px; padding: 8px 10px } .mcp-dnav > span { padding: 3px 7px; font-size: 10.5px } .mcp-model { flex-basis: 100%; margin-left: 0; font-size: 9px }
.mcp-flow { display: block; padding: 8px 14px 4px } .mcp-fnode { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid rgba(31,30,29,.06) } .mcp-fnode:first-child { border-top: 0 }
.mcp-fcard { display: contents } .mcp-fcard b { font-size: 16px; margin: 0 } .mcp-farr { order: 3; width: auto; padding: 0; text-align: right } .mcp-farr i { display: none }
.mcp-fchan { padding: 8px 14px 12px; gap: 6px; font-size: 11px } .mcp-fltv { margin-left: 0; flex-basis: 100% }
.mcp-cl { grid-template-columns: 1.4fr .6fr .6fr .7fr 1.2fr; gap: 6px; padding: 8px 12px; font-size: 11px } .mcp-cl span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .mcp-clfoot { font-size: 11px; padding: 8px 12px }
.mcp-sheet { font-size: 10.5px } .mcp-shbar { padding: 6px 10px; font-size: 10.5px } .mcp-shbar em { display: none }
.mcp-sr span:first-child { width: 28px } .mcp-sr span:nth-child(2) { width: 112px } .mcp-sr span:nth-child(3) { width: 64px } .mcp-sr span:nth-child(4), .mcp-sr span:nth-child(7) { display: none } .mcp-sheet.is-cols .mcp-sr .hy { width: 66px; padding-left: 6px; padding-right: 6px } .mcp-sr span { padding: 6px 6px }
.mcp-console .bx-code2.is-fixed { height: 320px } .mcp-tabs .bx-tab { padding: 6px 9px; font-size: 11px }
.mcp-hw { grid-template-columns: 1fr; gap: 12px; margin-top: 28px } .mcp-hwcard { padding: 24px 20px 26px } .mcp-hwt { font-size: 24px } .mcp-hwcard .eo-pc-s { font-size: 15px }
.mcp-hood { padding: 28px 18px; margin-top: 12px } .mcp-hoodh { font-size: 24px } .mcp-flowrow { grid-template-columns: 1fr; gap: 6px; margin-top: 24px }
.mcp-arr { height: 24px; width: 2px; margin: 0 auto } .mcp-arr i { left: 0; right: auto; top: 3px; bottom: 3px; border-top: 0; border-left: 1.5px dashed rgba(81,80,246,.55) } .mcp-arr i::after { right: auto; left: -4px; top: auto; bottom: -1px; transform: rotate(135deg) }
.mcp-build .eo-dz-h2 { font-size: 36px } .mcp-build .eo-dz-lede { font-size: 18px }
.mcp-yesno { grid-template-columns: 1fr; gap: 12px; margin-top: 28px } .mcp-yh { font-size: 24px } .mcp-li { font-size: 15px } .mcp-nodevs { font-size: 20px; margin-top: 28px }
.mcp-ctacard { padding: 40px 22px 44px } .mcp-ctacard .eo-dz-h2 { font-size: 40px }
.sw-dark { margin-top: 28px; border-radius: 20px; padding: 32px 18px 28px }
.rs-splice { padding: 44px 20px } .rs-splice-card { padding: 26px 22px 24px; border-radius: 18px } .rs-splice-mark { font-size: 40px; margin-bottom: 10px }
.rs-splice-q { font-size: 21px } .rs-splice-q.is-long { font-size: 17.5px } .rs-splice-who { margin-top: 18px } .rs-splice-who img { width: 38px; height: 38px }
.ncl-logo { height: 22px }
```