diff --git a/docs/index.html b/docs/index.html
index f00920b..d564a78 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -7,7 +7,7 @@
   <!-- Everything this page needs is served from this origin, so the policy can
        stay strict. If you ever add a webfont, analytics or an embed, widen the
        matching directive below or the browser will silently block it. -->
-  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; media-src 'self'; script-src 'self'; style-src 'self'; font-src 'self'; connect-src 'self'; object-src 'none'; base-uri 'none'; form-action 'none'; upgrade-insecure-requests">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; media-src 'self'; script-src 'self'; style-src 'self'; font-src 'self'; connect-src 'self' https://api.github.com; object-src 'none'; base-uri 'none'; form-action 'none'; upgrade-insecure-requests">
   <title>Core-Monitor | Apple Silicon System Monitor and Fan Control for macOS</title>
   <meta name="description" content="Core-Monitor is a free, open-source system monitor for Apple Silicon Macs. It reads CPU load, temperature, power draw, memory, battery and fan speed, and can hand you the fans when you want them. Nothing leaves the Mac.">
   <meta name="application-name" content="Core-Monitor">
@@ -41,10 +41,10 @@
        fetched at the same priority as the stylesheet rather than waiting for
        the parser to reach the <img>. -->
   <link rel="preload" as="image" href="images/ui/overview-v16.png?v=16" fetchpriority="high">
-  <link rel="stylesheet" href="styles.css?v=17">
+  <link rel="stylesheet" href="styles.css?v=18">
   <!-- Type is set in the system UI font (SF Pro on macOS), so there are no
        webfont requests and nothing about a visitor reaches a third party. -->
-  <script src="script.js?v=7" defer></script>
+  <script src="script.js?v=8" defer></script>
   <script type="application/ld+json">
   {
     "@context": "https://schema.org",
@@ -179,11 +179,14 @@
         <a href="#faq">FAQ</a>
       </nav>
       <div class="header-actions">
-        <a class="icon-link" href="https://github.com/offyotto/Core-Monitor" aria-label="Core-Monitor on GitHub" title="Core-Monitor on GitHub">
+        <a class="star-btn" href="https://github.com/offyotto/Core-Monitor">
           <picture>
             <source media="(prefers-color-scheme: light)" srcset="images/site/github-mark.png">
-            <img src="images/site/github-mark-light.png" alt="" width="24" height="24">
+            <img src="images/site/github-mark-light.png" alt="" width="16" height="16">
           </picture>
+          <span class="star-btn-label">Star</span>
+          <span class="star-btn-count" data-star-count>27</span>
+          <span class="visually-hidden">stars on GitHub</span>
         </a>
         <a class="btn btn-solid btn-sm" href="https://github.com/offyotto/Core-Monitor/releases/latest/download/Core-Monitor.dmg">Get the app</a>
       </div>
@@ -274,7 +277,7 @@ <h2>Read only, until you decide otherwise</h2>
           </ul>
         </div>
         <figure class="frame">
-          <img src="images/ui/cooling-v16.png?v=16" alt="Cooling screen showing two fans near 2,900 rpm, a custom curve mode, and a button that hands cooling back to macOS." loading="lazy" decoding="async">
+          <img src="images/ui/cooling-v16.png?v=16" alt="Cooling screen showing two fans near 2,900 rpm, a custom curve mode, and a button that hands cooling back to macOS." width="1192" height="884" loading="lazy" decoding="async">
         </figure>
       </div>
     </section>
@@ -338,7 +341,7 @@ <h2 id="compare-title">How it stacks up</h2>
       </div>
       <div class="compare-wrap" tabindex="0" role="region" aria-labelledby="compare-title">
         <table class="compare">
-          <caption>Written by me. Check each app&rsquo;s own site for its current feature list.</caption>
+          <caption>Written by the Core-Monitor developer. Check each app&rsquo;s own site for its current feature list.</caption>
           <thead>
             <tr>
               <th scope="col">App</th>
@@ -446,7 +449,7 @@ <h2>Questions before you install</h2>
         <h2>The sensors are already in your Mac. Go look at them.</h2>
         <div class="cta-actions btn-group">
           <a class="btn btn-solid" href="https://github.com/offyotto/Core-Monitor/releases/latest/download/Core-Monitor.dmg">Download for macOS</a>
-          <a class="btn btn-outline" href="https://github.com/offyotto/Core-Monitor">Star it on GitHub</a>
+          <a class="btn btn-outline" href="https://github.com/offyotto/Core-Monitor">Star it on GitHub<span class="btn-count" data-star-count>27</span></a>
         </div>
       </div>
     </section>
diff --git a/docs/styles.css b/docs/styles.css
index f1fd8f6..0cab0fe 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -101,6 +101,12 @@ img, video { max-width: 100%; height: auto; display: block; }
 p { margin: 0 0 1em; }
 p:last-child { margin-bottom: 0; }
 
+/* Headings are short enough that balancing them is cheap and stops a lone
+   word stranding on the last line. Body copy gets the looser "pretty" pass,
+   which only adjusts the final few lines. */
+h1, h2, h3 { text-wrap: balance; }
+.hero-text, .section-head p, .card p, .route > p { text-wrap: pretty; }
+
 .wrap {
   width: min(var(--max), calc(100% - 3rem));
   margin: 0 auto;
@@ -307,6 +313,60 @@ p:last-child { margin-bottom: 0; }
 .icon-link:hover { color: var(--text); background: var(--panel); }
 .icon-link img { width: 24px; height: 24px; }
 
+/* ---------- github star button ----------
+   An ordinary link to the repository that happens to carry the star count.
+   The number ships in the markup, so it is present with JavaScript blocked
+   and the button never changes width after load; script.js only refreshes
+   it. */
+
+.star-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 40px;
+  padding: 0.35rem 0.45rem 0.35rem 0.7rem;
+  border: 1px solid var(--stroke);
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  font-size: 0.875rem;
+  font-weight: 600;
+  white-space: nowrap;
+  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
+}
+.star-btn:hover {
+  color: var(--text);
+  border-color: var(--text-faint);
+  background: var(--panel);
+  text-decoration: none;
+}
+.star-btn img { width: 16px; height: 16px; }
+
+.star-btn-count {
+  padding: 0.05rem 0.4rem;
+  border-radius: 5px;
+  background: var(--panel-raised);
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Same treatment for the count sitting inside the closing call to action. */
+.btn-count {
+  margin-left: 0.1rem;
+  padding: 0.05rem 0.4rem;
+  border-radius: 5px;
+  background: var(--panel-raised);
+  font-size: 0.85em;
+  font-variant-numeric: tabular-nums;
+}
+
+@media (pointer: coarse) {
+  .star-btn { min-height: 44px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .star-btn { transition: none; }
+}
+
 /* ---------- hero ---------- */
 
 .hero {
@@ -935,10 +995,20 @@ p:last-child { margin-bottom: 0; }
   .hero { padding-bottom: 2.5rem; }
   .header-actions { gap: 0.5rem; }
   .header-actions .icon-link { display: none; }
+  .star-btn-label { display: none; }
+  .star-btn { padding-inline: 0.45rem; gap: 0.4rem; }
   .btn-group .btn { flex: 1 1 auto; }
   .lightbox { width: calc(100vw - 1.25rem); }
 }
 
+/* Narrower than this the star button starts shoving the download button off
+   the screen, and the download button is the one that matters here. The
+   count is still on the page: the closing call to action carries it. */
+
+@media (max-width: 560px) {
+  .star-btn { display: none; }
+}
+
 /* ---------- print ---------- */
 
 @media print {