@omega.js/web 0.1.0

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

@@ -0,0 +1,253 @@
+---
+layout: frontend/core/base
+
+# ═══ /extension — reimagined 2026-07-16 (family DNA with /download): the
+# detected browser's button leads, every browser card sits in the open with
+# its REAL brandmark, and "coming soon" is a designed state, not a warning
+# banner. Data contract preserved: resolved.downloads.browsers + the
+# detection JS; site.targets.extension.listings[browser.id].url supplies the
+# store URLs (#610 — the curated targets view is the ONE home).
+
+# Hero Section
+hero:
+  headline: "One tab away, in <em>every</em> browser"
+  headline_accent: ""
+  description: "The full product, folded into your toolbar: one click from wherever you already are."
+
+# Downloads Section
+downloads:
+  loading:
+    headline: "Detecting browser"
+    description: "Determining your browser..."
+    button_text: "Please wait"
+  not_available:
+    headline: "Coming soon"
+    description: "The {{ resolved.config.brand.name }} extension isn't listed for this browser yet."
+  browsers:
+    - id: "chrome"
+      name: "Chrome"
+      logo: "chrome"
+      description: "Chrome 88+"
+      action: "Add to Chrome"
+    - id: "firefox"
+      name: "Firefox"
+      logo: "firefox"
+      description: "Firefox 78+"
+      action: "Add to Firefox"
+    - id: "edge"
+      name: "Edge"
+      logo: "edge"
+      description: "Edge 88+"
+      action: "Add to Edge"
+    - id: "opera"
+      name: "Opera"
+      logo: "opera"
+      description: "Opera 74+"
+      action: "Add to Opera"
+    - id: "safari"
+      name: "Safari"
+      logo: "safari"
+      description: "Safari 14+"
+      action: "Get for Safari"
+    - id: "brave"
+      name: "Brave"
+      logo: "brave"
+      description: "Brave 1.25+"
+      action: "Add to Brave"
+
+# After install — the pin ritual
+setup:
+  superheadline:
+    text: "Setup"
+  headline: "Thirty seconds to"
+  headline_accent: "pinned"
+  steps:
+    - title: "Install from your store"
+      description: "One click on the button above. The store handles the rest."
+      icon: "puzzle-piece"
+    - title: "Pin it to the toolbar"
+      description: "Click the puzzle piece in your toolbar, then the pin next to {{ resolved.config.brand.name }}."
+      icon: "thumbtack"
+    - title: "Sign in once"
+      description: "Your account carries over. Everything you have here is in the popup."
+      icon: "user-check"
+
+# Highlights Section — named `highlights`, not `features`: `features` is a
+# CONFIG section now (the feature catalog, #647) and a page key may not shadow one
+highlights:
+  superheadline:
+    text: "Included"
+  headline: "Small icon, whole"
+  headline_accent: "product"
+  subheadline: ""
+  items:
+    - title: "One-click access"
+      description: "The popup is the product: no new tab, no context switch."
+      icon: "bolt"
+    - title: "Works where you work"
+      description: "Actions available on the page you're already reading."
+      icon: "link"
+    - title: "Real-time alerts"
+      description: "Badge counts and notifications the moment something needs you."
+      icon: "bell"
+    - title: "Least-privilege by design"
+      description: "It asks only for the permissions it demonstrably needs."
+      icon: "shield-halved"
+
+# FAQ Section
+faqs:
+  superheadline:
+    text: "FAQs"
+  headline: "Before you"
+  headline_accent: "add it"
+  subheadline: "Quick answers about the browser extension."
+  items:
+    - question: "Is the extension free?"
+      answer: "Yes. Free to install and free to use. Your plan applies to your account, not to where you access it."
+    - question: "Which browsers are supported?"
+      answer: "It's built for Chrome, Firefox, Edge, Opera, Safari, and Brave. Store buttons above go live per browser as listings roll out."
+    - question: "How do I pin the extension?"
+      answer: "Click the puzzle-piece icon in your toolbar, then the pin next to {{ resolved.config.brand.name }}. Pinned is a different product: one click instead of three."
+    - question: "What can it see?"
+      answer: "Only what it needs to function, and the permission prompt tells you exactly what that is. No browsing-history collection, ever."
+
+# CTA Section
+cta:
+  superheadline:
+    text: "Support"
+  headline: "Extension acting"
+  headline_accent: "up?"
+  subheadline: "Tell us the browser and what you clicked, and we'll take it from there."
+  primary_button:
+    text: "Contact support"
+    icon: "headset"
+    href: "/contact"
+  secondary_button:
+    text: "Release notes"
+    icon: "book"
+    href: "/updates"
+    nudge: true
+---
+
+<!-- ═══ Hero: the page already picked your browser ═══ -->
+{% 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-0" data-omega-first-paint data-omega-dotfield>
+  <div class="container text-center">
+    {% component "heading/masthead", eyebrow: "Extension", headline: resolved.hero.headline, headline_accent: resolved.hero.headline_accent, sub: resolved.hero.description, sub_class: "omega-hero__sub mx-auto", first_paint: true %}
+
+    <div class="omega-dl-hero">
+      <!-- Filled by the detection JS: your browser's store button -->
+      <a id="extension-hero" class="btn btn-adaptive btn-lg omega-dl-hero__btn" href="#browsers" hidden>
+        <span class="omega-dl-hero__icon" data-hero-icon></span>
+        <span data-hero-label>Install</span>
+      </a>
+      <!-- Shown until detection resolves (and forever without JS / no listing) -->
+      <a id="extension-hero-fallback" class="btn btn-adaptive btn-lg omega-dl-hero__btn" href="#browsers">
+        <i class="fa-solid fa-puzzle-piece fa-sm me-2"></i>
+        See supported browsers
+      </a>
+      <a class="btn btn-outline-adaptive btn-lg omega-hover-nudge" href="#browsers">
+        All browsers
+        <span class="omega-nudge ms-2"><i class="fa-solid fa-arrow-down fa-sm"></i></span>
+      </a>
+    </div>
+
+    <p class="omega-dl-hero__platforms omega-quiet small">
+      {% for browser in resolved.downloads.browsers %}{{ browser.name }}{% unless forloop.last %} · {% endunless %}{% endfor %}
+    </p>
+  </div>
+</section>
+
+<!-- ═══ Browser grid: real marks, buttons in hand ═══ -->
+<section id="browsers" class="pt-5">
+  <div class="container">
+    <!-- The visible section-head is gone (Ian QA); the h2 stays for heading
+         order — the cards' h3 names need a parent level under the h1 -->
+    <h2 class="visually-hidden">Supported browsers</h2>
+    <div class="row g-4 justify-content-center" data-omega-reveal-stagger="70">
+      {% for browser in resolved.downloads.browsers %}
+        {% assign config_url = site.targets.extension.listings[browser.id].url %}
+
+        <div class="col-sm-6 col-lg-4 d-flex" data-omega-reveal>
+          <div class="omega-dl-card omega-hover-lift" data-download-card data-browser="{{ browser.id }}">
+            <span class="omega-dl-card__mark">{% omega_logo browser.logo, "brandmarks" %}</span>
+            <h3 class="omega-dl-card__name">{{ browser.name }}</h3>
+            <p class="omega-dl-card__req omega-quiet small">{{ browser.description }}</p>
+
+            <div class="omega-dl-card__actions">
+              {% iftruthy config_url %}
+                <a href="{{ config_url }}" class="btn btn-adaptive w-100" data-install="true" target="_blank" rel="noopener">
+                  <i class="fa-solid fa-puzzle-piece fa-sm me-2"></i>
+                  {{ browser.action | default: "Install" }}
+                </a>
+              {% endiftruthy %}
+              {% iffalsy config_url %}
+                <span class="omega-status w-100 justify-content-center">
+                  <span class="omega-dot"></span>
+                  {{ resolved.downloads.not_available.headline }}
+                </span>
+              {% endiffalsy %}
+            </div>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>
+
+<!-- ═══ The pin ritual — three steps ═══ -->
+<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.setup.superheadline.text, headline: resolved.setup.headline, headline_accent: resolved.setup.headline_accent %}
+      </div>
+
+      <div class="omega-rowlist" data-omega-reveal-stagger="60">
+        {% for step in resolved.setup.steps %}
+          <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-{{ step.icon }} fa-sm"></i></span>
+              <strong>{{ forloop.index }}. {{ step.title }}</strong>
+            </span>
+            <span class="omega-rowlist__meta">{{ step.description }}</span>
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ═══ What the little icon carries ═══ -->
+<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.highlights.superheadline.text, headline: resolved.highlights.headline, headline_accent: resolved.highlights.headline_accent %}
+      </div>
+
+      <div class="omega-rowlist" data-omega-reveal-stagger="60">
+        {% for feature in resolved.highlights.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-{{ feature.icon }} fa-sm"></i></span>
+              <strong>{{ feature.title }}</strong>
+            </span>
+            <span class="omega-rowlist__meta">{{ feature.description }}</span>
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ═══ FAQ ═══ -->
+{% section "marketing/faq", data: resolved.faqs %}
+
+<!-- ═══ CTA band ═══ -->
+{% section "marketing/cta", data: resolved.cta %}
+
+{{ content | omega_content_format }}

package/themes/base/_layouts/frontend/pages/extension/installed.html

@@ -0,0 +1,198 @@
+---
+layout: frontend/core/cover
+
+# Hero Section
+hero:
+  headline: "Extension installed,"
+  headline_accent: "now let's pin it!"
+  description: ""
+
+# Steps
+steps:
+  - title: "Click the puzzle piece"
+    description: "Find the Extensions icon in your browser toolbar"
+  - title: "Pin the extension"
+    description: "Click the pin icon to keep it visible in your toolbar"
+  - title: "You're all set!"
+    description: "{{ resolved.config.brand.name }} is now pinned and ready to use"
+---
+
+{% 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 %}
+{% assign brandmark_src = assetManifest.brandmarkSvg | default: resolved.config.brand.images.brandmark %}
+<!-- Main content -->
+<section class="col-12 col-md-10 col-lg-8 col-xl-7">
+  <div class="card">
+    <div class="card-body p-4 p-md-5">
+      <!-- Success Icon -->
+      <div class="text-center mb-4" data-omega-reveal>
+        <span class="omega-status omega-status--ok">
+          <span class="omega-dot omega-dot--ok"></span>
+          Installed
+        </span>
+      </div>
+
+      <!-- Headline -->
+      <div class="text-center mb-5" data-omega-reveal>
+        <h1 class="omega-display omega-display--section mb-3">
+          {{ resolved.hero.headline }}
+          <em>{{ resolved.hero.headline_accent }}</em>
+        </h1>
+      </div>
+
+      <!-- Steps Slideshow -->
+      <div class="steps-slideshow">
+        <div class="steps-slideshow-slides">
+        <!-- Step 1: Click puzzle piece -->
+        <div class="step-slide" data-step="1">
+          <div class="step-number-badge">1</div>
+            <h5 class="step-title">{{ resolved.steps[0].title }}</h5>
+          <p class="text-muted mb-3">{{ resolved.steps[0].description }}</p>
+          <div class="instruction-step-container bg-body-tertiary rounded-4 p-4 d-flex align-items-center justify-content-center position-relative">
+            <div class="extension-visual" aria-hidden="true">
+              <div class="extension-toolbar d-flex align-items-center justify-content-end gap-2 bg-body rounded-3 p-2 border">
+                <!-- Mock URL bar -->
+                <div class="extension-url-bar flex-grow-1 bg-body-secondary rounded px-3 py-1 small text-muted me-2 text-truncate">
+                  {{ resolved.config.url }}
+                </div>
+                <!-- Extension icons -->
+                <button type="button" class="btn btn-sm btn-secondary opacity-50" disabled>
+                  <i class="fa-solid fa-shield fa-sm"></i>
+                </button>
+                <button type="button" class="btn btn-sm btn-secondary opacity-50" disabled>
+                  <i class="fa-solid fa-bookmark fa-sm"></i>
+                </button>
+                <!-- Puzzle piece - highlighted -->
+                <div class="extension-puzzle-target position-relative">
+                  <button type="button" class="btn btn-sm btn-primary" tabindex="-1">
+                    <i class="fa-solid fa-puzzle-piece fa-sm"></i>
+                  </button>
+                  <div class="click-indicator position-absolute top-50 start-50">
+                    <div class="click-pulse position-absolute border border-3 border-primary rounded-circle"></div>
+                    <div class="pointer-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
+                        <path fill="#E0E0E0" d="M27.8,39.7c-0.1,0-0.2,0-0.4-0.1c-0.2-0.1-0.4-0.3-0.6-0.5l-3.7-8.6l-4.5,4.2C18.5,34.9,18.3,35,18,35c-0.1,0-0.3,0-0.4-0.1C17.3,34.8,17,34.4,17,34l0-22c0-0.4,0.2-0.8,0.6-0.9C17.7,11,17.9,11,18,11c0.2,0,0.5,0.1,0.7,0.3l16,15c0.3,0.3,0.4,0.7,0.3,1.1c-0.1,0.4-0.5,0.6-0.9,0.7l-6.3,0.6l3.9,8.5c0.1,0.2,0.1,0.5,0,0.8c-0.1,0.2-0.3,0.5-0.5,0.6l-2.9,1.3C28.1,39.7,27.9,39.7,27.8,39.7z"/>
+                        <path fill="#212121" d="M18,12l16,15l-7.7,0.7l4.5,9.8l-2.9,1.3l-4.3-9.9L18,34L18,12 M18,10c-0.3,0-0.5,0.1-0.8,0.2c-0.7,0.3-1.2,1-1.2,1.8l0,22c0,0.8,0.5,1.5,1.2,1.8C17.5,36,17.8,36,18,36c0.5,0,1-0.2,1.4-0.5l3.4-3.2l3.1,7.3c0.2,0.5,0.6,0.9,1.1,1.1c0.2,0.1,0.5,0.1,0.7,0.1c0.3,0,0.5-0.1,0.8-0.2l2.9-1.3c0.5-0.2,0.9-0.6,1.1-1.1c0.2-0.5,0.2-1.1,0-1.5l-3.3-7.2l4.9-0.4c0.8-0.1,1.5-0.6,1.7-1.3c0.3-0.7,0.1-1.6-0.5-2.1l-16-15C19,10.2,18.5,10,18,10L18,10z"/>
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Step 2: Pin the extension -->
+        <div class="step-slide" data-step="2">
+          <div class="step-number-badge">2</div>
+            <h5 class="step-title">{{ resolved.steps[1].title }}</h5>
+          <p class="text-muted mb-3">{{ resolved.steps[1].description }}</p>
+          <div class="instruction-step-container bg-body-tertiary rounded-4 p-4 d-flex align-items-center justify-content-center position-relative">
+            <div class="extension-visual" aria-hidden="true">
+              <div class="extension-dropdown bg-body rounded-3 border shadow-sm mx-auto">
+                <!-- Dropdown header -->
+                <div class="extension-dropdown-header d-flex align-items-center justify-content-between p-2 border-bottom bg-body-secondary">
+                  <span class="small fw-bold">Extensions</span>
+                  <button type="button" class="btn btn-sm p-0 opacity-50" disabled>
+                    <i class="fa-solid fa-gear fa-sm"></i>
+                  </button>
+                </div>
+                <!-- Extension list -->
+                <div class="extension-dropdown-list p-2">
+                  <!-- Other extension (dimmed) -->
+                  <div class="extension-dropdown-item d-flex align-items-center gap-3 p-2 rounded opacity-50">
+                    <div class="extension-item-icon bg-body-secondary rounded p-1 d-flex align-items-center justify-content-center">
+                      <i class="fa-solid fa-shield fa-xs"></i>
+                    </div>
+                    <span class="small flex-grow-1">AdBlocker</span>
+                    <button type="button" class="btn btn-sm p-1" disabled>
+                      <i class="fa-solid fa-thumbtack fa-xs text-muted"></i>
+                    </button>
+                  </div>
+                  <!-- Our extension (highlighted with pin click) -->
+                  <div class="extension-dropdown-item d-flex align-items-center gap-3 p-2 rounded bg-primary bg-opacity-10 border border-primary">
+                    <div class="extension-item-icon rounded p-1 d-flex align-items-center justify-content-center">
+                      <img src="{{ site.omega.placeholder.src }}" data-lazy="@src {{ brandmark_src }}" class="extension-brandmark" alt="{{ resolved.config.brand.name }}"/>
+                    </div>
+                    <span class="small flex-grow-1 fw-bold">{{ resolved.config.brand.name }}</span>
+                    <!-- Pin button - highlighted with click animation -->
+                    <div class="extension-pin-target position-relative">
+                      <button type="button" class="btn btn-sm btn-primary p-1" tabindex="-1">
+                        <i class="fa-solid fa-thumbtack fa-xs"></i>
+                      </button>
+                      <div class="click-indicator position-absolute top-50 start-50">
+                        <div class="click-pulse position-absolute border border-3 border-primary rounded-circle"></div>
+                        <div class="pointer-icon">
+                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
+                            <path fill="#E0E0E0" d="M27.8,39.7c-0.1,0-0.2,0-0.4-0.1c-0.2-0.1-0.4-0.3-0.6-0.5l-3.7-8.6l-4.5,4.2C18.5,34.9,18.3,35,18,35c-0.1,0-0.3,0-0.4-0.1C17.3,34.8,17,34.4,17,34l0-22c0-0.4,0.2-0.8,0.6-0.9C17.7,11,17.9,11,18,11c0.2,0,0.5,0.1,0.7,0.3l16,15c0.3,0.3,0.4,0.7,0.3,1.1c-0.1,0.4-0.5,0.6-0.9,0.7l-6.3,0.6l3.9,8.5c0.1,0.2,0.1,0.5,0,0.8c-0.1,0.2-0.3,0.5-0.5,0.6l-2.9,1.3C28.1,39.7,27.9,39.7,27.8,39.7z"/>
+                            <path fill="#212121" d="M18,12l16,15l-7.7,0.7l4.5,9.8l-2.9,1.3l-4.3-9.9L18,34L18,12 M18,10c-0.3,0-0.5,0.1-0.8,0.2c-0.7,0.3-1.2,1-1.2,1.8l0,22c0,0.8,0.5,1.5,1.2,1.8C17.5,36,17.8,36,18,36c0.5,0,1-0.2,1.4-0.5l3.4-3.2l3.1,7.3c0.2,0.5,0.6,0.9,1.1,1.1c0.2,0.1,0.5,0.1,0.7,0.1c0.3,0,0.5-0.1,0.8-0.2l2.9-1.3c0.5-0.2,0.9-0.6,1.1-1.1c0.2-0.5,0.2-1.1,0-1.5l-3.3-7.2l4.9-0.4c0.8-0.1,1.5-0.6,1.7-1.3c0.3-0.7,0.1-1.6-0.5-2.1l-16-15C19,10.2,18.5,10,18,10L18,10z"/>
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Step 3: All set -->
+        <div class="step-slide" data-step="3">
+          <div class="step-number-badge">3</div>
+            <h5 class="step-title">{{ resolved.steps[2].title }}</h5>
+          <p class="text-muted mb-3">{{ resolved.steps[2].description }}</p>
+          <div class="instruction-step-container bg-body-tertiary rounded-4 p-4 d-flex align-items-center justify-content-center position-relative">
+            <div class="extension-visual" aria-hidden="true">
+              <div class="extension-toolbar d-flex align-items-center justify-content-end gap-2 bg-body rounded-3 p-2 border">
+                <!-- Mock URL bar -->
+                <div class="extension-url-bar flex-grow-1 bg-body-secondary rounded px-3 py-1 small text-muted me-2 text-truncate">
+                  {{ resolved.config.url }}
+                </div>
+                <!-- Extension icons -->
+                <button type="button" class="btn btn-sm btn-secondary opacity-50" disabled>
+                  <i class="fa-solid fa-shield fa-sm"></i>
+                </button>
+                <button type="button" class="btn btn-sm btn-secondary opacity-50" disabled>
+                  <i class="fa-solid fa-bookmark fa-sm"></i>
+                </button>
+                <!-- Our extension - now pinned! -->
+                <div class="extension-pinned-target position-relative">
+                  <button type="button" class="btn btn-sm btn-primary animation-flex" tabindex="-1">
+                    <img src="{{ site.omega.placeholder.src }}" data-lazy="@src {{ brandmark_src }}" class="extension-toolbar-brandmark" alt="{{ resolved.config.brand.name }}"/>
+                  </button>
+                </div>
+                <button type="button" class="btn btn-sm btn-secondary opacity-50" disabled>
+                  <i class="fa-solid fa-puzzle-piece fa-sm"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        </div>
+
+        <!-- Slideshow Navigation -->
+        <div class="steps-slideshow-nav">
+          <button type="button" class="btn btn-outline-adaptive btn-sm step-prev" disabled>
+            <i class="fa-solid fa-chevron-left me-1"></i> Back
+          </button>
+          <div class="steps-dots"></div>
+          <button type="button" class="btn btn-adaptive btn-sm step-next">
+            <span class="button-text">Next</span> <i class="fa-solid fa-chevron-right ms-1"></i>
+          </button>
+        </div>
+      </div>
+
+      <!-- CTA Button -->
+      <div class="text-center mt-4" data-omega-reveal>
+        <a href="/" class="btn btn-adaptive btn-lg px-5 omega-hover-nudge">
+          Start using {{ resolved.config.brand.name }}
+          <span class="omega-nudge ms-2"><i class="fa-solid fa-arrow-right fa-sm"></i></span>
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
+
+{{ content | omega_content_format }}

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

@@ -0,0 +1,171 @@
+---
+layout: frontend/core/base
+
+# Hero Section
+hero:
+  headline: "We'd love your"
+  headline_accent: "feedback"
+  subheadline: "Help us improve {{ resolved.config.brand.name }} by sharing your experience"
+
+# Feedback Form Section
+feedback_form:
+  superheadline:
+    text: "Your experience"
+  headline: "How would you rate <em>{{ resolved.config.brand.name }}</em>?"
+  subheadline: "Select a rating and let us know what you think."
+  ratings:
+    - id: "dislike"
+      label: "Poor"
+      image: "https://cdn.itwcreativeworks.com/assets/general/images/feedback/dislike.png"
+    - id: "neutral"
+      label: "Okay"
+      image: "https://cdn.itwcreativeworks.com/assets/general/images/feedback/neutral.png"
+    - id: "like"
+      label: "Good"
+      image: "https://cdn.itwcreativeworks.com/assets/general/images/feedback/like.png"
+    - id: "love"
+      label: "Excellent"
+      image: "https://cdn.itwcreativeworks.com/assets/general/images/feedback/love.png"
+
+# Prerender icons for JS
+---
+
+<!-- ═══ Feedback — aside head + form panel ═══ -->
+{% 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
+form beneath it never carried a reveal of its own. {% endcomment %}
+<section class="omega-dotgrid" data-omega-first-paint data-omega-dotfield>
+  <div class="container">
+    <div class="omega-duo" style="--omega-duo-cols: 5fr 7fr;">
+      <!-- Aside: the ask, stated once -->
+      <div class="omega-duo__aside">
+        {% component "heading/masthead", eyebrow: "Feedback", headline: resolved.hero.headline, headline_accent: resolved.hero.headline_accent, sub: resolved.hero.subheadline, first_paint: true %}
+        <p class="small omega-quiet mt-4 mb-0">
+          <i class="fa-solid fa-reply fa-xs me-1"></i>
+          Every submission is read by a human, and the sharp ones shape the roadmap.
+        </p>
+      </div>
+
+      <!-- The form -->
+      <div class="omega-form-panel">
+        <div class="mb-4">
+          <h2 class="omega-display omega-display--section mb-2">{{ resolved.feedback_form.headline }}</h2>
+          {% iftruthy resolved.feedback_form.subheadline %}
+            <p class="text-muted mb-0">{{ resolved.feedback_form.subheadline }}</p>
+          {% endiftruthy %}
+        </div>
+
+        <form id="feedback-form" autocomplete="off" data-form-state="initializing" onsubmit="return false">
+              <!-- Rating Selection -->
+              <div class="feedback-rating-group mb-4">
+                <input type="hidden" name="rating" id="feedback-rating-input" required>
+                <div class="row g-3 justify-content-center">
+                  {% for rating in resolved.feedback_form.ratings %}
+                    <div class="col-6 col-sm-3">
+                      <button type="button" class="feedback-rating-btn w-100 text-center" data-rating="{{ rating.id }}">
+                        <img src="{{ rating.image | omega_cachebreak }}" alt="{{ rating.label }}" class="feedback-rating-img mb-2" width="64" height="64" loading="eager">
+                        <span class="d-block small fw-semibold">{{ rating.label }}</span>
+                      </button>
+                    </div>
+                  {% endfor %}
+                </div>
+                <div class="invalid-feedback"></div>
+              </div>
+
+              <!-- Honeypot field (bot detection) -->
+              <div class="form-group" style="display: none;" aria-hidden="true">
+                <input type="text" class="form-control" name="honey" tabindex="-1" autocomplete="off">
+              </div>
+
+              <!-- Hidden auth fields (auto-populated via bindings) -->
+              <input type="hidden" aria-hidden="true" name="auth.user.uid" data-omega-bind="@value auth.user.uid">
+              <input type="hidden" aria-hidden="true" name="auth.user.email" data-omega-bind="@value auth.user.email">
+
+              <!-- Positive feedback? -->
+              <div class="mb-4">
+                <label for="feedback-positive" class="form-label fw-semibold">
+                  What do you like about {{ resolved.config.brand.name }}?
+                </label>
+                <textarea class="form-control form-control-lg" id="feedback-positive" name="positive" rows="2"
+                  placeholder="Tell us what you enjoy..."
+                  maxlength="2000"></textarea>
+              </div>
+
+              <!-- Negative feedback? -->
+              <div class="mb-4">
+                <label for="feedback-negative" class="form-label fw-semibold">
+                  What could we improve?
+                </label>
+                <textarea class="form-control form-control-lg" id="feedback-negative" name="negative" rows="2"
+                  placeholder="Let us know how we can do better..."
+                  maxlength="2000"></textarea>
+              </div>
+
+              <!-- Additional Comments -->
+              <div class="mb-4">
+                <label for="feedback-comments" class="form-label fw-semibold">
+                  Additional comments
+                </label>
+                <textarea class="form-control form-control-lg" id="feedback-comments" name="comments" rows="3"
+                  placeholder="Anything else you'd like to share..."
+                  maxlength="5000"></textarea>
+              </div>
+
+              <!-- Submit -->
+              <div class="d-grid">
+                <button type="submit" class="btn btn-adaptive btn-lg">
+                  <i class="fa-solid fa-paper-plane fa-sm me-2"></i>
+                  Submit feedback
+                </button>
+              </div>
+            </form>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Review Prompt Modal -->
+<div class="modal fade" id="review-modal" tabindex="-1" aria-labelledby="review-modal-label" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-body text-center p-4 p-md-5">
+        <div class="mb-4">
+          <img src="{{ 'https://cdn.itwcreativeworks.com/assets/general/images/feedback/love.png' | omega_cachebreak }}" alt="Thank you" width="72" height="72">
+        </div>
+        <h3 class="omega-display omega-display--section mb-3" id="review-modal-label">You're <em>awesome</em>!</h3>
+        <p class="text-muted mb-3">
+          We're so glad you love {{ resolved.config.brand.name }}! Share your experience on a review site to be entered to win a $100 gift card.
+        </p>
+        <div class="alert alert-warning text-start small mb-4" role="alert">
+          <i class="fa-solid fa-circle-exclamation me-1"></i>
+          You must actually post your review to be eligible for the $100 gift card. Closing this without publishing a review won't qualify.
+        </div>
+
+        <!-- Copy-paste feedback -->
+        <div class="text-start mb-4">
+          <label class="form-label fw-semibold small text-muted">
+            Your feedback (copy and paste into your review)
+          </label>
+          <div class="position-relative">
+            <textarea id="review-modal-feedback" class="form-control" rows="4" readonly></textarea>
+            <button type="button" id="review-modal-copy" class="btn btn-sm btn-adaptive position-absolute top-0 end-0 m-2">
+              <i class="fa-solid fa-copy fa-sm me-1"></i>
+              Copy
+            </button>
+          </div>
+        </div>
+
+        <a id="review-modal-link" href="#" target="_blank" rel="noopener noreferrer" class="btn btn-adaptive btn-lg mb-3">
+          Post your review
+          <i class="fa-solid fa-arrow-up-right-from-square fa-sm ms-2"></i>
+        </a>
+        <div>
+          <button type="button" class="btn btn-link text-muted" data-bs-dismiss="modal">Maybe later</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+{{ content | omega_content_format }}