QVAC-19134 Frontend bug: infographic doesnt render correctly in Safari browser

[BrunoCampana]

What problem does this PR solve?

The Features infographic on the docs home page (features-infographic.tsx) rendered correctly in Chrome but was broken in WebKit-based browsers (Safari/Epiphany):

• Platform icons painted at visibly offset positions from where the layout engine reported them (getBoundingClientRect() was correct; only the paint was wrong).
• Platform hover tooltips were oversized and clipped, anchored to the wrong position.
• The central Q hover tooltip ("What makes QVAC different?") never appeared at all.
• Icon strokes looked thicker than in Chrome.

Root cause: WebKit mis-paints HTML content inside <foreignObject> when either (a) the <foreignObject> is significantly larger than its content, or (b) the inner HTML relies on position: absolute against an explicitly-sized wrapper. The original implementation used both patterns to give tooltips room to render outside the icon's bounding box, and to anchor them with bottom: calc(50% + 48px).

How does it solve it?

Rather than fight the WebKit bug, the component is refactored to avoid the conditions that trigger it, while preserving the exact visual and interaction behavior the Chrome version had.

• Platform icons → pure SVG. The visible icon (background <circle> + nested Tabler <svg>) and its hit-zone (transparent <circle> slightly larger than the icon) are now native SVG elements. No <foreignObject> involved for the icons themselves, so the bug cannot trigger.
• Hit-zones use stroke="none". Without this, transparent hit-zone circles inherit stroke="currentColor" from the parent <svg> and paint a visible outline on top of every icon.
• Tooltips kept in <foreignObject>, but tightly sized and using natural flow. Each tooltip lives in its own conditionally-rendered <foreignObject> sized to fit the content (like the feature cards, which always rendered correctly). No more position: absolute; the platform tooltip uses flexbox (justify-content: flex-end) to pin to the bottom of its <foreignObject>, which is then positioned 8 SVG units above the icon — visually identical to the original bottom: calc(50% + 48px).
• Q hover ring restored in SVG. The original group-hover:ring-1 halo on the inner dashed ring is reproduced as a sibling <circle> at R_INNER whose stroke transitions between transparent and currentColor on hover.
• Hover state managed in React with a 120 ms grace period. Replaces the CSS group-hover bridge (which depended on DOM ancestry that no longer exists after the SVG split) and prevents the tooltip from unmounting while the cursor crosses the small gap between icon and tooltip.

Verified visually in Chrome and Epiphany (WebKit); behavior is now identical in both.

[kinsta]

Preview deployments for qvac-docs-staging ⚡️

Status	Branch preview	Commit preview
✅ Ready	Visit preview	Visit preview

Commit: ea984727d7d80b18468d269bd9f958fc96a51933

Deployment ID: 90821cc7-4f03-4118-8a58-76019010969e

Static site name: qvac-docs-staging-fazwv

[github-actions]

Tier-based Approval Status

**PR Tier:** TIER1

**Current Status:** ✅ APPROVED

**Requirements:**
- 1 Team Member approval ✅ (1/1)
- 1 Team Lead OR Management approval ✅ (1/1)



---
*This comment is automatically updated when reviews change.*

[BrunoCampana]

/review