diff --git a/components/markdown-content.tsx b/components/markdown-content.tsx
index 6280a81..260efb4 100644
--- a/components/markdown-content.tsx
+++ b/components/markdown-content.tsx
@@ -215,11 +215,13 @@ const components: Components = {
     const firstHast = node?.children?.[0];
     const isKeyValue =
       firstHast?.type === "element" &&
-      (firstHast as Element).tagName === "strong";
+      firstHast.tagName === "strong";
 
     if (isKeyValue) {
-      const keyText = extractHastText(firstHast as Element);
-      // Skip the first rendered child (the <strong>) — we replace it with KeyBadge.
+      const keyText = extractHastText(firstHast);
+      // Skip index 0 (the rendered <strong> element) — works because react-markdown
+      // emits strong as child[0] for tight lists with the `- **Key:** value` pattern.
+      // Tight lists only: loose lists wrap content in <p>, changing the HAST structure.
       const rest = React.Children.toArray(children).slice(1);
       return (
         <li
@@ -253,25 +255,28 @@ const components: Components = {
     );
   },
 
-  a: ({ href, children }) => (
-    <a
-      href={href}
-      target={href && /^https?:\/\//.test(href) ? "_blank" : undefined}
-      rel={href && /^https?:\/\//.test(href) ? "noopener noreferrer" : undefined}
-      style={{
-        background: "linear-gradient(90deg, #facc15, #60a5fa)",
-        WebkitBackgroundClip: "text",
-        WebkitTextFillColor: "transparent",
-        backgroundClip: "text",
-        fontWeight: 600,
-        textDecoration: "underline",
-        textDecorationColor: "rgba(250, 204, 21, 0.5)",
-        cursor: "pointer",
-      }}
-    >
-      {children}
-    </a>
-  ),
+  a: ({ href, children }) => {
+    const isExternal = !!href && /^https?:\/\//.test(href);
+    return (
+      <a
+        href={href}
+        target={isExternal ? "_blank" : undefined}
+        rel={isExternal ? "noopener noreferrer" : undefined}
+        style={{
+          background: "linear-gradient(90deg, #facc15, #60a5fa)",
+          WebkitBackgroundClip: "text",
+          WebkitTextFillColor: "transparent",
+          backgroundClip: "text",
+          fontWeight: 600,
+          textDecoration: "underline",
+          textDecorationColor: "rgba(250, 204, 21, 0.5)",
+          cursor: "pointer",
+        }}
+      >
+        {children}
+      </a>
+    );
+  },
 
   strong: ({ children }) => (
     <strong style={{ color: "#fde68a", fontWeight: 700 }}>{children}</strong>