/**
 * rFlows — rich landing page body.
 * Returned by landingPage() in the module export;
 * the shell wraps it with header, CSS, and analytics.
 */
export function renderLanding(): string {
	return `
<style>
/* ── Landing animations ── */
@keyframes rf-flow-particle {
  0%   { offset-distance: 0%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes rf-fill-cycle {
  0%   { height: 15%; }
  25%  { height: 85%; }
  50%  { height: 60%; }
  75%  { height: 30%; }
  100% { height: 15%; }
}
@keyframes rf-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
@keyframes rf-river-flow {
  0%   { stroke-dashoffset: 40; }
  100% { stroke-dashoffset: 0; }
}
@keyframes rf-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(251,191,36,0.3)); }
  50%      { filter: drop-shadow(0 0 12px rgba(251,191,36,0.6)); }
}
@keyframes rf-edge-flow {
  0%   { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 0; }
}
@keyframes rf-hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.rf-anim-wrap {
  max-width: 700px;
  margin: 2rem auto 0;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(51,65,85,0.3);
  background: rgba(15,23,42,0.4);
}
.rf-anim-wrap svg { display: block; width: 100%; height: auto; }

/* Responsive: hide animations on very small screens */
@media (max-width: 480px) {
  .rf-anim-wrap { display: none; }
}
</style>

<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline">rFlows</span>
  <h1 class="rl-heading">Design Funding Flows<br>
    <span style="background:linear-gradient(135deg,#fbbf24,#34d399,#60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent">That Respond to Reality</span>
  </h1>
  <p class="rl-subtext">
    Model how money moves through your organization with <strong style="color:#e2e8f0">threshold-based funnels</strong>,
    <strong style="color:#e2e8f0">automatic overflow routing</strong>, and
    <strong style="color:#e2e8f0">proportional flow visualization</strong> &mdash; then save it to your space.
  </p>

  <!-- Animated hero diagram: 3 funnels with flowing particles -->
  <div class="rf-anim-wrap" style="animation: rf-hero-float 6s ease-in-out infinite;border:1px solid rgba(251,191,36,0.15);background:rgba(15,23,42,0.6)">
    <svg viewBox="0 0 700 260" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- Funnel gradients -->
        <linearGradient id="rf-g-amber" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#fbbf24" stop-opacity="0.3"/>
          <stop offset="100%" stop-color="#f59e0b" stop-opacity="0.08"/>
        </linearGradient>
        <linearGradient id="rf-g-green" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#34d399" stop-opacity="0.3"/>
          <stop offset="100%" stop-color="#10b981" stop-opacity="0.08"/>
        </linearGradient>
        <linearGradient id="rf-g-blue" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#60a5fa" stop-opacity="0.3"/>
          <stop offset="100%" stop-color="#3b82f6" stop-opacity="0.08"/>
        </linearGradient>
        <!-- Flow paths for particles -->
        <path id="rf-path1" d="M 230 100 C 280 100, 300 100, 330 100" fill="none"/>
        <path id="rf-path2" d="M 470 100 C 520 100, 540 130, 560 160" fill="none"/>
        <path id="rf-path3" d="M 230 140 C 260 160, 280 190, 300 210" fill="none"/>
      </defs>

      <!-- Source funnel -->
      <g>
        <rect x="80" y="40" width="150" height="180" rx="12" fill="url(#rf-g-amber)" stroke="#fbbf2440" stroke-width="1"/>
        <!-- Threshold lines -->
        <line x1="90" y1="80" x2="220" y2="80" stroke="#fbbf24" stroke-width="1" stroke-dasharray="4 3" opacity="0.5"/>
        <line x1="90" y1="160" x2="220" y2="160" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 3" opacity="0.5"/>
        <!-- Animated fill -->
        <rect x="88" y="60" width="134" height="152" rx="8" fill="#fbbf24" opacity="0.12">
          <animate attributeName="y" values="60;100;60;140;60" dur="8s" repeatCount="indefinite"/>
          <animate attributeName="height" values="152;112;152;72;152" dur="8s" repeatCount="indefinite"/>
        </rect>
        <text x="155" y="35" text-anchor="middle" fill="#fbbf24" font-size="11" font-weight="600" font-family="system-ui">Source Pool</text>
        <text x="155" y="135" text-anchor="middle" fill="#fbbf24" font-size="22" opacity="0.7">&#127754;</text>
      </g>

      <!-- Middle funnel -->
      <g>
        <rect x="320" y="40" width="150" height="180" rx="12" fill="url(#rf-g-green)" stroke="#34d39940" stroke-width="1"/>
        <line x1="330" y1="80" x2="460" y2="80" stroke="#34d399" stroke-width="1" stroke-dasharray="4 3" opacity="0.5"/>
        <line x1="330" y1="160" x2="460" y2="160" stroke="#ef4444" stroke-width="1" stroke-dasharray="4 3" opacity="0.5"/>
        <rect x="328" y="90" width="134" height="122" rx="8" fill="#34d399" opacity="0.12">
          <animate attributeName="y" values="90;70;90;110;90" dur="8s" begin="1s" repeatCount="indefinite"/>
          <animate attributeName="height" values="122;142;122;102;122" dur="8s" begin="1s" repeatCount="indefinite"/>
        </rect>
        <text x="395" y="35" text-anchor="middle" fill="#34d399" font-size="11" font-weight="600" font-family="system-ui">Operations</text>
        <text x="395" y="135" text-anchor="middle" fill="#34d399" font-size="22" opacity="0.7">&#9881;&#65039;</text>
      </g>

      <!-- Outcome funnel -->
      <g>
        <rect x="500" y="120" width="130" height="120" rx="12" fill="url(#rf-g-blue)" stroke="#60a5fa40" stroke-width="1"/>
        <rect x="508" y="140" width="114" height="92" rx="8" fill="#60a5fa" opacity="0.12">
          <animate attributeName="y" values="170;140;170;190;170" dur="8s" begin="2s" repeatCount="indefinite"/>
          <animate attributeName="height" values="62;92;62;42;62" dur="8s" begin="2s" repeatCount="indefinite"/>
        </rect>
        <text x="565" y="115" text-anchor="middle" fill="#60a5fa" font-size="11" font-weight="600" font-family="system-ui">Outcomes</text>
        <text x="565" y="185" text-anchor="middle" fill="#60a5fa" font-size="20" opacity="0.7">&#127919;</text>
      </g>

      <!-- Overflow edge: Source → Operations -->
      <path d="M 230 90 C 265 90, 290 90, 320 90" fill="none" stroke="#fbbf24" stroke-width="3" opacity="0.35" stroke-dasharray="6 4">
        <animate attributeName="stroke-dashoffset" values="20;0" dur="1.5s" repeatCount="indefinite"/>
      </path>
      <text x="275" y="82" text-anchor="middle" fill="#fbbf24" font-size="9" font-weight="600" opacity="0.7">40%</text>
      <!-- Particles -->
      <circle r="3" fill="#fbbf24" opacity="0">
        <animateMotion dur="2s" repeatCount="indefinite" begin="0s"><mpath href="#rf-path1"/></animateMotion>
        <animate attributeName="opacity" values="0;1;1;0" dur="2s" repeatCount="indefinite" begin="0s"/>
      </circle>
      <circle r="2.5" fill="#fbbf24" opacity="0">
        <animateMotion dur="2s" repeatCount="indefinite" begin="0.7s"><mpath href="#rf-path1"/></animateMotion>
        <animate attributeName="opacity" values="0;1;1;0" dur="2s" repeatCount="indefinite" begin="0.7s"/>
      </circle>

      <!-- Spending edge: Operations → Outcomes -->
      <path d="M 470 130 C 490 140, 500 155, 510 170" fill="none" stroke="#34d399" stroke-width="2.5" opacity="0.35" stroke-dasharray="5 4">
        <animate attributeName="stroke-dashoffset" values="18;0" dur="1.5s" repeatCount="indefinite"/>
      </path>
      <text x="500" y="140" text-anchor="middle" fill="#34d399" font-size="9" font-weight="600" opacity="0.7">60%</text>
      <circle r="2.5" fill="#34d399" opacity="0">
        <animateMotion dur="2.5s" repeatCount="indefinite" begin="0.3s"><mpath href="#rf-path2"/></animateMotion>
        <animate attributeName="opacity" values="0;1;1;0" dur="2.5s" repeatCount="indefinite" begin="0.3s"/>
      </circle>

      <!-- Spending edge: Source → (bottom) -->
      <path d="M 180 220 L 180 250" fill="none" stroke="#f59e0b" stroke-width="2" opacity="0.25" stroke-dasharray="4 3">
        <animate attributeName="stroke-dashoffset" values="14;0" dur="1.5s" repeatCount="indefinite"/>
      </path>
      <text x="195" y="245" fill="#f59e0b" font-size="8" opacity="0.5">spending</text>

      <!-- Labels -->
      <text x="76" y="82" text-anchor="end" fill="#fbbf24" font-size="8" opacity="0.5">max</text>
      <text x="76" y="162" text-anchor="end" fill="#ef4444" font-size="8" opacity="0.5">min</text>
    </svg>
  </div>

  <div class="rl-cta-row" style="margin-top:2rem">
    <a href="https://demo.rspace.online/rflows" class="rl-cta-primary" id="ml-primary">
      Try the Demo &rarr;
    </a>
    <a href="/create-space" class="rl-cta-secondary">Save Flow to Space</a>
  </div>
  <p style="font-size:0.8rem;color:var(--rs-text-muted,#64748b);margin-top:0.75rem">
    Build your flow in the demo, then sign in to save it to your own space.
  </p>
</div>

<!-- What rFlows Does -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">What rFlows Does</h2>
    <div class="rl-grid-4">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#f59e0b,rgba(245,158,11,0.6))">&#127754;</div>
        <h3>Funnel Budgets</h3>
        <p>Each funding pool is a funnel with three zones &mdash; overflow, healthy, and critical &mdash; defined by min/max thresholds you set by dragging.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#34d399,rgba(16,185,129,0.6))">&#128260;</div>
        <h3>Overflow Routing</h3>
        <p>When a funnel exceeds its max threshold, excess funds automatically redistribute to connected pools &mdash; no manual intervention needed.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#60a5fa,rgba(59,130,246,0.6))">&#128200;</div>
        <h3>Proportional Edges</h3>
        <p>Flow edges scale in width proportionally to their allocation percentage. See at a glance where the most capital is moving.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#a78bfa,rgba(139,92,246,0.6))">&#127758;</div>
        <h3>River View</h3>
        <p>Switch to the Sankey river visualization to see how all funds flow through your system from source to outcome in one view.</p>
      </div>
    </div>
  </div>
</section>

<!-- How It Works -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">How It Works</h2>
    <div class="rl-grid-3">
      <div class="rl-step">
        <div class="rl-step__num">1</div>
        <h3>Define Funnels</h3>
        <p>Create funding pools and set their min/max thresholds. Drag the threshold handles to define when a funnel is healthy, overflowing, or critically low.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">2</div>
        <h3>Wire Connections</h3>
        <p>Connect funnels with overflow edges (sideways) so excess funds route to other pools. Add spending edges (downward) to fund outcomes and deliverables.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num">3</div>
        <h3>Simulate &amp; Save</h3>
        <p>Watch funds flow through your system in real-time. Adjust allocations with +/- controls on each edge. Save the flow to your space when you're happy with it.</p>
      </div>
    </div>

    <!-- Animated river visualization -->
    <div class="rf-anim-wrap" style="margin-top:2.5rem;border-color:rgba(52,211,153,0.15)">
      <svg viewBox="0 0 700 180" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="rf-river-g1" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stop-color="#fbbf24" stop-opacity="0.6"/>
            <stop offset="100%" stop-color="#34d399" stop-opacity="0.6"/>
          </linearGradient>
          <linearGradient id="rf-river-g2" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stop-color="#34d399" stop-opacity="0.5"/>
            <stop offset="100%" stop-color="#60a5fa" stop-opacity="0.5"/>
          </linearGradient>
          <linearGradient id="rf-river-g3" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stop-color="#34d399" stop-opacity="0.4"/>
            <stop offset="100%" stop-color="#a78bfa" stop-opacity="0.4"/>
          </linearGradient>
        </defs>

        <!-- Source labels -->
        <text x="30" y="55" fill="#fbbf24" font-size="10" font-weight="600" font-family="system-ui">Revenue</text>
        <text x="30" y="115" fill="#34d399" font-size="10" font-weight="600" font-family="system-ui">Grants</text>

        <!-- Destination labels -->
        <text x="620" y="40" fill="#60a5fa" font-size="10" font-weight="600" font-family="system-ui">Team A</text>
        <text x="620" y="95" fill="#a78bfa" font-size="10" font-weight="600" font-family="system-ui">Team B</text>
        <text x="620" y="150" fill="#34d399" font-size="10" font-weight="600" font-family="system-ui">Reserve</text>

        <!-- River bands — wide flowing Bezier paths with dashed animation -->
        <!-- Revenue → Team A (wide band) -->
        <path d="M 90 45 C 250 45, 400 30, 610 35" fill="none" stroke="url(#rf-river-g2)" stroke-width="18" stroke-linecap="round" opacity="0.5" stroke-dasharray="8 12">
          <animate attributeName="stroke-dashoffset" values="40;0" dur="3s" repeatCount="indefinite"/>
        </path>

        <!-- Revenue → Team B (medium band) -->
        <path d="M 90 55 C 250 60, 400 80, 610 90" fill="none" stroke="url(#rf-river-g3)" stroke-width="10" stroke-linecap="round" opacity="0.4" stroke-dasharray="6 10">
          <animate attributeName="stroke-dashoffset" values="32;0" dur="3.5s" repeatCount="indefinite"/>
        </path>

        <!-- Grants → Team B -->
        <path d="M 90 110 C 250 108, 400 95, 610 92" fill="none" stroke="url(#rf-river-g3)" stroke-width="8" stroke-linecap="round" opacity="0.35" stroke-dasharray="5 8">
          <animate attributeName="stroke-dashoffset" values="26;0" dur="4s" repeatCount="indefinite"/>
        </path>

        <!-- Grants → Reserve -->
        <path d="M 90 118 C 250 125, 400 140, 610 145" fill="none" stroke="#34d399" stroke-width="14" stroke-linecap="round" opacity="0.3" stroke-dasharray="7 10">
          <animate attributeName="stroke-dashoffset" values="34;0" dur="3.2s" repeatCount="indefinite"/>
        </path>

        <!-- Flow particles along revenue path -->
        <circle r="3" fill="#fbbf24" opacity="0.8">
          <animate attributeName="cx" values="90;610" dur="4s" repeatCount="indefinite"/>
          <animate attributeName="cy" values="45;35" dur="4s" repeatCount="indefinite"/>
          <animate attributeName="opacity" values="0;0.9;0.9;0" dur="4s" repeatCount="indefinite"/>
        </circle>
        <circle r="2.5" fill="#34d399" opacity="0.7">
          <animate attributeName="cx" values="90;610" dur="5s" begin="1s" repeatCount="indefinite"/>
          <animate attributeName="cy" values="118;145" dur="5s" begin="1s" repeatCount="indefinite"/>
          <animate attributeName="opacity" values="0;0.8;0.8;0" dur="5s" begin="1s" repeatCount="indefinite"/>
        </circle>

        <!-- Subtle grid lines -->
        <line x1="90" y1="10" x2="90" y2="170" stroke="#334155" stroke-width="0.5" opacity="0.3"/>
        <line x1="610" y1="10" x2="610" y2="170" stroke="#334155" stroke-width="0.5" opacity="0.3"/>

        <!-- Title -->
        <text x="350" y="174" text-anchor="middle" fill="#64748b" font-size="9" font-family="system-ui">River view &mdash; all flows from source to outcome</text>
      </svg>
    </div>
  </div>
</section>

<!-- Use Cases -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Who Uses Flow-Based Funding?</h2>
    <p class="rl-subtext" style="text-align:center">When budgets need to respond dynamically to changing conditions, threshold-based flows replace static spreadsheets.</p>
    <div class="rl-grid-3">
      <div class="rl-card">
        <h3 style="color:#fbbf24">DAO Treasuries</h3>
        <p>Multi-pool treasuries where governance votes set thresholds and overflow routes funds between working groups automatically.</p>
      </div>
      <div class="rl-card">
        <h3 style="color:#34d399">Grant Programs</h3>
        <p>Funding rounds where excess from one grant pool overflows to the next priority &mdash; no capital sits idle when other pools need it.</p>
      </div>
      <div class="rl-card">
        <h3 style="color:#60a5fa">Revenue Sharing</h3>
        <p>Revenue enters a source funnel and splits proportionally to downstream recipients. Adjust percentages and see the river update live.</p>
      </div>
      <div class="rl-card">
        <h3 style="color:#a78bfa">Community Funds</h3>
        <p>Public goods funding where contributions flow through conviction-based allocation curves. Min thresholds protect critical infrastructure.</p>
      </div>
      <div class="rl-card">
        <h3 style="color:#f87171">Emergency Reserves</h3>
        <p>Critical-zone protection: when a pool drops below its minimum, outflow is automatically restricted to preserve essential reserves.</p>
      </div>
      <div class="rl-card">
        <h3 style="color:#22d3ee">Budget Modeling</h3>
        <p>Prototype budget structures visually before committing capital. Simulate deposit/withdrawal scenarios and see cascading effects.</p>
      </div>
    </div>
  </div>
</section>

<!-- The Funnel Metaphor -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">The Funnel Model</h2>
    <p class="rl-subtext" style="text-align:center">Every funding pool is a funnel with three zones. Thresholds trigger automatic behavior.</p>

    <div style="display:flex;gap:2rem;align-items:flex-start;justify-content:center;flex-wrap:wrap;margin-top:2rem">
      <!-- Animated funnel SVG -->
      <div class="rf-anim-wrap" style="max-width:280px;flex:0 0 auto;border-color:rgba(251,191,36,0.15)">
        <svg viewBox="0 0 200 280" xmlns="http://www.w3.org/2000/svg">
          <!-- Funnel body -->
          <rect x="30" y="20" width="140" height="240" rx="14" fill="none" stroke="#334155" stroke-width="1.5"/>

          <!-- Zone backgrounds -->
          <rect x="32" y="22" width="136" height="70" rx="12" fill="#fbbf24" opacity="0.06"/>
          <rect x="32" y="92" width="136" height="90" fill="#34d399" opacity="0.06"/>
          <rect x="32" y="182" width="136" height="76" rx="12" fill="#475569" opacity="0.08"/>

          <!-- Animated water fill -->
          <clipPath id="rf-funnel-clip"><rect x="32" y="22" width="136" height="236" rx="12"/></clipPath>
          <g clip-path="url(#rf-funnel-clip)">
            <!-- Water body -->
            <rect x="32" width="136" height="200" fill="#3b82f6" opacity="0.15">
              <animate attributeName="y" values="120;40;80;160;120" dur="10s" repeatCount="indefinite"/>
            </rect>
            <!-- Water surface shimmer -->
            <rect x="32" width="136" height="4" fill="#60a5fa" opacity="0.3">
              <animate attributeName="y" values="120;40;80;160;120" dur="10s" repeatCount="indefinite"/>
            </rect>
          </g>

          <!-- Threshold lines -->
          <line x1="28" y1="92" x2="172" y2="92" stroke="#fbbf24" stroke-width="2" stroke-dasharray="6 4"/>
          <line x1="28" y1="182" x2="172" y2="182" stroke="#ef4444" stroke-width="2" stroke-dasharray="6 4"/>

          <!-- Zone labels -->
          <text x="100" y="58" text-anchor="middle" fill="#fbbf24" font-size="11" font-weight="700" font-family="system-ui">OVERFLOW</text>
          <text x="100" y="72" text-anchor="middle" fill="#fbbf24" font-size="8" opacity="0.6" font-family="system-ui">excess redistributes</text>

          <text x="100" y="138" text-anchor="middle" fill="#34d399" font-size="11" font-weight="700" font-family="system-ui">HEALTHY</text>
          <text x="100" y="152" text-anchor="middle" fill="#34d399" font-size="8" opacity="0.6" font-family="system-ui">normal flow rate</text>

          <text x="100" y="218" text-anchor="middle" fill="#f87171" font-size="11" font-weight="700" font-family="system-ui">CRITICAL</text>
          <text x="100" y="232" text-anchor="middle" fill="#f87171" font-size="8" opacity="0.6" font-family="system-ui">outflow restricted</text>

          <!-- Threshold labels -->
          <text x="180" y="96" fill="#fbbf24" font-size="9" font-weight="600" font-family="system-ui">MAX</text>
          <text x="180" y="186" fill="#ef4444" font-size="9" font-weight="600" font-family="system-ui">MIN</text>

          <!-- Overflow arrow (appears when high) -->
          <g opacity="0">
            <animate attributeName="opacity" values="0;0;0.7;0;0" dur="10s" repeatCount="indefinite"/>
            <path d="M 170 55 L 195 55" stroke="#fbbf24" stroke-width="2" fill="none" marker-end="none"/>
            <polygon points="192,50 200,55 192,60" fill="#fbbf24"/>
            <text x="172" y="48" fill="#fbbf24" font-size="7" font-family="system-ui">overflow</text>
          </g>
        </svg>
      </div>

      <!-- Text description alongside -->
      <div style="max-width:22rem;flex:1 1 18rem;padding-top:0.5rem">
        <div style="margin-bottom:1.5rem">
          <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem">
            <span style="width:12px;height:12px;border-radius:3px;background:#fbbf24;display:inline-block"></span>
            <strong style="color:#fbbf24;font-size:0.95rem">Overflow Zone</strong>
          </div>
          <p style="font-size:0.85rem;color:var(--rs-text-secondary,#94a3b8);line-height:1.5">
            When funds exceed the max threshold, the excess automatically redistributes to connected funnels via overflow edges.
          </p>
        </div>
        <div style="margin-bottom:1.5rem">
          <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem">
            <span style="width:12px;height:12px;border-radius:3px;background:#34d399;display:inline-block"></span>
            <strong style="color:#34d399;font-size:0.95rem">Healthy Zone</strong>
          </div>
          <p style="font-size:0.85rem;color:var(--rs-text-secondary,#94a3b8);line-height:1.5">
            Between min and max, the funnel operates normally. All outflow edges run at their configured allocation rates.
          </p>
        </div>
        <div>
          <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem">
            <span style="width:12px;height:12px;border-radius:3px;background:#f87171;display:inline-block"></span>
            <strong style="color:#f87171;font-size:0.95rem">Critical Zone</strong>
          </div>
          <p style="font-size:0.85rem;color:var(--rs-text-secondary,#94a3b8);line-height:1.5">
            Below the min threshold, outflow is restricted to protect essential reserves. The funnel enters conservation mode.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Ecosystem -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Connects to Your Stack</h2>
    <p class="rl-subtext" style="text-align:center">
      rFlows plugs into other rSpace modules for end-to-end treasury governance.
    </p>
    <div class="rl-grid-3" style="max-width:900px;margin:0 auto">
      <div class="rl-integration">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#14b8a6,rgba(20,184,166,0.6))">&#128176;</div>
        <div>
          <h3><a href="/rwallet" style="color:#14b8a6;text-decoration:none">rWallet</a></h3>
          <p>On-chain balances feed into funnels as real-time deposits. Multi-sig wallets as funding sources.</p>
        </div>
      </div>
      <div class="rl-integration">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#8b5cf6,rgba(139,92,246,0.6))">&#128499;</div>
        <div>
          <h3><a href="/rvote" style="color:#8b5cf6;text-decoration:none">rVote</a></h3>
          <p>Governance decisions set flow thresholds and allocation percentages through formal proposals.</p>
        </div>
      </div>
      <div class="rl-integration">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#0891b2,rgba(8,145,178,0.6))">&#128202;</div>
        <div>
          <h3><a href="/rdata" style="color:#0891b2;text-decoration:none">rData</a></h3>
          <p>Analytics dashboards pull from flow events &mdash; track deposits, withdrawals, and allocation history.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Under the Hood -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Under the Hood</h2>
    <div class="rl-grid-4">
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#f59e0b,rgba(245,158,11,0.6))">&#127754;</div>
        <h3>Flow Engine</h3>
        <p>Custom allocation engine computes overflow cascades, spending splits, and threshold responses in real-time.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#6366f1,rgba(99,102,241,0.6))">&#128274;</div>
        <h3>EncryptID</h3>
        <p>Passkey-based auth &mdash; no passwords, no seed phrases. Sign in with biometrics to save flows to your space.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#22c55e,#059669)">&#128260;</div>
        <h3>Automerge CRDT</h3>
        <p>Real-time sync across collaborators. Multiple people can edit flows simultaneously with automatic conflict resolution.</p>
      </div>
      <div class="rl-card rl-card--center">
        <div class="rl-icon-box" style="background:linear-gradient(135deg,#0891b2,rgba(8,145,178,0.6))">&#127760;</div>
        <h3>Local-First</h3>
        <p>Works offline. Changes sync when you reconnect. Your data lives on your device first, server second.</p>
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="rl-section">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading">Ready to model your funding flows?</h2>
    <p class="rl-subtext">Build a flow in the demo, then save it to your own space with one click.</p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/rflows" class="rl-cta-primary">Open the Demo &rarr;</a>
      <a href="/create-space" class="rl-cta-secondary">Save Flow to Space</a>
    </div>
  </div>
</section>

<div class="rl-back">
  <a href="/">&larr; Back to rSpace</a>
</div>`;
}
