Refine mobile hero spacing and investor logo rotation

web/app/flows/flows.module.css

@@ -1074,15 +1074,31 @@
 
 @media (max-width: 680px) {
   .main {
+    --investor-strip-padding-top: 40px;
     padding-inline: 1rem;
   }
 
   .hero {
     gap: 2rem;
+    padding-bottom: 0;
+  }
+
+  .heroCopy {
+    gap: 14px;
+  }
+
+  .heroCopy .ctaRow {
+    gap: 10px;
+    margin-top: 14px;
   }
 
   .hero h1 {
-    font-size: clamp(2.15rem, 7.2vw, 3.1rem);
+    font-size: clamp(2.75rem, 12vw, 4rem);
+  }
+
+  .heroLead {
+    font-size: 0.95rem;
+    line-height: 1.55;
   }
 
   .headlineLine {

web/app/landing.module.css

@@ -7822,9 +7822,11 @@
     line-height: 1.08;
   }
 
-  /* Phones: the same architecture, one step smaller. The headline is four
-     words on four lines at this width, so the column tightens and the band
-     comes up to meet it. */
+  .heroSection {
+    --investor-strip-padding-top: 2.5rem;
+  }
+
+  /* Give the mobile headline more emphasis while keeping the copy compact. */
   .heroCenter {
     padding: 34px 24px 0;
   }
@@ -7834,19 +7836,22 @@
   }
 
   .heroCenterColumn .heroCenterHeadline {
-    font-size: clamp(2.3rem, 10.2vw, 3.5rem);
+    font-size: clamp(2.75rem, 12vw, 4rem);
     max-width: none;
   }
 
   .heroCenterColumn .heroCenterSubtitle {
     max-width: 40ch;
+    font-size: 0.95rem;
+    line-height: 1.55;
   }
 
   .heroCenterCtas {
     align-self: stretch;
     flex-direction: column;
     align-items: stretch;
     gap: 10px;
+    margin-top: 10px;
   }
 
   .heroMarquee {

web/components/InvestorStrip.tsx

@@ -2,23 +2,38 @@ import Image from 'next/image';
 import s from './investor-strip.module.css';
 
 export function InvestorStrip() {
+  const logos = [
+    <Image key="0" className={s.investorHustle} src="/investors/hustle-fund.svg" alt="Hustle Fund" width={205} height={27} />,
+    <Image key="1" className={s.investorActive} src="/investors/active-capital.svg" alt="Active Capital" width={185} height={30} />,
+    <span key="2" className={s.investorYc} role="img" aria-label="Y Combinator">
+      <span aria-hidden="true">Y</span><strong aria-hidden="true">Combinator</strong>
+    </span>,
+    <Image key="3" className={s.investorCortical} src="/investors/cortical-ventures.webp" alt="Cortical Ventures" width={220} height={32} />,
+    <span key="4" className={s.investorYonder} role="img" aria-label="Yonder">
+      <svg aria-hidden="true" viewBox="0 0 28 28">
+        <circle cx="14" cy="14" r="12" fill="none" stroke="currentColor" strokeWidth="2" />
+        <path d="M4.5 18.5 10.6 9l3.5 5 3.1-4.3 6.3 8.8" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+      <strong aria-hidden="true">YONDER</strong>
+    </span>,
+  ];
+
   return (
     <section className={s.backers} aria-label="Agent Relay investors">
       <p>Backed by</p>
-      <div className={s.investorGroup}>
-        <Image className={s.investorHustle} src="/investors/hustle-fund.svg" alt="Hustle Fund" width={205} height={27} />
-        <Image className={s.investorActive} src="/investors/active-capital.svg" alt="Active Capital" width={185} height={30} />
-        <span className={s.investorYc} role="img" aria-label="Y Combinator">
-          <span aria-hidden="true">Y</span><strong aria-hidden="true">Combinator</strong>
-        </span>
-        <Image className={s.investorCortical} src="/investors/cortical-ventures.webp" alt="Cortical Ventures" width={220} height={32} />
-        <span className={s.investorYonder} role="img" aria-label="Yonder">
-          <svg aria-hidden="true" viewBox="0 0 28 28">
-            <circle cx="14" cy="14" r="12" fill="none" stroke="currentColor" strokeWidth="2" />
-            <path d="M4.5 18.5 10.6 9l3.5 5 3.1-4.3 6.3 8.8" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-          </svg>
-          <strong aria-hidden="true">YONDER</strong>
-        </span>
+      <div className={`${s.investorGroup} ${s.desktopInvestors}`}>{logos}</div>
+      <div className={s.mobileInvestors} role="img" aria-label="Hustle Fund, Active Capital, Y Combinator, Cortical Ventures, and Yonder">
+        {[2, 4, 1, 3, 0].map((start, index) => (
+          <div
+            key={start}
+            className={`${s.investorGroup} ${s.investorPair}`}
+            style={{ animationDelay: `${index * 5 - 25}s` }}
+            aria-hidden="true"
+          >
+            {logos[start]}
+            {logos[(start + 1) % logos.length]}
+          </div>
+        ))}
       </div>
     </section>
   );

web/components/investor-strip.module.css

@@ -8,14 +8,16 @@
 }
 
 .backers > p {
-  margin: 0 0 1.75rem;
+  margin: 0 0 0.75rem;
   color: #a8b8c8;
   font-size: 0.75rem;
   font-weight: 500;
   letter-spacing: 0.1em;
   text-transform: uppercase;
 }
 
+.mobileInvestors { display: none; }
+
 .investorGroup {
   display: flex;
   flex-wrap: wrap;
@@ -47,9 +49,28 @@
 @media (max-width: 680px) {
   .backers { padding-bottom: 3rem; }
   .investorGroup { gap: 1.5rem 1.25rem; }
+  .desktopInvestors { display: none; }
+  .mobileInvestors { display: grid; min-height: 32px; }
+  .investorPair {
+    grid-area: 1 / 1;
+    flex-wrap: nowrap;
+    opacity: 0;
+    animation: investorFade 25s ease-in-out infinite;
+  }
+  .investorPair > * { flex-shrink: 0; }
   .investorHustle { width: 125px; }
   .investorActive { width: 122px; }
   .investorCortical { width: 130px; }
   .investorYc strong { font-size: 15px; }
   .investorYonder strong { font-size: 0.9rem; }
 }
+
+@keyframes investorFade {
+  0%, 16%, 100% { opacity: 1; }
+  20%, 96% { opacity: 0; }
+}
+
+@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
+  .mobileInvestors { display: none; }
+  .desktopInvestors { display: flex; }
+}