Fix Mermaid diagram text truncation caused by section p styling

Root cause: section p { font-size: 1rem } override increased Mermaid
node label text from 14px to 16px, causing foreignObject overflow and
text clipping (e.g., "fifty-fifty" → "fifty-fi").

Solution: Added .mermaid p reset to inherit font-size/line-height/color
from parent (.nodeLabel { font-size: 14px !important }), preventing
global paragraph styles from breaking diagram layout.

Regression introduced when MDX paragraph styling was added without
scoping exclusions for SVG content.

Author: saadshahd

src/styles/global.css

@@ -236,3 +236,34 @@ pre.mermaid,
   font-family: var(--diagram-font-family) !important;
   font-size: var(--diagram-font-size-annotation) !important;
 }
+
+/* Reset paragraph styles inside Mermaid diagrams */
+/* Prevents section p { font-size: 1rem } from overriding diagram font sizes */
+.mermaid p {
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
+/* ===== MDX Native Paragraph Styling ===== */
+/* Style bare <p> tags from markdown (not inside components) */
+section p {
+  font-size: 1rem;                    /* text-base */
+  line-height: 1.75;                  /* leading-relaxed */
+  color: var(--color-text-lighter);   /* #475569 */
+  margin-bottom: 1.5rem;              /* mb-6 */
+}
+
+section p strong {
+  color: var(--color-text);
+  font-weight: 600;
+}
+
+/* Code blocks in sections */
+section pre {
+  padding: 1rem 1.5rem;               /* 16px 24px */
+  border-radius: 0.5rem;              /* 8px */
+  margin-bottom: 1.5rem;              /* mb-6 */
+}