diff --git a/static/calendar.html b/static/calendar.html
index ced7b23..ced1912 100644
--- a/static/calendar.html
+++ b/static/calendar.html
@@ -42,6 +42,7 @@
         <a href="day" data-view="day">Day Detail</a>
         <a href="compare" data-view="compare">Compare</a>
         <a href="climate">Climate</a>
+        <a href="alerts">Alerts</a>
       </nav>
         </div>
       </details>
diff --git a/static/compare.html b/static/compare.html
index 69b3297..b093be9 100644
--- a/static/compare.html
+++ b/static/compare.html
@@ -43,6 +43,7 @@
         <a href="day" data-view="day">Day Detail</a>
         <a href="compare" data-view="compare" class="active">Compare</a>
         <a href="climate">Climate</a>
+        <a href="alerts">Alerts</a>
       </nav>
         </div>
       </details>
diff --git a/static/day.html b/static/day.html
index 033545d..7e50f9c 100644
--- a/static/day.html
+++ b/static/day.html
@@ -43,6 +43,7 @@
         <a href="day" data-view="day" class="active">Day Detail</a>
         <a href="compare" data-view="compare">Compare</a>
         <a href="climate">Climate</a>
+        <a href="alerts">Alerts</a>
       </nav>
         </div>
       </details>
diff --git a/static/index.html b/static/index.html
index 4197f33..392eeaf 100644
--- a/static/index.html
+++ b/static/index.html
@@ -46,6 +46,7 @@
         <a href="day" data-view="day">Day Detail</a>
         <a href="compare" data-view="compare">Compare</a>
         <a href="climate">Climate</a>
+        <a href="alerts">Alerts</a>
       </nav>
         </div>
       </details>
diff --git a/static/legend.html b/static/legend.html
index f4be506..3160cd6 100644
--- a/static/legend.html
+++ b/static/legend.html
@@ -42,6 +42,7 @@
         <a href="day" data-view="day">Day Detail</a>
         <a href="compare" data-view="compare">Compare</a>
         <a href="climate">Climate</a>
+        <a href="alerts">Alerts</a>
       </nav>
         </div>
       </details>
diff --git a/static/style.css b/static/style.css
index 22b36dc..71eab26 100644
--- a/static/style.css
+++ b/static/style.css
@@ -376,6 +376,16 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
   display: flex; flex-direction: column; gap: 12px; align-items: center;
 }
 .alerts-gate h2 { margin: 0; }
+.alerts-gate { max-width: 520px; }
+.alerts-lede { margin: 0; }
+/* The "what are alerts" steps read as a left-aligned list inside the centered card. */
+.alerts-explain {
+  text-align: left; align-self: stretch; margin: 2px 0; padding-left: 24px;
+  display: flex; flex-direction: column; gap: 10px; line-height: 1.5;
+}
+.alerts-explain li { padding-left: 4px; }
+.alerts-eg { margin: 0; font-style: italic; }
+.alerts-gate-note { margin: 0; font-size: 13px; }
 .alerts-gate .acct-submit { max-width: 280px; }
 .alerts-toolbar {
   display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
@@ -491,6 +501,13 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
 .view-nav a:hover { color: var(--text); }
 .view-nav a.active { background: var(--accent); color: #fff; }
 
+/* Small laptops / large tablets: the inline header (six tabs + °F/°C + account) is
+   tight, so trim the tab padding to keep the row from spilling past ~800px into a
+   horizontal scrollbar. Phones (≤640px) collapse into the hamburger instead. */
+@media (min-width: 641px) and (max-width: 1000px) {
+  .view-nav a { padding: 8px 11px; }
+}
+
 /* Hamburger wrapper. On desktop the menu and its panel are transparent
    (display:contents), so the nav pills plus the injected °F/°C toggle, bell and
    account render inline in the header row and the hamburger summary is hidden;
diff --git a/static/subscriptions.html b/static/subscriptions.html
index 2ee736c..45f791b 100644
--- a/static/subscriptions.html
+++ b/static/subscriptions.html
@@ -40,6 +40,7 @@
         <a href="day" data-view="day">Day Detail</a>
         <a href="compare" data-view="compare">Compare</a>
         <a href="climate">Climate</a>
+        <a href="alerts" class="active">Alerts</a>
       </nav>
         </div>
       </details>
diff --git a/static/subscriptions.js b/static/subscriptions.js
index f9850c3..dd3bdd2 100644
--- a/static/subscriptions.js
+++ b/static/subscriptions.js
@@ -55,10 +55,20 @@ async function load() {
 function renderGate() {
   body.innerHTML = `
     <div class="alerts-gate panel">
-      <h2>Sign in to manage alerts</h2>
-      <p class="muted">Create an account to subscribe to cities and get notified when their
-        weather is unusually extreme — above the percentile you choose.</p>
+      <h2>What are weather alerts?</h2>
+      <p class="alerts-lede">Thermograph can watch any city and tell you when its weather turns
+        <b>unusually extreme for that place</b> — a heat spell, a cold snap, heavy rain — graded
+        against ~45 years of local climate history.</p>
+      <ol class="alerts-explain">
+        <li><b>Pick a city</b> and the metrics to watch — high, low, feels-like, rain, wind…</li>
+        <li><b>Set a threshold.</b> Alert when a day passes, say, the <b>97th percentile</b> for
+          that location. Higher = rarer, so fewer but more significant alerts.</li>
+        <li><b>Get notified</b> in-app (and via OS push on this device) when a recorded day — or
+          the upcoming forecast — crosses your threshold. At most one notification per week per alert.</li>
+      </ol>
+      <p class="alerts-eg muted">For example: “Tell me when Tokyo's high passes the 97th percentile.”</p>
       <button type="button" class="acct-submit" id="gate-signin">Sign in / Create account</button>
+      <p class="alerts-gate-note muted">You'll need an account to create and manage alerts.</p>
     </div>`;
   body.querySelector("#gate-signin").onclick = () => openAuth("login");
 }