/**
 * rPubs landing page — community pocket press.
 * Ported from the Next.js page.tsx with all unique visual elements preserved.
 */
export function renderLanding(): string {
  return `
<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline">Community Pocket Press</span>
  <h1 class="rl-heading">Write it. Press it.<br>Share it.</h1>
  <p class="rl-subtext">
    Instant local publishing for your writing. Paste in your text, pick a
    pocket format, and get a print-ready book in seconds &mdash; then find a
    local print shop or bind it yourself.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rpubs" class="rl-cta-primary" id="ml-primary">
      <span style="display:inline-flex;align-items:center;gap:0.5rem">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
        Start Writing
      </span>
    </a>
    <a href="/create-space" class="rl-cta-secondary">Create a Space</a>
  </div>
</div>

<!-- How it works -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">From draft to booklet in three steps</h2>
    <div class="rl-grid-3">
      <div class="rl-step">
        <div class="rl-step__num" style="position:relative">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#14b8a6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
        </div>
        <h3>Write or paste</h3>
        <p>Type directly, paste your markdown, or drop in a .md file. The editor handles the rest.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num" style="position:relative">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#14b8a6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
        </div>
        <h3>Press it</h3>
        <p>Pick a pocket format &mdash; from A7 pocket to digest &mdash; and generate a typeset PDF in seconds.</p>
      </div>
      <div class="rl-step">
        <div class="rl-step__num" style="position:relative">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#14b8a6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
        </div>
        <h3>Print locally</h3>
        <p>Find a community print shop nearby, or download an imposition PDF and bind it at home.</p>
      </div>
    </div>
  </div>
</section>

<!-- Four pocket formats -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Four pocket formats</h2>
    <p class="rl-subtext" style="text-align:center">
      From tiny zines that fit in your back pocket to digest-sized readers for longer works.
    </p>
    <div class="rl-grid-4" style="margin-top:2rem">
      <div class="rl-card" style="text-align:left">
        <h3 style="margin-bottom:0.15rem">A7 Pocket</h3>
        <p style="font-size:0.75rem;color:#14b8a6;margin-bottom:0.5rem">74 &times; 105 mm</p>
        <p>Fits in your pocket. Perfect for poems, manifestos, and quick reads.</p>
        <p style="font-size:0.75rem;color:#64748b;margin-top:0.5rem">8&ndash;32 pages</p>
      </div>
      <div class="rl-card" style="text-align:left">
        <h3 style="margin-bottom:0.15rem">Quarter Letter</h3>
        <p style="font-size:0.75rem;color:#14b8a6;margin-bottom:0.5rem">4.25 &times; 5.5&quot;</p>
        <p>Classic zine size. Great for essays, short stories, and pamphlets.</p>
        <p style="font-size:0.75rem;color:#64748b;margin-top:0.5rem">16&ndash;64 pages</p>
      </div>
      <div class="rl-card" style="text-align:left">
        <h3 style="margin-bottom:0.15rem">A6 Booklet</h3>
        <p style="font-size:0.75rem;color:#14b8a6;margin-bottom:0.5rem">105 &times; 148 mm</p>
        <p>Postcard-sized. Ideal for field guides, chapbooks, and handbooks.</p>
        <p style="font-size:0.75rem;color:#64748b;margin-top:0.5rem">24&ndash;96 pages</p>
      </div>
      <div class="rl-card" style="text-align:left">
        <h3 style="margin-bottom:0.15rem">Digest</h3>
        <p style="font-size:0.75rem;color:#14b8a6;margin-bottom:0.5rem">5.5 &times; 8.5&quot;</p>
        <p>Standard indie publishing size. For novellas, collections, and readers.</p>
        <p style="font-size:0.75rem;color:#64748b;margin-top:0.5rem">32&ndash;200+ pages</p>
      </div>
    </div>
  </div>
</section>

<!-- AI Zine Generator -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <div class="rl-grid-2">
      <div>
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem">
          <span style="width:1.75rem;height:1.75rem;border-radius:0.375rem;background:linear-gradient(135deg,#f59e0b,#ef4444);display:flex;align-items:center;justify-content:center;font-size:0.75rem;line-height:1">&#128240;</span>
          <span style="font-size:0.875rem;font-weight:600;color:#e2e8f0">Zine Generator</span>
        </div>
        <h2 class="rl-heading">AI-powered zines in minutes</h2>
        <p style="color:#94a3b8;line-height:1.65;margin-bottom:1rem;font-size:0.95rem">
          Pick a topic, choose a visual style and tone, and let AI generate a
          complete 8-page zine &mdash; cover, content, and call-to-action &mdash;
          with illustrations and editable text. Tweak any section, regenerate
          images with feedback, then download or send to print.
        </p>
        <ul class="rl-check-list">
          <li><strong>6 visual styles</strong> &mdash; punk zine, mycelial, minimal, collage, retro, academic</li>
          <li><strong>5 tones</strong> &mdash; rebellious, regenerative, playful, informative, poetic</li>
          <li><strong>Per-section editing</strong> &mdash; regenerate any text or image with feedback</li>
          <li><strong>Print-ready</strong> &mdash; download and fold, or send straight to rPubs for binding</li>
        </ul>
        <div style="display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1.25rem">
          <a href="https://demo.rspace.online/rpubs/zine" style="display:inline-flex;align-items:center;gap:0.4rem;padding:0.5rem 1rem;border-radius:0.5rem;background:linear-gradient(135deg,#f59e0b,#ef4444);color:white;font-size:0.75rem;font-weight:500;text-decoration:none">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M2 12h20"/></svg>
            Generate a Zine
          </a>
          <a href="https://zine.mycofi.earth" target="_blank" rel="noopener" style="display:inline-block;padding:0.5rem 1rem;border-radius:0.5rem;border:1px solid rgba(255,255,255,0.15);color:#94a3b8;font-size:0.75rem;font-weight:500;text-decoration:none">
            See examples &rarr;
          </a>
        </div>
      </div>
      <div class="rl-card" style="padding:1.5rem;text-align:center">
        <p style="font-size:0.7rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:1rem">Choose your style</p>
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem">
          <div style="border:1px solid rgba(255,255,255,0.08);border-radius:0.5rem;padding:0.75rem 0.5rem;text-align:center">
            <p style="font-size:1.25rem;margin-bottom:0.25rem">&#128247;</p>
            <p style="font-size:0.7rem;font-weight:600;color:#e2e8f0">Punk</p>
            <p style="font-size:0.6rem;color:#64748b">Xerox &amp; DIY</p>
          </div>
          <div style="border:1px solid rgba(255,255,255,0.08);border-radius:0.5rem;padding:0.75rem 0.5rem;text-align:center">
            <p style="font-size:1.25rem;margin-bottom:0.25rem">&#127812;</p>
            <p style="font-size:0.7rem;font-weight:600;color:#e2e8f0">Mycelial</p>
            <p style="font-size:0.6rem;color:#64748b">Organic textures</p>
          </div>
          <div style="border:1px solid rgba(255,255,255,0.08);border-radius:0.5rem;padding:0.75rem 0.5rem;text-align:center">
            <p style="font-size:1.25rem;margin-bottom:0.25rem">&#9898;</p>
            <p style="font-size:0.7rem;font-weight:600;color:#e2e8f0">Minimal</p>
            <p style="font-size:0.6rem;color:#64748b">Clean lines</p>
          </div>
          <div style="border:1px solid rgba(255,255,255,0.08);border-radius:0.5rem;padding:0.75rem 0.5rem;text-align:center">
            <p style="font-size:1.25rem;margin-bottom:0.25rem">&#127912;</p>
            <p style="font-size:0.7rem;font-weight:600;color:#e2e8f0">Collage</p>
            <p style="font-size:0.6rem;color:#64748b">Mixed media</p>
          </div>
          <div style="border:1px solid rgba(255,255,255,0.08);border-radius:0.5rem;padding:0.75rem 0.5rem;text-align:center">
            <p style="font-size:1.25rem;margin-bottom:0.25rem">&#127926;</p>
            <p style="font-size:0.7rem;font-weight:600;color:#e2e8f0">Retro</p>
            <p style="font-size:0.6rem;color:#64748b">70s vibes</p>
          </div>
          <div style="border:1px solid rgba(255,255,255,0.08);border-radius:0.5rem;padding:0.75rem 0.5rem;text-align:center">
            <p style="font-size:1.25rem;margin-bottom:0.25rem">&#128218;</p>
            <p style="font-size:0.7rem;font-weight:600;color:#e2e8f0">Academic</p>
            <p style="font-size:0.6rem;color:#64748b">Infographic</p>
          </div>
        </div>
        <p style="font-size:0.7rem;color:#94a3b8;margin-top:1rem;line-height:1.5">
          Each style generates unique illustrations, typography, and layouts
        </p>
      </div>
    </div>
  </div>
</section>

<!-- Group Buys -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Bulk orders, better prices</h2>
    <p class="rl-subtext" style="text-align:center">
      The more copies a community funds together, the cheaper each one gets.
      Group buys unlock better binding and lower per-copy costs.
    </p>

    <!-- Tier cards -->
    <div class="rl-grid-3" style="margin-top:2rem">
      <div class="rl-card rl-card--center" style="position:relative">
        <p style="font-size:1.75rem;font-weight:700;color:#e2e8f0;margin-bottom:0.15rem">25+</p>
        <p style="font-size:0.9rem;font-weight:600;color:#14b8a6;margin-bottom:0.5rem">Saddle-stitch</p>
        <p style="font-size:0.8rem;margin-bottom:1rem">Staple-bound booklet. Quick, lightweight, great for zines and short runs.</p>
        <p style="font-size:1.25rem;font-weight:700;color:#e2e8f0">$8<span style="font-size:0.75rem;color:#94a3b8;font-weight:400">/copy</span></p>
      </div>
      <div class="rl-card rl-card--center" style="position:relative">
        <span class="rl-badge" style="position:absolute;top:-0.6rem;right:0.75rem">save 25%</span>
        <p style="font-size:1.75rem;font-weight:700;color:#e2e8f0;margin-bottom:0.15rem">50+</p>
        <p style="font-size:0.9rem;font-weight:600;color:#14b8a6;margin-bottom:0.5rem">Perfect-bind</p>
        <p style="font-size:0.8rem;margin-bottom:1rem">Glued spine with cover wrap. Professional feel, sits on a shelf like a real book.</p>
        <p style="font-size:1.25rem;font-weight:700;color:#e2e8f0">$6<span style="font-size:0.75rem;color:#94a3b8;font-weight:400">/copy</span></p>
      </div>
      <div class="rl-card rl-card--center" style="position:relative">
        <span class="rl-badge" style="position:absolute;top:-0.6rem;right:0.75rem">save 44%</span>
        <p style="font-size:1.75rem;font-weight:700;color:#e2e8f0;margin-bottom:0.15rem">100+</p>
        <p style="font-size:0.9rem;font-weight:600;color:#14b8a6;margin-bottom:0.5rem">Trade edition</p>
        <p style="font-size:0.8rem;margin-bottom:1rem">Full trade paperback. Robust binding, printed cover, retail-ready quality.</p>
        <p style="font-size:1.25rem;font-weight:700;color:#e2e8f0">$4.50<span style="font-size:0.75rem;color:#94a3b8;font-weight:400">/copy</span></p>
      </div>
    </div>

    <!-- How collaborative print runs work -->
    <div class="rl-card" style="margin-top:2.5rem">
      <h3 style="text-align:center;margin-bottom:1.25rem">How collaborative print runs work</h3>
      <div class="rl-grid-4" style="text-align:center">
        <div>
          <div style="width:2rem;height:2rem;border-radius:9999px;background:rgba(20,184,166,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 0.5rem">
            <span style="font-size:0.7rem;font-weight:700;color:#14b8a6">1</span>
          </div>
          <p style="font-size:0.75rem;color:#94a3b8;line-height:1.5">
            A title gets <a href="https://demo.rspace.online/rpubs" style="color:#14b8a6;text-decoration:none">funded</a> by the community
          </p>
        </div>
        <div>
          <div style="width:2rem;height:2rem;border-radius:9999px;background:rgba(20,184,166,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 0.5rem">
            <span style="font-size:0.7rem;font-weight:700;color:#14b8a6">2</span>
          </div>
          <p style="font-size:0.75rem;color:#94a3b8;line-height:1.5">
            Backers join the group buy as it hits each tier
          </p>
        </div>
        <div>
          <div style="width:2rem;height:2rem;border-radius:9999px;background:rgba(20,184,166,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 0.5rem">
            <span style="font-size:0.7rem;font-weight:700;color:#14b8a6">3</span>
          </div>
          <p style="font-size:0.75rem;color:#94a3b8;line-height:1.5">
            Order is placed with the nearest print shop via <a href="https://demo.rspace.online/rcart" style="color:#14b8a6;text-decoration:none">rCart</a>
          </p>
        </div>
        <div>
          <div style="width:2rem;height:2rem;border-radius:9999px;background:rgba(20,184,166,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 0.5rem">
            <span style="font-size:0.7rem;font-weight:700;color:#14b8a6">4</span>
          </div>
          <p style="font-size:0.75rem;color:#94a3b8;line-height:1.5">
            Books are printed locally and distributed to backers
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Cross-title batching -->
<section class="rl-section">
  <div class="rl-container">
    <h2 class="rl-heading" style="text-align:center">Bundle across titles, not just within them</h2>
    <p class="rl-subtext" style="text-align:center">
      Printer discounts are based on <em>total volume at the press</em>, not copies of a single book.
      When multiple titles route to the same local printer, everyone benefits from the combined run.
    </p>

    <!-- Cross-title batching example -->
    <div class="rl-card" style="max-width:680px;margin:2rem auto 0">
      <p style="font-size:0.7rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:1rem;text-align:center">
        How cross-title batching unlocks tiers
      </p>
      <div class="rl-grid-3" style="margin-bottom:1rem">
        <div style="border:1px solid rgba(255,255,255,0.06);border-radius:0.5rem;padding:0.75rem;text-align:center">
          <p style="font-size:0.875rem;font-weight:600;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">The Commons</p>
          <p style="font-size:0.75rem;color:#94a3b8">J. Emmett</p>
          <p style="font-size:0.65rem;color:#64748b;margin-top:0.25rem">governance</p>
          <p style="font-size:1.25rem;font-weight:700;color:#14b8a6;margin-top:0.5rem">35</p>
          <p style="font-size:0.6rem;color:#94a3b8">pre-committed copies</p>
        </div>
        <div style="border:1px solid rgba(255,255,255,0.06);border-radius:0.5rem;padding:0.75rem;text-align:center">
          <p style="font-size:0.875rem;font-weight:600;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Mycelial Networks</p>
          <p style="font-size:0.75rem;color:#94a3b8">M. Stamets</p>
          <p style="font-size:0.65rem;color:#64748b;margin-top:0.25rem">ecology</p>
          <p style="font-size:1.25rem;font-weight:700;color:#14b8a6;margin-top:0.5rem">40</p>
          <p style="font-size:0.6rem;color:#94a3b8">pre-committed copies</p>
        </div>
        <div style="border:1px solid rgba(255,255,255,0.06);border-radius:0.5rem;padding:0.75rem;text-align:center">
          <p style="font-size:0.875rem;font-weight:600;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Cosmolocal Reader</p>
          <p style="font-size:0.75rem;color:#94a3b8">Collective</p>
          <p style="font-size:0.65rem;color:#64748b;margin-top:0.25rem">economics</p>
          <p style="font-size:1.25rem;font-weight:700;color:#14b8a6;margin-top:0.5rem">30</p>
          <p style="font-size:0.6rem;color:#94a3b8">pre-committed copies</p>
        </div>
      </div>
      <div class="rl-divider"><span>at the same local printer</span></div>
      <div style="text-align:center">
        <p style="font-size:1.5rem;font-weight:700;color:#e2e8f0">105 copies</p>
        <p style="font-size:0.875rem;color:#14b8a6;font-weight:500">
          Trade edition tier unlocked &mdash; $4.50/copy for all three titles
        </p>
        <p style="font-size:0.75rem;color:#94a3b8;margin-top:0.25rem">
          No single title hit 100 alone, but together they clear the threshold
        </p>
      </div>
    </div>

    <!-- Pre-commitments from rSpace -->
    <div class="rl-integration" style="margin-top:2rem;max-width:680px;margin-left:auto;margin-right:auto">
      <div style="width:2.5rem;height:2.5rem;border-radius:0.5rem;background:rgba(20,184,166,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#14b8a6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
      </div>
      <div>
        <h3>Pre-commitments flow from rSpace</h3>
        <p style="margin-bottom:0.75rem">
          Every reading group, community, and network keeps a
          <span style="color:#e2e8f0;font-weight:500">CRDT ledger</span> in their
          <a href="https://rspace.online" style="color:#14b8a6;text-decoration:none">{space}</a>.
          When members signal intent to buy, those pre-commitments sync across
          clients &mdash; conflict-free, append-only, and auditable.
        </p>
        <p style="margin-bottom:0.75rem">
          As pre-commitments accumulate across titles, genres, and networks that share a
          local printer, the combined volume triggers better pricing tiers.
          A poetry collective and a tech reading group in the same city don&rsquo;t need to know
          each other &mdash; their orders batch automatically at the press.
        </p>
        <div style="display:flex;flex-wrap:wrap;gap:0.5rem">
          <a href="https://demo.rspace.online/rpubs" style="display:inline-flex;align-items:center;gap:0.4rem;padding:0.5rem 1rem;border-radius:0.5rem;background:#14b8a6;color:white;font-size:0.75rem;font-weight:500;text-decoration:none">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M2 12h20"/></svg>
            Fund a print run
          </a>
          <a href="https://rspace.online" style="display:inline-block;padding:0.5rem 1rem;border-radius:0.5rem;border:1px solid rgba(255,255,255,0.15);color:#94a3b8;font-size:0.75rem;font-weight:500;text-decoration:none">
            Learn about {space} ledgers
          </a>
        </div>
      </div>
    </div>

    <!-- Signal / Aggregate / Release -->
    <div class="rl-grid-3" style="margin-top:2rem;text-align:center">
      <div>
        <div style="width:2rem;height:2rem;border-radius:9999px;background:rgba(20,184,166,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 0.5rem">
          <span style="font-size:0.7rem;font-weight:700;color:#14b8a6">1</span>
        </div>
        <p style="font-size:0.8rem;font-weight:600;color:#e2e8f0;margin-bottom:0.15rem">Signal</p>
        <p style="font-size:0.75rem;color:#94a3b8;line-height:1.5">
          Communities pre-commit in their {space} CRDT ledger &mdash; &ldquo;I want 3 copies&rdquo;
        </p>
      </div>
      <div>
        <div style="width:2rem;height:2rem;border-radius:9999px;background:rgba(20,184,166,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 0.5rem">
          <span style="font-size:0.7rem;font-weight:700;color:#14b8a6">2</span>
        </div>
        <p style="font-size:0.8rem;font-weight:600;color:#e2e8f0;margin-bottom:0.15rem">Aggregate</p>
        <p style="font-size:0.75rem;color:#94a3b8;line-height:1.5">
          Pre-commitments across titles and networks
          <a href="https://demo.rspace.online/rpubs" style="color:#14b8a6;text-decoration:none">flow into the fund</a>,
          batched by printer region
        </p>
      </div>
      <div>
        <div style="width:2rem;height:2rem;border-radius:9999px;background:rgba(20,184,166,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 0.5rem">
          <span style="font-size:0.7rem;font-weight:700;color:#14b8a6">3</span>
        </div>
        <p style="font-size:0.8rem;font-weight:600;color:#e2e8f0;margin-bottom:0.15rem">Release</p>
        <p style="font-size:0.75rem;color:#94a3b8;line-height:1.5">
          When volume hits a tier threshold, the print run triggers &mdash; everyone gets the bulk rate
        </p>
      </div>
    </div>
  </div>
</section>

<!-- rCart integration -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <div class="rl-grid-2">
      <div>
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem">
          <span style="width:1.75rem;height:1.75rem;border-radius:0.375rem;background:#fdba74;display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:900;color:#0f172a;line-height:1">rCt</span>
          <span style="font-size:0.875rem;font-weight:600;color:#e2e8f0">rCart</span>
          <span style="font-size:0.75rem;color:#94a3b8">&times;</span>
          <span style="width:1.75rem;height:1.75rem;border-radius:0.375rem;background:#fda4af;display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:900;color:#0f172a;line-height:1">rP</span>
          <span style="font-size:0.875rem;font-weight:600;color:#e2e8f0">rPubs</span>
        </div>
        <h2 class="rl-heading">Group purchasing, built in</h2>
        <p style="color:#94a3b8;line-height:1.65;margin-bottom:1rem;font-size:0.95rem">
          rCart handles the commerce side of group buys &mdash; collecting orders,
          splitting payments, and coordinating delivery. When a title hits its
          funding goal, rCart automatically batches the order to the best local
          print shop.
        </p>
        <ul class="rl-check-list">
          <li><strong>Shared carts</strong> &mdash; friends, reading groups, or whole communities pool orders for better rates</li>
          <li><strong>Automatic tier unlock</strong> &mdash; as more copies are ordered, the price drops for everyone</li>
          <li><strong>Local fulfillment</strong> &mdash; orders route to the nearest registered print shop, not a distant warehouse</li>
          <li><strong>Transparent pricing</strong> &mdash; 30% to the author, 10% to the community, 60% to print and delivery</li>
        </ul>
      </div>
      <div class="rl-card" style="padding:1.5rem">
        <p style="font-size:0.7rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:1rem">Example group buy</p>
        <!-- Mini order summary -->
        <div style="margin-bottom:1rem">
          <div style="display:flex;align-items:center;justify-content:space-between;font-size:0.875rem;margin-bottom:0.75rem">
            <span style="font-weight:500;color:#e2e8f0">The Commons</span>
            <span style="color:#94a3b8">by J. Emmett</span>
          </div>
          <div class="rl-progress">
            <div class="rl-progress__fill" style="width:72%"></div>
          </div>
          <div style="display:flex;align-items:center;justify-content:space-between;font-size:0.75rem;color:#94a3b8;margin-top:0.5rem">
            <span>36 of 50 copies ordered</span>
            <span style="color:#14b8a6;font-weight:500">72%</span>
          </div>
        </div>
        <!-- Tier indicator -->
        <div class="rl-tier">
          <div class="rl-tier__item rl-tier__item--active">
            <p><strong>25+</strong></p>
            <p style="opacity:0.7">$8/copy</p>
          </div>
          <div class="rl-tier__item rl-tier__item--active">
            <p><strong>50+</strong></p>
            <p style="opacity:0.7">$6/copy</p>
          </div>
          <div class="rl-tier__item">
            <p><strong style="color:#64748b">100+</strong></p>
            <p style="color:#64748b">$4.50</p>
          </div>
        </div>
        <div style="font-size:0.75rem;color:#94a3b8;line-height:1.55;margin-top:1rem">
          <p style="margin-bottom:0.25rem"><span style="font-weight:500;color:#e2e8f0">Current tier:</span> Saddle-stitch at $8/copy</p>
          <p><span style="font-weight:500;color:#e2e8f0">14 more copies</span> to unlock perfect-bind at $6/copy &mdash; everyone saves.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Cosmolocal -->
<section class="rl-section">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading">Design global, manufacture local</h2>
    <p class="rl-subtext">
      rPubs connects you to a cosmolocal network of independent print shops.
      Your writing is typeset in the cloud and printed close to where it&rsquo;s
      needed &mdash; reducing shipping, supporting local makers, and keeping
      publishing accessible.
    </p>
    <div style="display:flex;align-items:center;justify-content:center;gap:0.75rem;flex-wrap:wrap">
      <a href="https://demo.rspace.online/rpubs" style="display:inline-flex;align-items:center;gap:0.4rem;padding:0.5rem 1rem;border-radius:0.5rem;border:1px solid rgba(20,184,166,0.3);color:#14b8a6;font-size:0.875rem;font-weight:500;text-decoration:none">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
        Register Your Print Shop
      </a>
      <a href="https://demo.rspace.online/rpubs" style="display:inline-block;padding:0.5rem 1rem;border-radius:0.5rem;border:1px solid rgba(255,255,255,0.15);color:#94a3b8;font-size:0.875rem;font-weight:500;text-decoration:none">
        Fund a Title
      </a>
      <a href="https://demo.rspace.online/rcart" style="display:inline-flex;align-items:center;gap:0.4rem;padding:0.5rem 1rem;border-radius:0.5rem;border:1px solid rgba(255,255,255,0.15);color:#94a3b8;font-size:0.875rem;font-weight:500;text-decoration:none">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
        Browse on rCart
      </a>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="rl-section rl-section--alt">
  <div class="rl-container" style="text-align:center">
    <h2 class="rl-heading">Write it. Press it. Share it.</h2>
    <p class="rl-subtext">Try the demo or create a space to get started.</p>
    <div class="rl-cta-row">
      <a href="https://demo.rspace.online/rpubs" class="rl-cta-primary">Start Writing</a>
      <a href="/create-space" class="rl-cta-secondary">Create a Space</a>
    </div>
  </div>
</section>

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