diff --git a/site/src/styles.css b/site/src/styles.css
index 416824c..b59e6ee 100644
--- a/site/src/styles.css
+++ b/site/src/styles.css
@@ -40,6 +40,8 @@ a { color: inherit; text-decoration: none; }
   position: relative;
   overflow: hidden;
   padding-top: 26px;
+  padding-left: clamp(16px, 5vw, 76px);
+  padding-right: clamp(16px, 5vw, 76px);
 }
 
 .hero-bg {
@@ -801,11 +803,21 @@ pre {
   .topbar { border-radius: 24px; align-items: flex-start; flex-direction: column; }
   .nav-links { flex-wrap: wrap; }
   .hero-grid, .two-col, .demo-grid, .video-copy, .feature-grid, .trust-grid, .release-grid { grid-template-columns: 1fr; }
-  .hero-phone-stack { min-height: 620px; }
-  .hero-phone-stack img { height: 600px; }
+  .hero { padding-left: 16px; padding-right: 16px; padding-top: 20px; min-height: auto; }
+  .hero-grid { width: 100%; }
+  .hero-grid > div:first-child { padding-right: 0; }
+  .hero-phone-stack { min-height: 400px; overflow: visible; }
+  .hero-phone-stack img { height: 480px; width: min(240px, 42vw); border-radius: 36px; border-width: 10px; }
+  .hero-phone-stack img:nth-child(1) { left: -5%; top: 36px; transform: rotate(-8deg) translateZ(-20px); }
+  .hero-phone-stack img:nth-child(2) { left: 22%; top: 0; transform: rotate(4deg) translateZ(40px); }
+  .hero-phone-stack img:nth-child(3) { right: -5%; top: 100px; transform: rotate(10deg) translateZ(10px); }
+  .eyebrow { font-size: 11px; letter-spacing: 0.1em; }
+  h1 { font-size: clamp(32px, 8vw, 52px) !important; }
+  .hero-subtitle { font-size: 15px; }
   .journey-layout { grid-template-columns: 1fr; }
   .journey-phone-area { position: relative; top: 0; order: -1; }
   .journey-phone-container { justify-content: center; }
+  .section-pad { padding: 48px 16px; }
   .hash-cell { grid-column: auto; }
   .screenshot-stack { min-height: 680px; }
   .shot { width: min(300px, 74vw); }