Restore landing lower-section layouts and browser regression checks

Author: KSemenenko

docs/Features/BenchmarkComparisons.md

@@ -1366,3 +1366,19 @@ Node-to-BDN consumer, validates all 36 case identities and reports, and performs
 its mutation rejection oracle. Root joins the source-reviewed proposal and runs
 that gate through the unified Aspire entry; neither source review nor a build
 establishes consumer execution or comparative performance qualification.
+
+## Landing lower-section layout regression (2026-10-06)
+
+REQ-BC-LAYOUT-001 / AC-BC-LAYOUT-001: qualification status retains two desktop
+columns and one mobile column; methodology retains three desktop columns and
+stacked mobile steps. The reproduce command stays inset within its padded
+terminal, and footer links align with the main content without horizontal page
+overflow at the existing responsive viewport widths. TASK-BC-LAYOUT-001 restores
+only styles used by the current semantic landing. ADR-040 remains the owning
+design decision; no new boundary, dependency or public contract is introduced.
+
+Automated mapping: `SiteBrowserVisualAssertions.AssertLowerSectionsAsync` checks
+real rendered bounding boxes in both the measured responsive browser case and
+`SiteContentBrowserTests` desktop/mobile case through the Aspire `site` entry.
+A missing lower-section stylesheet must fail these assertions. Native build,
+site qualification and actual Website/Pages delivery evidence remain required.

site/Features/BenchmarkComparisons/styles.css

@@ -221,7 +221,47 @@ tr:last-child td { border-bottom: 0; }
 .load-error { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: 12px; background: var(--kl-bad-bg); color: var(--kl-bad-ink); font-weight: 600; }
 .retry-button { margin-top: .8rem; }
 
-/* Evidence receipt: perforated provenance slip */
+/* Claims ledger */
+.ledger-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1.4rem; }
+.ledger-col { padding: 1.5rem; border-radius: var(--kl-radius-lg); }
+.ledger-col h3 { margin: 0 0 1rem; font-size: 1.3rem; }
+.ledger-col ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
+.ledger-col li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .6rem; padding: .7rem 0; border-top: 1px solid var(--kl-line); font-size: .95rem; }
+.ledger-col li::before { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; font: 700 .72rem/1 var(--kl-font-mono); }
+.ledger-col--open { border: 1px solid var(--kl-stroke); background: var(--kl-sheen), var(--kl-surface); box-shadow: var(--kl-shadow); }
+.ledger-col--open li::before { content: "✓"; background: var(--kl-graphite); color: #fff; }
+.ledger-col--held { border: 1px dashed var(--kl-line-strong); background: transparent; }
+.ledger-col--held li { color: var(--kl-ink-2); }
+.ledger-col--held li::before { content: "–"; border: 1px solid var(--kl-line-strong); color: var(--kl-muted); }
+
+/* Method rail */
+.method-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; }
+.method-rail li { position: relative; display: grid; align-content: start; gap: .3rem; }
+.method-rail li::after { content: ""; position: absolute; top: 1.15rem; left: 3rem; right: -1.6rem; height: 1px; background: var(--kl-line-strong); }
+.method-rail li:last-child::after { display: none; }
+.method-rail h3 { margin-top: .9rem; }
+
+/* Reproduce terminal */
+.reproduce-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 2rem; padding: clamp(1.6rem, 4.5vw, 3.2rem); border-radius: var(--kl-radius-xl); }
+.reproduce .eyebrow, .reproduce p { color: var(--kl-on-graphite-muted); }
+.reproduce h2 { margin-bottom: 1rem; color: #fff; }
+.reproduce p { margin: 0; }
+.command-box { min-width: 0; display: flex; align-items: center; gap: .7rem; padding: .6rem .6rem .6rem 1.1rem; border: 1px solid var(--kl-graphite-line); border-radius: 16px; background: rgba(0, 0, 0, .35); }
+.prompt { color: var(--kl-lilac); font: 700 .9rem var(--kl-font-mono); }
+.command-box code { flex: 1; min-width: 0; overflow-x: auto; color: var(--kl-on-graphite); font: .82rem/1.5 var(--kl-font-mono); white-space: nowrap; scrollbar-width: none; }
+.command-box button { flex: none; min-height: 38px; padding: 0 1rem; border: 0; border-radius: 10px; background: var(--kl-iris); color: var(--kl-graphite); font-size: .82rem; font-weight: 700; cursor: pointer; }
+
+/* Footer */
+.site-footer { margin-top: var(--section-gap); padding: 0 max(var(--gutter), calc((100% - var(--page)) / 2)) 2rem; overflow: hidden; }
+.footer-mark { margin: 0 0 -.06em; font: 800 clamp(4.5rem, 21vw, 18rem)/.8 var(--kl-font-display); letter-spacing: -.07em; color: transparent; background: linear-gradient(180deg, rgba(17, 18, 20, .14), rgba(17, 18, 20, 0)); -webkit-background-clip: text; background-clip: text; user-select: none; }
+.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.4rem; border-top: 1px solid var(--kl-line-strong); }
+.footer-links { display: flex; gap: 1.4rem; font-size: .9rem; }
+.footer-links a { color: var(--kl-ink-2); text-decoration: none; }
+.footer-links a:hover { color: var(--kl-ink); }
+.made-by { margin: 0; color: var(--kl-muted); font-size: .9rem; }
+.made-by a { color: var(--kl-ink); font-weight: 650; }
+
+/* Responsive */
 @media (max-width: 1080px) {
   .hero { grid-template-columns: minmax(0, 1fr); }
   .hero-lede { grid-column: 1; }

tests/KeyLoad.SiteTests/Features/BenchmarkComparisons/Assertions/SiteBrowserVisualAssertions.cs

@@ -13,6 +13,7 @@ public static async Task AssertResponsive(SiteBrowserChrome chrome, Cancellation
                 [SiteBrowserTokens.DeviceScaleFactorField] = SiteBrowserTokens.One,
                 [SiteBrowserTokens.MobileField] = false,
             }, cancellationToken);
+            await AssertLowerSectionsAsync(chrome.Cdp, cancellationToken);
             var overflow = await chrome.Cdp.EvaluateAsync(SiteBrowserUiTokens.OverflowScript, false, cancellationToken);
             await Assert.That(overflow.GetBoolean()).IsFalse();
             if (width <= SiteBrowserUiTokens.ViewportMobileWidth)
@@ -23,6 +24,28 @@ public static async Task AssertResponsive(SiteBrowserChrome chrome, Cancellation
         }
     }
 
+    public static async Task AssertLowerSectionsAsync(SiteBrowserCdpClient cdp, CancellationToken token)
+    {
+        const string script = """
+            (() => {
+              const box = selector => document.querySelector(selector).getBoundingClientRect();
+              const desktop = innerWidth > 760;
+              const steps = [...document.querySelectorAll('.method-rail li')].map(x => x.getBoundingClientRect());
+              const claims = [...document.querySelectorAll('.ledger-col')].map(x => x.getBoundingClientRect());
+              const terminal = box('.reproduce-inner'), command = box('.command-box');
+              const footer = box('.site-footer'), links = box('.footer-links');
+              return steps.length === 3 && claims.length === 2 &&
+                (desktop ? steps.every(x => Math.abs(x.top - steps[0].top) < 1) && claims[1].left >= claims[0].right
+                  : steps[1].top >= steps[0].bottom && claims[1].top >= claims[0].bottom) &&
+                command.left > terminal.left && command.right < terminal.right &&
+                command.top > terminal.top && command.bottom < terminal.bottom &&
+                links.left >= box('.method-rail').left && footer.top >= terminal.bottom &&
+                document.documentElement.scrollWidth <= innerWidth;
+            })()
+            """;
+        await Assert.That((await cdp.EvaluateAsync(script, false, token)).GetBoolean()).IsTrue();
+    }
+
     public static async Task AssertSceneLifecycle(SiteBrowserChrome chrome, string baseUrl,
         CancellationToken cancellationToken)
     {

tests/KeyLoad.SiteTests/Features/BenchmarkComparisons/Cases/SiteContentBrowserTests.cs

@@ -18,6 +18,7 @@ public async Task AC_BC_WEB_003_RealChromeShowsDesktopMobileSceneAndAccurateEmpt
         var cdp = browser.Chrome.Cdp;
         await Assert.That(await cdp.WaitForExpressionAsync(SiteContentBrowserTokens.ContentReadyPredicate, token)).IsTrue();
         await SiteBrowserVisualAssertions.AssertSceneIsLazyBeforeHeroNavigation(cdp, token);
+        await SiteBrowserVisualAssertions.AssertLowerSectionsAsync(cdp, token);
         var desktop = await ReadContentStateAsync(browser.Chrome.Cdp, token);
         await AssertContentStateAsync(desktop, SiteContentTokens.DesktopPosterSuffix);
         var desktopRequests = await AssertLocalRequestsAsync(browser.Chrome.Cdp, browser.BaseUrl, token);
@@ -38,6 +39,7 @@ await Assert.That(sceneRequests.Any(url => url.EndsWith(SiteAssetTokens.SceneMod
             [SiteBrowserTokens.MobileField] = true,
         }, token);
         await browser.Chrome.NavigateAsync(browser.BaseUrl + SiteAssetTokens.IndexHtml + SiteBrowserTokens.PageHideFragment, token);
+        await SiteBrowserVisualAssertions.AssertLowerSectionsAsync(cdp, token);
         var mobile = await ReadContentStateAsync(browser.Chrome.Cdp, token);
         await AssertContentStateAsync(mobile, SiteContentTokens.MobilePosterSuffix);
         await Assert.That(mobile.GetProperty(SiteContentBrowserTokens.Mobile).GetBoolean()).IsTrue();