sections reordered

site/index.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -16,32 +17,96 @@
       padding: 0 50px;
       box-sizing: border-box;
     }
-    a { color: inherit; }
+
+    a {
+      color: inherit;
+    }
+
     .landing {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      min-height: 100vh; min-height: 100dvh;
+      min-height: 100vh;
+      min-height: 100dvh;
       text-align: center;
     }
-    .wordmark { font-size: 64px; font-weight: bold; letter-spacing: -2px; margin: 0; }
+
-    .wordmark .lo { color: #999; }
+    .wordmark {
-    .tagline { color: #555; margin: 10px 0 0; }
+      font-size: 64px;
+      font-weight: bold;
+      letter-spacing: -2px;
+      margin: 0;
+    }
+
+    .wordmark .lo {
+      color: #999;
+    }
+
+    .tagline {
+      color: #555;
+      margin: 10px 0 0;
+    }
+
     /* Image slot for the logo — drop assets/logo.svg in later.
        <img class="logo" src="assets/logo.svg" alt="miniSCP"> */
-    .logo { width: 128px; height: 128px; display: block; margin: 0 auto 10px; }
+    .logo {
-    .links-container { font-size: 22px; margin: 24px; }
+      width: 128px;
-    .links-container a { text-decoration: none; margin: 0 6px; }
+      height: 128px;
-    .separator { letter-spacing: -9px; color: #ccc; }
+      display: block;
-    hr { border: none; height: 2px; background-color: lightgrey; width: 100%; margin: 40px auto; }
+      margin: 0 auto 10px;
-    h2 { font-weight: bold; }
+    }
-    .feat { margin: 0 0 14px; }
+
-    .feat b { display: inline; }
+    .links-container {
+      font-size: 22px;
+      margin: 24px;
+    }
+
+    .links-container a {
+      text-decoration: none;
+      margin: 0 6px;
+    }
+
+    .separator {
+      letter-spacing: -9px;
+      color: #ccc;
+    }
+
+    hr {
+      border: none;
+      height: 2px;
+      background-color: lightgrey;
+      width: 100%;
+      margin: 40px auto;
+    }
+
+    h2 {
+      font-weight: bold;
+    }
+
+    .feat {
+      margin: 0 0 14px;
+    }
+
+    .feat b {
+      display: inline;
+    }
+
     /* Screenshot slot — drop assets/screenshot.png in later.
        <img class="shot" src="assets/screenshot.png" alt="miniSCP screenshot"> */
-    .shot { display: block; max-width: 100%; margin: 20px auto; border: 1px solid #ddd; }
+    .shot {
-    .downloads { display: flex; flex-wrap: wrap; gap: 12px; }
+      display: block;
+      max-width: 100%;
+      margin: 20px auto;
+      border: 1px solid #ddd;
+    }
+
+    .downloads {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+    }
+
     .dl {
       flex: 1 1 200px;
       text-decoration: none;
@@ -49,15 +114,46 @@
       padding: 14px 18px;
       text-align: center;
     }
-    .dl:hover { background: #111; color: #fff; }
+
-    .dl small { display: block; color: #888; font-size: 13px; margin-top: 4px; }
+    .dl:hover {
-    .dl:hover small { color: #bbb; }
+      background: #111;
-    .browse { color: #888; font-size: 14px; margin-top: 14px; }
+      color: #fff;
-    .faqtable dt { margin-bottom: 0.4em; font-style: italic; }
+    }
-    .faqtable dd { margin-left: 0; margin-bottom: 1.6em; }
+
-    code { background: #f2f2f2; padding: 1px 5px; }
+    .dl small {
+      display: block;
+      color: #888;
+      font-size: 13px;
+      margin-top: 4px;
+    }
+
+    .dl:hover small {
+      color: #bbb;
+    }
+
+    .browse {
+      color: #888;
+      font-size: 14px;
+      margin-top: 14px;
+    }
+
+    .faqtable dt {
+      margin-bottom: 0.4em;
+      font-style: italic;
+    }
+
+    .faqtable dd {
+      margin-left: 0;
+      margin-bottom: 1.6em;
+    }
+
+    code {
+      background: #f2f2f2;
+      padding: 1px 5px;
+    }
   </style>
 </head>
+
 <body>
   <div class="landing">
     <!-- logo image slot goes here later -->
@@ -78,7 +174,8 @@
   <p>The difference is in the corners. Both panels are fully symmetric &mdash; either side can be
     your local disk or any saved server &mdash; so a copy isn't only up or down. You can move files
     <b>straight from one server to another</b>, remote to remote, without staging them on your
-    machine first.</p>
+    machine first.
+  </p>
 
   <p>It's the same familiar tool, sanded down where the old ones snag.</p>
 
@@ -91,7 +188,16 @@
   <p class="feat"><b>Symmetric panels.</b> Either side is your local disk or any saved server. Every
     panel is equal.</p>
   <p class="feat"><b>Knows your servers already.</b> Reads the hosts from your
-    <code>~/.ssh/config</code>, and imports the saved sessions from your previous client.</p>
+    <code>~/.ssh/config</code>, and imports the saved sessions from your previous client.
+  </p>
+  <p class="feat"><b>Themes.</b> Light, dark, or follow the system &mdash; with a set of accent
+    tones.</p>
+  <p class="feat"><b>macOS and Windows.</b> macOS is the primary target; Windows 11+ (x64) is in
+    beta.</p>
+
+
+  <p><b>What's the same:</b></p>
+
   <p class="feat"><b>Tabs that keep working.</b> Open several sessions at once; transfers keep
     running in background tabs.</p>
   <p class="feat"><b>Edit in place.</b> Open a remote file in your editor &mdash; every save uploads
@@ -104,10 +210,6 @@
   <p class="feat"><b>A queue with an ETA.</b> Per-file speed and estimate, cancel anytime.</p>
   <p class="feat"><b>Permissions.</b> Rename, delete, create folders and files, and change
     permissions (chmod) on remote files.</p>
-  <p class="feat"><b>Themes.</b> Light, dark, or follow the system &mdash; with a set of accent
-    tones.</p>
-  <p class="feat"><b>macOS and Windows.</b> macOS is the primary target; Windows 11+ (x64) is in
-    beta.</p>
 
   <hr>
   <h2 id="download">Download</h2>
@@ -130,7 +232,8 @@
     <dt>macOS says the app is "damaged and can't be opened".</dt>
     <dd>The builds aren't code-signed yet, so macOS quarantines them on download. Clear the
       quarantine flag once and it opens normally:
-      <br><code>xattr -cr /Applications/miniSCP.app</code></dd>
+      <br><code>xattr -cr /Applications/miniSCP.app</code>
+    </dd>
 
     <dt>Windows warns me with a blue SmartScreen box.</dt>
     <dd>The Windows builds aren't signed yet either, so SmartScreen flags them on first run. Choose
@@ -146,4 +249,5 @@
       is just the app &mdash; unzip it anywhere and run it, no install.</dd>
   </dl>
 </body>
+
 </html>