From ef4e0c6b96eadc956c164ba30393e39dbb93055c Mon Sep 17 00:00:00 2001
From: gator <gatordevin@gmail.com>
Date: Wed, 29 Jul 2026 23:07:04 +0000
Subject: [PATCH] Polish: favicon, equal-height SKU cards, mobile nav + legend

---
 index.html | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index e413226..50cebd3 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
 <title>TrekMap — Wish It. Time It. Make It Happen.</title>
 <meta name="description" content="A travel bucket list that lives on a world map — and an LED map on your wall that glows with everywhere you've been and everywhere you're going.">
 <meta name="theme-color" content="#001F3F">
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%23001F3F'/%3E%3Ccircle cx='16' cy='16' r='6' fill='%23E6B800'/%3E%3Ccircle cx='7' cy='9' r='2' fill='%23E6B800' opacity='.5'/%3E%3Ccircle cx='25' cy='23' r='2' fill='%23E6B800' opacity='.5'/%3E%3C/svg%3E">
 <meta property="og:title" content="TrekMap">
 <meta property="og:description" content="A travel bucket list you can hang on the wall.">
 <style>
@@ -58,7 +59,7 @@
   .hint b{color:var(--gold); font-weight:600}
 
   /* ── sections ── */
-  section{padding:104px 0; border-top:1px solid rgba(255,255,255,.05)}
+  section{padding:104px 0; scroll-margin-top:72px; border-top:1px solid rgba(255,255,255,.05)}
   .sec-head{max-width:40rem; margin-bottom:52px}
   .sec-head h2{font-size:clamp(1.9rem,4vw,2.7rem); margin:14px 0 14px}
 
@@ -79,17 +80,18 @@
   .pipe div span{color:var(--gold); font-size:.7rem; letter-spacing:.14em; font-weight:800}
 
   /* ── hardware ── */
-  .skus{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; align-items:start}
-  .sku{background:var(--nightsky); border:1px solid var(--line); border-radius:18px; padding:28px; position:relative}
+  .skus{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; align-items:stretch}
+  .sku{background:var(--nightsky); border:1px solid var(--line); border-radius:18px; padding:28px; position:relative; display:flex; flex-direction:column; height:100%}
   .sku.featured{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 24px 60px -30px rgba(230,184,0,.5)}
   .sku .tag{position:absolute; top:-11px; left:28px; background:var(--gold); color:#00162e;
             font-size:.66rem; font-weight:800; letter-spacing:.12em; padding:4px 10px; border-radius:100px}
   .sku h3{font-size:1.3rem}
   .sku .price{font-size:2.4rem; font-weight:800; margin:12px 0 2px; letter-spacing:-.03em}
   .sku .price small{font-size:.8rem; font-weight:600; color:var(--muted); letter-spacing:0}
-  .sku p{color:var(--muted); font-size:.92rem; margin:12px 0 18px; min-height:3.2em}
-  .sku ul{list-style:none; padding:0; margin:0 0 22px; font-size:.88rem; color:#B7C6D6}
+  .sku p{color:var(--muted); font-size:.92rem; margin:12px 0 18px}
+  .sku ul{list-style:none; padding:0; margin:0 0 22px; flex:1 0 auto; font-size:.88rem; color:#B7C6D6}
   .sku li{padding:7px 0 7px 22px; position:relative; border-top:1px solid rgba(255,255,255,.05)}
+  .sku .btn{margin-top:auto; text-align:center}
   .sku li::before{content:"◆"; position:absolute; left:0; color:var(--gold); font-size:.62rem; top:9px}
   .mini{display:grid; grid-template-columns:repeat(14,1fr); gap:3px; margin-bottom:20px}
   .mini i{aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.07)}
@@ -135,6 +137,9 @@
   }
   @media (max-width:720px){
     nav .links{display:none}
+    nav .btn{margin-left:auto}
+    .hint{flex-wrap:wrap; row-gap:4px}
+    .hint .touch-hide{display:none}
     section{padding:76px 0}
     .sku p{min-height:0}
   }
@@ -167,7 +172,7 @@
         <a class="btn" href="#reserve">Reserve a unit</a>
         <a class="btn ghost" href="https://trekmap.co">Open the app</a>
       </div>
-      <p class="hint"><b>&#9679;</b> bright = been there &nbsp;&middot;&nbsp; <b style="opacity:.45">&#9679;</b> dim = on the list &nbsp;&middot;&nbsp; move your cursor across the map</p>
+      <p class="hint"><b>&#9679;</b> bright = been there <span aria-hidden="true">&nbsp;&middot;&nbsp;</span> <b style="opacity:.45">&#9679;</b> dim = on the list <span class="touch-hide">&nbsp;&middot;&nbsp; move your cursor across the map</span></p>
     </div>
   </section>