{#
    Key Benefits Section
    Three-column layout showing categorized features
    Positioned right below the hero section
#}
<section class="modern-section modern-key-benefits" id="key-benefits" data-posthog-section="key-benefits">
    <div class="modern-container">
        <div class="modern-section__header">
            <span class="modern-section__label">Features</span>
            <h2 class="modern-section__title">Key Benefits</h2>
            <p class="modern-section__subtitle">All the tools resale stores need — all in one platform.</p>
        </div>

        <div class="modern-key-benefits__grid">
            {# Column 1: Operations #}
            <div class="modern-key-benefits__card">
                <div class="modern-key-benefits__category modern-key-benefits__category--operations">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="16" height="16">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                    Operations
                </div>
                <h3 class="modern-key-benefits__title">Boost productivity</h3>
                <div class="modern-key-benefits__divider"></div>

                <div class="modern-key-benefits__feature">
                    <div class="modern-key-benefits__icon modern-key-benefits__icon--operations">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                        </svg>
                    </div>
                    <div>
                        <h4>Queue Management</h4>
                        <p>Track wait times, manage staff flow, and stay fully optimized.</p>
                    </div>
                </div>

                <div class="modern-key-benefits__feature">
                    <div class="modern-key-benefits__icon modern-key-benefits__icon--operations">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                        </svg>
                    </div>
                    <div>
                        <h4>Mobile &amp; Close Reports</h4>
                        <p>Monitor your store from anywhere with the BuyerKiosk Live app. Get daily close reports on mobile and by email.</p>
                    </div>
                </div>

                <div class="modern-key-benefits__feature">
                    <div class="modern-key-benefits__icon modern-key-benefits__icon--operations">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                        </svg>
                    </div>
                    <div>
                        <h4>Backstock Management</h4>
                        <p>Track bin locations and history with powerful search and filtering.</p>
                    </div>
                </div>
            </div>

            {# Column 2: Customer Experience #}
            <div class="modern-key-benefits__card">
                <div class="modern-key-benefits__category modern-key-benefits__category--experience">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="16" height="16">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    Customer Experience
                </div>
                <h3 class="modern-key-benefits__title">Delight every customer</h3>
                <div class="modern-key-benefits__divider"></div>

                <div class="modern-key-benefits__feature">
                    <div class="modern-key-benefits__icon modern-key-benefits__icon--experience">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                        </svg>
                    </div>
                    <div>
                        <h4>Customer Sign-In Kiosk</h4>
                        <p>Fast, intuitive check-in that captures accurate customer data every time.</p>
                    </div>
                </div>

                <div class="modern-key-benefits__feature">
                    <div class="modern-key-benefits__icon modern-key-benefits__icon--experience">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/>
                        </svg>
                    </div>
                    <div>
                        <h4>Two-Way Text Chat</h4>
                        <p>Customers get notified when their buy is complete, and your team can text back and forth to answer questions.</p>
                    </div>
                </div>

                <div class="modern-key-benefits__feature">
                    <div class="modern-key-benefits__icon modern-key-benefits__icon--experience">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                        </svg>
                    </div>
                    <div>
                        <h4>Digital Signage</h4>
                        <p>Dynamic screens that show wait times, promos, and updates in real-time.</p>
                    </div>
                </div>

                <div class="modern-key-benefits__feature">
                    <div class="modern-key-benefits__icon modern-key-benefits__icon--experience">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
                        </svg>
                    </div>
                    <div>
                        <h4>Customer Rating</h4>
                        <p>Identify top buyers and high-value customers automatically.</p>
                    </div>
                </div>
            </div>

            {# Column 3: Growth Tools #}
            <div class="modern-key-benefits__card">
                <div class="modern-key-benefits__category modern-key-benefits__category--growth">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="16" height="16">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                    </svg>
                    Growth Tools
                </div>
                <h3 class="modern-key-benefits__title">Scale your business</h3>
                <div class="modern-key-benefits__divider"></div>

                <div class="modern-key-benefits__feature">
                    <div class="modern-key-benefits__icon modern-key-benefits__icon--growth">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                        </svg>
                    </div>
                    <div>
                        <h4>QuickBooks Integration</h4>
                        <p>Sync transactions automatically to QuickBooks for seamless accounting.</p>
                    </div>
                </div>

                <div class="modern-key-benefits__feature">
                    <div class="modern-key-benefits__icon modern-key-benefits__icon--growth">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
                        </svg>
                    </div>
                    <div>
                        <h4>FiveStars Loyalty</h4>
                        <p>Connect to FiveStars to reward repeat customers automatically.</p>
                    </div>
                </div>

                <div class="modern-key-benefits__feature">
                    <div class="modern-key-benefits__icon modern-key-benefits__icon--growth">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div>
                        <h4>Comeback Cash</h4>
                        <p>Promotional coupons that drive repeat visits and increase loyalty.</p>
                    </div>
                </div>

                <div class="modern-key-benefits__feature">
                    <div class="modern-key-benefits__icon modern-key-benefits__icon--growth">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                        </svg>
                    </div>
                    <div>
                        <h4>Intelligent Sales Targets</h4>
                        <p>Daily goals powered by historical data and smart date matching.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>