diff --git a/nextjs-app/components/SchoolDetailView.module.css b/nextjs-app/components/SchoolDetailView.module.css
index 375ad3c..173ad28 100644
--- a/nextjs-app/components/SchoolDetailView.module.css
+++ b/nextjs-app/components/SchoolDetailView.module.css
@@ -87,6 +87,36 @@
     background: #fff;
 }
 
+/* Full label by default; phones over the map get an icon-only button
+   (same compact treatment as the section-nav compare icon). */
+.btnCompareGlyph {
+    display: none;
+}
+
+@media (max-width: 640px) {
+    .headerHasMap .actions .btnCompareLabel {
+        display: none;
+    }
+
+    .headerHasMap .actions .btnCompareGlyph {
+        display: inline;
+    }
+
+    .headerHasMap .actions .btnAdd,
+    .headerHasMap .actions .btnRemove {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: none;
+        width: 40px;
+        height: 40px;
+        padding: 0;
+        border-radius: 999px;
+        font-size: 1.375rem;
+        line-height: 1;
+    }
+}
+
 /* Inline "View on map ↗" trigger next to the address. */
 .mapLink {
     border: none;
diff --git a/nextjs-app/components/SchoolDetailView.tsx b/nextjs-app/components/SchoolDetailView.tsx
index 4fb42ec..b15dc4a 100644
--- a/nextjs-app/components/SchoolDetailView.tsx
+++ b/nextjs-app/components/SchoolDetailView.tsx
@@ -373,8 +373,15 @@ export function SchoolDetailView({
             <button
               onClick={handleComparisonToggle}
               className={isInComparison ? styles.btnRemove : styles.btnAdd}
+              aria-label={isInComparison ? 'In comparison' : 'Add to compare'}
             >
-              {isInComparison ? '✓ In Comparison' : '+ Add to Compare'}
+              {/* On phones the map hero shows only the glyph (nav-bar style). */}
+              <span className={styles.btnCompareLabel}>
+                {isInComparison ? '✓ In Comparison' : '+ Add to Compare'}
+              </span>
+              <span className={styles.btnCompareGlyph} aria-hidden="true">
+                {isInComparison ? '✓' : '+'}
+              </span>
             </button>
           </div>
         </div>
diff --git a/nextjs-app/components/SchoolHeroMap.module.css b/nextjs-app/components/SchoolHeroMap.module.css
index 4d06206..1dbb553 100644
--- a/nextjs-app/components/SchoolHeroMap.module.css
+++ b/nextjs-app/components/SchoolHeroMap.module.css
@@ -16,6 +16,17 @@
     }
 }
 
+/* Preview: move the OSM attribution off the bottom edge, where the school
+   title slides up under the fade — top-left is the band's only quiet corner
+   (Compare floats top-right). Fullscreen keeps Leaflet's default bottom-right,
+   since the zoom control occupies the top-left there. */
+.wrapper:not([data-fullscreen]) :global(.leaflet-bottom.leaflet-right) {
+    top: 0;
+    left: 0;
+    right: auto;
+    bottom: auto;
+}
+
 /* Fullscreen: the Fullscreen API promotes this element to fill the viewport. */
 .wrapper[data-fullscreen] {
     height: 100vh;
diff --git a/nextjs-app/components/SecondarySchoolDetailView.module.css b/nextjs-app/components/SecondarySchoolDetailView.module.css
index c188fda..75daa41 100644
--- a/nextjs-app/components/SecondarySchoolDetailView.module.css
+++ b/nextjs-app/components/SecondarySchoolDetailView.module.css
@@ -87,6 +87,36 @@
     background: #fff;
 }
 
+/* Full label by default; phones over the map get an icon-only button
+   (same compact treatment as the section-nav compare icon). */
+.btnCompareGlyph {
+    display: none;
+}
+
+@media (max-width: 640px) {
+    .headerHasMap .actions .btnCompareLabel {
+        display: none;
+    }
+
+    .headerHasMap .actions .btnCompareGlyph {
+        display: inline;
+    }
+
+    .headerHasMap .actions .btnAdd,
+    .headerHasMap .actions .btnRemove {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: none;
+        width: 40px;
+        height: 40px;
+        padding: 0;
+        border-radius: 999px;
+        font-size: 1.375rem;
+        line-height: 1;
+    }
+}
+
 /* Inline "View on map ↗" trigger next to the address. */
 .mapLink {
     border: none;
diff --git a/nextjs-app/components/SecondarySchoolDetailView.tsx b/nextjs-app/components/SecondarySchoolDetailView.tsx
index 0f9d87f..7180594 100644
--- a/nextjs-app/components/SecondarySchoolDetailView.tsx
+++ b/nextjs-app/components/SecondarySchoolDetailView.tsx
@@ -292,8 +292,15 @@ export function SecondarySchoolDetailView({
             <button
               onClick={handleComparisonToggle}
               className={isInComparison ? styles.btnRemove : styles.btnAdd}
+              aria-label={isInComparison ? 'In comparison' : 'Add to compare'}
             >
-              {isInComparison ? '✓ In Comparison' : '+ Add to Compare'}
+              {/* On phones the map hero shows only the glyph (nav-bar style). */}
+              <span className={styles.btnCompareLabel}>
+                {isInComparison ? '✓ In Comparison' : '+ Add to Compare'}
+              </span>
+              <span className={styles.btnCompareGlyph} aria-hidden="true">
+                {isInComparison ? '✓' : '+'}
+              </span>
             </button>
           </div>
         </div>