Tiered Architecture Pricing Comparison Table

<section id="pricing-module" class="pricing-section"
  style="background-color: #F2F0EB; color: #1C1C1B; font-family: 'Inter', sans-serif; padding: 8rem 0; line-height: 1.4; --paper: #F2F0EB; --ink: #1C1C1B; --forest: #2A382E; --clay: #C9A690; --highlight: #D4E157;">
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,600&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');

    #pricing-module .serif {
      font-family: 'Fraunces', serif;
      font-weight: 300;
      letter-spacing: -0.03em;
    }

    #pricing-module .mono {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    #pricing-module .container-slim {
      max-width: 900px;
      margin: 0 auto;
      padding: 0 2rem;
    }

    #pricing-module .price-row {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      border-bottom: 1px solid rgba(28, 28, 27, 0.15);
      padding: 1.5rem 0;
      text-align: left;
      transition: background 0.3s ease;
    }

    #pricing-module .price-row:hover {
      background: rgba(0, 0, 0, 0.02);
    }

    #pricing-module .btn-secondary {
      display: inline-block;
      padding: 1rem 2.5rem;
      border: 1px solid #1C1C1B;
      font-family: 'JetBrains Mono', monospace;
      margin-top: 3rem;
      transition: all 0.3s ease;
    }

    #pricing-module .btn-secondary:hover {
      background: #1C1C1B;
      color: #F2F0EB;
    }
  </style>

  <div class="container-slim">
    <div class="text-center mb-16">
      <div class="mono text-xs mb-4" style="color: #C9A690;">◆ Tiered Access</div>
      <h2 class="serif text-5xl mb-4">Transparent architecture pricing.</h2>
      <p style="color: #6B7280; font-weight: 300;">Fixed throughput logic. No hidden computational commissions.</p>
    </div>

    <div class="pricing-table" style="border-top: 2px solid #1C1C1B;">
      <!-- Header Row -->
      <div class="price-row mono" style="font-size: 0.7rem; border-bottom: 2px solid #1C1C1B; font-weight: 600;">
        <span>SYSTEM CAPABILITIES</span>
        <span>LEGACY CORE</span>
        <span style="color: #2A382E;">QUANTUM ENGINE</span>
      </div>

      <!-- Features -->
      <div class="price-row">
        <span class="font-medium">Data Ingestion Rate</span>
        <span style="color: #9CA3AF;">Manual Entry</span>
        <span class="font-bold">Real-time Stream</span>
      </div>

      <div class="price-row">
        <span class="font-medium">Liability Verification</span>
        <span style="color: #9CA3AF;">Periodic Review</span>
        <span class="font-bold">Continuous Scan</span>
      </div>

      <div class="price-row">
        <span class="font-medium">Audit Resilience</span>
        <span style="color: #9CA3AF;">External Legal</span>
        <span class="font-bold" style="color: #2A382E;">NATIVE DEFENSE</span>
      </div>

      <div class="price-row">
        <span class="font-medium">Pattern Recognition</span>
        <span style="color: #9CA3AF;">Template Based</span>
        <span class="font-bold">Neural Mapping</span>
      </div>

      <div class="price-row">
        <span class="font-medium">Predictive Modeling</span>
        <span style="color: #9CA3AF;">None</span>
        <span class="font-bold">Active Forecast</span>
      </div>

      <!-- Totals -->
      <div class="price-row serif text-3xl pt-10" style="border-bottom: none;">
        <span>Subscription Rate</span>
        <span style="color: #D1D5DB; text-decoration: line-through; font-size: 1.5rem;">$2,400</span>
        <div style="color: #2A382E;">
          $480<span class="mono" style="font-size: 0.75rem; vertical-align: middle; margin-left: 4px;">/ANNUAL</span>
        </div>
      </div>
    </div>

    <div class="text-center">
      <a href="#provision" class="btn-secondary">PROVISION ACCESS</a>
      <div class="mono text-[0.6rem] mt-6 opacity-40">ENCRYPTION PROTOCOL 256-BIT ACTIVE</div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const rows = document.querySelectorAll('.price-row');
      rows.forEach(row => {
        row.addEventListener('mouseenter', () => {
          row.style.paddingLeft = '10px';
        });
        row.addEventListener('mouseleave', () => {
          row.style.paddingLeft = '0px';
        });
      });
    });
  </script>
</section>