// styles.el - Page shell: DOCTYPE, <head>, CSS, and the minimal
// inline <script> for scroll-reveal and nav scroll effect.
//
// This file contains NO application logic - only the outer HTML
// document structure and presentation layer.
//
// CSS is kept as a string constant here to keep component files
// free of style concerns. The inline <script> at the bottom is
// the absolute minimum needed for two progressive-enhancement
// behaviours that cannot be done in pure CSS today:
//   1. IntersectionObserver scroll-reveal (adds .visible to .reveal)
//   2. Nav background on scroll (adds .scrolled to #nav)
//
// Both degrade gracefully: without JS, the page is fully readable
// and all content is visible (reveal elements are visible by default
// in the noscript fallback style).

fn page_open() -> String {
    return "<!DOCTYPE html>
<html lang=\"en\">
<head>
  <meta charset=\"UTF-8\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
  <title>Neuron - The AI That Remembers You</title>
  <meta name=\"description\" content=\"Every AI resets when you close the tab. Neuron doesn&#39;t. Runs on your machine. Remembers everything. Cheaper than ChatGPT on day one.\">
  <link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/assets/favicon-16.png\">
  <link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/assets/favicon-32.png\">
  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">
  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>
  <link href=\"https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:      #FAFAF8;
      --bg2:     #F0F0EC;
      --card:    #FFFFFF;
      --navy:    #0052A0;
      --navy-d:  rgba(0,82,160,.06);
      --navy-m:  rgba(0,82,160,.12);
      --navy-b:  rgba(0,82,160,.20);
      --navy-65: rgba(0,82,160,.65);
      --navy-85: rgba(0,82,160,.85);
      --t1:      #0D0D14;
      --t2:      #3A3A4A;
      --t3:      #6B6B7E;
      --t4:      rgba(13,13,20,.35);
      --border:  rgba(0,0,0,.07);
      --border2: rgba(0,0,0,.13);
      --head:    'Playfair Display', Georgia, serif;
      --body:    'IBM Plex Sans', system-ui, sans-serif;
    }

    html { scroll-behavior: smooth; }
    html, body {
      background: var(--bg);
      color: var(--t1);
      font-family: var(--body);
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background-image:
        linear-gradient(rgba(0,0,0,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.022) 1px, transparent 1px);
      background-size: 48px 48px;
    }

    .container    { max-width: 1280px; margin: 0 auto; padding: 0 2.5rem; }
    .container-md { max-width: 900px;  margin: 0 auto; padding: 0 2.5rem; }
    .container-lg { max-width: 1100px; margin: 0 auto; padding: 0 2.5rem; }
    @media (max-width: 480px) {
      .container, .container-md, .container-lg { padding: 0 1.25rem; }
    }

    section { position: relative; z-index: 1; overflow-x: clip; }

    .label {
      font-family: var(--body);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--navy-65);
    }

    .display-xl {
      font-family: var(--head);
      font-size: clamp(2.8rem, 6vw, 5rem);
      font-weight: 600;
      line-height: 1.06;
      letter-spacing: -0.02em;
      color: var(--t1);
    }

    .display-lg {
      font-family: var(--head);
      font-size: clamp(2rem, 4vw, 3.25rem);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--t1);
    }

    .display-md {
      font-family: var(--head);
      font-size: clamp(1.4rem, 2.5vw, 1.875rem);
      font-weight: 600;
      line-height: 1.15;
      color: var(--t1);
    }

    .gold {
      background: linear-gradient(135deg, #003d7a 0%, #0078D4 50%, #0052A0 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .ink-muted { color: var(--t2); }
    .ink-faint  { color: var(--t3); }

    .navy-line {
      height: 1px;
      background: linear-gradient(90deg, rgba(0,82,160,.30) 0%, rgba(0,82,160,.08) 100%);
    }
    .navy-line-center {
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(0,82,160,.35) 50%, transparent 100%);
    }
    .navy-line-left {
      height: 1px;
      background: linear-gradient(90deg, rgba(0,82,160,.40), transparent);
    }

    .card-dark {
      background: var(--card);
      border: 1px solid rgba(0,0,0,.07);
      box-shadow: 0 2px 12px rgba(13,13,20,.04);
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      font-family: var(--body);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      text-decoration: none;
      color: #fff;
      background: var(--navy);
      padding: 1rem 2rem;
      border: none;
      cursor: pointer;
      transition: background 300ms, box-shadow 300ms;
      box-shadow: 0 2px 16px rgba(0,82,160,.20);
    }
    .btn-primary:hover { background: #0078D4; }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      font-family: var(--body);
      font-size: 0.75rem;
      font-weight: 400;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--t2);
      background: transparent;
      padding: 1rem 2rem;
      border: 1px solid var(--border2);
      cursor: pointer;
      transition: border-color 300ms, color 300ms;
    }
    .btn-ghost:hover { border-color: rgba(0,82,160,.35); color: var(--t1); }

    /* Scroll reveal - elements start invisible; JS adds .visible */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    /* Noscript fallback: make everything visible when JS is unavailable */
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
    }

    /* ── NAV ─────────────────────────────────────────────────────────────────── */

    #nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      transition: background 500ms, border-color 500ms;
    }
    #nav.scrolled {
      background: rgba(250,250,248,.95);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }

    .nav-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 2rem;
      height: 4rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }

    .nav-logo img { height: 2rem; width: auto; display: block; }

    /* ── Desktop links ───────────────────────────────────────────── */
    .nav-links {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      flex-wrap: nowrap;
    }

    .nav-link {
      font-family: var(--body);
      font-size: 0.675rem;
      font-weight: 400;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--t3);
      text-decoration: none;
      white-space: nowrap;
      transition: color 200ms;
    }
    .nav-link:hover { color: var(--t1); }
    .nav-link.cta { color: var(--navy); }
    .nav-link.cta:hover { color: #0078D4; }

    /* ── Nav dropdown ─────────────────────────────────────────────────────── */
    .nav-dropdown { position: relative; display: flex; align-items: center; }
    .nav-dropdown-btn {
      background: none; border: none; cursor: pointer; padding: 0;
      font-family: var(--body); font-size: 0.8125rem; font-weight: 400;
      letter-spacing: 0.02em; color: var(--t2); transition: color 200ms;
    }
    .nav-dropdown-btn:hover { color: var(--t1); }
    .nav-dropdown-menu {
      display: none; position: absolute; top: calc(100% + 0.75rem); left: 50%;
      transform: translateX(-50%); background: #fff;
      border: 1px solid var(--border2); box-shadow: 0 8px 32px rgba(0,0,0,.10);
      min-width: 160px; flex-direction: column; z-index: 200; padding: 0.375rem 0;
    }
    .nav-dropdown.open .nav-dropdown-menu { display: flex; }
    .nav-dropdown-item {
      font-family: var(--body); font-size: 0.8125rem; font-weight: 400;
      color: var(--t2); text-decoration: none; padding: 0.5rem 1.25rem;
      transition: background 150ms, color 150ms; white-space: nowrap;
    }
    .nav-dropdown-item:hover { background: var(--bg2); color: var(--t1); }

    .nav-cta {
      font-family: var(--body);
      font-size: 0.675rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: #fff;
      background: var(--navy);
      text-decoration: none;
      padding: 0.575rem 1.1rem;
      white-space: nowrap;
      box-shadow: 0 2px 12px rgba(0,82,160,.20);
      transition: background 300ms;
    }
    .nav-cta:hover { background: #0078D4; }

    /* ── Hamburger button ────────────────────────────────────────── */
    .nav-hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px 4px;
      z-index: 101;
      -webkit-tap-highlight-color: transparent;
    }
    .nav-hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--t1);
      border-radius: 1px;
      transition: transform 280ms ease, opacity 200ms ease;
      transform-origin: center;
    }
    .nav-hamburger[aria-expanded=\"true\"] span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    .nav-hamburger[aria-expanded=\"true\"] span:nth-child(2) {
      opacity: 0;
      transform: scaleX(0);
    }
    .nav-hamburger[aria-expanded=\"true\"] span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    /* ── Mobile menu ─────────────────────────────────────────────── */
    .nav-mobile {
      display: none;
      position: absolute;
      top: 4rem;
      left: 0; right: 0;
      background: rgba(250,250,248,.98);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
      padding: 0.5rem 0 1.5rem;
      flex-direction: column;
      box-shadow: 0 8px 32px rgba(0,0,0,.08);
    }
    .nav-mobile.open { display: flex; }
    .nav-mobile-link {
      display: block;
      padding: 0.875rem 2rem;
      font-family: var(--body);
      font-size: 0.75rem;
      font-weight: 400;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--t2);
      text-decoration: none;
      border-bottom: 1px solid rgba(0,0,0,.05);
      transition: color 150ms, background 150ms;
    }
    .nav-mobile-link:last-child { border-bottom: none; }
    .nav-mobile-link:hover { color: var(--t1); background: rgba(0,82,160,.03); }
    .nav-mobile-link.cta { color: var(--navy); }
    .nav-mobile-cta {
      display: block;
      margin: 1rem 2rem 0;
      padding: 0.8rem 1.5rem;
      text-align: center;
      font-family: var(--body);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: #fff;
      background: var(--navy);
      text-decoration: none;
    }

    /* ── Responsive breakpoints ──────────────────────────────────── */
    @media (max-width: 1060px) {
      .nav-links { display: none; }
      .nav-hamburger { display: flex; }
    }
    @media (min-width: 1061px) {
      .nav-mobile { display: none !important; }
      .nav-hamburger { display: none !important; }
    }

    /* ── HERO ───────────────────────────────────────────────────────────────── */

    #hero {
      padding: clamp(7rem, 18vh, 11rem) clamp(1.25rem, 5vw, 2.5rem) clamp(5rem, 12vh, 8rem);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      overflow: hidden;
    }

    #hero .glow-tl {
      position: absolute;
      top: -10%; left: -5%;
      width: 60%; height: 70%;
      background: radial-gradient(circle, rgba(0,82,160,.07) 0%, transparent 70%);
      pointer-events: none;
    }
    #hero .glow-br {
      position: absolute;
      bottom: -10%; right: -5%;
      width: 55%; height: 65%;
      background: radial-gradient(circle, rgba(0,120,212,.06) 0%, transparent 70%);
      pointer-events: none;
    }

    .hero-label { margin-bottom: 2rem; }
    .hero-headline { max-width: 56rem; margin-bottom: 1.5rem; }
    .hero-sub {
      font-family: var(--body);
      font-weight: 300;
      font-size: clamp(1rem, 2vw, 1.25rem);
      color: var(--t2);
      line-height: 1.7;
      max-width: 36rem;
      margin-bottom: 3rem;
    }

    .hero-ctas { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; }

    .hero-scroll {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      margin-top: 4rem;
      opacity: 0;
      animation: fadeIn 600ms ease 700ms forwards;
    }
    .hero-scroll span {
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--t3);
    }
    .hero-scroll-line {
      width: 1px; height: 2.5rem;
      background: linear-gradient(to bottom, var(--t3), transparent);
    }

    @keyframes fadeIn { to { opacity: 1; } }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
    .animate-up-1 { animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.1s both; }
    .animate-up-2 { animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.2s both; }
    .animate-up-3 { animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.3s both; }
    .animate-up-5 { animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.5s both; }

    /* ── PILLARS ─────────────────────────────────────────────────────────────── */

    #pillars {
      padding: 8rem 2.5rem;
      background: var(--bg2);
    }

    .pillars-label { margin-bottom: 4rem; display: flex; align-items: center; gap: 1.5rem; }
    .pillars-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    @media (max-width: 900px) { .pillars-grid { grid-template-columns: 1fr; } }

    .pillar-card {
      padding: 2.5rem 3rem;
      display: flex;
      flex-direction: column;
    }
    .pillar-numeral {
      font-family: var(--head);
      font-size: 3rem;
      font-weight: 600;
      color: rgba(0,82,160,.22);
      display: block;
      margin-bottom: 2rem;
    }
    .pillar-title { margin-bottom: 1.25rem; }
    .pillar-rule {
      width: 3rem; height: 1px;
      background: rgba(0,82,160,.30);
      margin-bottom: 1.5rem;
      transition: width 700ms ease;
    }
    .pillar-card:hover .pillar-rule { width: 100%; }
    .pillar-body {
      font-family: var(--body);
      font-weight: 300;
      font-size: 0.95rem;
      color: var(--t2);
      line-height: 1.75;
      flex: 1;
    }
    .pillar-detail {
      margin-top: 2rem;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(0,82,160,.45);
    }

    /* ── HOW IT WORKS ─────────────────────────────────────────────────────────── */

    #how-it-works {
      padding: 8rem 2.5rem 4rem;
    }

    .hiw-header { margin-bottom: 5rem; }
    .hiw-label-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.25rem; }

    .steps-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3rem 2rem;
      position: relative;
    }

    .steps-grid::before {
      content: '';
      position: absolute;
      top: 1.5rem;
      left: 2rem; right: 2rem;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0,82,160,.15) 10%, rgba(0,82,160,.25) 50%, rgba(0,82,160,.15) 90%, transparent);
      pointer-events: none;
    }
    @media (max-width: 900px) {
      .steps-grid { grid-template-columns: 1fr; }
      .steps-grid::before { display: none; }
    }

    .step-circle-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
    .step-circle {
      width: 3rem; height: 3rem; border-radius: 50%;
      border: 1.5px solid rgba(0,82,160,.45);
      background: var(--bg);
      display: flex; align-items: center; justify-content: center;
      position: relative; z-index: 1;
      flex-shrink: 0;
    }
    .step-num {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      color: rgba(0,82,160,.80);
    }
    .step-aside {
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(0,82,160,.80);
    }
    .step-title { margin-bottom: 1rem; }
    .step-body {
      font-family: var(--body);
      font-weight: 300;
      font-size: 0.95rem;
      color: var(--t2);
      line-height: 1.75;
    }

    /* ── INFERENCE ───────────────────────────────────────────────────────────── */

    #inference {
      padding: 4rem 2.5rem 6rem;
    }

    .inference-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6rem;
      align-items: center;
    }
    @media (max-width: 900px) { .inference-grid { grid-template-columns: 1fr; gap: 3rem; } }

    .inference-label-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; }
    .inference-headline { margin-bottom: 1.5rem; }
    .inference-body {
      font-family: var(--body);
      font-weight: 300;
      font-size: 1rem;
      color: var(--t2);
      line-height: 1.8;
      margin-bottom: 1.5rem;
    }

    .stat-row {
      border-top: 1px solid rgba(0,82,160,.15);
      padding: 1.5rem 0;
    }
    .stat-row:last-child { border-bottom: 1px solid rgba(0,82,160,.15); }
    .stat-row-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 0.5rem; }
    .stat-num {
      font-family: var(--head);
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--navy);
    }
    .stat-label {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: var(--navy);
    }
    .stat-body {
      font-family: var(--body);
      font-weight: 300;
      font-size: 0.875rem;
      color: var(--t2);
      line-height: 1.7;
    }

    /* ── EFFICIENCY ──────────────────────────────────────────────────────────── */

    #efficiency {
      padding: 5rem 2.5rem;
    }

    .efficiency-header { margin-bottom: 4rem; }
    .efficiency-label-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.25rem; }
    .efficiency-sub {
      font-family: var(--body);
      font-weight: 300;
      font-size: 1rem;
      color: var(--t2);
      line-height: 1.75;
      max-width: 36rem;
    }

    .efficiency-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-bottom: 3.5rem;
    }
    @media (max-width: 900px) { .efficiency-grid { grid-template-columns: 1fr; } }

    .efficiency-card {
      padding: 2.5rem;
      text-align: center;
    }
    .efficiency-icon {
      width: 4rem; height: 4rem;
      border-radius: 50%;
      border: 1.5px solid rgba(0,82,160,.20);
      background: rgba(0,82,160,.04);
      color: rgba(0,82,160,.70);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 2rem;
    }
    .efficiency-stat {
      font-family: var(--head);
      font-size: 1.75rem;
      font-weight: 600;
      color: var(--navy);
      margin-bottom: 0.75rem;
    }
    .efficiency-title {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: var(--navy);
      margin-bottom: 1.25rem;
    }
    .efficiency-rule {
      width: 2.5rem; height: 1px;
      background: rgba(0,82,160,.25);
      margin: 0 auto 1.5rem;
      transition: width 700ms ease;
    }
    .efficiency-card:hover .efficiency-rule { width: 60%; }
    .efficiency-body {
      font-family: var(--body);
      font-weight: 300;
      font-size: 0.875rem;
      color: var(--t2);
      line-height: 1.75;
    }

    .efficiency-pullquote {
      border-left: 2px solid rgba(0,82,160,.25);
      padding: 0.25rem 0 0.25rem 1.5rem;
      max-width: 40rem;
    }
    .efficiency-pullquote p {
      font-family: var(--body);
      font-weight: 400;
      font-size: 0.875rem;
      color: rgba(0,82,160,.65);
      line-height: 1.75;
    }

    /* ── ENTERPRISE ──────────────────────────────────────────────────────────── */

    #enterprise {
      padding: 8rem 2.5rem;
      background: var(--bg2);
    }

    .enterprise-header { margin-bottom: 4rem; }
    .enterprise-label-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.25rem; }
    .enterprise-head-row {
      display: flex; flex-wrap: wrap;
      align-items: flex-end; justify-content: space-between;
      gap: 2rem;
    }

    .enterprise-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
      margin-bottom: 2.5rem;
    }
    @media (max-width: 768px) { .enterprise-grid { grid-template-columns: 1fr; } }

    .enterprise-cap {
      padding: 2.5rem;
    }
    .enterprise-cap h3 { margin-bottom: 1.25rem; }
    .enterprise-cap-rule {
      width: 3rem; height: 1px;
      background: rgba(0,82,160,.30);
      margin-bottom: 1.5rem;
      transition: width 700ms ease;
    }
    .enterprise-cap:hover .enterprise-cap-rule { width: 100%; }
    .enterprise-cap-body {
      font-family: var(--body);
      font-weight: 300;
      font-size: 0.9rem;
      color: var(--t2);
      line-height: 1.75;
    }

    .enterprise-box {
      border-top: 2px solid rgba(0,82,160,.15);
      background: rgba(0,82,160,.03);
      padding: clamp(1.5rem, 4vw, 3rem);
    }

    .ent-who-label {
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(0,82,160,.65);
      margin-bottom: 1rem;
    }
    .ent-who-body {
      font-family: var(--body);
      font-weight: 300;
      font-size: 0.9375rem;
      color: var(--t1);
      line-height: 1.75;
      margin-bottom: 0.75rem;
    }
    .ent-who-note {
      font-size: 0.875rem;
      color: var(--t2);
      line-height: 1.6;
      margin-bottom: 2.5rem;
    }

    .ent-how-row { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: flex-start; }
    .ent-how-label { flex-shrink: 0; width: 10rem; }
    .ent-steps { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
    @media (max-width: 768px) { .ent-steps { grid-template-columns: 1fr; } }
    .ent-step-num { font-family: monospace; font-size: 0.75rem; color: rgba(0,82,160,.40); margin-bottom: 0.75rem; }
    .ent-step-title { font-size: 0.875rem; font-weight: 500; color: var(--t1); margin-bottom: 0.5rem; }
    .ent-step-body { font-family: var(--body); font-weight: 300; font-size: 0.875rem; color: var(--t2); line-height: 1.7; }

    .ent-terms-row {
      border-top: 1px solid rgba(0,82,160,.10);
      margin-top: 2.5rem;
      padding-top: 2rem;
      display: flex; flex-wrap: wrap;
      align-items: center; justify-content: space-between;
      gap: 1rem;
    }
    .ent-terms-text { font-size: 0.875rem; color: var(--t2); max-width: 32rem; }
    .ent-terms-link {
      font-size: 0.75rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(0,82,160,.70);
      text-decoration: none;
      transition: color 200ms;
      white-space: nowrap;
    }
    .ent-terms-link:hover { color: var(--navy); }

    .ent-badge {
      display: inline-flex;
      align-items: center; gap: 0.5rem;
      border: 1px solid rgba(0,82,160,.20);
      background: rgba(0,82,160,.04);
      padding: 0.5rem 1rem;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(0,82,160,.75);
      margin-bottom: 0.75rem;
    }
    .ent-badge-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--navy);
      opacity: 0.6;
      flex-shrink: 0;
    }

    /* ── MISSION ─────────────────────────────────────────────────────────────── */

    #mission {
      padding: 8rem 2.5rem;
    }

    .mission-origin { max-width: 48rem; margin: 0 auto 5rem; text-align: center; }
    .mission-label-row { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; }
    .mission-headline { margin-bottom: 3rem; }
    .mission-body-para {
      font-family: var(--body);
      font-weight: 400;
      font-size: clamp(0.9rem, 1.5vw, 1.0625rem);
      color: var(--t2);
      line-height: 1.9;
      margin-bottom: 1.5rem;
    }
    .mission-body-emphasis strong { color: var(--t1); }

    .mission-bigtech {
      max-width: 48rem;
      margin: 0 auto 6rem;
      border-left: 3px solid var(--navy);
      padding-left: 1.5rem;
    }
    .mission-bigtech-label {
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(0,82,160,.65);
      margin-bottom: 1rem;
    }
    .mission-bigtech p {
      font-family: var(--body);
      font-weight: 400;
      font-size: 0.9375rem;
      line-height: 1.8;
      margin-bottom: 1rem;
      color: var(--t1);
    }
    .mission-bigtech p.muted { color: var(--t2); }
    .mission-bigtech a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

    .mission-problems { max-width: 64rem; margin: 0 auto; }
    .mission-sub-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 3.5rem; }
    .mission-sub-line { height: 1px; width: 3rem; background: rgba(0,82,160,.40); }

    .problems-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
    }
    @media (max-width: 768px) { .problems-grid { grid-template-columns: 1fr; } }

    .problem-item {
      border-top: 1px solid rgba(0,82,160,.15);
      padding: 2rem 3rem 2rem 0;
    }
    .problem-item:nth-child(even) {
      padding: 2rem 0 2rem 3rem;
      border-left: 1px solid rgba(0,82,160,.10);
    }
    @media (max-width: 768px) {
      .problem-item { padding: 2rem 0; }
      .problem-item:nth-child(even) { padding: 2rem 0; border-left: none; }
    }
    .problems-grid-bottom { border-top: 1px solid rgba(0,82,160,.15); grid-column: 1 / -1; }
    .problem-label {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--navy);
      margin-bottom: 0.75rem;
    }
    .problem-body {
      font-family: var(--body);
      font-weight: 400;
      font-size: 0.875rem;
      color: var(--t2);
      line-height: 1.75;
    }

    .mission-closer {
      text-align: center;
      margin-top: 4rem;
      max-width: 40rem;
      margin-left: auto;
      margin-right: auto;
    }
    .mission-closer p {
      font-family: var(--head);
      font-size: clamp(1.25rem, 2.5vw, 1.75rem);
      font-weight: 600;
      color: var(--t1);
      line-height: 1.35;
    }
    .mission-closer span { color: var(--navy); }

    /* ── LOCAL FIRST ─────────────────────────────────────────────────────────── */

    #local-first {
      padding: 8rem 2.5rem 5rem;
      background: var(--bg2);
      position: relative;
    }
    #local-first::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--navy) 0%, rgba(0,82,160,.20) 60%, transparent 100%);
    }

    .lf-label-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 4rem; }

    .lf-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6rem;
      align-items: start;
    }
    @media (max-width: 900px) { .lf-grid { grid-template-columns: 1fr; gap: 3rem; } }

    .lf-headline { margin-bottom: 2rem; }
    .lf-manifesto-para {
      font-family: var(--body);
      font-weight: 300;
      font-size: 0.9375rem;
      color: var(--t2);
      line-height: 1.85;
      margin-bottom: 1.25rem;
    }
    .lf-manifesto-closer {
      border-left: 2px solid var(--navy);
      padding-left: 1.25rem;
      margin-top: 2rem;
    }
    .lf-manifesto-closer p {
      font-family: var(--body);
      font-weight: 400;
      font-size: 0.9375rem;
      color: var(--t1);
      line-height: 1.8;
    }

    .lf-principles { position: sticky; top: 6rem; }
    .lf-principle {
      border-top: 1px solid rgba(0,82,160,.15);
      padding: 1.75rem 0;
    }
    .lf-principle:last-child { border-bottom: 1px solid rgba(0,82,160,.15); }
    .lf-principle-label {
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--navy);
      margin-bottom: 0.5rem;
    }
    .lf-principle-body {
      font-family: var(--body);
      font-weight: 400;
      font-size: 0.875rem;
      color: var(--t2);
      line-height: 1.7;
    }

    .lf-callout {
      border-top: 1px solid rgba(0,82,160,.15);
      margin-top: 4rem;
      padding-top: 2.5rem;
      text-align: center;
    }
    .lf-callout-h {
      font-family: var(--head);
      font-size: clamp(1.5rem, 3vw, 2.25rem);
      font-weight: 600;
      color: var(--t1);
      margin-bottom: 0.5rem;
    }
    .lf-callout-h2 {
      font-family: var(--head);
      font-size: clamp(1.5rem, 3vw, 2.25rem);
      font-weight: 600;
      color: var(--navy);
      margin-bottom: 1rem;
    }
    .lf-callout-sub {
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--t3);
    }

    /* ── PRICING ─────────────────────────────────────────────────────────────── */

    #pricing {
      padding: 8rem 2.5rem;
    }

    .pricing-label-row {
      display: flex; align-items: center; justify-content: center; gap: 1.5rem;
      margin-bottom: 1.25rem;
    }
    .pricing-header { text-align: center; margin-bottom: 4rem; }
    .pricing-headline { margin-bottom: 1rem; }
    .pricing-sub {
      font-family: var(--body);
      font-weight: 300;
      font-size: 1rem;
      color: var(--t2);
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      max-width: 68rem;
      margin: 0 auto 2.5rem;
    }
    @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }

    .pricing-card {
      padding: 2.5rem;
      display: flex;
      flex-direction: column;
    }
    .pricing-card.featured {
      background: var(--card);
      border: 1px solid rgba(0,82,160,.35);
      box-shadow: 0 4px 24px rgba(0,82,160,.10);
      position: relative;
    }
    .pricing-card.featured::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0,82,160,.5) 30%, rgba(0,82,160,.8) 50%, rgba(0,82,160,.5) 70%, transparent);
    }
    .pricing-card.featured::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(0,82,160,.07) 0%, transparent 70%);
    }
    .pricing-tier {
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--t2);
      margin-bottom: 0.75rem;
    }
    .pricing-card.featured .pricing-tier { color: var(--navy); }
    .pricing-price-row { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; }
    .pricing-price {
      font-family: var(--head);
      font-size: clamp(2.5rem, 5vw, 3.75rem);
      font-weight: 600;
      color: var(--t1);
    }
    .pricing-cadence { font-size: 0.875rem; color: var(--t3); }
    .pricing-tagline {
      font-size: 0.8125rem;
      color: var(--t3);
      margin-bottom: 2.5rem;
      line-height: 1.5;
    }
    .pricing-card.featured .pricing-tagline { color: rgba(0,82,160,.55); }

    .pricing-features { list-style: none; flex: 1; }
    .pricing-features li {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }
    .pricing-features li .dash { color: rgba(0,82,160,.30); flex-shrink: 0; margin-top: 0.05rem; }
    .pricing-card.featured .pricing-features li .dash { color: var(--navy); }
    .pricing-features li span { font-size: 0.875rem; color: var(--t2); line-height: 1.5; }

    .pricing-cta { margin-top: 1.5rem; }
    .pricing-cta a {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      font-family: var(--body);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 1rem;
      transition: background 300ms, color 300ms, border-color 300ms;
    }
    .pricing-cta-ghost a {
      border: 1px solid var(--border2);
      color: var(--t2);
      background: transparent;
    }
    .pricing-cta-ghost a:hover { border-color: rgba(0,82,160,.30); color: var(--navy); }
    .pricing-cta-navy a {
      border: 1px solid rgba(0,82,160,.30);
      color: var(--navy);
      background: transparent;
    }
    .pricing-cta-navy a:hover { background: var(--navy); color: #fff; }
    .pricing-cta-solid a {
      background: var(--navy);
      color: #fff;
      box-shadow: 0 2px 16px rgba(0,82,160,.25);
    }
    .pricing-cta-solid a:hover { background: #0078D4; }

    .founding-spots {
      margin-bottom: 1.5rem;
    }
    .founding-spots-label {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--navy);
    }
    .founding-spots-bar {
      margin-top: 0.5rem;
      height: 4px;
      background: rgba(0,82,160,.10);
      overflow: hidden;
    }
    .founding-spots-fill {
      height: 100%;
      background: var(--navy);
      transition: width 1000ms ease;
    }
    .founding-spots-sub {
      margin-top: 0.25rem;
      font-size: 0.6875rem;
      color: var(--t4);
      letter-spacing: 0.04em;
    }

    .pricing-fine {
      text-align: center;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--t3);
      max-width: 68rem;
      margin: 0 auto;
      overflow-wrap: break-word;
      word-break: break-word;
    }

    .founding-banner {
      max-width: 64rem;
      margin: 2.5rem auto 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      padding: 1.5rem 2rem;
      background: rgba(0,82,160,.04);
      border: 1px solid rgba(0,82,160,.18);
    }
    @media (max-width: 600px) { .founding-banner { flex-direction: column; align-items: flex-start; } }

    .founding-banner-label {
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--navy);
      margin-bottom: 0.25rem;
    }
    .founding-banner-count {
      font-family: var(--head);
      font-size: 2rem;
      font-weight: 600;
      color: var(--t1);
    }
    .founding-banner-sub { font-size: 0.875rem; color: var(--t3); }
    .founding-banner-bar {
      margin-top: 0.5rem;
      height: 6px;
      width: 12rem;
      background: rgba(0,0,0,.07);
      border-radius: 9999px;
      overflow: hidden;
    }
    .founding-banner-fill {
      height: 100%;
      border-radius: 9999px;
      background: var(--navy);
      transition: width 800ms ease;
    }

    /* ── SHARE ───────────────────────────────────────────────────────────────── */

    #share {
      padding: 8rem 2.5rem;
    }

    .share-label-row { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.25rem; }
    .share-headline { margin-bottom: 4rem; }

    .share-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      max-width: 56rem;
      margin: 0 auto;
    }
    @media (max-width: 768px) { .share-grid { grid-template-columns: 1fr; } }

    .share-card {
      padding: 2rem;
    }
    .share-card-label {
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--navy);
      margin-bottom: 0.5rem;
    }
    .share-card-body {
      font-size: 0.875rem;
      color: var(--t2);
      line-height: 1.6;
      margin-bottom: 1.5rem;
    }

    .hook-item {
      border: 1px solid rgba(0,82,160,.12);
      background: var(--bg);
      padding: 1rem;
      margin-bottom: 0.75rem;
      position: relative;
    }
    .hook-text {
      font-size: 0.875rem;
      color: var(--t2);
      line-height: 1.6;
      padding-right: 5rem;
    }
    .hook-actions {
      position: absolute;
      top: 0.75rem; right: 0.75rem;
      display: flex; gap: 0.25rem;
    }
    .hook-btn {
      font-size: 0.6rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(0,82,160,.55);
      border: 1px solid rgba(0,82,160,.20);
      background: transparent;
      padding: 0.25rem 0.625rem;
      cursor: pointer;
      transition: color 200ms, border-color 200ms, background 200ms;
      text-decoration: none;
    }
    .hook-btn:hover { color: var(--navy); border-color: rgba(0,82,160,.50); background: var(--navy-d); }

    .invite-form { display: flex; gap: 0; }
    .invite-input {
      flex: 1;
      font-family: var(--body);
      font-size: 0.875rem;
      color: var(--t1);
      background: var(--card);
      border: 1px solid rgba(0,82,160,.18);
      border-right: none;
      padding: 0.75rem 1rem;
      outline: none;
      transition: border-color 200ms;
    }
    .invite-input:focus { border-color: rgba(0,82,160,.50); }
    .invite-input::placeholder { color: var(--t3); }
    .invite-submit {
      flex-shrink: 0;
      font-family: var(--body);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #fff;
      background: var(--navy);
      border: none;
      padding: 0.75rem 1.25rem;
      cursor: pointer;
      transition: background 300ms;
      min-width: 6rem;
    }
    .invite-submit:hover { background: #0078D4; }
    .invite-note { font-size: 0.625rem; color: var(--t3); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.5rem; }

    .linkedin-share-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.625rem;
      width: 100%;
      font-family: var(--body);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(0,82,160,.70);
      border: 1px solid rgba(0,82,160,.20);
      background: transparent;
      padding: 0.75rem;
      cursor: pointer;
      transition: border-color 300ms, color 300ms, background 300ms;
      margin-top: 1rem;
      text-decoration: none;
    }
    .linkedin-share-btn:hover {
      border-color: rgba(0,82,160,.50);
      color: var(--navy);
      background: rgba(0,82,160,.04);
    }

    /* ── FOOTER ──────────────────────────────────────────────────────────────── */

    #footer {
      padding: 5rem 2.5rem 2.5rem;
      border-top: 1px solid var(--border);
    }

    .footer-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: space-between;
      gap: 2.5rem;
      margin-bottom: 3rem;
    }

    .footer-brand { text-decoration: none; }
    .footer-brand-name {
      font-family: var(--head);
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--t1);
      letter-spacing: -0.02em;
    }
    .footer-brand-tagline {
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--t3);
      margin-top: 0.25rem;
    }

    .footer-center { flex: 1; min-width: 6rem; }

    .footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; }
    .footer-domain { font-size: 0.875rem; color: var(--t2); letter-spacing: 0.04em; }
    .footer-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
    .footer-nav a {
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--t3);
      text-decoration: none;
      transition: color 200ms;
    }
    .footer-nav a:hover { color: var(--navy); }

    .footer-bottom {
      border-top: 1px solid var(--border);
      padding-top: 2rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .footer-copy { font-size: 0.75rem; color: var(--t3); }
    .footer-tagline-bottom { font-size: 0.75rem; color: var(--t3); }


    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 2px; }
    ::-webkit-scrollbar-thumb:hover { background: #0078D4; }

    .delay-100 { transition-delay: 100ms !important; }
    .delay-200 { transition-delay: 200ms !important; }
    .delay-300 { transition-delay: 300ms !important; }
    .delay-400 { transition-delay: 400ms !important; }
    .delay-500 { transition-delay: 500ms !important; }
    .delay-600 { transition-delay: 600ms !important; }
    .delay-700 { transition-delay: 700ms !important; }
    .delay-800 { transition-delay: 800ms !important; }

    /* ── NEURON DEMO CHAT WIDGET ────────────────────────────────────────────── */

    #neuron-demo-btn {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      z-index: 9999;
    }
    #neuron-demo-btn button {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      background: var(--navy);
      color: #fff;
      border: none;
      cursor: pointer;
      padding: 0.875rem 1.5rem;
      font-family: var(--body);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      box-shadow: 0 4px 24px rgba(0,82,160,.35);
      transition: background 300ms, box-shadow 300ms, transform 200ms;
    }
    #neuron-demo-btn button:hover {
      background: #0078D4;
      box-shadow: 0 6px 32px rgba(0,82,160,.45);
      transform: translateY(-1px);
    }
    #neuron-demo-btn img {
      width: 20px;
      height: 20px;
      object-fit: contain;
      filter: brightness(0) invert(1);
    }

    #neuron-demo-panel {
      position: fixed;
      bottom: 5.5rem;
      right: 2rem;
      z-index: 9998;
      width: 32rem;
      max-width: calc(100vw - 2rem);
      background: var(--card);
      border: 1px solid rgba(0,82,160,.20);
      border-radius: 1rem;
      box-shadow: 0 16px 64px rgba(0,0,0,.15), 0 4px 16px rgba(0,82,160,.12);
      display: flex;
      flex-direction: column;
      max-height: 70vh;
      overflow: hidden;
      animation: demoSlideIn 200ms cubic-bezier(0.16,1,0.3,1) both;
    }
    @media (max-width: 600px) {
      #neuron-demo-panel {
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        max-height: 88vh;
        border-left: none;
        border-right: none;
        border-bottom: none;
        border-radius: 1.25rem 1.25rem 0 0;
        box-shadow: 0 -8px 40px rgba(0,0,0,.18);
      }
      #neuron-demo-btn {
        bottom: 1rem;
        right: 1rem;
      }
    }
    @keyframes demoSlideIn {
      from { opacity: 0; transform: translateY(16px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    #neuron-demo-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.25rem;
      background: var(--navy);
      color: #fff;
      flex-shrink: 0;
      border-radius: 1rem 1rem 0 0;
    }
    #neuron-demo-header-left {
      display: flex;
      align-items: center;
      gap: 0.625rem;
    }
    #neuron-demo-header-left img {
      width: 18px;
      height: 18px;
      object-fit: contain;
      filter: brightness(0) invert(1);
      opacity: 0.9;
    }
    #neuron-demo-header span {
      font-family: var(--body);
      font-size: 1rem;
      font-weight: 700;
      color: #fff;
      letter-spacing: 0;
      text-transform: none;
    }
    #neuron-demo-header-sub { display: none; }
    #neuron-demo-close {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.375rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      opacity: 0.65;
      transition: opacity 200ms;
    }
    #neuron-demo-close:hover { opacity: 1; }
    #neuron-demo-close svg { display: block; }

    #neuron-demo-messages {
      flex: 1;
      overflow-y: auto;
      padding: 1.25rem 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      min-height: 12rem;
      max-height: 30rem;
      scrollbar-width: thin;
    }

    .demo-msg {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 0.5rem;
      font-family: var(--body);
      font-size: 0.875rem;
      line-height: 1.6;
      background: none;
      padding: 0;
      border: none;
    }
    .demo-msg-user { align-self: flex-end; flex-direction: row-reverse; }
    .demo-msg-ai { align-self: flex-start; width: 100%; }
    .demo-msg-ai-body { display: flex; flex-direction: column; gap: 0; flex: 1; min-width: 0; }
    .demo-msg-bubble { width: fit-content; }
    .demo-msg-avatar {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 0.1rem;
    }
    .demo-msg-ai .demo-msg-avatar { background: #fff; border: 1px solid var(--border); }
    .demo-msg-ai .demo-msg-avatar img { width: 1.125rem; height: 1.125rem; display: block; object-fit: contain; }
    .demo-msg-user .demo-msg-avatar { background: var(--bg2); border: 1px solid var(--border); }
    .demo-msg-user .demo-msg-avatar svg { color: var(--t3); }
    .demo-msg-bubble {
      max-width: calc(100% - 2.25rem);
      padding: 0.625rem 0.875rem;
      border-radius: 1rem;
    }
    .demo-msg-ai .demo-msg-bubble {
      background: var(--bg2);
      color: var(--t1);
      border-radius: 0.25rem 1rem 1rem 1rem;
    }
    .demo-msg-user .demo-msg-bubble {
      background: var(--navy);
      color: #fff;
      border-radius: 1rem 0.25rem 1rem 1rem;
    }
    .demo-msg-ai .demo-msg-bubble p { margin: 0; }
    .demo-msg-ai .demo-msg-bubble p + p { margin-top: 0.75rem; }
    .demo-msg-ai .demo-msg-bubble ul, .demo-msg-ai .demo-msg-bubble ol { margin: 0.5rem 0 0.5rem 1.25rem; }
    .demo-msg-ai .demo-msg-bubble li + li { margin-top: 0.25rem; }
    .demo-msg-ai .demo-msg-bubble strong { font-weight: 600; }
    .demo-msg-share {
      position: relative;
      margin-top: 0.375rem;
      align-self: flex-start;
      margin-left: 2.5rem;
    }
    .demo-msg-share-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--t3);
      font-family: var(--body);
      font-size: 0.65rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.2rem 0.4rem;
      transition: color 0.2s;
      display: flex;
      align-items: center;
      gap: 0.3rem;
    }
    .demo-msg-share-btn:hover { color: var(--navy); }
    .demo-share-menu {
      position: absolute;
      bottom: 100%;
      left: 0;
      background: #fff;
      border: 1px solid var(--border2);
      box-shadow: 0 4px 20px rgba(0,0,0,.12);
      padding: 0.5rem;
      display: none;
      gap: 0.25rem;
      flex-direction: column;
      min-width: 160px;
      z-index: 9999;
    }
    .demo-share-menu.open { display: flex; }
    .demo-share-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      font-family: var(--body);
      font-size: 0.8125rem;
      color: var(--t1);
      cursor: pointer;
      background: none;
      border: none;
      text-align: left;
      width: 100%;
      transition: background 0.15s;
      text-decoration: none;
    }
    .demo-share-item:hover { background: var(--bg2); }
    .demo-msg-thinking {
      align-self: flex-start;
      color: var(--t3);
      font-size: 0.8rem;
      letter-spacing: 0.04em;
      display: flex;
      align-items: center;
      gap: 0.625rem;
      padding: 0.25rem 0;
    }
    .demo-msg-thinking .demo-msg-avatar {
      width: 1.75rem;
      height: 1.75rem;
      flex-shrink: 0;
    }
    .demo-msg-thinking .demo-msg-avatar img {
      width: 1.125rem;
      height: 1.125rem;
      animation: brainPulse 1.4s ease-in-out infinite;
    }
    .demo-msg-thinking-dots { display: inline-flex; gap: 3px; }
    .demo-msg-thinking-dots span {
      width: 5px; height: 5px; border-radius: 50%;
      background: rgba(0,82,160,0.55);
      animation: thinkDot 1.2s ease-in-out infinite;
    }
    .demo-msg-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
    .demo-msg-thinking-dots span:nth-child(3) { animation-delay: 0.3s; }
    @keyframes thinkDot {
      0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
      40% { opacity: 1; transform: scale(1); }
    }
    @keyframes brainPulse {
      0%, 100% { opacity: 0.55; transform: scale(0.92); }
      50% { opacity: 1; transform: scale(1.05); }
    }
    .demo-share-pill {
      background: rgba(0,82,160,0.07);
      border: 1px solid rgba(0,82,160,0.22);
      color: var(--navy);
      cursor: pointer;
      padding: 0.4rem 0.75rem;
      font-family: var(--body);
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      margin-top: 0.5rem;
      margin-left: 2.5rem;
      align-self: flex-start;
      transition: background 0.15s, border-color 0.15s, transform 0.1s;
      line-height: 1;
      border-radius: 6px;
    }
    .demo-share-pill:hover {
      background: rgba(0,82,160,0.14);
      border-color: rgba(0,82,160,0.45);
    }
    .demo-share-pill:active { transform: scale(0.97); }
    .demo-share-pill svg { width: 11px; height: 11px; }

    #neuron-demo-input-row {
      display: flex;
      border-top: 1px solid var(--border);
      flex-shrink: 0;
    }
    #neuron-demo-text {
      flex: 1;
      font-family: var(--body);
      font-size: 0.875rem;
      color: var(--t1);
      background: var(--bg);
      border: none;
      outline: none;
      padding: 0.875rem 1rem;
    }
    #neuron-demo-text::placeholder { color: var(--t3); }
    #neuron-demo-send {
      flex-shrink: 0;
      background: var(--navy);
      color: #fff;
      border: none;
      cursor: pointer;
      padding: 0.875rem 1.25rem;
      font-family: var(--body);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      transition: background 200ms;
    }
    #neuron-demo-send:hover { background: #0078D4; }
    #neuron-demo-send:disabled { opacity: 0.5; cursor: not-allowed; }
    @media (max-width: 600px) {
      #neuron-demo-text { font-size: 1rem; padding: 1rem; }
      #neuron-demo-send { padding: 1rem 1.25rem; min-width: 64px; }
      #neuron-demo-messages { padding: .75rem 1rem; }
    }

    .text-gradient-gold {
      background: linear-gradient(135deg, #003d7a 0%, #0078D4 50%, #0052A0 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    button.pricing-cta-navy, button.pricing-cta-solid, button.pricing-cta-ghost {
      width: 100%;
      border: none;
      cursor: pointer;
      font-family: inherit;
      font-size: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
      text-align: center;
      padding: 0.875rem 1.5rem;
      transition: background 300ms, opacity 300ms;
    }
    button[disabled] { opacity: 0.6; cursor: not-allowed; }

  </style>
  <script src=\"https://cdn.jsdelivr.net/npm/marked/marked.min.js\"></script>
  <script src=\"https://challenges.cloudflare.com/turnstile/v0/api.js\" async defer></script>
  <noscript><style>.reveal { opacity: 1 !important; transform: none !important; }</style></noscript>

  <!-- Google Analytics -->
  <script async src=\"https://www.googletagmanager.com/gtag/js?id=G-Y1EE43X9RN\"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-Y1EE43X9RN');
  </script>

  <!-- Open Graph -->
  <meta property=\"og:type\" content=\"website\">
  <meta property=\"og:url\" content=\"https://neurontechnologies.ai\">
  <meta property=\"og:title\" content=\"Neuron - The AI That Remembers You\">
  <meta property=\"og:description\" content=\"Every other AI forgets you. Neuron doesn&#39;t. Runs on your machine, builds a memory over time, and gets sharper the longer you use it. Built by one person. April 22, 2026 — the meeting. April 25 — you&#39;re looking at the proof.\">
  <meta property=\"og:image\" content=\"https://neurontechnologies.ai/assets/brand/neuron-wordmark-on-light@2x.png\">

  <!-- Twitter / X -->
  <meta name=\"twitter:card\" content=\"summary_large_image\">
  <meta name=\"twitter:title\" content=\"Neuron - The AI That Remembers You\">
  <meta name=\"twitter:description\" content=\"Every other AI forgets you. Neuron doesn&#39;t. Runs on your machine. Remembers everything. $19/mo or $199 founding member (first 1,000).\">
  <meta name=\"twitter:image\" content=\"https://neurontechnologies.ai/assets/brand/neuron-wordmark-on-light@2x.png\">

  <!-- Canonical -->
  <link rel=\"canonical\" href=\"https://neurontechnologies.ai\">

  <!-- Structured data — GEO: Organization + SoftwareApplication + FAQPage -->
  <script type=\"application/ld+json\">
  {
    \"@context\": \"https://schema.org\",
    \"@graph\": [
      {
        \"@type\": \"Organization\",
        \"name\": \"Neuron, LLC\",
        \"url\": \"https://neurontechnologies.ai\",
        \"founder\": {
          \"@type\": \"Person\",
          \"name\": \"Will Anderson\",
          \"jobTitle\": \"Founder\"
        },
        \"description\": \"Neuron builds AI that runs on your machine, builds a memory over time, and gets sharper the longer you use it. One builder. Built different.\",
        \"foundingDate\": \"2026\",
        \"sameAs\": [\"https://github.com/neuron-technologies\"]
      },
      {
        \"@type\": \"SoftwareApplication\",
        \"name\": \"Neuron\",
        \"applicationCategory\": \"AIApplication\",
        \"operatingSystem\": \"macOS, Windows, Linux\",
        \"offers\": [
          {
            \"@type\": \"Offer\",
            \"name\": \"Free\",
            \"price\": \"0\",
            \"priceCurrency\": \"USD\"
          },
          {
            \"@type\": \"Offer\",
            \"name\": \"Professional\",
            \"price\": \"19\",
            \"priceCurrency\": \"USD\",
            \"billingIncrement\": \"monthly\"
          },
          {
            \"@type\": \"Offer\",
            \"name\": \"Founding Member\",
            \"description\": \"Lifetime access for the first 1,000 members.\",
            \"price\": \"199\",
            \"priceCurrency\": \"USD\"
          }
        ],
        \"description\": \"The AI that remembers you. Runs locally on your machine. Builds a persistent memory over every conversation. Gets sharper the longer you use it. Your data never leaves your device.\",
        \"featureList\": [
          \"Persistent memory — runs locally, never resets\",
          \"Bring your own API keys (OpenAI, Anthropic, Grok)\",
          \"Local inference via Ollama — coming, offline, zero cloud\",
          \"Neuron Inference coming soon — priced below major APIs\",
          \"Two devices included per plan\",
          \"Enterprise deployment — Q1 2027\"
        ]
      },
      {
        \"@type\": \"FAQPage\",
        \"mainEntity\": [
          {
            \"@type\": \"Question\",
            \"name\": \"What is Neuron?\",
            \"acceptedAnswer\": {
              \"@type\": \"Answer\",
              \"text\": \"Neuron is an AI that runs on your machine and builds a persistent memory over time. Every other AI forgets you when you close the tab. Neuron doesn&#39;t. The longer you use it, the less you have to explain.\"
            }
          },
          {
            \"@type\": \"Question\",
            \"name\": \"Does Neuron send my data to the cloud?\",
            \"acceptedAnswer\": {
              \"@type\": \"Answer\",
              \"text\": \"No. Your memory lives on your machine and never leaves it. Neuron does not collect your data, train on your conversations, or require cloud storage. For inference you choose: local via Ollama, your own API keys, or Neuron Inference (coming soon).\"
            }
          },
          {
            \"@type\": \"Question\",
            \"name\": \"How much does Neuron cost?\",
            \"acceptedAnswer\": {
              \"@type\": \"Answer\",
              \"text\": \"Neuron has a free tier that never expires. Professional is $19/month. Founding Member is $199 lifetime — available to the first 1,000 members only. All plans include two devices.\"
            }
          },
          {
            \"@type\": \"Question\",
            \"name\": \"Who built Neuron?\",
            \"acceptedAnswer\": {
              \"@type\": \"Answer\",
              \"text\": \"Will Anderson. On April 22nd, 2026 he had a meeting with one of the largest technology companies in the world. Within two days their lawyers were engaged. He decided to build it himself. On April 25th he published the proof.\"
            }
          },
          {
            \"@type\": \"Question\",
            \"name\": \"When does Neuron launch?\",
            \"acceptedAnswer\": {
              \"@type\": \"Answer\",
              \"text\": \"Neuron is available for preorder now. Enterprise deployment launches Q1 2027.\"
            }
          }
        ]
      }
    ]
  }
  </script>
</head>
<body>
"
}

fn page_close() -> String {
    return "
<script>
(function() {
  'use strict';

  // Nav scroll effect
  var nav = document.getElementById('nav');
  if (nav) {
    window.addEventListener('scroll', function() {
      if (window.scrollY > 40) {
        nav.classList.add('scrolled');
      } else {
        nav.classList.remove('scrolled');
      }
    }, { passive: true });
  }

  // Auto-open chat if ?open=chat in URL
  if (typeof URLSearchParams !== 'undefined' && new URLSearchParams(window.location.search).get('open') === 'chat') {
    // Wait for widget to initialize, then open
    setTimeout(function() { if (typeof neuronDemoToggle === 'function') neuronDemoToggle(); }, 600);
  }

  // Scroll reveal via IntersectionObserver
  var revealEls = document.querySelectorAll('.reveal');
  if ('IntersectionObserver' in window) {
    var observer = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    revealEls.forEach(function(el) { observer.observe(el); });
  } else {
    revealEls.forEach(function(el) { el.classList.add('visible'); });
  }

  // ── Founding counter - live polling ──────────────────────────────────────
  var prevSold = null;
  function updateFoundingUI(data) {
    var remaining = data.remaining;
    var sold = data.sold;
    var total = data.total;
    var pct = Math.round((sold / total) * 100);
    var flash = prevSold !== null && sold > prevSold;
    prevSold = sold;

    // spots card (inside pricing card)
    var spotLabel = document.querySelector('.founding-spots-label');
    if (spotLabel) spotLabel.textContent = 'Only ' + remaining + ' left';
    var spotFill = document.querySelector('.founding-spots-fill');
    if (spotFill) spotFill.style.width = pct + '%';
    var spotSub = document.querySelector('.founding-spots-sub');
    if (spotSub) spotSub.textContent = sold + ' of ' + total + ' claimed';

    // banner
    var bannerCount = document.querySelector('.founding-banner-count');
    if (bannerCount) {
      bannerCount.textContent = remaining;
      if (flash) {
        bannerCount.style.color = '#0078D4';
        setTimeout(function() { bannerCount.style.color = ''; }, 1200);
      }
    }
    var bannerFill = document.querySelector('.founding-banner-fill');
    if (bannerFill) bannerFill.style.width = pct + '%';
  }

  function pollFoundingCount() {
    fetch('/api/founding-count')
      .then(function(r) { return r.json(); })
      .then(function(data) { updateFoundingUI(data); })
      .catch(function() {});
  }
  pollFoundingCount();
  setInterval(pollFoundingCount, 90000);

  // Hide chat on checkout, account, legal pages — not relevant there
  if (window.location.pathname.indexOf('/checkout') === 0 ||
      window.location.pathname.indexOf('/account') === 0 ||
      window.location.pathname.indexOf('/legal') === 0 ||
      window.location.pathname.indexOf('/marketplace/success') === 0) {
    var demoBtn = document.getElementById('neuron-demo-btn');
    var demoPanel = document.getElementById('neuron-demo-panel');
    if (demoBtn) demoBtn.style.display = 'none';
    if (demoPanel) demoPanel.style.display = 'none';
  }

  // Checkout buttons - navigate to integrated payment page
  var checkoutBtns = document.querySelectorAll('[data-checkout]');
  checkoutBtns.forEach(function(btn) {
    btn.addEventListener('click', function() {
      var plan = btn.getAttribute('data-checkout');
      window.location.href = '/checkout?plan=' + plan;
    });
  });

})();
</script>

<!-- ── Neuron Demo Chat Widget ──────────────────────────────────────────────── -->
<div id=\"neuron-demo-btn\">
  <button onclick=\"neuronDemoToggle()\" aria-label=\"Chat with Neuron\">
    <img src=\"/assets/brand/neuron-brain.png\" alt=\"\">
    Try Neuron
  </button>
</div>

<div id=\"neuron-demo-panel\" style=\"display:none\">
  <div id=\"neuron-demo-header\">
    <div id=\"neuron-demo-header-left\">
      <img src=\"/assets/brand/neuron-brain.png\" alt=\"Neuron\">
      <div>
        <span>Neuron</span>
        <div id=\"neuron-demo-header-sub\">Live Demo</div>
      </div>
    </div>
    <div style=\"display:flex;align-items:center;gap:0.75rem\">
      <span id=\"neuron-demo-countdown\" style=\"font-family:var(--body);font-size:0.65rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.90)\"></span>
      <button id=\"neuron-demo-close\" onclick=\"neuronDemoToggle()\" aria-label=\"Close\">
        <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"rgba(255,255,255,.85)\" stroke-width=\"1.75\" stroke-linecap=\"round\">
          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>
        </svg>
      </button>
    </div>
  </div>
  <div id=\"neuron-demo-messages\"></div>
  <div id=\"neuron-demo-turnstile\" style=\"padding:0.75rem 1rem 0;transition:opacity 0.6s,max-height 0.6s;overflow:hidden;max-height:80px\"></div>
  <div id=\"neuron-demo-input-row\" style=\"display:none\">
    <input type=\"text\" id=\"neuron-demo-text\" placeholder=\"Ask me anything...\" autocomplete=\"off\">
    <button id=\"neuron-demo-send\" onclick=\"neuronDemoSend()\">Send</button>
  </div>
</div>

<script>
(function() {
  if (typeof marked !== 'undefined') { marked.setOptions({ breaks: true, gfm: true }); }
  var TURNSTILE_SITE_KEY = '0x4AAAAAADHAZXyuRb3yD9mr';
  var turnstileToken = '';
  var turnstileWidgetId = null;
  var turnstileVerified = false;
  var isOpen = false;
  var MAX = 5;

  // Persistent session storage - survives page refreshes
  function loadSession() {
    try {
      var s = localStorage.getItem('neuron_demo_session');
      return s ? JSON.parse(s) : { messages: [], count: 0, context: '' };
    } catch(e) { return { messages: [], count: 0, context: '' }; }
  }
  function saveSession(session) {
    try { localStorage.setItem('neuron_demo_session', JSON.stringify(session)); } catch(e) {}
  }
  function clearSession() {
    try { localStorage.removeItem('neuron_demo_session'); } catch(e) {}
  }

  function _mg(s) { return s._m || { nodes: [], edges: [] }; }

  function _um(s, nn, ne) {
    if (!nn || !nn.length) return;
    var g = _mg(s), nm = {}, ek = function(e) { return e.from+'->'+e.to; }, em = {};
    g.nodes.forEach(function(n) { nm[n.id] = n; });
    (nn || []).forEach(function(n) {
      if (nm[n.id]) { nm[n.id].w = Math.min(1.0, (nm[n.id].w || 0.5) + 0.08); }
      else { nm[n.id] = n; }
    });
    g.nodes = Object.values(nm);
    g.edges.forEach(function(e) { em[ek(e)] = e; });
    (ne || []).forEach(function(e) {
      var k = ek(e);
      if (em[k]) { em[k].weight = Math.min(1.0, (em[k].weight || 0.5) + 0.05); }
      else { em[k] = e; }
    });
    g.edges = Object.values(em);
    s._m = g; saveSession(s);
  }

  function _ra(g, q) {
    if (!g || !g.nodes || !g.nodes.length) return [];
    var words = q.toLowerCase().split(/\s+/).filter(function(w) { return w.length > 3; });
    var sc = {};
    g.nodes.forEach(function(n) {
      var t = (n.content || '').toLowerCase();
      sc[n.id] = words.filter(function(w) { return t.indexOf(w) !== -1; }).length * 0.6 + (n.w || 0.5) * 0.4;
    });
    (g.edges || []).forEach(function(e) {
      if (sc[e.from] > 0.1) sc[e.to] = (sc[e.to] || 0) + sc[e.from] * (e.weight || 0.5) * 0.4;
    });
    return g.nodes.filter(function(n) { return sc[n.id] > 0.2; })
      .sort(function(a,b) { return sc[b.id]-sc[a.id]; }).slice(0,5)
      .map(function(n) { return { id: n.id, content: n.content, score: sc[n.id] }; });
  }

  // ?reset=1 clears the session and reloads clean
  if (window.location.search.indexOf('reset=1') !== -1) {
    clearSession();
    var clean = window.location.pathname;
    window.history.replaceState({}, '', clean);
  }

  var session = loadSession();
  // Ensure every user has a stable unique session ID.
  if (!session.uid) {
    session.uid = 'u' + Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
    saveSession(session);
  }
  var msgCount = session.count || 0;

  function updateCountdown() {
    var el = document.getElementById('neuron-demo-countdown');
    if (!el) return;
    var remaining = MAX - msgCount;
    el.textContent = remaining + ' question' + (remaining === 1 ? '' : 's') + ' left';
    el.style.color = remaining <= 5 ? '#c44' : 'rgba(255,255,255,0.45)';
  }

  window.neuronDemoReset = function() {
    try { localStorage.removeItem('neuron_demo_session'); } catch(e) {}
    session = { messages: [], count: 0, context: '' };
    msgCount = 0;
    var msgs = document.getElementById('neuron-demo-messages');
    if (msgs) msgs.innerHTML = '';
    var input = document.getElementById('neuron-demo-text');
    if (input) { input.disabled = false; input.placeholder = 'Ask me anything...'; }
    var btn = document.getElementById('neuron-demo-send');
    if (btn) btn.disabled = false;
    addMsg('ai', 'Hey. What is on your mind?', true);
  };

  window.neuronDemoToggle = function() {
    isOpen = !isOpen;
    var panel = document.getElementById('neuron-demo-panel');
    if (panel) panel.style.display = isOpen ? 'flex' : 'none';
    // Hide launch button on mobile when panel is open (panel covers it)
    var btn = document.getElementById('neuron-demo-btn');
    if (btn) btn.style.display = isOpen ? 'none' : '';
    var msgs = document.getElementById('neuron-demo-messages');
    if (isOpen && turnstileVerified && msgs && msgs.style.display !== 'none' && msgs.children.length === 0) {
      // Restore previous conversation if it exists
      if (session.messages && session.messages.length > 0) {
        session.messages.forEach(function(m) { addMsg(m.role, m.text, true); });
        var remaining = MAX - msgCount;
        if (remaining <= 0) {
          var input = document.getElementById('neuron-demo-text');
          if (input) { input.disabled = true; input.placeholder = 'Interaction limit reached'; }
        }
      } else {
        addMsg('ai', 'Hey. What is on your mind?', true);
      }
    }
    var input = document.getElementById('neuron-demo-text');
    if (isOpen && input && !input.disabled) input.focus();
    // Init Turnstile on first open
    updateCountdown();
    if (isOpen && !turnstileWidgetId && typeof turnstile !== 'undefined') {
      var container = document.getElementById('neuron-demo-turnstile');
      if (container) {
        turnstileWidgetId = turnstile.render(container, {
          sitekey: TURNSTILE_SITE_KEY,
          size: 'compact',
          callback: function(token) {
            turnstileToken = token;
            turnstileVerified = true;
            // Destroy the widget completely
            if (typeof turnstile !== 'undefined' && turnstileWidgetId !== null) {
              try { turnstile.remove(turnstileWidgetId); } catch(e) {}
              turnstileWidgetId = null;
            }
            // Swap gate for chat
            var gate = document.getElementById('neuron-demo-gate');
            var msgs = document.getElementById('neuron-demo-messages');
            var inputRow = document.getElementById('neuron-demo-input-row');
            if (gate) gate.style.display = 'none';
            if (msgs) msgs.style.display = 'flex';
            if (inputRow) inputRow.style.display = 'flex';
            // Show opening message
            addMsg('ai', 'Hey. What is on your mind?', true);
            updateCountdown();
            var inp = document.getElementById('neuron-demo-text');
            if (inp) inp.focus();
          },
          'expired-callback': function() {
            turnstileToken = '';
            turnstileVerified = false;
          }
        });
      }
    }
  };

  function addMsg(role, text, skipSave) {
    var msgs = document.getElementById('neuron-demo-messages');
    if (!msgs) return null;
    var el = document.createElement('div');
    el.className = 'demo-msg demo-msg-' + role;
    // Avatar - use DOM API to avoid quote escaping issues
    var avatar = document.createElement('div');
    avatar.className = 'demo-msg-avatar';
    if (role === 'ai') {
      var img = document.createElement('img');
      img.src = '/assets/brand/neuron-brain.png';
      img.alt = 'Neuron';
      avatar.appendChild(img);
    } else {
      var svgNS = 'http://www.w3.org/2000/svg';
      var svg = document.createElementNS(svgNS, 'svg');
      svg.setAttribute('width', '14'); svg.setAttribute('height', '14');
      svg.setAttribute('viewBox', '0 0 24 24'); svg.setAttribute('fill', 'none');
      svg.setAttribute('stroke', 'currentColor'); svg.setAttribute('stroke-width', '2');
      var p1 = document.createElementNS(svgNS, 'path');
      p1.setAttribute('d', 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2');
      var c1 = document.createElementNS(svgNS, 'circle');
      c1.setAttribute('cx', '12'); c1.setAttribute('cy', '7'); c1.setAttribute('r', '4');
      svg.appendChild(p1); svg.appendChild(c1);
      avatar.appendChild(svg);
    }
    // Bubble
    var bubble = document.createElement('div');
    bubble.className = 'demo-msg-bubble';
    if (role === 'ai' && typeof marked !== 'undefined') {
      try { bubble.innerHTML = marked.parse(text); } catch(e) { bubble.textContent = text; }
    } else {
      bubble.textContent = text;
    }
    if (role === 'ai') {
      var bodyWrap = document.createElement('div');
      bodyWrap.className = 'demo-msg-ai-body';
      bodyWrap.appendChild(bubble);
      if (!skipSave) {
        var shareBtn = document.createElement('button');
        shareBtn.className = 'demo-share-pill';
        shareBtn.title = 'Share this response';
        shareBtn.textContent = 'Share ↗';
        shareBtn.onclick = async function() {
          var prevUser = '';
          if (session.messages) {
            for (var i = session.messages.length - 1; i >= 0; i--) {
              if (session.messages[i].role === 'user') { prevUser = session.messages[i].text; break; }
            }
          }
          shareBtn.style.opacity = '0.4';
          try {
            var r = await fetch('/api/share', {
              method: 'POST',
              headers: {'Content-Type': 'application/json'},
              body: JSON.stringify({question: prevUser, answer: text})
            });
            var d = await r.json();
            if (d.id) window.open('/share/' + d.id, '_blank');
          } catch(e) {}
          shareBtn.style.opacity = '1';
        };
        bodyWrap.appendChild(shareBtn);
      }
      el.appendChild(avatar);
      el.appendChild(bodyWrap);
    } else {
      el.appendChild(avatar);
      el.appendChild(bubble);
    }
    msgs.appendChild(el);
    msgs.scrollTop = msgs.scrollHeight;
    // Persist to localStorage unless restoring
    if (!skipSave && role !== 'thinking') {
      session.messages = session.messages || [];
      session.messages.push({ role: role, text: text });
      // Keep last 40 messages to avoid storage bloat
      if (session.messages.length > 40) session.messages = session.messages.slice(-40);
      saveSession(session);
    }
    return el;
  }

  window.neuronDemoSend = async function() {
    if (msgCount >= MAX) return;
    var input = document.getElementById('neuron-demo-text');
    var btn = document.getElementById('neuron-demo-send');
    if (!input || btn.disabled) return;
    var msg = input.value.trim();
    if (!msg) return;
    input.value = '';
    btn.disabled = true;
    addMsg('user', msg);
    // Thinking indicator with brain avatar + animated dots
    var thinking = document.createElement('div');
    thinking.className = 'demo-msg demo-msg-thinking';
    var thAvatar = document.createElement('div');
    thAvatar.className = 'demo-msg-avatar';
    var thImg = document.createElement('img');
    thImg.src = '/assets/brand/neuron-brain.png';
    thImg.alt = 'Neuron';
    thAvatar.appendChild(thImg);
    thinking.appendChild(thAvatar);
    var thDots = document.createElement('span');
    thDots.className = 'demo-msg-thinking-dots';
    thDots.innerHTML = '<span></span><span></span><span></span>';
    thinking.appendChild(thDots);
    var thMsgsEl = document.getElementById('neuron-demo-messages');
    if (thMsgsEl) {
      thMsgsEl.appendChild(thinking);
      thMsgsEl.scrollTop = thMsgsEl.scrollHeight;
    }
    if (turnstileVerified && !session._cfSent) { session._cfSent = true; }
    try {
      // Build history from session for soul context
      var hist = (session.messages || []).slice(-20).filter(function(m){ return m.role !== 'thinking'; }).map(function(m){
        return {role: m.role === 'ai' ? 'assistant' : 'user', content: m.text};
      });
      // Activate local engram nodes relevant to this message
      var activated_nodes = _ra(session._m, msg);
      var r = await fetch('/api/demo', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          message: msg,
          history: hist,
          cf_token: turnstileVerified && !session._cfSent ? turnstileToken : '',
          uid: session.uid || '',
          activated_nodes: activated_nodes,
          engram_node_count: (session._m && session._m.nodes) ? session._m.nodes.length : 0
        })
      });
      var d = await r.json();
      if (thinking) thinking.remove();
      // Merge session nodes returned by soul into local engram
      _um(session, d.sn, d.se);
      var reply = d.response || d.reply || d.message || '';
      var isError = !reply || reply === 'Stepped out for a moment. Try again.';
      if (!isError) {
        // Only count as an interaction on a real response
        msgCount++;
        session.count = msgCount;
        saveSession(session);
        updateCountdown();
        if (msgCount >= MAX && input) {
          input.disabled = true;
          input.placeholder = 'Interaction limit reached';
        }
      }
      addMsg('ai', reply || 'Stepped out for a moment. Try again.');
    } catch(e) {
      if (thinking) thinking.remove();
      addMsg('ai', 'Stepped out for a moment. Try again.');
    }
    if (msgCount < MAX && btn) btn.disabled = false;
    if (input) input.focus();
  };

  var inp = document.getElementById('neuron-demo-text');
  if (inp) {
    inp.addEventListener('keydown', function(e) {
      if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); window.neuronDemoSend(); }
    });
  }
})();
</script>
</body>
</html>
"
}
