@omega.js/web 0.1.0

package/themes/base/_layouts/frontend/pages/pricing.html

@@ -0,0 +1,596 @@
+---
+layout: frontend/core/base
+
+# Marketing-section defaults (Ian 2026-07-11: deliberate product behavior —
+# promo banner, social proof, testimonials, FAQs ship ON by default and are
+# consumer-overridable). PLANS never live here: payment.products is the only
+# pricing source (C2) — the enterprise row included.
+
+# Hero Section — the page's copy (shared heading/masthead cluster; the old
+# inline | default: fallbacks in markup live here now)
+hero:
+  headline: "The right plans,"
+  headline_accent: "for the right price"
+  subheadline: "Simple and affordable pricing. No hidden fees, no surprises."
+
+# Social Proof Section
+social_proof:
+  items:
+    - number: "5M"
+      label: "Customers"
+      sublabel: "90 countries"
+    - number: "#1"
+      label: "Product of the month"
+      sublabel: "Product Hunt"
+    - number: "4.8"
+      label: "Capterra"
+      show_stars: true
+    - number: "4.8"
+      label: "G2"
+      show_stars: true
+
+# CTA Section — the page's copy (shared marketing/cta band; the old inline
+# | default: fallbacks in markup live here now)
+cta:
+  headline: "Need help finding the right plan?"
+  subheadline: "Talk to our support team. We'll point you to exactly what you need."
+  primary_button:
+    text: "Talk to us"
+    href: "/contact"
+
+# Testimonials Section — no avatar: by default, so the quotes wear the
+# initial badge (the framework never loads an external portrait at runtime).
+# A brand adds avatar: pointing at its own shipped image.
+testimonials:
+  superheadline: "Testimonials"
+  items:
+    - quote: "This platform <em>transformed</em> my business. The support is incredible!"
+      author: "Sarah Johnson"
+      role: "CEO"
+      company: "TechStart Inc"
+      initial: "S"
+    - quote: "Best investment I've made. Achieved more here than with <em>any</em> consultant."
+      author: "Michael Chen"
+      role: "Founder"
+      company: "DataFlow"
+      initial: "M"
+    - quote: "The community support made all the difference in our <em>growth journey</em>."
+      author: "Emily Davis"
+      role: "Director"
+      company: "Creative Studio"
+      initial: "E"
+
+# FAQs Section
+faqs:
+  superheadline:
+    text: "FAQs"
+  headline: "Frequently asked <em>questions</em>"
+  subheadline: "Everything you need to know about {{ resolved.config.brand.name }} billing & subscriptions."
+  # Trial copy DERIVES from the catalog (#273): the answer renders empty when
+  # no product carries `trial.days`, and the renderers drop answerless items —
+  # so a brand with no trial ships no trial claim. A refund policy is brand
+  # copy, never a framework default: the defaults state only what the catalog
+  # knows.
+  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: "{% if resolved.pricing.trialDays > 0 %}Yes, every paid plan starts with a {{ resolved.pricing.trialDays }}-day free trial, and you can cancel any time before it ends.{% endif %}"
+---
+
+{% comment %}
+  Pricing renders from config alone (C2): resolved.pricing is composed from
+  payment.products by the engine — plans, one-time products, billing toggle
+  availability, savings %, comparison matrix. The marketing chrome above
+  (banner, social proof, testimonials, FAQs) ships ON by default; consumer
+  page frontmatter overrides any of it (pricing.promo: false kills the
+  banner). The enterprise row is DATA, not chrome: it renders only for the
+  catalog product marked `enterprise: true`.
+{% endcomment %}
+
+{% assign _plans = resolved.pricing.plans %}
+{% assign _plan_count = _plans | size %}
+{% assign _onetime = resolved.pricing.oneTime %}
+{% assign _onetime_count = _onetime | size %}
+{% assign _enterprise = resolved.pricing.enterprise %}
+{% assign _show_toggle = false %}
+{% if resolved.pricing.billing.monthly and resolved.pricing.billing.annually %}
+  {% assign _show_toggle = true %}
+{% endif %}
+{% assign _default_annual = resolved.pricing.billing.annually %}
+
+<!-- Promo Banner — ON by default; pricing.promo overrides badge/text/code, pricing.promo: false kills it -->
+{% unless resolved.pricing.promo == false %}
+  <div id="pricing-promo-banner" class="omega-promo position-fixed top-0 start-0 w-100" style="z-index: 1050;" hidden>
+    <div class="py-2 position-relative">
+      <button type="button" class="btn-close position-absolute top-50 end-0 translate-middle-y me-3" aria-label="Close" onclick="this.closest('#pricing-promo-banner').hidden=true;var n=document.querySelector('.omega-nav');if(n)n.style.marginTop=''"></button>
+      <div class="container-fluid">
+        <div class="d-flex align-items-center justify-content-center gap-3 flex-wrap pe-5">
+          <span id="pricing-promo-badge" class="omega-chip omega-chip--accent">
+            {{ resolved.pricing.promo.badge | default: "15% OFF!" }}
+          </span>
+          <span id="pricing-promo-text" class="fw-semibold text-body">
+            {{ resolved.pricing.promo.text | default: "Flash sale" }}
+          </span>
+          <span>
+            Ending in <span id="pricing-promo-countdown" class="omega-promo__countdown">--</span>
+          </span>
+          <span>
+            Use code <span id="pricing-promo-code" class="omega-promo__code omega-chip">{{ resolved.pricing.promo.code | default: "WELCOME15" }}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endunless %}
+
+<!-- Hero Section -->
+{% comment %} #467 (after #749): this masthead IS the page's first viewport, so
+the band paints with the document — data-omega-first-paint on the section, no
+stagger container, and the masthead cluster on its first_paint switch. The
+bands below keep the reveal lane. {% endcomment %}
+<section class="omega-dotgrid pb-4" data-omega-first-paint data-omega-dotfield>
+  <div class="container">
+    <div class="row justify-content-center text-center">
+      <div class="col-lg-10">
+        {% component "heading/masthead", eyebrow: "Pricing", headline: resolved.hero.headline, headline_accent: resolved.hero.headline_accent, sub: resolved.hero.subheadline, sub_class: "omega-hero__sub mx-auto", first_paint: true %}
+      </div>
+    </div>
+  </div>
+</section>
+
+{% if _plan_count == 0 and _onetime_count == 0 and _enterprise == nil %}
+  <!-- Empty state: no published catalog (payment.products) — never render fiction -->
+  <section class="pt-0">
+    <div class="container">
+      <div class="row justify-content-center text-center">
+        <div class="col-lg-8">
+          <div id="pricing-empty" class="card p-5" data-omega-reveal>
+            <h2 class="h3 mb-3">Pricing isn't published yet</h2>
+            <p class="text-muted mb-4">We're putting the finishing touches on our plans. Reach out and we'll get you set up in the meantime.</p>
+            <div>
+              <a href="/contact" class="btn btn-adaptive btn-lg px-4">
+                <i class="fa-solid fa-envelope me-2"></i>
+                Contact us
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+{% endif %}
+
+{% if _plan_count > 0 %}
+<!-- Pricing Plans Section -->
+<section class="pt-0">
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-12">
+        {% comment %} The band's heading (#270): the card names are h3s, so
+        without it the page skips from the hero h1 straight to h3. Visually
+        hidden — the design carries the band by its cards, not a title. {% endcomment %}
+        <h2 class="visually-hidden">Subscription plans</h2>
+
+        {% if _show_toggle %}
+          {% if resolved.pricing.savingsPercent > 0 %}
+            {% assign _savings = resolved.pricing.savingsPercent %}
+          {% else %}
+            {% assign _savings = 20 %}
+          {% endif %}
+          <div class="d-flex align-items-center justify-content-center mb-5" data-omega-reveal>
+            <div class="omega-billing-toggle" role="group" aria-label="Billing toggle" data-omega-segmented>
+              <input type="radio" class="btn-check" name="billing" id="monthly" autocomplete="off" data-billing="monthly" {% unless _default_annual %}checked{% endunless %}>
+              <label class="btn" for="monthly">Monthly</label>
+
+              <input type="radio" class="btn-check" name="billing" id="annually" autocomplete="off" {% if _default_annual %}checked{% endif %} data-billing="annually">
+              <label class="btn" for="annually">Annually <span class="omega-chip omega-chip--accent omega-billing-toggle__save ms-1">Save {{ _savings }}%</span></label>
+            </div>
+          </div>
+        {% endif %}
+
+        {% comment %} Enterprise left the grid (issue #44 item 8) — it gets its
+        own full-width row below, so the cards are peers of each other {% endcomment %}
+        {% assign _card_count = _plan_count %}
+
+        <!-- Determine column classes based on number of cards -->
+        {% if _card_count == 1 %}
+          {% assign col_classes = "col-12 col-md-8 col-lg-6 col-xl-5" %}
+        {% elsif _card_count == 2 %}
+          {% assign col_classes = "col-12 col-md-6 col-lg-5 col-xl-5" %}
+        {% elsif _card_count == 3 %}
+          {% assign col_classes = "col-12 col-md-6 col-lg-6 col-xl-4" %}
+        {% elsif _card_count == 4 %}
+          {% assign col_classes = "col-12 col-md-6 col-lg-6 col-xl-3" %}
+        {% elsif _card_count == 5 %}
+          {% assign col_classes = "col-12 col-md-6 col-lg-4 col-xl-4 col-xxl-2" %}
+        {% else %}
+          {% assign col_classes = "col-12 col-md-6 col-lg-4 col-xl-3 col-xxl-2" %}
+        {% endif %}
+
+        <div class="row g-4 g-xl-5 mb-4 justify-content-center" data-omega-reveal-stagger="80">
+          {% for plan in _plans %}
+            <div class="{{ col_classes }}" data-omega-reveal>
+              <div class="card omega-price-card {% if plan.popular %}omega-price-card--popular{% endif %} h-100">
+                {% if plan.popular %}
+                  <span class="omega-chip omega-chip--ink omega-price-card__popular">Most popular</span>
+                {% endif %}
+
+                <!-- Header (fixed rhythm — every card's features start on the same row) -->
+                <h3 class="card-title omega-price-card__name mb-0">{{ plan.name }}</h3>
+                <p class="omega-price-card__tagline">{{ plan.tagline }}</p>
+
+                <!-- Price -->
+                {% if plan.free %}
+                  <div class="omega-price-card__price">
+                    <span class="omega-price-card__amount">Free</span>
+                  </div>
+                {% else %}
+                  {% if _default_annual and plan.prices.annually > 0 %}
+                    {% assign _initial_amount = plan.prices.annuallyPerMonth %}
+                  {% else %}
+                    {% assign _initial_amount = plan.prices.monthly %}
+                  {% endif %}
+                  <div class="omega-price-card__price">
+                    <span class="omega-price-card__currency">$</span>
+                    <span class="omega-price-card__amount amount" data-monthly="{{ plan.prices.monthly }}" data-annually="{{ plan.prices.annuallyPerMonth }}">{{ _initial_amount }}</span>
+                    <span class="omega-price-card__per">/month</span>
+                  </div>
+                {% endif %}
+
+                <!-- Billing info line (swaps with the toggle — JS contract) -->
+                <p class="omega-price-card__billing">
+                  {% if plan.free %}
+                    <span>No credit card required</span>
+                  {% else %}
+                    {% if _default_annual and plan.prices.annually > 0 %}
+                      {% capture _initial_billing %}Billed ${{ plan.prices.annually | omega_commaify }} annually{% endcapture %}
+                    {% else %}
+                      {% capture _initial_billing %}Billed ${{ plan.prices.monthly | omega_commaify }} monthly{% endcapture %}
+                    {% endif %}
+                    <span class="billing-info" data-monthly="Billed ${{ plan.prices.monthly | omega_commaify }} monthly" data-annually="Billed ${{ plan.prices.annually | omega_commaify }} annually">
+                      {{ _initial_billing }}
+                    </span>
+                    {% if resolved.pricing.price_per_unit.enabled %}
+                      {% include core/pricing/price-per-unit.html plan=plan %}
+                      {% 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 {{ resolved.pricing.price_per_unit.label }}
+                      {% endif %}
+                    {% endif %}
+                  {% endif %}
+                </p>
+
+                {% if plan.features.size > 0 %}
+                  <!-- Features (definitions from config → dotted underline +
+                       tooltip): the ONE list component the homepage plan band
+                       renders too (#539) -->
+                  {% component "pricing/features", features: plan.commonFeatures %}
+
+                  {% if plan.extraFeatures.size > 0 %}
+                    {% unless forloop.first %}
+                      {% assign _prev_index = forloop.index0 | minus: 1 %}
+                      {% assign _prev_plan = _plans[_prev_index] %}
+                      <div class="omega-price-card__tier-note">
+                        Everything in <strong>{{ _prev_plan.name }}</strong>, and:
+                      </div>
+                    {% endunless %}
+                    {% component "pricing/features", features: plan.extraFeatures %}
+                  {% elsif forloop.first == false %}
+                    {% assign _prev_index = forloop.index0 | minus: 1 %}
+                    {% assign _prev_plan = _plans[_prev_index] %}
+                    <div class="omega-price-card__tier-note">
+                      Everything in <strong>{{ _prev_plan.name }}</strong>
+                    </div>
+                  {% endif %}
+                {% endif %}
+
+                <!-- CTA — pinned to the card floor; buttons align across the row -->
+                <div class="d-grid omega-price-card__cta">
+                  {% if plan.popular %}
+                    {% assign _plan_btn = "btn-adaptive omega-btn-ring" %}
+                  {% else %}
+                    {% assign _plan_btn = "btn-outline-adaptive" %}
+                  {% endif %}
+                  {% iftruthy plan.url %}
+                    <a href="{{ plan.url }}" class="btn {{ _plan_btn }} fw-semibold omega-hover-nudge">
+                      {% if plan.trialDays > 0 %}
+                        Get free trial
+                      {% else %}
+                        Get started
+                      {% endif %}
+                      <span class="omega-nudge ms-2"><i class="fa-solid fa-arrow-right fa-sm"></i></span>
+                    </a>
+                  {% endiftruthy %}
+                  {% iffalsy plan.url %}
+                    <button class="btn {{ _plan_btn }} fw-semibold omega-hover-nudge" data-plan-id="{{ plan.id }}" data-plan-type="subscription">
+                      {% if plan.trialDays > 0 %}
+                        Get free trial
+                      {% else %}
+                        Get started
+                      {% endif %}
+                      <span class="omega-nudge ms-2"><i class="fa-solid fa-arrow-right fa-sm"></i></span>
+                    </button>
+                  {% endiffalsy %}
+                </div>
+              </div>
+            </div>
+          {% endfor %}
+        </div>
+
+        {% comment %} The guarantee line is BRAND copy (#273): a refund window
+        is a policy the framework cannot know, so there is no default — a brand
+        sets pricing.guarantee and the line appears. {% endcomment %}
+        {% iftruthy resolved.pricing.guarantee %}
+          <p class="small text-center omega-quiet mb-0" data-omega-reveal>
+            <span class="omega-guarantee-icon me-1"><i class="fa-solid fa-shield-halved"></i></span>
+            {{ resolved.pricing.guarantee }}
+          </p>
+        {% endiftruthy %}
+
+      </div>
+    </div>
+  </div>
+</section>
+{% endif %}
+
+{% iftruthy _enterprise %}
+<!-- Enterprise — its own full-width row under the cards (the catalog product
+     marked enterprise: true; no such product, no row) -->
+<section class="pt-0">
+  <div class="container">
+    {% comment %} The band's heading (#270): its title is an h3, and an
+    enterprise-only catalog renders no plans band above it — so the h2 rides
+    here too. Visually hidden — the row carries itself. {% endcomment %}
+    <h2 class="visually-hidden">Enterprise</h2>
+
+    <div class="omega-band omega-band--enterprise" data-omega-reveal>
+      <div class="omega-band__body">
+        <h3 class="omega-band__title">{{ _enterprise.name }}</h3>
+        {% iftruthy _enterprise.tagline %}
+          <p class="omega-band__desc">{{ _enterprise.tagline }}</p>
+        {% endiftruthy %}
+        {% if _enterprise.features.size > 0 %}
+          <ul class="omega-band__features">
+            {% for feature in _enterprise.features %}
+              <li>
+                <span class="omega-feature-check text-success"><i class="fa-solid fa-check fa-sm"></i></span>
+                <span>
+                  {% if feature.value == 'Unlimited' %}
+                    Unlimited
+                  {% elsif feature.value and feature.value != true %}
+                    {{ feature.value | omega_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>
+            {% endfor %}
+          </ul>
+        {% endif %}
+      </div>
+
+      <div class="omega-band__actions">
+        <a href="{{ _enterprise.url }}" class="btn btn-outline-adaptive fw-semibold omega-hover-nudge" data-plan-enterprise="{{ _enterprise.id }}">
+          Contact us
+          <span class="omega-nudge ms-2"><i class="fa-solid fa-arrow-right fa-sm"></i></span>
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
+{% endiftruthy %}
+
+{% if _onetime_count > 0 %}
+<!-- One-time Purchases Section (friction #7: presented per type, no billing cadence) -->
+<section class="pt-0">
+  <div class="container">
+    <div class="omega-section-head omega-section-head--center mb-5" data-omega-reveal>
+      {% comment %} resolved.pricing is engine-composed from payment.products
+      (C2) — copy defaults stay INLINE filter args, never frontmatter. {% endcomment %}
+      {% component "heading/section-head", headline: resolved.pricing.one_time_headline | default: "One-time", headline_accent: resolved.pricing.one_time_headline_accent | default: "purchases", sub: resolved.pricing.one_time_subheadline | default: "Pay once, keep it forever. No subscription required." %}
+    </div>
+
+    <div class="row g-4 justify-content-center" data-omega-reveal-stagger="80">
+      {% for product in _onetime %}
+        <div class="col-12 col-md-6 col-lg-5 col-xl-4" data-omega-reveal>
+          <div class="card omega-price-card h-100">
+            <h3 class="card-title omega-price-card__name mb-0">{{ product.name }}</h3>
+            <p class="omega-price-card__tagline">{{ product.tagline }}</p>
+
+            <div class="omega-price-card__price">
+              <span class="omega-price-card__currency">$</span>
+              <span class="omega-price-card__amount">{{ product.price | omega_commaify }}</span>
+              <span class="omega-price-card__per">one-time</span>
+            </div>
+
+            <p class="omega-price-card__billing">
+              <span>Yours forever, pay once</span>
+            </p>
+
+            {% component "pricing/features", features: product.features %}
+
+            <div class="d-grid omega-price-card__cta">
+              <button class="btn btn-adaptive fw-semibold omega-hover-nudge" data-plan-id="{{ product.id }}" data-plan-type="one-time">
+                Buy now
+                <span class="omega-nudge ms-2"><i class="fa-solid fa-arrow-right fa-sm"></i></span>
+              </button>
+            </div>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>
+{% endif %}
+
+{% assign _comparison_features = resolved.pricing.comparison.features %}
+{% assign _comparison_count = _comparison_features | size %}
+{% if _plan_count > 1 and _comparison_count > 0 %}
+<!-- Feature Comparison Grid -->
+<section class="omega-compare">
+  <div class="container">
+    <div class="omega-section-head omega-section-head--center mb-5" data-omega-reveal>
+      {% component "heading/section-head", superheadline: resolved.feature_comparison.superheadline.text | default: "Compare", headline: resolved.feature_comparison.headline | default: "Compare all", headline_accent: resolved.feature_comparison.headline_accent | default: "plans", sub: resolved.feature_comparison.subheadline | default: "See exactly what's included in each plan" %}
+      <!-- Mobile scroll indicator -->
+      <div class="d-md-none">
+        <small class="text-muted">
+          <span class="me-2">Swipe to see more</span>
+          <i class="fa-solid fa-arrow-right fa-sm"></i>
+        </small>
+      </div>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="table-responsive" data-omega-reveal>
+      <table class="table caption-top">
+        <caption>Compare features</caption>
+        <thead>
+          <tr>
+            <th scope="col">Feature</th>
+            {% for plan in _plans %}
+              <th scope="col">{{ plan.name }}</th>
+            {% endfor %}
+          </tr>
+        </thead>
+        <tbody>
+          {% for feature in _comparison_features %}
+            <tr>
+              <th scope="row">
+                {% 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 %}
+              </th>
+              {% for plan in _plans %}
+                {% assign _cell = feature.values[plan.id] %}
+                <td>
+                  {%- comment %} One catalog value, both surfaces (#562): a
+                  truthy cell is a YES, and a cell that is not a bare `true`
+                  carries its own value as the label — exactly what the plan
+                  cards render beside their check. A row of "Included" beside
+                  circle-xmark icons was the same data telling two stories.
+                  {% endcomment -%}
+                  {% if _cell %}
+                    <span class="omega-compare__yes text-success"><i class="fa-solid fa-circle-check fa-md"></i></span>
+                    {% if _cell != true %}
+                      <span class="omega-compare__label">{{ _cell | omega_commaify | escape_once }}</span>
+                    {% endif %}
+                  {% else %}
+                    <span class="omega-compare__no"><i class="fa-solid fa-circle-xmark fa-md"></i></span>
+                  {% endif %}
+                </td>
+              {% endfor %}
+            </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  </div>
+</section>
+{% endif %}
+
+<!-- Social Proof Section (consumer-provided: social_proof.items) -->
+{% iftruthy resolved.social_proof.items %}
+<section>
+  <div class="container">
+    <div class="omega-stats" data-omega-reveal-stagger="80">
+      {% for item in resolved.social_proof.items %}
+        <div class="omega-stat" data-omega-reveal>
+          <div class="omega-stat__num" data-omega-countup>{{ item.number }}</div>
+          {% iftruthy item.show_stars %}
+            <div class="mt-1" style="color: var(--omega-accent);">
+              {% for i in (1..5) %}
+                <i class="fa-solid fa-star fa-xs"></i>
+              {% endfor %}
+            </div>
+          {% endiftruthy %}
+          <div class="omega-stat__label">{{ item.label }}</div>
+          {% iftruthy item.sublabel %}
+            <div class="omega-stat__sub">{{ item.sublabel }}</div>
+          {% endiftruthy %}
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>
+{% endiftruthy %}
+
+<!-- CTA Section -->
+{% section "marketing/cta", data: resolved.cta %}
+
+{% iftruthy resolved.testimonials.items %}
+  {% section "marketing/testimonials", data: resolved.testimonials %}
+{% endiftruthy %}
+
+<!-- FAQ Section (consumer-provided: faqs.items) -->
+{% comment %} An answerless item is a DERIVED one whose condition didn't hold
+(#273 — the trial FAQ on a catalog with no trial): it drops out of the
+accordion here and out of the FAQPage schema in core/foot.html. The test is
+`!= ''` on purpose — `!= blank` does not filter inside where_exp here.
+{% endcomment %}
+{% assign _faqs = resolved.faqs.items | where_exp: "faq", "faq.answer != ''" %}
+{% assign _faq_count = _faqs | size %}
+{% if _faq_count > 0 %}
+<section>
+  <div class="container">
+    <div class="omega-duo">
+      <div class="omega-duo__aside omega-section-head" data-omega-reveal>
+        {% component "heading/section-head", superheadline: resolved.faqs.superheadline.text, headline: resolved.faqs.headline | default: "Frequently asked <em>questions</em>", headline_accent: resolved.faqs.headline_accent, sub: resolved.faqs.subheadline %}
+
+        {% comment %} The billing object states what the framework KNOWS: the
+        plan-switch route really does prorate. Its refund half — the fragment
+        and the floating chip — is the same brand copy as the guarantee line
+        above (#273), so it rides the same `pricing.guarantee` gate and the
+        object drops its chip clearance with it. {% endcomment %}
+        <div class="omega-object position-relative pe-4 mt-4 d-none d-lg-block">
+          <div class="omega-fragment{% iftruthy resolved.pricing.guarantee %} pb-5{% endiftruthy %}">
+            <span class="omega-micro omega-fragment__label">How billing behaves</span>
+            <div class="omega-fragment__msg">
+              <span class="omega-fragment__msg-mark"><i class="fa-solid fa-arrows-rotate fa-xs"></i></span>
+              <span>Switch plans anytime, <strong>prorated</strong> automatically</span>
+            </div>
+            {% iftruthy resolved.pricing.guarantee %}
+              <div class="omega-fragment__msg">
+                <span class="omega-fragment__msg-mark"><i class="fa-solid fa-rotate-left fa-xs"></i></span>
+                <span>Changed your mind? <strong>Refunded.</strong></span>
+              </div>
+            {% endiftruthy %}
+          </div>
+          {% iftruthy resolved.pricing.guarantee %}
+            <div class="omega-fragment-chip omega-float position-absolute bottom-0 end-0 translate-middle-y">
+              <span class="omega-dot omega-status--ok"></span>
+              Money-back guarantee
+            </div>
+          {% endiftruthy %}
+        </div>
+      </div>
+
+      <div class="accordion omega-faq" id="faqAccordion" data-omega-reveal>
+        {% for faq in _faqs %}
+          <div class="accordion-item">
+            <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>{{ 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>
+    </div>
+  </div>
+</section>
+{% endif %}
+
+{{ content | omega_content_format }}