feat(faq): chemistry glossary — 'Brush up on your chemistry while managing your game server'

Public-facing brand asset (Oracle + Commander): a glossary section on the FAQ
page mapping each chemistry term to its real role in Corrosion, plus the
chemistry-true pipeline as a flow strip.

- 8-term table (Term / Chemistry meaning / In Corrosion): Catalyst, re-Agent,
  Substrate, Formulae, Reaction, Compound, Lab Notes, The Exchange.
- Substrate is the host/bare-metal SURFACE servers run on — NOT the 'automation
  layer' (corrected the drift the Commander rejected; re-Agent installs on it,
  Reactions execute against it).
- Flow strip + closer: Formula defines -> Catalyst kicks off -> re-Agent runs it
  on the Substrate as a Reaction -> Lab Notes record the result.

Verified live via Playwright on the dev server (marketing host): table, flow
strip, and closer all render correctly; no errors from the page.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/views/marketing/FaqView.vue

@@ -152,6 +152,58 @@ const groups: FaqGroup[] = [
   },
 ]
 
+interface ChemTerm {
+  term: string
+  science: string
+  role: string
+}
+
+const chemistry: ChemTerm[] = [
+  {
+    term: 'Catalyst',
+    science: 'Speeds up a reaction without being consumed',
+    role: 'The control panel — the operator console where you manage servers, players, plugins, files, wipes, and automation.',
+  },
+  {
+    term: 're-Agent',
+    science: 'A reagent causes or takes part in a chemical reaction',
+    role: 'The host connector you install on the Substrate — it links your machine securely to Catalyst and runs its commands.',
+  },
+  {
+    term: 'Substrate',
+    science: 'The material or surface on which a reaction takes place',
+    role: 'The host / bare-metal surface where your game servers actually run — native processes on your own Windows or Linux box.',
+  },
+  {
+    term: 'Formulae',
+    science: 'A formula describes the ingredients and structure of a compound or reaction',
+    role: 'Deployment recipes — one per game (Rust, Dune, Conan, Soulmask, and more) that define what a server should be.',
+  },
+  {
+    term: 'Reaction',
+    science: 'A process where substances transform',
+    role: 'A job executing against the Substrate — a wipe, restart, update, deploy, or backup.',
+  },
+  {
+    term: 'Compound',
+    science: 'A combination of elements bonded together',
+    role: 'A grouped set of runtime services that run together as one stack (a Dune battlegroup is a Compound).',
+  },
+  {
+    term: 'Lab Notes',
+    science: 'Recorded observations and results from an experiment',
+    role: 'Logs, audit history, and job results — what happened, when, and to what.',
+  },
+  {
+    term: 'The Exchange',
+    science: 'Ion exchange transfers ions between materials',
+    role: 'The Corrosion-native marketplace — items, VIP packages, and automated in-game delivery.',
+  },
+]
+
+// The chemistry-true pipeline, rendered as a flow strip under the table.
+const flow = ['Formulae', 'Catalyst', 're-Agent', 'Substrate', 'Reaction', 'Lab Notes']
+
 const openKey = ref<string | null>(null)
 
 function toggle(key: string): void {
@@ -254,6 +306,55 @@ onUnmounted(() => { io?.disconnect() })
     </div>
   </section>
 
+  <!-- CHEMISTRY GLOSSARY -->
+  <section class="sec" id="chemistry">
+    <div class="wrap">
+      <div class="sec__head reveal">
+        <span class="eyebrow">Glossary</span>
+        <h2 class="title">Brush up on your chemistry while managing your game server</h2>
+        <p class="lead">
+          Corrosion uses a chemistry-inspired naming system because managing game servers is all
+          about controlled reactions — deploying, updating, wiping, automating, and recovering
+          complex systems without letting them melt down.
+        </p>
+      </div>
+
+      <div class="glossary reveal">
+        <div class="glossary__row glossary__row--head">
+          <span>Term</span>
+          <span>Chemistry meaning</span>
+          <span>In Corrosion</span>
+        </div>
+        <div v-for="t in chemistry" :key="t.term" class="glossary__row">
+          <span class="glossary__term">{{ t.term }}</span>
+          <span class="glossary__sci">{{ t.science }}</span>
+          <span class="glossary__role">{{ t.role }}</span>
+        </div>
+      </div>
+
+      <div class="glossary__foot reveal">
+        <p class="glossary__note">
+          You don't need a chemistry degree to use Corrosion. The names are here to make the
+          platform memorable — and to give each part of the system a clear job.
+        </p>
+
+        <div class="flow" aria-hidden="true">
+          <template v-for="(step, i) in flow" :key="step">
+            <span class="flow__step">{{ step }}</span>
+            <span v-if="i < flow.length - 1" class="flow__arr">→</span>
+          </template>
+        </div>
+
+        <p class="glossary__plain">
+          <strong>How it fits together:</strong> a <strong>Formula</strong> defines what should
+          happen, <strong>Catalyst</strong> kicks it off, <strong>re-Agent</strong> carries it out
+          on the <strong>Substrate</strong> as a <strong>Reaction</strong>, and
+          <strong>Lab Notes</strong> record the result.
+        </p>
+      </div>
+    </div>
+  </section>
+
   <!-- SUPPORT CTA -->
   <section class="sec" id="support-cta" style="border-bottom:none">
     <div class="wrap">
@@ -350,4 +451,80 @@ onUnmounted(() => { io?.disconnect() })
   color: var(--text-tertiary);
   line-height: 1.65;
 }
+
+/* Chemistry glossary */
+.glossary {
+  max-width: 920px;
+  margin: 0 auto;
+  background: var(--surface-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--ring-default);
+  overflow: hidden;
+}
+.glossary__row {
+  display: grid;
+  grid-template-columns: 150px 1.05fr 1.6fr;
+  gap: 18px;
+  padding: 15px 20px;
+  border-top: 1px solid var(--border-subtle);
+  align-items: start;
+}
+.glossary__row:first-child { border-top: none; }
+.glossary__row--head {
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: 600;
+  color: var(--text-muted);
+  background: var(--surface-raised-2);
+}
+.glossary__term { font-weight: 700; color: var(--accent-text); font-size: var(--text-sm); }
+.glossary__sci { font-size: var(--text-sm); color: var(--text-tertiary); font-style: italic; line-height: 1.55; }
+.glossary__role { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }
+
+.glossary__foot {
+  max-width: 920px;
+  margin: 22px auto 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.glossary__note { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.65; margin: 0; }
+.flow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 4px 0;
+}
+.flow__step {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--accent-text);
+  background: var(--accent-soft);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+  padding: 6px 12px;
+  border-radius: var(--radius-md);
+  white-space: nowrap;
+}
+.flow__arr { color: var(--text-muted); font-size: var(--text-sm); }
+.glossary__plain {
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+  line-height: 1.65;
+  margin: 0;
+  padding: 14px 16px;
+  background: var(--accent-soft);
+  border-radius: var(--radius-md);
+  box-shadow: inset 0 0 0 1px var(--accent-border);
+}
+.glossary__plain strong { color: var(--accent-text); }
+
+@media (max-width: 720px) {
+  .glossary__row { grid-template-columns: 1fr; gap: 5px; padding: 16px; }
+  .glossary__row--head { display: none; }
+  .glossary__sci::before { content: 'Chemistry — '; color: var(--text-muted); font-style: normal; }
+  .glossary__role::before { content: 'In Corrosion — '; color: var(--text-muted); }
+}
 </style>