                        <div class="pricing-hero">
                            <h1>Plans for every team</h1>
                            <p>Simple monthly pricing with annual discounts. Cancel anytime, upgrade or downgrade whenever you need to.</p>
                            <div class="pricing-toggle" role="tablist">
                                <button type="button" class="is-active" data-period="monthly" role="tab" aria-selected="true">Monthly</button>
                                <button type="button" data-period="annual" role="tab" aria-selected="false">Annual <span class="save-badge">Save 20%</span></button>
                            </div>
                        </div>

                        <div class="row row-tight" style="max-width: 1100px; margin: 0 auto;">
                            <div class="col-md-4">
                                <section class="m-card pricing-card">
                                    <p class="pricing-card__tier">Starter</p>
                                    <p class="pricing-card__price"><span class="pricing-amt" data-monthly="0" data-annual="0">$0</span><small>/mo</small></p>
                                    <p class="pricing-card__period">Free forever &middot; for solo builders</p>
                                    <ul class="pricing-card__features">
                                        <li><i class="fa-solid fa-check"></i> 1 user seat</li>
                                        <li><i class="fa-solid fa-check"></i> 5 projects</li>
                                        <li><i class="fa-solid fa-check"></i> Community support</li>
                                        <li><i class="fa-solid fa-check"></i> 1 GB storage</li>
                                        <li><i class="fa-solid fa-check"></i> Basic analytics</li>
                                    </ul>
                                    <button type="button" class="m-btn m-btn--ghost" style="width: 100%;">Get started</button>
                                </section>
                            </div>
                            <div class="col-md-4">
                                <section class="m-card pricing-card pricing-card--featured">
                                    <span class="pricing-card__badge">Most popular</span>
                                    <p class="pricing-card__tier">Pro</p>
                                    <p class="pricing-card__price"><span class="pricing-amt" data-monthly="24" data-annual="19">$24</span><small>/mo</small></p>
                                    <p class="pricing-card__period">For small teams</p>
                                    <ul class="pricing-card__features">
                                        <li><i class="fa-solid fa-check"></i> Up to 10 users</li>
                                        <li><i class="fa-solid fa-check"></i> Unlimited projects</li>
                                        <li><i class="fa-solid fa-check"></i> Priority email support</li>
                                        <li><i class="fa-solid fa-check"></i> 100 GB storage</li>
                                        <li><i class="fa-solid fa-check"></i> Advanced analytics</li>
                                        <li><i class="fa-solid fa-check"></i> API access &amp; webhooks</li>
                                    </ul>
                                    <button type="button" class="m-btn m-btn--primary" style="width: 100%;">Start 14-day trial</button>
                                </section>
                            </div>
                            <div class="col-md-4">
                                <section class="m-card pricing-card">
                                    <p class="pricing-card__tier">Enterprise</p>
                                    <p class="pricing-card__price">Custom</p>
                                    <p class="pricing-card__period">For larger orgs</p>
                                    <ul class="pricing-card__features">
                                        <li><i class="fa-solid fa-check"></i> Unlimited users</li>
                                        <li><i class="fa-solid fa-check"></i> SSO &amp; SCIM provisioning</li>
                                        <li><i class="fa-solid fa-check"></i> 24/7 dedicated support</li>
                                        <li><i class="fa-solid fa-check"></i> Audit logs</li>
                                        <li><i class="fa-solid fa-check"></i> Custom contracts &amp; SLA</li>
                                        <li><i class="fa-solid fa-check"></i> Dedicated success manager</li>
                                    </ul>
                                    <button type="button" class="m-btn m-btn--ghost" style="width: 100%;">Talk to sales</button>
                                </section>
                            </div>
                        </div>

                        <h5 class="section-eyebrow" style="margin: 56px 0 8px; text-align:center;">FREQUENTLY ASKED</h5>
                        <div class="pricing-faq" style="max-width: 720px; margin: 0 auto;">
                            <details>
                                <summary>Can I switch plans later?</summary>
                                <p>Yes &mdash; upgrade, downgrade, or cancel any time from the Billing tab in your settings. Changes take effect at the end of the current billing period.</p>
                            </details>
                            <details>
                                <summary>Do you offer a free trial?</summary>
                                <p>Pro comes with a 14-day free trial. No credit card required to start. We&rsquo;ll prompt you for payment details only when you decide to keep the plan.</p>
                            </details>
                            <details>
                                <summary>What does the annual discount mean?</summary>
                                <p>Annual billing locks in a 20% discount over the monthly rate. You pay once per year instead of every month, and the price is fixed for the year.</p>
                            </details>
                            <details>
                                <summary>Which payment methods do you accept?</summary>
                                <p>All major credit cards (Visa, Mastercard, Amex), Apple Pay, Google Pay, ACH for US customers, and SEPA for EU customers. Enterprise customers can pay via invoice.</p>
                            </details>
                            <details>
                                <summary>Is there a non-profit or education discount?</summary>
                                <p>Yes &mdash; verified non-profits and educational institutions get 50% off any paid plan. Reach out via the contact form with your verification details.</p>
                            </details>
                        </div>

                        <div style="text-align: center; margin: 56px 0 0; padding: 32px; background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius-lg);">
                            <h2 style="margin: 0 0 8px; font-size: 22px; font-weight: 600; color: var(--m-text);">Still have questions?</h2>
                            <p style="margin: 0 0 16px; color: var(--m-text-muted); font-size: 14px;">Talk to our team about your needs &mdash; we&rsquo;ll help you pick the right plan.</p>
                            <button type="button" class="m-btn m-btn--primary"><i class="fa-regular fa-envelope"></i> Contact sales</button>
                        </div>

                        <div class="row" style="margin-top: 28px;">
                            <div class="col-md-12">
                                <div class="copyright">
                                    <p>Copyright © 2026 Colorlib. All rights reserved. Template by <a href="https://colorlib.com" rel="nofollow" target="_blank">Colorlib</a>.</p>
                                </div>
                            </div>
                        </div>
