Testimonials — `.mv-testimonials`

Testimonials section with an editorial, hairline-ruled look: a numbered ledger grid with a featured result entry, a horizontal ticker of compact notes, or a case-study split pairing one quote with its key figures; a score summary sits in the header.

Category	Blocks
Type	Block (ready-made section) (`.mv-testimonials`)
Status	stable
Also installs	avatar, marquee
Keywords	testimonials, témoignages, avis, reviews, social-proof, quote, social proof, case study, ticker, rating

When to use

A landing page needs customer quotes in an editorial numbered grid with a featured result entry
Compact notes should scroll in a horizontal ticker under an overall score summary
A case study should pair one quote with its key figures

Avoid when

Shoppers must read, sort and write product reviews → use Review instead

Install

node scripts/add.mjs testimonials --out ./src/marvelous

AI agent with the Marvelous UI MCP server: install_components({ slugs: ["testimonials"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Files copied (dependencies included): tokens/tokens.css, core/base.css, components/testimonials/testimonials.css, components/avatar/avatar.css, components/avatar/avatar.js, core/dom.js, core/element.js, core/motion.js, core/observe.js, components/marquee/marquee.js, components/marquee/marquee.css.

Usage

Canonical markup — start from it and customize with attributes, data-* and CSS variables:

<mv-tabs id="testimonials-demo" value="grid" data-size="sm" style="gap:0;background:var(--mv-bg)">
  <style>#testimonials-demo > [role="tablist"] { justify-self: center; margin: .75rem auto 0; }</style>
  <div role="tablist" aria-label="Block variant">
    <button role="tab" data-value="grid">Ledger</button>
    <button role="tab" data-value="wall">Ticker</button>
    <button role="tab" data-value="quote">Case study</button>
  </div>

  <!-- ═════════ Ledger grid ═════════ -->
  <div role="tabpanel" data-value="grid">
    <section class="mv-testimonials" data-variant="grid" aria-labelledby="tm-grid-title">
      <div class="mv-testimonials-inner">
        <header class="mv-testimonials-header">
          <div class="mv-testimonials-heading">
            <p class="mv-testimonials-eyebrow">Customer notes</p>
            <h2 class="mv-testimonials-title" id="tm-grid-title">Teams that took back control of their projects</h2>
            <p class="mv-testimonials-lead">Agencies, software companies and studios: more than 12,000 teams plan, track and bill with Canopy.</p>
          </div>
          <div class="mv-testimonials-summary">
            <span class="mv-testimonials-score" aria-hidden="true">4.9</span>
            <span class="mv-testimonials-rating" role="img" aria-label="Average rating: 4.9 out of 5"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg></span>
            <span class="mv-testimonials-count">Average of 3,812 verified reviews</span>
            <div class="mv-avatar-group" data-size="sm" role="group" aria-label="Some of our reviewers">
              <span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4b5fd'/%3E%3Cstop offset='1' stop-color='%237c3aed'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M17.5 30c0-10 6-16.5 14.5-16.5S46.5 20 46.5 30v17h-29z' fill='%233b2418'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%231e1b4b'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23f1c7a8'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23f1c7a8'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%233b2418'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">LM</span></span><span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2399f6e4'/%3E%3Cstop offset='1' stop-color='%230f766e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%23f8fafc'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23b98363'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23b98363'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%231c1917'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">KB</span></span><span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fde68a'/%3E%3Cstop offset='1' stop-color='%23d97706'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M17.5 30c0-10 6-16.5 14.5-16.5S46.5 20 46.5 30v17h-29z' fill='%237c2d12'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%231f2937'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23e7b590'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23e7b590'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%237c2d12'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">IM</span></span><span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23bae6fd'/%3E%3Cstop offset='1' stop-color='%232563eb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%230f172a'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23f3d1b5'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23f3d1b5'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%23a16207'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">TG</span></span><span class="mv-avatar-more" aria-label="and 3,808 more">+3k</span>
            </div>
          </div>
        </header>
        <div class="mv-testimonials-grid">
          <figure class="mv-testimonials-card" data-featured>
            <div class="mv-testimonials-card-top"><span class="mv-testimonials-rating" role="img" aria-label="Rated 5 out of 5"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg></span><span>Software · 140 seats</span></div>
            <p class="mv-testimonials-metric"><strong>−38%</strong><span>cycle time, first quarter on Canopy</span></p>
            <blockquote><p>We replaced Jira, Harvest and two spreadsheets with Canopy. <mark>Three weeks later</mark>, nobody wanted to go back — and our release train finally runs on schedule.</p></blockquote>
            <figcaption class="mv-testimonials-author"><span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4b5fd'/%3E%3Cstop offset='1' stop-color='%237c3aed'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M17.5 30c0-10 6-16.5 14.5-16.5S46.5 20 46.5 30v17h-29z' fill='%233b2418'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%231e1b4b'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23f1c7a8'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23f1c7a8'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%233b2418'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">LM</span></span><span><span class="mv-testimonials-name">Lena Meyer</span><span class="mv-testimonials-role">CTO · Nordik</span></span><svg class="mv-testimonials-logo" viewBox="0 0 103 32" role="img" aria-label="Nordik" fill="currentColor"><path d="M1 26 10 8l5 9 3-5 8 14z"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Nordik</text></svg></figcaption>
          </figure>
          <figure class="mv-testimonials-card">
            <div class="mv-testimonials-card-top"><span class="mv-testimonials-rating" role="img" aria-label="Rated 5 out of 5"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg></span><span>Agency · 32 seats</span></div>
            <blockquote><p>Per-person capacity planning changed our sprints: we now commit to what we can <mark>actually ship</mark>.</p></blockquote>
            <figcaption class="mv-testimonials-author"><span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2399f6e4'/%3E%3Cstop offset='1' stop-color='%230f766e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%23f8fafc'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23b98363'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23b98363'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%231c1917'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">KB</span></span><span><span class="mv-testimonials-name">Kwame Boateng</span><span class="mv-testimonials-role">Head of Production · Arcadia</span></span><svg class="mv-testimonials-logo" viewBox="0 0 114 32" role="img" aria-label="Arcadia" fill="currentColor"><path d="M3 26a10 10 0 0 1 20 0" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/><circle cx="13" cy="10" r="3"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Arcadia</text></svg></figcaption>
          </figure>
          <figure class="mv-testimonials-card">
            <div class="mv-testimonials-card-top"><span class="mv-testimonials-rating" role="img" aria-label="Rated 5 out of 5"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg></span><span>Product · 18 seats</span></div>
            <blockquote><p>Clients approve mockups right in the portal. No more email back-and-forth or “final_v7” files.</p></blockquote>
            <figcaption class="mv-testimonials-author"><span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fde68a'/%3E%3Cstop offset='1' stop-color='%23d97706'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M17.5 30c0-10 6-16.5 14.5-16.5S46.5 20 46.5 30v17h-29z' fill='%237c2d12'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%231f2937'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23e7b590'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23e7b590'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%237c2d12'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">IM</span></span><span><span class="mv-testimonials-name">Isabel Moreno</span><span class="mv-testimonials-role">Product Manager · Polaris</span></span><svg class="mv-testimonials-logo" viewBox="0 0 114 32" role="img" aria-label="Polaris" fill="currentColor"><path d="M13 2c1 8 3 11 11 14-8 3-10 6-11 14-1-8-3-11-11-14 8-3 10-6 11-14z"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Polaris</text></svg></figcaption>
          </figure>
          <figure class="mv-testimonials-card">
            <div class="mv-testimonials-card-top"><span class="mv-testimonials-rating" role="img" aria-label="Rated 5 out of 5"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg></span><span>Studio · 9 seats</span></div>
            <blockquote><p>Time tracking fills itself in. We found out we were losing <mark>11 billable hours a week</mark>.</p></blockquote>
            <figcaption class="mv-testimonials-author"><span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23bae6fd'/%3E%3Cstop offset='1' stop-color='%232563eb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%230f172a'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23f3d1b5'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23f3d1b5'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%23a16207'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">TG</span></span><span><span class="mv-testimonials-name">Tom Grant</span><span class="mv-testimonials-role">Founder · Nebula Studio</span></span><svg class="mv-testimonials-logo" viewBox="0 0 92 32" role="img" aria-label="Lumen" fill="currentColor"><circle cx="13" cy="16" r="6"/><path d="M13 3v4M13 25v4M0 16h4M22 16h4M4 7l3 3M19 22l3 3M4 25l3-3M19 10l3-3" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" fill="none"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Lumen</text></svg></figcaption>
          </figure>
          <figure class="mv-testimonials-card">
            <div class="mv-testimonials-card-top"><span class="mv-testimonials-rating" role="img" aria-label="Rated 5 out of 5"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg></span><span>Software · 60 seats</span></div>
            <blockquote><p>A pull request gets merged, the ticket moves to QA, the client gets notified. Zero clicks.</p></blockquote>
            <figcaption class="mv-testimonials-author"><span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fecdd3'/%3E%3Cstop offset='1' stop-color='%23e11d48'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M17.5 30c0-10 6-16.5 14.5-16.5S46.5 20 46.5 30v17h-29z' fill='%23111827'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%23fafaf9'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%238d5a3b'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%238d5a3b'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%23111827'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">SN</span></span><span><span class="mv-testimonials-name">Sofia Nguyen</span><span class="mv-testimonials-role">Lead Developer · Vertex</span></span><svg class="mv-testimonials-logo" viewBox="0 0 103 32" role="img" aria-label="Vertex" fill="currentColor"><path d="M13 3 24 9.5v13L13 29 2 22.5v-13z" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><circle cx="13" cy="16" r="3.5"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Vertex</text></svg></figcaption>
          </figure>
          <figure class="mv-testimonials-card">
            <div class="mv-testimonials-card-top"><span class="mv-testimonials-rating" role="img" aria-label="Rated 5 out of 5"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg></span><span>Consulting · 45 seats</span></div>
            <blockquote><p>The Monday report replaced our hour-long status meeting. Everyone reads the same numbers.</p></blockquote>
            <figcaption class="mv-testimonials-author"><span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23bbf7d0'/%3E%3Cstop offset='1' stop-color='%2316a34a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%23172554'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23eac2a0'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23eac2a0'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%234a2c1a'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">HL</span></span><span><span class="mv-testimonials-name">Hugo Larsen</span><span class="mv-testimonials-role">Head of Delivery · Kairos</span></span><svg class="mv-testimonials-logo" viewBox="0 0 103 32" role="img" aria-label="Kairos" fill="currentColor"><path d="M4 4h18L13 16l9 12H4l9-12z" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linejoin="round"/><path d="M8 26h10l-5-6z"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Kairos</text></svg></figcaption>
          </figure>
        </div>
      </div>
    </section>
  </div>

  <!-- ═════════ Ticker ═════════ -->
  <div role="tabpanel" data-value="wall">
    <section class="mv-testimonials" data-variant="wall" aria-labelledby="tm-wall-title" style="--mv-testimonials-bg:var(--mv-bg-subtle)">
      <div class="mv-testimonials-inner">
        <header class="mv-testimonials-header">
          <div class="mv-testimonials-heading">
            <p class="mv-testimonials-eyebrow">Heard this week</p>
            <h2 class="mv-testimonials-title" id="tm-wall-title">What teams tell us after their first sprint</h2>
          </div>
          <div class="mv-testimonials-summary">
            <span class="mv-testimonials-score" aria-hidden="true">4.9</span>
            <span class="mv-testimonials-rating" role="img" aria-label="Average rating: 4.9 out of 5"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m12 2.8 2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z"/></svg></span>
            <span class="mv-testimonials-count">Average of 3,812 verified reviews</span>
            <div class="mv-avatar-group" data-size="sm" role="group" aria-label="Some of our reviewers">
              <span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23c4b5fd'/%3E%3Cstop offset='1' stop-color='%237c3aed'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M17.5 30c0-10 6-16.5 14.5-16.5S46.5 20 46.5 30v17h-29z' fill='%233b2418'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%231e1b4b'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23f1c7a8'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23f1c7a8'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%233b2418'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">LM</span></span><span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2399f6e4'/%3E%3Cstop offset='1' stop-color='%230f766e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%23f8fafc'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23b98363'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23b98363'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%231c1917'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">KB</span></span><span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fde68a'/%3E%3Cstop offset='1' stop-color='%23d97706'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M17.5 30c0-10 6-16.5 14.5-16.5S46.5 20 46.5 30v17h-29z' fill='%237c2d12'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%231f2937'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23e7b590'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23e7b590'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%237c2d12'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">IM</span></span><span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23bae6fd'/%3E%3Cstop offset='1' stop-color='%232563eb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%230f172a'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23f3d1b5'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23f3d1b5'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%23a16207'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">TG</span></span><span class="mv-avatar-more" aria-label="and 3,808 more">+3k</span>
            </div>
          </div>
        </header>
        <div class="mv-testimonials-wall">
          <mv-marquee speed="32" fade pause-on-hover aria-label="Customer testimonials">
          <figure class="mv-testimonials-card">
            <blockquote><p>The assistant spotted an overloaded sprint before I did. It saved me an evening of reshuffling.</p></blockquote>
            <figcaption class="mv-testimonials-author"><span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e9d5ff'/%3E%3Cstop offset='1' stop-color='%239333ea'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M17.5 30c0-10 6-16.5 14.5-16.5S46.5 20 46.5 30v17h-29z' fill='%23b45309'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%23fef3c7'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23f5d0b5'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23f5d0b5'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%23b45309'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">CR</span></span><span><span class="mv-testimonials-name">Camila Rossi</span><span class="mv-testimonials-role">Project Manager · Tideway</span></span><svg class="mv-testimonials-logo" viewBox="0 0 114 32" role="img" aria-label="Tideway" fill="currentColor"><path d="M1 12c4-4 8-4 12 0s8 4 12 0M1 20c4-4 8-4 12 0s8 4 12 0" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Tideway</text></svg></figcaption>
          </figure>
          <figure class="mv-testimonials-card" data-featured>
            <blockquote><p>Onboarding 40 engineers took an afternoon. The import kept every label and every due date.</p></blockquote>
            <figcaption class="mv-testimonials-author"><span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ddd6fe'/%3E%3Cstop offset='1' stop-color='%234f46e5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%23ecfccb'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23d6a37e'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23d6a37e'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%231c1917'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">TN</span></span><span><span class="mv-testimonials-name">Takumi Nakamura</span><span class="mv-testimonials-role">VP of Engineering · Mosaic</span></span><svg class="mv-testimonials-logo" viewBox="0 0 118 32" role="img" aria-label="Mosaic" fill="currentColor"><rect x="2" y="3" width="10" height="10" rx="2.5"/><rect x="14" y="3" width="10" height="10" rx="5" opacity=".55"/><rect x="2" y="15" width="10" height="10" rx="5" opacity=".55"/><rect x="14" y="15" width="10" height="10" rx="2.5"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Mosaic</text></svg></figcaption>
          </figure>
          <figure class="mv-testimonials-card">
            <blockquote><p>Our board meetings now start from one Canopy dashboard instead of five slide decks.</p></blockquote>
            <figcaption class="mv-testimonials-author"><span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fed7aa'/%3E%3Cstop offset='1' stop-color='%23ea580c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%230c0a09'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23a8704f'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23a8704f'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%230a0a0a'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">YH</span></span><span><span class="mv-testimonials-name">Yasmin Hassan</span><span class="mv-testimonials-role">CEO · Octave</span></span><svg class="mv-testimonials-logo" viewBox="0 0 103 32" role="img" aria-label="Octave" fill="currentColor"><circle cx="9" cy="16" r="7" fill="none" stroke="currentColor" stroke-width="3"/><circle cx="18" cy="16" r="7"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Octave</text></svg></figcaption>
          </figure>
          <figure class="mv-testimonials-card">
            <blockquote><p>Recurring checklists run the whole ops calendar. Nothing slips through on Friday afternoons anymore.</p></blockquote>
            <figcaption class="mv-testimonials-author"><span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fbcfe8'/%3E%3Cstop offset='1' stop-color='%23db2777'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M17.5 30c0-10 6-16.5 14.5-16.5S46.5 20 46.5 30v17h-29z' fill='%23292524'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%231e293b'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23c68b62'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23c68b62'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%23292524'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">NB</span></span><span><span class="mv-testimonials-name">Nadia Bello</span><span class="mv-testimonials-role">Head of Operations · Haze</span></span><svg class="mv-testimonials-logo" viewBox="0 0 100 32" role="img" aria-label="Haze" fill="currentColor"><path d="M3 20a6 6 0 0 1 5.5-8.3A8 8 0 0 1 24 13a5 5 0 0 1-1 10H8" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Haze</text></svg></figcaption>
          </figure>
          <figure class="mv-testimonials-card">
            <blockquote><p>Campaign launches used to live in chat threads. Now every asset has an owner and a date.</p></blockquote>
            <figcaption class="mv-testimonials-author"><span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23a5f3fc'/%3E%3Cstop offset='1' stop-color='%230891b2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M17.5 30c0-10 6-16.5 14.5-16.5S46.5 20 46.5 30v17h-29z' fill='%2357534e'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%233f3f46'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23f1c7a8'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23f1c7a8'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%2357534e'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">MP</span></span><span><span class="mv-testimonials-name">Maria Perez</span><span class="mv-testimonials-role">Marketing Lead · Helix</span></span><svg class="mv-testimonials-logo" viewBox="0 0 92 32" role="img" aria-label="Helix" fill="currentColor"><path d="M5 3c0 9 16 9 16 13S5 20 5 29M21 3c0 9-16 9-16 13s16 4 16 13" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Helix</text></svg></figcaption>
          </figure>
          <figure class="mv-testimonials-card">
            <blockquote><p>As a freelancer I bill straight from tracked time. Invoices go out the same day the work ships.</p></blockquote>
            <figcaption class="mv-testimonials-author"><span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e2e8f0'/%3E%3Cstop offset='1' stop-color='%23475569'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%23f0fdf4'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23f0c9a6'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23f0c9a6'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%2378350f'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">JF</span></span><span><span class="mv-testimonials-name">Jonas Fischer</span><span class="mv-testimonials-role">Freelance UX Designer · Quanta</span></span><svg class="mv-testimonials-logo" viewBox="0 0 108 32" role="img" aria-label="Quanta" fill="currentColor"><circle cx="13" cy="16" r="10" fill="none" stroke="currentColor" stroke-width="3"/><path d="m17 20 6 6" stroke="currentColor" stroke-width="3.2" stroke-linecap="round"/><circle cx="13" cy="16" r="3.5"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Quanta</text></svg></figcaption>
          </figure>
          <figure class="mv-testimonials-card">
            <blockquote><p>Guests can comment without a seat, so clients actually join the conversation.</p></blockquote>
            <figcaption class="mv-testimonials-author"><span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fde68a'/%3E%3Cstop offset='1' stop-color='%23d97706'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M17.5 30c0-10 6-16.5 14.5-16.5S46.5 20 46.5 30v17h-29z' fill='%237c2d12'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%231f2937'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23e7b590'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23e7b590'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%237c2d12'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">IM</span></span><span><span class="mv-testimonials-name">Isabel Moreno</span><span class="mv-testimonials-role">Product Manager · Polaris</span></span><svg class="mv-testimonials-logo" viewBox="0 0 114 32" role="img" aria-label="Polaris" fill="currentColor"><path d="M13 2c1 8 3 11 11 14-8 3-10 6-11 14-1-8-3-11-11-14 8-3 10-6 11-14z"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Polaris</text></svg></figcaption>
          </figure>
          </mv-marquee>
        </div>
      </div>
    </section>
  </div>

  <!-- ═════════ Case study quote ═════════ -->
  <div role="tabpanel" data-value="quote">
    <section class="mv-testimonials" data-variant="quote" aria-labelledby="tm-quote-title">
      <div class="mv-testimonials-inner">
        <header class="mv-testimonials-header">
          <div class="mv-testimonials-heading">
            <p class="mv-testimonials-eyebrow">Case study · Mosaic</p>
            <h2 class="mv-testimonials-title" id="tm-quote-title">How a 300-person engineering org cut its planning overhead in half</h2>
          </div>
        </header>
        <div class="mv-testimonials-quote">
          <figure class="mv-testimonials-quote-main">
            <svg class="mv-testimonials-mark" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 18.5V13c0-4.1 1.9-6.9 5.6-8.4l.9 1.7C8.4 7.3 7.4 8.9 7.2 11H10v7.5zm9.5 0V13c0-4.1 1.9-6.9 5.6-8.4l.9 1.7c-2.1 1-3.1 2.6-3.3 4.7h2.8v7.5z"/></svg>
            <blockquote><p>We used to spend every other Friday reconciling five tools. With Canopy, planning is a <span class="mv-testimonials-highlight">twenty-minute ritual</span> — and for the first time, finance and engineering read the same roadmap.</p></blockquote>
            <figcaption><span class="mv-avatar"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ddd6fe'/%3E%3Cstop offset='1' stop-color='%234f46e5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' fill='url%28%23g%29'/%3E%3Cpath d='M10 66c1-12 10-19 22-19s21 7 22 19z' fill='%23ecfccb'/%3E%3Crect x='27' y='36' width='10' height='12' rx='4' fill='%23d6a37e'/%3E%3Ccircle cx='32' cy='27' r='11' fill='%23d6a37e'/%3E%3Cpath d='M20.5 26c0-8 5-13 11.5-13s11.5 5 11.5 13c-2-4-6-6.5-11.5-6.5S22.5 22 20.5 26z' fill='%231c1917'/%3E%3C/svg%3E" alt=""><span class="mv-avatar-fallback" aria-hidden="true">TN</span></span><span><span class="mv-testimonials-name">Takumi Nakamura</span><span class="mv-testimonials-role">VP of Engineering · Mosaic</span></span><svg class="mv-testimonials-logo" viewBox="0 0 118 32" role="img" aria-label="Mosaic" fill="currentColor"><rect x="2" y="3" width="10" height="10" rx="2.5"/><rect x="14" y="3" width="10" height="10" rx="5" opacity=".55"/><rect x="2" y="15" width="10" height="10" rx="5" opacity=".55"/><rect x="14" y="15" width="10" height="10" rx="2.5"/><text x="33" y="23" font-size="19" font-weight="700" letter-spacing="-0.6">Mosaic</text></svg></figcaption>
          </figure>
          <div class="mv-testimonials-stats">
            <dl>
            <div><dt>less time spent in planning meetings</dt><dd>−52%</dd></div>
            <div><dt>tools retired in the first month</dt><dd>5 → 1</dd></div>
            <div><dt>of sprints now ship on the committed date</dt><dd>94%</dd></div>
            </dl>
            <a href="#testimonials-demo">Read the full story</a>
          </div>
        </div>
      </div>
    </section>
  </div>
</mv-tabs>

API

Attributes

Name	Type	Description
`data-variant`	grid \| wall \| quote	Informational; the layout comes from the container you pick: .mv-testimonials-grid (ledger), .mv-testimonials-wall (ticker) or .mv-testimonials-quote (case study).
`data-featured`	boolean	On a card: tinted entry; in the ledger it spans 2 columns (2 × 2 cells from 60rem) and uses display type, ideal with a .mv-testimonials-metric.
`data-clamp`	boolean	On .mv-testimonials-grid: clips at --mv-testimonials-clamp with a fade (pair it with a “Show more” button).
`data-compact`	boolean	On .mv-testimonials-rating: one star followed by the numeric value in a `<span>`.

Content structure

Name	Description
`.mv-testimonials-header`	.mv-testimonials-heading (-eyebrow, -title, -lead) on the left; optional .mv-testimonials-summary (-score, -rating, -count, .mv-avatar-group) on the right from 48rem.
`figure.mv-testimonials-card`	Optional -card-top (rating + context; the entry number is added automatically), optional -metric (`<strong>` figure + `<span>` label), `<blockquote>` (hanging quotation mark; `<mark>` draws a highlighter underline), figcaption.mv-testimonials-author (avatar, -name, -role, -logo).
`.mv-testimonials-grid`	Ruled ledger: 1 → 2 → 3 columns depending on container width, cells separated by hairlines; an unfilled last row stays blank.
`.mv-testimonials-wall`	Holds an `<mv-marquee>` (horizontal, fade, pause-on-hover) of compact cards with an accent top rule.
`.mv-testimonials-quote`	Case study: figure.mv-testimonials-quote-main (.mv-testimonials-mark, `<blockquote>` with .mv-testimonials-highlight, `<figcaption>`) + .mv-testimonials-stats (`<dl>` of `<div>`<dt/><dd/>`</div>` figures, optional link), side by side from 52rem. A bare figure.mv-testimonials-quote with blockquote + figcaption is still supported.

CSS classes

Name	Description
`mv-testimonials`	Root section, mv-testimonials query container.

CSS variables

Name	Default	Description
`--mv-testimonials-max`	`72rem`	Max width.
`--mv-testimonials-bg`	`transparent`	Section background.
`--mv-testimonials-rule`	`var(--mv-border)`	Color of the hairline rules.
`--mv-testimonials-mark-color`	`var(--mv-accent)`	Quotation marks, highlighter and ticker top rule.
`--mv-testimonials-clamp`	`40rem`	Grid clip height (data-clamp).

Accessibility

Each testimonial is a <figure> with a <blockquote> and a <figcaption> (author). Avatars use an empty alt when the name is written next to them; ratings are exposed via role="img" + aria-label; the header score is aria-hidden and restated in the rating label. Case-study figures are a <dl> (label, then value). Entry numbers and quotation marks are generated content. In the ticker, marquee copies are inert and scrolling stops with reduced motion or on hover.