fix(marketing): lift the Grok mark clear of the mobile headline

Author: rynfar

apps/marketing/src/pages/index.astro

@@ -580,9 +580,7 @@ import { RELEASES_URL } from "../lib/releases";
     .hero-float-mark.hf-codex    { top: 2%;  right: 3%; }
     .hero-float-mark.hf-opencode { top: 26%; left: 2%; }
     .hero-float-mark.hf-cursor   { top: 24%; right: 2%; }
-    /* Sits between the OpenCode mark and the headline. Lower than this and it
-       crowds the title once the heading wraps to two lines. */
-    .hero-float-mark.hf-grok     { top: 38%; left: 2%;  transform: rotate(3deg); }
+    .hero-float-mark.hf-grok     { top: 48%; left: 2%;  transform: rotate(3deg); }
   }
 
   @media (max-width: 820px) {
@@ -631,8 +629,11 @@ import { RELEASES_URL } from "../lib/releases";
       transform: rotate(-10deg);
     }
 
+    /* Clears the headline, which starts around 256px here: 132px of hero
+       padding, the 104px Pylon mark, then the title's 20px margin. At 240px
+       this tile sat directly on the first line of "The control plane". */
     .hero-float-mark.hf-grok {
-      top: 240px;
+      top: 150px;
       left: 4px;
       right: auto;
       transform: rotate(-4deg);
@@ -661,7 +662,7 @@ import { RELEASES_URL } from "../lib/releases";
 
   @media (max-width: 340px) {
     .hero-float-mark.hf-grok {
-      top: 220px;
+      top: 146px;
       left: 0;
       width: 52px;
       height: 52px;