Widen layout, add spacing, and 'Made for [earth] by Metagov' footer

index.html

@@ -79,10 +79,15 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 40px 24px;
+    padding: 64px 32px;
     text-align: center;
   }
 
+  .wrap {
+    width: 100%;
+    max-width: 1080px;
+  }
+
   .logo {
     margin-bottom: 28px;
   }
@@ -102,20 +107,20 @@
   }
 
   .tagline {
-    font-size: 20px;
+    font-size: 22px;
     font-weight: 500;
     color: var(--muted);
-    max-width: 480px;
-    line-height: 1.5;
-    margin-bottom: 40px;
+    max-width: 640px;
+    margin: 0 auto 48px;
+    line-height: 1.6;
   }
 
   .features {
     display: flex;
-    gap: 12px;
+    gap: 14px;
     flex-wrap: wrap;
     justify-content: center;
-    margin-bottom: 48px;
+    margin-bottom: 56px;
   }
 
   .tag {
@@ -165,16 +170,22 @@
   }
 
   /* Prominent notices — how-it-works and beta, styled to stand out. */
+  .notices {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    max-width: 720px;
+    margin: 0 auto;
+  }
+
   .notice {
     display: flex;
     align-items: flex-start;
-    gap: 14px;
+    gap: 16px;
     background: #e8f5e8;
     border: 1px solid var(--green-mid);
     border-radius: 14px;
-    padding: 16px 20px;
-    margin-top: 28px;
-    max-width: 560px;
+    padding: 18px 24px;
     text-align: left;
     box-shadow: 0 1px 2px rgba(45, 51, 39, 0.04);
   }
@@ -209,20 +220,20 @@
 
   .benefits {
     display: flex;
-    gap: 20px;
+    gap: 24px;
     flex-wrap: wrap;
     justify-content: center;
-    margin: 48px 0 8px;
-    max-width: 720px;
+    margin: 64px 0 8px;
+    max-width: 1080px;
   }
 
   .benefit-card {
-    flex: 1 1 280px;
+    flex: 1 1 300px;
     max-width: 340px;
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 16px;
-    padding: 28px 24px;
+    padding: 32px 28px;
     text-align: center;
   }
 
@@ -273,9 +284,40 @@
   }
 
   .footer {
-    margin-top: 64px;
+    margin-top: 72px;
     font-size: 13px;
     color: var(--light-muted);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 18px;
+  }
+
+  .footer .made-for {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    color: var(--muted);
+  }
+
+  .footer .made-for img {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    vertical-align: middle;
+  }
+
+  .footer .made-for a {
+    color: var(--green-deep);
+    font-weight: 600;
+  }
+
+  .footer .links {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    justify-content: center;
   }
 
   .footer a {
@@ -288,6 +330,8 @@
 </head>
 <body>
 
+  <div class="wrap">
+
   <div class="logo">
     <svg width="120" height="120" viewBox="0 0 130 130" fill="none" aria-label="Inference Cooperative logo">
       <circle cx="65" cy="14" r="5" fill="#5b8c5a"/>
@@ -331,6 +375,7 @@
     <a class="cta-secondary" href="https://my.inference.coop">Member login</a>
   </div>
 
+  <div class="notices">
     <div class="notice">
       <span class="notice-label">How it works</span>
       <p>Join on Open Collective, then check your email to set up your account. Once set up, you get access to chat, the developer API, and member governance.</p>
@@ -340,6 +385,7 @@
       <span class="notice-label notice-label--beta">Beta</span>
       <p>This service is a work in progress, being built by its members. Things may change as we learn.</p>
     </div>
+  </div>
 
   <div class="benefits">
     <div class="benefit-card">
@@ -391,12 +437,19 @@
   </div>
 
   <div class="footer">
+    <div class="made-for">
+      Made for <img src="metagov-earth.png" alt="the world"> by <a href="https://metagov.org">Metagov</a>
+    </div>
+    <div class="links">
       <a href="mailto:info@inference.coop">info@inference.coop</a>
-    &nbsp;·&nbsp;
+      <span>·</span>
       <a href="https://opencollective.com/inference-cooperative">Open Collective</a>
-    &nbsp;·&nbsp;
+      <span>·</span>
       <a href="https://git.inference.coop/co-op/docs">Docs</a>
     </div>
+  </div>
+
+  </div><!-- /.wrap -->
 
 </body>
 </html>