<section class="ps-spr" aria-label="Pricing">
  <div class="ps-spr-marquee" aria-label="Customers using this product">
    <div class="ps-spr-track">
      <span class="ps-spr-logo">◇ NORTHWIND</span>
      <span class="ps-spr-logo">▲ APEX.IO</span>
      <span class="ps-spr-logo">★ PULSE</span>
      <span class="ps-spr-logo">⬣ HEXLAB</span>
      <span class="ps-spr-logo">◯ ORBITA</span>
      <span class="ps-spr-logo">◤ FLINT</span>
      <span class="ps-spr-logo">⬢ MERIDIAN</span>
      <span class="ps-spr-logo">◇ NORTHWIND</span>
      <span class="ps-spr-logo">▲ APEX.IO</span>
      <span class="ps-spr-logo">★ PULSE</span>
      <span class="ps-spr-logo">⬣ HEXLAB</span>
      <span class="ps-spr-logo">◯ ORBITA</span>
      <span class="ps-spr-logo">◤ FLINT</span>
      <span class="ps-spr-logo">⬢ MERIDIAN</span>
    </div>
  </div>
  <header class="ps-spr-head">
    <span class="ps-spr-rating" aria-label="Rated 4.9 out of 5">★★★★★ 4.9 from 12,400 teams</span>
    <h2>Pricing teams actually pay for.</h2>
  </header>
  <div class="ps-spr-grid">
    <article class="ps-spr-card">
      <h3>Free</h3>
      <div class="ps-spr-price"><em>$</em>0<span>forever</span></div>
      <ul>
        <li>1 project</li>
        <li>5 GB storage</li>
        <li>Community</li>
      </ul>
      <a class="ps-spr-cta" href="#free">Start free</a>
    </article>
    <article class="ps-spr-card ps-spr-best">
      <span class="ps-spr-tag">Most teams pick this</span>
      <h3>Team</h3>
      <div class="ps-spr-price"><em>$</em>32<span>/mo</span></div>
      <ul>
        <li>Unlimited projects</li>
        <li>Priority support</li>
        <li>SSO + roles</li>
      </ul>
      <a class="ps-spr-cta ps-spr-cta-pri" href="#team">Choose Team</a>
    </article>
    <article class="ps-spr-card">
      <h3>Enterprise</h3>
      <div class="ps-spr-price"><em>$</em>0<span>custom</span></div>
      <ul>
        <li>Everything in Team</li>
        <li>Dedicated CSM</li>
        <li>SLA 99.99%</li>
      </ul>
      <a class="ps-spr-cta" href="#ent">Talk to sales</a>
    </article>
  </div>
</section>

.ps-spr {
  position: relative;
  overflow: hidden;
  contain: layout paint;
  padding: clamp(20px, 4vw, 36px) clamp(20px, 4vw, 40px) clamp(28px, 5vw, 48px);
  min-height: 480px;
  background: #0f172a;
  color: #e2e8f0;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-spr-marquee {
  position: relative; overflow: hidden;
  contain: layout paint;
  border-block: 1px solid rgba(163,230,53,0.18);
  margin: 0 calc(-1 * clamp(20px, 4vw, 40px)) clamp(20px, 4vw, 32px);
  padding: 14px 0;
  background: rgba(15,23,42,0.6);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ps-spr-track {
  display: flex; gap: 56px;
  white-space: nowrap;
  animation: ps-spr-roll 28s linear infinite;
  width: max-content;
}
@keyframes ps-spr-roll { to { transform: translateX(-50%); } }
.ps-spr-logo {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 700; letter-spacing: 0.18em;
  color: #94a3b8; flex-shrink: 0;
}
.ps-spr-head { text-align: center; margin-bottom: clamp(20px, 4vw, 32px); }
.ps-spr-rating {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; color: #a3e635;
  margin-bottom: 10px;
}
.ps-spr-head h2 {
  font-size: clamp(24px, 3.6vw, 36px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0; color: #fff;
}
.ps-spr-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; max-width: 940px; margin: 0 auto;
  align-items: center;
}
.ps-spr-card {
  position: relative;
  background: #1e293b;
  border: 1px solid rgba(163,230,53,0.12);
  border-radius: 12px;
  padding: 22px 20px 18px;
  display: flex; flex-direction: column;
}
.ps-spr-best {
  background: linear-gradient(180deg, #1e293b, #243f1a);
  border-color: #a3e635;
  box-shadow: 0 0 0 1px #a3e635 inset, 0 14px 36px rgba(163,230,53,0.18);
}
.ps-spr-tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: #a3e635; color: #0f172a;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 11px;
  border-radius: 999px;
}
.ps-spr-card h3 {
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; margin: 0 0 12px; color: #cbd5e1;
}
.ps-spr-best h3 { color: #d9f99d; }
.ps-spr-price {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 38px; font-weight: 800; letter-spacing: -0.03em;
  margin-bottom: 18px; color: #fff;
}
.ps-spr-price em { font-size: 0.5em; font-style: normal; padding-right: 2px; opacity: 0.7; }
.ps-spr-price span { font-size: 0.32em; font-weight: 500; opacity: 0.65; margin-left: 6px; }
.ps-spr-card ul {
  list-style: none; padding: 0; margin: 0 0 18px; flex: 1;
  font-size: 13px; line-height: 1.95; color: #b8c1d1;
}
.ps-spr-card ul li::before { content: '✓'; color: #a3e635; display: inline-block; width: 20px; font-weight: 700; }
.ps-spr-cta {
  display: block; text-align: center;
  padding: 10px 16px; border-radius: 8px;
  text-decoration: none; font-size: 13px; font-weight: 600;
  background: rgba(163,230,53,0.1); color: #a3e635;
  border: 1px solid rgba(163,230,53,0.28);
  transition: background 0.18s, color 0.18s;
}
.ps-spr-cta-pri { background: #a3e635; color: #0f172a; border-color: #a3e635; }
.ps-spr-cta:hover { background: #a3e635; color: #0f172a; }
.ps-spr-cta-pri:hover { background: #d9f99d; }
.ps-spr-cta:focus-visible { outline: 2px solid #a3e635; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-spr-grid { grid-template-columns: 1fr; max-width: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-spr-track { animation: none; }
}