{#
    Pricing Section Partial
    PRD: Feature 5 - Pricing Section (lines 163-171)

    Real pricing from current homepage:
    - Phone Check-In: $175/mo (was $210), no hardware
    - Apparel Brands: $175/mo (was $210), $1,599 hardware
    - Sports & Gear: $99/mo (was $105), $1,599 hardware
    - Team+ Add-on: $30/mo
#}
<section class="modern-section modern-pricing" id="pricing" data-posthog-section="pricing">
    <div class="modern-container">
        <div class="modern-section__header">
            <span class="modern-section__label">Pricing</span>
            <h2 class="modern-section__title">Choose Your Plan</h2>
            <p class="modern-section__social-proof">Trusted by over 250 resale stores across the U.S. & Canada</p>
            <p class="modern-section__subtitle">All paid plans include: iOS/Android app, all software features, hardware, DRS sync, and dedicated support.</p>
        </div>

        <div class="modern-pricing__grid">
            {# Tier 1: Phone Check-In #}
            <div class="modern-pricing-card">
                <div class="modern-pricing-card__name">Phone Check-In</div>
                <p class="modern-pricing-card__tagline">Best for new stores not ready for hardware</p>
                <div class="modern-pricing-card__price">
                    <span class="modern-pricing-card__sale-badge">Save $420/year</span>
                    <span class="modern-pricing-card__original-price">$210/month</span>
                    <span class="modern-pricing-card__amount">$175</span>
                    <span class="modern-pricing-card__period">/month</span>
                </div>
                <ul class="modern-pricing-card__features">
                    <li>
                        <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="M5 13l4 4L19 7"/></svg>
                        Phone-based customer sign-in
                    </li>
                    <li>
                        <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="M5 13l4 4L19 7"/></svg>
                        Print to your existing POS printers
                    </li>
                    <li>
                        <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="M5 13l4 4L19 7"/></svg>
                        All software features included
                    </li>
                    <li>
                        <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="M5 13l4 4L19 7"/></svg>
                        Free for new stores until open
                    </li>
                </ul>
                <div class="modern-pricing-card__brands">
                    <svg class="brand-logo" viewBox="0 0 101 13" aria-label="Once Upon a Child"><use href="#icon-brand-header-OUAC"></use></svg>
                    <svg class="brand-logo" viewBox="0 0 108 10" aria-label="Plato's Closet"><use href="#icon-brand-header-PC"></use></svg>
                    <svg class="brand-logo" viewBox="0 0 99 11" aria-label="Style Encore"><use href="#icon-brand-header-SE"></use></svg>
                    <svg class="brand-logo" viewBox="0 0 121 11" aria-label="Play It Again Sports"><use href="#icon-brand-header-PIAS"></use></svg>
                    <svg class="brand-logo" viewBox="0 0 100 13" aria-label="Music Go Round"><use href="#icon-brand-header-MGR"></use></svg>
                </div>
                <a
                    href="/get-started"
                    class="modern-pricing-card__cta"
                    data-posthog-event="pricing_cta_clicked"
                    data-posthog-tier="phone"
                >
                    Get Started
                </a>
                <p class="modern-pricing-card__reassurance">No equipment fee required</p>
            </div>

            {# Tier 2: Apparel Brands (Featured/Popular) #}
            <div class="modern-pricing-card modern-pricing-card--featured">
                <div class="modern-pricing-card__badge">Most Popular</div>
                <div class="modern-pricing-card__name">Apparel Brands</div>
                <p class="modern-pricing-card__tagline">Best for Plato's Closet, Once Upon A Child & Style Encore</p>
                <div class="modern-pricing-card__price">
                    <span class="modern-pricing-card__sale-badge">Save $420/year</span>
                    <span class="modern-pricing-card__original-price">$210/month</span>
                    <span class="modern-pricing-card__amount">$175</span>
                    <span class="modern-pricing-card__period">/month</span>
                </div>
                <ul class="modern-pricing-card__features">
                    <li>
                        <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="M5 13l4 4L19 7"/></svg>
                        Complete hardware kit included
                    </li>
                    <li>
                        <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="M5 13l4 4L19 7"/></svg>
                        Driver's license scanning kiosk
                    </li>
                    <li>
                        <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="M5 13l4 4L19 7"/></svg>
                        Digital signage display system
                    </li>
                    <li>
                        <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="M5 13l4 4L19 7"/></svg>
                        Automatic DRS sync
                    </li>
                    <li>
                        <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="M5 13l4 4L19 7"/></svg>
                        Faster check-in with ID scanning vs manual entry
                    </li>
                    <li>
                        <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="M5 13l4 4L19 7"/></svg>
                        Self-service kiosk frees staff to focus on buying
                    </li>
                    <li>
                        <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="M5 13l4 4L19 7"/></svg>
                        Queue display reduces "how long?" interruptions
                    </li>
                </ul>
                <div class="modern-pricing-card__brands modern-pricing-card__brands--featured">
                    <svg class="brand-logo" viewBox="0 0 101 13" aria-label="Once Upon a Child"><use href="#icon-brand-header-OUAC"></use></svg>
                    <svg class="brand-logo" viewBox="0 0 108 10" aria-label="Plato's Closet"><use href="#icon-brand-header-PC"></use></svg>
                    <svg class="brand-logo" viewBox="0 0 99 11" aria-label="Style Encore"><use href="#icon-brand-header-SE"></use></svg>
                </div>
                <a
                    href="/get-started"
                    class="modern-pricing-card__cta modern-pricing-card__cta--featured"
                    data-posthog-event="pricing_cta_clicked"
                    data-posthog-tier="apparel"
                >
                    Get Started
                </a>
                <p class="modern-pricing-card__reassurance">$1,599 one-time equipment fee</p>
            </div>

            {# Tier 3: Sports & Gear Bundle (BuyerKiosk + GearDash) #}
            <div class="modern-pricing-card modern-pricing-card--bundle">
                <div class="modern-pricing-card__bundle-logos">
                    <img src="/images/front/logos/logo_dark.svg" alt="BuyerKiosk" style="height: 22px; width: auto; max-width: 100px;">
                    <span class="modern-pricing-card__bundle-plus">+</span>
                    <img src="/images/front/GD_Logo_LightBackground.svg" alt="GearDash" style="height: 28px; width: auto; max-width: 70px;">
                </div>
                <div class="modern-pricing-card__name">Sports & Gear Bundle</div>
                <p class="modern-pricing-card__tagline">Best for Play It Again Sports & Music Go Round</p>
                <div class="modern-pricing-card__price">
                    <span class="modern-pricing-card__sale-badge">Save $828/year</span>
                    <span class="modern-pricing-card__original-price">$244/month</span>
                    <span class="modern-pricing-card__amount">$175</span>
                    <span class="modern-pricing-card__period">/month</span>
                </div>
                <p class="modern-pricing-card__bundle-value">BuyerKiosk ($175) + GearDash ($69) bundled together!</p>
                <ul class="modern-pricing-card__features">
                    <li>
                        <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="M5 13l4 4L19 7"/></svg>
                        All BuyerKiosk buy check-in features
                    </li>
                    <li>
                        <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="M5 13l4 4L19 7"/></svg>
                        GearDash services check-in system
                    </li>
                    <li>
                        <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="M5 13l4 4L19 7"/></svg>
                        Complete hardware kit included
                    </li>
                    <li>
                        <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="M5 13l4 4L19 7"/></svg>
                        Automatic DRS sync
                    </li>
                </ul>
                <div class="modern-pricing-card__brands">
                    <svg class="brand-logo" viewBox="0 0 121 11" aria-label="Play It Again Sports"><use href="#icon-brand-header-PIAS"></use></svg>
                    <svg class="brand-logo" viewBox="0 0 100 13" aria-label="Music Go Round"><use href="#icon-brand-header-MGR"></use></svg>
                </div>
                <a
                    href="/get-started"
                    class="modern-pricing-card__cta"
                    data-posthog-event="pricing_cta_clicked"
                    data-posthog-tier="sports-bundle"
                >
                    Get Started
                </a>
                <p class="modern-pricing-card__reassurance">$1,599 one-time equipment fee</p>
            </div>
        </div>

        {# Team+ Add-on Banner #}
        <div class="modern-pricing-addon">
            <div class="modern-pricing-addon__icon">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="32" height="32">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                </svg>
            </div>
            <div class="modern-pricing-addon__content">
                <div class="modern-pricing-addon__header">
                    <span class="modern-pricing-addon__badge">Premium Add-On</span>
                    <h4 class="modern-pricing-addon__title">Team+ Module</h4>
                </div>
                <p class="modern-pricing-addon__description">
                    Add native staff scheduling, AI schedule generation, staff chat, and mobile apps for your team.
                </p>
            </div>
            <div class="modern-pricing-addon__price">
                <span class="modern-pricing-addon__amount">+$30</span>
                <span class="modern-pricing-addon__period">/month per store</span>
            </div>
            <a href="/team-plus" class="modern-pricing-addon__cta">Learn More</a>
        </div>
    </div>
</section>