css: make the two display headings consistent (size + line-height)

.hero-heading was a fixed 1.6rem with no line-height; .quest-header-title
used clamp(1.25rem,2vw,1.75rem) + line-height 1.2. Give .hero-heading the
identical clamp + line-height so the two headings match at every width,
and unify the <=600px phone override to one shared size (1.15rem).

app.py

@@ -472,7 +472,10 @@ gradio-app > div {
 .hero-heading {
   font-family: "Source Serif 4", "Source Serif Pro", ui-serif, Georgia, serif !important;
   font-weight: 600 !important;
-  font-size: 1.6rem !important;
+  /* Kept identical to .quest-header-title so the two display headings match
+     in size and line spacing. */
+  font-size: clamp(1.25rem, 2vw, 1.75rem) !important;
+  line-height: 1.2 !important;
   letter-spacing: -0.01em !important;
   text-transform: none !important;
   color: var(--q-text) !important;
@@ -1233,11 +1236,14 @@ footer { display: none !important; }
   }
 }
 /* Phone-specific: shrink the two big display headings so they don't dominate
-   the small screen. .hero-heading is otherwise a fixed 1.6rem and never
-   scales down; .quest-header-title's clamp floor (1.25rem) is still large. */
+   the small screen. Both get the SAME size + line-height so they stay
+   visually consistent with each other. */
 @media (max-width: 600px) {
-  .quest-header-title { font-size: 1.1rem !important; }
-  .hero-heading { font-size: 1.2rem !important; }
+  .quest-header-title,
+  .hero-heading {
+    font-size: 1.15rem !important;
+    line-height: 1.2 !important;
+  }
 }
 """