---
### ALL PAGES ###
layout: themes/[ site.theme.id ]/frontend/core/base

### PAGE CONFIG ###
# Hero Section
hero:
  headline: "The right plans,"
  headline_accent: "for the right price"
  subheadline: "Simple and affordable pricing. No hidden fees, no surprises."

# Pricing Section
pricing:
  price_per_unit:
    enabled: true
    feature_id: "credits"
    label: "credit"
  definitions:
    - id: "credits"
      definition: "Credits are used to generate content. Each generation consumes 1 credit."
    - id: "exports"
      definition: "Export your creations in various formats. Watermarked exports include a small logo."
    - id: "api_access"
      definition: "Access our REST API to integrate with your own applications and workflows."
    - id: "priority_support"
      definition: "Get faster response times and dedicated support from our team."
    - id: "team_collaboration"
      definition: "Invite team members to collaborate on projects and share resources."
    - id: "custom_branding"
      definition: "Remove our branding and add your own logo to exports."
  plans:
    - id: "basic"
      name: "Basic"
      tagline: "best for getting started"
      url: "/dashboard"
      features:
        - id: "credits"
          name: "Credits"
          icon: "sparkles"
        - id: "exports"
          name: "Exports"
          icon: "download"
        - id: "storage"
          name: "Logo storage"
          icon: "clock"
    - id: "plus"
      name: "Plus"
      tagline: "best for individuals"
      url: null
      features:
        - id: "credits"
          name: "Credits"
          icon: "sparkles"
        - id: "exports"
          name: "Exports"
          icon: "download"
        - id: "api_access"
          name: "API access"
          icon: "code"
        - id: "priority_support"
          name: "Priority support"
          icon: "headset"
    - id: "pro"
      name: "Pro"
      tagline: "best for small businesses"
      url: null
      popular: true
      features:
        - id: "credits"
          name: "Credits"
          icon: "sparkles"
        - id: "exports"
          name: "Exports"
          icon: "download"
    - id: "max"
      name: "Max"
      tagline: "best for growing businesses"
      url: null
      features:
        - id: "credits"
          name: "Credits"
          icon: "sparkles"
        - id: "exports"
          name: "Exports"
          icon: "download"
        - id: "team_collaboration"
          name: "Team collaboration"
          icon: "users"
        - id: "custom_branding"
          name: "Custom branding"
          icon: "palette"

# Feature Comparison Section
feature_comparison:
  superheadline:
    icon: "sparkles"
    text: "Features"
  headline: "Compare all"
  headline_accent: "plans"
  subheadline: "See exactly what's included in each plan"

# Social Proof Section
social_proof:
  items:
    - number: "5M"
      label: "Customers"
      color: "blue"
    - number: "#1"
      label: "Product of the month"
      color: "pink"
    - number: "4.8"
      label: "Capterra"
      color: "yellow"
    - number: "4.8"
      label: "G2"
      color: "green"

# CTA Section
cta:
  superheadline:
    icon: "comments"
    text: "Support"
  headline: "Need help finding the right plan for your"
  headline_accent: "needs?"
  subheadline: "Talk to our support team 24/7"
  button:
    text: "Talk to us"
    icon: "headset"
    href: "/contact"

# FAQs Section
faqs:
  superheadline:
    icon: "messages-question"
    text: "FAQs"
  headline: "Frequently asked"
  headline_accent: "questions"
  subheadline: "Everything you need to know about {{ site.brand.name }} billing & subscriptions."
  items:
    - question: "Can I cancel at any time?"
      answer: "Yes, you can cancel anytime, no questions asked. However, we would highly appreciate it if you could give us some feedback so we can improve."
    - question: "Is there a free trial?"
      answer: "Yes, there is a 14-day free trial of the paid plans. You can cancel your subscription at any time during the trial period for a full refund."
    - question: "What is your refund policy?"
      answer: "We offer a 14-day free trial of the premium plans. You can cancel any time during your trial for a full refund. After the trial period, you can cancel and you may receive a prorated refund for the remaining time on your subscription."
---

{% comment %}
  NEOBRUTALISM PRICING
  Same data contract + price-resolution Liquid as the classy pricing page, but a
  neobrutalist STRUCTURE: ink-framed plan blocks where the popular plan is an
  oversized accent block, a hard square billing toggle, oversized color-block
  social-proof, and a full-bleed CTA. See docs/themes.md.
{% endcomment %}

<!-- ============================================ -->
<!-- PROMO BANNER — revealed + populated by the framework pricing JS
     (sale name, countdown, navbar offset). The ids are the contract;
     ship it hidden and let the JS do the rest. -->
<!-- ============================================ -->
<div id="pricing-promo-banner" class="position-fixed top-0 start-0 w-100 text-center animation-slide-down" style="z-index: 1050;" hidden>
  <div class="bg-primary text-white py-2 position-relative">
    <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 mt-2 me-2" aria-label="Close" onclick="this.closest('#pricing-promo-banner').hidden=true;document.querySelector('.navbar-wrapper').style.marginTop='';document.querySelector('main > section:first-of-type').style.paddingTop=''"></button>
    <div class="container-fluid">
      <div class="d-flex align-items-center justify-content-center gap-3 flex-wrap pe-4">
        <span id="pricing-promo-badge" class="badge bg-warning text-dark px-2 py-1 fs-6 animation-wiggle">
          15% OFF!
        </span>
        <span id="pricing-promo-text" class="fw-bold">
          Flash sale
        </span>
        <span class="text-white-50">
          Ending in <span id="pricing-promo-countdown" class="fw-semibold text-white">--</span>
        </span>
        <span class="text-white-50">
          Use code <span id="pricing-promo-code" class="badge bg-white bg-opacity-25 px-2 py-1 fs-6">WELCOME15</span>
        </span>
      </div>
    </div>
  </div>
</div>

<!-- ============================================ -->
<!-- HERO -->
<!-- ============================================ -->
<section class="pricing-hero">
  <div class="container">
    <span class="kicker mb-4">{% uj_icon "tag", "me-1" %}Pricing</span>
    <h1 class="pricing-title">
      {{ page.resolved.hero.headline }}
      <span class="text-accent">{{ page.resolved.hero.headline_accent }}</span>
    </h1>
    {% iftruthy page.resolved.hero.subheadline %}
      <p class="fs-4 fw-medium mb-0">{{ page.resolved.hero.subheadline }}</p>
    {% endiftruthy %}
  </div>
</section>

<!-- ============================================ -->
<!-- PLANS -->
<!-- ============================================ -->
<section class="pricing-plans pt-0">
  <div class="container">
    <!-- Billing toggle: hard square segmented control -->
    <div class="billing-toggle" role="group" aria-label="Billing toggle">
      <input type="radio" class="btn-check" name="billing" id="monthly" autocomplete="off" data-billing="monthly">
      <label class="billing-option" for="monthly">Monthly</label>
      <input type="radio" class="btn-check" name="billing" id="annually" autocomplete="off" checked data-billing="annually">
      <label class="billing-option" for="annually">Annually <span class="billing-save">up to 20% off</span></label>
    </div>

    <p class="text-center fw-medium mb-5">
      {% uj_icon "shield-check", "me-1 text-success" %}
      Every paid plan backed by a 7-day money-back guarantee
    </p>

    {% assign plan_count = page.resolved.pricing.plans | size %}

    {% comment %} Detect common features across ALL plans (same logic as classy) {% endcomment %}
    {% assign common_feature_ids = "" | split: "," %}
    {% if plan_count > 0 %}
      {% assign first_plan = page.resolved.pricing.plans[0] %}
      {% for first_feature in first_plan.features %}
        {% assign is_common = true %}
        {% for check_plan in page.resolved.pricing.plans %}
          {% assign found_in_plan = false %}
          {% for check_feature in check_plan.features %}
            {% if check_feature.id == first_feature.id %}{% assign found_in_plan = true %}{% break %}{% endif %}
          {% endfor %}
          {% unless found_in_plan %}{% assign is_common = false %}{% break %}{% endunless %}
        {% endfor %}
        {% if is_common %}{% assign common_feature_ids = common_feature_ids | push: first_feature.id %}{% endif %}
      {% endfor %}
    {% endif %}

    <div class="pricing-plan-grid">
      {% for plan in page.resolved.pricing.plans %}
        {% comment %} Shared pricing math (assigns _plan_monthly/_plan_annually/per-unit into this scope) {% endcomment %}
        {% include core/pricing/resolve-plan.html plan=plan %}

        <article class="card pricing-plan {% if plan.popular %}pricing-plan--popular{% endif %}">
          {% if plan.popular %}
            <span class="pricing-plan-flag">Most Popular</span>
          {% endif %}

          <!-- .card-title is load-bearing: the framework pricing JS reads the plan
               name for analytics via `.h3, .h2, .card-title` inside the card. -->
          <h3 class="card-title pricing-plan-name">{{ plan.name }}</h3>
          <p class="pricing-plan-tagline">{{ plan.tagline }}</p>

          <!-- Price -->
          <div class="pricing-plan-price">
            {% if _plan_monthly == 0 %}
              <span class="pricing-plan-amount">Free</span>
            {% else %}
              <span class="pricing-plan-currency">$</span><span class="pricing-plan-amount amount" data-monthly="{{ _plan_monthly }}" data-annually="{{ _plan_annually | divided_by: 12 | round }}">{{ _plan_annually | divided_by: 12 | round }}</span><span class="pricing-plan-per">/mo</span>
            {% endif %}
          </div>

          {% if page.resolved.pricing.price_per_unit.enabled %}
            <p class="pricing-plan-ppu">
              {% if monthly_price_per_unit %}
                <span class="price-per-unit" data-monthly="${{ monthly_price_per_unit }}" data-annually="${{ annual_price_per_unit }}">${{ annual_price_per_unit }}</span> per {{ page.resolved.pricing.price_per_unit.label }}
              {% elsif _plan_monthly == 0 %}
                Perfect for trying out
              {% endif %}
            </p>
          {% endif %}

          <!-- CTA: all paid plans use the solid blue button; only the FREE plan
               uses the outline variant so it reads as the entry-level option. -->
          <div class="d-grid mb-3">
            {% if _plan_monthly == 0 %}{% assign _cta_class = "btn-outline-primary" %}{% else %}{% assign _cta_class = "btn-primary" %}{% endif %}
            {% iftruthy plan.url %}
              <a href="{{ plan.url }}" class="btn {{ _cta_class }} btn-lg fw-bold">
                {% if _plan_monthly == 0 %}Get started{% elsif plan.trial.days > 0 %}Get free trial{% else %}Get started{% endif %}
              </a>
            {% endiftruthy %}
            {% iffalsy plan.url %}
              <button class="btn {{ _cta_class }} btn-lg fw-bold" data-plan-id="{{ plan.id }}">
                {% if plan.trial.days > 0 %}Get free trial{% else %}Get started{% endif %}
              </button>
            {% endiffalsy %}
          </div>

          <!-- Billing info -->
          <p class="pricing-plan-billing">
            {% if _plan_monthly == 0 %}
              No credit card required
            {% else %}
              <span class="billing-info" data-monthly="Billed ${{ _plan_monthly | uj_commaify }} monthly" data-annually="Billed ${{ _plan_annually | uj_commaify }} annually">
                Billed ${{ _plan_annually | uj_commaify }} annually
              </span>
            {% endif %}
          </p>

          <!-- Guarantee (every plan) -->
          <p class="pricing-plan-guarantee">
            {% if _plan_monthly > 0 %}
              {% uj_icon "shield-check", "me-1 text-success" %}7-day money-back guarantee
            {% else %}
              {% uj_icon "rocket", "me-1 text-success" %}Upgrade any time
            {% endif %}
          </p>

          <hr class="pricing-plan-rule">

          {% comment %}
            Feature list — same tier-inheritance logic as classy:
              1. Common features (vary by plan, shown on every card)
              2. Basic (first plan): "What you get:" + its unique features
              3. Other plans: "Everything in <prev>, and more:" + only the ADDED features
            Helpers below render a value + the name (wrapped in a tooltip span when the
            feature has a definition).
          {% endcomment %}

          <!-- 1. Common features -->
          <ul class="pricing-plan-features">
            {% for feature in plan.features %}
              {% if common_feature_ids contains feature.id %}
                {% assign _feature_value = feature.value %}
                {% if _config_product and _feature_value == nil %}
                  {% assign _config_limit = nil %}{% for _lim in _config_product.limits %}{% if _lim[0] == feature.id %}{% assign _config_limit = _lim[1] %}{% break %}{% endif %}{% endfor %}
                  {% if _config_limit == -1 %}{% assign _feature_value = "Unlimited" %}{% elsif _config_limit %}{% assign _feature_value = _config_limit %}{% endif %}
                {% endif %}
                {% assign feature_definition = nil %}
                {% for def in page.resolved.pricing.definitions %}{% if def.id == feature.id %}{% assign feature_definition = def.definition %}{% break %}{% endif %}{% endfor %}
                <li>
                  <span class="pricing-plan-feature-icon">{% uj_icon feature.icon, "fa-sm" %}</span>
                  <span>
                    {% if _feature_value == "Unlimited" %}Unlimited{% elsif _feature_value == "24/7" %}{{ _feature_value }}{% elsif _feature_value == true or _feature_value == "Included" or _feature_value == "Available" or _feature_value == "Full" %}{% else %}{{ _feature_value | uj_commaify }}{% endif %}
                    {% iftruthy feature_definition %}<span class="text-decoration-underline text-decoration-dotted cursor-help" data-bs-toggle="tooltip" data-bs-title="{{ feature_definition }}">{{ feature.name }}</span>{% endiftruthy %}
                    {% iffalsy feature_definition %}{{ feature.name }}{% endiffalsy %}
                  </span>
                </li>
              {% endif %}
            {% endfor %}
          </ul>

          {% comment %} Does this plan add any non-common (unique) features? {% endcomment %}
          {% assign has_additional = false %}
          {% for feature in plan.features %}{% unless common_feature_ids contains feature.id %}{% assign has_additional = true %}{% break %}{% endunless %}{% endfor %}

          <!-- 2/3. Inheritance label + the plan's additional features -->
          {% if forloop.index == 1 %}
            {% if has_additional %}
              <p class="pricing-plan-inherit">What you get:</p>
            {% endif %}
          {% else %}
            {% assign _prev_index = forloop.index0 | minus: 1 %}
            {% assign _prev_plan = page.resolved.pricing.plans[_prev_index] %}
            <p class="pricing-plan-inherit">Everything in <strong>{{ _prev_plan.name }}</strong>{% if has_additional %}, and more:{% endif %}</p>
          {% endif %}

          {% if has_additional %}
            <ul class="pricing-plan-features">
              {% for feature in plan.features %}
                {% unless common_feature_ids contains feature.id %}
                  {% assign _feature_value = feature.value %}
                  {% if _config_product and _feature_value == nil %}
                    {% assign _config_limit = nil %}{% for _lim in _config_product.limits %}{% if _lim[0] == feature.id %}{% assign _config_limit = _lim[1] %}{% break %}{% endif %}{% endfor %}
                    {% if _config_limit == -1 %}{% assign _feature_value = "Unlimited" %}{% elsif _config_limit %}{% assign _feature_value = _config_limit %}{% endif %}
                  {% endif %}
                  {% assign feature_definition = nil %}
                  {% for def in page.resolved.pricing.definitions %}{% if def.id == feature.id %}{% assign feature_definition = def.definition %}{% break %}{% endif %}{% endfor %}
                  <li>
                    <span class="pricing-plan-feature-icon">{% uj_icon feature.icon, "fa-sm" %}</span>
                    <span>
                      {% if _feature_value == "Unlimited" %}Unlimited{% elsif _feature_value == "24/7" %}{{ _feature_value }}{% elsif _feature_value == true or _feature_value == "Included" or _feature_value == "Available" or _feature_value == "Full" %}{% else %}{{ _feature_value | uj_commaify }}{% endif %}
                      {% iftruthy feature_definition %}<span class="text-decoration-underline text-decoration-dotted cursor-help" data-bs-toggle="tooltip" data-bs-title="{{ feature_definition }}">{{ feature.name }}</span>{% endiftruthy %}
                      {% iffalsy feature_definition %}{{ feature.name }}{% endiffalsy %}
                    </span>
                  </li>
                {% endunless %}
              {% endfor %}
            </ul>
          {% endif %}
        </article>
      {% endfor %}
    </div>

    <!-- Enterprise block -->
    <div class="card enterprise-panel">
      <div>
        <h3 class="enterprise-panel-title">Enterprise</h3>
        <p class="mb-0 fw-medium">Custom solutions for large organizations. Advanced security and flexible pricing based on your needs.</p>
      </div>
      <button class="btn btn-primary btn-lg fw-bold flex-shrink-0" data-plan-id="enterprise">
        {% uj_icon "envelope", "me-2" %}Contact us
      </button>
    </div>
  </div>
</section>

<!-- ============================================ -->
<!-- SOCIAL PROOF — oversized color blocks -->
<!-- ============================================ -->
<section class="stats">
  <div class="container">
    <div class="stats-grid">
      {% for item in page.resolved.social_proof.items %}
        {% assign stat_bg = "text-bg-primary" %}
        {% case item.color %}
          {% when "pink" %}{% assign stat_bg = "text-bg-secondary" %}
          {% when "green" %}{% assign stat_bg = "text-bg-success" %}
          {% when "yellow" %}{% assign stat_bg = "text-bg-warning" %}
          {% when "info" %}{% assign stat_bg = "text-bg-info" %}
          {% else %}{% assign stat_bg = "text-bg-primary" %}
        {% endcase %}
        <div class="stat-block {{ stat_bg }}">
          <span class="stat-block-num">{{ item.number }}</span>
          <span class="stat-block-label">{{ item.label }}</span>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- ============================================ -->
<!-- FAQ -->
<!-- ============================================ -->
<section class="faq">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-9">
        <header class="section-head mb-5">
          {% iftruthy page.resolved.faqs.superheadline.text %}
            <span class="kicker mb-3">{% uj_icon page.resolved.faqs.superheadline.icon, "me-1" %}{{ page.resolved.faqs.superheadline.text }}</span>
          {% endiftruthy %}
          <h2 class="section-title">
            {{ page.resolved.faqs.headline }}
            <span class="text-accent">{{ page.resolved.faqs.headline_accent }}</span>
          </h2>
        </header>

        {% if page.resolved.faqs.items %}
          <div class="accordion" id="faqAccordion">
            {% for faq in page.resolved.faqs.items %}
              <div class="accordion-item mb-3">
                <h2 class="accordion-header">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq{{ forloop.index }}" aria-expanded="false" aria-controls="faq{{ forloop.index }}">
                    <span class="fw-bold">{{ faq.question }}</span>
                  </button>
                </h2>
                <div id="faq{{ forloop.index }}" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                  <div class="accordion-body">{{ faq.answer }}</div>
                </div>
              </div>
            {% endfor %}
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</section>

<!-- ============================================ -->
<!-- CTA -->
<!-- ============================================ -->
<section class="cta">
  <div class="container">
    <div class="cta-panel">
      {% iftruthy page.resolved.cta.superheadline.text %}
        <span class="kicker kicker--invert mb-4">{% uj_icon page.resolved.cta.superheadline.icon, "me-1" %}{{ page.resolved.cta.superheadline.text }}</span>
      {% endiftruthy %}
      <h2 class="cta-title">
        {{ page.resolved.cta.headline }}
        <span class="text-accent">{{ page.resolved.cta.headline_accent }}</span>
      </h2>
      {% iftruthy page.resolved.cta.subheadline %}
        <p class="cta-desc">{{ page.resolved.cta.subheadline }}</p>
      {% endiftruthy %}
      <div class="d-flex flex-wrap gap-3 justify-content-center">
        <a href="{{ page.resolved.cta.button.href }}" class="btn btn-warning btn-lg">
          {% uj_icon page.resolved.cta.button.icon, "me-2" %}{{ page.resolved.cta.button.text }}
        </a>
      </div>
    </div>
  </div>
</section>

{{ content | uj_content_format }}