# Stitch slide template — design guidelines

Living rules for `template.html`. Update this file whenever a style or layout decision is locked in.

---

## Source of truth

- Primary file: `template.html`
- Tokens live in `:root` (and `html[data-theme="dark"]` overrides)
- This file (`PRESENTATIONS.md`) — living rules + AI agent workflow (single markdown source)
- Visual reference: [`guidelines.html`](guidelines.html) (type scale, palette, data-viz, flows)
- Cursor loads `.cursor/skills/stitch-decks/SKILL.md` as a thin pointer into this file
- Ignore dark styling from source screenshots when building data-vis — adapt to this light system

---

## Grid

| Token | Value |
|---|---|
| `--grid-cols` | `12` |
| `--grid-rows` | `8` |
| `--slide-pad` | `calc(var(--font-size-base) * 3)` |
| `--grid-gap-x` / `--grid-gap-y` | `calc(var(--slide-pad) * 0.333)` |

### Placement helpers

Use `col-start-N`, `col-span-N`, `row-start-N`, `row-span-N`.

### Canonical regions

| Region | Typical placement |
|---|---|
| Headers (title + subtitle) | `col-start-1`, span ~6–7, `row-start-1 row-span-2` |
| Content / aside | often `col-start-9 col-span-4`, top rows |
| Single-row card visuals | rows **6–8** (`row-start-6 row-span-3`) |
| Two-row card visuals | rows **5–8** (`row-start-5 row-span-4`) |

### Slide-specific layouts (locked)

**Performance overview (Gaming)**

- Value / Volume / AOV KPIs → `row-start-3 row-span-2` (2 rows)
- PVAL over time → `row-start-5 row-span-4` (4 rows)
- Other cards on the slide keep their existing spans

**E-commerce conversion**

- Conversion stat cards (left) → `col-span-4`
- Error breakdown (right) → `col-start-5 col-span-8`
- Both → `row-start-3 row-span-6`

**Solo quote**

- Quote region → `col-span-12`, `row-start-3 row-span-4` (vertically centred on the 8-row slide)
- Keep `margin-left: 4vw` on `.quote--solo` (gap between avatar and quote text)

**3 × media cards (4×4)** — e.g. Apple Pay case study

- Each media card → `col-span-4`, `row-start-5 row-span-4`
- Caption for each card → same columns, `row-start-4 row-span-1` (bottom of the row above the card)
- Captions use `.card-caption` with `.card__header` + `.card__subhead` (same combo as inside cards)
- Caption blocks are **bottom-aligned** in that row (flush above the cards)

**Acquiring / card-routing flow diagrams**

- Title/subtitle rows 1–2; Traditional + Stitch diagrams `col-span-12`, `row-start-4 row-span-5` (last 5 rows); rectangular nodes are **3:2** (`--flow-node-w` = 1.5 × `--flow-node-h`); Card networks sphere is `--flow-node-h` square (same height as rects); Traditional bottom row uses equal gaps via `--flow-gap`
- **Accuracy:** nodes, SVG edges, and chips share one `0–100%` board (`.flow__board`). Connector geometry is **measured from live node boxes** on load/resize (`data-flow-layout` + `syncFlowBoards`) so edges/arrows stay flush when the viewport aspect changes. Never mix CSS grid areas with freehand SVG alone — edges will drift from nodes.
- Build order: place nodes from source → route edges to node edges → park chips on those routes
- **Nodes (shared):** inset shadow via `--flow-inset` (same language as chips); padding `var(--grid-gap-x)`; labels **bottom-left** on all rectangular nodes (sphere / `.flow-node--networks` centered — only exception)
- **Node fills:**
  - User / default = `--paper` + inset
  - Merchant (`.flow-node--merchant`) = `--ink` + `--ink-reverse` type. **Dark mode:** translucent `--ink-muted` over a solid `--paper` base (so connectors do not show through)
  - Banks (`.flow-node--bank`) = `--bg-surface-2`. **Dark mode:** `--bg-surface-1`
  - PSP / Stitch = **45°** gradient solid → `--paper` (`--amber` / `--brand-intense`); type `--on-fill` (always light — does **not** flip in dark mode)
  - Alt (`.flow-node--alt`) = ink@18% on paper; type `--on-fill`
  - Outline (`.flow-node--outline`) = `--paper`, no inset; dashed border matching **`.edge--muted`** (`1.45px`, ink @ 32%)
- **Edges:** `.edge--ink` solid; `.edge--soft` solid muted fallback; `.edge--muted` / `.edge--ink-dashed` / brand / amber = dashed `4.5 4.5` (comms, go/no-go, initiate). Soft paths paint **under** ink where they share a run (SVG order)
- Step chips: inset shadow (same language as `.chip`); shadow + type colour match the correlated edge (amber / brand / muted / ink)
- **Arrowheads:** use `.flow-arrow` (CSS triangles in `em`) — not SVG markers. Markers distort under `preserveAspectRatio="none"`. Same 1:1 aspect for right/left/up/down via rotate.
- **Elbows:** never use equal viewBox % for Q-curve radii — the board is stretched. Use `flowElbowRadii` / `flowElbow` / `flowElbowHV` / `flowStepHVH` / `flowCorner` so corner radius is equal in **screen px** (separate `ex` / `ey`). Traditional money-direct is the canonical up→right→up example.
- Traditional: parallel initiation (top) vs supplies (mid); comms mid-bottom vs money lower-bottom; curved direct-settlement branch + footnote
- Stitch: parallel settlement lines on the right (solid ↔ + brand dashed); parallel bottom bands (comms above money)
- **Multiple card routes** (`data-flow-layout="routes"`):
  - Layout: title cols 1–5 rows 1–2; content-points cols 7–9 + 10–12 (**3+3**) rows 1–4; flow `row-start-5 row-span-4`
  - Five equal columns; **Card + Merchant on the top row** with the Stitch path; alt lane below
  - Top 3DS = `.flow-node--outline` (dashed, matches muted edges); bottom 3DS = default node (inset shadow)
  - Connectors: card→Stitch straight + soft fork down to Alt; switch→acq / alt→bank horizontals; acq straight to top 3DS + fork down to bottom; bank soft-merges into bottom 3DS; top 3DS→Merchant **soft** (under); bottom 3DS joins up **ink** into Merchant


---

## Type scale

All sizes are relative to `--font-size-base` (`1vw`). Prefer named tokens over raw `calc()` multipliers.

| Token | × base | Typical use |
|---|---|---|
| `--font-size-3xs` | 0.55 | Dense chart axes (Bash) |
| `--font-size-2xs` | 0.6 | Chart / groupbar axes |
| `--font-size-xs` | 0.7 | Legends, hbars, compact tables, times labels |
| `--font-size-sm` | 0.8 | Panel titles, ring labels, chips, KPI labels, error values (legacy sm) |
| `--font-size-md` | 0.9 | Card body, callouts, UI chrome, capability / error table body |
| `--font-size-base` | 1 | Body copy, captions, ring %, content-points head |
| `--font-size-lg` | 1.025 | Card heads, stat labels, table headers, KPI deltas |
| `--font-size-xl` | 1.75 | Transaction time values |
| `--font-size-2xl` | 2 | Quote text |
| `--font-size-3xl` | 2.5 | Slide title + subtitle |
| `--font-size-4xl` | 3 | Gaming KPI values (Value / Volume / AOV) |
| `--font-size-5xl` | 4 | Stat cards, conversion %, uptime %, numbered cards |
| `--font-size-6xl` | 6 | Oversized `.card__stat` only |

### Component type mapping

| Element | Size | Notes |
|---|---|---|
| `.slide-title` / `.slide-subtitle` | `--3xl` | |
| `.quote__text` | `--2xl` | |
| `.dv-kpi__value` | `--4xl` | colour `--ink` |
| `.card--stat-text .card__stat`, `.dv-stat-card__value`, `.dv-conv-card__value` | `--5xl` | |
| `.card__stat` (default large) | `--6xl` | |
| `.dv-times__value` | `--xl` | |
| `.dv-ring__pct` | `--base` | |
| `.dv-ring__label` | `--sm` | |
| `.content-points__head` | `--base` | weight 600 |
| `.dv-panel__title` | `--sm` (default); error breakdown title uses `--lg` |
| `.dv-uptime__title` | `--lg` / weight 600 / `--ink` — same as `.card__header` (section label above cards) |
| Capability / error table header | `--lg` / weight 600 | |
| Capability / error table body | `--md` / weight 400 | |
| `.dv-table` th/td | `--xs` | |

---

## Colour

### Tokens

| Token | Role |
|---|---|
| `--ink` | Default type colour for almost all text |
| `--ink-muted` / `--text-muted` | Secondary / supporting type |
| `--ink-reverse` | Type on dark surfaces (e.g. callouts) — flips in dark mode |
| `--on-fill` | Always-light type on brand/amber/alt flow fills — does **not** flip in dark mode |
| `--brand` | **Stats and data highlights only** (plus chart Stitch series strokes + card glow) |
| `--brand-intense` | `#580CFF` — **gradient fills only** (bars, pillars, rings, hbars, flow Stitch node, progress bar) |
| `--titanium` | Peer / Paygate series; correlated peer stats |
| `--amber` | Error / warning numeric values only |
| `--signal` | Lime accent for non-type chrome when needed — **not** for body type or card glow |
| `--paper` | Card / slide background |
| `--border` | Light row rules |
| `--chart-grid` | Chart gridlines |
| `--ink3` | Chart axis labels (quiet tertiary) |

### Font colour rules (general)

Default stance: **type is ink**. Colour is reserved for meaning.

| Element | Colour | Notes |
|---|---|---|
| Slide title | `--ink` | |
| Slide subtitle | `--ink-muted` | |
| Body / lists / content-points heads | `--ink` | Supporting body under a point head may use `--ink-muted` |
| Card header / body | `--ink` | Subheads may use `--text-muted` |
| Chips | `--ink` | Never brand-coloured chip labels |
| Quote text + name | `--ink` | Role / attribution → `--text-muted` |
| Panel titles | `--ink` | |
| Ring % | `--ink` | Ring stroke may be brand gradient; the number stays ink |
| Ring labels / KPI deltas / stat labels | `--ink-muted` | |
| Table headers + body | `--ink` | |
| Table accent cells (`.td-accent`) | `--ink` + weight 600 | Emphasis via weight, not brand colour |
| Table muted cells (`.td-muted`) | `--text-muted` | e.g. “Not required”, competitor column |
| Callout type | `--ink-reverse` | On `--ink` background |

### When `--brand` is allowed on type

Use `--brand` **only** for large statistical figures that should read as brand/product emphasis or Stitch-correlated metrics:

| Use `--brand` | Do **not** use `--brand` |
|---|---|
| `.card__number`, `.card__stat`, `.card--stat-text .card__stat` | Titles, subtitles, body, labels |
| `.dv-conv-card__value` (conversion %) | Chip text, panel titles, table headers |
| `.dv-stat-card__value--brand` (Stitch uptime) | Ring percentages, Gaming KPI values |
| Legend swatches / chart fills for Stitch | Quote text, content-points |

**Gaming KPI values stay `--ink`** (Value / Volume / AOV) — they are performance figures, not brand callouts.

### When `--titanium` / `--amber` are allowed on type

| Token | Allowed on type |
|---|---|
| `--titanium` | Peer-correlated stats only (e.g. Paygate uptime `.dv-stat-card__value--titanium`) |
| `--amber` | Error / risk percentages only (e.g. `.dv-errors__value`) |

Do not use titanium or amber for general UI labels.

### Correlation rules (data-vis)

- Series colour in the chart **must match** the related legend swatch and any correlated stat colour
- **Stitch** → `--brand` strokes / labels; fills use tip→origin `--brand-intense` gradient
- **Paygate / peer** → `--titanium` (solid)
- Uptime: Paygate stat `--titanium`, Stitch stat `--brand`
- Conversion rate cards: stats `--brand`
- Gaming KPI values: `--ink`
- Card highlight glow (`.card__glow`): `--brand` (fill, not type)
- No violet type for labels — keep type in ink / muted; brand only for the stat cases above

---

## Chips

### Markup

```html
<p class="content-points__head">Products live &amp; launching</p>
<div class="chips">
  <span class="chip">Pay by bank</span>
  <span class="chip">Card</span>
  …
</div>
```

Also used inside numbered cards (`.card--numbered .chips`).

### Style rules

| Property | Rule |
|---|---|
| Shape | Pill (`--radius-pill`) |
| Type | `--font-size-sm`, weight **600**, colour **`--ink`** |
| Inside a card | Type steps down to `--font-size-xs` |
| Fill | Transparent — outline via inset `box-shadow` using `--card-shadow` (not a filled brand pill) |
| Layout | `.chips` is a wrapping flex row |

### Spacing

| Context | Rule |
|---|---|
| Standalone `.chips` | `margin-top: calc(var(--font-size-base) * 1.5)` |
| Directly under `.content-points__head` | Tighter: `margin-top: calc(var(--font-size-base) * 0.25)` |
| Inside a card | `margin-top: auto` + `padding-top: 0.75em` (pins chips to the card bottom) |

### Usage guidance

- Chips = **labels for products, channels, tags, or short categorical items** — not paragraphs
- Keep labels short (a few words)
- Do not colour individual chips with `--brand` / `--amber` unless a future explicit variant is added
- Prefer chips in the content column (e.g. Bash “Products live & launching”) or as card footers on numbered cards

---

## Content patterns

### Content points

- `.content-points` — vertical stack of point blocks
- `.content-points__head` — section label above chips or lists; `--base` / weight 600 / `--ink`
- **No top margin** when `.content-points__head:first-child` (nothing above it in the region)
- Point supporting copy under a head uses muted body where appropriate

### Callouts

- Dark block: background `--ink`, type `--ink-reverse`
- Size `--font-size-md`
- Place after body copy; `.slide-body + .callout` gets `margin-top: calc(var(--font-size-base) * 1.5)`
- Use for a single emphatic aside — not as a substitute for a card grid

### Card captions (above media cards)

Reusable header + sub-head sitting in the grid row **above** a media card:

```html
<div class="grid-region grid-region--card-caption col-start-1 col-span-4 row-start-4 row-span-1">
  <div class="card-caption">
    <h3 class="card__header">Adoption</h3>
    <p class="card__subhead">Half of checkouts choose Apple Pay</p>
  </div>
</div>
```

| Rule | Detail |
|---|---|
| Header | `.card__header` — `--ink`, weight 600 |
| Sub-head | `.card__subhead` — `--text-muted`, weight 400 |
| Size | Both `--font-size-lg` (same as in-card combos) |
| Spacing | **No margin** between header and sub-head |
| Alignment | Caption block **bottom-aligned** in its row (sits on the card); header/sub-head within the block stack from the top of the block with no gap. Across columns, keep header/sub-head line counts similar so tops stay even — the shared row + bottom pin keeps them on the cards |
| Media card | `.card.card--media` wrapping `.image-placeholder` > `img` **or** `.ui-mock` HTML/CSS asset; `col-span-4` × `row-span-4` (or `row-start-4 row-span-5` when caption is on row 3); inset `--card-shadow` (same language as chips) |

### Flexible integration UI mocks (`.ui-mock`)

Three HTML/CSS assets inside `.card--media` — no screenshot images:

| Card | Class | Contents |
|---|---|---|
| Hosted pages | `.ui-mock--hosted` | Skewed surface stack + modal form; amber checked box; `--ink` **Pay now** |
| Embedded fields (SDK) | `.ui-mock--sdk` | Surface-1 pill fields; empty checkbox; `--amber` **Pay with card** |
| Pure API | `.ui-mock--api` | Dark code panel (bottom-right), line numbers, GraphQL highlight (`--amber` keyword / type mix / light vars) |

- Captions: `.card__header` only on row 3 (`Hosted pages` / `Embedded fields (SDK)` / `Pure API`)
- Title/subtitle rows 1–2; cards rows 4–8

### Image placeholders

- Surface `--bg-surface-1`, type `--text-muted`, radius `--radius-2xl`
- Label is muted UI chrome, not a heading
- Inside `.card--media`, image covers the card (`object-fit: cover`)

---

## Charts & pillars

### Gradients

- Brand / Stitch fills: **tip → origin** fade  
  `linearGradient` vertical, stop 0% opacity 1 → stop 100% opacity ~0.15 on `--brand-intense`
- Do **not** invent separate dark chart themes from screenshots

### Pillars / bars

- **All pillars and bars have rounded corners** (`rx` on SVG rects)
  - Combo pillars ≈ `rx: 3`
  - Group bars ≈ `rx: 4`
  - Dense Bash bars ≈ `rx: 1.1` (half width → soft pill)
- Axis labels use HTML overlays (not stretched SVG text), sized from the type scale
- Chart fonts stay relative to `--font-size-base`

---

## Cards & stats

### Alignment

- Stat / KPI / conversion / uptime cards: **content top-aligned** (`justify-content: flex-start`)
- Ring stacks and times blocks: top-aligned within their panels

### Stat sizing

Match `.card--stat-text` when building data-vis stat cards:

- Value → same as `.card--stat-text .card__stat` → `--font-size-5xl` (except Gaming KPIs → `--4xl`)
- Label → same as `.card__stat-label` → `--font-size-lg`, muted

### Spacing

- `.content-points__head` has top margin **only when not `:first-child`** (no orphan top gap when it’s the first thing in the region)

---

## Tables

### Capability-style table (`.table`)

Reference for “proper” table chrome:

| Property | Rule |
|---|---|
| Body size | `--font-size-md` |
| Header size | `--font-size-lg`, weight **600** |
| Header rule | `1px solid var(--ink)` |
| Row rules | `1px solid var(--border)` |
| Last row | no bottom border |
| Body weight | **400** |
| Accent cells (e.g. Included) | weight **600** |
| Cell vertical align | **top** |
| Row padding | `calc(var(--grid-gap-y) * 0.25) 0` |

**Secure Vault comparison** (`.table--vault`):

- Title/subtitle rows 1–2; table `col-span-12` rows **4–8** (`row-span-5`) — one row under the title for air; still comfortable for header + 8 capability rows
- Columns: Capability | Independent vault | PSP vault — Independent vault sits over `.comparison-highlight` (brand glow)
- Status cells use `.td-status` + Material Symbols `check` / `close`
  - Independent Yes → `.td-status--yes-accent` (`--ink`, weight **600** only — never `--brand` on table type)
  - PSP Yes → `.td-status--yes` (`--ink`, weight 400)
  - No → `.td-status--no` (`--amber`)
- Column widths ~42% / 29% / 29%
- Table type may use `--amber` for No; **do not** use `--brand` for table text

### Error breakdown

- Match capability table for **font sizes, weights, and borders**
- Keep value colour as `--amber` (do not restyle to ink)
- Title row height equals body row height (shared flex row model)
- Header + body text **top-aligned**

### Data-vis tables (`.dv-table`)

Bank breakdown + Top end-users:

| Column | Width | Align |
|---|---|---|
| 1 | **60%** | left |
| 2 | **20%** | **right** (header + body) |
| 3 | **20%** | **right** (header + body) |

- Header + body cells always **top-aligned** (`vertical-align: top`)
- Header rule: ink; body rules: border; last row: none

---

## Quotes

### Solo quote

- Region: full width, **4 rows**, starting row 3 (centred in the slide)
- Avatar + quote on the slide column grid
- Preserve **`margin-left: 4vw`** on `.quote--solo` so the column gap between avatar and text remains

---

## Motion & chrome

- Prefer intentional, sparse motion when adding animation
- Grid overlay toggle: `G` / button / `?grid=1`
- View toggle (slide ↔ thumbnail overview) in top chrome; click a thumb to open that slide; slide numbers sit below each thumb
- Slide counter in top chrome (`n / total`) tracks the active slide
- Overview zoom (`−` / `+` next to view toggle): **4** thumbs per row by default; **3** max size / **6** min size; persists via `localStorage`; `#site` is a `repeat(var(--overview-cols), 1fr)` grid; `--overview-scale` is measured from `#site` content width (not `100vw`) so thumbs span the padded row
- Presentation mode (`present_to_all`): hides chrome + dots, forces grid off; **Esc** exits and restores prior grid; always single-slide view
- Theme toggle available; data-vis still follows light token intent unless explicitly themed

---

## Do / don’t (quick)

**Do**

- Default all type to `--ink` / `--ink-muted`
- Reserve `--brand` type for large stats (and Stitch-correlated figures)
- Use chips for short categorical labels; keep chip type ink
- Use the named type scale
- Keep Stitch = brand, peer/Paygate = titanium in charts
- Top-align stats and table cell text
- Round all chart pillars
- Update this file when a rule changes

**Don’t**

- Colour titles, body, chips, or table headers with `--brand`
- Hard-code one-off font sizes when a token exists
- Centre-align long stat stacks or table cells vertically
- Use `--signal` for card glow or body type (glow → `--brand`)
- Drop the solo-quote `4vw` gap
- Copy violet/dark screenshot chrome into data-vis type
- Use amber/titanium on type except error values / peer-correlated stats

---

## AI agent workflow

Hand an agent **this file** + `template.html` (optional: open `guidelines.html` while building). Edit or fork `template.html` — do not invent a parallel design system.

### Hard constraints (for agents)

- **Board:** every slide is a 12-column × 8-row `.slide-grid` inside `.section`
- **Tokens:** use `:root` / `html[data-theme="dark"]` variables — never hard-code one-off sizes or colours when a token exists
- **Type is ink:** default `--ink` / `--ink-muted`. Reserve `--brand` on type for large stats / Stitch-correlated figures only. `--amber` = error values only; `--titanium` = peer stats only
- **`--brand-intense`:** gradient fills only (bars, pillars, rings, Stitch flow node) — not body type
- **`--on-fill`:** always-light labels on brand/amber/alt fills — does not flip in dark mode
- **Flows:** nodes, SVG edges, and chips share one `0–100%` `.flow__board`. Measure connectors from live node boxes (`data-flow-layout` + `syncFlowBoards`). Use CSS `.flow-arrow` triangles — not SVG markers. Elbows via `flowElbowRadii` / `flowElbow` / `flowElbowHV` / `flowStepHVH` / `flowCorner` (equal screen px, not equal viewBox %)
- **Charts:** rounded pillars (`rx`); Stitch fills tip→origin `--brand-intense` gradient; peer = `--titanium`; series colour must match legend + correlated stats
- **Update this file** when locking a new layout or style rule

### Build order for a new slide

1. Add a `.section` with `data-title="…"` (nav dots use this)
2. Place `.slide-grid` + optional `.slide-grid__guides`
3. Headers: title + subtitle → typically `col-start-1`, span ~6–7, `row-start-1 row-span-2`
4. Place content with `col-start-*` / `col-span-*` / `row-start-*` / `row-span-*`
5. Reuse existing component classes (`.card`, `.dv-*`, `.flow`, `.table`, `.ui-mock`, `.chips`, `.quote`) — copy a nearby slide as the scaffold
6. For flows: place nodes → route edges to node edges → park chips on routes → ensure `data-flow-layout` is wired in the existing sync script
7. Check light theme first; verify dark only for surfaces that have explicit dark rules (merchant/bank nodes, ui-mocks)

### Example prompts

```
Add a slide after Secure Vault titled "Settlement timing" with three KPI cards
(Value / Volume / AOV style) on rows 3–4 and a combo chart on rows 5–8.
Follow PRESENTATIONS.md colour correlation; Stitch series = brand, peer = titanium.
```

```
Fork template.html into partner-deck.html. Keep chrome, tokens, and nav.
Replace slides with: title, problem, Stitch flow (reuse data-flow-layout="stitch"),
vault comparison, and a closing quote. Update PRESENTATIONS.md only if you lock a new pattern.
```

```
Fix the acquiring flow so edges stay flush on resize — use measured connectors
and aspect-corrected elbows from template.html; do not freehand SVG paths.
```

### Agent do-not (extra)

- Mix CSS grid areas with freehand SVG for flow edges
- Invent fonts — use Suisse Intl from `fonts/` as in the template
- Break existing `data-flow-layout` sync or export (`?export=1`, `?theme=`) behaviour

### Deliverables checklist

- [ ] Slide uses named type tokens and placement helpers
- [ ] Type colour rules respected
- [ ] New locked pattern documented in this file
- [ ] Flows remeasure on resize; arrows are CSS triangles
- [ ] Works with theme toggle / dark surface rules where applicable
- [ ] Nav `data-title` set; grid overlay still works (`G` / `?grid=1`)

---

## Changelog

| Date | Change |
|---|---|
| 2026-09-18 | Initial guidelines captured from template session (grid 12×8, type scale, data-vis colour correlation, tables, quotes, cards) |
| 2026-09-18 | Expanded font-colour rules (`--brand` for stats only); added chips, content-points, and callout patterns |
| 2026-09-18 | Added 3× media-card (4×4) pattern with top-aligned card-caption header/sub-head combos |
| 2026-09-18 | Added acquiring flow-diagram slides (traditional + Stitch) with nodes, edges, and step chips |
| 2026-09-18 | Rebuilt flows on shared 0–100% board for source-accurate node/edge/chip placement |
| 2026-09-18 | Multiple card routes slide; aspect-corrected elbows; `--on-fill`; dark-mode bank/merchant fills; outline border matches `.edge--muted`; routes 3DS top outline / bottom inset |
| 2026-09-18 | Secure Vault comparison table (Yes/No status + Independent vault highlight) |
| 2026-09-18 | Flexible integration slide with HTML/CSS UI mocks (hosted / SDK / API) |
| 2026-09-18 | Added `guidelines.html` visual system page + AI agent workflow (later consolidated into this file) |
| 2026-09-18 | Slide/thumbnail view toggle + Presentation mode (Esc exit, chrome hidden) |
| 2026-09-18 | Overview zoom: 3–6 cols/row (default 4), −/+ chrome, session persistence |
| 2026-09-22 | Renamed from GUIDELINES.md; consolidated `SKILL.md` agent workflow into this file |