fix(stats): refine hero layout for responsive Figma match

packages/stats/app/src/routes/index.css

@@ -89,7 +89,7 @@
 [data-page="stats"] [data-component="container"] {
   box-sizing: border-box;
   width: 100%;
-  max-width: 80rem;
+  max-width: calc(80rem + 2px);
   margin: 0 auto;
   border-left: 1px solid var(--stats-line);
   border-right: 1px solid var(--stats-line);
@@ -461,6 +461,7 @@
 }
 
 [data-page="stats"] [data-section="hero"] h1 {
+  order: 1;
   color: var(--stats-text);
   font-size: 64px;
   font-weight: 500;
@@ -469,20 +470,30 @@
 }
 
 [data-page="stats"] [data-slot="hero-copy"] {
+  order: 3;
   color: var(--stats-hero-muted);
   font-size: 16px;
   font-weight: 400;
   line-height: 1.5;
 }
 
+[data-page="stats"] [data-slot="hero-copy-break"] {
+  display: none;
+}
+
 [data-page="stats"] [data-slot="hero-pattern"] {
+  order: 2;
   flex: 0 0 auto;
   width: 100%;
   height: 16px;
   overflow: hidden;
-  background-image: radial-gradient(circle, var(--stats-hero-pattern) 1px, transparent 1.1px);
-  background-position: 0 0;
-  background-size: 6px 6px;
+  background: var(--stats-hero-pattern);
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
+  mask-repeat: repeat;
+  mask-size: 6px 6px;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
+  -webkit-mask-repeat: repeat;
+  -webkit-mask-size: 6px 6px;
 }
 
 [data-page="stats"] [data-slot="hero-meta"] {
@@ -496,7 +507,7 @@
   background: var(--stats-layer-2);
   color: var(--stats-hero-muted);
   font-size: 13px;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1.1;
   overflow: hidden;
   white-space: nowrap;
@@ -514,10 +525,10 @@
   text-overflow: ellipsis;
 }
 
-@media (min-width: 58rem) {
+@media (min-width: 48rem) {
   [data-page="stats"] [data-section="hero"] {
     gap: 16px;
-    padding: 128px 40px 24px;
+    padding: 128px 32px 32px;
   }
 
   [data-page="stats"] [data-slot="hero-canvas"] {
@@ -553,11 +564,21 @@
     right: 0;
     bottom: 0;
     z-index: 1;
-    width: min(36rem, 100%);
+    width: min(563px, 100%);
     padding: 12px 0 0 16px;
     background: var(--stats-bg);
     text-align: right;
   }
+
+  [data-page="stats"] [data-slot="hero-copy-break"] {
+    display: block;
+  }
+}
+
+@media (min-width: 75rem) {
+  [data-page="stats"] [data-section="hero"] {
+    padding: 128px 40px 24px;
+  }
 }
 
 @media (min-width: 90rem) {
@@ -1494,7 +1515,7 @@
   }
 }
 
-@media (max-width: 74rem) {
+@media (max-width: 80rem) {
   [data-page="stats"] [data-component="container"] {
     border: 0;
   }
@@ -1540,14 +1561,12 @@
     --stats-section-padding: 4rem;
   }
 
-  [data-page="stats"] [data-section="hero"],
   [data-page="stats"] [data-section="chart"],
   [data-page="stats"] [data-section="newsletter"] {
     padding-left: 24px;
     padding-right: 24px;
   }
 
-  [data-page="stats"] [data-section="hero"],
   [data-page="stats"] [data-section="newsletter"] {
     grid-template-columns: 1fr;
   }