@omega.js/extension 0.1.0

package/dist/assets/themes/base/_layouts/frontend/pages/index.html

@@ -0,0 +1,66 @@
+---
+layout: frontend/core/base
+
+#### THEME CONFIG ####
+# Page sections: extracted to _sections/marketing/* (hero, trusted-by, bento,
+# product-demo, showcase, stats — each section.json5 owns the defaults;
+# consumers override by owning the composition in their page BODY — page
+# frontmatter is meta-only since 2026-07-19; directory data remains the
+# site-wide lane — docs/web/omega-sections-spec.md).
+
+# Testimonials + CTA — page copy stays HERE: marketing/testimonials and
+# marketing/cta are SHARED bands (pricing/alternatives/about/team/... pass
+# their own), so their json5 defaults stay neutral and every page owns its
+# copy (spec §6 shared-band ruling).
+testimonials:
+  superheadline: "Testimonials"
+  items:
+    - quote: "This platform <em>transformed</em> how we ship. We went from idea to production in a weekend."
+      author: "Sarah Johnson"
+      role: "CEO, TechStart Inc"
+      initial: "S"
+    - quote: "Best investment we've made. Everything just works, <em>together</em>."
+      author: "Michael Chen"
+      role: "Founder, DataFlow"
+      initial: "M"
+    - quote: "The kind of foundation you usually spend a year building. We got it on <em>day one</em>."
+      author: "Emily Davis"
+      role: "Director, Creative Studio"
+      initial: "E"
+
+# CTA Section — the ink band
+cta:
+  headline: "Ready to build something people remember?"
+  subheadline: "Join thousands of teams already shipping with {{ resolved.config.brand.name }}."
+  primary_button:
+    text: "Start free today"
+    href: "/signup"
+config:
+  theme:
+    main:
+      class: "pt-0"
+---
+{% composition %}
+{% section "marketing/hero", data: resolved.hero %}
+<!-- ═══ Trusted-by marquee ═══ -->
+{% section "marketing/trusted-by", data: resolved.trusted_by %}
+<!-- ═══ Bento ═══ -->
+{% section "marketing/bento", data: resolved.bento %}
+<!-- ═══ Plan cards (#493) — the catalog itself, right under the WHY band.
+     plans/annual bridge from resolved.pricing: ONE pricing source, and a
+     brand with no published catalog renders no band. ═══ -->
+{% section "marketing/pricing-cards", data: resolved.pricing_cards, plans: resolved.pricing.plans, annual: resolved.pricing.billing.annually %}
+<!-- ═══ Product demo (optional video tabs) ═══ -->
+{% section "marketing/product-demo", data: resolved.product_demo %}
+<!-- ═══ Showcase (optional alternating rows) ═══ -->
+{% section "marketing/showcase", data: resolved.showcase %}
+<!-- ═══ Stats band ═══ -->
+{% section "marketing/stats", items: resolved.stats %}
+<!-- ═══ Quote ═══ -->
+{% iftruthy resolved.testimonials.items %}
+  {% section "marketing/testimonials", data: resolved.testimonials %}
+{% endiftruthy %}
+
+<!-- ═══ CTA band ═══ -->
+{% section "marketing/cta", data: resolved.cta %}
+{% endcomposition %}

package/dist/assets/themes/base/_layouts/frontend/pages/legal/document.html

@@ -0,0 +1,78 @@
+---
+layout: frontend/core/base
+
+# ═══ Legal document shell — reimagined 2026-07-16. One layout for the trio
+# (terms/privacy/cookies): sober document header with the legal-hub switcher,
+# a sticky "On this page" rail built from the document's h3 sections
+# (core/js/pages/legal/document), and the text at a readable measure.
+
+config:
+  theme:
+    nav:
+      enabled: true
+    footer:
+      enabled: true
+---
+
+{% capture company %}{{ resolved.config.brand.company | default: resolved.config.brand.name }}{% endcapture %}
+
+<!-- ═══ Document header ═══ -->
+{% 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
+document body below it never carried a reveal of its own. {% endcomment %}
+<section class="omega-legal__head pb-4" data-omega-first-paint>
+  <div class="container">
+    {% component "heading/masthead", eyebrow: "Legal", headline: resolved.meta.breadcrumb, h1_class: "mb-2", sub: resolved.meta.description, sub_class: "omega-legal__sub omega-quiet", first_paint: true %}
+
+    <!-- The legal hub: every policy one hop away, current one marked -->
+    <nav class="omega-legal__hub" aria-label="Legal documents">
+      {% assign legal_docs = "Terms of Service|/terms,Privacy Policy|/privacy,Cookie Policy|/cookies" | split: "," %}
+      {% for doc in legal_docs %}
+        {% assign parts = doc | split: "|" %}
+        {% assign doc_name = parts[0] %}
+        {% assign doc_url = parts[1] %}
+        {% if page.url == doc_url %}
+          <span class="omega-chip omega-chip--ink" aria-current="page">{{ doc_name }}</span>
+        {% else %}
+          <a class="omega-chip" href="{{ doc_url }}">{{ doc_name }}</a>
+        {% endif %}
+      {% endfor %}
+    </nav>
+  </div>
+</section>
+
+<!-- ═══ Rail + document ═══ -->
+<section class="pt-2">
+  <div class="container">
+    <div class="omega-legal">
+      <aside class="omega-legal__rail" aria-label="On this page">
+        <div class="omega-legal__rail-inner">
+          <span class="omega-micro d-block mb-3">On this page</span>
+          <nav class="omega-legal__toc" data-legal-toc>
+            <!-- Built by the page JS from the document's section headings -->
+          </nav>
+
+          <div class="omega-legal__rail-foot">
+            {% iftruthy resolved.config.brand.contact.email %}
+              <a class="omega-legal__rail-link" href="mailto:{{ resolved.config.brand.contact.email }}">
+                <i class="fa-solid fa-envelope fa-xs me-2"></i>Questions? Email us
+              </a>
+            {% endiftruthy %}
+            <button type="button" class="omega-legal__rail-link" data-legal-print>
+              <i class="fa-solid fa-print fa-xs me-2"></i>Print this page
+            </button>
+          </div>
+        </div>
+      </aside>
+
+      <article class="omega-legal__doc omega-prose" data-legal-doc>
+        {{ content | omega_content_format }}
+
+        <footer class="omega-legal__doc-foot omega-quiet small">
+          © {{ site.omega.date.year }} {{ company }}. This document governs {{ resolved.config.brand.name }}.
+        </footer>
+      </article>
+    </div>
+  </div>
+</section>

package/dist/assets/themes/base/_layouts/frontend/pages/payment/checkout.html

@@ -0,0 +1,459 @@
+---
+layout: frontend/core/cover
+
+# ═══ Checkout — the classy redesign (round 18). The commitment moment now
+# sits on real surfaces: the left column as two hairline PANELS (plan,
+# account) each led by an icon chip, then the pay zone BARE beneath them, and
+# the order summary as a receipt CARD on the right (product identity,
+# discount, then the money rows in the shared receipt vocabulary). Reveals
+# stagger the zones in; every color is a token, both modes.
+# The pay buttons live OUTSIDE any card and under NO head, both viewports
+# (Ian 2026-08-19, #374): the commitment moment is the one zone with no chrome
+# around it, and a "Payment" label over a Credit/Debit button and a PayPal mark
+# names nothing the buttons do not already say. The trust chips AND the help
+# line ride the buttons' own capture, centered right under the terms line — the
+# page foot below the form is empty.
+# The HEADER is one brand lockup and nothing else (#373): the brandmark and
+# the brand name on one line, left, linking home, and it is the page's h1.
+# A checkout page is got THROUGH, not read — an eyebrow, a serif display
+# title and a second copy of the mark were three voices for a page that
+# needs one. It reads its brand facts from config; never type them here.
+# The mobile one-screen contract (cp179) is DELIBERATE and stays (Ian
+# 2026-08-19, #370): EVERY card collapses to a one-line row showing the value
+# it hides, so the pay buttons sit above the fold. Billing cycle and Account
+# start closed; the Order summary starts OPEN, and its folded row carries the
+# total due today (the old "never fold the numbers" note is retired). What the
+# phone must NOT have is its own vocabulary — the rows are labeled with
+# desktop's words ("Billing cycle", "Account", "Order summary"), and the pay
+# buttons are one width and one height on every viewport.
+# Every payment-engine hook is preserved verbatim: #checkout-form,
+# name="frequency" radios, data-payment-method/data-action buttons,
+# #discount-code, #apply-discount, #switch-account, #checkout-help-button,
+# #subscription-toggle, the dev panel ids, and all data-omega-bind expressions.
+
+config:
+  theme:
+    main:
+      align: "start"
+  client:
+    auth:
+      config:
+        policy: "authenticated"
+    consent:
+      enabled: false
+---
+
+<!-- The pay buttons captured once and rendered by both column positions (the
+     phone puts payment after the summary), so neither viewport carries its own
+     copy of this markup — and both stack them the same way: one full-width
+     column, one height per button (#370). The capture is the WHOLE commitment
+     block (#374): buttons, terms, trust chips, help line — every one of them
+     centered, so the assurance always sits directly under the buttons and the
+     two viewports can never drift apart. -->
+{% capture payment_buttons_content %}
+  <!-- Credit/Debit Card Button -->
+  <button type="submit" class="btn btn-adaptive payment-button d-flex align-items-center justify-content-center"
+          data-payment-method="card"
+          data-action="pay-card"
+          data-omega-bind="@show checkout.paymentMethods.card"
+          hidden>
+    <i class="fa-solid fa-credit-card me-2 fa-lg"></i>
+    <span class="fw-semibold">Credit/Debit</span>
+  </button>
+
+  <!-- PayPal Button -->
+  <button type="submit" class="btn btn-paypal payment-button d-flex align-items-center justify-content-center"
+          data-payment-method="paypal"
+          data-action="pay-paypal"
+          data-omega-bind="@show checkout.paymentMethods.paypal"
+          hidden>
+    <img src="https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-200px.png"
+        alt="PayPal"
+        height="24"
+        style="max-height: 24px;">
+  </button>
+
+  <!-- Apple Pay Button -->
+  <button type="submit" class="btn payment-button payment-button--apple d-flex align-items-center justify-content-center"
+          data-payment-method="apple-pay"
+          data-action="pay-apple-pay"
+          data-omega-bind="@show checkout.paymentMethods.applePay"
+          hidden>
+    <i class="fa-brands fa-apple me-2 fa-lg"></i>
+    <span class="fw-semibold">Apple Pay</span>
+  </button>
+
+  <!-- Google Pay Button -->
+  <button type="submit" class="btn payment-button payment-button--gpay d-flex align-items-center justify-content-center"
+          data-payment-method="google-pay"
+          data-action="pay-google-pay"
+          data-omega-bind="@show checkout.paymentMethods.googlePay"
+          hidden>
+    <img src="https://www.gstatic.com/instantbuy/svg/dark_gpay.svg"
+        alt="Google Pay"
+        height="22"
+        class="me-2">
+    <span class="fw-semibold">Google Pay</span>
+  </button>
+
+  <!-- Crypto Button — Coinbase Commerce (#642). One-time purchases only, so it
+       shows on the crypto provider's own switch and never on a subscription. -->
+  <button type="submit" class="btn btn-outline-adaptive payment-button d-flex align-items-center justify-content-center"
+          data-payment-method="crypto"
+          data-action="pay-crypto"
+          data-omega-bind="@show checkout.paymentMethods.crypto"
+          hidden>
+    <i class="fa-brands fa-bitcoin me-2 fa-lg"></i>
+    <span class="fw-semibold">Crypto</span>
+  </button>
+
+  <p class="omega-checkout__terms small mb-0">
+    By purchasing, you agree to our <a href="/terms" target="_blank">Terms of Service</a> and <a href="/privacy" target="_blank">Privacy Policy</a>.
+  </p>
+
+  <!-- Trust chips — centered inside the pay stack, right under the terms line,
+       both viewports (Ian 2026-08-19, #374): at the page foot they were a
+       footnote two zones away from the thing they reassure. The refund chip
+       rides the brand's `pricing.guarantee` gate (#273); the other two state
+       facts the framework owns. No "Encrypted" chip joins them — "SSL
+       encrypted" already says it, with the same lock. The gap above is the
+       sheet's, not a utility: one home for the pay stack's rhythm. -->
+  <div class="omega-checkout__trust">
+    <span><i class="fa-solid fa-lock fa-xs"></i> SSL encrypted</span>
+    {% iftruthy resolved.pricing.guarantee %}
+      <span><i class="fa-solid fa-shield-halved fa-xs"></i> Money-back guarantee</span>
+    {% endiftruthy %}
+    <span><i class="fa-solid fa-handshake fa-xs"></i> Secure payments</span>
+  </div>
+
+  <!-- Help — the stack's last line, in the stack (Ian 2026-08-19, #374): the
+       one line a stalled buyer reaches for belongs where the stall happens, not
+       at a page foot below the form. Its rhythm is the sheet's too, so the
+       capture carries no utility margins to drift between viewports. -->
+  <div class="omega-checkout__help">
+    <a href="javascript:;" class="omega-checkout__quiet-link small" id="checkout-help-button">
+      <i class="fa-solid fa-circle-question fa-sm me-1"></i> Need help? Chat with us.
+    </a>
+  </div>
+{% endcapture %}
+
+<!-- Error Message Container (hidden by default, shown via bindings) -->
+<div id="checkout-error-container" class="col-12" data-omega-bind="@show checkout.error.show" hidden>
+  <div class="row justify-content-center">
+    <div class="col-12 col-md-8 col-lg-6 col-xl-5">
+      <div class="omega-form-panel text-center" role="alert">
+        <span class="omega-icon-chip omega-icon-chip--neutral omega-icon-chip--lg omega-checkout__error-glyph mb-3">
+          <i class="fa-solid fa-triangle-exclamation fa-md"></i>
+        </span>
+        <h1 class="omega-display omega-display--section mb-2">Something went <em>wrong</em></h1>
+        <p class="omega-quiet mb-4" data-omega-bind="@text checkout.error.message"></p>
+        <button class="btn btn-adaptive omega-hover-nudge" onclick="window.location.reload()">
+          <i class="fa-solid fa-rotate-right fa-sm me-2"></i>
+          Try again
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Checkout Section (visible by default, hidden only when error is shown) -->
+<section id="checkout-content" class="col-12 col-xl-10 omega-checkout" data-omega-bind="@hide checkout.error.show">
+  <!-- Header: ONE brand lockup, left, and nothing else (#373 — Shopify's
+       checkout leads with the store's mark). It is the page's h1, so it links
+       home and reads its facts from config; the right of the row stays empty.
+       Cover pages carry no nav, which is why the mark lives here at all. -->
+  <header class="omega-checkout__head" data-omega-reveal="fade">
+    <h1 class="omega-checkout__head-mark mb-0">
+      <a href="/" class="omega-checkout__brand">
+        {% comment %} #467: the VISIBLE lockup prefers the bridged vector when the mint produced one — `brand.images.brandmark` stays the raster OG/social and payment sync need. {% endcomment %}
+        <img src="{{ assetManifest.brandmarkSvg | default: resolved.config.brand.images.brandmark | omega_cachebreak }}" class="filter-adaptive" alt="{{ resolved.config.brand.name }} logo" width="24" height="24">
+        <span class="fw-semibold">{{ resolved.config.brand.name }}</span>
+      </a>
+    </h1>
+  </header>
+
+  <!-- Main Checkout Form -->
+  <form id="checkout-form" autocomplete="on" novalidate data-form-state="initializing" onsubmit="return false">
+    <div class="row g-3 g-lg-4" data-omega-reveal-stagger="70">
+      <!-- Zone 1: what you're buying and who's buying it -->
+      <div class="col-12 col-lg-7 order-1">
+        <!-- Plan panel (subscriptions only) -->
+        <div class="omega-checkout__panel" data-omega-reveal data-omega-bind="@show checkout.product.isSubscription">
+          <!-- Mobile: collapsed one-line row showing the current selection. The
+               row IS the panel's title on phones, so it is labeled with the
+               word desktop uses — "Billing cycle", never a phone-only "Plan"
+               (#370): one vocabulary, both viewports. -->
+          <button class="omega-checkout__rowtoggle d-lg-none collapsed" type="button"
+                  data-bs-toggle="collapse" data-bs-target="#collapse-billing" aria-expanded="false">
+            <span class="omega-micro">Billing cycle</span>
+            <span class="omega-checkout__rowtoggle-value omega-binding-skeleton" data-omega-bind="@show checkout">
+              <span data-omega-bind="@text checkout.product.name">--</span> &middot; <span data-omega-bind="@text checkout.pricing.frequencyPaymentText">$--</span>
+            </span>
+            <i class="fa-solid fa-chevron-down fa-xs omega-checkout__rowtoggle-chev"></i>
+          </button>
+
+          <div id="collapse-billing" class="collapse d-lg-block">
+            <div class="omega-panel-head omega-checkout__panel-head">
+              <h2 class="omega-checkout__panel-title d-none d-lg-flex mb-0">
+                <span class="omega-icon-chip omega-icon-chip--neutral"><i class="fa-solid fa-calendar-days fa-sm"></i></span>
+                Billing cycle
+              </h2>
+              <a href="/pricing" class="omega-checkout__quiet-link small ms-auto">
+                <i class="fa-solid fa-arrow-left fa-xs me-1"></i>Change plan
+              </a>
+            </div>
+
+            <!-- Subscription Toggle (shown for subscriptions only) -->
+            <div id="subscription-toggle">
+              <div class="row g-3">
+                <div class="col-6" data-omega-bind="@show checkout.frequencies.annually" hidden>
+                  <div class="omega-binding-skeleton h-100" data-omega-bind="@show checkout.frequencies.annually">
+                    <input type="radio" class="btn-check" name="frequency" id="annually" value="annually">
+                    <label class="omega-checkout__tile" for="annually">
+                      <span class="omega-checkout__tile-head">
+                        <span class="omega-checkout__tile-radio" aria-hidden="true"></span>
+                        <span class="omega-checkout__tile-name">Annual</span>
+                        <span class="omega-chip omega-chip--accent ms-auto"
+                              data-omega-bind="@text checkout.pricing.savingsBadge, @show checkout.pricing.showSavingsBadge"
+                              hidden>Save --</span>
+                      </span>
+                      <span class="omega-checkout__tile-price omega-binding-skeleton" data-omega-bind="@show checkout">
+                        <span data-omega-bind="@text checkout.pricing.annualMonthlyRate">$--</span><span class="omega-checkout__tile-per">/mo</span>
+                      </span>
+                    </label>
+                  </div>
+                </div>
+                <div class="col-6" data-omega-bind="@show checkout.frequencies.monthly" hidden>
+                  <div class="omega-binding-skeleton h-100" data-omega-bind="@show checkout.frequencies.monthly">
+                    <input type="radio" class="btn-check" name="frequency" id="monthly" value="monthly">
+                    <label class="omega-checkout__tile" for="monthly">
+                      <span class="omega-checkout__tile-head">
+                        <span class="omega-checkout__tile-radio" aria-hidden="true"></span>
+                        <span class="omega-checkout__tile-name">Monthly</span>
+                      </span>
+                      <span class="omega-checkout__tile-price omega-binding-skeleton" data-omega-bind="@show checkout">
+                        <span data-omega-bind="@text checkout.pricing.monthlyPrice">$--</span><span class="omega-checkout__tile-per">/mo</span>
+                      </span>
+                    </label>
+                  </div>
+                </div>
+                <div class="col-6" data-omega-bind="@show checkout.frequencies.weekly" hidden>
+                  <div class="omega-binding-skeleton h-100" data-omega-bind="@show checkout.frequencies.weekly">
+                    <input type="radio" class="btn-check" name="frequency" id="weekly" value="weekly">
+                    <label class="omega-checkout__tile" for="weekly">
+                      <span class="omega-checkout__tile-head">
+                        <span class="omega-checkout__tile-radio" aria-hidden="true"></span>
+                        <span class="omega-checkout__tile-name">Weekly</span>
+                      </span>
+                      <span class="omega-checkout__tile-price omega-binding-skeleton" data-omega-bind="@show checkout">
+                        <span data-omega-bind="@text checkout.pricing.weeklyPrice">$--</span><span class="omega-checkout__tile-per">/wk</span>
+                      </span>
+                    </label>
+                  </div>
+                </div>
+                <div class="col-6" data-omega-bind="@show checkout.frequencies.daily" hidden>
+                  <div class="omega-binding-skeleton h-100" data-omega-bind="@show checkout.frequencies.daily">
+                    <input type="radio" class="btn-check" name="frequency" id="daily" value="daily">
+                    <label class="omega-checkout__tile" for="daily">
+                      <span class="omega-checkout__tile-head">
+                        <span class="omega-checkout__tile-radio" aria-hidden="true"></span>
+                        <span class="omega-checkout__tile-name">Daily</span>
+                      </span>
+                      <span class="omega-checkout__tile-price omega-binding-skeleton" data-omega-bind="@show checkout">
+                        <span data-omega-bind="@text checkout.pricing.dailyPrice">$--</span><span class="omega-checkout__tile-per">/day</span>
+                      </span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Payment cadence under the tiles — centered under the pair -->
+              <div class="small omega-checkout__cadence text-center mt-2 omega-binding-skeleton" data-omega-bind="@show checkout.product.isSubscription">
+                Billed <span data-omega-bind="@text checkout.pricing.frequencyPaymentText">$-- monthly</span>
+              </div>
+
+              <!-- The trial spot (#637). Which of the two notes below belongs
+                   here is a question only the server can answer, so the spot
+                   holds a SKELETON until it does and then renders once — never
+                   the guarantee flipping into the trial line a moment later.
+                   The placeholder is what is up first, and the `order` root
+                   landing is what takes it away. -->
+              <div class="omega-checkout__note mt-3 omega-binding-skeleton"
+                   data-omega-bind="@hide order">
+                <span class="omega-icon-chip omega-icon-chip--neutral"><i class="fa-solid fa-gift fa-sm"></i></span>
+                <span>Checking your plan</span>
+              </div>
+
+              <!-- Subscription note — the BRAND's guarantee copy (#273: a
+                   refund window is a policy the framework cannot know), shown
+                   when no trial replaces it. No stated guarantee, no note. -->
+              {% iftruthy resolved.pricing.guarantee %}
+                <div class="omega-checkout__note mt-3"
+                     data-omega-bind="@show !order.trial.show"
+                     hidden>
+                  <span class="omega-icon-chip omega-icon-chip--neutral"><i class="fa-solid fa-shield-halved fa-sm"></i></span>
+                  <span>{{ resolved.pricing.guarantee }}</span>
+                </div>
+              {% endiftruthy %}
+
+              <!-- Free Trial Note -->
+              <div class="omega-checkout__note omega-checkout__note--ok mt-3"
+                   data-omega-bind="@show order.trial.show"
+                   hidden>
+                <span class="omega-icon-chip omega-icon-chip--neutral"><i class="fa-solid fa-gift fa-sm"></i></span>
+                <span data-omega-bind="@text order.trial.message"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Account panel -->
+        <div class="omega-checkout__panel" data-omega-reveal>
+          <!-- Mobile: collapsed one-line row showing the signed-in email -->
+          <button class="omega-checkout__rowtoggle d-lg-none collapsed" type="button"
+                  data-bs-toggle="collapse" data-bs-target="#collapse-account" aria-expanded="false">
+            <span class="omega-micro">Account</span>
+            <span class="omega-checkout__rowtoggle-value omega-binding-skeleton" data-omega-bind="@text auth.user.email">&nbsp;</span>
+            <i class="fa-solid fa-chevron-down fa-xs omega-checkout__rowtoggle-chev"></i>
+          </button>
+
+          <div id="collapse-account" class="collapse d-lg-block">
+            <!-- The expanded content is ONE block: the head is desktop's title
+                 row, and on phones (where that title is the row above) the CSS
+                 orders the switch link under the "Paying as" line rather than
+                 leaving it floating alone over a gap (#370). -->
+            <div class="omega-checkout__account-block">
+              <div class="omega-panel-head omega-checkout__panel-head">
+                <h2 class="omega-checkout__panel-title d-none d-lg-flex mb-0">
+                  <span class="omega-icon-chip omega-icon-chip--neutral"><i class="fa-solid fa-user fa-sm"></i></span>
+                  Account
+                </h2>
+                <a href="#" id="switch-account" class="omega-checkout__quiet-link small">Switch account</a>
+              </div>
+              <p class="mb-0 omega-binding-skeleton omega-checkout__account" data-omega-bind="@show checkout">
+                Paying as <strong data-omega-bind="@text auth.user.email">loading@example.com</strong>
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Pay zone (desktop only — the phone's copy sits after the summary).
+             NOT a card and NOT headed (#374): the buttons sit in open space
+             with nothing labeling them, on this viewport exactly like the
+             phone's. The reveal rides this wrapper, so the whole stack inside
+             it — buttons, terms, chips, help — animates in as one zone (#326). -->
+        <div class="omega-checkout__pay d-none d-lg-block" data-omega-reveal>
+          <div class="d-grid gap-2 omega-binding-skeleton" data-omega-bind="@show checkout.paymentMethods">
+            {{ payment_buttons_content }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Zone 2: Order summary — the receipt the confirmation page hands back -->
+      <div class="col-12 col-lg-5 order-2">
+        <div class="omega-checkout__sticky">
+          <div class="omega-checkout__summary" data-omega-reveal>
+            <!-- Mobile: the summary folds like the two rows above it (#370 —
+                 parity across all cards), with one difference: it starts OPEN,
+                 so the numbers are still what the phone lands on. Folded, the
+                 row keeps the total due today on screen. -->
+            <button class="omega-checkout__rowtoggle d-lg-none" type="button"
+                    data-bs-toggle="collapse" data-bs-target="#collapse-summary" aria-expanded="true">
+              <span class="omega-micro">Order summary</span>
+              <span class="omega-checkout__rowtoggle-value omega-binding-skeleton" data-omega-bind="@text order.total">$--</span>
+              <i class="fa-solid fa-chevron-down fa-xs omega-checkout__rowtoggle-chev"></i>
+            </button>
+
+            <div id="collapse-summary" class="collapse show d-lg-block">
+              <div class="omega-panel-head omega-checkout__panel-head d-none d-lg-flex">
+                <h2 class="omega-checkout__panel-title mb-0">
+                  <span class="omega-icon-chip omega-icon-chip--neutral"><i class="fa-solid fa-receipt fa-sm"></i></span>
+                  Order summary
+                </h2>
+              </div>
+
+              <!-- Product identity: what you get, on what cadence -->
+              <div class="omega-checkout__product omega-binding-skeleton" data-omega-bind="@show checkout">
+                <span class="omega-checkout__product-name">{{ resolved.config.brand.name }} <span data-omega-bind="@text checkout.product.name">Loading...</span></span>
+                <span class="omega-quiet small" data-omega-bind="@text checkout.pricing.frequencyPaymentText">$--</span>
+              </div>
+
+              <!-- Discount Code -->
+              <div class="omega-checkout__discount-zone omega-binding-skeleton" data-omega-bind="@show checkout">
+                <!-- The label sits OUTSIDE the input-group on purpose: Bootstrap
+                     rounds a group by child position, so a label as first child
+                     made the input `:not(:first-child)` and squared its left
+                     corners (and pulled it -1px left). It keeps the group's show
+                     binding so the two still appear and hide together. -->
+                <label for="discount-code" class="visually-hidden" data-omega-bind="@show checkout" hidden>Discount code</label>
+                <div class="input-group omega-checkout__discount" data-omega-bind="@show checkout" hidden>
+                  <input type="text" class="form-control" id="discount-code" name="discount" placeholder="Discount code" autocomplete="off">
+                  <button class="btn btn-outline-adaptive px-3" type="button" id="apply-discount" data-action="apply-discount">Apply</button>
+                </div>
+
+                <!-- Discount Messages -->
+                <div class="mt-2 omega-quiet small" data-omega-bind="@show checkout.discount.loading" hidden>
+                  <i class="fa-solid fa-clock me-1"></i> Checking code...
+                </div>
+                <div class="mt-2 omega-checkout__row-ok small" data-omega-bind="@show checkout.discount.success" hidden>
+                  <i class="fa-solid fa-check-circle me-1"></i> <span data-omega-bind="@text checkout.discount.successMessage">Discount applied</span>
+                </div>
+                <div class="mt-2 omega-checkout__row-bad small" data-omega-bind="@show checkout.discount.error" hidden>
+                  <i class="fa-solid fa-times-circle me-1"></i> <span data-omega-bind="@text checkout.discount.errorMessage">Invalid discount code</span>
+                </div>
+              </div>
+
+              <!-- Price detail — the folded row states the total, so opening the
+                   summary is what reveals subtotal, discount and trial credit -->
+              <div class="omega-receipt__panel">
+                <div class="omega-receipt__row omega-binding-skeleton" data-omega-bind="@show checkout">
+                  <span class="omega-micro">Subtotal</span>
+                  <span data-omega-bind="@text checkout.pricing.subtotal">$--</span>
+                </div>
+
+                <div class="omega-receipt__row omega-checkout__row-ok"
+                     data-omega-bind="@show checkout.discount.hasDiscount"
+                     hidden>
+                  <span class="omega-micro">Discount (<span data-omega-bind="@text checkout.discount.label"></span>)</span>
+                  <span>-$<span data-omega-bind="@text checkout.discount.amount"></span></span>
+                </div>
+
+                <div class="omega-receipt__row omega-checkout__row-ok"
+                     data-omega-bind="@show order.trial.hasFreeTrial"
+                     hidden>
+                  <span class="omega-micro">Free trial</span>
+                  <span>-$<span data-omega-bind="@text order.trial.discountAmount"></span></span>
+                </div>
+
+                <div class="omega-receipt__row omega-receipt__row--total omega-binding-skeleton" data-omega-bind="@show order">
+                  <span class="omega-micro">Total due today</span>
+                  <span class="omega-receipt__total" data-omega-bind="@text order.total">$--</span>
+                </div>
+              </div>
+
+              <!-- Subscription Terms -->
+              <p class="omega-checkout__fineprint small mb-0"
+                 data-omega-bind="@show order.showTerms"
+                 hidden>
+                <span data-omega-bind="@text order.termsText"></span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Zone 3: Payment (mobile only — headless and out of any card, exactly
+           like desktop's (#374), and the SAME full-width stack desktop
+           renders: one width, one height, every button) -->
+      <div class="col-12 order-3 d-lg-none">
+        <div class="omega-checkout__pay">
+          <div class="d-grid gap-2 omega-binding-skeleton" data-omega-bind="@show checkout.paymentMethods">
+            {{ payment_buttons_content }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+</section>
+
+{{ content | omega_content_format }}