Expose demo transport links

sites/ampgateway-online/index.html

@@ -201,7 +201,11 @@
               Public explanation site with interactive topology views, deployment flow,
               and links into the clean docs.
             </p>
-            <a href="https://ampgateway.online">ampgateway.online</a>
+            <div class="transport-links" aria-label="ampgateway.online transport links">
+              <a class="transport-link" href="https://ampgateway.online/">Clearnet</a>
+              <a class="transport-link" href="http://bn5uppe4zrop2ljsmjtoxtc4bhzs42kj4c6zvme565gz6x6l32ico3id.onion/">Tor onion</a>
+              <a class="transport-link" href="http://vfhcumcxtbysxr6wvbpdytb6jpslcqlo3j6e35w7s63el5vsorca.b32.i2p/">I2P b32</a>
+            </div>
           </article>
           <article class="domain-card">
             <p class="domain-label">VPS example</p>
@@ -210,7 +214,11 @@
               Planned all-transport reference deployment on a normal server, useful for
               showing the complete package, state, supervisor, start, address, and health path.
             </p>
-            <a href="https://ampgateway.site">ampgateway.site</a>
+            <div class="transport-links" aria-label="ampgateway.site transport links">
+              <a class="transport-link" href="https://ampgateway.site/">Clearnet</a>
+              <a class="transport-link" href="http://fy2zosxp4oqqcacxcegvwshtmsiiyztnwoinbm46yoig4o3kveidotyd.onion/">Tor onion</a>
+              <a class="transport-link" href="http://zajoo4f5dso64tvtazas27se2galkihgpfgoy636uxm7loo42cdq.b32.i2p/">I2P b32</a>
+            </div>
           </article>
           <article class="domain-card">
             <p class="domain-label">Behind-router example</p>

sites/ampgateway-online/styles.css

@@ -462,13 +462,29 @@ h3 {
   word-break: break-word;
 }
 
-.domain-card a {
+.transport-links {
+  display: grid;
+  gap: 8px;
   margin-top: auto;
+}
+
+.domain-card a {
   color: var(--teal);
   font-weight: 800;
   text-decoration: none;
 }
 
+.transport-link {
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  padding: 8px 10px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: rgba(246, 241, 228, 0.05);
+  word-break: break-word;
+}
+
 .domain-card a:hover,
 .domain-card a:focus-visible {
   text-decoration: underline;

sites/ampgateway-site/index.html

@@ -24,6 +24,7 @@
         <a href="#catalog">Catalog</a>
         <a href="#order">Order</a>
         <a href="#transport-notes">Transport Notes</a>
+        <a href="#live-routes">Live Routes</a>
       </nav>
     </header>
 
@@ -161,6 +162,31 @@
           </article>
         </div>
       </section>
+
+      <section id="live-routes" class="section route-section" aria-labelledby="routes-title">
+        <div class="section-heading">
+          <p class="eyebrow">Live routes</p>
+          <h2 id="routes-title">Same demo, different transports.</h2>
+          <p>
+            These links are normal anchors in the source page, so AMPG carries them into
+            the privacy HTML outputs without JavaScript.
+          </p>
+        </div>
+        <div class="route-grid">
+          <a href="https://ampgateway.site/">
+            <span>Clearnet</span>
+            <strong>ampgateway.site</strong>
+          </a>
+          <a href="http://fy2zosxp4oqqcacxcegvwshtmsiiyztnwoinbm46yoig4o3kveidotyd.onion/">
+            <span>Tor onion</span>
+            <strong>fy2zosxp4oqqcacxcegvwshtmsiiyztnwoinbm46yoig4o3kveidotyd.onion</strong>
+          </a>
+          <a href="http://zajoo4f5dso64tvtazas27se2galkihgpfgoy636uxm7loo42cdq.b32.i2p/">
+            <span>I2P b32</span>
+            <strong>zajoo4f5dso64tvtazas27se2galkihgpfgoy636uxm7loo42cdq.b32.i2p</strong>
+          </a>
+        </div>
+      </section>
     </main>
 
     <footer class="site-footer">

sites/ampgateway-site/styles.css

@@ -313,6 +313,43 @@ h3 {
   font-weight: 800;
 }
 
+.route-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.route-grid a {
+  display: grid;
+  align-content: start;
+  min-height: 150px;
+  gap: 10px;
+  padding: 20px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+  text-decoration: none;
+}
+
+.route-grid a:hover,
+.route-grid a:focus-visible {
+  border-color: var(--signal);
+}
+
+.route-grid span {
+  color: var(--gold);
+  font-size: 0.76rem;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.route-grid strong {
+  color: var(--signal);
+  font-size: 1rem;
+  overflow-wrap: anywhere;
+}
+
 .site-footer {
   display: flex;
   justify-content: space-between;
@@ -343,7 +380,8 @@ h3 {
   }
 
   .catalog-grid,
-  .notes-grid {
+  .notes-grid,
+  .route-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
@@ -354,7 +392,8 @@ h3 {
   }
 
   .catalog-grid,
-  .notes-grid {
+  .notes-grid,
+  .route-grid {
     grid-template-columns: 1fr;
   }