diff --git a/app/[locale]/globals.css b/app/[locale]/globals.css
index 1847506..2f8b948 100644
--- a/app/[locale]/globals.css
+++ b/app/[locale]/globals.css
@@ -905,9 +905,16 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active {
 }
 
 .macro-composite {
-  border-top: 1px solid var(--line);
+  /* Aligned to the indicator-card grid above (.macro-grid uses 14px gutters
+     and metric cards have 12px radius / 1px border / surface bg). The
+     composite reads as a "summary card" sitting at the same indent as the
+     metric cards rather than a full-bleed banner. */
+  margin: 14px;
   padding: 20px 22px 22px;
-  background: var(--bg-sunk);
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  box-shadow: var(--shadow-1);
 }
 
 .macro-composite-head {
@@ -956,10 +963,13 @@ html[data-theme="dark"] .macro-threshold-chip.neutral.active {
 .macro-composite-track {
   position: relative;
   height: 18px;
-  overflow: hidden;
+  /* No `overflow: hidden` — the 24px needle is taller than the track and
+     gets clipped top/bottom otherwise. The gradient is naturally rounded
+     by border-radius, so clipping isn't needed. */
   border-radius: 999px;
   border: 1px solid color-mix(in oklab, var(--line) 78%, transparent);
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
+  margin: 6px 0;
 }
 
 .macro-composite-track::after {
@@ -2751,8 +2761,10 @@ html[data-theme="dark"] .ai-reasoning-card {
   .connect-btn.lg { padding: 8px 10px; font-size: 12px; }
 }
 
-/* Global safety: no page-level horizontal scroll */
-html, body { max-width: 100%; overflow-x: hidden; }
+/* Global safety: no page-level horizontal scroll.
+   Use `overflow-x: clip` (not `hidden`) — `hidden` turns body into a scroll
+   container, which silently breaks `position: sticky` on the navbar. */
+html, body { max-width: 100%; overflow-x: clip; }
 
 /* Misc utilities */
 .stack { display: flex; flex-direction: column; }