Chapter 09 / 12 · Content blocks

Content blocks

Page-level compositions built from the primitives. Hero sections, feature grids, logo walls, testimonial strips, CTA blocks, stats bands, FAQs, and the marketing footer — each ready to drop into a landing page.

9.1 Hero section

The top of a marketing page. Warm cream surface with two soft radial blooms (pink + peach), an eyebrow pill, a large display heading with Fraunces-italic pink accent, a lede, dual CTAs, and social-proof meta.

Marketing hero

.hero

Fraunces italic picks out the emotional phrase ('human-feeling'). Pink radial bloom sits top-right; peach warms the bottom-left. Title uses clamp() for responsive scaling.

AI sales agents · v3

Every lead gets a human-feeling
conversation within seconds.

MagicBlocks runs AI sales agents that engage, qualify, and book meetings across chat, email, SMS and voice — so no inbound lead gets left on read.

Book a demo Watch a 2-min walkthrough

AC MR JP

4.8/5 from 240+ sales teams · trusted by mortgage, finance & home-services leaders.

<section class="hero">
  <div class="hero-inner">
    <span class="hero-eyebrow"><span class="hero-eyebrow-dot"></span> AI sales agents <span class="mono">·</span> v3</span>
    <h1 class="hero-title">
      Every lead gets a <em>human-feeling</em><br>
      conversation within seconds.
    </h1>
    <p class="hero-lede">MagicBlocks runs AI sales agents that engage, qualify, and book meetings across chat, email, SMS and voice — so no inbound lead gets left on read.</p>
    <div class="hero-actions">
      <a href="#" class="hero-cta">Book a demo <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
      <a href="#" class="hero-link">Watch a 2-min walkthrough</a>
    </div>
    <div class="hero-meta">
      <div class="hero-avs">
        <span class="av av-sm" style="background:var(--info-soft); color: var(--info-text);">AC</span>
        <span class="av av-sm" style="background:#FFE2EC; color:var(--accent-text);">MR</span>
        <span class="av av-sm" style="background:#DDEFDD; color:#1E6B44;">JP</span>
      </div>
      <div class="hero-meta-copy">
        <strong>4.8/5</strong> from 240+ sales teams &middot; trusted by mortgage, finance &amp; home-services leaders.
      </div>
    </div>
  </div>
  <div class="hero-bloom"></div>
</section>

.hero {
  position: relative;
  padding: var(--s-11) var(--s-6);
  background: var(--warm-3);
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  /* pinned warm surface — rescope type tokens to ink so copy stays legible in dark */
  --fg:      var(--ink);
  --fg-soft: color-mix(in oklab, var(--ink) 68%, transparent);
  --fg-dim:  color-mix(in oklab, var(--ink) 48%, transparent);
  --hair:    rgba(25, 30, 50, 0.09);
  color: var(--fg);
}
.hero-bloom {
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 400px at 80% 20%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 60%),
    radial-gradient(500px 380px at 10% 90%, color-mix(in oklab, #FFC6A5 60%, transparent), transparent 65%);
  pointer-events: none;
  z-index: -1;
}
.hero-inner { max-width: 720px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 12px 5px 10px;
  background: var(--bg-paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  font: 500 12px/1 var(--f-mono);
  color: var(--fg);
  letter-spacing: 0.02em;
  margin-bottom: var(--s-5);
}
.hero-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hero-title {
  font: 600 clamp(40px, 5.4vw, 64px)/1.03 var(--f-display);
  letter-spacing: -0.025em;
  color: var(--fg);
  margin: 0 0 var(--s-5);
}
.hero-title em {
  font-family: var(--f-italic); font-style: italic; font-weight: 400;
  color: var(--accent-text); font-variation-settings: "SOFT" 80;
}
.hero-lede {
  font: 400 19px/1.55 var(--f-body);
  color: var(--fg-soft);
  margin: 0 0 var(--s-6);
  max-width: 560px;
}
.hero-actions { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; margin-bottom: var(--s-6); }
.hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: var(--paper);
  font: 600 15px/1 var(--f-display);
  padding: 14px 22px;
  border-radius: var(--r-pill);
  text-decoration: none;
  box-shadow: var(--sh-pink);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.hero-cta:hover { transform: translateY(-2px); color: var(--paper); box-shadow: 0 12px 28px color-mix(in oklab, var(--accent) 45%, transparent); }
.hero-link {
  color: var(--fg); text-decoration: none;
  font: 500 14.5px/1 var(--f-body);
  padding: 10px 4px;
  border-bottom: 1px solid currentColor;
}
.hero-link:hover { color: var(--accent-text); }
.hero-meta { display: flex; align-items: center; gap: var(--s-3); }
.hero-avs { display: inline-flex; }
.hero-avs .av { margin-left: -6px; box-shadow: 0 0 0 2px var(--warm-3); }
.hero-avs .av:first-child { margin-left: 0; }
.hero-meta-copy { font: 400 13.5px/1.5 var(--f-body); color: var(--fg-soft); }
.hero-meta-copy strong { color: var(--fg); font-weight: 600; }

9.2 Feature grid

Three-across (two-across on tablet, one on phone) grid of paper cards. Each card gets a coloured icon chip from the palette. Icon colour rotates through pink → blue → green → amber → purple → ink so no single chroma dominates.

3-column feature grid

.feat-grid

Centred header with pink eyebrow, then the 6-item grid. Lift on hover with a subtle elevation change.

Platform

Everything an inbound team needs,
minus the bloat.

Agents that feel human, routing that respects intent, and handoffs that don't drop the ball.

Conversations across channels

Chat, email, SMS and voice — one agent, one memory, one consistent tone.

Intent-aware routing

Agents detect urgency and hand off to a human the moment a conversation warrants it.

Speed-to-lead in seconds

Every inbound gets engaged within 30 seconds, 24/7 — no queue, no cold replies.

Qualification that converts

Ask the right questions in the right order. Pre-sell, don't interrogate.

Integrations that stay in sync

Two-way CRM sync so reps see the full thread and pick up where the agent left off.

Guardrails by default

Tone rules, compliance phrases, escalation triggers and quiet-hours, all editable.

<section class="feat">
  <header class="feat-head">
    <p class="feat-eyebrow mono">Platform</p>
    <h2 class="feat-title">Everything an inbound team needs,<br>minus the bloat.</h2>
    <p class="feat-lede">Agents that feel human, routing that respects intent, and handoffs that don't drop the ball.</p>
  </header>
  <div class="feat-grid">
    <div class="feat-item">
      <div class="feat-ic feat-ic-pink"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
      <h3>Conversations across channels</h3>
      <p>Chat, email, SMS and voice — one agent, one memory, one consistent tone.</p>
    </div>
    <div class="feat-item">
      <div class="feat-ic feat-ic-blue"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="19" r="3"/><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"/><circle cx="18" cy="5" r="3"/></svg></div>
      <h3>Intent-aware routing</h3>
      <p>Agents detect urgency and hand off to a human the moment a conversation warrants it.</p>
    </div>
    <div class="feat-item">
      <div class="feat-ic feat-ic-green"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m13 2-3 10h6l-3 10L6 14h6z"/></svg></div>
      <h3>Speed-to-lead in seconds</h3>
      <p>Every inbound gets engaged within 30 seconds, 24/7 — no queue, no cold replies.</p>
    </div>
    <div class="feat-item">
      <div class="feat-ic feat-ic-amber"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 14 9 11M3 12a9 9 0 0 1 18 0"/><circle cx="12" cy="14" r="1.5"/></svg></div>
      <h3>Qualification that converts</h3>
      <p>Ask the right questions in the right order. Pre-sell, don't interrogate.</p>
    </div>
    <div class="feat-item">
      <div class="feat-ic feat-ic-purple"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 2v6M15 2v6M7 8h10l-1 6a4 4 0 0 1-8 0z"/><path d="M12 18v4"/></svg></div>
      <h3>Integrations that stay in sync</h3>
      <p>Two-way CRM sync so reps see the full thread and pick up where the agent left off.</p>
    </div>
    <div class="feat-item">
      <div class="feat-ic feat-ic-ink"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>
      <h3>Guardrails by default</h3>
      <p>Tone rules, compliance phrases, escalation triggers and quiet-hours, all editable.</p>
    </div>
  </div>
</section>

.feat { padding: var(--s-9) 0; }
.feat-head { text-align: center; margin: 0 auto var(--s-8); max-width: 640px; }
.feat-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-text); font-weight: 600; margin: 0 0 var(--s-3); }
.feat-title { font: 600 clamp(28px, 3.6vw, 40px)/1.15 var(--f-display); letter-spacing: -0.02em; color: var(--fg); margin: 0 0 var(--s-3); }
.feat-lede { font: 400 17px/1.55 var(--f-body); color: var(--fg-soft); margin: 0; }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 880px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } }
.feat-item {
  background: var(--bg-paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.feat-item:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.feat-ic {
  width: 42px; height: 42px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-4);
}
.feat-ic-pink   { background: var(--accent-soft);  color: var(--accent-text); }
.feat-ic-blue   { background: var(--info-soft);    color: var(--info-text); }
.feat-ic-green  { background: var(--success-soft); color: var(--success-text); }
.feat-ic-amber  { background: var(--warning-soft); color: var(--warning-text); }
.feat-ic-purple { background: #EFE4FF; color: #5C2CA8; }
.feat-ic-ink    { background: var(--ink); color: var(--paper); }
.feat-item h3 { font: 600 17px/1.3 var(--f-display); letter-spacing: -0.01em; color: var(--fg); margin: 0 0 6px; }
.feat-item p  { font: 400 14.5px/1.55 var(--f-body); color: var(--fg-soft); margin: 0; }

9.3 Logo wall

Trust proof without the tedious logo hunt. Uses actual typography rather than bitmap logos — each customer gets a distinct type treatment so the row feels editorial, not stock.

6-up logo wall

.lw

Pinned-white band (in both themes) with a mono eyebrow. Our customer logos are greyscale wordmarks — a coloured surface dilutes them and dark mode kills them. Wordmarks stand in for logo files; swap each for an SVG when available.

Trusted by forward-thinking sales teams

Northpeak

trailhaus

LUMEN/FIN

Ridgepine

HAZELROOT

Brookfield

<section class="lw">
  <p class="lw-eyebrow mono">Trusted by forward-thinking sales teams</p>
  <div class="lw-grid">
    <div class="lw-item" style="font-family: var(--f-display); font-weight: 700; letter-spacing: -0.04em; font-size: 24px;">Northpeak</div>
    <div class="lw-item" style="font-family: var(--f-italic); font-style: italic; font-size: 26px;">trailhaus</div>
    <div class="lw-item" style="font-family: var(--f-mono); font-size: 18px; letter-spacing: 0.05em;">LUMEN/FIN</div>
    <div class="lw-item" style="font-family: var(--f-display); font-weight: 500; font-size: 22px;">Ridgepine</div>
    <div class="lw-item" style="font-family: var(--f-display); font-weight: 800; letter-spacing: -0.02em; font-size: 22px;">HAZELROOT</div>
    <div class="lw-item" style="font-family: var(--f-italic); font-weight: 600; font-size: 24px;">Brookfield</div>
  </div>
</section>

/* Pinned WHITE in both themes — kit logos are greyscale and need
   a stable pale ground so they read identically on warm or dark pages. */
.lw { padding: var(--s-7) var(--s-5); text-align: center;
  background: var(--paper);
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent); }
.lw-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-dim); font-weight: 600; margin: 0 0 var(--s-5); }
.lw-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-4);
  align-items: center;
}
@media (max-width: 800px) { .lw-grid { grid-template-columns: repeat(3, 1fr); row-gap: var(--s-5); } }
@media (max-width: 440px) { .lw-grid { grid-template-columns: repeat(2, 1fr); } }
.lw-item {
  color: var(--fg); opacity: 0.7;
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--dur-2) var(--ease);
  line-height: 1;
}
.lw-item:hover { opacity: 1; }

9.4 Testimonial strip

A single hero quote with a Fraunces glyph, italicised emphasis phrases in pink, author block, and a stat pull-quote on the right. Use one per page — more than one dilutes the impact.

Featured testimonial

.ts

Pink radial bloom in the top-right corner. The quote uses italic em for 2–3 emphasis phrases. Stat is the proof point, not a metric dump.

“

MagicBlocks replaced our overnight SDR shift overnight. Response times went from seven minutes to seven seconds, and the booked-meeting rate doubled.

Maya Ruiz

VP Sales · Northpeak Mortgage

2.1×

Meetings booked

<section class="ts">
  <div class="ts-inner">
    <div class="ts-glyph">&ldquo;</div>
    <blockquote class="ts-quote">
      MagicBlocks replaced our overnight SDR shift overnight. Response times went from <em>seven minutes</em> to <em>seven seconds</em>, and the booked-meeting rate <em>doubled</em>.
    </blockquote>
    <div class="ts-cite">
      <span class="av av-lg" style="background:#FFE2EC; color:var(--accent-text);">MR</span>
      <div>
        <div class="ts-name">Maya Ruiz</div>
        <div class="ts-role">VP Sales · Northpeak Mortgage</div>
      </div>
      <div class="ts-stat">
        <div class="ts-stat-n">2.1×</div>
        <div class="ts-stat-l mono">Meetings booked</div>
      </div>
    </div>
  </div>
</section>

.ts {
  background: var(--bg-paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  padding: var(--s-9) var(--s-7);
  box-shadow: var(--sh-1);
  position: relative;
  overflow: hidden;
}
.ts::before {
  content: ""; position: absolute; top: 0; right: 0;
  width: 320px; height: 320px;
  background: radial-gradient(closest-side, var(--accent-soft), transparent 70%);
  pointer-events: none;
}
.ts-inner { position: relative; max-width: 780px; margin: 0 auto; }
.ts-glyph {
  font-family: var(--f-italic); font-style: italic;
  font-size: 88px; line-height: 0.8;
  color: var(--accent-text); font-variation-settings: "SOFT" 80;
  margin-bottom: var(--s-3);
}
.ts-quote {
  font: 400 clamp(22px, 2.6vw, 32px)/1.35 var(--f-display);
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0 0 var(--s-6);
}
.ts-quote em {
  font-family: var(--f-italic); font-style: italic; font-weight: 400;
  color: var(--accent-text); font-variation-settings: "SOFT" 80;
}
.ts-cite { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.ts-name { font: 600 15px/1.2 var(--f-display); color: var(--fg); letter-spacing: -0.005em; }
.ts-role { font: 400 13px/1.3 var(--f-body); color: var(--fg-soft); margin-top: 2px; }
.ts-stat { margin-left: auto; text-align: right; padding-left: var(--s-5); border-left: 1px solid var(--hair); }
.ts-stat-n { font: 600 28px/1 var(--f-display); color: var(--accent); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ts-stat-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-dim); margin-top: 4px; font-weight: 600; }

9.5 CTA block

A closing surface that asks for the next step. Warm variant is the default; ink variant is reserved for launch/promo moments where you want rhythm and contrast on a warm page.

Warm + ink CTA blocks

.ctab

Same structure, two temperatures. Ink variant flips chromaticity but keeps the pink em and pink CTA. Never more than two per page.

Ready when you are

See what it sounds like when every lead gets a real reply.

Book a 20-minute walkthrough. We'll spin up an agent on your site, your tone, your funnel — and you can listen in.

Book a walkthrough Or email us first

Launch offer

Your first 1,000 agent minutes on us.

Get every inbound conversation answered in under 30 seconds for the next 90 days, for free.

Claim credit Read terms

<section class="ctab">
  <div class="ctab-bloom"></div>
  <div class="ctab-inner">
    <p class="ctab-eyebrow mono"><span class="ctab-dot"></span> Ready when you are</p>
    <h2 class="ctab-title">See what it sounds like when <em>every</em> lead gets a real reply.</h2>
    <p class="ctab-lede">Book a 20-minute walkthrough. We'll spin up an agent on your site, your tone, your funnel — and you can listen in.</p>
    <div class="ctab-actions">
      <a href="#" class="ctab-cta">Book a walkthrough <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
      <a href="#" class="ctab-link">Or email us first</a>
    </div>
  </div>
</section>

<section class="ctab ctab-ink" style="margin-top: var(--s-5);">
  <div class="ctab-inner">
    <p class="ctab-eyebrow mono" style="color: var(--accent);"><span class="ctab-dot"></span> Launch offer</p>
    <h2 class="ctab-title">Your first <em>1,000 agent minutes</em> on us.</h2>
    <p class="ctab-lede">Get every inbound conversation answered in under 30 seconds for the next 90 days, for free.</p>
    <div class="ctab-actions">
      <a href="#" class="ctab-cta">Claim credit <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
      <a href="#" class="ctab-link">Read terms</a>
    </div>
  </div>
</section>

.ctab {
  position: relative;
  padding: var(--s-9) var(--s-7);
  background: var(--warm-3);
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  /* pinned warm — rescope type tokens so dark-mode copy is readable */
  --fg:      var(--ink);
  --fg-soft: color-mix(in oklab, var(--ink) 68%, transparent);
  --fg-dim:  color-mix(in oklab, var(--ink) 48%, transparent);
  --hair:    rgba(25, 30, 50, 0.09);
  color: var(--fg);
}
.ctab-bloom {
  position: absolute; inset: 0;
  background: radial-gradient(700px 380px at 80% 0%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 65%);
  z-index: -1;
}
.ctab-inner { max-width: 640px; }
.ctab-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 11.5px/1 var(--f-mono);
  color: var(--fg-dim);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin: 0 0 var(--s-4);
}
.ctab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.ctab-title { font: 600 clamp(30px, 4vw, 46px)/1.1 var(--f-display); letter-spacing: -0.02em; color: var(--fg); margin: 0 0 var(--s-4); }
.ctab-title em { font-family: var(--f-italic); font-style: italic; font-weight: 400; color: var(--accent); font-variation-settings: "SOFT" 80; }
.ctab-lede { font: 400 17px/1.5 var(--f-body); color: var(--fg-soft); margin: 0 0 var(--s-6); }
.ctab-actions { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; }
.ctab-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: var(--paper);
  font: 600 15px/1 var(--f-display);
  padding: 14px 22px;
  border-radius: var(--r-pill);
  text-decoration: none;
  box-shadow: var(--sh-pink);
  transition: transform var(--dur-2) var(--ease);
}
.ctab-cta:hover { transform: translateY(-2px); color: var(--paper); }
.ctab-link { color: var(--fg); text-decoration: none; font: 500 14.5px/1 var(--f-body); border-bottom: 1px solid currentColor; padding: 6px 2px; }
.ctab-link:hover { color: var(--accent-text); }

.ctab-ink {
  background: var(--ink); border-color: var(--ink);
  /* pinned ink — flip type tokens to paper so copy reads on the dark surface */
  --fg:      var(--paper);
  --fg-soft: color-mix(in oklab, var(--paper) 72%, transparent);
  --fg-dim:  color-mix(in oklab, var(--paper) 55%, transparent);
  --hair:    rgba(244, 236, 228, 0.14);
  color: var(--fg);
}
.ctab-ink .ctab-title { color: var(--fg); }
.ctab-ink .ctab-lede  { color: var(--fg-soft); }
.ctab-ink .ctab-link  { color: var(--fg-soft); }
.ctab-ink .ctab-link:hover { color: var(--accent-text); }

9.6 Stats strip

A band of 3–4 big numbers that anchors a page in hard outcomes. Numbers in display 600, units ('%', '×') in pink to add rhythm, label in mono uppercase underneath.

4-up stats

.stats

Tabular nums so digits stack. Hairline grid between cells. Use adjacent to a testimonial for max proof density.

30s

Average response time

2.1×

More meetings booked

94%

Inbound coverage

24/7

Always-on conversations

<section class="stats">
  <div class="stats-item">
    <div class="stats-n">30s</div>
    <div class="stats-l">Average response time</div>
  </div>
  <div class="stats-item">
    <div class="stats-n">2.1<span class="stats-u">×</span></div>
    <div class="stats-l">More meetings booked</div>
  </div>
  <div class="stats-item">
    <div class="stats-n">94<span class="stats-u">%</span></div>
    <div class="stats-l">Inbound coverage</div>
  </div>
  <div class="stats-item">
    <div class="stats-n">24/7</div>
    <div class="stats-l">Always-on conversations</div>
  </div>
</section>

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stats-item { background: var(--bg-paper); padding: var(--s-6) var(--s-5); text-align: left; }
.stats-n {
  font: 600 44px/1 var(--f-display);
  letter-spacing: -0.02em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.stats-u { color: var(--accent-text); font-size: 28px; margin-left: 2px; }
.stats-l { font: 500 12px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-dim); }

9.7 FAQ accordion

Native <details> element with a hand-built + marker that rotates 45° to × when open. Use for 4–7 genuine objections — never a dumping ground for product docs.

Accordion FAQ

.faq-item

No JavaScript required — the <details> element does the work. Hair-soft divider between rows, pink + marker on the open state.

Frequently asked

Questions teams ask
before they buy.

Will my leads know they're talking to AI?

You choose. The default posture is full transparency — the agent introduces itself as an AI assistant and offers a human handoff at any moment. You can also configure it to behave as an extension of a named rep, as long as it's compliant in your region.

How long does it take to launch?

Most teams go live within 48 hours. The first evening is spent on tone calibration with call transcripts; by the next morning the agent is answering a live staging queue.

What happens when the conversation gets complicated?

The agent hands off to a human on your team. Handoffs are triggered by intent signals (urgency, objection density, stakes) and by explicit guardrails you set — e.g. anything touching pricing above $X.

Do you integrate with our CRM?

Yes — HubSpot, Salesforce, and most mid-market CRMs. Every conversation writes back to the contact record so reps see the full thread the moment they pick it up.

<section class="faq">
  <header class="faq-head">
    <p class="faq-eyebrow mono">Frequently asked</p>
    <h2 class="faq-title">Questions teams ask<br>before they buy.</h2>
  </header>
  <div class="faq-list">
    <details class="faq-item" open>
      <summary>Will my leads know they're talking to AI?</summary>
      <div class="faq-body">
        <p>You choose. The default posture is full transparency — the agent introduces itself as an AI assistant and offers a human handoff at any moment. You can also configure it to behave as an extension of a named rep, as long as it's compliant in your region.</p>
      </div>
    </details>
    <details class="faq-item">
      <summary>How long does it take to launch?</summary>
      <div class="faq-body">
        <p>Most teams go live within 48 hours. The first evening is spent on tone calibration with call transcripts; by the next morning the agent is answering a live staging queue.</p>
      </div>
    </details>
    <details class="faq-item">
      <summary>What happens when the conversation gets complicated?</summary>
      <div class="faq-body">
        <p>The agent hands off to a human on your team. Handoffs are triggered by intent signals (urgency, objection density, stakes) and by explicit guardrails you set — e.g. anything touching pricing above $X.</p>
      </div>
    </details>
    <details class="faq-item">
      <summary>Do you integrate with our CRM?</summary>
      <div class="faq-body">
        <p>Yes — HubSpot, Salesforce, and most mid-market CRMs. Every conversation writes back to the contact record so reps see the full thread the moment they pick it up.</p>
      </div>
    </details>
  </div>
</section>

.faq { padding: var(--s-9) 0; }
.faq-head { max-width: 520px; margin: 0 0 var(--s-7); }
.faq-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-text); font-weight: 600; margin: 0 0 var(--s-3); }
.faq-title { font: 600 clamp(28px, 3.2vw, 36px)/1.2 var(--f-display); letter-spacing: -0.02em; color: var(--fg); margin: 0; }
.faq-list {
  background: var(--bg-paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.faq-item { border-bottom: 1px solid var(--hair-soft); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary {
  padding: var(--s-5);
  font: 600 16px/1.3 var(--f-display);
  letter-spacing: -0.005em;
  color: var(--fg);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 56px;
  transition: background var(--dur-2) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute; right: var(--s-5); top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair); border-radius: 50%;
  font: 400 18px/1 var(--f-display); color: var(--fg-soft);
  transition: transform var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); color: var(--accent-text); border-color: var(--accent); }
.faq-item summary:hover { background: var(--bg-warm); }
.faq-body { padding: 0 var(--s-5) var(--s-5); }
.faq-body p { font: 400 15px/1.6 var(--f-body); color: var(--fg-soft); margin: 0; max-width: 68ch; }

9.8 Comparison table

A three-column product-vs-competitor table. MagicBlocks column gets a subtle green background (positive, not predatory) and a checkmark row; other columns stay neutral. Use on pricing and "why us" pages — never as a weapon, only as a summary of real differences.

Product comparison

.compare

Feature label on the left, three columns on the right. Our column is lifted with success-soft (green) background — positive, not aggressive. Check and dash glyphs replace "yes/no" text.

	MagicBlocks	Legacy CRM	Spreadsheet
AI-qualified conversations	✓	—	—
Every lead, every time	✓	—	—
Human-feeling tone	✓	Limited	—
CRM sync	Native	✓	Manual
Setup time	Minutes	Weeks	Minutes

<table class="compare">
  <thead><tr>
    <th></th>
    <th class="is-ours">MagicBlocks</th>
    <th>Legacy CRM</th>
  </tr></thead>
  <tbody>
    <tr><th>AI-qualified conversations</th>
        <td class="is-ours">✓</td><td>—</td></tr>
  </tbody>
</table>

.compare { width: 100%; border-collapse: collapse;
  font: 400 14px/1.4 var(--f-body); }
.compare th, .compare td { padding: var(--s-3) var(--s-4);
  text-align: center; border-bottom: 1px solid var(--hair); }
.compare thead th { font: 500 11px/1 var(--f-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-dim); padding-top: var(--s-4); padding-bottom: var(--s-4); }
.compare tbody th { text-align: left; font-weight: 500; color: var(--fg); }
.compare .is-ours { background: var(--success-soft); color: var(--success-text); font-weight: 600; }
.compare thead .is-ours { color: var(--success-text); border-top-left-radius: var(--r-sm);
  border-top-right-radius: var(--r-sm); }

9.9 Team grid

An about-page grid of humans — photo, name, role, one short line of personality. Warm cream cards, pink link on the social handle. Never stock photos.

Team member cards

.team-grid · .team-card

Photo uses aspect-ratio 1:1 with subtle rounding. Name in display, role in mono-small uppercase, bio in body.

Priya Raman

Co-founder · CEO

Built sales teams at two startups. Believes every lead deserves a real conversation.

Tomás Ruiz

Co-founder · CTO

Trained conversational models for a decade. Now training them to listen.

Jing Liu

Head of Design

Previously at Linear and Notion. Obsessed with warm, calm software.

<div class="team-grid">
  <article class="team-card">
    <div class="team-photo"></div>
    <h3 class="team-name">Priya Raman</h3>
    <div class="team-role">Co-founder · CEO</div>
    <p class="team-bio">Built sales teams at two startups.</p>
  </article>
</div>

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5); width: 100%; }
@media (max-width: 720px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .team-grid { grid-template-columns: 1fr; } }
.team-card { padding: var(--s-4); background: var(--bg-paper);
  border: 1px solid var(--hair); border-radius: var(--r-md); }
.team-photo { aspect-ratio: 1; width: 100%; border-radius: var(--r-sm);
  margin-bottom: var(--s-3); }
.team-name { font: 700 18px/1.2 var(--f-display); color: var(--fg); margin: 0; }
.team-role { font: 500 11px/1 var(--f-mono); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--accent-text); margin: var(--s-1) 0 var(--s-2); }
.team-bio  { font: 400 14px/1.55 var(--f-body); color: var(--fg-soft); margin: 0; }

9.10 Pull quote

A full-bleed editorial moment between sections. Oversized Fraunces-italic glyph; the quote body is display-weight Bricolage; attribution is mono small. Reserved for your single best line of social proof on a page.

Pull-quote band

.pull-quote

Centered on the warm page. Emphasised phrase is pink Fraunces italic. One attribution — never a list.

MagicBlocks replied to every lead, overnight, and sounded like a person. We booked 37 meetings in the first week.

Priya Raman · VP Growth, Acme Corp

<figure class="pull-quote">
  <div class="pq-glyph">"</div>
  <blockquote class="pq-body">
    MagicBlocks replied to <em>every lead</em>, overnight.
  </blockquote>
  <figcaption class="pq-cite">Priya Raman · Acme Corp</figcaption>
</figure>

.pull-quote { max-width: 720px; margin: 0 auto;
  padding: var(--s-7) var(--s-5); text-align: center; }
.pq-glyph { font: 400 80px/0.6 var(--f-serif); font-style: italic;
  font-variation-settings: "SOFT" 80; color: var(--accent-text); margin-bottom: var(--s-3); }
.pq-body { font: 500 24px/1.35 var(--f-display); color: var(--fg);
  text-wrap: balance; margin: 0; }
.pq-body em { font-family: var(--f-serif); font-style: italic;
  font-variation-settings: "SOFT" 80; color: var(--accent-text); font-weight: 400; }
.pq-cite { font: 500 12px/1 var(--f-mono); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--fg-dim); margin-top: var(--s-4); }

9.11 Footer

The MagicBlocks site footer — one component, two tonal variants. Warm is the marketing default (bigger, fuller, social icons). Paper is the in-app / secondary-page variant (same grid, lighter surface, socials tucked). Use .mf for warm; add .is-paper for the paper variant.

Marketing footer — warm

.mf

Four link columns mirroring the site nav: Product (Platform mega), Use Cases (the four leaks), Industries (the verticals), Company (secondary + utility). Mono uppercase column headings. Baseline row with © and policy links in mono. Real LinkedIn / X / YouTube SVG icons in pinned-white pills. Warm background — the anti-dark-footer.

<footer class="mf">
  <div class="mf-top">
    <div class="mf-brand-col">
      <a class="mf-brand" href="#"><span class="mf-dot"></span> MagicBlocks</a>
      <p class="mf-tag">AI sales agents for inbound teams that want every lead answered in seconds.</p>
      <div class="mf-socials">
        <a href="#" aria-label="LinkedIn"><svg viewBox="0 0 24 24" fill="currentColor">…</svg></a>
        <a href="#" aria-label="X (Twitter)"><svg viewBox="0 0 24 24" fill="currentColor">…</svg></a>
        <a href="#" aria-label="YouTube"><svg viewBox="0 0 24 24" fill="currentColor">…</svg></a>
      </div>
    </div>
    <div class="mf-cols">
      <!-- Columns mirror the site nav: Product = the Product mega menu (Platform side + Channels side),
           Use Cases = the four leaks, Industries = the verticals, Company = secondary nav + utility. -->
      <div>
        <h5>Product</h5>
        <ul><li><a href="#">Platform</a></li><li><a href="#">Why MagicBlocks</a></li><li><a href="#">How It Works</a></li><li><a href="#">Built for Production</a></li><li><a href="#">SMS Agent</a></li><li><a href="#">Voice Agent</a></li><li><a href="#">Integrations</a></li></ul>
      </div>
      <div>
        <h5>Use Cases</h5>
        <ul><li><a href="#">Engage New Leads</a></li><li><a href="#">Prequalify Leads</a></li><li><a href="#">Follow Up Leads</a></li><li><a href="#">Reengage Aged Leads</a></li><li><a href="#">ROI Calculator</a></li></ul>
      </div>
      <div>
        <h5>Industries</h5>
        <ul><li><a href="#">Mortgage &amp; Lending</a></li><li><a href="#">Insurance</a></li><li><a href="#">Auto</a></li><li><a href="#">Home Services</a></li><li><a href="#">Solar</a></li><li><a href="#">Fintech</a></li><li><a href="#">Tourism</a></li></ul>
      </div>
      <div>
        <h5>Company</h5>
        <ul><li><a href="#">About</a></li><li><a href="#">Customers</a></li><li><a href="#">Pricing</a></li><li><a href="#">Blog</a></li><li><a href="#">Careers</a></li><li><a href="#">Docs</a></li><li><a href="#">Status</a></li></ul>
      </div>
    </div>
  </div>
  <div class="mf-base">
    <div>© 2026 MagicBlocks, Inc. All rights reserved.</div>
    <div class="mf-base-links">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Security</a>
    </div>
  </div>
</footer>

/* ─── Site footer (formerly split across ch 6 `.ft` + ch 9 `.mf`) ────
   One component, two tonal variants. Default is the warm marketing
   footer — bigger, fuller, with social icons. `.mf.is-paper` flips to
   a paper surface for app-embedded or secondary pages — same grid and
   link columns, lighter tone, socials tucked. Chapter 6's standalone
   `.ft` has been retired in favour of this modifier. */
.mf {
  width: 100%;
  background: var(--warm-2);
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  padding: var(--s-8) var(--s-7);
  /* pinned warm — rescope type tokens so copy stays legible in dark */
  --fg:      var(--ink);
  --fg-soft: color-mix(in oklab, var(--ink) 68%, transparent);
  --fg-dim:  color-mix(in oklab, var(--ink) 48%, transparent);
  --hair:    rgba(25, 30, 50, 0.09);
  color: var(--fg);
}
/* Paper/app variant — picks up the ambient theme, tucks socials. */
.mf.is-paper {
  background: var(--bg-paper);
  --fg:      initial; --fg-soft: initial; --fg-dim: initial; --hair: initial;
  color: var(--fg);
}
.mf.is-paper .mf-socials { display: none; }
.mf.is-paper .mf-tag { max-width: 34ch; }
.mf-top { display: grid; grid-template-columns: 1.2fr 2.6fr; gap: var(--s-8); margin-bottom: var(--s-7); }
@media (max-width: 780px) { .mf-top { grid-template-columns: 1fr; } }
.mf-brand { display: inline-flex; align-items: center; gap: 10px; font: 700 18px/1 var(--f-display); color: var(--fg); text-decoration: none; letter-spacing: -0.01em; }
.mf-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.mf-tag { font: 400 14px/1.55 var(--f-body); color: var(--fg-soft); margin: var(--s-3) 0 var(--s-5); max-width: 32ch; }
.mf-socials { display: flex; gap: 10px; }
.mf-socials a {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  /* Pinned-white pill so the SVG icon (currentColor=ink) reads in BOTH
     themes — bg-paper would flip dark and collapse with the ink-rescoped
     icon colour. Same fix as the hero eyebrow. */
  background: var(--paper);
  border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  color: var(--ink); text-decoration: none;
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.mf-socials a svg { width: 16px; height: 16px; display: block; }
.mf-socials a:hover {
  color: var(--paper);
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.mf-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
@media (max-width: 560px) { .mf-cols { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-5); } }
.mf-cols h5 { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-dim); margin: 0 0 var(--s-3); }
.mf-cols ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mf-cols a { color: var(--fg); text-decoration: none; font: 500 14px/1.4 var(--f-body); transition: color var(--dur-1) var(--ease); }
.mf-cols a:hover { color: var(--accent-text); }
.mf-base {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--s-5);
  border-top: 1px solid var(--hair);
  font: 400 12.5px/1.5 var(--f-mono); color: var(--fg-dim);
  flex-wrap: wrap; gap: var(--s-3);
}
.mf-base-links { display: flex; gap: var(--s-5); }
.mf-base-links a { color: var(--fg-dim); text-decoration: none; }
.mf-base-links a:hover { color: var(--accent-text); }

App / secondary-page footer — paper

.mf.is-paper

Same layout, paper surface, socials tucked. Use this inside the product or on any page where the full marketing treatment would be too loud. Add a is-paper class to the same .mf markup.

<!-- Same markup as the warm variant, plus `is-paper` on the root. -->
<footer class="mf is-paper">
  <div class="mf-top">
    <div class="mf-brand-col">
      <a class="mf-brand" href="#"><span class="mf-dot"></span> MagicBlocks</a>
      <p class="mf-tag">Every lead. Every time. In minutes.</p>
    </div>
    <div class="mf-cols"> … </div>
  </div>
  <div class="mf-base"> © 2026 MagicBlocks · <!-- policy links --> </div>
</footer>

/* Paper-surface modifier — ambient theme, no socials, fewer cols. */
.mf.is-paper {
  background: var(--bg-paper);
  --fg: initial; --fg-soft: initial; --fg-dim: initial; --hair: initial;
  color: var(--fg);
}
.mf.is-paper .mf-socials { display: none; }
.mf.is-paper .mf-tag     { max-width: 34ch; }

9.12 Customer logo grid

Real customer logos arranged in a 5-up grid. Companion to the .lw wordmark logo-wall (§9.3) — use this when the actual logo bitmaps exist; use .lw when they don't. Grayscale + 55% opacity at rest, full colour on hover. Retina-ready via srcset. Sourced from 06-brand-assets/customers/.

10 customer logos

.logo-grid

240px @1x / 480px @2x variants available. Each logo wraps in an <a> so the whole tile is keyboard-focusable and can link to a case study.

Trusted by forward-thinking sales teams

<section class="logo-grid-section">
  <p class="logo-grid-eyebrow">Trusted by forward-thinking sales teams</p>
  <div class="logo-grid">
    <a href="/customers/cmg-financial" aria-label="CMG Financial">
      <img src="/brand/customers/cmg-financial-240.png"
           srcset="/brand/customers/cmg-financial-480.png 2x"
           alt="CMG Financial">
    </a>
    <!-- … 9 more tiles, same pattern -->
  </div>
</section>

.logo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-6) var(--s-7); align-items: center; justify-items: center; }
.logo-grid img { max-width: 140px; opacity: 0.55; filter: grayscale(1); transition: opacity var(--dur-2), filter var(--dur-2); }
.logo-grid a:hover img, .logo-grid a:focus-visible img { opacity: 1; filter: grayscale(0); }
@media (max-width: 820px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .logo-grid { grid-template-columns: repeat(2, 1fr); } }

Industry-grouped wall

.customer-logo-wall

All 21 customers grouped by the 9 industries we serve. Use on the homepage ("Trusted by operators in"), About ("In production"), and Customers Hub ("The customers we're already running for"). Each group has a small mono-uppercase header; logos within respect the same grayscale-to-colour hover treatment as the flat grid above. Filterable on industry pages — pass data-cw-only="mortgage" to render only that group.

Trusted by operators in

Mortgage & Lending · 8

Finance & Fintech · 3

Auto · 2

Home Services / Construction · 2

Health & Aged Care · 2

Tourism · 1

Legal · 1

SaaS / Infrastructure · 1

Creative / Agency · 1

<section class="customer-logo-wall">
  <p class="cw-eyebrow">Trusted by operators in</p>

  <div class="cw-group">
    <h4 class="cw-group-name">Mortgage &amp; Lending · 8</h4>
    <div class="cw-row">
      <a href="/customers/beeline" aria-label="Beeline (case study)">
        <img src="/brand/customers/beeline-240.png"
             srcset="/brand/customers/beeline-480.png 2x"
             alt="Beeline">
      </a>
      <!-- … 7 more mortgage logos -->
    </div>
  </div>

  <!-- 8 more groups (see Appendix D in the commission doc) -->
</section>

<!-- industry-page filter: pass data-cw-only to render one group -->
<section class="customer-logo-wall" data-cw-only="mortgage">…</section>

.customer-logo-wall { display: flex; flex-direction: column; gap: var(--s-6); }
.cw-eyebrow         { font: 600 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-dim); margin: 0; }
.cw-group           { display: flex; flex-direction: column; gap: var(--s-3); }
.cw-group-name      { font: 600 10.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-soft); margin: 0; padding-bottom: var(--s-2); border-bottom: 1px solid var(--hair); }
.cw-row             { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5) var(--s-7); padding: var(--s-2) 0; }
.cw-row img         { max-width: 140px; opacity: 0.6; filter: grayscale(1); transition: opacity var(--dur-2), filter var(--dur-2); }
.cw-row a:hover img, .cw-row a:focus-visible img { opacity: 1; filter: grayscale(0); }
@media (max-width: 480px) { .cw-row { gap: var(--s-4); justify-content: center; } .cw-row img { max-width: 100px; } }

9.13 Press strip

Row of press-mention logos for social proof. Use near the hero or above the footer. Wraps cleanly at any viewport. Sourced from 06-brand-assets/press/.

As seen in

.press-strip

200px @1x / 400px @2x variants. 8 outlets: Nasdaq, Yahoo Finance, Benzinga, National Mortgage News, Investing.com, Marketscreener.com, Global Newswire, Fundz.

As seen in

<section class="press-strip">
  <p class="press-strip-eyebrow">As seen in</p>
  <div class="press-row">
    <a href="https://nasdaq.com/…">
      <img src="/brand/press/nasdaq-200.png"
           srcset="/brand/press/nasdaq-400.png 2x"
           alt="Nasdaq">
    </a>
    <!-- … 7 more -->
  </div>
</section>

.press-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-5) var(--s-6); }
.press-row img { max-width: 110px; opacity: 0.55; filter: grayscale(1); transition: opacity var(--dur-2), filter var(--dur-2); }
.press-row a:hover img, .press-row a:focus-visible img { opacity: 1; filter: grayscale(0); }

9.14 Integration grid

Square tile grid for third-party integrations. Icon on top, mono label below. Hover lifts the tile and shifts the border to accent. Sourced from 06-brand-assets/integrations/. Calendly's logo ships as SVG (vector) for infinite scaling; the rest are 80/160/320px PNG variants.

5-up integration tiles

.integration-grid

Square 80/160/320 variants. Use 160 at @2x, 320 at @4x for extra-crisp tiles. Each tile links to the integration's detail page.

<div class="integration-grid">
  <a class="integration-tile" href="/integrations/calendly" aria-label="Calendly integration">
    <img src="/brand/integrations/calendly-160.png"
         srcset="/brand/integrations/calendly-320.png 2x" alt="">
    <span class="label">Calendly</span>
  </a>
  <!-- … 4 more tiles -->
</div>

.integration-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); }
.integration-tile { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-4); background: var(--bg-paper); border: 1px solid var(--hair); border-radius: var(--r-md); }
.integration-tile:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--hair)); transform: translateY(-2px); box-shadow: var(--sh-2); }
.integration-tile img { width: 48px; height: 48px; object-fit: contain; }
@media (max-width: 640px) { .integration-grid { grid-template-columns: repeat(3, 1fr); } }

Category-grouped grid

.integration-category-grid

Same tile pattern, organised under category headers. Use on the Integrations index page where the catalog needs to be scannable by integration type. Includes a .is-coming-soon tile state — rendered with a hatched overlay and dimmed label so the roadmap is visible without overpromising.

Calendar & scheduling · 3

Calendly

Cal.com

Google Cal

CRM & sales · 2

GoHighLevel

HubSpot

Communications · 2

Twilio

Outlook

Workflow & storage · 2

Zapier

Google Drive

Analytics · 1

Google Analytics

Coming soon · 4

Salesforce MS Teams Pipedrive Stripe

<section class="integration-category-grid">
  <div class="icg-group">
    <h4 class="icg-group-name">Calendar &amp; scheduling · 3</h4>
    <div class="integration-grid">
      <a class="integration-tile" href="/integrations/calendly">
        <img src="/brand/integrations/calendly-160.png" srcset="…320.png 2x" alt="">
        <span class="label">Calendly</span>
      </a>
      <!-- … more tiles -->
    </div>
  </div>
  <!-- 5 more category groups -->
  <div class="icg-group">
    <h4 class="icg-group-name">Coming soon · 4</h4>
    <div class="integration-grid">
      <span class="integration-tile is-coming-soon">
        <span class="label">Salesforce</span>
      </span>
    </div>
  </div>
</section>

.integration-category-grid { display: flex; flex-direction: column; gap: var(--s-6); }
.icg-group-name { font: 600 10.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-soft); padding-bottom: var(--s-2); border-bottom: 1px solid var(--hair); margin: 0 0 var(--s-3); }
/* hatched coming-soon tile */
.integration-tile.is-coming-soon {
  cursor: default;
  background: repeating-linear-gradient(45deg, var(--bg-paper), var(--bg-paper) 6px, var(--bg-sunk) 6px, var(--bg-sunk) 12px);
  color: var(--fg-dim);
  pointer-events: none;
}
.integration-tile.is-coming-soon .label::after { content: " · soon"; opacity: 0.7; }

9.15 Founder cards

Richer variant of .team-card (§9.9) for founders specifically. Square headshot, display-font name, mono-accent role, body-copy bio, optional social pills. Two-up on desktop, single column on mobile. Photos sourced from 06-brand-assets/founders/.

Two-up founder profiles

.founder-grid · .founder-card

400px @1x / 800px @2x. Headshot uses object-fit: cover with a 1:1 aspect ratio so any crop works.

Jay Stockwell

Co-founder · CEO

Sales and product leader. Built multiple AI-sales tools; now building the one that actually feels human.

LinkedIn X

Sean Clark

Co-founder · CTO

Engineering leader with a decade in conversational AI. Obsessed with memory, context, and low-latency orchestration.

LinkedIn GitHub

<div class="founder-grid">
  <article class="founder-card">
    <div class="founder-photo">
      <img src="/brand/founders/jay-stockwell-400.png"
           srcset="/brand/founders/jay-stockwell-800.png 2x"
           alt="Jay Stockwell">
    </div>
    <h3 class="founder-name">Jay Stockwell</h3>
    <div class="founder-role">Co-founder · CEO</div>
    <p class="founder-bio">Sales and product leader…</p>
    <div class="founder-links">
      <a href="https://linkedin.com/…">LinkedIn</a>
      <a href="https://x.com/…">X</a>
    </div>
  </article>
  <!-- …second founder card -->
</div>

.founder-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); max-width: min(720px, 100%); margin: 0 auto; }
.founder-card { padding: var(--s-5); background: var(--bg-paper); border: 1px solid var(--hair); border-radius: var(--r-lg); text-align: center; }
.founder-photo { aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-name { font: 600 20px/1.2 var(--f-display); }
.founder-role { font: 500 11.5px/1 var(--f-mono); text-transform: uppercase; color: var(--accent-text); }
@media (max-width: 640px) { .founder-grid { grid-template-columns: 1fr; } }

9.16 Anatomy — hero section

The six parts of every MagicBlocks hero. Strip the italic or the blooms and it reads cold; overdo any of them and it reads generic.

Six required parts

AI sales agents · v3

Every lead gets a human-feeling conversation within seconds.

MagicBlocks runs AI sales agents that engage, qualify, and book meetings across chat, email, SMS and voice.

Book a demo Watch a 2-min walkthrough

1
Eyebrow pill
Paper card on warm bg, mono text, pink dot. Sets context in one line.
2
Display heading
Bricolage 600, clamp scale 40–64px, -0.025em tracking.
3
Fraunces italic phrase
One emotional phrase in italic pink with SOFT 80. Never more than one per heading.
4
Body lede
19px DM Sans 400, softer foreground, max 56ch.
5
Dual CTA
Pink pill (primary) + underlined link (secondary). Always pair — never just one.
6
Radial blooms
Pink from top-right, peach from bottom-left. Warmth signal, not a photograph.