fix: remove Book a free demo button from 4 blog posts

content: add free trial CTA panel (email + location + submit) to article modal lower-right

index.html

@@ -2083,6 +2083,167 @@
                 color: var(--gold);
             }
 
+            /* ── Article CTA panel ─────────────────────────────────────────── */
+            #article-cta-panel {
+                position: absolute;
+                bottom: 28px;
+                right: 28px;
+                width: 234px;
+                background: #fdf6ee;
+                border: 1px solid rgba(93, 64, 55, 0.22);
+                border-top: 3px solid var(--gold);
+                border-radius: 6px;
+                box-shadow:
+                    0 8px 32px rgba(62, 39, 35, 0.18),
+                    0 2px 8px rgba(0, 0, 0, 0.08);
+                padding: 18px 16px 16px;
+                z-index: 10;
+            }
+
+            .article-cta-heading {
+                font-family: Georgia, "Times New Roman", serif;
+                font-size: 0.83rem;
+                font-weight: 700;
+                color: #3e2723;
+                margin: 0 0 3px;
+                line-height: 1.3;
+            }
+
+            .article-cta-sub {
+                font-size: 0.71rem;
+                color: #8d6e63;
+                font-style: italic;
+                margin: 0 0 12px;
+            }
+
+            .article-cta-field {
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+                background: #fff8f0;
+                border: 1px solid rgba(93, 64, 55, 0.22);
+                border-radius: 4px;
+                padding: 8px 10px;
+                font-family: "Segoe UI", system-ui, sans-serif;
+                font-size: 0.8rem;
+                color: #3e2723;
+                margin-bottom: 8px;
+                outline: none;
+                transition: border-color 0.2s;
+            }
+
+            .article-cta-field::placeholder { color: #a1887f; }
+            .article-cta-field:focus { border-color: var(--gold); }
+
+            .article-cta-loc-wrap {
+                position: relative;
+                margin-bottom: 8px;
+            }
+
+            .article-cta-loc-btn {
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+                background: #fff8f0;
+                border: 1px solid rgba(93, 64, 55, 0.22);
+                border-radius: 4px;
+                padding: 8px 28px 8px 10px;
+                font-family: "Segoe UI", system-ui, sans-serif;
+                font-size: 0.8rem;
+                color: #a1887f;
+                text-align: left;
+                cursor: pointer;
+                outline: none;
+                transition: border-color 0.2s;
+                position: relative;
+            }
+
+            .article-cta-loc-btn.has-value { color: #3e2723; }
+            .article-cta-loc-btn:focus { border-color: var(--gold); }
+
+            .article-cta-loc-btn::after {
+                content: "\25BE";
+                position: absolute;
+                right: 10px;
+                top: 50%;
+                transform: translateY(-50%);
+                color: #8d6e63;
+                font-size: 0.75rem;
+                pointer-events: none;
+            }
+
+            .article-cta-loc-menu {
+                display: none;
+                position: absolute;
+                bottom: calc(100% + 4px);
+                left: 0;
+                right: 0;
+                background: #fdf6ee;
+                border: 1px solid rgba(93, 64, 55, 0.22);
+                border-radius: 4px;
+                box-shadow: 0 4px 16px rgba(62, 39, 35, 0.15);
+                z-index: 30;
+                overflow: hidden;
+            }
+
+            .article-cta-loc-wrap.open .article-cta-loc-menu { display: block; }
+
+            .article-cta-loc-opt {
+                display: block;
+                width: 100%;
+                text-align: left;
+                padding: 8px 12px;
+                background: none;
+                border: none;
+                font-family: "Segoe UI", system-ui, sans-serif;
+                font-size: 0.8rem;
+                color: #4e342e;
+                cursor: pointer;
+                transition: background 0.15s;
+            }
+
+            .article-cta-loc-opt:hover,
+            .article-cta-loc-opt.is-selected {
+                background: rgba(230, 81, 0, 0.08);
+                color: var(--gold);
+            }
+
+            .article-cta-submit {
+                display: block;
+                width: 100%;
+                padding: 9px 12px;
+                background: var(--gold);
+                color: #fff;
+                border: none;
+                border-radius: 4px;
+                font-family: "Segoe UI", system-ui, sans-serif;
+                font-size: 0.8rem;
+                font-weight: 700;
+                letter-spacing: 0.04em;
+                cursor: pointer;
+                transition: background 0.2s;
+            }
+
+            .article-cta-submit:hover { background: var(--gold-hi); }
+            .article-cta-submit:disabled { opacity: 0.65; cursor: default; }
+
+            #article-cta-confirm { text-align: center; }
+
+            .article-cta-confirm-title {
+                font-family: Georgia, "Times New Roman", serif;
+                font-size: 0.95rem;
+                color: #3e2723;
+                margin: 0 0 6px;
+            }
+
+            .article-cta-confirm-sub {
+                font-family: "Segoe UI", system-ui, sans-serif;
+                font-size: 0.75rem;
+                color: #8d6e63;
+                margin: 0;
+                line-height: 1.5;
+            }
+
             @media (max-width: 860px) {
                 #article-box {
                     height: 90vh;
@@ -2100,6 +2261,7 @@
                     font-size: 0.95rem;
                     column-width: 280px;
                 }
+                #article-cta-panel { display: none; }
             }
 
             #modal-confirm .confirm-title {
@@ -2465,6 +2627,53 @@
                     <div class="article-date" id="article-date"></div>
                 </div>
                 <div class="article-body" id="article-body"></div>
+
+                <div id="article-cta-panel">
+                    <div id="article-cta-form-wrap">
+                        <p class="article-cta-heading">Try ODOO Free &mdash; 4&nbsp;Weeks</p>
+                        <p class="article-cta-sub">No credit card required</p>
+                        <form id="article-cta-form" novalidate>
+                            <input
+                                type="email"
+                                id="article-cta-email"
+                                name="email"
+                                class="article-cta-field"
+                                placeholder="your@email.com"
+                                required
+                            />
+                            <div class="article-cta-loc-wrap" id="article-cta-loc-wrap">
+                                <button
+                                    type="button"
+                                    class="article-cta-loc-btn"
+                                    id="article-cta-loc-btn"
+                                    aria-haspopup="listbox"
+                                    aria-expanded="false"
+                                >Select server location</button>
+                                <div
+                                    class="article-cta-loc-menu"
+                                    id="article-cta-loc-menu"
+                                    role="listbox"
+                                >
+                                    <button type="button" class="article-cta-loc-opt" data-value="Boston, US">&#127482;&#127480; Boston</button>
+                                    <button type="button" class="article-cta-loc-opt" data-value="Manchester, UK">&#127468;&#127463; Manchester</button>
+                                    <button type="button" class="article-cta-loc-opt" data-value="Mumbai, IN">&#127470;&#127475; Mumbai</button>
+                                    <button type="button" class="article-cta-loc-opt" data-value="Sao Paulo, BR">&#127463;&#127479; S&atilde;o Paulo</button>
+                                    <button type="button" class="article-cta-loc-opt" data-value="Meppel, NL">&#127475;&#127473; Meppel</button>
+                                    <button type="button" class="article-cta-loc-opt" data-value="Sydney, AU">&#127462;&#127482; Sydney</button>
+                                </div>
+                                <input type="hidden" id="article-cta-location" name="server_location" value="" />
+                            </div>
+                            <input type="hidden" name="product" value="odoo_19" />
+                            <input type="hidden" name="plan" value="NGO Free Trial" />
+                            <button type="submit" class="article-cta-submit">Start Free Trial &#8594;</button>
+                        </form>
+                    </div>
+                    <div id="article-cta-confirm" style="display:none">
+                        <p class="article-cta-confirm-title">Thank you! &#127881;</p>
+                        <p class="article-cta-confirm-sub">We&rsquo;ve received your request. A specialist will be in touch within one business day.</p>
+                    </div>
+                </div>
+
             </div>
         </div>
 
@@ -4038,6 +4247,91 @@
             })();
         </script>
 
+        <script>
+            (function () {
+                var WEBHOOK = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c25169c6-4234-4b47-8e74-612b9539da0a";
+                var form       = document.getElementById('article-cta-form');
+                var formWrap   = document.getElementById('article-cta-form-wrap');
+                var confirmDiv = document.getElementById('article-cta-confirm');
+                var locWrap    = document.getElementById('article-cta-loc-wrap');
+                var locBtn     = document.getElementById('article-cta-loc-btn');
+                var locMenu    = document.getElementById('article-cta-loc-menu');
+                var locField   = document.getElementById('article-cta-location');
+                if (!form) return;
+
+                function closeLoc() {
+                    locWrap.classList.remove('open');
+                    locBtn.setAttribute('aria-expanded', 'false');
+                }
+                function openLoc() {
+                    locWrap.classList.add('open');
+                    locBtn.setAttribute('aria-expanded', 'true');
+                }
+
+                locBtn.addEventListener('click', function () {
+                    locWrap.classList.contains('open') ? closeLoc() : openLoc();
+                });
+
+                locMenu.querySelectorAll('.article-cta-loc-opt').forEach(function (opt) {
+                    opt.addEventListener('click', function () {
+                        var val = opt.getAttribute('data-value') || '';
+                        locField.value = val;
+                        locMenu.querySelectorAll('.article-cta-loc-opt').forEach(function (o) {
+                            o.classList.toggle('is-selected', o === opt);
+                        });
+                        locBtn.textContent = opt.textContent.trim();
+                        locBtn.classList.add('has-value');
+                        closeLoc();
+                    });
+                });
+
+                document.addEventListener('click', function (e) {
+                    if (!locWrap.contains(e.target)) closeLoc();
+                });
+
+                form.addEventListener('submit', function (e) {
+                    e.preventDefault();
+                    var btn = form.querySelector('.article-cta-submit');
+                    var fd  = new FormData(form);
+                    if (window._mbsTracking) fd = window._mbsTracking.appendToFormData(fd);
+                    btn.textContent = 'Sending…';
+                    btn.disabled = true;
+                    fetch(WEBHOOK, { method: 'POST', body: fd })
+                        .then(function () {
+                            formWrap.style.display = 'none';
+                            confirmDiv.style.display = 'block';
+                        })
+                        .catch(function () {
+                            formWrap.style.display = 'none';
+                            confirmDiv.style.display = 'block';
+                        });
+                });
+
+                var articleOverlay = document.getElementById('article-overlay');
+                if (articleOverlay) {
+                    var observer = new MutationObserver(function () {
+                        if (!articleOverlay.classList.contains('is-open')) {
+                            setTimeout(function () {
+                                formWrap.style.display = '';
+                                confirmDiv.style.display = 'none';
+                                form.reset();
+                                locField.value = '';
+                                locBtn.textContent = 'Select server location';
+                                locBtn.classList.remove('has-value');
+                                locMenu.querySelectorAll('.article-cta-loc-opt').forEach(function (o) {
+                                    o.classList.remove('is-selected');
+                                });
+                                var btn = form.querySelector('.article-cta-submit');
+                                btn.textContent = 'Start Free Trial \u2192';
+                                btn.disabled = false;
+                            }, 300);
+                        }
+                    });
+                    observer.observe(articleOverlay, { attributes: true, attributeFilter: ['class'] });
+                }
+            })();
+        </script>
+
         <script src="https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.js"></script>
     </body>
 </html>