{% extends 'base.html' %}

{% block main %}
<div x-data="{ annual: true }">
        <!-- ════════════════ PAGE HEAD ════════════════ -->
        <div class="ax-page-head">
          <div class="ax-page-head__row">
            <div>
              <nav class="ax-breadcrumb" data-ax-breadcrumb aria-label="Breadcrumb"></nav>
              <h1 class="ax-page-head__title">Pricing</h1>
              <p class="ax-page-head__subtitle">Simple, transparent plans that scale with your team — switch or cancel anytime.</p>
            </div>
            <div class="ax-page-head__actions">
              <button type="button" class="ax-btn ax-btn--secondary ax-btn--pill">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 9h8"/><path d="M8 13h6"/><path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3z"/></svg>
                <span class="ax-btn__label">Talk to sales</span>
              </button>
              <button type="button" class="ax-btn ax-btn--primary">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3"/><path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3"/><path d="M14 9a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/></svg>
                <span class="ax-btn__label">Start free trial</span>
              </button>
            </div>
          </div>
        </div>

        <!-- ════════════════ BILLING TOGGLE ════════════════ -->
        <div class="ax-cluster" style="flex-direction:column;align-items:center;justify-content:center;gap:var(--ax-space-4);margin-block-end:var(--ax-space-8);flex-wrap:wrap;">
          <div class="ax-btn-group ax-btn-group--segmented" role="radiogroup" aria-label="Billing period">
            <button type="button" class="ax-btn ax-btn--sm" role="radio" :aria-checked="(!annual).toString()" :class="!annual && 'is-selected'" @click="annual = false">Monthly</button>
            <button type="button" class="ax-btn ax-btn--sm" role="radio" :aria-checked="annual.toString()" :class="annual && 'is-selected'" @click="annual = true">Annual</button>
          </div>
          <span class="ax-badge ax-badge--soft ax-badge--accent ax-badge--pill" x-show="annual" x-transition>
            <svg class="ax-badge__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg>
            Save 20% billed yearly
          </span>
        </div>

        <!-- ════════════════ TIER CARDS ════════════════ -->
        <div class="ax-dash-grid" style="margin-block-end:var(--ax-space-8);">

          <!-- Starter -->
          <section class="ax-card ax-col--3" role="region" aria-label="Starter plan">
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-5);height:100%;">
              <div>
                <h2 class="ax-card__title" style="font-size:var(--ax-text-md);">Starter</h2>
                <p class="ax-card__subtitle" style="margin-top:4px;">For individuals exploring Vireo.</p>
              </div>
              <div>
                <div class="ax-cluster" style="align-items:baseline;gap:var(--ax-space-1);">
                  <span class="ax-num" style="font-family:var(--ax-font-display);font-size:var(--ax-text-3xl);font-weight:700;color:var(--ax-text-strong);line-height:1;" x-text="annual ? '$0' : '$0'">$0</span>
                  <span style="color:var(--ax-text-subtle);font-size:var(--ax-text-sm);">/mo</span>
                </div>
                <p style="color:var(--ax-text-subtle);font-size:var(--ax-text-xs);margin-top:6px;min-height:16px;">Free forever — no card required</p>
              </div>
              <button type="button" class="ax-btn ax-btn--secondary ax-btn--block">
                <span class="ax-btn__label">Get started</span>
              </button>
              <ul class="ax-list ax-list--compact" style="display:flex;flex-direction:column;gap:var(--ax-space-3);">
                <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:flex-start;font-size:var(--ax-text-sm);color:var(--ax-text);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex:0 0 auto;margin-top:1px;"><path d="M5 12l5 5l10 -10"/></svg><span>1 workspace</span></li>
                <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:flex-start;font-size:var(--ax-text-sm);color:var(--ax-text);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex:0 0 auto;margin-top:1px;"><path d="M5 12l5 5l10 -10"/></svg><span>Up to 3 team members</span></li>
                <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:flex-start;font-size:var(--ax-text-sm);color:var(--ax-text);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex:0 0 auto;margin-top:1px;"><path d="M5 12l5 5l10 -10"/></svg><span>5 dashboards</span></li>
                <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:flex-start;font-size:var(--ax-text-sm);color:var(--ax-text);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex:0 0 auto;margin-top:1px;"><path d="M5 12l5 5l10 -10"/></svg><span>Community support</span></li>
                <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:flex-start;font-size:var(--ax-text-sm);color:var(--ax-text-subtle);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex:0 0 auto;margin-top:1px;"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg><span>API access</span></li>
              </ul>
            </div>
          </section>

          <!-- Pro — most popular -->
          <section class="ax-card ax-col--3 ax-card--accent-edge" role="region" aria-label="Pro plan, most popular" style="position:relative;">
            <span class="ax-badge ax-badge--solid ax-badge--accent ax-badge--pill" style="position:absolute;top:var(--ax-space-4);inset-inline-end:var(--ax-space-4);">Most popular</span>
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-5);height:100%;">
              <div>
                <h2 class="ax-card__title" style="font-size:var(--ax-text-md);color:var(--ax-accent);">Pro</h2>
                <p class="ax-card__subtitle" style="margin-top:4px;">For growing product teams.</p>
              </div>
              <div>
                <div class="ax-cluster" style="align-items:baseline;gap:var(--ax-space-1);">
                  <span class="ax-num" style="font-family:var(--ax-font-display);font-size:var(--ax-text-3xl);font-weight:700;color:var(--ax-text-strong);line-height:1;min-width:78px;display:inline-block;" x-text="annual ? '$24' : '$29'">$24</span>
                  <span style="color:var(--ax-text-subtle);font-size:var(--ax-text-sm);">/mo</span>
                </div>
                <p class="ax-num" style="color:var(--ax-text-subtle);font-size:var(--ax-text-xs);margin-top:6px;min-height:16px;font-family:var(--ax-font-mono);" x-text="annual ? '$288 billed annually' : 'billed monthly'">$288 billed annually</p>
              </div>
              <button type="button" class="ax-btn ax-btn--primary ax-btn--block">
                <span class="ax-btn__label">Start 14-day trial</span>
              </button>
              <ul class="ax-list ax-list--compact" style="display:flex;flex-direction:column;gap:var(--ax-space-3);">
                <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:flex-start;font-size:var(--ax-text-sm);color:var(--ax-text);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex:0 0 auto;margin-top:1px;"><path d="M5 12l5 5l10 -10"/></svg><span>3 workspaces</span></li>
                <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:flex-start;font-size:var(--ax-text-sm);color:var(--ax-text);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex:0 0 auto;margin-top:1px;"><path d="M5 12l5 5l10 -10"/></svg><span>Up to 25 team members</span></li>
                <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:flex-start;font-size:var(--ax-text-sm);color:var(--ax-text);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex:0 0 auto;margin-top:1px;"><path d="M5 12l5 5l10 -10"/></svg><span>Unlimited dashboards</span></li>
                <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:flex-start;font-size:var(--ax-text-sm);color:var(--ax-text);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex:0 0 auto;margin-top:1px;"><path d="M5 12l5 5l10 -10"/></svg><span>Full API &amp; webhooks</span></li>
                <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:flex-start;font-size:var(--ax-text-sm);color:var(--ax-text);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex:0 0 auto;margin-top:1px;"><path d="M5 12l5 5l10 -10"/></svg><span>Priority email support</span></li>
              </ul>
            </div>
          </section>

          <!-- Business -->
          <section class="ax-card ax-col--3" role="region" aria-label="Business plan">
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-5);height:100%;">
              <div>
                <h2 class="ax-card__title" style="font-size:var(--ax-text-md);">Business</h2>
                <p class="ax-card__subtitle" style="margin-top:4px;">For scaling organizations.</p>
              </div>
              <div>
                <div class="ax-cluster" style="align-items:baseline;gap:var(--ax-space-1);">
                  <span class="ax-num" style="font-family:var(--ax-font-display);font-size:var(--ax-text-3xl);font-weight:700;color:var(--ax-text-strong);line-height:1;min-width:78px;display:inline-block;" x-text="annual ? '$64' : '$79'">$64</span>
                  <span style="color:var(--ax-text-subtle);font-size:var(--ax-text-sm);">/mo</span>
                </div>
                <p class="ax-num" style="color:var(--ax-text-subtle);font-size:var(--ax-text-xs);margin-top:6px;min-height:16px;font-family:var(--ax-font-mono);" x-text="annual ? '$768 billed annually' : 'billed monthly'">$768 billed annually</p>
              </div>
              <button type="button" class="ax-btn ax-btn--secondary ax-btn--block">
                <span class="ax-btn__label">Start 14-day trial</span>
              </button>
              <ul class="ax-list ax-list--compact" style="display:flex;flex-direction:column;gap:var(--ax-space-3);">
                <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:flex-start;font-size:var(--ax-text-sm);color:var(--ax-text);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex:0 0 auto;margin-top:1px;"><path d="M5 12l5 5l10 -10"/></svg><span>Everything in Pro, plus:</span></li>
                <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:flex-start;font-size:var(--ax-text-sm);color:var(--ax-text);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex:0 0 auto;margin-top:1px;"><path d="M5 12l5 5l10 -10"/></svg><span>Unlimited members</span></li>
                <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:flex-start;font-size:var(--ax-text-sm);color:var(--ax-text);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex:0 0 auto;margin-top:1px;"><path d="M5 12l5 5l10 -10"/></svg><span>SSO &amp; SAML</span></li>
                <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:flex-start;font-size:var(--ax-text-sm);color:var(--ax-text);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex:0 0 auto;margin-top:1px;"><path d="M5 12l5 5l10 -10"/></svg><span>Advanced audit logs</span></li>
                <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:flex-start;font-size:var(--ax-text-sm);color:var(--ax-text);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex:0 0 auto;margin-top:1px;"><path d="M5 12l5 5l10 -10"/></svg><span>24/7 priority support</span></li>
              </ul>
            </div>
          </section>

          <!-- Enterprise -->
          <section class="ax-card ax-col--3" role="region" aria-label="Enterprise plan">
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-5);height:100%;">
              <div>
                <h2 class="ax-card__title" style="font-size:var(--ax-text-md);">Enterprise</h2>
                <p class="ax-card__subtitle" style="margin-top:4px;">For regulated, large-scale teams.</p>
              </div>
              <div>
                <div class="ax-cluster" style="align-items:baseline;gap:var(--ax-space-1);">
                  <span style="font-family:var(--ax-font-display);font-size:var(--ax-text-2xl);font-weight:700;color:var(--ax-text-strong);line-height:1;">Custom</span>
                </div>
                <p style="color:var(--ax-text-subtle);font-size:var(--ax-text-xs);margin-top:6px;min-height:16px;">Tailored to your requirements</p>
              </div>
              <button type="button" class="ax-btn ax-btn--secondary ax-btn--block">
                <span class="ax-btn__label">Contact sales</span>
              </button>
              <ul class="ax-list ax-list--compact" style="display:flex;flex-direction:column;gap:var(--ax-space-3);">
                <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:flex-start;font-size:var(--ax-text-sm);color:var(--ax-text);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex:0 0 auto;margin-top:1px;"><path d="M5 12l5 5l10 -10"/></svg><span>Everything in Business</span></li>
                <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:flex-start;font-size:var(--ax-text-sm);color:var(--ax-text);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex:0 0 auto;margin-top:1px;"><path d="M5 12l5 5l10 -10"/></svg><span>Dedicated CSM</span></li>
                <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:flex-start;font-size:var(--ax-text-sm);color:var(--ax-text);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex:0 0 auto;margin-top:1px;"><path d="M5 12l5 5l10 -10"/></svg><span>99.99% uptime SLA</span></li>
                <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:flex-start;font-size:var(--ax-text-sm);color:var(--ax-text);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex:0 0 auto;margin-top:1px;"><path d="M5 12l5 5l10 -10"/></svg><span>On-prem &amp; private cloud</span></li>
                <li class="ax-cluster" style="gap:var(--ax-space-3);flex-wrap:nowrap;align-items:flex-start;font-size:var(--ax-text-sm);color:var(--ax-text);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex:0 0 auto;margin-top:1px;"><path d="M5 12l5 5l10 -10"/></svg><span>Custom contract &amp; DPA</span></li>
              </ul>
            </div>
          </section>
        </div>

        <!-- ════════════════ COMPARISON TABLE ════════════════ -->
        <div class="ax-dash-grid">
          <section class="ax-card ax-col--12" role="region" aria-label="Plan comparison">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Compare</span>
                <h2 class="ax-card__title">All features, side by side</h2>
                <p class="ax-card__subtitle">Every plan includes SSL, daily backups, and the Aurora design system.</p>
              </div>
            </div>
            <div class="ax-table-wrap">
              <table class="ax-table ax-table--hover">
                <thead class="ax-table__head">
                  <tr>
                    <th class="ax-table__th" scope="col">Feature</th>
                    <th class="ax-table__th ax-table__th--num" scope="col">Starter</th>
                    <th class="ax-table__th ax-table__th--num" scope="col" style="color:var(--ax-accent);">Pro</th>
                    <th class="ax-table__th ax-table__th--num" scope="col">Business</th>
                    <th class="ax-table__th ax-table__th--num" scope="col">Enterprise</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="ax-table__row">
                    <td class="ax-table__td" style="color:var(--ax-text-strong);">Team members</td>
                    <td class="ax-table__td ax-table__td--num ax-num">3</td>
                    <td class="ax-table__td ax-table__td--num ax-num">25</td>
                    <td class="ax-table__td ax-table__td--num">Unlimited</td>
                    <td class="ax-table__td ax-table__td--num">Unlimited</td>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td" style="color:var(--ax-text-strong);">Dashboards</td>
                    <td class="ax-table__td ax-table__td--num ax-num">5</td>
                    <td class="ax-table__td ax-table__td--num">Unlimited</td>
                    <td class="ax-table__td ax-table__td--num">Unlimited</td>
                    <td class="ax-table__td ax-table__td--num">Unlimited</td>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td" style="color:var(--ax-text-strong);">Data retention</td>
                    <td class="ax-table__td ax-table__td--num ax-num">30 days</td>
                    <td class="ax-table__td ax-table__td--num ax-num">1 year</td>
                    <td class="ax-table__td ax-table__td--num ax-num">3 years</td>
                    <td class="ax-table__td ax-table__td--num">Custom</td>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td" style="color:var(--ax-text-strong);">API access &amp; webhooks</td>
                    <td class="ax-table__td ax-table__td--num"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-text-subtle)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:inline-block;vertical-align:middle;"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></td>
                    <td class="ax-table__td ax-table__td--num"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:inline-block;vertical-align:middle;"><path d="M5 12l5 5l10 -10"/></svg></td>
                    <td class="ax-table__td ax-table__td--num"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:inline-block;vertical-align:middle;"><path d="M5 12l5 5l10 -10"/></svg></td>
                    <td class="ax-table__td ax-table__td--num"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:inline-block;vertical-align:middle;"><path d="M5 12l5 5l10 -10"/></svg></td>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td" style="color:var(--ax-text-strong);">SSO &amp; SAML</td>
                    <td class="ax-table__td ax-table__td--num"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-text-subtle)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:inline-block;vertical-align:middle;"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></td>
                    <td class="ax-table__td ax-table__td--num"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-text-subtle)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:inline-block;vertical-align:middle;"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></td>
                    <td class="ax-table__td ax-table__td--num"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:inline-block;vertical-align:middle;"><path d="M5 12l5 5l10 -10"/></svg></td>
                    <td class="ax-table__td ax-table__td--num"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-success-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="display:inline-block;vertical-align:middle;"><path d="M5 12l5 5l10 -10"/></svg></td>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td" style="color:var(--ax-text-strong);">Support</td>
                    <td class="ax-table__td ax-table__td--num">Community</td>
                    <td class="ax-table__td ax-table__td--num">Priority email</td>
                    <td class="ax-table__td ax-table__td--num">24/7</td>
                    <td class="ax-table__td ax-table__td--num">Dedicated CSM</td>
                  </tr>
                  <tr class="ax-table__row">
                    <td class="ax-table__td" style="color:var(--ax-text-strong);">Uptime SLA</td>
                    <td class="ax-table__td ax-table__td--num">—</td>
                    <td class="ax-table__td ax-table__td--num ax-num">99.9%</td>
                    <td class="ax-table__td ax-table__td--num ax-num">99.95%</td>
                    <td class="ax-table__td ax-table__td--num ax-num">99.99%</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </section>
        </div>

        <!-- ════════════════ FAQ STRIP ════════════════ -->
        <div class="ax-dash-grid" style="margin-block-start:var(--ax-space-6);">
          <section class="ax-card ax-col--8" role="region" aria-label="Pricing FAQ" x-data="{ open: 0 }">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Questions</span>
                <h2 class="ax-card__title">Pricing FAQ</h2>
              </div>
              <a class="ax-btn ax-btn--link" href="/pages/faq/">All FAQs →</a>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div class="ax-accordion">
                <div class="ax-accordion__item">
                  <button type="button" class="ax-accordion__header" :aria-expanded="(open===0).toString()" @click="open = open===0 ? null : 0">
                    <span class="ax-accordion__title">Can I change plans later?</span>
                    <svg class="ax-accordion__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6l6 -6"/></svg>
                  </button>
                  <div class="ax-accordion__panel" x-show="open===0" x-collapse>Yes — upgrade or downgrade anytime from your billing page. Upgrades are prorated instantly; downgrades take effect at the next renewal.</div>
                </div>
                <div class="ax-accordion__item">
                  <button type="button" class="ax-accordion__header" :aria-expanded="(open===1).toString()" @click="open = open===1 ? null : 1">
                    <span class="ax-accordion__title">Is there a free trial?</span>
                    <svg class="ax-accordion__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6l6 -6"/></svg>
                  </button>
                  <div class="ax-accordion__panel" x-show="open===1" x-collapse>Every paid plan includes a 14-day free trial — no credit card required. You'll only be billed if you choose to continue.</div>
                </div>
                <div class="ax-accordion__item">
                  <button type="button" class="ax-accordion__header" :aria-expanded="(open===2).toString()" @click="open = open===2 ? null : 2">
                    <span class="ax-accordion__title">What payment methods do you accept?</span>
                    <svg class="ax-accordion__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6l6 -6"/></svg>
                  </button>
                  <div class="ax-accordion__panel" x-show="open===2" x-collapse>We accept all major credit cards via Stripe. Business and Enterprise plans can also pay by invoice and bank transfer.</div>
                </div>
                <div class="ax-accordion__item">
                  <button type="button" class="ax-accordion__header" :aria-expanded="(open===3).toString()" @click="open = open===3 ? null : 3">
                    <span class="ax-accordion__title">Do you offer discounts for nonprofits?</span>
                    <svg class="ax-accordion__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6l6 -6"/></svg>
                  </button>
                  <div class="ax-accordion__panel" x-show="open===3" x-collapse>Yes. Registered nonprofits and accredited students get 40% off any annual plan — reach out to sales with your documentation.</div>
                </div>
              </div>
            </div>
          </section>

          <!-- contact rail -->
          <section class="ax-card ax-col--4" role="region" aria-label="Still deciding">
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-4);height:100%;">
              <span class="ax-avatar ax-avatar--lg ax-avatar--squircle" style="background:var(--ax-accent-wash);color:var(--ax-accent);">
                <svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10"/><path d="M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2"/></svg>
              </span>
              <div>
                <h2 class="ax-card__title" style="font-size:var(--ax-text-md);">Still deciding?</h2>
                <p class="ax-card__subtitle" style="margin-top:6px;">Book a 30-minute walkthrough with our team and we'll help you pick the right plan.</p>
              </div>
              <div style="margin-top:auto;display:flex;flex-direction:column;gap:var(--ax-space-3);">
                <button type="button" class="ax-btn ax-btn--primary ax-btn--block">
                  <span class="ax-btn__label">Book a demo</span>
                </button>
                <a class="ax-btn ax-btn--ghost ax-btn--block" href="/pages/support/">
                  <span class="ax-btn__label">Visit help center</span>
                </a>
              </div>
            </div>
          </section>
        </div>

      
</div>
{% endblock %}