<section class="bg-color-surface flex w-full items-center justify-center p-6 sm:p-8" aria-labelledby="team-section-8-title">
  <div class="flex w-full max-w-6xl flex-col gap-8">
    <header class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
      <div class="flex max-w-2xl flex-col gap-3">
        <plus-chip status="success" invert>Our team</plus-chip>
        <h2 id="team-section-8-title" class="text-color-default text-3xl font-semibold sm:text-4xl">Advisory board</h2>
        <p class="text-color-caption text-sm sm:text-base">Experienced operators helping the company make careful product and market decisions.</p>
      </div>
      <plus-button kind="outlined" status="primary" size="md" class="w-full md:w-auto">Meet advisors</plus-button>
    </header>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" role="list">
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/philip-jones-main.png" alt="Philip Jones" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Philip Jones</h3>
            <p class="text-color-caption text-sm">Founder Advisor</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Philip Jones social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Philip Jones on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Philip Jones on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Philip Jones website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/emma-clarke.png" alt="Emma Clarke" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Emma Clarke</h3>
            <p class="text-color-caption text-sm">Growth Advisor</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Emma Clarke social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Emma Clarke on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Emma Clarke on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Emma Clarke website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/daniel-hughes.png" alt="Daniel Hughes" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Daniel Hughes</h3>
            <p class="text-color-caption text-sm">Finance Advisor</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Daniel Hughes social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Daniel Hughes on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Daniel Hughes on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Daniel Hughes website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/sophia-bennett.png" alt="Sophia Bennett" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Sophia Bennett</h3>
            <p class="text-color-caption text-sm">People Advisor</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Sophia Bennett social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sophia Bennett on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sophia Bennett on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sophia Bennett website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
    </div>
  </div>
</section>

<section class="bg-color-surface flex w-full items-center justify-center p-6 sm:p-8" aria-labelledby="team-section-15-title">
  <div class="flex w-full max-w-6xl flex-col gap-8">
    <header class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
      <div class="flex max-w-2xl flex-col gap-3">
        <plus-chip status="success" invert>Our team</plus-chip>
        <h2 id="team-section-15-title" class="text-color-default text-3xl font-semibold sm:text-4xl">Board members</h2>
        <p class="text-color-caption text-sm sm:text-base">Governance partners helping leadership maintain focus, quality, and long-term discipline.</p>
      </div>
      <plus-button kind="outlined" status="primary" size="md" class="w-full md:w-auto">Read charter</plus-button>
    </header>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" role="list">
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/philip-jones-main.png" alt="Philip Jones" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Philip Jones</h3>
            <p class="text-color-caption text-sm">Board Chair</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Philip Jones social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Philip Jones on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Philip Jones on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Philip Jones website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/daniel-hughes.png" alt="Daniel Hughes" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Daniel Hughes</h3>
            <p class="text-color-caption text-sm">Independent Director</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Daniel Hughes social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Daniel Hughes on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Daniel Hughes on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Daniel Hughes website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/emma-clarke.png" alt="Emma Clarke" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Emma Clarke</h3>
            <p class="text-color-caption text-sm">Operator</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Emma Clarke social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Emma Clarke on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Emma Clarke on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Emma Clarke website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
    </div>
  </div>
</section>

<section class="bg-color-surface flex w-full items-center justify-center p-6 sm:p-8" aria-labelledby="team-section-16-title">
  <div class="flex w-full max-w-6xl flex-col gap-8">
    <header class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
      <div class="flex max-w-2xl flex-col gap-3">
        <plus-chip status="success" invert>Our team</plus-chip>
        <h2 id="team-section-16-title" class="text-color-default text-3xl font-semibold sm:text-4xl">Community moderators</h2>
        <p class="text-color-caption text-sm sm:text-base">Trusted community members keeping discussions helpful, inclusive, and easy to navigate.</p>
      </div>
      <plus-button kind="outlined" status="primary" size="md" class="w-full md:w-auto">Meet moderators</plus-button>
    </header>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" role="list">
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/dario-donin-avatar.png" alt="Dario Donin" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Dario Donin</h3>
            <p class="text-color-caption text-sm">Moderator</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Dario Donin social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Dario Donin on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Dario Donin on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Dario Donin website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/saris-fletcher.png" alt="Saris Fletcher" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Saris Fletcher</h3>
            <p class="text-color-caption text-sm">Community Design</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Saris Fletcher social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Saris Fletcher on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Saris Fletcher on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Saris Fletcher website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/sam-jones.png" alt="Sam Jones" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Sam Jones</h3>
            <p class="text-color-caption text-sm">Events</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Sam Jones social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sam Jones on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sam Jones on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sam Jones website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/lucy-page.png" alt="Lucy Page" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Lucy Page</h3>
            <p class="text-color-caption text-sm">Member Support</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Lucy Page social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Lucy Page on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Lucy Page on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Lucy Page website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
    </div>
  </div>
</section>

<section class="bg-color-surface flex w-full items-center justify-center p-6 sm:p-8" aria-labelledby="team-section-13-title">
  <div class="flex w-full max-w-6xl flex-col gap-8">
    <header class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
      <div class="flex max-w-2xl flex-col gap-3">
        <plus-chip status="success" invert>Our team</plus-chip>
        <h2 id="team-section-13-title" class="text-color-default text-3xl font-semibold sm:text-4xl">Customer success pod</h2>
        <p class="text-color-caption text-sm sm:text-base">Relationship owners guiding implementation, adoption reviews, and quarterly outcomes.</p>
      </div>
      <plus-button kind="outlined" status="primary" size="md" class="w-full md:w-auto">Book a review</plus-button>
    </header>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" role="list">
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/maria-donin.png" alt="Maria Donin" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Maria Donin</h3>
            <p class="text-color-caption text-sm">CS Manager</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Maria Donin social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Maria Donin on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Maria Donin on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Maria Donin website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/sam-jones.png" alt="Sam Jones" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Sam Jones</h3>
            <p class="text-color-caption text-sm">Onboarding</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Sam Jones social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sam Jones on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sam Jones on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sam Jones website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/alena-lubin.png" alt="Alena Lubin" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Alena Lubin</h3>
            <p class="text-color-caption text-sm">Success Lead</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Alena Lubin social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Alena Lubin on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Alena Lubin on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Alena Lubin website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
    </div>
  </div>
</section>

<section class="bg-color-surface flex w-full items-center justify-center p-6 sm:p-8" aria-labelledby="team-section-14-title">
  <div class="flex w-full max-w-6xl flex-col gap-8">
    <header class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
      <div class="flex max-w-2xl flex-col gap-3">
        <plus-chip status="success" invert>Our team</plus-chip>
        <h2 id="team-section-14-title" class="text-color-default text-3xl font-semibold sm:text-4xl">Design studio</h2>
        <p class="text-color-caption text-sm sm:text-base">Designers and researchers turning product insights into practical interface systems.</p>
      </div>
      <plus-button kind="outlined" status="primary" size="md" class="w-full md:w-auto">Explore work</plus-button>
    </header>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" role="list">
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/saris-fletcher.png" alt="Saris Fletcher" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Saris Fletcher</h3>
            <p class="text-color-caption text-sm">Design Lead</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Saris Fletcher social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Saris Fletcher on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Saris Fletcher on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Saris Fletcher website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/alena-lubin.png" alt="Alena Lubin" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Alena Lubin</h3>
            <p class="text-color-caption text-sm">Research Lead</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Alena Lubin social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Alena Lubin on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Alena Lubin on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Alena Lubin website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/lucy-page.png" alt="Lucy Page" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Lucy Page</h3>
            <p class="text-color-caption text-sm">Content Design</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Lucy Page social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Lucy Page on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Lucy Page on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Lucy Page website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/sophia-bennett.png" alt="Sophia Bennett" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Sophia Bennett</h3>
            <p class="text-color-caption text-sm">Visual Systems</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Sophia Bennett social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sophia Bennett on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sophia Bennett on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sophia Bennett website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
    </div>
  </div>
</section>

<section class="bg-color-surface flex w-full items-center justify-center p-6 sm:p-8" aria-labelledby="team-section-10-title">
  <div class="flex w-full max-w-6xl flex-col gap-8">
    <header class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
      <div class="flex max-w-2xl flex-col gap-3">
        <plus-chip status="success" invert>Our team</plus-chip>
        <h2 id="team-section-10-title" class="text-color-default text-3xl font-semibold sm:text-4xl">Engineering leads</h2>
        <p class="text-color-caption text-sm sm:text-base">Technical leaders owning platform reliability, frontend systems, and release quality.</p>
      </div>
      <plus-button kind="outlined" status="primary" size="md" class="w-full md:w-auto">View openings</plus-button>
    </header>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" role="list">
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/phillip-bothman.png" alt="Phillip Bothman" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Phillip Bothman</h3>
            <p class="text-color-caption text-sm">Frontend Lead</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Phillip Bothman social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Phillip Bothman on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Phillip Bothman on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Phillip Bothman website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/gustavo-saris.png" alt="Gustavo Saris" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Gustavo Saris</h3>
            <p class="text-color-caption text-sm">Platform Lead</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Gustavo Saris social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Gustavo Saris on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Gustavo Saris on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Gustavo Saris website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/phillip-rothman-avatar.png" alt="Phillip Rothman" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Phillip Rothman</h3>
            <p class="text-color-caption text-sm">Build Systems</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Phillip Rothman social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Phillip Rothman on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Phillip Rothman on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Phillip Rothman website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
    </div>
  </div>
</section>

<section class="bg-color-surface flex w-full items-center justify-center p-6 sm:p-8" aria-labelledby="team-section-18-title">
  <div class="flex w-full max-w-6xl flex-col gap-8">
    <header class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
      <div class="flex max-w-2xl flex-col gap-3">
        <plus-chip status="success" invert>Our team</plus-chip>
        <h2 id="team-section-18-title" class="text-color-default text-3xl font-semibold sm:text-4xl">Executive team</h2>
        <p class="text-color-caption text-sm sm:text-base">Leaders aligning company strategy, product direction, people systems, and customer trust.</p>
      </div>
      <plus-button kind="outlined" status="primary" size="md" class="w-full md:w-auto">Company story</plus-button>
    </header>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" role="list">
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/philip-jones-main.png" alt="Philip Jones" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Philip Jones</h3>
            <p class="text-color-caption text-sm">CEO &amp; Founder</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Philip Jones social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Philip Jones on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Philip Jones on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Philip Jones website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/emma-clarke.png" alt="Emma Clarke" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Emma Clarke</h3>
            <p class="text-color-caption text-sm">Chief Growth Officer</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Emma Clarke social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Emma Clarke on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Emma Clarke on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Emma Clarke website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/daniel-hughes.png" alt="Daniel Hughes" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Daniel Hughes</h3>
            <p class="text-color-caption text-sm">Chief Financial Officer</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Daniel Hughes social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Daniel Hughes on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Daniel Hughes on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Daniel Hughes website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/alena-lubin.png" alt="Alena Lubin" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Alena Lubin</h3>
            <p class="text-color-caption text-sm">Chief Product Officer</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Alena Lubin social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Alena Lubin on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Alena Lubin on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Alena Lubin website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
    </div>
  </div>
</section>

<section class="bg-color-surface flex w-full items-center justify-center p-6 sm:p-8" aria-labelledby="team-section-11-title">
  <div class="flex w-full max-w-6xl flex-col gap-8">
    <header class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
      <div class="flex max-w-2xl flex-col gap-3">
        <plus-chip status="success" invert>Our team</plus-chip>
        <h2 id="team-section-11-title" class="text-color-default text-3xl font-semibold sm:text-4xl">Hiring panel</h2>
        <p class="text-color-caption text-sm sm:text-base">Interviewers prepared to review craft, collaboration, and technical depth fairly.</p>
      </div>
      <plus-button kind="outlined" status="primary" size="md" class="w-full md:w-auto">Join the panel</plus-button>
    </header>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" role="list">
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/alena-lubin-avatar.png" alt="Alena Lubin" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Alena Lubin</h3>
            <p class="text-color-caption text-sm">Hiring Manager</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Alena Lubin social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Alena Lubin on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Alena Lubin on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Alena Lubin website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/daniel-hughes.png" alt="Daniel Hughes" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Daniel Hughes</h3>
            <p class="text-color-caption text-sm">Staff Engineer</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Daniel Hughes social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Daniel Hughes on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Daniel Hughes on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Daniel Hughes website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/sophia-bennett.png" alt="Sophia Bennett" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Sophia Bennett</h3>
            <p class="text-color-caption text-sm">Design Manager</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Sophia Bennett social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sophia Bennett on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sophia Bennett on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sophia Bennett website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/sam-jones.png" alt="Sam Jones" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Sam Jones</h3>
            <p class="text-color-caption text-sm">Product Partner</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Sam Jones social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sam Jones on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sam Jones on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sam Jones website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
    </div>
  </div>
</section>

<section class="bg-color-surface flex w-full items-center justify-center p-6 sm:p-8" aria-labelledby="team-section-20-title">
  <div class="flex w-full max-w-6xl flex-col gap-8">
    <header class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
      <div class="flex max-w-2xl flex-col gap-3">
        <plus-chip status="success" invert>Our team</plus-chip>
        <h2 id="team-section-20-title" class="text-color-default text-3xl font-semibold sm:text-4xl">Open source maintainers</h2>
        <p class="text-color-caption text-sm sm:text-base">Maintainers reviewing issues, merging improvements, and documenting reusable patterns.</p>
      </div>
      <plus-button kind="outlined" status="primary" size="md" class="w-full md:w-auto">Contribute</plus-button>
    </header>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" role="list">
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/phillip-bothman.png" alt="Phillip Bothman" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Phillip Bothman</h3>
            <p class="text-color-caption text-sm">Maintainer</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Phillip Bothman social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Phillip Bothman on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Phillip Bothman on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Phillip Bothman website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/gustavo-saris.png" alt="Gustavo Saris" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Gustavo Saris</h3>
            <p class="text-color-caption text-sm">Release Captain</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Gustavo Saris social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Gustavo Saris on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Gustavo Saris on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Gustavo Saris website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/lucy-page.png" alt="Lucy Page" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Lucy Page</h3>
            <p class="text-color-caption text-sm">Docs Maintainer</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Lucy Page social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Lucy Page on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Lucy Page on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Lucy Page website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/sam-jones.png" alt="Sam Jones" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Sam Jones</h3>
            <p class="text-color-caption text-sm">Community Triage</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Sam Jones social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sam Jones on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sam Jones on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sam Jones website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
    </div>
  </div>
</section>

<section class="bg-color-surface flex w-full items-center justify-center p-6 sm:p-8" aria-labelledby="team-section-19-title">
  <div class="flex w-full max-w-6xl flex-col gap-8">
    <header class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
      <div class="flex max-w-2xl flex-col gap-3">
        <plus-chip status="success" invert>Our team</plus-chip>
        <h2 id="team-section-19-title" class="text-color-default text-3xl font-semibold sm:text-4xl">Partner network</h2>
        <p class="text-color-caption text-sm sm:text-base">Implementation partners helping teams launch design systems and operational dashboards.</p>
      </div>
      <plus-button kind="outlined" status="primary" size="md" class="w-full md:w-auto">Become a partner</plus-button>
    </header>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3" role="list">
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/sophia-bennett.png" alt="Sophia Bennett" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Sophia Bennett</h3>
            <p class="text-color-caption text-sm">Partner Lead</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Sophia Bennett social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sophia Bennett on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sophia Bennett on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Sophia Bennett website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/phillip-rothman-avatar.png" alt="Phillip Rothman" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Phillip Rothman</h3>
            <p class="text-color-caption text-sm">Solutions Architect</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Phillip Rothman social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Phillip Rothman on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Phillip Rothman on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Phillip Rothman website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
      <article class="border-color-default bg-color-modal flex min-w-0 flex-col overflow-hidden rounded border" role="listitem">
        <div class="bg-color-default-default aspect-square w-full overflow-hidden"><img src="https://www.plusui.com/images/blocks/team-section/dario-donin-avatar.png" alt="Dario Donin" class="size-full object-cover object-top" /></div>
        <div class="flex flex-1 flex-col gap-3 p-4">
          <div class="min-w-0">
            <h3 class="text-color-default truncate text-lg font-semibold">Dario Donin</h3>
            <p class="text-color-caption text-sm">Technical Partner</p>
          </div>
          <p class="text-color-caption text-sm">Works across product craft, customer trust, and practical delivery systems.</p>
          <nav class="flex items-center gap-3 py-1" aria-label="Dario Donin social links">
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Dario Donin on LinkedIn">
              <i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Dario Donin on X">
              <i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i>
            </a>
            <a href="#" class="text-color-caption hover:text-color-default transition-colors" aria-label="Dario Donin website">
              <i class="fa-solid fa-link text-sm" aria-hidden="true"></i>
            </a>
          </nav>
        </div>
      </article>
    </div>
  </div>
</section>