<section data-component-type="Content" class="max-w-[85%] mx-auto px-5 py-16" data-component-slug="saas-template-table">
  <!-- Heading -->
  <div class="text-center lg:flex-row flex flex-col justify-between mb-12">
    <h2 data-node="pricing_heading" data-node-type="text" data-node-label="Heading Text" data-node-default="The clarity you need before subscribing" class="text-3xl text-start md:text-4xl font-semibold text-[#151515]">
      {{pricing_heading}}
    </h2>
    <p data-node="pricing_subtext" data-node-type="textarea" data-node-label="Subtext" data-node-default="Compare limits, features, and scalability with full transparency. Upgrade only when you truly need more power." class="mt-3 text-[#4A6673] text-sm md:text-base text-end">
      {{pricing_subtext}}
    </p>
  </div>

  <!-- FULL GRID BORDER TABLE -->
  <img src="{{pricing_table}}" alt="pricing_table" data-node="pricing_table" data-node-type="file" data-node-label="Pricing Table Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767080608/seltrix/templates/saas-template/pricing-table.png" class="w-full h-auto">
</section>