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="/how-it-works#multi-prompt">
      <div class="fc-card-icon">
        <img src="07-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>
    <!-- ...repeat for each feature... -->
  </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; }
}

<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">...</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">
        <!-- .engine-block mini at 80px -->
      </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 */
}

<div class="feature-table-wrap">
  <table class="feature-table">
    <caption class="sr-only">Capability comparison: most AI sales
      agent platforms vs MagicBlocks</caption>
    <thead>
      <tr>
        <th scope="col">Capability</th>
        <th scope="col">Most platforms</th>
        <th scope="col" class="ft-col-mb">MagicBlocks</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Architecture</th>
        <td class="ft-col-default"
            data-mobile-eyebrow="Most platforms">
          Single prompt in a loop
        </td>
        <td class="ft-col-mb"
            data-mobile-eyebrow="MagicBlocks">
          Multi-prompt + state machine
        </td>
      </tr>
      <!-- ...4 more rows... -->
    </tbody>
  </table>
</div>

<!-- Variants:
     .feature-table--3col (default) — three columns as above
     .feature-table--compact — tighter padding (10×16) for embedding -->

.feature-table tbody td.ft-col-mb {
  background: color-mix(in oklab, var(--accent) 4%, var(--bg-paper));
  border-left: 2px solid var(--accent);
  font-weight: 500;
}
.feature-table tbody td.ft-col-default {
  color: var(--fg-soft);
  font-style: italic;
}

@media (max-width: 767px) {
  /* Collapse to card-per-row on mobile. */
  .feature-table, thead, tbody, tr, th, td { display: block; }
  .feature-table thead { display: none; }
  .feature-table tbody tr {
    border: 1px solid var(--hair); border-radius: var(--r-md);
    margin-bottom: var(--s-3);
  }
  .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;
  }
}

<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">
    <a href="#cluster-01-engine">
      <span class="cm-fb-num">01</span>
      <span class="cm-fb-label">Engine</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); }
}

<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>
    <!-- ...3 more... -->
  </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));
});