Add "free*" asterisk modal to landing page hero for transparency

Discloses external production dependencies (server, ISP, domain, tunnel,
SMTP, Android phone for SMS) and offers paid hardware/managed options.

Bunker Admin

mkdocs/docs/overrides/lander.html

@@ -1683,6 +1683,136 @@
     .btn-primary:focus-visible, .btn-secondary:focus-visible {
         box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.4);
     }
+
+    /* ============================================
+       FREE ASTERISK MODAL
+       ============================================ */
+    .free-asterisk {
+        color: var(--primary-light);
+        text-decoration: underline;
+        text-decoration-style: dotted;
+        text-underline-offset: 3px;
+        cursor: pointer;
+        transition: color var(--transition);
+    }
+    .free-asterisk:hover {
+        color: #C084FC;
+    }
+
+    .free-modal-backdrop {
+        position: fixed;
+        inset: 0;
+        z-index: 10000;
+        background: rgba(0, 0, 0, 0.6);
+        backdrop-filter: blur(4px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.25s ease, visibility 0.25s ease;
+    }
+    .free-modal-backdrop.active {
+        opacity: 1;
+        visibility: visible;
+    }
+
+    .free-modal {
+        background: var(--bg-card);
+        border: 1px solid var(--border-color);
+        border-radius: var(--radius-lg);
+        box-shadow: var(--shadow-lg);
+        max-width: 520px;
+        width: 90%;
+        padding: 2rem;
+        position: relative;
+        transform: translateY(20px) scale(0.97);
+        transition: transform 0.25s ease;
+    }
+    .free-modal-backdrop.active .free-modal {
+        transform: translateY(0) scale(1);
+    }
+
+    .free-modal-close {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+        background: none;
+        border: none;
+        color: var(--text-muted);
+        font-size: 1.5rem;
+        cursor: pointer;
+        line-height: 1;
+        padding: 0.25rem;
+        transition: color var(--transition);
+    }
+    .free-modal-close:hover {
+        color: var(--text-primary);
+    }
+
+    .free-modal h3 {
+        font-size: 1.25rem;
+        color: var(--text-primary);
+        margin-bottom: 0.5rem;
+    }
+
+    .free-modal .free-modal-intro {
+        color: var(--text-secondary);
+        font-size: 0.9rem;
+        margin-bottom: 1.25rem;
+        line-height: 1.6;
+    }
+
+    .free-modal-list {
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .free-modal-list li {
+        display: flex;
+        align-items: flex-start;
+        gap: 0.75rem;
+        font-size: 0.9rem;
+        color: var(--text-secondary);
+        line-height: 1.5;
+    }
+
+    .free-modal-list .dep-icon {
+        flex-shrink: 0;
+        width: 24px;
+        height: 24px;
+        border-radius: 6px;
+        background: var(--myc-node-bg);
+        border: 1px solid var(--myc-node-border);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.75rem;
+        margin-top: 1px;
+    }
+
+    .free-modal-list strong {
+        color: var(--text-primary);
+        font-weight: 600;
+    }
+
+    .free-modal-footer {
+        margin-top: 1.5rem;
+        padding-top: 1rem;
+        border-top: 1px solid var(--border-color);
+        color: var(--text-muted);
+        font-size: 0.8rem;
+        line-height: 1.5;
+    }
+
+    @media (max-width: 480px) {
+        .free-modal {
+            max-width: 95%;
+            padding: 1.5rem;
+        }
+    }
     </style>
 
 <meta property="og:type" content="website" />
@@ -1795,7 +1925,7 @@
         <p class="hero-subtitle">
             Run your campaigns, canvassing, fundraising, team chat, media, and more &mdash; all on your own infrastructure.
             No corporate surveillance. No foreign interference. No monthly ransoms.
-            A free and open source toolkit built for growing political movements.
+            A <a href="#" class="free-asterisk" id="free-asterisk-link">free*</a> and open source toolkit built for growing political movements.
         </p>
         <div class="hero-cta">
             <a href="mailto:cmlite@bnkops.ca?subject=Request%20to%20Chat%20-%20CMLITE&body=Hi%20CMlite%20Team%2C%20I%20would%20like%20to%20chat!%20Please%20send%20me%20a%20email%20back.%20Cheers%2C%20" class="btn-primary">Schedule a Chat <span aria-hidden="true">&rarr;</span></a>
@@ -2649,6 +2779,50 @@
     </div>
 </footer>
 
+<!-- ============================================
+     FREE* MODAL
+     ============================================ -->
+<div class="free-modal-backdrop" id="free-modal-backdrop">
+    <div class="free-modal" role="dialog" aria-labelledby="free-modal-title" aria-modal="true">
+        <button class="free-modal-close" id="free-modal-close" aria-label="Close">&times;</button>
+        <h3 id="free-modal-title">What does free* mean?</h3>
+        <p class="free-modal-intro">
+            Changemaker Lite is 100% free and open source software &mdash; no license fees, no subscriptions, no vendor lock-in.
+            Running it in production does require a few external dependencies:
+        </p>
+        <ul class="free-modal-list">
+            <li>
+                <span class="dep-icon">&#x1F5A5;</span>
+                <span><strong>A Linux server or hardware</strong> &mdash; something to run the stack on (old laptop, mini PC, VPS)</span>
+            </li>
+            <li>
+                <span class="dep-icon">&#x1F310;</span>
+                <span><strong>An internet connection</strong> &mdash; to serve traffic to the public</span>
+            </li>
+            <li>
+                <span class="dep-icon">&#x1F3F7;</span>
+                <span><strong>A domain name</strong> &mdash; ~$10&ndash;15/yr for a custom domain</span>
+            </li>
+            <li>
+                <span class="dep-icon">&#x1F517;</span>
+                <span><strong>A production URL / tunnel</strong> &mdash; for public-facing deployment (can be deployed privately without one)</span>
+            </li>
+            <li>
+                <span class="dep-icon">&#x2709;</span>
+                <span><strong>An SMTP email provider</strong> &mdash; free tiers exist, but the most capable and secure are paid</span>
+            </li>
+            <li>
+                <span class="dep-icon">&#x1F4F1;</span>
+                <span><strong>An Android phone</strong> &mdash; required for SMS campaigns (uses Termux as a bridge to send texts)</span>
+            </li>
+        </ul>
+        <p class="free-modal-footer">
+            None of these are unique to Changemaker Lite &mdash; any self-hosted platform needs them. The software itself will always be free.
+            Self-host at no cost, or pay for a pre-configured hardware device or a managed deployment.
+        </p>
+    </div>
+</div>
+
 <!-- ============================================
      SCRIPTS
      ============================================ -->
@@ -3358,6 +3532,26 @@
         }
     };
 
+    /* ===========================================
+       FREE* MODAL
+       =========================================== */
+    const FreeModal = {
+        init() {
+            const link = document.getElementById('free-asterisk-link');
+            const backdrop = document.getElementById('free-modal-backdrop');
+            const closeBtn = document.getElementById('free-modal-close');
+            if (!link || !backdrop || !closeBtn) return;
+
+            const open = () => backdrop.classList.add('active');
+            const close = () => backdrop.classList.remove('active');
+
+            link.addEventListener('click', (e) => { e.preventDefault(); open(); });
+            closeBtn.addEventListener('click', close);
+            backdrop.addEventListener('click', (e) => { if (e.target === backdrop) close(); });
+            document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && backdrop.classList.contains('active')) close(); });
+        }
+    };
+
     /* ===========================================
        BOOT
        =========================================== */
@@ -3370,6 +3564,7 @@
         RootNetwork.init();
         FloatingElements.init();
         SmoothScroll.init();
+        FreeModal.init();
         initSearch();
     });