diff --git a/index.html b/index.html
index fb6e8c8..8be09d3 100644
--- a/index.html
+++ b/index.html
@@ -143,7 +143,7 @@
           <blockquote data-i18n="quote.text">“We replaced three tools with Lumen — and our pages got faster.”</blockquote>
           <figcaption>
             
-            <img id="team-photo" class="avatar" src="/img/team.jpg" width="56" height="56" alt="Portrait of Linh Tran">
+            <img id="team-photo" class="avatar" src="/img/team.svg" width="56" height="56" alt="Portrait of Linh Tran">
             <span><strong data-i18n="quote.name">Linh Tran</strong><br><span class="role" data-i18n="quote.role">Head of Growth, Sóng</span></span>
           </figcaption>
         </figure>
diff --git a/settings.js b/settings.js
index 8e4209d..e32f52e 100644
--- a/settings.js
+++ b/settings.js
@@ -6,9 +6,10 @@
   });
 
 
-  // line was never updated -> "TypeError: Cannot read properties of null" on every load.
-  const save = document.querySelector('#save-btn');
-  save.addEventListener('click', () => {
-    save.textContent = window.t('set.saved');
-  });
+  const save = document.querySelector('#save-settings');
+  if (save) {
+    save.addEventListener('click', () => {
+      save.textContent = window.t('set.saved');
+    });
+  }
 })();
diff --git a/styles.css b/styles.css
index 98f6ff6..ac630fb 100644
--- a/styles.css
+++ b/styles.css
@@ -84,7 +84,8 @@ h1, h2, h3 { line-height: 1.2; }
 
 /* ---------- promo ---------- */
 .promo {
-  width: 600px; 
+  width: 100%;
+  max-width: 600px;
   margin: 0 auto;
   padding: 8px 16px;
   border-radius: 0 0 12px 12px;
@@ -106,8 +107,8 @@ h1, h2, h3 { line-height: 1.2; }
 .brand img { display: block; }
 .main-nav { flex: 1; display: flex; justify-content: center; }
 
-.nav-links { display: flex; gap: 24px; max-width: 420px; overflow: hidden; white-space: nowrap; margin: 0; padding: 0; list-style: none; }
-.nav-links a { display: inline-block; padding: 8px 0; color: var(--muted); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
+.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
+.nav-links a { display: inline-block; padding: 8px 0; color: var(--muted); font-size: 15px; font-weight: 500; text-decoration: none; }
 .header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
 .nav-login { display: inline-block; padding: 8px 4px; color: var(--text); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
 #header-cta { flex-shrink: 0; white-space: nowrap; }
@@ -120,14 +121,14 @@ h1, h2, h3 { line-height: 1.2; }
   .menu-toggle { display: inline-flex; }
 }
 @media (max-width: 639px) {
-  
-  .menu-toggle { position: absolute; right: 12px; top: 12px; }
+  .header-inner { flex-wrap: wrap; row-gap: 4px; padding-top: 8px; padding-bottom: 8px; }
+  .menu-toggle { display: inline-flex; }
 }
 
 /* ---------- hero ---------- */
 .hero { padding: 48px 0 40px; text-align: center; }
 .hero-inner { max-width: 820px; }
-.hero-art { display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto 32px; border-radius: 16px; box-shadow: var(--shadow); }
+.hero-art { display: block; width: 100%; max-width: 720px; height: auto; aspect-ratio: 1200 / 675; margin: 0 auto 32px; border-radius: 16px; box-shadow: var(--shadow); }
 .eyebrow {
   display: inline-block; margin: 0 0 16px; padding: 6px 12px; border-radius: 999px;
   background: var(--primary-soft); color: var(--primary-ink); font-size: 13px; font-weight: 600;
@@ -136,7 +137,7 @@ h1, h2, h3 { line-height: 1.2; }
 .lead { margin: 0 auto 28px; max-width: 640px; color: var(--muted); font-size: 18px; }
 .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
 .hero-ctas .btn { white-space: nowrap; }
-.hero-note { margin: 16px 0 0; font-size: 13px; color: #aaa; } 
+.hero-note { margin: 16px 0 0; font-size: 13px; color: var(--muted); }
 
 /* ---------- logos ---------- */
 .logos { padding: 8px 0 40px; text-align: center; }
@@ -167,7 +168,7 @@ h1, h2, h3 { line-height: 1.2; }
   border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
 }
 .plan-featured { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow); }
-#plan-business { background: #fff; } 
+#plan-business { background: var(--surface); } 
 .badge {
   position: absolute; top: -12px; right: 20px; padding: 4px 10px; border-radius: 999px;
   background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 700; line-height: 16px; white-space: nowrap;
@@ -193,13 +194,13 @@ h1, h2, h3 { line-height: 1.2; }
 
 /* ---------- newsletter ---------- */
 .newsletter { display: grid; grid-template-columns: 1fr minmax(320px, 460px); gap: 32px; align-items: center; }
-.newsletter-form { display: flex; gap: 10px; }
+.newsletter-form { display: flex; flex-wrap: wrap; gap: 10px; }
 .newsletter-form input {
-  flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border);
+  flex: 1 1 180px; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border);
   background: var(--surface); color: var(--text); font: inherit; font-size: 15px;
 }
 
-#newsletter-submit { flex-shrink: 0; width: 120px; white-space: nowrap; overflow: hidden; }
+#newsletter-submit { flex: 0 0 auto; min-width: 120px; max-width: 100%; }
 .form-status { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
 
 /* ---------- footer ---------- */
@@ -214,9 +215,10 @@ h1, h2, h3 { line-height: 1.2; }
   margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--muted); font-size: 14px;
 }
 .footer-bottom p { margin: 0; }
-.social { display: flex; gap: 6px; }
+.social { display: flex; gap: 4px; }
 .social a { 
-  display: inline-flex; width: 16px; height: 16px; color: var(--muted);
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; color: var(--muted);
 }
 .social svg { display: block; width: 16px; height: 16px; }
 
@@ -247,10 +249,10 @@ h1, h2, h3 { line-height: 1.2; }
 .check { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 15px; }
 .check input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
 .form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
-#save-settings { width: 84px; } 
+#save-settings { min-width: 84px; max-width: 100%; }
 .danger { background: var(--danger-soft); border-color: var(--danger-border); }
 .danger p { margin: 0 0 16px; color: var(--muted); }
-#danger-title { color: #7f1d1d; } 
+#danger-title { color: var(--danger-ink); }
 .app-footer { padding-top: 8px; padding-bottom: 40px; color: var(--muted); font-size: 14px; }
 .app-footer p { margin: 0; }
 
@@ -279,8 +281,7 @@ h1, h2, h3 { line-height: 1.2; }
   .newsletter-form { flex-direction: column; }
   .field-row { grid-template-columns: 1fr; gap: 0; }
   .workspace { display: none; }
-  
-  .badge { top: auto; bottom: 30px; left: 50%; right: auto; transform: translateX(-50%); }
+  .newsletter-form input, #newsletter-submit { width: 100%; }
 }
 
 
@@ -288,4 +289,4 @@ h1, h2, h3 { line-height: 1.2; }
   .role { color: #465569; }             /* --muted is #475569 */
 }
 .role { font-size: 13.6px; }            /* the scale has 14px */
-#newsletter-submit { border-radius: 15px; } /* --radius is 16px */
+#newsletter-submit { border-radius: 15px; } /* --radius is 16px */
\ No newline at end of file