@omega.js/web 0.1.0

package/themes/base/_layouts/frontend/pages/alternatives/alternative.html

@@ -0,0 +1,319 @@
+---
+layout: frontend/core/base
+
+# Alternative page defaults - shared content lives here so competitor pages only need competitor-specific data
+#
+# Trial copy DERIVES from the catalog and refund copy from the brand (#273):
+# `resolved.pricing.trialDays` is the number the catalog's paid plans agree on
+# (0 = none) and `resolved.pricing.guarantee` is the brand's own refund words.
+# Neither is a framework default — an answer whose condition doesn't hold
+# renders empty and drops out of the accordion (and the FAQPage schema).
+alternative:
+  competitor:
+    name: "Competitor"
+    description: ""
+  hero:
+    tagline: "The #1 {{ resolved.alternative.competitor.name }} alternative"
+    headline: "{{ resolved.config.brand.name }} vs"
+    headline_accent: "{{ resolved.alternative.competitor.name }}"
+    description: "Looking for a {{ resolved.alternative.competitor.name }} alternative? See why thousands of users choose {{ resolved.config.brand.name }} for a faster, more powerful experience."
+    primary_button:
+      text: "{% if resolved.pricing.trialDays > 0 %}Try free for {{ resolved.pricing.trialDays }} days{% else %}Get started{% endif %}"
+      href: "/pricing"
+    secondary_button:
+      text: "See all features"
+      href: "/pricing"
+  comparison:
+    superheadline:
+      text: "Head to head"
+    headline: "See how we"
+    headline_accent: "compare"
+    subheadline: "A side-by-side look at {{ resolved.config.brand.name }} vs {{ resolved.alternative.competitor.name }}"
+    features: []
+  why_switch:
+    superheadline:
+      text: "Why switch"
+    headline: "Why teams are switching to"
+    headline_accent: "{{ resolved.config.brand.name }}"
+    subheadline: "Here's what makes us different"
+    items:
+      - title: "10x faster performance"
+        description: "Our platform is built on modern infrastructure that delivers blazing-fast load times and real-time updates. No more waiting around for pages to load or data to sync."
+        image: "https://cdn.itwcreativeworks.com/assets/sample/images/demos/1x1/sample-demo-1.svg"
+      - title: "Built for teams of all sizes"
+        description: "Whether you're a solo founder or a growing enterprise, our flexible workspace adapts to your needs. Collaborate seamlessly with unlimited team members on any plan."
+        image: "https://cdn.itwcreativeworks.com/assets/sample/images/demos/1x1/sample-demo-2.svg"
+      - title: "AI that actually works"
+        description: "Our AI features aren't just a gimmick. They're deeply integrated into every workflow to help you automate repetitive tasks and make smarter decisions faster."
+        image: "https://cdn.itwcreativeworks.com/assets/sample/images/demos/1x1/sample-demo-3.svg"
+  video:
+    superheadline:
+      text: "Watch demo"
+    headline: "See {{ resolved.config.brand.name }} in"
+    headline_accent: "action"
+    subheadline: "A quick walkthrough of what makes {{ resolved.config.brand.name }} the best {{ resolved.alternative.competitor.name }} alternative"
+    youtube_id: null
+  testimonials:
+    superheadline:
+      text: "Testimonials"
+    items:
+      - quote: "We made the switch and the difference is <em>night and day</em>. Everything just works faster."
+        author: "Sarah Johnson"
+        role: "Product Manager"
+        company: "TechStart Inc"
+        initial: "S"
+      - quote: "The AI features alone justified the switch. We're saving <em>10+ hours per week</em> on repetitive tasks."
+        author: "Michael Chen"
+        role: "CTO"
+        company: "DataFlow"
+        initial: "M"
+      - quote: "The support team responds within minutes. It's refreshing to work with a company that <em>actually cares</em>."
+        author: "Emily Davis"
+        role: "Operations Director"
+        company: "Creative Studio"
+        initial: "E"
+  stats:
+    - number: "50,000+"
+      label: "Active users"
+      sublabel: "From 120+ countries"
+    - number: "4.9"
+      label: "Average rating"
+      sublabel: "Across review platforms"
+    - number: "99.99%"
+      label: "Uptime"
+      sublabel: "Enterprise-grade"
+    - number: "24/7"
+      label: "Support"
+      sublabel: "Real humans"
+  faqs:
+    superheadline:
+      text: "FAQs"
+    headline: "Switching"
+    headline_accent: "questions"
+    subheadline: "Everything you need to know about switching from {{ resolved.alternative.competitor.name }} to {{ resolved.config.brand.name }}"
+    items:
+      - question: "Can I import my data from {{ resolved.alternative.competitor.name }}?"
+        answer: "Yes! We offer a one-click migration tool that imports all your projects, files, and settings. The entire process takes just a few minutes."
+      - question: "Is there a free trial?"
+        answer: "{% if resolved.pricing.trialDays > 0 %}Absolutely. Every paid plan starts with a {{ resolved.pricing.trialDays }}-day free trial with access to all premium features, and you can cancel any time before it ends.{% endif %}"
+      - question: "How does pricing compare to {{ resolved.alternative.competitor.name }}?"
+        answer: "Our plans start at the same price point but include significantly more features. Most teams find they save money by switching because they no longer need additional tools."
+      - question: "What if I need help migrating?"
+        answer: "Our support team is available 24/7 to help with your migration. We also offer dedicated onboarding sessions for teams of 10+ members."
+      - question: "Can I cancel anytime?"
+        answer: "Yes, you can cancel your subscription at any time with no questions asked.{% if resolved.pricing.guarantee %} {{ resolved.pricing.guarantee }}{% endif %}"
+  section_cta:
+    text: "Get started free"
+    href: "/pricing"
+  cta:
+    superheadline:
+      text: "Make the switch"
+    headline: "Ready to leave"
+    headline_accent: "{{ resolved.alternative.competitor.name }} behind?"
+    subheadline: "Join thousands who chose {{ resolved.config.brand.name }}.{% if resolved.pricing.trialDays > 0 %} Start your free trial today. No credit card required.{% endif %}"
+    primary_button:
+      text: "{% if resolved.pricing.trialDays > 0 %}Start free trial{% else %}Get started{% endif %}"
+      href: "/pricing"
+    secondary_button:
+      text: "Talk to sales"
+      href: "/contact"
+---
+
+{% assign alt = resolved.alternative %}
+
+{% capture section_cta_block %}
+  {% iftruthy alt.section_cta.text %}
+    <div class="text-center mt-5" data-omega-reveal>
+      <a href="{{ alt.section_cta.href }}" class="btn btn-adaptive btn-lg omega-hover-nudge">
+        {{ alt.section_cta.text }}
+        <span class="omega-nudge ms-2"><i class="fa-solid fa-arrow-right fa-sm"></i></span>
+      </a>
+    </div>
+  {% endiftruthy %}
+{% endcapture %}
+
+<!-- ═══ Masthead ═══ -->
+{% 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 data-competitor-name="{{ alt.competitor.name }}">
+  <div class="container">
+    <div class="omega-post-card__eyebrow mb-4">
+      <a href="/alternatives">Alternatives</a>
+      <span>/</span>
+      <span>{{ alt.competitor.name }}</span>
+    </div>
+    {% component "heading/masthead", headline: alt.hero.headline, headline_accent: alt.hero.headline_accent, sub: alt.hero.description, first_paint: true %}
+    <div class="d-flex flex-wrap gap-3 mt-4">
+      {% iftruthy alt.hero.primary_button.text %}
+        <a href="{{ alt.hero.primary_button.href }}" class="btn btn-adaptive btn-lg omega-hover-nudge">
+          {{ alt.hero.primary_button.text }}
+          <span class="omega-nudge ms-2"><i class="fa-solid fa-arrow-right fa-sm"></i></span>
+        </a>
+      {% endiftruthy %}
+      {% iftruthy alt.hero.secondary_button.text %}
+        <a href="{{ alt.hero.secondary_button.href }}" class="btn btn-outline-adaptive btn-lg omega-hover-nudge">
+          {{ alt.hero.secondary_button.text }}
+          <span class="omega-nudge ms-2"><i class="fa-solid fa-arrow-right fa-sm"></i></span>
+        </a>
+      {% endiftruthy %}
+    </div>
+  </div>
+</section>
+
+<!-- ═══ Comparison table ═══ -->
+{% assign comparison_features = alt.comparison.features %}
+{% assign comparison_size = comparison_features | size %}
+{% if comparison_size > 0 %}
+  <section class="pt-0">
+    <div class="container">
+      <div class="omega-section-head omega-section-head--center mb-5" data-omega-reveal>
+        {% component "heading/section-head", superheadline: alt.comparison.superheadline.text, headline: alt.comparison.headline, headline_accent: alt.comparison.headline_accent, sub: alt.comparison.subheadline %}
+      </div>
+
+      <div class="row justify-content-center">
+        <div class="col-lg-10">
+          <div class="omega-compare table-responsive" data-omega-reveal>
+            <table class="table table-hover align-middle">
+              <thead>
+                <tr>
+                  <th scope="col" class="w-40">Feature</th>
+                  <th scope="col" class="text-center">{{ resolved.config.brand.name }}</th>
+                  <th scope="col" class="text-center">{{ alt.competitor.name }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {% for feature in comparison_features %}
+                  <tr>
+                    <th scope="row">
+                      {{ feature.name }}
+                    </th>
+                    <td class="text-center">
+                      {% if feature.ours.value == true %}
+                        <i class="fa-solid fa-circle-check text-success"></i>
+                      {% elsif feature.ours.value == false %}
+                        <i class="fa-solid fa-circle-xmark text-muted opacity-25"></i>
+                      {% else %}
+                        <span class="fw-semibold text-adaptive">{{ feature.ours.value }}</span>
+                      {% endif %}
+                    </td>
+                    <td class="text-center">
+                      {% if feature.theirs.value == true %}
+                        <i class="fa-solid fa-circle-check text-success"></i>
+                      {% elsif feature.theirs.value == false %}
+                        <i class="fa-solid fa-circle-xmark text-muted opacity-25"></i>
+                      {% else %}
+                        <span class="text-muted">{{ feature.theirs.value }}</span>
+                      {% endif %}
+                    </td>
+                  </tr>
+                {% endfor %}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      {{ section_cta_block }}
+    </div>
+  </section>
+{% endif %}
+
+<!-- ═══ Why switch ═══ -->
+{% assign why_switch_items = alt.why_switch.items %}
+{% assign why_switch_size = why_switch_items | size %}
+{% if why_switch_size > 0 %}
+  <section>
+    <div class="container">
+      <div class="omega-section-head omega-section-head--center mb-5" data-omega-reveal>
+        {% component "heading/section-head", superheadline: alt.why_switch.superheadline.text, headline: alt.why_switch.headline, headline_accent: alt.why_switch.headline_accent, sub: alt.why_switch.subheadline %}
+      </div>
+
+      {% for item in why_switch_items %}
+        {% assign is_even = forloop.index | modulo: 2 %}
+
+        {% if is_even == 0 %}
+          {% assign image_col_class = "col-lg-6 order-lg-2" %}
+          {% assign text_col_class = "col-lg-6 order-lg-1 pe-lg-5" %}
+        {% else %}
+          {% assign image_col_class = "col-lg-6" %}
+          {% assign text_col_class = "col-lg-6 ps-lg-5" %}
+        {% endif %}
+
+        <div class="row align-items-center g-3 g-lg-5 {% unless forloop.last %} mb-5 pb-5 {% endunless %}">
+          {% iftruthy item.image %}
+            <div class="{{ image_col_class }}" data-omega-reveal>
+              <div class="card overflow-hidden ratio ratio-4x3">
+                {% omega_image item.image, class="w-100 h-100 object-fit-cover", alt=item.title %}
+              </div>
+            </div>
+          {% endiftruthy %}
+          <div class="{% iftruthy item.image %}{{ text_col_class }}{% endiftruthy %}{% iffalsy item.image %}col-lg-8 mx-auto text-center{% endiffalsy %}" data-omega-reveal>
+            <h3 class="omega-display omega-display--section mb-3">{{ item.title | omega_liquify }}</h3>
+            <p class="text-muted fs-6 mb-0">{{ item.description | omega_liquify }}</p>
+          </div>
+        </div>
+      {% endfor %}
+
+      {{ section_cta_block }}
+    </div>
+  </section>
+{% endif %}
+
+<!-- ═══ Video ═══ -->
+{% iftruthy alt.video.youtube_id %}
+  <section>
+    <div class="container">
+      <div class="omega-section-head omega-section-head--center mb-5" data-omega-reveal>
+        {% component "heading/section-head", superheadline: alt.video.superheadline.text, headline: alt.video.headline, headline_accent: alt.video.headline_accent, sub: alt.video.subheadline %}
+      </div>
+
+      <div class="row justify-content-center">
+        <div class="col-lg-10" data-omega-reveal>
+          <div class="card overflow-hidden">
+            <div class="ratio ratio-16x9">
+              <iframe
+                data-lazy="@src https://www.youtube.com/embed/{{ alt.video.youtube_id }}?rel=0"
+                title="Video"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen
+                class="border-0"
+              ></iframe>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {{ section_cta_block }}
+    </div>
+  </section>
+{% endiftruthy %}
+
+<!-- ═══ Testimonials ═══ -->
+{% assign testimonials_size = alt.testimonials.items | size %}
+{% if testimonials_size > 0 %}
+  {% section "marketing/testimonials", data: alt.testimonials %}
+{% endif %}
+
+<!-- ═══ Stats band ═══ -->
+
+{% section "marketing/stats", items: alt.stats %}{% slot after %}{{ section_cta_block }}{% endslot %}{% endsection %}
+<!-- ═══ FAQ ═══ -->
+{% 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 = alt.faqs.items | where_exp: "faq", "faq.answer != ''" %}
+{% assign faqs_size = _faqs | size %}
+{% if faqs_size > 0 %}
+  {% section "marketing/faq", data: alt.faqs, items: _faqs, variant: "center" %}
+{% endif %}
+
+<!-- ═══ CTA band ═══ -->
+{% iftruthy alt.cta.headline %}
+  {% section "marketing/cta", data: alt.cta %}
+{% endiftruthy %}
+
+{{ content | omega_content_format }}

package/themes/base/_layouts/frontend/pages/alternatives/index.html

@@ -0,0 +1,186 @@
+---
+layout: frontend/core/base
+
+# Trial copy DERIVES from the catalog (#273): `resolved.pricing.trialDays` is
+# the number the catalog's paid plans agree on (0 = none). A trial is never a
+# framework default, so with no trial the CTA speaks in neutral words.
+
+# Hero Section
+hero:
+  tagline: "Compare & choose"
+  headline: "{{ resolved.config.brand.name }} vs the"
+  headline_accent: "competition"
+  description: "Head-to-head comparisons, no spin. See exactly where we win."
+  primary_button:
+    text: "Get started free"
+    href: "/pricing"
+  secondary_button:
+    text: "See pricing"
+    href: "/pricing"
+
+# Alternatives Section
+alternatives:
+  superheadline:
+    text: "Comparisons"
+  headline: "Explore <em>alternatives</em>"
+  subheadline: "In-depth comparisons to help you make the right choice"
+  empty_message: "No alternatives available yet"
+  view_comparison: "View full comparison"
+
+# Value Props Section
+value_props:
+  superheadline:
+    text: "Why us"
+  headline: "Why people choose <em>{{ resolved.config.brand.name }}</em>"
+  subheadline: "Here's what sets us apart from the rest"
+  items:
+    - title: "Lightning fast"
+      description: "Built on modern infrastructure for blazing performance. No more waiting around."
+      icon: "bolt"
+    - title: "AI-powered"
+      description: "Smart automation built into every workflow to save you hours every week."
+      icon: "wand-magic-sparkles"
+    - title: "24/7 support"
+      description: "Real humans ready to help whenever you need it. Average response time under 5 minutes."
+      icon: "headset"
+
+# Stats Section
+stats:
+  - number: "50,000+"
+    label: "Active users"
+    sublabel: "From 120+ countries"
+  - number: "4.9"
+    label: "Average rating"
+    sublabel: "Across review platforms"
+  - number: "99.99%"
+    label: "Uptime"
+    sublabel: "Enterprise-grade"
+  - number: "24/7"
+    label: "Support"
+    sublabel: "Real humans"
+
+# CTA Section
+cta:
+  superheadline:
+    text: "Get started"
+  headline: "Ready to make the switch?"
+  subheadline: "Join thousands of happy users who chose {{ resolved.config.brand.name }}.{% if resolved.pricing.trialDays > 0 %} Start your free trial today. No credit card required.{% endif %}"
+  primary_button:
+    text: "{% if resolved.pricing.trialDays > 0 %}Start free trial{% else %}Get started{% endif %}"
+    href: "/pricing"
+  secondary_button:
+    text: "Talk to sales"
+    href: "/contact"
+---
+
+<!-- ═══ Masthead ═══ -->
+{% 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">
+    {% component "heading/masthead", eyebrow: resolved.hero.tagline, headline: resolved.hero.headline, headline_accent: resolved.hero.headline_accent, sub: resolved.hero.description, first_paint: true %}
+    <div class="d-flex flex-wrap gap-3 mt-4">
+      {% iftruthy resolved.hero.primary_button.text %}
+        <a href="{{ resolved.hero.primary_button.href }}" class="btn btn-adaptive btn-lg omega-hover-nudge">
+          {{ resolved.hero.primary_button.text }}
+          <span class="omega-nudge ms-2"><i class="fa-solid fa-arrow-right fa-sm"></i></span>
+        </a>
+      {% endiftruthy %}
+      {% iftruthy resolved.hero.secondary_button.text %}
+        <a href="{{ resolved.hero.secondary_button.href }}" class="btn btn-outline-adaptive btn-lg omega-hover-nudge">
+          {{ resolved.hero.secondary_button.text }}
+          <span class="omega-nudge ms-2"><i class="fa-solid fa-arrow-right fa-sm"></i></span>
+        </a>
+      {% endiftruthy %}
+    </div>
+  </div>
+</section>
+
+<!-- ═══ Comparisons — hairline rows ═══ -->
+<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.alternatives.superheadline.text, headline: resolved.alternatives.headline, sub: resolved.alternatives.subheadline %}
+      </div>
+
+      <div>
+        {% if site.alternatives %}
+          {% assign alternatives = site.alternatives | sort: 'alternative.competitor.name' %}
+        {% else %}
+          {% assign alternatives = nil %}
+        {% endif %}
+
+        {% if alternatives and alternatives.size > 0 %}
+          <div class="omega-rowlist" data-omega-reveal-stagger="50">
+            {% for item in alternatives %}
+              {% if item.draft and jekyll.environment == 'production' %}
+                {% continue %}
+              {% endif %}
+              <a href="{{ item.url }}" class="omega-rowlist__item omega-rowlist__item--link" data-omega-reveal>
+                {%- comment %} The competitor's own description rides UNDER the
+                row title (#563, legacy UJM parity): every _alternatives doc
+                authors it, and the hub was the only place it could land.
+                Unauthored, the row is exactly what it always was. {% endcomment -%}
+                <span>
+                  <span>{{ resolved.config.brand.name }} vs {{ item.alternative.competitor.name }}</span>
+                  {% iftruthy item.alternative.competitor.description %}
+                    <span class="omega-rowlist__desc">{{ item.alternative.competitor.description }}</span>
+                  {% endiftruthy %}
+                </span>
+                <span class="omega-rowlist__meta">
+                  {{ resolved.alternatives.view_comparison }}
+                  <i class="fa-solid fa-arrow-right fa-xs ms-2"></i>
+                </span>
+              </a>
+            {% endfor %}
+          </div>
+        {% else %}
+          <div class="card" data-omega-reveal>
+            <div class="card-body p-5 text-center text-muted">
+              <p class="fs-6 mb-0">{{ resolved.alternatives.empty_message }}</p>
+            </div>
+          </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ═══ Value props — hairline rows ═══ -->
+{% assign value_props_size = resolved.value_props.items | size %}
+{% if value_props_size > 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.value_props.superheadline.text, headline: resolved.value_props.headline %}
+        </div>
+
+        <div class="omega-rowlist" data-omega-reveal-stagger="60">
+          {% for prop in resolved.value_props.items %}
+            <div class="omega-rowlist__item" data-omega-reveal>
+              <span class="d-inline-flex align-items-center gap-3">
+                <span class="omega-icon-chip omega-icon-chip--neutral"><i class="fa-solid fa-{{ prop.icon }} fa-sm"></i></span>
+                <strong>{{ prop.title }}</strong>
+              </span>
+              <span class="omega-rowlist__meta">{{ prop.description }}</span>
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  </section>
+{% endif %}
+
+<!-- ═══ Stats band ═══ -->
+
+{% section "marketing/stats", items: resolved.stats %}
+<!-- ═══ CTA band ═══ -->
+{% iftruthy resolved.cta.headline %}
+  {% section "marketing/cta", data: resolved.cta %}
+{% endiftruthy %}
+
+{{ content | omega_content_format }}

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

@@ -0,0 +1,142 @@
+---
+layout: frontend/core/cover
+
+app:
+  protocol: "{{ resolved.config.brand.id | default: resolved.config.brand.name | slugify }}://"
+---
+
+<!-- Self-contained, token-driven (mirrors the redirect interstitial) -->
+<style>
+  .omega-launch {
+    text-align: center;
+    padding: 2.75rem 2rem 2.25rem;
+    background: var(--omega-surface);
+    border: 1px solid var(--omega-line);
+    border-radius: var(--omega-radius-xl);
+  }
+
+  .omega-launch__mark {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 3rem;
+    height: 3rem;
+    margin-bottom: 1.25rem;
+    background: var(--omega-surface-2);
+    border: 1px solid var(--omega-line);
+    border-radius: var(--omega-radius-m);
+    overflow: hidden;
+  }
+
+  .omega-launch__mark img {
+    width: 1.75rem;
+    height: 1.75rem;
+    object-fit: contain;
+  }
+
+  .omega-launch__title {
+    font-family: var(--omega-font-marketing);
+    font-weight: 550;
+    letter-spacing: -0.02em;
+    font-size: 1.75rem;
+    margin-bottom: 0.375rem;
+  }
+
+  .omega-launch__title em {
+    font-style: italic;
+  }
+
+  .omega-launch__sub {
+    color: var(--omega-ink-muted);
+    font-size: 0.9375rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .omega-launch__dots {
+    display: inline-flex;
+    gap: 0.4375rem;
+    margin-bottom: 1.75rem;
+  }
+
+  .omega-launch__dots span {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--omega-ink-faint);
+    animation: omega-launch-pulse 1.1s var(--omega-ease) infinite;
+  }
+
+  .omega-launch__dots span:nth-child(2) { animation-delay: 0.18s; }
+  .omega-launch__dots span:nth-child(3) { animation-delay: 0.36s; }
+
+  @keyframes omega-launch-pulse {
+    0%, 100% { opacity: 0.35; transform: scale(0.85); }
+    40% { opacity: 1; transform: scale(1); background: var(--omega-accent); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .omega-launch__dots span { animation: none; }
+  }
+
+  .omega-launch__footer {
+    margin-top: 1.75rem;
+    padding-top: 1.375rem;
+    border-top: 1px solid var(--omega-line);
+    font-size: 0.8125rem;
+    color: var(--omega-ink-faint);
+  }
+</style>
+
+<!-- App Launch Section -->
+<section class="col-12 col-md-8 col-lg-6 col-xl-5 mw-sm">
+  <div class="omega-launch">
+    <!-- Brand mark -->
+    <span class="omega-launch__mark">
+      {% 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 }}" alt="{{ resolved.config.brand.name }} Logo"/>
+    </span>
+
+    <!-- Header -->
+    <h1 class="omega-launch__title">Opening <em>{{ resolved.config.brand.name }}</em></h1>
+    <p class="omega-launch__sub">Handing you off to the desktop app.</p>
+
+    <!-- Progress -->
+    <div class="omega-launch__dots" role="status" aria-label="Launching">
+      <span></span><span></span><span></span>
+      <span class="visually-hidden">Launching…</span>
+    </div>
+
+    <!-- Error Alert (Hidden by default) -->
+    <div id="error-alert" class="alert alert-warning mb-4 text-start" role="alert" hidden>
+      <div class="d-flex align-items-center">
+        <i class="fa-solid fa-triangle-exclamation me-2"></i>
+        <div>
+          <strong>App not installed?</strong><br>
+          <small>Download {{ resolved.config.brand.name }} for your platform below.</small>
+        </div>
+      </div>
+    </div>
+
+    <!-- Action Buttons -->
+    <div class="d-grid gap-2 d-sm-block">
+      <a id="launch-button" href="{{ resolved.app.protocol }}" class="btn btn-adaptive mb-2 mb-sm-0 me-sm-2">
+        <i class="fa-solid fa-rocket fa-sm me-2"></i>
+        <span>Launch app</span>
+      </a>
+      <a id="download-button" href="/download" class="btn btn-outline-adaptive mb-2 mb-sm-0">
+        <i class="fa-solid fa-download fa-sm me-2"></i>
+        <span>Download app</span>
+      </a>
+    </div>
+
+    <!-- Alternative Actions -->
+    <div class="omega-launch__footer">
+      Having trouble?
+      <a href="/" class="text-decoration-none">Go to website</a>
+      ·
+      <a href="/contact" class="text-decoration-none">Get help</a>
+    </div>
+  </div>
+</section>
+
+{{ content | omega_content_format }}