Vergelijkende prijstabel

<!-- Vergelijkende prijstabel · NedDev · eigen werk. -->
<div class="jouw-container">
<section class="pcmp">
  <div class="pcmp__inner">
    <header class="pcmp__head"><span class="pcmp__eyebrow">/ vergelijk</span><h2 class="pcmp__h2">Wat zit erin.</h2></header>
    <div class="pcmp__scroll">
      <table class="pcmp__t">
        <thead><tr><th class="pcmp__feat">Feature</th><th>Start</th><th class="pcmp__hi">Groei</th><th>Schaal</th></tr></thead>
        <tbody>
          <tr><td>Maatwerk design</td><td data-y></td><td class="pcmp__hi" data-y></td><td data-y></td></tr>
          <tr><td>Aantal pagina's</td><td>1</td><td class="pcmp__hi">10</td><td>∞</td></tr>
          <tr><td>SEO + content</td><td data-n></td><td class="pcmp__hi" data-y></td><td data-y></td></tr>
          <tr><td>Monitoring 24/7</td><td data-n></td><td class="pcmp__hi" data-y></td><td data-y></td></tr>
          <tr><td>SaaS / webshop</td><td data-n></td><td class="pcmp__hi" data-n></td><td data-y></td></tr>
          <tr><td>Dedicated team</td><td data-n></td><td class="pcmp__hi" data-n></td><td data-y></td></tr>
          <tr class="pcmp__pricerow"><td>Vanaf</td><td>€950</td><td class="pcmp__hi">€2450</td><td>€4900</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</section>
</div>

/* Vergelijkende prijstabel · NedDev · eigen werk. */
.pcmp{width:100%;box-sizing:border-box;background:#fff;color:#0a0a0a;border-bottom:1px solid rgba(10,10,10,.12)}
.pcmp__inner{max-width:900px;margin:0 auto;padding:44px 28px;box-sizing:border-box}
.pcmp__head{margin-bottom:24px}
.pcmp__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:#F5480F}
.pcmp__h2{font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(28px,4vw,42px);letter-spacing:-.02em;margin:12px 0 0;line-height:1}
.pcmp__scroll{overflow-x:auto}
.pcmp__t{width:100%;border-collapse:collapse;min-width:560px}
.pcmp__t th,.pcmp__t td{padding:14px 16px;text-align:center;border-bottom:1px solid rgba(10,10,10,.12)}
.pcmp__t thead th{position:sticky;top:0;background:#fff;font-family:'Switzer',sans-serif;font-weight:600;font-size:15px}
.pcmp__t th.pcmp__feat,.pcmp__t td:first-child{text-align:left;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.04em;color:#444}
.pcmp__t td{font-family:'Switzer',sans-serif;font-size:14px}
.pcmp__hi{background:#f4f3f1}
.pcmp__t thead th.pcmp__hi{color:#F5480F}
.pcmp__t td[data-y]:after{content:'✓';color:#F5480F;font-weight:700}
.pcmp__t td[data-n]:after{content:'·';color:#bbb}
.pcmp__pricerow td{font-family:'Boldonse',sans-serif;font-size:18px;border-top:2px solid #0a0a0a}
.pcmp__pricerow td:first-child{font-family:'JetBrains Mono',monospace;font-size:12px}