Fix featured grid

lib/assetUtils.ts

@@ -106,7 +106,32 @@ export function governanceBookletPath(): string {
 export type FeaturePanelKey = "support" | "exercises" | "guidance" | "tools";
 
 export function featurePanelPath(key: FeaturePanelKey): string {
-  return `assets/marketing/feature-${key}.png`;
+  return `assets/marketing/feature-${key}.svg`;
+}
+
+/** Intrinsic icon bounds from Figma Feature-Grid (18632:10911). */
+export const FEATURE_PANEL_LAYOUT: Record<
+  FeaturePanelKey,
+  { width: number; height: number; panelImageClassName?: string }
+> = {
+  support: { width: 48, height: 48 },
+  exercises: { width: 55, height: 48 },
+  guidance: { width: 56, height: 39 },
+  tools: {
+    width: 50,
+    height: 47,
+    /** Figma 18632:10947 — raw asset is inverted; frame applies rotate + flip. */
+    panelImageClassName: "rotate-180 -scale-x-100",
+  },
+};
+
+export function featurePanelLayout(key: FeaturePanelKey): {
+  panelWidth: number;
+  panelHeight: number;
+  panelImageClassName?: string;
+} {
+  const { width, height, panelImageClassName } = FEATURE_PANEL_LAYOUT[key];
+  return { panelWidth: width, panelHeight: height, panelImageClassName };
 }
 
 /** Case study card artwork in `public/assets/case-study/`. */

lib/svgGrainFilter.ts

@@ -0,0 +1,3 @@
+/** feTurbulence grain masked to alpha and multiply-blended — matches HeroDecor. */
+export const SVG_GRAIN_MULTIPLY_FILTER =
+  'url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><defs><filter id="grain" filterUnits="objectBoundingBox" x="0" y="0" width="1" height="1" colorInterpolationFilters="sRGB"><feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="3" seed="7" stitchTiles="stitch" result="noise"/><feColorMatrix in="noise" result="softNoise" type="matrix" values="0.8 0 0 0 0.3 0 0.6 0 0 0.2 0 0 1.0 0 0.4 0 0 0 0.25 0"/><feComposite in="softNoise" in2="SourceAlpha" operator="in" result="maskedNoise"/><feBlend in="SourceGraphic" in2="maskedNoise" mode="multiply"/></filter></defs></svg>#grain\')';