diff --git a/blocks/bus/bus.css b/blocks/bus/bus.css
new file mode 100644
index 0000000..07731d5
--- /dev/null
+++ b/blocks/bus/bus.css
@@ -0,0 +1,32 @@
+.bus {
+  overflow-x: auto;
+  margin: 1.5rem 0;
+}
+
+.bus table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.bus th,
+.bus td {
+  padding: 0.625rem 0.875rem;
+  text-align: left;
+  border: 1px solid var(--border-color, rgb(255 255 255 / 12%));
+  vertical-align: top;
+}
+
+.bus thead th {
+  background: var(--light-color, rgb(255 255 255 / 8%));
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.bus td:first-child {
+  font-weight: 600;
+}
+
+.bus tbody tr:hover td {
+  background: rgb(255 255 255 / 3%);
+}
diff --git a/blocks/bus/bus.js b/blocks/bus/bus.js
new file mode 100644
index 0000000..548fc07
--- /dev/null
+++ b/blocks/bus/bus.js
@@ -0,0 +1,24 @@
+const COLUMNS = ['Bus', 'Latency', 'Mechanism', 'Triggered By', 'Consistency Model', 'Inspect With'];
+
+export default function decorate(block) {
+  const table = document.createElement('table');
+
+  const thead = table.createTHead();
+  const headerRow = thead.insertRow();
+  COLUMNS.forEach((col) => {
+    const th = document.createElement('th');
+    th.textContent = col;
+    headerRow.append(th);
+  });
+
+  const tbody = table.createTBody();
+  [...block.children].forEach((row) => {
+    const tr = tbody.insertRow();
+    [...row.children].forEach((cell) => {
+      const td = tr.insertCell();
+      td.innerHTML = cell.innerHTML;
+    });
+  });
+
+  block.replaceChildren(table);
+}
diff --git a/blocks/metadata/metadata.js b/blocks/metadata/metadata.js
new file mode 100644
index 0000000..5c3a5c5
--- /dev/null
+++ b/blocks/metadata/metadata.js
@@ -0,0 +1,3 @@
+export default function decorate(block) {
+  (block.closest('.metadata-wrapper') || block.parentElement).hidden = true;
+}
diff --git a/blocks/video-hero/video-hero.css b/blocks/video-hero/video-hero.css
index a1b2520..f4b09e1 100644
--- a/blocks/video-hero/video-hero.css
+++ b/blocks/video-hero/video-hero.css
@@ -56,6 +56,7 @@
   width: 100%;
   margin: 0 auto;
   padding: 48px 56px;
+
   /* Dark halo behind text — keeps video vivid around edges, text readable at center */
   background: radial-gradient(ellipse 100% 100% at 50% 50%, rgb(7 13 26 / 72%) 15%, transparent 80%);
   border-radius: 12px;
@@ -85,7 +86,7 @@
 }
 
 .video-hero p {
-  color: #ddeeff;
+  color: #def;
   font-size: var(--body-font-size-m);
   max-width: 600px;
   margin: 0 auto 0.6em;
diff --git a/blocks/video-hero/video-hero.js b/blocks/video-hero/video-hero.js
index e2e9d83..49dad66 100644
--- a/blocks/video-hero/video-hero.js
+++ b/blocks/video-hero/video-hero.js
@@ -3,14 +3,15 @@ export default function decorate(block) {
 
   // Pull video src from any anchor pointing at a video file
   let videoSrc = null;
-  for (const row of rows) {
+  rows.some((row) => {
     const a = row.querySelector('a[href]');
     if (a && /\.(mp4|webm|ogg)(\?|#|$)/i.test(a.href)) {
       videoSrc = a.href;
       row.remove();
-      break;
+      return true;
     }
-  }
+    return false;
+  });
 
   // Flatten remaining rows into the content overlay div
   const content = document.createElement('div');
diff --git a/scripts/delayed.js b/scripts/delayed.js
index 28fa26c..cfb466c 100644
--- a/scripts/delayed.js
+++ b/scripts/delayed.js
@@ -1 +1,28 @@
-// add delayed functionality here
+import { loadScript } from './aem.js';
+
+const MERMAID_KEYWORDS = [
+  'flowchart', 'sequenceDiagram', 'graph ', 'gantt', 'classDiagram',
+  'stateDiagram', 'erDiagram', 'journey', 'gitGraph', 'mindmap', 'timeline',
+];
+
+const mermaidEls = [...document.querySelectorAll('pre > code')]
+  .filter((code) => {
+    const text = code.textContent.trimStart();
+    return MERMAID_KEYWORDS.some((kw) => text.startsWith(kw));
+  })
+  .map((code) => {
+    const pre = document.createElement('pre');
+    pre.className = 'mermaid';
+    // Normalize Unicode dashes that mermaid's lexer rejects inside edge labels
+    pre.textContent = code.textContent
+      .replaceAll('—', '-')
+      .replaceAll('–', '-');
+    code.parentElement.replaceWith(pre);
+    return pre;
+  });
+
+if (mermaidEls.length > 0) {
+  await loadScript('https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js');
+  window.mermaid.initialize({ startOnLoad: false, theme: 'dark' });
+  await window.mermaid.run({ nodes: mermaidEls });
+}
diff --git a/styles/lazy-styles.css b/styles/lazy-styles.css
index cfe0d0d..e29c330 100644
--- a/styles/lazy-styles.css
+++ b/styles/lazy-styles.css
@@ -77,3 +77,20 @@ main blockquote {
   background-color: rgb(0 212 200 / 20%);
   color: #fff;
 }
+
+/* Mermaid diagrams */
+pre.mermaid {
+  background: transparent;
+  border: none;
+  text-align: center;
+  padding: 1rem 0;
+}
+
+pre.mermaid::before {
+  display: none;
+}
+
+pre.mermaid svg {
+  max-width: 100%;
+  height: auto;
+}