Platform & narrative. Where the argument lives.

01 · ENGINE

The mechanism that runs the conversation.

Most AI sales agents run a single prompt in a loop. MagicBlocks runs multiple specialised prompts coordinated by a state machine — and a Guardian layer that catches what shouldn't ship.

Multi-prompt architecture

Many specialised prompts, each tuned for a job.

98% task completion vs 59% on single-prompt baselines.

Learn more →

State-machine coordination

A controller decides which prompt fires, when, and with what context.

Predictable behaviour at scale.

Learn more →

Guardian compliance layer

A separate model audits every outbound message before it sends.

Production-grade safety net. SOC 2 Type II evidence.

Learn more →

Guardrails system

Hard-coded rules the engine cannot violate.

Compliance bolted in, not bolted on.

Learn more →

Engine recommendations

The engine surfaces conversation patterns; operators review and apply.

Never “self-optimising” — always operator-in-the-loop.

Learn more →

JSON-driven scripts

Industry playbooks defined as data, not code. Edit, version, ship.

20+ industry playbooks in production.

Learn more →

<section class="feature-cluster" aria-labelledby="cluster-01-heading">
  <header class="fc-head">
    <div class="fc-head-text">
      <p class="fc-eyebrow">01 · ENGINE</p>
      <h2 class="fc-h2" id="cluster-01-heading">
        The mechanism that <em>runs the conversation.</em>
      </h2>
      <p class="fc-subhed">Most AI sales agents run a single prompt
        in a loop. MagicBlocks runs multiple specialised prompts...</p>
    </div>
    <div class="fc-anchor-visual" aria-hidden="true">
      <!-- Anchor visual: .engine-block / .scoreboard / .happa-arc /
           .journey-map / .guardian-shield / .channel-orbit thumbnailed
           at 120px. From chapter 11. -->
    </div>
  </header>

  <div class="fc-grid">
    <a class="fc-card is-linked" href="#" aria-label="Multi-prompt architecture — learn more">
      <div class="fc-card-icon"><img src="/icons/ink-light/multi-prompt.svg" alt="" width="28" height="28"></div>
      <h3 class="fc-card-name">Multi-prompt architecture</h3>
      <p class="fc-card-claim">Many specialised prompts, each tuned for a job.</p>
      <p class="fc-card-proof">98% task completion vs 59% on single-prompt baselines.</p>
      <span class="fc-card-deeplink">Learn more →</span>
    </a>

    <a class="fc-card is-linked" href="#" aria-label="State-machine coordination — learn more">
      <div class="fc-card-icon"><img src="/icons/ink-light/state-machine.svg" alt="" width="28" height="28"></div>
      <h3 class="fc-card-name">State-machine coordination</h3>
      <p class="fc-card-claim">A controller decides which prompt fires, when, and with what context.</p>
      <p class="fc-card-proof">Predictable behaviour at scale.</p>
      <span class="fc-card-deeplink">Learn more →</span>
    </a>

    <a class="fc-card is-linked" href="#" aria-label="Guardian compliance layer — learn more">
      <div class="fc-card-icon"><img src="/icons/ink-light/guardian-shield.svg" alt="" width="28" height="28"></div>
      <h3 class="fc-card-name">Guardian compliance layer</h3>
      <p class="fc-card-claim">A separate model audits every outbound message before it sends.</p>
      <p class="fc-card-proof">Production-grade safety net. SOC 2 Type II evidence.</p>
      <span class="fc-card-deeplink">Learn more →</span>
    </a>

    <a class="fc-card is-linked" href="#" aria-label="Guardrails system — learn more">
      <div class="fc-card-icon"><img src="/icons/ink-light/guardrails.svg" alt="" width="28" height="28"></div>
      <h3 class="fc-card-name">Guardrails system</h3>
      <p class="fc-card-claim">Hard-coded rules the engine cannot violate.</p>
      <p class="fc-card-proof">Compliance bolted <em>in</em>, not bolted on.</p>
      <span class="fc-card-deeplink">Learn more →</span>
    </a>

    <a class="fc-card is-linked" href="#" aria-label="Engine recommendations — learn more">
      <div class="fc-card-icon"><img src="/icons/ink-light/recommendations.svg" alt="" width="28" height="28"></div>
      <h3 class="fc-card-name">Engine recommendations</h3>
      <p class="fc-card-claim">The engine surfaces conversation patterns; operators review and apply.</p>
      <p class="fc-card-proof">Never &ldquo;self-optimising&rdquo; &mdash; always operator-in-the-loop.</p>
      <span class="fc-card-deeplink">Learn more →</span>
    </a>

    <a class="fc-card is-linked" href="#" aria-label="JSON-driven scripts — learn more">
      <div class="fc-card-icon"><img src="/icons/ink-light/json.svg" alt="" width="28" height="28"></div>
      <h3 class="fc-card-name">JSON-driven scripts</h3>
      <p class="fc-card-claim">Industry playbooks defined as data, not code. Edit, version, ship.</p>
      <p class="fc-card-proof">20+ industry playbooks in production.</p>
      <span class="fc-card-deeplink">Learn more →</span>
    </a>
  </div>
</section>

<!-- Variants:
     .feature-cluster--3up (default), --2up, --4up.
     Cards without a deeplink: omit class="is-linked", use <article>
     instead of <a>, no hover lift. -->

.feature-cluster { display: grid; gap: var(--s-6); }
.fc-head { display: grid; grid-template-columns: 1fr auto; gap: var(--s-5); }
.fc-eyebrow { font: 500 11px var(--f-mono); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--fg-faint); }
.fc-h2 { font: 600 32px/1.15 var(--f-display); letter-spacing: -0.02em; }
.fc-h2 em { font-family: var(--f-serif); font-style: italic;
  color: var(--accent-text); font-variation-settings: "SOFT" 80; }
.fc-subhed { font: 400 17px/1.55 var(--f-body); color: var(--fg-soft); }

.fc-grid { display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }

.fc-card { background: var(--bg-paper); border: 1px solid var(--hair);
  border-radius: var(--r-md); padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
  text-decoration: none; color: inherit; position: relative;
  transition: transform .16s, box-shadow .16s, border-color .16s; }
.fc-card.is-linked:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(25, 30, 50, 0.12);
  border-color: color-mix(in oklab, var(--accent) 25%, var(--hair)); }
.fc-card.is-linked::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .16s; }
.fc-card.is-linked:hover::before { transform: scaleY(1); }

@media (max-width: 1023px) {
  .fc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .fc-grid { grid-template-columns: 1fr; }
  .fc-anchor-visual { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-card.is-linked:hover { transform: none; }
}

import { FeatureCluster } from "@magicblocksai/ui";

<FeatureCluster
  eyebrow="01 · ENGINE"
  title={<>The mechanism that <em>runs the conversation.</em></>}
  sub="Most AI sales agents run a single prompt in a loop. MagicBlocks runs many specialised prompts coordinated by a state machine."
  columns="3"
  cards={[
    {
      icon: <img src="/icons/multi-prompt.svg" alt="" width={28} height={28} />,
      name: "Multi-prompt architecture",
      claim: "Many specialised prompts, each tuned for a job.",
      proof: "98% task completion vs 59% on single-prompt baselines.",
      href: "/how-it-works#multi-prompt",
    },
    // …5 more cards…
  ]}
/>

<section class="contrast-pair" aria-labelledby="contrast-01-heading">
  <header class="cp-head">
    <p class="cp-eyebrow">01 · ARCHITECTURE</p>
    <h2 class="cp-h2" id="contrast-01-heading">
      Multi-prompt. <em>Coordinated by a state machine.</em>
    </h2>
  </header>
  <div class="cp-body">
    <p>The category default is a single, sprawling prompt...</p>
    <p>MagicBlocks runs a different mechanism...</p>
    <p>It's not a bigger model. It's a better mechanism.</p>
  </div>
  <div class="cp-pair">
    <article class="cp-panel cp-panel--left">
      <p class="cp-panel-eyebrow">THE CATEGORY DEFAULT</p>
      <h3 class="cp-panel-title">One prompt, one loop</h3>
      <div class="cp-panel-visual" aria-hidden="true">
        <svg viewBox="0 0 80 80" width="80" height="80">
          <circle cx="40" cy="40" r="28" fill="none" stroke="var(--fg-soft)" stroke-width="2" stroke-dasharray="4 3"/>
          <path d="M40 12 A28 28 0 0 1 65 35" fill="none" stroke="var(--fg-soft)" stroke-width="2"/>
          <path d="M61 31 L65 35 L62 40" stroke="var(--fg-soft)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
          <circle cx="40" cy="40" r="8" fill="var(--fg-soft)" opacity="0.5"/>
        </svg>
      </div>
      <p class="cp-panel-stat">59% task completion</p>
    </article>
    <article class="cp-panel cp-panel--right">
      <p class="cp-panel-eyebrow">THE MAGICBLOCKS WAY</p>
      <h3 class="cp-panel-title">Many prompts, one engine</h3>
      <div class="cp-panel-visual" aria-hidden="true">
        <!-- mini engine-block -->
        <svg viewBox="0 0 80 80" width="80" height="80">
          <rect x="6"  y="6"  width="32" height="32" rx="4" fill="var(--ink)"/>
          <rect x="42" y="6"  width="32" height="32" rx="4" fill="var(--accent)"/>
          <rect x="6"  y="42" width="32" height="32" rx="4" fill="var(--accent)" opacity="0.7"/>
          <rect x="42" y="42" width="32" height="32" rx="4" fill="var(--ink)" opacity="0.85"/>
          <circle cx="22" cy="22" r="2.5" fill="var(--paper)"/>
          <circle cx="58" cy="22" r="2.5" fill="var(--paper)"/>
          <circle cx="22" cy="58" r="2.5" fill="var(--paper)"/>
          <circle cx="58" cy="58" r="2.5" fill="var(--paper)"/>
        </svg>
      </div>
      <p class="cp-panel-stat">98% task completion</p>
    </article>
  </div>
  <a class="cp-cta" href="/how-it-works">See the Engine →</a>
</section>

<!-- Variants:
     .contrast-pair--narrative (default) — header + body above pair
     .contrast-pair--standalone — pair only, no header
     .contrast-pair--reversed — accent panel on the LEFT (rare)

     Alternative content per panel: bullet list (.cp-panel-bullets)
     instead of visual + stat. Pick one per panel, not both. -->

.contrast-pair { display: grid; gap: var(--s-6); max-width: 920px; }
.cp-h2 { font: 600 32px/1.15 var(--f-display); letter-spacing: -0.02em; }
.cp-h2 em { font-family: var(--f-serif); font-style: italic;
  color: var(--accent-text); font-variation-settings: "SOFT" 80; }

.cp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }

.cp-panel--left { background: var(--hair-soft);
  border: 1px solid var(--hair); }
.cp-panel--right { background: color-mix(in oklab, var(--accent) 4%, var(--bg-paper));
  border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent); }
.cp-panel--right:hover { transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 40%, transparent); }

@media (max-width: 767px) {
  .cp-pair { grid-template-columns: 1fr; }
  /* on mobile, semantic order = visual order = persuasive arc:
     left panel first, right panel second */
}

import { ContrastPair } from "@magicblocksai/ui";

<ContrastPair
  eyebrow="01 · ARCHITECTURE"
  title={<>Multi-prompt. <em>Coordinated by a state machine.</em></>}
  body={
    <>
      <p>The category default is a single, sprawling prompt running in a loop…</p>
      <p>MagicBlocks runs a different mechanism. Multiple specialised prompts…</p>
    </>
  }
  left={{
    eyebrow: "THE CATEGORY DEFAULT",
    title: "One prompt, one loop",
    stat: "59% task completion",
  }}
  right={{
    eyebrow: "THE MAGICBLOCKS WAY",
    title: "Many prompts, one engine",
    stat: "98% task completion",
  }}
  cta={<a className="cp-cta" href="/how-it-works">See the Engine →</a>}
/>

<table class="feature-table">
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col">Most platforms</th>
      <th scope="col" class="is-ours">MagicBlocks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Architecture</th>
      <td data-mobile-eyebrow="Most platforms">Single prompt in a loop</td>
      <td class="is-ours" data-mobile-eyebrow="MagicBlocks">Multi-prompt + state machine</td>
    </tr>
    <tr>
      <th scope="row">Memory</th>
      <td data-mobile-eyebrow="Most platforms">Session-scoped or none</td>
      <td class="is-ours" data-mobile-eyebrow="MagicBlocks">CDP-native, cross-channel, persistent</td>
    </tr>
    <tr>
      <th scope="row">Channels</th>
      <td data-mobile-eyebrow="Most platforms">One primary, others bolted on</td>
      <td class="is-ours" data-mobile-eyebrow="MagicBlocks">SMS &middot; Voice &middot; Email &middot; Chat &middot; DMs</td>
    </tr>
    <tr>
      <th scope="row">Compliance</th>
      <td data-mobile-eyebrow="Most platforms">Marketing claims</td>
      <td class="is-ours" data-mobile-eyebrow="MagicBlocks">SOC 2 Type II + ISO 27001 + Guardian</td>
    </tr>
    <tr>
      <th scope="row">Build provenance</th>
      <td data-mobile-eyebrow="Most platforms">Engineering team's bet</td>
      <td class="is-ours" data-mobile-eyebrow="MagicBlocks">Built by operators who ran the businesses we serve</td>
    </tr>
  </tbody>
</table>

/* Same canonical .compare pattern as §9.8 — green-tinted MagicBlocks
   column to read as a positive choice rather than aggressive contrast. */
.feature-table {
  width: 100%; border-collapse: collapse;
  font: 400 14px/1.4 var(--f-body);
}
.feature-table th, .feature-table td {
  padding: var(--s-3) var(--s-4); text-align: center;
  border-bottom: 1px solid var(--hair);
}
.feature-table tbody th { text-align: left; }
.feature-table .is-ours {
  background: var(--success-soft);
  color: var(--success-text);
  font-weight: 600;
}

@media (max-width: 767px) {
  /* Collapse to card-per-row; data-mobile-eyebrow surfaces column label. */
  .feature-table, thead, tbody, tr, th, td { display: block; }
  .feature-table thead { display: none; }
  .feature-table tbody td::before {
    content: attr(data-mobile-eyebrow);
    display: block; font: 600 10px var(--f-mono);
    text-transform: uppercase; color: var(--fg-faint);
    margin-bottom: 6px;
  }
}

import { FeatureTable } from "@magicblocksai/ui";

<FeatureTable
  caption="Capability comparison: most AI sales agents vs MagicBlocks"
  columns={["", "Most platforms", "MagicBlocks"]}
  rows={[
    {
      label: "Architecture",
      neutral: "Single prompt in a loop",
      ours: "Multi-prompt + state machine",
    },
    {
      label: "Memory",
      neutral: "Session-scoped or none",
      ours: "CDP-native, cross-channel, persistent",
    },
    // …3 more rows…
  ]}
/>

<div class="cluster-map" role="navigation"
     aria-label="Platform cluster overview">
  <svg viewBox="0 0 520 520" role="img"
       aria-labelledby="cluster-map-title">
    <title id="cluster-map-title">Platform cluster overview</title>

    <!-- 6 connector lines from centre to each hex -->
    <line class="cm-connector" x1="260" y1="260" x2="260" y2="100"/>
    ...

    <!-- 6 hexes, each as <a> with aria-label -->
    <a href="#cluster-01-engine" aria-label="Cluster 01 — Engine">
      <polygon class="cm-hex" points="260,40 332,76 332,144 260,180 188,144 188,76"/>
      <text class="cm-hex-num"   x="260" y="92">01</text>
      <text class="cm-hex-label" x="260" y="120">Engine</text>
    </a>
    ...

    <!-- Centre node with brand mark -->
    <circle class="cm-center" cx="260" cy="260" r="36"/>
    <text class="cm-center-label" x="260" y="260">MagicBlocks</text>
  </svg>

  <!-- Mobile fallback: 2×3 chip-grid with same anchors -->
  <div class="cm-fallback" role="navigation" aria-label="Platform cluster overview (mobile)">
    <a href="#cluster-01-engine"><span class="cm-fb-num">01</span><span class="cm-fb-label">Engine</span></a>
    <a href="#cluster-02-channels"><span class="cm-fb-num">02</span><span class="cm-fb-label">Channels</span></a>
    <a href="#cluster-03-conversation"><span class="cm-fb-num">03</span><span class="cm-fb-label">Conversation</span></a>
    <a href="#cluster-04-memory"><span class="cm-fb-num">04</span><span class="cm-fb-label">Memory</span></a>
    <a href="#cluster-05-trust"><span class="cm-fb-num">05</span><span class="cm-fb-label">Trust</span></a>
    <a href="#cluster-06-operations"><span class="cm-fb-num">06</span><span class="cm-fb-label">Operations</span></a>
  </div>
</div>

.cluster-map { width: 100%; max-width: 520px;
  aspect-ratio: 1; margin: 0 auto; }

.cm-hex { fill: var(--bg-paper); stroke: var(--hair);
  stroke-width: 1.5; }
.cluster-map a:hover .cm-hex {
  fill: color-mix(in oklab, var(--accent) 8%, var(--bg-paper));
  stroke: color-mix(in oklab, var(--accent) 50%, transparent); }
.cluster-map a:focus-visible .cm-hex { stroke-width: 2.5; }

.cm-connector { stroke: var(--hair); stroke-width: 1;
  animation: cm-pulse 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .cm-connector { animation: none; }
}

@media (max-width: 600px) {
  .cluster-map > svg { display: none; }
  .cm-fallback {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3); }
}

import { ClusterMap } from "@magicblocksai/ui";

<ClusterMap
  svgTitle="Platform cluster overview — 6 clusters arranged around a centre"
  ariaLabel="Platform cluster overview"
  centre={{ label: "MagicBlocks" }}
  clusters={[
    { id: "engine",       label: "Engine",       href: "#engine",       position: "n"  },
    { id: "channels",     label: "Channels",     href: "#channels",     position: "ne" },
    { id: "conversation", label: "Conversation", href: "#conversation", position: "se" },
    { id: "memory",       label: "Memory",       href: "#memory",       position: "s"  },
    { id: "trust",        label: "Trust",        href: "#trust",        position: "sw" },
    { id: "operations",   label: "Operations",   href: "#operations",   position: "nw" },
  ]}
/>

<nav class="counter-rail" aria-label="Page sections">
  <ul>
    <li>
      <a href="#difference-01-architecture" aria-current="location">
        <span class="cr-num">01</span>
        <span class="cr-label">Architecture</span>
      </a>
    </li>
    <li>
      <a href="#difference-02-memory">
        <span class="cr-num">02</span>
        <span class="cr-label">Memory</span>
      </a>
    </li>
    <li>
      <a href="#difference-03-production">
        <span class="cr-num">03</span>
        <span class="cr-label">Production rigor</span>
      </a>
    </li>
    <li>
      <a href="#difference-04-provenance">
        <span class="cr-num">04</span>
        <span class="cr-label">Provenance</span>
      </a>
    </li>
    <li>
      <a href="#difference-05-persistence">
        <span class="cr-num">05</span>
        <span class="cr-label">Persistence philosophy</span>
      </a>
    </li>
  </ul>
</nav>

.counter-rail { display: inline-flex; flex-direction: column;
  position: relative; padding: var(--s-2) 0; }
.counter-rail::before {
  content: ""; position: absolute;
  left: 16px; top: 16px; bottom: 16px;
  width: 1px; background: var(--hair);
}

.cr-num { width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-paper); border: 1px solid var(--hair);
  font: 500 13px var(--f-mono); display: inline-flex;
  align-items: center; justify-content: center; }

/* Active state — accent fill + paper text + soft shimmer */
.counter-rail a[aria-current="location"] .cr-num {
  background: var(--accent); color: var(--paper);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);
  animation: cr-shimmer 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .counter-rail a[aria-current="location"] .cr-num { animation: none; }
}

// IntersectionObserver — set aria-current on the rail link whose
// section is currently in the viewport. Idempotent on DOMContentLoaded.
document.addEventListener('DOMContentLoaded', () => {
  const rail = document.querySelector('.counter-rail');
  if (!rail) return;
  const links = Array.from(rail.querySelectorAll('a'));
  const sections = links.map(a => document.querySelector(a.getAttribute('href')))
                        .filter(Boolean);
  if (sections.length === 0) return;

  const setActive = (idx) => {
    links.forEach((a, i) => {
      if (i === idx) a.setAttribute('aria-current', 'location');
      else a.removeAttribute('aria-current');
    });
  };

  const io = new IntersectionObserver((entries) => {
    // Pick the entry closest to the top of the viewport
    const visible = entries.filter(e => e.isIntersecting);
    if (visible.length === 0) return;
    visible.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
    const idx = sections.indexOf(visible[0].target);
    if (idx !== -1) setActive(idx);
  }, { threshold: 0.25, rootMargin: '-20% 0px -60% 0px' });

  sections.forEach(s => io.observe(s));
});

import { CounterRail } from "@magicblocksai/ui";

<CounterRail
  ariaLabel="Page sections"
  items={[
    { id: "difference-01-architecture", label: "Architecture" },
    { id: "difference-02-memory",       label: "Memory" },
    { id: "difference-03-production",   label: "Production rigor" },
    { id: "difference-04-provenance",   label: "Provenance" },
    { id: "difference-05-persistence",  label: "Persistence philosophy" },
  ]}
// IntersectionObserver auto-syncs the active circle. Pass `active={n}`
// to override and drive the highlight from the parent.
/>