Product grid – the catalogue

Message bubble – AI-generated audio reply

src/pages/languages.astro:150-176

Voice & accent selection table

src/pages/languages.astro:177-240

Message bubble – transcription + translation

src/pages/languages.astro:241-282

Channel icon stack – isometric

src/pages/languages.astro:283-313

AI-to-AI multi-turn chat handoff

src/pages/solution/ai-agent-for-government-agencies.astro:348-419

Channel icon stack – flat

src/pages/solution/ai-agent-for-government-agencies.astro:420-450

Analytics – stat row + chart

src/pages/solution/ai-agent-for-government-agencies.astro:451-497

Analytics – stat row + CSS chart

src/pages/usecase/grievance-redress.astro:466-536

Added 2026-09-03, alongside the image-based chart above; updated 2026-09-03 from a 12-bar CSS chart to two rounded SVG lines (filed vs resolved), with the card's background switched off so the lines read as a plain drawing. Not the flat cg-an-chart.svg <img> – .product-grid_cg_an_chart-lines (public/css/proto-v3.webflow.css) is a single viewBox="0 0 300 100" SVG stretched with preserveAspectRatio="none", so it fills the card at any width with no crop and no aspect-ratio cap the image variant needs. Prefer this for any new analytics card; the image variant above stays catalogued because six live pages still use it verbatim. See docs/product-grid-rules-v15.md.

Certification badges

src/components/SecurityFeatures.astro:29-43 (rendered on security.astro + 4 solution pages)

Tags are the real CertTag.astro component (documented on style-guide.astro) – all 5 certifications defined there, left-aligned, wrapping to a second row rather than centred. No longer a decorative globe image behind them.

On-premise hosting card

src/components/SecurityFeatures.astro:44-78

IP allowlist card

src/components/SecurityFeatures.astro:81-118

Proactive widget / fraud alert

src/components/SecurityFeatures.astro:119-154

Cursor position (119-154) and hover/shake CSS (171-193) are copied together – SecurityFeatures.astro's own header comment notes the cursor's translate offset is tuned per page position, so it may sit slightly off if this card is dropped into a differently-shaped layout.

Multi-channel inbox list

src/pages/usecase/citizen-engagement.astro:337-422

Stagger/hover CSS copied from the same page's lines 159-208.

AI-to-human takeover editor

src/pages/usecase/customer-support.astro:328-384

The Takeover button's animation: pulse 4s infinite 0.5s references a @keyframes pulse that doesn't exist anywhere in this codebase – a pre-existing no-op in the source, transcribed as-is, not fixed here.

Auto-train – upload / URL / snippet, with retrain cursor

src/pages/usecase/customer-support.astro:387-450

Cursor and list-hover CSS is shared sitewide via ProductGridDemoStyles (imported once, above) – no page-specific CSS needed.

Self-improving agent

src/pages/usecase/customer-support.astro:451-469

Icon-rotation CSS is shared sitewide via ProductGridDemoStyles.

Translation typewriter – multi-language button switcher

src/pages/usecase/citizen-engagement.astro:495-604

citizen-engagement.astro's own hand-rolled fork of the typewriter idea below, kept deliberately separate – see TranslationTypewriter.astro's own header comment. Caret-blink CSS copied from the same page's lines 159-208 (part of the block above).

Translation typewriter (component)

src/components/sections/TranslationTypewriter.astro – the canonical, reusable version. Used live on 7 usecase pages, e.g. src/pages/usecase/grievance-redress.astro:433-438.

Reach for this component, not a hand-rolled copy, unless the page genuinely needs the multi-language button switcher above (citizen-engagement.astro's documented, deliberate exception).