{# Free vs PRO comparison and PRO pricing from the supsystic.com plugin page. Shown only while PRO is not installed. #}
{% verbatim %}
<div class="dtgs-pro-offer">
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false"><defs><symbol id="dtIconStar" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></symbol><symbol id="dtIconYes" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></symbol><symbol id="dtIconNo" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" d="M5 12h14"/></symbol></defs></svg>
<section class="dtMtxSection" id="dtgs-compare">
    <div class="dtMtxTop">
      <div class="dtMtxSectionInner">
        <div class="dtSectionLabel">Free vs Pro</div>
        <h2 class="dtMtxSectionTitle">Everything in the Box &mdash; and Exactly What Pro Adds</h2>
        <div class="dtMtxSectionSubtitle">54+ capabilities, compared line by line and checked against the plugin itself.</div>
        <div class="dtMtxScore">
          <div class="dtMtxPlan">
            <div class="dtMtxPlanTop">
              
              <div class="dtMtxRing">
                <svg viewBox="0 0 92 92" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <circle class="dtMtxRingTrack" cx="46" cy="46" r="40"></circle>
                  <circle class="dtMtxRingFill" cx="46" cy="46" r="40"></circle>
                </svg>
                <div class="dtMtxRingLabel">
                  <span class="dtMtxRingNum" data-count="28">28</span>
                  <span class="dtMtxRingOf">of 54</span>
                </div>
              </div>
              <div>
                <div class="dtMtxPlanName">Free</div>
                <div class="dtMtxPlanPrice">$0 <span>forever</span></div>
              </div>
            </div>
            <div class="dtMtxPlanText">Unlimited tables and rows, the spreadsheet-style editor with formulas, sorting, search, pagination, responsive modes, server-side processing for big tables and AI read access &mdash; everything you need to publish a clean data table today. Nothing expires.</div>
          </div>
          <div class="dtMtxPlan dtMtxPlanPro">
            <div class="dtMtxPlanTop">
              
              <div class="dtMtxRing">
                <svg viewBox="0 0 92 92" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <circle class="dtMtxRingTrack" cx="46" cy="46" r="40"></circle>
                  <circle class="dtMtxRingFill" cx="46" cy="46" r="40"></circle>
                </svg>
                <div class="dtMtxRingLabel">
                  <span class="dtMtxRingNum" data-count="54">54</span>
                  <span class="dtMtxRingOf">of 54</span>
                </div>
              </div>
              <div>
                <div class="dtMtxPlanName">Pro</div>
                <div class="dtMtxPlanPrice">from $59 <span>per year</span></div>
                <div class="dtMtxPlanPriceAlt"><span>or</span><b>$199</b><span>lifetime</span></div>
              </div>
            </div>
            <div class="dtMtxPlanText">Live data sources, import and export, front-end editing, charts, conditional formatting, WooCommerce filters and role control &mdash; the full toolkit, on every license tier.</div>
            <a href="#dtgs-pricing" class="dtBtnPrimary">
              View License Options
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="dtMtxBottom">
      <div class="dtMtxSectionInner">
        <div class="dtMtxTableWrap">
          <div class="dtMtxControls">
            <div class="dtMtxControlsTitle">Full feature comparison</div>
            <div class="dtMtxFilters" role="group" aria-label="Filter the comparison">
              <button type="button" class="dtMtxFilter dtMtxFilterActive" data-dt-tier-filter="all">All 54</button>
              <button type="button" class="dtMtxFilter" data-dt-tier-filter="free">In Free (28)</button>
              <button type="button" class="dtMtxFilter" data-dt-tier-filter="pro">Pro only (26)</button>
            </div>
          </div>
          <div class="dtMtxTable">
            <div class="dtMtxRow dtMtxHeadRow">
              <div class="dtMtxCell dtMtxCellFeature">Capability</div>
              <div class="dtMtxCell dtMtxHeadPlan">
                <strong>Free</strong>
                <span class="dtMtxHeadPlanSub">wordpress.org</span>
              </div>
              <div class="dtMtxCell dtMtxHeadPlan dtMtxHeadPro">
                <strong>Pro</strong>
                <span class="dtMtxHeadPlanSub">from $59/yr</span>
                <span class="dtMtxHeadPlanAlt">or $199 lifetime</span>
              </div>
            </div>

            <div class="dtMtxGroup" data-dt-group>
              <div class="dtMtxGroupName">
                <span class="dtMtxGroupIcon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 01-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0112 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5"/></svg></span>
                Tables &amp; editing
              </div>
              <div class="dtMtxGroupMeter">
                <span class="dtMtxGroupBar"><span class="dtMtxGroupBarFill" style="width:64%"></span></span>
                <span class="dtMtxGroupCount"><b>7</b> of 11 in Free</span>
              </div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">Tables and rows</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxVal">Unlimited</span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxVal">Unlimited</span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature"><a href="https://supsystic.com/feature/table-online-builder/" target="_blank" rel="noopener">Spreadsheet-style editor</a><span class="dtMtxHint">Familiar cell grid with copy, paste and fill</span></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">Table creation wizard</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">Excel-style formulas<span class="dtMtxHint">SUM, AVERAGE, IF and the usual set, per cell</span></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">Cell formatting<span class="dtMtxHint">Colours, borders, alignment, merged cells</span></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">Images, links, video &amp; HTML in cells</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">Column visibility &amp; ordering</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">Edit column headers</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">Custom font family</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">Conditional formatting<span class="dtMtxHint">Colour cells by value</span></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">Table history<span class="dtMtxHint">Restore an earlier version of a table</span></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>

            <div class="dtMtxGroup" data-dt-group>
              <div class="dtMtxGroupName">
                <span class="dtMtxGroupIcon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg></span>
                Front-end display
              </div>
              <div class="dtMtxGroupMeter">
                <span class="dtMtxGroupBar"><span class="dtMtxGroupBarFill" style="width:50%"></span></span>
                <span class="dtMtxGroupCount"><b>6</b> of 12 in Free</span>
              </div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature"><a href="https://supsystic.com/feature/sorting-feature/" target="_blank" rel="noopener">Sorting</a></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature"><a href="https://supsystic.com/feature/search-feature/" target="_blank" rel="noopener">Search</a></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature"><a href="https://supsystic.com/feature/pagination-feature/" target="_blank" rel="noopener">Pagination</a></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature"><a href="https://supsystic.com/feature/responsive-modes-feature/" target="_blank" rel="noopener">Responsive modes</a><span class="dtMtxHint">Collapse, stack or scroll on small screens</span></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">Server-side processing<span class="dtMtxHint">Loads big tables page by page</span></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">Accessible HTML table markup<span class="dtMtxHint">Real &lt;table&gt; elements, keyboard-navigable</span></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">Charts &amp; graphs<span class="dtMtxHint">Line, bar, pie, area, bubble &mdash; from the table data</span></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">Lightbox for images</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">Collapsible rows</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">Tooltips in cells</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">Global search across tables<span class="dtMtxHint">One search box for every table on the page</span></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">Load tables by AJAX</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>

            <div class="dtMtxGroup" data-dt-group>
              <div class="dtMtxGroupName">
                <span class="dtMtxGroupIcon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9.75v6.75m0 0l-3-3m3 3l3-3m-8.25 6a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z"/></svg></span>
                Data sources &amp; import
              </div>
              <div class="dtMtxGroupMeter">
                <span class="dtMtxGroupBar"><span class="dtMtxGroupBarFill" style="width:29%"></span></span>
                <span class="dtMtxGroupCount"><b>2</b> of 7 in Free</span>
              </div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">Manual entry &amp; paste from spreadsheet</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature"><a href="https://supsystic.com/feature/export-import-data-feature/" target="_blank" rel="noopener">Import CSV, Excel &amp; Google Sheets</a></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">Google Sheets auto-update<span class="dtMtxHint">Re-fetch on a schedule</span></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature"><a href="https://supsystic.com/feature/database-source/" target="_blank" rel="noopener">MySQL, PostgreSQL &amp; SQLite source</a><span class="dtMtxHint">Build a table from a query</span></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">(S)FTP scheduled sync</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">WooCommerce product table<span class="dtMtxHint">Manual product assignment, sorting, loader</span></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">WooCommerce filters &amp; design<span class="dtMtxHint">Categories, attribute filters, templates, export</span></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>

            <div class="dtMtxGroup" data-dt-group>
              <div class="dtMtxGroupName">
                <span class="dtMtxGroupIcon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 15.75V18m-7.5-6.75h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V13.5zm0 2.25h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V18zm2.498-6.75h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V13.5zm0 2.25h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V18zm2.504-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zm0 2.25h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V18zm2.498-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zM8.25 6h7.5v2.25h-7.5V6zM12 2.25c-1.892 0-3.758.11-5.593.322C5.307 2.7 4.5 3.65 4.5 4.757V19.5a2.25 2.25 0 002.25 2.25h10.5a2.25 2.25 0 002.25-2.25V4.757c0-1.108-.806-2.057-1.907-2.185A48.507 48.507 0 0012 2.25z"/></svg></span>
                Pricing tables
              </div>
              <div class="dtMtxGroupMeter">
                <span class="dtMtxGroupBar"><span class="dtMtxGroupBarFill" style="width:88%"></span></span>
                <span class="dtMtxGroupCount"><b>7</b> of 8 in Free</span>
              </div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">Drag-and-drop pricing table editor<span class="dtMtxHint">Columns, rows and cells you arrange by hand</span></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">Head, description &amp; footer rows and columns</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">Payment buttons<span class="dtMtxHint">Link any plan to PayPal, Stripe, WooCommerce or your own checkout</span></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">Badges &amp; ribbons on a plan</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">Images, video, icons &amp; tooltips in cells</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">Hover animation &amp; comparison layouts</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">Preset templates</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxVal">Basic set</span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxVal">40+ templates</span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">Monthly / yearly switch toggle<span class="dtMtxHint">Two price sets on one table, the visitor picks the period</span></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>

            <div class="dtMtxGroup" data-dt-group>
              <div class="dtMtxGroupName">
                <span class="dtMtxGroupIcon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 7.5 7.5 12M12 16.5V7.5"/></svg></span>
                Export &amp; sharing
              </div>
              <div class="dtMtxGroupMeter">
                <span class="dtMtxGroupBar"><span class="dtMtxGroupBarFill" style="width:0%"></span></span>
                <span class="dtMtxGroupCount dtMtxGroupCountEmpty"><b>0</b> of 3 in Free</span>
              </div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">Export to CSV &amp; Excel</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">PDF export &amp; print with your logo</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">Export buttons for visitors</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>

            <div class="dtMtxGroup" data-dt-group>
              <div class="dtMtxGroupName">
                <span class="dtMtxGroupIcon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg></span>
                Front-end editing
              </div>
              <div class="dtMtxGroupMeter">
                <span class="dtMtxGroupBar"><span class="dtMtxGroupBarFill" style="width:0%"></span></span>
                <span class="dtMtxGroupCount dtMtxGroupCountEmpty"><b>0</b> of 5 in Free</span>
              </div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature"><a href="https://supsystic.com/feature/front-end-editing-feature/" target="_blank" rel="noopener">Editable cells on the page</a></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">Dropdown &amp; date-picker fields</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">Logged-in users or chosen roles only</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">Remove rows from the front end</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">Mark the last edited cell</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>

            <div class="dtMtxGroup" data-dt-group>
              <div class="dtMtxGroupName">
                <span class="dtMtxGroupIcon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z"/></svg></span>
                AI &amp; automation
              </div>
              <div class="dtMtxGroupMeter">
                <span class="dtMtxGroupBar"><span class="dtMtxGroupBarFill" style="width:67%"></span></span>
                <span class="dtMtxGroupCount"><b>2</b> of 3 in Free</span>
              </div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">Read &amp; analyse tables with AI<span class="dtMtxHint">Any MCP assistant: ChatGPT, Claude, Gemini, Copilot, Cursor</span></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">Create &amp; edit tables with AI<span class="dtMtxHint">Any MCP assistant creates, edits, imports and exports your tables</span></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">REST API<span class="dtMtxHint">Read table data as JSON; Pro adds writing</span></div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>

            <div class="dtMtxGroup" data-dt-group>
              <div class="dtMtxGroupName">
                <span class="dtMtxGroupIcon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg></span>
                Publishing &amp; admin
              </div>
              <div class="dtMtxGroupMeter">
                <span class="dtMtxGroupBar"><span class="dtMtxGroupBarFill" style="width:80%"></span></span>
                <span class="dtMtxGroupCount"><b>4</b> of 5 in Free</span>
              </div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">Gutenberg block &amp; shortcode</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">Reuse one table on any page</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="pro">
              <div class="dtMtxCell dtMtxCellFeature">Manage which roles can use the plugin</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxNo"><svg><use href="#dtIconNo"/></svg></span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxYes"><svg><use href="#dtIconYes"/></svg></span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">Support</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxVal dtMtxValMuted">Forum</span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxVal">Priority</span></div>
            </div>
            <div class="dtMtxRow" data-dt-tier="free">
              <div class="dtMtxCell dtMtxCellFeature">Updates and guarantee</div>
              <div class="dtMtxCell dtMtxCellFree"><span class="dtMtxVal dtMtxValMuted">Free updates</span></div>
              <div class="dtMtxCell dtMtxCellPro"><span class="dtMtxVal">Pro updates + 30-day refund</span></div>
            </div>

            <div class="dtMtxEmpty" hidden>No rows match this filter.</div>
            <div class="dtMtxRow dtMtxFootRow">
              <div class="dtMtxCell dtMtxCellFeature">Start free, upgrade when a Pro row is the one you need.</div>
              <div class="dtMtxCell dtMtxCellFree"></div>
              <div class="dtMtxCell dtMtxCellPro">
                <a href="#dtgs-pricing" class="dtBtnPrimary">Get Pro &rarr;</a>
              </div>
            </div>
          </div>
        </div>
        <div class="dtMtxNote">
          Every Pro license unlocks <b>all 54+ capabilities</b> &mdash; tiers differ only in how many sites they cover.<br>Pro is a superset of Free: nothing you build on the free version has to be rebuilt after upgrading.
        </div>
      </div>
    </div>
  </section>

  

  <section class="dtPrsSection" id="dtgs-pricing">
    <div class="dtPrsSectionInner">
    <div class="supPricing" id="sptPricing1">

  <div class="sptHead">
    <div class="sptEyebrow">Licensing</div>
    <h2 class="sptTitle">Choose your licence and get started</h2>
    <p class="sptSubtitle">Flexible options for individuals, businesses and agencies.</p>
  </div>

  <div class="sptTabs" role="tablist" aria-label="Licence">
        <button type="button" class="sptTab is-active" role="tab"
      id="sptPricing1-tab-single"
      aria-controls="sptPricing1-panel-single"
      aria-selected="true"
      data-licence="single">
      <span class="sptTabIcon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7"/></svg></span>
      <span>
        <span class="sptTabName">Personal</span>
        <span class="sptTabSites">1 site</span>
      </span>
    </button>
        <button type="button" class="sptTab" role="tab"
      id="sptPricing1-tab-dev"
      aria-controls="sptPricing1-panel-dev"
      aria-selected="false"
      data-licence="dev">
      <span class="sptTabIcon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="3.2"/><circle cx="4.8" cy="10" r="2.3"/><circle cx="19.2" cy="10" r="2.3"/><path d="M6.5 20c0-3.3 2.5-5.5 5.5-5.5s5.5 2.2 5.5 5.5"/><path d="M1.2 19c0-2.4 1.6-4 3.8-4"/><path d="M22.8 19c0-2.4-1.6-4-3.8-4"/></svg></span>
      <span>
        <span class="sptTabName">Multi-site</span>
        <span class="sptTabSites">Up to 5 sites</span>
      </span>
    </button>
        <button type="button" class="sptTab" role="tab"
      id="sptPricing1-tab-enterprise"
      aria-controls="sptPricing1-panel-enterprise"
      aria-selected="false"
      data-licence="enterprise">
      <span class="sptTabIcon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="3" width="10.5" height="18" rx="1"/><path d="M14 9h5.5a1 1 0 0 1 1 1v11H14"/><path d="M6.5 7h1.5M10 7h1.5M6.5 11h1.5M10 11h1.5M6.5 15h1.5M10 15h1.5M16.5 13h1.5M16.5 17h1.5"/><path d="M1.5 21h21"/></svg></span>
      <span>
        <span class="sptTabName">Agency</span>
        <span class="sptTabSites">Unlimited sites</span>
      </span>
    </button>
      </div>
  <p class="sptHint">Choose your licence first, then your term.</p>

    <div class="sptPanel" role="tabpanel" data-licence="single"
    id="sptPricing1-panel-single"
    aria-labelledby="sptPricing1-tab-single">
    <div class="sptGrid">

      <div class="sptCard sptTermYear">
        <div class="sptCardHead">1 Year</div>
        <div class="sptPrice">
          <span class="sptBadge"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M2 12.6V4a2 2 0 0 1 2-2h8.6a2 2 0 0 1 1.4.6l8.4 8.4a2 2 0 0 1 0 2.8l-8.6 8.6a2 2 0 0 1-2.8 0L2.6 14A2 2 0 0 1 2 12.6zM7.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg>Introductory price</span>
                    <div class="sptRegular">Regular price <span class="sptRegularOld">$79</span> / year</div>
                    <div class="sptAmountRow">
            <span class="sptAmount"><span class="sptCur">$</span>59</span>
            <span class="sptPer">/ year</span>
          </div>
          <div class="sptNote">Renews at $59/year</div>
        </div>
        <div class="sptFeatures" role="list">
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>1 Site License</div>
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>All Pro Features</div>
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>Premium Support</div>
        </div>
        <div class="sptCta">
          <a class="sptBtn" href="https://supsystic.com/?mod=user&#038;addQty=1&#038;goto=checkout&#038;lang=en&#038;action=addToCart&#038;pid=3443" target="_blank" rel="noopener">Buy Now</a>
          <div class="sptGuarantee">30-Day Money Back Guarantee</div>
        </div>
      </div>

      <div class="sptCard sptTermThree">
        <div class="sptCardHead">3 Years</div>
        <div class="sptPrice">
          <span class="sptBadge"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 2h10v2h4v3a5 5 0 0 1-5 5h-.4A5 5 0 0 1 13 14.9V18h3v2.5H8V18h3v-3.1A5 5 0 0 1 8.4 12H8a5 5 0 0 1-5-5V4h4V2zM5 6v1a3 3 0 0 0 2 2.8V6H5zm12 0v3.8A3 3 0 0 0 19 7V6h-2z"/></svg>Best long-term value</span>
          <div class="sptAmountRow">
            <span class="sptAmount"><span class="sptCur">$</span>149</span>
            <span class="sptPer">/ 3 years</span>
          </div>
          <div class="sptNote">That's only $49/year</div>
        </div>
        <div class="sptFeatures" role="list">
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>1 Site License</div>
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>All Pro Features</div>
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>Premium Support</div>
        </div>
        <div class="sptCta">
          <a class="sptBtn" href="https://supsystic.com/?mod=user&#038;addQty=1&#038;goto=checkout&#038;lang=en&#038;action=addToCart&#038;pid=22663" target="_blank" rel="noopener">Buy Now</a>
          <div class="sptGuarantee">30-Day Money Back Guarantee</div>
        </div>
      </div>

            <div class="sptCard sptTermLife">
        <div class="sptCardHead">Lifetime</div>
        <div class="sptPrice">
          <div class="sptAmountRow">
            <span class="sptAmount"><span class="sptCur">$</span>199</span>
          </div>
          <div class="sptNote">Pay once, use forever</div>
        </div>
        <div class="sptFeatures" role="list">
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>1 Site License</div>
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>All Pro Features</div>
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>Premium Support</div>
        </div>
        <div class="sptCta">
          <a class="sptBtn" href="https://supsystic.com/?mod=user&#038;addQty=1&#038;goto=checkout&#038;lang=en&#038;action=addToCart&#038;pid=24158" target="_blank" rel="noopener">Buy Now</a>
          <div class="sptGuarantee">30-Day Money Back Guarantee</div>
        </div>
      </div>
      
    </div>
  </div>
    <div class="sptPanel" role="tabpanel" data-licence="dev"
    id="sptPricing1-panel-dev"
    aria-labelledby="sptPricing1-tab-dev" hidden>
    <div class="sptGrid">

      <div class="sptCard sptTermYear">
        <div class="sptCardHead">1 Year</div>
        <div class="sptPrice">
          <span class="sptBadge"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M2 12.6V4a2 2 0 0 1 2-2h8.6a2 2 0 0 1 1.4.6l8.4 8.4a2 2 0 0 1 0 2.8l-8.6 8.6a2 2 0 0 1-2.8 0L2.6 14A2 2 0 0 1 2 12.6zM7.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg>Introductory price</span>
                    <div class="sptRegular">Regular price <span class="sptRegularOld">$149</span> / year</div>
                    <div class="sptAmountRow">
            <span class="sptAmount"><span class="sptCur">$</span>119</span>
            <span class="sptPer">/ year</span>
          </div>
          <div class="sptNote">Renews at $119/year</div>
        </div>
        <div class="sptFeatures" role="list">
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>Up to 5 Sites</div>
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>All Pro Features</div>
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>Premium Support</div>
        </div>
        <div class="sptCta">
          <a class="sptBtn" href="https://supsystic.com/?mod=user&#038;addQty=1&#038;goto=checkout&#038;lang=en&#038;action=addToCart&#038;pid=5890" target="_blank" rel="noopener">Buy Now</a>
          <div class="sptGuarantee">30-Day Money Back Guarantee</div>
        </div>
      </div>

      <div class="sptCard sptTermThree">
        <div class="sptCardHead">3 Years</div>
        <div class="sptPrice">
          <span class="sptBadge"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 2h10v2h4v3a5 5 0 0 1-5 5h-.4A5 5 0 0 1 13 14.9V18h3v2.5H8V18h3v-3.1A5 5 0 0 1 8.4 12H8a5 5 0 0 1-5-5V4h4V2zM5 6v1a3 3 0 0 0 2 2.8V6H5zm12 0v3.8A3 3 0 0 0 19 7V6h-2z"/></svg>Best long-term value</span>
          <div class="sptAmountRow">
            <span class="sptAmount"><span class="sptCur">$</span>299</span>
            <span class="sptPer">/ 3 years</span>
          </div>
          <div class="sptNote">That's only $99/year</div>
        </div>
        <div class="sptFeatures" role="list">
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>Up to 5 Sites</div>
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>All Pro Features</div>
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>Premium Support</div>
        </div>
        <div class="sptCta">
          <a class="sptBtn" href="https://supsystic.com/?mod=user&#038;addQty=1&#038;goto=checkout&#038;lang=en&#038;action=addToCart&#038;pid=22664" target="_blank" rel="noopener">Buy Now</a>
          <div class="sptGuarantee">30-Day Money Back Guarantee</div>
        </div>
      </div>

            <div class="sptCard sptTermLife">
        <div class="sptCardHead">Lifetime</div>
        <div class="sptPrice">
          <div class="sptAmountRow">
            <span class="sptAmount"><span class="sptCur">$</span>599</span>
          </div>
          <div class="sptNote">Pay once, use forever</div>
        </div>
        <div class="sptFeatures" role="list">
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>Up to 5 Sites</div>
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>All Pro Features</div>
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>Premium Support</div>
        </div>
        <div class="sptCta">
          <a class="sptBtn" href="https://supsystic.com/?mod=user&#038;addQty=1&#038;goto=checkout&#038;lang=en&#038;action=addToCart&#038;pid=24159" target="_blank" rel="noopener">Buy Now</a>
          <div class="sptGuarantee">30-Day Money Back Guarantee</div>
        </div>
      </div>
      
    </div>
  </div>
    <div class="sptPanel" role="tabpanel" data-licence="enterprise"
    id="sptPricing1-panel-enterprise"
    aria-labelledby="sptPricing1-tab-enterprise" hidden>
    <div class="sptGrid">

      <div class="sptCard sptTermYear">
        <div class="sptCardHead">1 Year</div>
        <div class="sptPrice">
          <span class="sptBadge"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M2 12.6V4a2 2 0 0 1 2-2h8.6a2 2 0 0 1 1.4.6l8.4 8.4a2 2 0 0 1 0 2.8l-8.6 8.6a2 2 0 0 1-2.8 0L2.6 14A2 2 0 0 1 2 12.6zM7.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg>Introductory price</span>
                    <div class="sptRegular">Regular price <span class="sptRegularOld">$299</span> / year</div>
                    <div class="sptAmountRow">
            <span class="sptAmount"><span class="sptCur">$</span>229</span>
            <span class="sptPer">/ year</span>
          </div>
          <div class="sptNote">Renews at $229/year</div>
        </div>
        <div class="sptFeatures" role="list">
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>Unlimited Sites</div>
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>All Pro Features</div>
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>Premium Support</div>
        </div>
        <div class="sptCta">
          <a class="sptBtn" href="https://supsystic.com/?mod=user&#038;addQty=1&#038;goto=checkout&#038;lang=en&#038;action=addToCart&#038;pid=5907" target="_blank" rel="noopener">Buy Now</a>
          <div class="sptGuarantee">30-Day Money Back Guarantee</div>
        </div>
      </div>

      <div class="sptCard sptTermThree">
        <div class="sptCardHead">3 Years</div>
        <div class="sptPrice">
          <span class="sptBadge"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 2h10v2h4v3a5 5 0 0 1-5 5h-.4A5 5 0 0 1 13 14.9V18h3v2.5H8V18h3v-3.1A5 5 0 0 1 8.4 12H8a5 5 0 0 1-5-5V4h4V2zM5 6v1a3 3 0 0 0 2 2.8V6H5zm12 0v3.8A3 3 0 0 0 19 7V6h-2z"/></svg>Best long-term value</span>
          <div class="sptAmountRow">
            <span class="sptAmount"><span class="sptCur">$</span>569</span>
            <span class="sptPer">/ 3 years</span>
          </div>
          <div class="sptNote">That's only $189/year</div>
        </div>
        <div class="sptFeatures" role="list">
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>Unlimited Sites</div>
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>All Pro Features</div>
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>Premium Support</div>
        </div>
        <div class="sptCta">
          <a class="sptBtn" href="https://supsystic.com/?mod=user&#038;addQty=1&#038;goto=checkout&#038;lang=en&#038;action=addToCart&#038;pid=22666" target="_blank" rel="noopener">Buy Now</a>
          <div class="sptGuarantee">30-Day Money Back Guarantee</div>
        </div>
      </div>

            <div class="sptCard sptTermLife">
        <div class="sptCardHead">Lifetime</div>
        <div class="sptPrice">
          <div class="sptAmountRow">
            <span class="sptAmount"><span class="sptCur">$</span>1,199</span>
          </div>
          <div class="sptNote">Pay once, use forever</div>
        </div>
        <div class="sptFeatures" role="list">
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>Unlimited Sites</div>
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>All Pro Features</div>
          <div class="sptFeature" role="listitem"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6.5"/></svg>Premium Support</div>
        </div>
        <div class="sptCta">
          <a class="sptBtn" href="https://supsystic.com/?mod=user&#038;addQty=1&#038;goto=checkout&#038;lang=en&#038;action=addToCart&#038;pid=24188" target="_blank" rel="noopener">Buy Now</a>
          <div class="sptGuarantee">30-Day Money Back Guarantee</div>
        </div>
      </div>
      
    </div>
  </div>
  
  <p class="sptFooterNote">Join at the introductory price &ndash; and keep that same price when you renew.</p>
</div>
        <div class="dtPrsSectionSubtitle2">Choose 3-year or lifetime options for even greater savings.</div>
      <div class="dtPrsIncluded">
        <div class="dtPrsIncludedIcon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg></div>
        <div>
          <div class="dtPrsIncludedTitle">Every tier unlocks the same 54+ capabilities</div>
          <div class="dtPrsIncludedText">Personal, Developer and Enterprise differ in one thing only: how many sites the licence covers. Nothing is held back for a higher plan &mdash; live data sources, front-end editing, import and export, charts and the WooCommerce product table are in all three. AI control of your tables over MCP is included in every tier as well.</div>
        </div>
      </div>
    </div>
  </section>
</div>
{% endverbatim %}
