diff --git a/.github/workflows/verify-cloudflare-facts.yml b/.github/workflows/verify-cloudflare-facts.yml
index 4ef3eed..5745d30 100644
--- a/.github/workflows/verify-cloudflare-facts.yml
+++ b/.github/workflows/verify-cloudflare-facts.yml
@@ -141,7 +141,7 @@ jobs:
             --base dev \
             --head "$BRANCH" \
             --title "chore(verifier): cloudflare-facts value change (${DATE_TAG})" \
-            --body "Automated PR from verify-cloudflare-facts.yml — at least one verified fact changed or went absent at the upstream source. Review the diff; the privacy pages render this data verbatim. The BASELINE prose in docs/BASELINE_COPY.md may need a paired update."
+            --body "Automated PR from verify-cloudflare-facts.yml — at least one verified fact's value changed at the upstream source (or, for DPF, the listed organisation is no longer present). Review the diff; the privacy pages render this data verbatim. The BASELINE prose in docs/BASELINE_COPY.md may need a paired update."
 
       - name: Open verifier-alert Issue on failure
         if: ${{ steps.run.outputs.has_failure == 'true' && steps.run.outputs.dry_run == 'false' }}
diff --git a/CLAUDE.md b/CLAUDE.md
index 86c1c6b..6231af0 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -78,7 +78,7 @@ possible; Pass 2 should follow it.
 - Surface uncertainty as explicit open questions in plans, not resolved
   silently.
 
-## Process rules from Pass 1
+## Process rules from Pass 1+2
 
 Specific technical lessons worth codifying:
 
@@ -107,6 +107,7 @@ Specific technical lessons worth codifying:
   carve-out only when a static page genuinely cannot serve the use case.
   The `wrangler.jsonc` comment block carries the same posture statement
   alongside its env-inheritance gotcha.
+- **Workflow-permission verification for non-standard API endpoints (Pass 2 lesson).** When a GitHub Actions workflow change asserts that a `permissions:` scope (`actions: write`, `contents: write`, etc.) unlocks a given REST API endpoint, the assertion needs runtime verification — not just doc-reading. GitHub Actions' `permissions:` YAML enumerates a fixed list of scopes; not every API endpoint maps cleanly to one of those scopes. Variables in particular are not in the permissions list at all, and the default `GITHUB_TOKEN` returns HTTP 403 on `PATCH /repos/{owner}/{repo}/actions/variables/{name}` regardless of the declared scope. For any workflow change involving an API endpoint outside the well-known set (issues, pull-requests, contents), one of the following is required before merge: (a) runtime dispatch of the workflow against a real auth setup, (b) explicit citation of GitHub docs showing the endpoint accepts the declared token scope, or (c) a runbook step in the plan calling out "this requires a PAT, not `GITHUB_TOKEN`, because <reason>." The Pass 2 G D.10/11 chain shipped a 403-on-first-run bug because none of the three was performed.
 
 ## Skills
 
diff --git a/docs/CSS_CONVENTIONS.md b/docs/CSS_CONVENTIONS.md
new file mode 100644
index 0000000..74a8942
--- /dev/null
+++ b/docs/CSS_CONVENTIONS.md
@@ -0,0 +1,79 @@
+# CSS conventions — Blackbrowed Labs site
+
+Codified during Phase J of Pass 3 (2026-05-12) as the first
+multi-extraction CSS work crossed the threshold where conventions
+needed to be explicit. Treat this doc as the authority for any
+future CSS-sharing decision; deviate only with an explicit
+rationale recorded in the deviating plan.
+
+## 1. Module location
+
+CSS shared across more than one page template or component lives at
+`src/styles/<topic>.css`, where `<topic>` names the subtree
+(`products.css`, `forms.css`, etc.). Each module is imported
+exactly once via `@import` at the top of `src/styles/global.css`.
+The whole site loads `global.css` (via `src/layouts/BaseLayout.astro`),
+so the shared modules cascade everywhere.
+
+Per-component or per-page CSS that is genuinely local — rules that
+do not appear elsewhere in the codebase — stays in the
+component's scoped `<style>` block. Astro 6's per-component
+`<style>` scoping is intentional; do not retire it for rules that
+have a single consumer.
+
+## 2. Class naming
+
+Class names use BEM-style namespacing: `block__element--modifier`,
+where `block` corresponds to the high-level component or page
+section (e.g. `products-index`, `product-detail`, `contact-form`).
+Shared CSS modules in `src/styles/` declare each block's rules side
+by side, without collapsing distinct blocks under a single generic
+class.
+
+The design bundle's `.btn` / `.field` global vocabulary
+(`design/handoff-bundle/dev/components.html`) is reference-only.
+Components do NOT consume those names as runtime classes; instead
+each block re-implements the visual treatment under its own BEM
+scope (`.contact-form__submit`, `.contact-form__field`, etc.). This
+keeps markup stable across CSS reorganizations and avoids
+fragile cross-component class coupling.
+
+## 3. Scope of extraction
+
+Extraction is full-block: a duplicate-across-files `<style>` block
+moves to `src/styles/<topic>.css` in its entirety, including
+layout-affecting rules (max-width, margin, padding, grid / flex
+containers). Page-private rules — rules that genuinely differ
+between consumers — stay in the page's residual scoped block. If a
+page has zero page-private rules after extraction, the scoped
+`<style>` block is removed entirely.
+
+The trigger for extraction is the appearance of a third byte-
+identical scoped block. Two consumers (a single DE/EN sibling pair)
+is review discipline territory — co-locate the styles and review the
+two scoped blocks together. Three or more is shared-module territory.
+
+## 4. Specificity discipline
+
+Shared modules contain only single-class or single-element
+selectors — no `:where()`, no `!important`, no descendant chains
+deeper than two levels. Where a page genuinely needs to override a
+shared rule, the override lives in the page's residual scoped
+`<style>` block (which Astro automatically scopes higher than
+global module CSS via its scoped-class suffix). Global modules
+should never need to "win" over scoped pages.
+
+## 5. Module-import order in `global.css`
+
+```css
+@import "tailwindcss";
+@import "./tokens.css";
+@import "./<topic-1>.css";
+@import "./<topic-2>.css";
+/* ... base element styles below */
+```
+
+Order: tokens always first (every other module depends on the
+custom properties); shared modules in alphabetical order after.
+Tailwind's `@import "tailwindcss"` stays first because Tailwind 4's
+`@theme` directives must register before `@theme` consumers.
diff --git a/docs/TECH_STACK.md b/docs/TECH_STACK.md
index 5feff6f..bea21f1 100644
--- a/docs/TECH_STACK.md
+++ b/docs/TECH_STACK.md
@@ -530,7 +530,7 @@ The repo's `.gitignore` is at the root and covers three categories of files:
     - Block force pushes: enabled
     - Other toggles intentionally off — `dev` is an integration branch and direct commits are expected
 
-- **Status checks deliberately not required:** "Require status checks to pass" is off on `protect-main` because GitHub requires at least one specific check to be named, and we don't yet have a PR-triggered CI workflow (the deploy workflows are push-triggered, not PR-triggered). Pass 2 backlog item #5: add a PR-triggered CI workflow (`npm ci && npm run build` at minimum) and add it as a required status check on `protect-main`.
+- **Required status checks:** `protect-main` requires the `build-pr` check from `.github/workflows/ci-pr.yml` to pass before merge (added 2026-04-28, ruleset id `15468856`). The workflow runs `npm ci` → `npm run check` → `npm run build` on every PR targeting `main`, plus a warn-only verifier-freshness probe (60-day soft threshold, 90-day hard gate enforced separately in the deploy and nightly workflows). `strict_required_status_checks_policy: true` requires the check to have run against the PR's latest head SHA, not a stale one. The job name `build-pr` is what's registered with GitHub Actions and what the ruleset references — renaming the job would invalidate the binding and require a re-flip.
 
 - **Default branch:** `main`. Changed from `dev` to `main` at the same time as ruleset configuration. Workflow is now: feature work on `dev` → auto-deploy to staging (`dev.blackbrowedlabs.com`) → PR `dev` → `main` → auto-deploy to production (`blackbrowedlabs.com`).
 
diff --git a/scripts/build-headers.mjs b/scripts/build-headers.mjs
index cae6d85..347ed18 100644
--- a/scripts/build-headers.mjs
+++ b/scripts/build-headers.mjs
@@ -4,6 +4,9 @@
  * the PUBLIC_ENVIRONMENT environment variable. Runs before `astro build`
  * via the "build" npm script.
  *
+ * Run from the project root (as `npm run build` does); paths resolve
+ * against `process.cwd()`.
+ *
  * - production: long-lived caching for static assets; no robots tag.
  * - staging (or anything else): same caching + X-Robots-Tag: noindex,
  *   nofollow on every path. Triad member 2 of 3 (meta tag + robots.txt
diff --git a/scripts/checks/__fixtures__/README.md b/scripts/checks/__fixtures__/README.md
new file mode 100644
index 0000000..384f22d
--- /dev/null
+++ b/scripts/checks/__fixtures__/README.md
@@ -0,0 +1,56 @@
+# Verifier fixture test matrix
+
+Each fixture under this directory exercises a specific branch in a
+check module. Run any single scenario via:
+
+```bash
+MOCK_SCENARIO=<fixture-stem> node scripts/run-verifier.mjs --dry-run
+```
+
+The orchestrator routes the named fact to its matching fixture and
+uses the default `*-active` fixture for the sibling fact (so every run
+exercises both checks, but only one is the scenario under test).
+
+## DPF (`scripts/checks/dpf.mjs`)
+
+| Fixture | Branch triggered | Expected `dpf.status` | Notes |
+|---|---|---|---|
+| `dpf-active.json` | Happy path | `ok` | Cloudflare present in active EU-cert rows |
+| `dpf-absent.json` | Mode #4 (org missing) | `absent` | Structural markers OK; Cloudflare not in active rows |
+| `dpf-parser-broken.json` | Branch A — missing structural markers | `parser-broken` | Tiny `{"error": "deprecated"}` shape |
+| `dpf-parser-broken-empty.json` | Branch C — `orgs.length === 0` | `parser-broken` | Structural markers OK; zero rows pass the EU-cert filter |
+| (no fixture) | Branch B — `parseActiveOrgs` throws | `parser-broken` | **JSON-fixture-unreachable by construction.** The throw branch is only reachable via a JS-runtime mutation that JSON cannot encode. If a future refactor adds an explicit throw inside `parseActiveOrgs` on a malformed-but-encodable input, add a `dpf-parser-broken-malformed.json` fixture then. |
+
+> **Load-bearing coercion (do not silently remove).** The
+> `String(p.OrganizationPublicDisplayName ?? '')` coercion at
+> `scripts/checks/dpf.mjs:170` is what makes Branch B unreachable from
+> any JSON-encodable input — every JSON shape (string, number, boolean,
+> null, undefined, missing key) is coerced to a string before
+> `.trim().toLowerCase()` runs, so the `.map` step cannot throw on
+> JSON data. Any future implementer who edits that line MUST update
+> this matrix: the Branch B "JSON-fixture-unreachable" classification
+> depends on the coercion staying in place.
+
+## CWA retention (`scripts/checks/cwa-retention.mjs`)
+
+| Fixture | Branch triggered | Expected `cwa_retention.status` | Notes |
+|---|---|---|---|
+| `cwa-active.html` | Happy path | `ok` | Aggregated retention parses to the cached value |
+| `cwa-changed-figure.html` | Mode #6 — figure shift | `changed` | Aggregated retention parses to a different number |
+| `cwa-parser-broken.html` | Mode #5 — pattern miss | `parser-broken` | Page content present but no retention figure findable |
+
+## Live-network mode
+
+Run without `MOCK_SCENARIO` to fetch the live DPF API and the live CWA
+docs page. Done in CI only (the weekly cron). Not generally exercised
+in local development.
+
+## Notes on adding new fixtures
+
+- DPF fixture extension: `.json`. CWA fixture extension: `.html`. The
+  check module declares its `fixtureExtension` export; the orchestrator
+  reads it.
+- Fixture stem must start with the check module's `scenarioPrefix`
+  (`dpf-` or `cwa-`) for the orchestrator to route correctly.
+- Sibling fact uses the check module's `defaultFixture` (`dpf-active`
+  or `cwa-active`) when the scenario-under-test names the other fact.
diff --git a/scripts/checks/__fixtures__/dpf-parser-broken-empty.json b/scripts/checks/__fixtures__/dpf-parser-broken-empty.json
new file mode 100644
index 0000000..2e4f4fb
--- /dev/null
+++ b/scripts/checks/__fixtures__/dpf-parser-broken-empty.json
@@ -0,0 +1,11 @@
+{
+  "RecordCount": 1,
+  "SumCount": 1,
+  "Items": [
+    {
+      "OrganizationPublicDisplayName": "Example Org With Only Swiss Cert",
+      "EUCert": null,
+      "SwissCert": { "PublicStatus": "Active" }
+    }
+  ]
+}
diff --git a/scripts/checks/cwa-retention.mjs b/scripts/checks/cwa-retention.mjs
index 6895d98..67381e2 100644
--- a/scripts/checks/cwa-retention.mjs
+++ b/scripts/checks/cwa-retention.mjs
@@ -5,7 +5,7 @@
  * src/data/cloudflare-facts.json (specifically: aggregated retention
  * months, and the absence of a published raw-events retention period).
  *
- * Source: https://developers.cloudflare.com/web-analytics/data-retention/
+ * Source: https://developers.cloudflare.com/web-analytics/faq/
  *
  * Source-of-truth: plans/active/pass-2/g-d-2/spec.md §6 (interface) and
  * §3.5/§3.6 (mode #5 / mode #6 detection).
@@ -76,7 +76,7 @@ function stripTags(html) {
 const NUMBER_WORDS = {
   one: 1, two: 2, three: 3, four: 4, five: 5, six: 6, seven: 7, eight: 8,
   nine: 9, ten: 10, eleven: 11, twelve: 12, eighteen: 18, twenty: 20,
-  twentyfour: 24, 'twenty-four': 24,
+  'twenty four': 24, 'twenty-four': 24,
 };
 
 function toMonths(numStr, unit) {
diff --git a/scripts/checks/dpf.mjs b/scripts/checks/dpf.mjs
index 94b48db..f3a2a9a 100644
--- a/scripts/checks/dpf.mjs
+++ b/scripts/checks/dpf.mjs
@@ -8,7 +8,8 @@
  *
  * Source-of-truth: plans/active/pass-2/g-d-10/g-d-10-2/dpf-investigation.md
  * (endpoint, method, body, JSON field paths) and plans/active/pass-2/g-d-2/
- * spec.md §6.3 / §3.2 / §3.4 (mode #2 / mode #4 detection contract).
+ * spec.md §3.2 / §3.4 / §9.1 / §9.3 (mode #2 / mode #4 detection contract,
+ * error-handling style, parser-shape constraints).
  * Runs as a registered check inside scripts/run-verifier.mjs.
  *
  * Failure-mode coverage:
@@ -40,14 +41,30 @@ export const expectedValue = 'Cloudflare, Inc.';
 export const fixtureExtension = 'json';
 
 // Verifier-only endpoint. Anonymous, no cookies, no Origin/Referer
-// gating today (verified in g-d-10-2/dpf-investigation.md). Substring
-// `Search: "Cloudflare"` filter is a verifier-side optimisation — the
-// active-status check happens server-side via `Status: "Active"` and is
-// independent of the search term. If Cloudflare ever rebrands or the
-// upstream changes their search semantics to exact-match, the verifier
-// flips to `absent` (mode #4) loudly; deliberate trade per the
-// investigation doc.
+// gating today (verified in g-d-10-2/dpf-investigation.md). Phase G.3
+// widened the filter from `Search: "Cloudflare"` + `RowsPerPage: 10`
+// to `Search: ""` + `RowsPerPage: 5000` (one request that returns the
+// full active list, currently ~3,600 rows / ~1.8 MB / ~2.7 s) plus an
+// in-process substring filter on 'cloudflare' inside parseActiveOrgs.
+// This survives a Cloudflare rebrand or any upstream change in
+// `Search` semantics — provided the new name still contains the
+// substring 'cloudflare'. Trade: ~5 KB payload + ~0.8 s becomes
+// ~1.8 MB + ~2.7 s per weekly cron run, in exchange for rebrand
+// robustness. Pagination is supported but not used — the API returns
+// the whole active list in one response. See
+// plans/active/pass-3/g/dpf-pagination-investigation.md for the
+// probe-by-probe evidence and the EUCert.PublicStatus distribution
+// (Active=2,960; Active-Re-cert=638 — the verifier still treats only
+// strict "Active" as live).
 const API_ENDPOINT = 'https://dpfapi.azurewebsites.net/api/participants';
+// Investigation: plans/active/pass-3/g/dpf-pagination-investigation.md
+// confirms RowsPerPage values >= SumCount return the complete active
+// list in a single ~2.7 s request (SumCount ~3,600 at probe time).
+// 5000 gives ~40% headroom for active-list growth before the verifier
+// would need to revisit. Search:'' returns the unfiltered list; the
+// substring match for 'cloudflare' happens in parseActiveOrgs()
+// below — rebrand-robust within the constraint that the new name
+// still contains the substring 'cloudflare'.
 const REQUEST_BODY = {
   DataCovered: [],
   Frameworks: [],
@@ -55,8 +72,8 @@ const REQUEST_BODY = {
   PageNumber: 0,
   RecourseMechanisms: [],
   StatutoryBody: [],
-  RowsPerPage: 10,
-  Search: 'Cloudflare',
+  RowsPerPage: 5000,
+  Search: '',
   StartLetter: '',
   Status: 'Active',
   States: [],
diff --git a/scripts/extract-tokens.mjs b/scripts/extract-tokens.mjs
index e6f962f..36749f3 100644
--- a/scripts/extract-tokens.mjs
+++ b/scripts/extract-tokens.mjs
@@ -14,6 +14,9 @@
  *
  * Runs after `astro build` in the npm "build" script so the file lands
  * only in the build artefact (dist/) and is not committed.
+ *
+ * Run from the project root (as `npm run build` does); paths resolve
+ * against `process.cwd()`.
  */
 
 import { readFileSync, writeFileSync, mkdirSync } from 'node:fs';
diff --git a/scripts/run-verifier.mjs b/scripts/run-verifier.mjs
index 14d6384..ae2912d 100644
--- a/scripts/run-verifier.mjs
+++ b/scripts/run-verifier.mjs
@@ -5,6 +5,9 @@
  * `has_value_diff`, `has_failure`) so the workflow can route to the
  * matching notification channel (silent variable refresh, PR, or Issue).
  *
+ * Run from the project root (as the verify-cloudflare-facts.yml
+ * workflow does); paths resolve against `process.cwd()`.
+ *
  * Source-of-truth: plans/active/pass-2/g-d-2/spec.md (original design) +
  * plans/active/pass-2/g-d-10/plan.md G D.11.1 (alert-model rewrite).
  *
diff --git a/src/components/forms/ContactForm.astro b/src/components/forms/ContactForm.astro
index 438bdca..7d5c8fd 100644
--- a/src/components/forms/ContactForm.astro
+++ b/src/components/forms/ContactForm.astro
@@ -276,128 +276,3 @@ const turnstileSiteKey =
     });
   })();
 </script>
-
-<style>
-  .contact-form {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    max-width: 32rem;
-  }
-
-  .contact-form__status:empty { display: none; }
-  .contact-form__status--ok {
-    background: var(--color-surface-card);
-    border-left: 2px solid var(--bbl-primary);
-    padding: 1rem 1.25rem;
-    color: var(--color-text);
-    font-size: var(--text-small);
-    line-height: 1.5;
-  }
-  .contact-form__status--error {
-    background: var(--color-error-bg);
-    border-left: 2px solid var(--bbl-error);
-    padding: 1rem 1.25rem;
-    color: var(--color-error-text);
-    font-size: var(--text-small);
-    line-height: 1.5;
-  }
-
-  .contact-form__field {
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-  }
-  .contact-form__field label {
-    color: var(--color-text);
-    font-weight: var(--font-weight-medium);
-    font-size: var(--text-small);
-  }
-  .contact-form__field input,
-  .contact-form__field textarea {
-    font: inherit;
-    color: var(--color-text);
-    background: var(--color-bg);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-bbl-2);
-    padding: 0.625rem 0.75rem;
-    font-size: var(--text-body);
-    line-height: 1.4;
-  }
-  .contact-form__field input:focus-visible,
-  .contact-form__field textarea:focus-visible {
-    outline: 2px solid var(--color-focus-ring);
-    outline-offset: 1px;
-    border-color: var(--color-focus-ring);
-  }
-  .contact-form__field textarea {
-    resize: vertical;
-    min-height: 8rem;
-  }
-
-  /*
-    Field-level error state. Two triggers — `:user-invalid` (modern
-    pseudo-class that only fires AFTER the user has interacted, so
-    untouched required fields don't go red on first paint) and the
-    explicit `.contact-form__field--error` class set by the inline
-    script on server-error returns. Both produce the same red border
-    and red label.
-  */
-  .contact-form__field input:user-invalid,
-  .contact-form__field textarea:user-invalid,
-  .contact-form__field--error input,
-  .contact-form__field--error textarea {
-    border-color: var(--bbl-error);
-  }
-  .contact-form__field--error label {
-    color: var(--color-error-text);
-  }
-
-  /*
-    Honeypot: invisible to humans + AT, present in DOM for scrapers.
-    position:absolute + off-screen — NOT display:none, which some
-    bots check to skip. tabindex=-1 keeps keyboard nav clean.
-  */
-  .contact-form__honeypot {
-    position: absolute;
-    left: -10000px;
-    top: auto;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-  }
-
-  .contact-form__turnstile {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-  .contact-form__turnstile-attribution {
-    color: var(--color-text-muted);
-    font-size: var(--text-caption);
-    letter-spacing: var(--tracking-caption);
-    margin: 0;
-  }
-
-  .contact-form__submit {
-    display: inline-flex;
-    align-self: flex-start;
-    align-items: center;
-    min-height: 44px;
-    padding: 0.625rem 1.125rem;
-    font-size: var(--text-body);
-    font-weight: var(--font-weight-medium);
-    line-height: 1.2;
-    border: 1px solid transparent;
-    border-radius: var(--radius-bbl-2);
-    background: var(--color-cta-bg);
-    color: var(--color-cta-text);
-    cursor: pointer;
-    transition: background var(--duration-bbl-fast) var(--ease-bbl);
-  }
-  .contact-form__submit:hover { background: var(--bbl-primary-hover); }
-  .contact-form__submit:focus-visible {
-    outline: 2px solid var(--color-focus-ring);
-    outline-offset: 2px;
-  }
-</style>
diff --git a/src/pages/datenschutz.astro b/src/pages/datenschutz.astro
index dd321f3..fad96ec 100644
--- a/src/pages/datenschutz.astro
+++ b/src/pages/datenschutz.astro
@@ -382,6 +382,7 @@ const tocItems = [
   }
   .datenschutz__content {
     max-width: 68ch;
+    margin-inline: auto;
   }
 
   .datenschutz__stand {
@@ -526,7 +527,7 @@ const tocItems = [
       row-gap: 0.5rem;
     }
     .datenschutz__section {
-      margin-top: 2rem;
+      margin-top: 1.75rem;
     }
     .datenschutz__content h3 {
       font-size: 1.125rem;
diff --git a/src/pages/en/contact.astro b/src/pages/en/contact.astro
index a0b403b..52de52a 100644
--- a/src/pages/en/contact.astro
+++ b/src/pages/en/contact.astro
@@ -77,17 +77,17 @@ const t = getUiStrings('en');
     margin: 0 auto;
     padding: 6rem 3rem 4rem;
   }
-  .contact h1 { margin: 0 0 3rem; max-width: 68ch; }
+  .contact h1 { margin: 0 auto 3rem; max-width: 68ch; }
   .contact__content {
     max-width: 68ch;
-    margin: 0 0 3rem;
+    margin: 0 auto 3rem;
   }
   .contact__content p {
     max-width: 68ch;
-    margin: 0 0 1.5rem;
+    margin: 0 auto 1.5rem;
   }
   .contact__content h2 {
-    margin: 3rem 0 1rem;
+    margin: 3rem auto 1rem;
     font-size: var(--text-h3);
     color: var(--color-heading);
     max-width: 68ch;
@@ -100,7 +100,7 @@ const t = getUiStrings('en');
       font-size: 2.25rem;
       line-height: 1.1;
       letter-spacing: -0.015em;
-      margin-bottom: 1.5rem;
+      margin: 0 0 1.5rem;
       max-width: 14ch;
     }
     .contact__content,
diff --git a/src/pages/en/legal.astro b/src/pages/en/legal.astro
index 068f8e2..528dfde 100644
--- a/src/pages/en/legal.astro
+++ b/src/pages/en/legal.astro
@@ -149,6 +149,7 @@ const description =
   }
   .impressum__content {
     max-width: 68ch;
+    margin-inline: auto;
   }
 
   .impressum__content h1 {
@@ -160,20 +161,21 @@ const description =
     line-height: var(--leading-small);
     color: var(--color-text-muted);
     max-width: 48ch;
-    margin: -2rem 0 2.5rem;
-    padding-top: 0.75rem;
+    margin: 0 0 1.75rem;
+    padding: 0.75rem 0 0;
     border-top: 1px solid var(--color-border);
+    font-style: italic;
   }
 
   .impressum__lede {
     max-width: 68ch;
-    margin: 0 0 1.5rem;
+    margin: 0 auto 1.5rem;
   }
 
   .impressum__address {
     max-width: 68ch;
     line-height: 1.5;
-    margin: 0 0 2.5rem;
+    margin: 0 auto 2.5rem;
     font-style: normal;
   }
 
@@ -188,7 +190,7 @@ const description =
   }
   .impressum__p {
     max-width: 68ch;
-    margin: 0 0 0.75rem;
+    margin: 0 auto 0.75rem;
   }
   .impressum__p:last-child {
     margin-bottom: 0;
@@ -212,7 +214,6 @@ const description =
     }
     .impressum__courtesy {
       max-width: none;
-      margin: -0.25rem 0 1.75rem;
     }
     .impressum__lede,
     .impressum__address,
diff --git a/src/pages/en/privacy.astro b/src/pages/en/privacy.astro
index cbd3e0d..c938ad6 100644
--- a/src/pages/en/privacy.astro
+++ b/src/pages/en/privacy.astro
@@ -376,6 +376,7 @@ const tocItems = [
   }
   .datenschutz__content {
     max-width: 68ch;
+    margin-inline: auto;
   }
 
   .datenschutz__courtesy {
@@ -531,7 +532,7 @@ const tocItems = [
       row-gap: 0.5rem;
     }
     .datenschutz__section {
-      margin-top: 2rem;
+      margin-top: 1.75rem;
     }
     .datenschutz__content h3 {
       font-size: 1.125rem;
diff --git a/src/pages/en/products/[slug].astro b/src/pages/en/products/[slug].astro
index 1e7cb53..7a8f434 100644
--- a/src/pages/en/products/[slug].astro
+++ b/src/pages/en/products/[slug].astro
@@ -136,246 +136,3 @@ const renderedReleaseBodies: string[] = await Promise.all(
     </div>
   </article>
 </BaseLayout>
-
-<style>
-  /* Same scoped styles as src/pages/produkte/[slug].astro — duplicated
-     because Astro's <style> blocks are scoped per-component. */
-
-  .breadcrumb {
-    border-bottom: 1px solid var(--color-border);
-    background: var(--color-bg);
-  }
-  .breadcrumb__inner {
-    max-width: var(--max-width-site);
-    margin: 0 auto;
-    padding: 1.5rem 3rem;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    font-size: var(--text-caption);
-    letter-spacing: 0.06em;
-    color: var(--color-text-muted);
-  }
-  .breadcrumb a {
-    color: var(--color-text-muted);
-    font-weight: var(--font-weight-medium);
-    border-bottom: 1px solid transparent;
-  }
-  .breadcrumb a:hover {
-    color: var(--color-link-hover);
-    border-bottom-color: currentColor;
-  }
-  .breadcrumb__sep { color: var(--color-border); }
-  .breadcrumb__current {
-    color: var(--color-text);
-    font-weight: var(--font-weight-medium);
-  }
-
-  .product-detail {
-    background: var(--color-bg);
-  }
-  .product-detail__container {
-    margin: 0 auto;
-    padding: 6rem 3rem 6rem;
-    max-width: 70ch;
-  }
-  .product-detail__eyebrow {
-    font-size: var(--text-caption);
-    font-weight: var(--font-weight-medium);
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--bbl-primary);
-    margin: 0 0 1rem;
-  }
-  .product-detail__name {
-    margin: 0 0 1rem;
-  }
-  .product-detail__tagline {
-    font-size: var(--text-lead);
-    line-height: 1.5;
-    color: var(--color-text);
-    margin: 0 0 1.5rem;
-    font-style: italic;
-    max-width: 60ch;
-  }
-  .product-detail__description {
-    font-size: var(--text-body);
-    line-height: 1.65;
-    color: var(--color-text);
-    margin: 0 0 2.5rem;
-    max-width: 70ch;
-  }
-
-  /* Version chip pair — sits between H1 and tagline. AAA-safe: chip text
-     uses --color-text (Volcanic Stone) on --color-surface-card per the
-     design brief §4.8 ("Body text always uses Volcanic Stone, which
-     remains AAA on every surface, 10.09:1 or higher"). The 0.875rem chip
-     is small enough to require AAA 7:1; --color-text-muted (70% alpha)
-     would land below threshold here, so we keep --color-text. */
-  .version-chip-row {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 0.5rem;
-    margin: 0 0 1rem;
-  }
-  .version-chip {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.25rem 0.625rem;
-    border-radius: var(--radius-bbl-2);
-    background: var(--color-surface-card);
-    color: var(--color-text);
-    font-size: 0.875rem;
-    font-weight: var(--font-weight-medium);
-    letter-spacing: 0.01em;
-    font-family: var(--font-mono);
-  }
-  /* No --color-warning-soft / --color-warning-text in tokens.css, so we
-     fall back to italics + same neutral colors per Decision 3 of G D.9. */
-  .version-chip--pre-release {
-    font-style: italic;
-  }
-
-  .cta {
-    display: inline-block;
-    font-weight: var(--font-weight-medium);
-    text-decoration: none;
-    padding: 0.75rem 1.25rem;
-    border-radius: var(--radius-bbl-2, 0.375rem);
-    border: 1px solid currentColor;
-    transition:
-      background var(--duration-bbl-fast) var(--ease-bbl),
-      color var(--duration-bbl-fast) var(--ease-bbl);
-  }
-  .cta--primary {
-    background: var(--bbl-primary);
-    color: var(--color-cta-text);
-    border-color: var(--bbl-primary);
-  }
-  .cta--primary:hover {
-    background: var(--color-bbl-primary-hover);
-    border-color: var(--color-bbl-primary-hover);
-  }
-  .cta--ghost {
-    background: transparent;
-    color: var(--color-link);
-    border-color: var(--color-link);
-  }
-  .cta--ghost:hover {
-    background: var(--color-surface-card);
-    color: var(--color-link-hover);
-    border-color: var(--color-link-hover);
-  }
-
-  .product-detail__body {
-    margin-top: 3rem;
-    padding-top: 2rem;
-    border-top: 1px solid var(--color-border);
-    color: var(--color-text);
-    font-size: var(--text-body);
-    line-height: 1.65;
-  }
-
-  /* Release-history section. <h2> inherits its size/weight/color from
-     global.css's base h2 rule; this class only handles section spacing. */
-  .release-history {
-    margin-top: 4rem;
-    padding-top: 2rem;
-    border-top: 1px solid var(--color-border);
-  }
-  .product-detail__h2 {
-    color: var(--color-heading);
-    margin: 0 0 2rem;
-  }
-  .release {
-    margin: 0;
-  }
-  .release__header {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-    gap: 0.75rem;
-    margin: 0 0 1rem;
-  }
-  .release__version {
-    margin: 0;
-    color: var(--color-text);
-    font-family: var(--font-mono);
-    font-size: var(--text-h3);
-    font-weight: var(--font-weight-semibold);
-    letter-spacing: var(--tracking-h3);
-  }
-  .release__meta {
-    color: var(--color-text-muted);
-    font-size: var(--text-small);
-    font-style: italic;
-  }
-  .release__body {
-    color: var(--color-text);
-    font-size: var(--text-body);
-    line-height: 1.65;
-  }
-  .release__body :global(h1),
-  .release__body :global(h2),
-  .release__body :global(h3),
-  .release__body :global(h4) {
-    color: var(--color-heading);
-    margin-top: 1.5rem;
-    margin-bottom: 0.5rem;
-  }
-  .release__body :global(h3) { font-size: var(--text-h4); }
-  .release__body :global(h4) { font-size: var(--text-body); font-weight: var(--font-weight-semibold); }
-  .release__body :global(p) { margin: 0 0 0.75rem; }
-  .release__body :global(ul),
-  .release__body :global(ol) { margin: 0 0 0.75rem 1.25rem; padding: 0; }
-  .release__body :global(li) { margin: 0.25rem 0; }
-  .release__body :global(code) {
-    font-family: var(--font-mono);
-    font-size: 0.9em;
-    background: var(--color-surface-card);
-    padding: 0.05em 0.3em;
-    border-radius: var(--radius-bbl-1);
-  }
-  .release__body :global(pre) {
-    background: var(--color-surface-card);
-    padding: 0.75rem 1rem;
-    border-radius: var(--radius-bbl-2);
-    overflow-x: auto;
-    margin: 0 0 0.75rem;
-  }
-  .release__body :global(pre code) {
-    background: transparent;
-    padding: 0;
-  }
-  .release__body :global(a) {
-    color: var(--color-link);
-    text-decoration: underline;
-  }
-  .release__body :global(a:hover) {
-    color: var(--color-link-hover);
-  }
-  .release__divider {
-    border: 0;
-    border-top: 1px solid var(--color-border);
-    margin: 2.5rem 0;
-  }
-
-  @media (max-width: 767px) {
-    .breadcrumb__inner {
-      padding: 0.875rem 1.25rem;
-    }
-    .product-detail__container {
-      padding: 2.5rem 1.5rem 4rem;
-    }
-    .product-detail__name {
-      font-size: 2.25rem;
-      line-height: 1.1;
-      letter-spacing: -0.015em;
-    }
-    .product-detail__tagline,
-    .product-detail__description {
-      max-width: none;
-    }
-  }
-</style>
diff --git a/src/pages/en/products/index.astro b/src/pages/en/products/index.astro
index a1e8948..c57488d 100644
--- a/src/pages/en/products/index.astro
+++ b/src/pages/en/products/index.astro
@@ -80,192 +80,3 @@ const description =
     </svg>
   </article>
 </BaseLayout>
-
-<style>
-  /* Same scoped styles as src/pages/produkte/index.astro — duplicated
-     because Astro's <style> blocks are scoped per-component. Avoiding the
-     duplication via a shared CSS file is a future fix-up if a third
-     equivalent page ever lands. */
-
-  .breadcrumb {
-    border-bottom: 1px solid var(--color-border);
-    background: var(--color-bg);
-  }
-  .breadcrumb__inner {
-    max-width: var(--max-width-site);
-    margin: 0 auto;
-    padding: 1.5rem 3rem;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    font-size: var(--text-caption);
-    letter-spacing: 0.06em;
-    color: var(--color-text-muted);
-  }
-  .breadcrumb a {
-    color: var(--color-text-muted);
-    font-weight: var(--font-weight-medium);
-    border-bottom: 1px solid transparent;
-  }
-  .breadcrumb a:hover {
-    color: var(--color-link-hover);
-    border-bottom-color: currentColor;
-  }
-  .breadcrumb__sep { color: var(--color-border); }
-  .breadcrumb__current {
-    color: var(--color-text);
-    font-weight: var(--font-weight-medium);
-  }
-
-  .products-index {
-    position: relative;
-    background: var(--color-bg);
-    overflow: hidden;
-  }
-  .products-index__container {
-    position: relative;
-    z-index: 2;
-    max-width: var(--max-width-site);
-    margin: 0 auto;
-    padding: 8rem 3rem 6rem;
-  }
-
-  .products-index__empty {
-    max-width: 50ch;
-    margin: 0 auto;
-  }
-  .products-index__empty h1 {
-    margin: 0 0 3rem;
-  }
-  .products-index__lead {
-    font-size: var(--text-lead);
-    line-height: 1.6;
-    color: var(--color-text);
-    margin: 0 0 1.5rem;
-  }
-  .products-index__lead:last-of-type {
-    margin-bottom: 0;
-  }
-  .products-index__closing {
-    margin-top: 4rem;
-    padding-top: 1.75rem;
-    border-top: 1px solid var(--color-border);
-  }
-  .products-index__closing p {
-    font-size: var(--text-small);
-    color: var(--color-text-muted);
-    margin: 0;
-  }
-
-  .products-index__populated {
-    max-width: 70ch;
-  }
-  .products-index__populated h1 {
-    margin: 0 0 3rem;
-  }
-  .products-index__list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-  .products-index__item {
-    padding: 2.5rem 0;
-    border-bottom: 1px solid var(--color-border);
-  }
-  .products-index__item:first-of-type {
-    padding-top: 0;
-  }
-  .products-index__item:last-of-type {
-    border-bottom: 0;
-  }
-  .products-index__name {
-    margin: 0 0 0.75rem;
-    font-size: var(--text-h2);
-    line-height: 1.2;
-    font-weight: var(--font-weight-light);
-    letter-spacing: -0.01em;
-  }
-  .products-index__name a {
-    color: var(--color-heading);
-    text-decoration: none;
-    border-bottom: 1px solid transparent;
-  }
-  .products-index__name a:hover {
-    border-bottom-color: currentColor;
-  }
-  .products-index__tagline {
-    font-size: var(--text-lead);
-    line-height: 1.5;
-    color: var(--color-text);
-    margin: 0 0 1rem;
-    font-style: italic;
-  }
-  .products-index__description {
-    font-size: var(--text-body);
-    line-height: 1.65;
-    color: var(--color-text);
-    margin: 0 0 1.25rem;
-    max-width: 70ch;
-  }
-  .products-index__more {
-    color: var(--color-link);
-    font-weight: var(--font-weight-medium);
-    text-decoration: none;
-    border-bottom: 1px solid transparent;
-    display: inline-flex;
-    align-items: center;
-    min-height: 44px;
-    padding-block: 0.5rem;
-  }
-  .products-index__more:hover {
-    color: var(--color-link-hover);
-    border-bottom-color: currentColor;
-  }
-
-  .products-index__atmos {
-    position: absolute;
-    bottom: -120px;
-    right: -160px;
-    width: 900px;
-    height: 360px;
-    color: var(--bbl-primary);
-    opacity: 0.08;
-    pointer-events: none;
-    z-index: 1;
-    display: block;
-  }
-  :root[data-theme="dark"] .products-index__atmos { opacity: 0.14; }
-
-  @media (max-width: 767px) {
-    .breadcrumb__inner {
-      padding: 0.875rem 1.25rem;
-    }
-    .products-index__container {
-      padding: 2.5rem 1.5rem 4rem;
-    }
-    .products-index__empty h1,
-    .products-index__populated h1 {
-      font-size: 2.25rem;
-      line-height: 1.1;
-      letter-spacing: -0.015em;
-      margin-bottom: 1.5rem;
-    }
-    .products-index__empty,
-    .products-index__populated,
-    .products-index__lead,
-    .products-index__description {
-      max-width: none;
-    }
-    .products-index__closing {
-      margin-top: 2.5rem;
-    }
-    .products-index__atmos {
-      bottom: -60px;
-      right: -120px;
-      width: 420px;
-      height: 170px;
-      opacity: 0.06;
-    }
-    :root[data-theme="dark"] .products-index__atmos { opacity: 0.12; }
-  }
-</style>
diff --git a/src/pages/impressum.astro b/src/pages/impressum.astro
index 2d389f9..ecab903 100644
--- a/src/pages/impressum.astro
+++ b/src/pages/impressum.astro
@@ -143,6 +143,7 @@ const description =
   }
   .impressum__content {
     max-width: 68ch;
+    margin-inline: auto;
   }
 
   .impressum__content h1 {
@@ -151,13 +152,13 @@ const description =
 
   .impressum__lede {
     max-width: 68ch;
-    margin: 0 0 1.5rem;
+    margin: 0 auto 1.5rem;
   }
 
   .impressum__address {
     max-width: 68ch;
     line-height: 1.5;
-    margin: 0 0 2.5rem;
+    margin: 0 auto 2.5rem;
     font-style: normal;
   }
 
@@ -172,7 +173,7 @@ const description =
   }
   .impressum__p {
     max-width: 68ch;
-    margin: 0 0 0.75rem;
+    margin: 0 auto 0.75rem;
   }
   .impressum__p:last-child {
     margin-bottom: 0;
diff --git a/src/pages/kontakt.astro b/src/pages/kontakt.astro
index a27c59d..dfeb9df 100644
--- a/src/pages/kontakt.astro
+++ b/src/pages/kontakt.astro
@@ -80,17 +80,17 @@ const t = getUiStrings('de');
     margin: 0 auto;
     padding: 6rem 3rem 4rem;
   }
-  .contact h1 { margin: 0 0 3rem; max-width: 68ch; }
+  .contact h1 { margin: 0 auto 3rem; max-width: 68ch; }
   .contact__content {
     max-width: 68ch;
-    margin: 0 0 3rem;
+    margin: 0 auto 3rem;
   }
   .contact__content p {
     max-width: 68ch;
-    margin: 0 0 1.5rem;
+    margin: 0 auto 1.5rem;
   }
   .contact__content h2 {
-    margin: 3rem 0 1rem;
+    margin: 3rem auto 1rem;
     font-size: var(--text-h3);
     color: var(--color-heading);
     max-width: 68ch;
@@ -103,7 +103,7 @@ const t = getUiStrings('de');
       font-size: 2.25rem;
       line-height: 1.1;
       letter-spacing: -0.015em;
-      margin-bottom: 1.5rem;
+      margin: 0 0 1.5rem;
       max-width: 14ch;
     }
     .contact__content,
diff --git a/src/pages/produkte/[slug].astro b/src/pages/produkte/[slug].astro
index f315291..f7122a6 100644
--- a/src/pages/produkte/[slug].astro
+++ b/src/pages/produkte/[slug].astro
@@ -168,243 +168,3 @@ const renderedReleaseBodies: string[] = await Promise.all(
     </div>
   </article>
 </BaseLayout>
-
-<style>
-  .breadcrumb {
-    border-bottom: 1px solid var(--color-border);
-    background: var(--color-bg);
-  }
-  .breadcrumb__inner {
-    max-width: var(--max-width-site);
-    margin: 0 auto;
-    padding: 1.5rem 3rem;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    font-size: var(--text-caption);
-    letter-spacing: 0.06em;
-    color: var(--color-text-muted);
-  }
-  .breadcrumb a {
-    color: var(--color-text-muted);
-    font-weight: var(--font-weight-medium);
-    border-bottom: 1px solid transparent;
-  }
-  .breadcrumb a:hover {
-    color: var(--color-link-hover);
-    border-bottom-color: currentColor;
-  }
-  .breadcrumb__sep { color: var(--color-border); }
-  .breadcrumb__current {
-    color: var(--color-text);
-    font-weight: var(--font-weight-medium);
-  }
-
-  .product-detail {
-    background: var(--color-bg);
-  }
-  .product-detail__container {
-    margin: 0 auto;
-    padding: 6rem 3rem 6rem;
-    max-width: 70ch;
-  }
-  .product-detail__eyebrow {
-    font-size: var(--text-caption);
-    font-weight: var(--font-weight-medium);
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--bbl-primary);
-    margin: 0 0 1rem;
-  }
-  .product-detail__name {
-    margin: 0 0 1rem;
-  }
-  .product-detail__tagline {
-    font-size: var(--text-lead);
-    line-height: 1.5;
-    color: var(--color-text);
-    margin: 0 0 1.5rem;
-    font-style: italic;
-    max-width: 60ch;
-  }
-  .product-detail__description {
-    font-size: var(--text-body);
-    line-height: 1.65;
-    color: var(--color-text);
-    margin: 0 0 2.5rem;
-    max-width: 70ch;
-  }
-
-  /* Version chip pair — sits between H1 and tagline. AAA-safe: chip text
-     uses --color-text (Volcanic Stone) on --color-surface-card per the
-     design brief §4.8 ("Body text always uses Volcanic Stone, which
-     remains AAA on every surface, 10.09:1 or higher"). The 0.875rem chip
-     is small enough to require AAA 7:1; --color-text-muted (70% alpha)
-     would land below threshold here, so we keep --color-text. */
-  .version-chip-row {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 0.5rem;
-    margin: 0 0 1rem;
-  }
-  .version-chip {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.25rem 0.625rem;
-    border-radius: var(--radius-bbl-2);
-    background: var(--color-surface-card);
-    color: var(--color-text);
-    font-size: 0.875rem;
-    font-weight: var(--font-weight-medium);
-    letter-spacing: 0.01em;
-    font-family: var(--font-mono);
-  }
-  /* No --color-warning-soft / --color-warning-text in tokens.css, so we
-     fall back to italics + same neutral colors per Decision 3 of G D.9. */
-  .version-chip--pre-release {
-    font-style: italic;
-  }
-
-  .cta {
-    display: inline-block;
-    font-weight: var(--font-weight-medium);
-    text-decoration: none;
-    padding: 0.75rem 1.25rem;
-    border-radius: var(--radius-bbl-2, 0.375rem);
-    border: 1px solid currentColor;
-    transition:
-      background var(--duration-bbl-fast) var(--ease-bbl),
-      color var(--duration-bbl-fast) var(--ease-bbl);
-  }
-  .cta--primary {
-    background: var(--bbl-primary);
-    color: var(--color-cta-text);
-    border-color: var(--bbl-primary);
-  }
-  .cta--primary:hover {
-    background: var(--color-bbl-primary-hover);
-    border-color: var(--color-bbl-primary-hover);
-  }
-  .cta--ghost {
-    background: transparent;
-    color: var(--color-link);
-    border-color: var(--color-link);
-  }
-  .cta--ghost:hover {
-    background: var(--color-surface-card);
-    color: var(--color-link-hover);
-    border-color: var(--color-link-hover);
-  }
-
-  .product-detail__body {
-    margin-top: 3rem;
-    padding-top: 2rem;
-    border-top: 1px solid var(--color-border);
-    color: var(--color-text);
-    font-size: var(--text-body);
-    line-height: 1.65;
-  }
-
-  /* Release-history section. <h2> inherits its size/weight/color from
-     global.css's base h2 rule; this class only handles section spacing. */
-  .release-history {
-    margin-top: 4rem;
-    padding-top: 2rem;
-    border-top: 1px solid var(--color-border);
-  }
-  .product-detail__h2 {
-    color: var(--color-heading);
-    margin: 0 0 2rem;
-  }
-  .release {
-    margin: 0;
-  }
-  .release__header {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-    gap: 0.75rem;
-    margin: 0 0 1rem;
-  }
-  .release__version {
-    margin: 0;
-    color: var(--color-text);
-    font-family: var(--font-mono);
-    font-size: var(--text-h3);
-    font-weight: var(--font-weight-semibold);
-    letter-spacing: var(--tracking-h3);
-  }
-  .release__meta {
-    color: var(--color-text-muted);
-    font-size: var(--text-small);
-    font-style: italic;
-  }
-  .release__body {
-    color: var(--color-text);
-    font-size: var(--text-body);
-    line-height: 1.65;
-  }
-  .release__body :global(h1),
-  .release__body :global(h2),
-  .release__body :global(h3),
-  .release__body :global(h4) {
-    color: var(--color-heading);
-    margin-top: 1.5rem;
-    margin-bottom: 0.5rem;
-  }
-  .release__body :global(h3) { font-size: var(--text-h4); }
-  .release__body :global(h4) { font-size: var(--text-body); font-weight: var(--font-weight-semibold); }
-  .release__body :global(p) { margin: 0 0 0.75rem; }
-  .release__body :global(ul),
-  .release__body :global(ol) { margin: 0 0 0.75rem 1.25rem; padding: 0; }
-  .release__body :global(li) { margin: 0.25rem 0; }
-  .release__body :global(code) {
-    font-family: var(--font-mono);
-    font-size: 0.9em;
-    background: var(--color-surface-card);
-    padding: 0.05em 0.3em;
-    border-radius: var(--radius-bbl-1);
-  }
-  .release__body :global(pre) {
-    background: var(--color-surface-card);
-    padding: 0.75rem 1rem;
-    border-radius: var(--radius-bbl-2);
-    overflow-x: auto;
-    margin: 0 0 0.75rem;
-  }
-  .release__body :global(pre code) {
-    background: transparent;
-    padding: 0;
-  }
-  .release__body :global(a) {
-    color: var(--color-link);
-    text-decoration: underline;
-  }
-  .release__body :global(a:hover) {
-    color: var(--color-link-hover);
-  }
-  .release__divider {
-    border: 0;
-    border-top: 1px solid var(--color-border);
-    margin: 2.5rem 0;
-  }
-
-  @media (max-width: 767px) {
-    .breadcrumb__inner {
-      padding: 0.875rem 1.25rem;
-    }
-    .product-detail__container {
-      padding: 2.5rem 1.5rem 4rem;
-    }
-    .product-detail__name {
-      font-size: 2.25rem;
-      line-height: 1.1;
-      letter-spacing: -0.015em;
-    }
-    .product-detail__tagline,
-    .product-detail__description {
-      max-width: none;
-    }
-  }
-</style>
diff --git a/src/pages/produkte/index.astro b/src/pages/produkte/index.astro
index 19916ce..ba2f842 100644
--- a/src/pages/produkte/index.astro
+++ b/src/pages/produkte/index.astro
@@ -90,193 +90,3 @@ const description =
     </svg>
   </article>
 </BaseLayout>
-
-<style>
-  /* Breadcrumb — same pattern as impressum.astro */
-  .breadcrumb {
-    border-bottom: 1px solid var(--color-border);
-    background: var(--color-bg);
-  }
-  .breadcrumb__inner {
-    max-width: var(--max-width-site);
-    margin: 0 auto;
-    padding: 1.5rem 3rem;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    font-size: var(--text-caption);
-    letter-spacing: 0.06em;
-    color: var(--color-text-muted);
-  }
-  .breadcrumb a {
-    color: var(--color-text-muted);
-    font-weight: var(--font-weight-medium);
-    border-bottom: 1px solid transparent;
-  }
-  .breadcrumb a:hover {
-    color: var(--color-link-hover);
-    border-bottom-color: currentColor;
-  }
-  .breadcrumb__sep { color: var(--color-border); }
-  .breadcrumb__current {
-    color: var(--color-text);
-    font-weight: var(--font-weight-medium);
-  }
-
-  /* Page shell */
-  .products-index {
-    position: relative;
-    background: var(--color-bg);
-    overflow: hidden;
-  }
-  .products-index__container {
-    position: relative;
-    z-index: 2;
-    max-width: var(--max-width-site);
-    margin: 0 auto;
-    padding: 8rem 3rem 6rem;
-  }
-
-  /* Empty-state branch — single-column centered, narrow */
-  .products-index__empty {
-    max-width: 50ch;
-    margin: 0 auto;
-  }
-  .products-index__empty h1 {
-    margin: 0 0 3rem;
-  }
-  .products-index__lead {
-    font-size: var(--text-lead);
-    line-height: 1.6;
-    color: var(--color-text);
-    margin: 0 0 1.5rem;
-  }
-  .products-index__lead:last-of-type {
-    margin-bottom: 0;
-  }
-  .products-index__closing {
-    margin-top: 4rem;
-    padding-top: 1.75rem;
-    border-top: 1px solid var(--color-border);
-  }
-  .products-index__closing p {
-    font-size: var(--text-small);
-    color: var(--color-text-muted);
-    margin: 0;
-  }
-
-  /* Populated-state branch — single-column wider, stacked entries */
-  .products-index__populated {
-    max-width: 70ch;
-  }
-  .products-index__populated h1 {
-    margin: 0 0 3rem;
-  }
-  .products-index__list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-  .products-index__item {
-    padding: 2.5rem 0;
-    border-bottom: 1px solid var(--color-border);
-  }
-  .products-index__item:first-of-type {
-    padding-top: 0;
-  }
-  .products-index__item:last-of-type {
-    border-bottom: 0;
-  }
-  .products-index__name {
-    margin: 0 0 0.75rem;
-    font-size: var(--text-h2);
-    line-height: 1.2;
-    font-weight: var(--font-weight-light);
-    letter-spacing: -0.01em;
-  }
-  .products-index__name a {
-    color: var(--color-heading);
-    text-decoration: none;
-    border-bottom: 1px solid transparent;
-  }
-  .products-index__name a:hover {
-    border-bottom-color: currentColor;
-  }
-  .products-index__tagline {
-    font-size: var(--text-lead);
-    line-height: 1.5;
-    color: var(--color-text);
-    margin: 0 0 1rem;
-    font-style: italic;
-  }
-  .products-index__description {
-    font-size: var(--text-body);
-    line-height: 1.65;
-    color: var(--color-text);
-    margin: 0 0 1.25rem;
-    max-width: 70ch;
-  }
-  .products-index__more {
-    color: var(--color-link);
-    font-weight: var(--font-weight-medium);
-    text-decoration: none;
-    border-bottom: 1px solid transparent;
-    display: inline-flex;
-    align-items: center;
-    min-height: 44px;
-    padding-block: 0.5rem;
-  }
-  .products-index__more:hover {
-    color: var(--color-link-hover);
-    border-bottom-color: currentColor;
-  }
-
-  /* Atmospheric arc — bottom-right, low opacity */
-  .products-index__atmos {
-    position: absolute;
-    bottom: -120px;
-    right: -160px;
-    width: 900px;
-    height: 360px;
-    color: var(--bbl-primary);
-    opacity: 0.08;
-    pointer-events: none;
-    z-index: 1;
-    display: block;
-  }
-  :root[data-theme="dark"] .products-index__atmos { opacity: 0.14; }
-
-  /* Mobile */
-  @media (max-width: 767px) {
-    .breadcrumb__inner {
-      padding: 0.875rem 1.25rem;
-    }
-    .products-index__container {
-      padding: 2.5rem 1.5rem 4rem;
-    }
-    .products-index__empty h1,
-    .products-index__populated h1 {
-      font-size: 2.25rem;
-      line-height: 1.1;
-      letter-spacing: -0.015em;
-      margin-bottom: 1.5rem;
-    }
-    .products-index__empty,
-    .products-index__populated,
-    .products-index__lead,
-    .products-index__description {
-      max-width: none;
-    }
-    .products-index__closing {
-      margin-top: 2.5rem;
-    }
-    .products-index__atmos {
-      bottom: -60px;
-      right: -120px;
-      width: 420px;
-      height: 170px;
-      opacity: 0.06;
-    }
-    :root[data-theme="dark"] .products-index__atmos { opacity: 0.12; }
-  }
-</style>
diff --git a/src/styles/forms.css b/src/styles/forms.css
new file mode 100644
index 0000000..906ee92
--- /dev/null
+++ b/src/styles/forms.css
@@ -0,0 +1,146 @@
+/* =============================================================
+   Forms — shared CSS module.
+
+   Consumed by:
+   - src/components/forms/ContactForm.astro
+
+   Per docs/CSS_CONVENTIONS.md §2, future forms get their own BEM
+   namespace (e.g. .subscribe-form__field, .feedback-form__submit)
+   and add their rule blocks below the .contact-form__* block in
+   this file. Visual treatment carries over by re-implementing the
+   look under the new namespace, not by class-attribute aliasing.
+
+   Pre-extraction this CSS lived in ContactForm.astro's scoped
+   <style> block. Moved out during Phase J of Pass 3 (2026-05-12).
+   Closes backlog #9.
+   ============================================================= */
+
+/* ─── .contact-form (Phase B.1's only form). */
+/* `margin-inline: auto` carries over from I.1 Option B (Lars
+   decision 2026-05-12) — the page-level centring fix that
+   Phase I applied to ContactForm.astro's scoped block also
+   moves into this extracted module. Do NOT drop this line during
+   extraction; the J.3 plan's verification grep will catch a miss. */
+.contact-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  max-width: 32rem;
+  margin-inline: auto;
+}
+
+.contact-form__status:empty { display: none; }
+.contact-form__status--ok {
+  background: var(--color-surface-card);
+  border-left: 2px solid var(--bbl-primary);
+  padding: 1rem 1.25rem;
+  color: var(--color-text);
+  font-size: var(--text-small);
+  line-height: 1.5;
+}
+.contact-form__status--error {
+  background: var(--color-error-bg);
+  border-left: 2px solid var(--bbl-error);
+  padding: 1rem 1.25rem;
+  color: var(--color-error-text);
+  font-size: var(--text-small);
+  line-height: 1.5;
+}
+
+.contact-form__field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.contact-form__field label {
+  color: var(--color-text);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--text-small);
+}
+.contact-form__field input,
+.contact-form__field textarea {
+  font: inherit;
+  color: var(--color-text);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-bbl-2);
+  padding: 0.625rem 0.75rem;
+  font-size: var(--text-body);
+  line-height: 1.4;
+}
+.contact-form__field input:focus-visible,
+.contact-form__field textarea:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 1px;
+  border-color: var(--color-focus-ring);
+}
+.contact-form__field textarea {
+  resize: vertical;
+  min-height: 8rem;
+}
+
+/*
+   Field-level error state. Two triggers — `:user-invalid` (modern
+   pseudo-class that only fires AFTER the user has interacted, so
+   untouched required fields don't go red on first paint) and the
+   explicit `.contact-form__field--error` class set by the inline
+   script on server-error returns. Both produce the same red border
+   and red label.
+*/
+.contact-form__field input:user-invalid,
+.contact-form__field textarea:user-invalid,
+.contact-form__field--error input,
+.contact-form__field--error textarea {
+  border-color: var(--bbl-error);
+}
+.contact-form__field--error label {
+  color: var(--color-error-text);
+}
+
+/*
+   Honeypot: invisible to humans + AT, present in DOM for scrapers.
+   position:absolute + off-screen — NOT display:none, which some
+   bots check to skip. tabindex=-1 keeps keyboard nav clean.
+*/
+.contact-form__honeypot {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.contact-form__turnstile {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.contact-form__turnstile-attribution {
+  color: var(--color-text-muted);
+  font-size: var(--text-caption);
+  letter-spacing: var(--tracking-caption);
+  margin: 0;
+}
+
+.contact-form__submit {
+  display: inline-flex;
+  align-self: flex-start;
+  align-items: center;
+  min-height: 44px;
+  padding: 0.625rem 1.125rem;
+  font-size: var(--text-body);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.2;
+  border: 1px solid transparent;
+  border-radius: var(--radius-bbl-2);
+  background: var(--color-cta-bg);
+  color: var(--color-cta-text);
+  cursor: pointer;
+  transition: background var(--duration-bbl-fast) var(--ease-bbl);
+}
+.contact-form__submit:hover { background: var(--bbl-primary-hover); }
+.contact-form__submit:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
diff --git a/src/styles/global.css b/src/styles/global.css
index e0b6f8e..c77fa48 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -7,6 +7,8 @@
 
 @import "tailwindcss";
 @import "./tokens.css";
+@import "./forms.css";
+@import "./products.css";
 
 
 /* ─── Self-hosted Inter (four static weights) ─────────────────── */
diff --git a/src/styles/products.css b/src/styles/products.css
new file mode 100644
index 0000000..c51e2d2
--- /dev/null
+++ b/src/styles/products.css
@@ -0,0 +1,421 @@
+/* =============================================================
+   Products subtree — shared scoped CSS.
+
+   Consumed by:
+   - src/pages/produkte/index.astro
+   - src/pages/en/products/index.astro
+   - src/pages/produkte/[slug].astro
+   - src/pages/en/products/[slug].astro
+
+   Extracted during Phase J of Pass 3 (2026-05-12) from byte-
+   identical scoped style blocks in each of the above. Rules below
+   were previously duplicated 2x (index DE/EN) or 2x (slug DE/EN);
+   the breadcrumb sub-block was duplicated 4x. Per
+   docs/CSS_CONVENTIONS.md §3, the extraction is full-block:
+   layout-affecting rules are included.
+   ============================================================= */
+
+/* ─── Breadcrumb — also used by other (non-products) pages today,
+   but those pages keep their own duplicate copy until a separate
+   future extraction sweeps the whole site (out of Phase J scope). */
+.breadcrumb {
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-bg);
+}
+.breadcrumb__inner {
+  max-width: var(--max-width-site);
+  margin: 0 auto;
+  padding: 1.5rem 3rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: var(--text-caption);
+  letter-spacing: 0.06em;
+  color: var(--color-text-muted);
+}
+.breadcrumb a {
+  color: var(--color-text-muted);
+  font-weight: var(--font-weight-medium);
+  border-bottom: 1px solid transparent;
+}
+.breadcrumb a:hover {
+  color: var(--color-link-hover);
+  border-bottom-color: currentColor;
+}
+.breadcrumb__sep { color: var(--color-border); }
+.breadcrumb__current {
+  color: var(--color-text);
+  font-weight: var(--font-weight-medium);
+}
+
+/* ─── Products index — page shell. */
+.products-index {
+  position: relative;
+  background: var(--color-bg);
+  overflow: hidden;
+}
+.products-index__container {
+  position: relative;
+  z-index: 2;
+  max-width: var(--max-width-site);
+  margin: 0 auto;
+  padding: 8rem 3rem 6rem;
+}
+
+/* Empty-state branch — single-column centered, narrow. */
+.products-index__empty {
+  max-width: 50ch;
+  margin: 0 auto;
+}
+.products-index__empty h1 {
+  margin: 0 0 3rem;
+}
+.products-index__lead {
+  font-size: var(--text-lead);
+  line-height: 1.6;
+  color: var(--color-text);
+  margin: 0 0 1.5rem;
+}
+.products-index__lead:last-of-type {
+  margin-bottom: 0;
+}
+.products-index__closing {
+  margin-top: 4rem;
+  padding-top: 1.75rem;
+  border-top: 1px solid var(--color-border);
+}
+.products-index__closing p {
+  font-size: var(--text-small);
+  color: var(--color-text-muted);
+  margin: 0;
+}
+
+/* Populated-state branch — single-column wider, stacked entries. */
+.products-index__populated {
+  max-width: 70ch;
+}
+.products-index__populated h1 {
+  margin: 0 0 3rem;
+}
+.products-index__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.products-index__item {
+  padding: 2.5rem 0;
+  border-bottom: 1px solid var(--color-border);
+}
+.products-index__item:first-of-type {
+  padding-top: 0;
+}
+.products-index__item:last-of-type {
+  border-bottom: 0;
+}
+.products-index__name {
+  margin: 0 0 0.75rem;
+  font-size: var(--text-h2);
+  line-height: 1.2;
+  font-weight: var(--font-weight-light);
+  letter-spacing: -0.01em;
+}
+.products-index__name a {
+  color: var(--color-heading);
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+}
+.products-index__name a:hover {
+  border-bottom-color: currentColor;
+}
+.products-index__tagline {
+  font-size: var(--text-lead);
+  line-height: 1.5;
+  color: var(--color-text);
+  margin: 0 0 1rem;
+  font-style: italic;
+}
+.products-index__description {
+  font-size: var(--text-body);
+  line-height: 1.65;
+  color: var(--color-text);
+  margin: 0 0 1.25rem;
+  max-width: 70ch;
+}
+.products-index__more {
+  color: var(--color-link);
+  font-weight: var(--font-weight-medium);
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding-block: 0.5rem;
+}
+.products-index__more:hover {
+  color: var(--color-link-hover);
+  border-bottom-color: currentColor;
+}
+
+/* Atmospheric arc — bottom-right, low opacity. */
+.products-index__atmos {
+  position: absolute;
+  bottom: -120px;
+  right: -160px;
+  width: 900px;
+  height: 360px;
+  color: var(--bbl-primary);
+  opacity: 0.08;
+  pointer-events: none;
+  z-index: 1;
+  display: block;
+}
+:root[data-theme="dark"] .products-index__atmos { opacity: 0.14; }
+
+/* ─── Product detail (slug page). */
+.product-detail {
+  background: var(--color-bg);
+}
+.product-detail__container {
+  margin: 0 auto;
+  padding: 6rem 3rem 6rem;
+  max-width: 70ch;
+}
+.product-detail__eyebrow {
+  font-size: var(--text-caption);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--bbl-primary);
+  margin: 0 0 1rem;
+}
+.product-detail__name {
+  margin: 0 0 1rem;
+}
+.product-detail__tagline {
+  font-size: var(--text-lead);
+  line-height: 1.5;
+  color: var(--color-text);
+  margin: 0 0 1.5rem;
+  font-style: italic;
+  max-width: 60ch;
+}
+.product-detail__description {
+  font-size: var(--text-body);
+  line-height: 1.65;
+  color: var(--color-text);
+  margin: 0 0 2.5rem;
+  max-width: 70ch;
+}
+
+/* Version chip pair — sits between H1 and tagline. AAA-safe: chip
+   text uses --color-text (Volcanic Stone) on --color-surface-card
+   per the design brief §4.8 ("Body text always uses Volcanic
+   Stone, which remains AAA on every surface, 10.09:1 or higher").
+   The 0.875rem chip is small enough to require AAA 7:1;
+   --color-text-muted (70% alpha) would land below threshold here,
+   so we keep --color-text. */
+.version-chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0 0 1rem;
+}
+.version-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.625rem;
+  border-radius: var(--radius-bbl-2);
+  background: var(--color-surface-card);
+  color: var(--color-text);
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-medium);
+  letter-spacing: 0.01em;
+  font-family: var(--font-mono);
+}
+/* No --color-warning-soft / --color-warning-text in tokens.css, so
+   we fall back to italics + same neutral colors per Decision 3 of
+   G D.9. */
+.version-chip--pre-release {
+  font-style: italic;
+}
+
+.cta {
+  display: inline-block;
+  font-weight: var(--font-weight-medium);
+  text-decoration: none;
+  padding: 0.75rem 1.25rem;
+  border-radius: var(--radius-bbl-2, 0.375rem);
+  border: 1px solid currentColor;
+  transition:
+    background var(--duration-bbl-fast) var(--ease-bbl),
+    color var(--duration-bbl-fast) var(--ease-bbl);
+}
+.cta--primary {
+  background: var(--bbl-primary);
+  color: var(--color-cta-text);
+  border-color: var(--bbl-primary);
+}
+.cta--primary:hover {
+  background: var(--color-bbl-primary-hover);
+  border-color: var(--color-bbl-primary-hover);
+}
+.cta--ghost {
+  background: transparent;
+  color: var(--color-link);
+  border-color: var(--color-link);
+}
+.cta--ghost:hover {
+  background: var(--color-surface-card);
+  color: var(--color-link-hover);
+  border-color: var(--color-link-hover);
+}
+
+.product-detail__body {
+  margin-top: 3rem;
+  padding-top: 2rem;
+  border-top: 1px solid var(--color-border);
+  color: var(--color-text);
+  font-size: var(--text-body);
+  line-height: 1.65;
+}
+
+/* Release-history section. <h2> inherits its size/weight/color
+   from global.css's base h2 rule; this class only handles section
+   spacing. */
+.release-history {
+  margin-top: 4rem;
+  padding-top: 2rem;
+  border-top: 1px solid var(--color-border);
+}
+.product-detail__h2 {
+  color: var(--color-heading);
+  margin: 0 0 2rem;
+}
+.release {
+  margin: 0;
+}
+.release__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.75rem;
+  margin: 0 0 1rem;
+}
+.release__version {
+  margin: 0;
+  color: var(--color-text);
+  font-family: var(--font-mono);
+  font-size: var(--text-h3);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--tracking-h3);
+}
+.release__meta {
+  color: var(--color-text-muted);
+  font-size: var(--text-small);
+  font-style: italic;
+}
+.release__body {
+  color: var(--color-text);
+  font-size: var(--text-body);
+  line-height: 1.65;
+}
+/* NOTE: the per-page scoped rules used `:global(h1)` etc. inside
+   `.release__body` because Astro scoping otherwise prevents the
+   global selector. In a non-scoped CSS module these selectors
+   target the raw element directly; the `:global()` pseudo is
+   removed. */
+.release__body h1,
+.release__body h2,
+.release__body h3,
+.release__body h4 {
+  color: var(--color-heading);
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+.release__body h3 { font-size: var(--text-h4); }
+.release__body h4 { font-size: var(--text-body); font-weight: var(--font-weight-semibold); }
+.release__body p { margin: 0 0 0.75rem; }
+.release__body ul,
+.release__body ol { margin: 0 0 0.75rem 1.25rem; padding: 0; }
+.release__body li { margin: 0.25rem 0; }
+.release__body code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background: var(--color-surface-card);
+  padding: 0.05em 0.3em;
+  border-radius: var(--radius-bbl-1);
+}
+.release__body pre {
+  background: var(--color-surface-card);
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius-bbl-2);
+  overflow-x: auto;
+  margin: 0 0 0.75rem;
+}
+.release__body pre code {
+  background: transparent;
+  padding: 0;
+}
+.release__body a {
+  color: var(--color-link);
+  text-decoration: underline;
+}
+.release__body a:hover {
+  color: var(--color-link-hover);
+}
+.release__divider {
+  border: 0;
+  border-top: 1px solid var(--color-border);
+  margin: 2.5rem 0;
+}
+
+/* ─── Mobile (≤767px) — index + detail clauses combined. */
+@media (max-width: 767px) {
+  .breadcrumb__inner {
+    padding: 0.875rem 1.25rem;
+  }
+
+  /* Index. */
+  .products-index__container {
+    padding: 2.5rem 1.5rem 4rem;
+  }
+  .products-index__empty h1,
+  .products-index__populated h1 {
+    font-size: 2.25rem;
+    line-height: 1.1;
+    letter-spacing: -0.015em;
+    margin-bottom: 1.5rem;
+  }
+  .products-index__empty,
+  .products-index__populated,
+  .products-index__lead,
+  .products-index__description {
+    max-width: none;
+  }
+  .products-index__closing {
+    margin-top: 2.5rem;
+  }
+  .products-index__atmos {
+    bottom: -60px;
+    right: -120px;
+    width: 420px;
+    height: 170px;
+    opacity: 0.06;
+  }
+  :root[data-theme="dark"] .products-index__atmos { opacity: 0.12; }
+
+  /* Detail. */
+  .product-detail__container {
+    padding: 2.5rem 1.5rem 4rem;
+  }
+  .product-detail__name {
+    font-size: 2.25rem;
+    line-height: 1.1;
+    letter-spacing: -0.015em;
+  }
+  .product-detail__tagline,
+  .product-detail__description {
+    max-width: none;
+  }
+}