blog: fix nested <p> hydration warning in BlogInlineCTA

Collapse the component's outer <p> into its <div className="not-prose">.
MDX was wrapping the component's children in a <p>, which landed inside
the <a>, producing a <p>-inside-<p> hydration error. The typography
classes move to the <div> with no visual change.

Author: rgbkrk

components/blog/inline-cta.tsx

@@ -12,25 +12,23 @@ export function BlogInlineCTA({ href, children, lead }: BlogInlineCTAProps) {
     href.startsWith("http://") || href.startsWith("https://");
 
   return (
-    <div className="not-prose">
-      <p className="font-body text-[0.95rem] leading-relaxed text-on-surface-variant/75">
-        {lead ? <span>{lead} </span> : null}
-        <a
-          href={href}
-          {...(isExternal
-            ? { target: "_blank", rel: "noopener noreferrer" }
-            : {})}
-          className="group inline-flex items-baseline gap-1.5 text-[#cbb5f4] underline decoration-[#a993d1]/40 decoration-from-font underline-offset-[5px] transition-colors hover:decoration-[#cbb5f4]"
+    <div className="not-prose font-body text-[0.95rem] leading-relaxed text-on-surface-variant/75">
+      {lead ? <span>{lead} </span> : null}
+      <a
+        href={href}
+        {...(isExternal
+          ? { target: "_blank", rel: "noopener noreferrer" }
+          : {})}
+        className="group inline-flex items-baseline gap-1.5 text-[#cbb5f4] underline decoration-[#a993d1]/40 decoration-from-font underline-offset-[5px] transition-colors hover:decoration-[#cbb5f4]"
+      >
+        {children}
+        <span
+          aria-hidden
+          className="inline-block translate-y-[1px] transition-transform group-hover:translate-x-0.5"
         >
-          {children}
-          <span
-            aria-hidden
-            className="inline-block translate-y-[1px] transition-transform group-hover:translate-x-0.5"
-          >
-            →
-          </span>
-        </a>
-      </p>
+          →
+        </span>
+      </a>
     </div>
   );
 }