diff --git a/static/icon.svg b/static/icon.svg
index 349bcc7..bb5ae46 100644
--- a/static/icon.svg
+++ b/static/icon.svg
@@ -2,8 +2,8 @@
   <!-- Matches the in-app brand mark: a graded slab — case, label, and the
        card sealed inside. Kept in step with .brand-mark in style.css. -->
   <rect width="128" height="128" rx="26" fill="#0e1522"/>
-  <rect x="38.5" y="20.5" width="51" height="87" rx="9" fill="none"
+  <rect x="41.5" y="18.5" width="45" height="91" rx="7.5" fill="none"
         stroke="#4d9bff" stroke-width="5"/>
-  <rect x="48" y="31" width="32" height="9" rx="3.5" fill="#3ddcc0"/>
-  <rect x="48" y="49" width="32" height="45" rx="4.5" fill="#4d9bff" opacity="0.34"/>
+  <rect x="50" y="30" width="28" height="8" rx="3" fill="#3ddcc0"/>
+  <rect x="50" y="49" width="28" height="46" rx="3.5" fill="#4d9bff" opacity="0.48"/>
 </svg>
diff --git a/static/index.html b/static/index.html
index c5c3a2c..aa253d9 100644
--- a/static/index.html
+++ b/static/index.html
@@ -22,6 +22,10 @@
 </head>
 <body>
 
+<!-- Header and banner stick as one unit, so the banner sits under the header
+     by stacking rather than by a hardcoded top offset — that offset silently
+     went stale (and overlapped) the moment the header's height changed. -->
+<div class="chrome">
 <header class="topbar">
   <div class="topbar-inner">
     <div class="brand">
@@ -29,10 +33,14 @@
            This is the literal object the whole app estimates, so it says
            what this is without belonging to any one card game — which a
            checkmark (or any single game's iconography) doesn't. -->
-      <svg class="brand-mark" viewBox="0 0 24 30" fill="none" aria-hidden="true" focusable="false">
-        <rect class="mark-case" x="1.15" y="1.15" width="21.7" height="27.7" rx="3.4" stroke-width="1.7"/>
-        <rect class="mark-label" x="5.2" y="5.3" width="13.6" height="3.3" rx="1.3"/>
-        <rect class="mark-card" x="5.2" y="11.9" width="13.6" height="12.9" rx="1.6"/>
+      <!-- Proportioned to a real slab (18:28 ≈ 0.64, against PSA's ~0.62)
+           with restrained corners. Squarer, rounder earlier drafts read as
+           a phone icon at topbar size, which is the failure mode for any
+           small rounded rectangle. -->
+      <svg class="brand-mark" viewBox="0 0 20 30" fill="none" aria-hidden="true" focusable="false">
+        <rect class="mark-case" x="1" y="1" width="18" height="28" rx="2.6" stroke-width="1.6"/>
+        <rect class="mark-label" x="4.2" y="4.6" width="11.6" height="3" rx="1.2"/>
+        <rect class="mark-card" x="4.2" y="10.6" width="11.6" height="14.2" rx="1.4"/>
       </svg>
       <h1>Card Grader</h1>
     </div>
@@ -44,6 +52,7 @@
 </header>
 
 <div id="banner" class="banner" hidden></div>
+</div><!-- /.chrome -->
 
 <main>
 
diff --git a/static/style.css b/static/style.css
index fb71059..934366c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -88,8 +88,13 @@ main {
 
 /* ------------------------------------------------------------- topbar */
 
+/* The sticky unit is the header + banner together (see index.html) — the
+   banner used to sticky itself to a hardcoded top offset matching the
+   header's height, which broke the moment the header grew. */
+.chrome { position: sticky; top: 0; z-index: 20; }
+
 .topbar {
-  position: sticky; top: 0; z-index: 20;
+  position: relative;   /* containing block for the holo edge below */
   background: rgba(8, 12, 20, .82);
   -webkit-backdrop-filter: blur(14px) saturate(1.4);
   backdrop-filter: blur(14px) saturate(1.4);
@@ -136,10 +141,13 @@ main {
    Drawn as flat two-tone geometry rather than the gradient-blob-with-a-
    checkmark it replaced: that read as a generic app badge and said nothing
    about grading. Thin strokes and no glow keep it legible at 22px. */
-.brand-mark { flex: none; width: 21px; height: 26px; display: block; }
+.brand-mark { flex: none; width: 18px; height: 27px; display: block; }
 .brand-mark .mark-case { stroke: var(--accent); }
 .brand-mark .mark-label { fill: var(--accent-2); }
-.brand-mark .mark-card { fill: var(--accent); opacity: .34; }
+/* .48, not the .34 this started at — below roughly .45 the card window
+   stops separating from the case interior at topbar size and the mark
+   collapses into an empty outline. Checked by rendering it at 42px. */
+.brand-mark .mark-card { fill: var(--accent); opacity: .48; }
 
 .topbar-actions { display: flex; gap: 9px; flex-wrap: wrap; }
 
@@ -394,7 +402,6 @@ textarea { resize: vertical; min-height: 64px; }
 /* -------------------------------------------------------------- banner */
 
 .banner {
-  position: sticky; top: 60px; z-index: 15;
   padding: 12px 24px; font-size: 13.5px;
   background: color-mix(in srgb, var(--accent) 22%, var(--ground));
   color: var(--ink);
@@ -492,7 +499,7 @@ textarea { resize: vertical; min-height: 64px; }
   .grid td { padding: 11px 8px; }
   .grid th { padding: 9px 8px; }
   .cardcell img, .cardcell .thumb-blank { width: 40px; height: 56px; }
-  .banner { top: 54px; padding: 11px 14px; }
+  .banner { padding: 11px 14px; }
 
   /* The slab stays horizontal — stacking it would bury the number, which is
      the one thing someone opens this app to see. Just tighter. */
