.ps-cmp {
padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 40px);
min-height: 480px;
background: #06141a;
color: #e0f2f7;
font-family: 'Inter', system-ui, sans-serif;
}
.ps-cmp-head { text-align: center; margin-bottom: clamp(20px, 4vw, 36px); }
.ps-cmp-head h2 {
font-size: clamp(22px, 3.2vw, 32px); font-weight: 700;
letter-spacing: -0.02em; margin: 0 0 8px; color: #f1fbff;
}
.ps-cmp-head p { color: #88a8b3; margin: 0; font-size: 14px; }
.ps-cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 980px; margin: 0 auto; }
.ps-cmp-tbl {
width: 100%; border-collapse: separate; border-spacing: 0;
font-size: 13.5px; min-width: 720px;
}
.ps-cmp-tbl th, .ps-cmp-tbl td {
text-align: center; padding: 14px 12px;
border-bottom: 1px solid rgba(34,211,238,0.1);
}
.ps-cmp-tbl thead th {
font-size: 14px; font-weight: 700;
color: #cfeaf2;
background: #0c1f27;
position: relative;
}
.ps-cmp-tbl thead th span:not(.ps-cmp-pill) {
display: block; font-size: 13px; font-weight: 500; color: #88a8b3; margin-top: 4px;
}
.ps-cmp-fc { text-align: left !important; color: #88a8b3 !important; font-weight: 500 !important; background: transparent !important; }
.ps-cmp-tbl tbody th {
text-align: left; font-weight: 500; color: #cfeaf2;
}
.ps-cmp-rec {
background: rgba(34,211,238,0.06);
color: #22d3ee;
position: relative;
}
.ps-cmp-tbl thead th.ps-cmp-rec {
background: linear-gradient(180deg, rgba(34,211,238,0.18), rgba(34,211,238,0.04));
color: #5eead4;
}
.ps-cmp-pill {
position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
background: #22d3ee; color: #06141a;
font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; padding: 3px 10px;
border-radius: 999px;
}
.ps-cmp-yes { display: inline-block; width: 22px; height: 22px; line-height: 22px;
border-radius: 50%; background: rgba(34,211,238,0.15); color: #22d3ee;
font-weight: 700;
}
.ps-cmp-no { color: #4a606a; font-weight: 500; }
.ps-cmp-tbl tfoot td { padding-top: 18px; padding-bottom: 4px; border: 0; }
.ps-cmp-cta {
display: inline-block; padding: 9px 16px; border-radius: 7px;
font-size: 12.5px; font-weight: 600;
text-decoration: none;
border: 1px solid rgba(34,211,238,0.3); color: #5eead4;
transition: background 0.18s, color 0.18s;
}
.ps-cmp-cta:hover { background: rgba(34,211,238,0.18); color: #f1fbff; }
.ps-cmp-cta-pri { background: #22d3ee; color: #06141a; border-color: #22d3ee; }
.ps-cmp-cta-pri:hover { background: #5eead4; color: #06141a; }
.ps-cmp-cta:focus-visible { outline: 2px solid #22d3ee; outline-offset: 3px; }
@media (max-width: 720px) {
.ps-cmp-scroll { padding-bottom: 8px; }
.ps-cmp-tbl thead th, .ps-cmp-tbl tbody th, .ps-cmp-tbl td { padding: 10px 8px; font-size: 12px; }
.ps-cmp-pill { font-size: 9px; padding: 2px 6px; }
} <section class="ps-cmp" aria-label="Plan comparison">
<header class="ps-cmp-head">
<h2>Compare every feature.</h2>
<p>Pick the column that matches what you ship today.</p>
</header>
<div class="ps-cmp-scroll">
<table class="ps-cmp-tbl">
<thead>
<tr>
<th scope="col" class="ps-cmp-fc">Feature</th>
<th scope="col">Free<br /><span>$0</span></th>
<th scope="col" class="ps-cmp-rec">
<span class="ps-cmp-pill">Recommended</span>Pro<br /><span>$24</span>
</th>
<th scope="col">Team<br /><span>$48</span></th>
<th scope="col">Enterprise<br /><span>Contact</span></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Projects</th>
<td>1</td>
<td class="ps-cmp-rec">10</td>
<td>50</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">Storage</th>
<td>500 MB</td>
<td class="ps-cmp-rec">10 GB</td>
<td>50 GB</td>
<td>500 GB</td>
</tr>
<tr>
<th scope="row">Custom domain</th>
<td><span class="ps-cmp-no" aria-label="not included">—</span></td>
<td class="ps-cmp-rec"><span class="ps-cmp-yes" aria-label="included">✓</span></td>
<td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
<td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
</tr>
<tr>
<th scope="row">Team roles</th>
<td><span class="ps-cmp-no" aria-label="not included">—</span></td>
<td class="ps-cmp-rec"><span class="ps-cmp-yes" aria-label="included">✓</span></td>
<td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
<td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
</tr>
<tr>
<th scope="row">Priority support</th>
<td><span class="ps-cmp-no" aria-label="not included">—</span></td>
<td class="ps-cmp-rec"><span class="ps-cmp-yes" aria-label="included">✓</span></td>
<td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
<td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
</tr>
<tr>
<th scope="row">SSO & SAML</th>
<td><span class="ps-cmp-no" aria-label="not included">—</span></td>
<td class="ps-cmp-rec"><span class="ps-cmp-no" aria-label="not included">—</span></td>
<td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
<td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
</tr>
<tr>
<th scope="row">Audit logs</th>
<td><span class="ps-cmp-no" aria-label="not included">—</span></td>
<td class="ps-cmp-rec"><span class="ps-cmp-no" aria-label="not included">—</span></td>
<td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
<td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
</tr>
<tr>
<th scope="row">99.99% SLA</th>
<td><span class="ps-cmp-no" aria-label="not included">—</span></td>
<td class="ps-cmp-rec"><span class="ps-cmp-no" aria-label="not included">—</span></td>
<td><span class="ps-cmp-no" aria-label="not included">—</span></td>
<td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
</tr>
<tr>
<th scope="row">Dedicated CSM</th>
<td><span class="ps-cmp-no" aria-label="not included">—</span></td>
<td class="ps-cmp-rec"><span class="ps-cmp-no" aria-label="not included">—</span></td>
<td><span class="ps-cmp-no" aria-label="not included">—</span></td>
<td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" class="ps-cmp-fc"></th>
<td><a class="ps-cmp-cta" href="#free">Get started</a></td>
<td class="ps-cmp-rec">
<a class="ps-cmp-cta ps-cmp-cta-pri" href="#pro">Choose Pro →</a>
</td>
<td><a class="ps-cmp-cta" href="#team">Choose Team</a></td>
<td><a class="ps-cmp-cta" href="#ent">Talk to sales</a></td>
</tr>
</tfoot>
</table>
</div>
</section> Live preview Edit any tab — preview updates live Ready