#!/usr/bin/env python3
"""Page content definitions — Part 3 (remaining 35 pages)"""

import sys, os
sys.path.insert(0, os.path.dirname(__file__))
from generate_pages import page

PAGES = {}

# ── Products ──────────────────────────────────────────────────
PAGES["products.html"] = page("Products", "Browse the full Acme product suite.", """
  <section class="page-hero"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb"><li><a href="../index.html">Home</a></li><li aria-current="page">Products</li></ol></nav>
    <span class="eyebrow">Products</span><h1>The complete Acme product suite</h1>
    <p class="lead">Everything your team needs to plan, build, and ship great software.</p>
  </div></section>
  <section class="features-section section"><div class="container">
    <div class="features-grid">
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F4CB;</div><h3>Acme Plan</h3><p>Project management, roadmaps, and sprint planning for engineering teams.</p><a href="product-detail.html" class="btn btn-outline btn-sm mt-4">Learn more</a></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F504;</div><h3>Acme Build</h3><p>CI/CD pipelines, automated testing, and one-click deployments.</p><a href="product-detail.html" class="btn btn-outline btn-sm mt-4">Learn more</a></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F4CA;</div><h3>Acme Insights</h3><p>Real-time analytics, custom dashboards, and team velocity tracking.</p><a href="product-detail.html" class="btn btn-outline btn-sm mt-4">Learn more</a></article>
    </div>
  </div></section>
""")

# ── Product Detail ────────────────────────────────────────────
PAGES["product-detail.html"] = page("Acme Plan", "Project management and roadmapping for engineering teams.", """
  <section class="page-hero"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb"><li><a href="../index.html">Home</a></li><li><a href="products.html">Products</a></li><li aria-current="page">Acme Plan</li></ol></nav>
    <span class="eyebrow">Product</span><h1>Acme Plan</h1>
    <p class="lead">Project management, roadmaps, and sprint planning — built for the way engineering teams actually work.</p>
    <div style="display:flex;gap:var(--space-4);margin-top:var(--space-6);flex-wrap:wrap;">
      <a href="signup.html" class="btn btn-primary btn-lg">Start free trial</a>
      <a href="pricing.html" class="btn btn-outline btn-lg">View pricing</a>
    </div>
  </div></section>
  <section class="features-section section"><div class="container">
    <div class="features-grid">
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F4CC;</div><h3>Kanban Boards</h3><p>Visualize work in progress with customizable boards and WIP limits.</p></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F5FA;&#xFE0F;</div><h3>Roadmaps</h3><p>Plan quarters and years with drag-and-drop timeline views.</p></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x26A1;</div><h3>Sprint Planning</h3><p>Run agile sprints with velocity tracking and burndown charts.</p></article>
    </div>
  </div></section>
  <section class="cta-section section"><div class="container"><h2>Ready to get organized?</h2><p>Start your free trial today.</p><div class="cta-actions"><a href="signup.html" class="btn btn-white btn-lg">Start free trial</a></div></div></section>
""")

# ── News Index ────────────────────────────────────────────────
PAGES["news-index.html"] = page("News", "Latest news and announcements from Acme Corp.", """
  <section class="page-hero"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb"><li><a href="../index.html">Home</a></li><li aria-current="page">News</li></ol></nav>
    <span class="eyebrow">News</span><h1>Latest from Acme</h1>
    <p class="lead">Product announcements, company news, and press releases.</p>
  </div></section>
  <section class="blog-section section"><div class="container">
    <div class="blog-list">
      <article class="blog-list-item"><img class="blog-list-image" src="https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=200&q=80" alt="Acme office" loading="lazy" /><div class="blog-list-body"><div class="blog-card-meta"><span class="badge badge-primary">Announcement</span><span>June 10, 2025</span></div><h3 class="blog-card-title"><a href="blog-article.html">Acme raises $40M Series B to accelerate product development</a></h3><p class="blog-card-excerpt">We're thrilled to announce our $40M Series B funding round led by Sequoia Capital.</p><a href="blog-article.html" class="btn btn-ghost btn-sm">Read more</a></div></article>
      <article class="blog-list-item"><img class="blog-list-image" src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=200&q=80" alt="Product launch" loading="lazy" /><div class="blog-list-body"><div class="blog-card-meta"><span class="badge badge-secondary">Product</span><span>May 15, 2025</span></div><h3 class="blog-card-title"><a href="blog-article.html">Introducing Acme v2.0 — our biggest release yet</a></h3><p class="blog-card-excerpt">Acme v2.0 brings a completely redesigned interface, new CI/CD features, and 50+ improvements.</p><a href="blog-article.html" class="btn btn-ghost btn-sm">Read more</a></div></article>
    </div>
  </div></section>
""")

# ── Solutions ─────────────────────────────────────────────────
PAGES["solutions.html"] = page("Solutions", "Acme solutions for every team size and industry.", """
  <section class="page-hero"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb"><li><a href="../index.html">Home</a></li><li aria-current="page">Solutions</li></ol></nav>
    <span class="eyebrow">Solutions</span><h1>Built for teams like yours</h1>
    <p class="lead">Whether you're a startup or an enterprise, Acme scales with your needs.</p>
  </div></section>
  <section class="features-section section"><div class="container">
    <div class="features-grid">
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F680;</div><h3>Startups</h3><p>Move fast without breaking things. Acme gives early-stage teams the structure they need to scale.</p><a href="landing.html" class="btn btn-outline btn-sm mt-4">Learn more</a></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F3E2;</div><h3>Enterprise</h3><p>Security, compliance, and scalability for organizations with thousands of engineers.</p><a href="contact.html" class="btn btn-outline btn-sm mt-4">Contact sales</a></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F4BB;</div><h3>Remote Teams</h3><p>Async-first features that keep distributed teams aligned and productive across time zones.</p><a href="features.html" class="btn btn-outline btn-sm mt-4">Learn more</a></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F393;</div><h3>Education</h3><p>Special pricing and features for universities, bootcamps, and educational institutions.</p><a href="contact.html" class="btn btn-outline btn-sm mt-4">Get discount</a></article>
    </div>
  </div></section>
""")

# ── Industry ──────────────────────────────────────────────────
PAGES["industry.html"] = page("Acme for Fintech", "How Acme helps fintech companies ship secure, compliant software faster.", """
  <section class="page-hero"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb"><li><a href="../index.html">Home</a></li><li><a href="solutions.html">Solutions</a></li><li aria-current="page">Fintech</li></ol></nav>
    <span class="eyebrow">Industry</span><h1>Acme for Fintech</h1>
    <p class="lead">Ship secure, compliant financial software faster — without sacrificing quality or auditability.</p>
  </div></section>
  <section class="features-section section"><div class="container">
    <div class="features-grid">
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F512;</div><h3>SOC 2 &amp; PCI Compliance</h3><p>Built-in audit trails, access controls, and compliance reporting for regulated industries.</p></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F50D;</div><h3>Security Scanning</h3><p>Automated SAST/DAST scanning integrated into every pipeline run.</p></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F4C4;</div><h3>Audit Logs</h3><p>Immutable audit logs for every action — who did what, when, and why.</p></article>
    </div>
  </div></section>
  <section class="cta-section section"><div class="container"><h2>Ready to see Acme in action?</h2><p>Book a demo with our fintech specialists.</p><div class="cta-actions"><a href="contact.html" class="btn btn-white btn-lg">Book a demo</a></div></div></section>
""")

# ── Lead Gen ──────────────────────────────────────────────────
PAGES["lead-gen.html"] = page("Get a Free Demo", "Book a personalized demo of Acme for your team.", """
  <section style="min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--color-bg);">
    <div style="background:linear-gradient(135deg,var(--color-primary-700),var(--color-secondary-600));padding:var(--space-16) var(--space-12);display:flex;flex-direction:column;justify-content:center;color:white;">
      <span class="eyebrow" style="color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);">Free Demo</span>
      <h1 style="color:white;font-size:var(--font-size-4xl);">See Acme in action</h1>
      <p style="color:rgba(255,255,255,0.8);font-size:var(--font-size-lg);margin-bottom:var(--space-8);">Get a personalized 30-minute demo tailored to your team's needs.</p>
      <div style="display:flex;flex-direction:column;gap:var(--space-4);">
        <div style="display:flex;align-items:center;gap:var(--space-3);color:rgba(255,255,255,0.9);"><span aria-hidden="true">&#10003;</span> Personalized to your use case</div>
        <div style="display:flex;align-items:center;gap:var(--space-3);color:rgba(255,255,255,0.9);"><span aria-hidden="true">&#10003;</span> No commitment required</div>
        <div style="display:flex;align-items:center;gap:var(--space-3);color:rgba(255,255,255,0.9);"><span aria-hidden="true">&#10003;</span> Q&amp;A with a product expert</div>
      </div>
    </div>
    <div style="padding:var(--space-16) var(--space-12);display:flex;align-items:center;">
      <div style="width:100%;max-width:440px;">
        <h2 style="margin-bottom:var(--space-6);">Book your demo</h2>
        <form data-validate novalidate aria-label="Demo request form">
          <div class="form-group"><label class="form-label" for="demo-name">Full name <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="text" id="demo-name" required autocomplete="name" /></div>
          <div class="form-group"><label class="form-label" for="demo-email">Work email <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="email" id="demo-email" required autocomplete="email" /></div>
          <div class="form-group"><label class="form-label" for="demo-company">Company <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="text" id="demo-company" required autocomplete="organization" /></div>
          <div class="form-group"><label class="form-label" for="demo-size">Team size</label><div class="form-select-wrapper"><select class="form-select" id="demo-size"><option value="">Select size</option><option>1-10</option><option>11-50</option><option>51-200</option><option>200+</option></select></div></div>
          <div class="form-group"><label class="form-label" for="demo-notes">What would you like to see?</label><textarea class="form-textarea" id="demo-notes" rows="3" placeholder="Tell us about your team's needs..."></textarea></div>
          <button type="submit" class="btn btn-primary btn-full btn-lg">Book my demo</button>
        </form>
      </div>
    </div>
  </section>
""", no_header_footer=True)

# ── Event ─────────────────────────────────────────────────────
PAGES["event.html"] = page("Acme Summit 2025", "Join us for the annual Acme Summit — two days of talks, workshops, and networking.", """
  <section class="page-hero dark"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb" style="color:var(--color-neutral-400);"><li><a href="../index.html" style="color:var(--color-neutral-400);">Home</a></li><li aria-current="page" style="color:white;">Event</li></ol></nav>
    <span class="eyebrow">Annual Conference</span><h1>Acme Summit 2025</h1>
    <p class="lead">Two days of talks, workshops, and networking for engineering leaders and developers.</p>
    <div style="display:flex;gap:var(--space-6);margin-top:var(--space-8);flex-wrap:wrap;">
      <div><div style="font-size:var(--font-size-sm);color:var(--color-neutral-400);">Date</div><div style="font-weight:600;color:white;">September 18-19, 2025</div></div>
      <div><div style="font-size:var(--font-size-sm);color:var(--color-neutral-400);">Location</div><div style="font-weight:600;color:white;">San Francisco, CA + Virtual</div></div>
      <div><div style="font-size:var(--font-size-sm);color:var(--color-neutral-400);">Attendees</div><div style="font-weight:600;color:white;">2,000+ expected</div></div>
    </div>
    <div style="margin-top:var(--space-8);display:flex;gap:var(--space-4);flex-wrap:wrap;">
      <a href="signup.html" class="btn btn-primary btn-lg">Register now</a>
      <a href="#agenda" class="btn btn-outline btn-lg" style="border-color:rgba(255,255,255,0.4);color:white;">View agenda</a>
    </div>
  </div></section>
  <section class="section"><div class="container">
    <div class="section-header centered"><span class="eyebrow">Speakers</span><h2>World-class speakers</h2></div>
    <div class="team-grid">
      <article class="team-card"><img class="avatar" src="https://i.pravatar.cc/96?img=20" alt="Portrait of Alex Rivera" /><div class="name">Alex Rivera</div><div class="role">CEO, Acme</div><p class="bio">Keynote: The Future of Engineering Productivity</p></article>
      <article class="team-card"><img class="avatar" src="https://i.pravatar.cc/96?img=5" alt="Portrait of Sarah Chen" /><div class="name">Sarah Chen</div><div class="role">VP Engineering, Stripe</div><p class="bio">Talk: Scaling CI/CD to 500 Engineers</p></article>
      <article class="team-card"><img class="avatar" src="https://i.pravatar.cc/96?img=8" alt="Portrait of Marcus Johnson" /><div class="name">Marcus Johnson</div><div class="role">CTO, Notion</div><p class="bio">Talk: Building a Culture of Shipping</p></article>
    </div>
  </div></section>
  <section class="section section-bg" id="agenda"><div class="container">
    <div class="section-header centered"><span class="eyebrow">Schedule</span><h2>Event agenda</h2></div>
    <div class="timeline">
      <div class="timeline-item"><div class="timeline-dot" aria-hidden="true"></div><div class="timeline-date">Day 1 — September 18</div><div class="timeline-title">Opening Keynote</div><div class="timeline-body">Alex Rivera kicks off the summit with a vision for the future of engineering productivity.</div></div>
      <div class="timeline-item"><div class="timeline-dot" aria-hidden="true"></div><div class="timeline-date">Day 1 — 11:00 AM</div><div class="timeline-title">Workshop: CI/CD Best Practices</div><div class="timeline-body">Hands-on workshop covering pipeline optimization, testing strategies, and deployment automation.</div></div>
      <div class="timeline-item"><div class="timeline-dot" aria-hidden="true"></div><div class="timeline-date">Day 2 — September 19</div><div class="timeline-title">Closing Keynote &amp; Product Announcements</div><div class="timeline-body">Major product announcements and a look at what's coming in Acme v3.0.</div></div>
    </div>
  </div></section>
""")

# ── Webinar ───────────────────────────────────────────────────
PAGES["webinar.html"] = page("Webinar: Shipping Faster with Acme", "Join our free webinar and learn how to cut your deploy times by 70%.", """
  <section class="page-hero"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb"><li><a href="../index.html">Home</a></li><li aria-current="page">Webinar</li></ol></nav>
    <span class="eyebrow">Free Webinar</span><h1>Shipping Faster with Acme</h1>
    <p class="lead">Learn how leading engineering teams cut deploy times by 70% using Acme's CI/CD platform.</p>
  </div></section>
  <section class="section"><div class="container">
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:start;">
      <div>
        <div style="background:var(--color-bg-muted);border-radius:var(--radius-xl);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:4rem;margin-bottom:var(--space-6);" aria-label="Webinar preview video placeholder">&#x25B6;&#xFE0F;</div>
        <h3>What you'll learn</h3>
        <ul class="feature-list" style="margin-top:var(--space-4);">
          <li><span class="check" aria-hidden="true">&#10003;</span> How to identify and eliminate pipeline bottlenecks</li>
          <li><span class="check" aria-hidden="true">&#10003;</span> Best practices for parallel test execution</li>
          <li><span class="check" aria-hidden="true">&#10003;</span> Setting up preview environments for every PR</li>
          <li><span class="check" aria-hidden="true">&#10003;</span> Live Q&amp;A with our engineering team</li>
        </ul>
        <div style="margin-top:var(--space-6);padding:var(--space-4);background:var(--color-bg-subtle);border-radius:var(--radius-lg);border:1px solid var(--color-border);">
          <div style="font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-2);">Presenter</div>
          <div style="display:flex;align-items:center;gap:var(--space-3);"><img src="https://i.pravatar.cc/48?img=25" alt="" style="width:48px;height:48px;border-radius:50%;" /><div><div style="font-weight:600;">Jordan Kim</div><div style="font-size:var(--font-size-sm);color:var(--color-text-muted);">CTO, Acme</div></div></div>
        </div>
      </div>
      <div class="card card-body">
        <h3 style="margin-bottom:var(--space-2);">Register for free</h3>
        <p style="color:var(--color-text-muted);font-size:var(--font-size-sm);margin-bottom:var(--space-6);">Thursday, July 17, 2025 &bull; 11:00 AM PT / 2:00 PM ET</p>
        <form data-validate novalidate aria-label="Webinar registration form">
          <div class="form-group"><label class="form-label" for="web-name">Full name <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="text" id="web-name" required autocomplete="name" /></div>
          <div class="form-group"><label class="form-label" for="web-email">Work email <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="email" id="web-email" required autocomplete="email" /></div>
          <div class="form-group"><label class="form-label" for="web-company">Company</label><input class="form-input" type="text" id="web-company" autocomplete="organization" /></div>
          <button type="submit" class="btn btn-primary btn-full">Reserve my spot</button>
          <p style="font-size:var(--font-size-xs);color:var(--color-text-subtle);text-align:center;margin-top:var(--space-3);">Free to attend. Recording available to registrants.</p>
        </form>
      </div>
    </div>
  </div></section>
""")

# ── Docs ──────────────────────────────────────────────────────
PAGES["docs.html"] = page("Documentation", "Acme developer documentation — guides, API reference, and tutorials.", """
  <section class="page-hero"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb"><li><a href="../index.html">Home</a></li><li aria-current="page">Documentation</li></ol></nav>
    <span class="eyebrow">Documentation</span><h1>Acme Developer Docs</h1>
    <p class="lead">Everything you need to integrate, extend, and build on top of Acme.</p>
    <div class="search-bar" style="max-width:480px;margin-top:var(--space-6);"><span class="search-icon" aria-hidden="true">&#x1F50D;</span><input type="search" placeholder="Search documentation..." aria-label="Search documentation" /></div>
  </div></section>
  <section class="section"><div class="container">
    <div class="docs-layout">
      <aside class="docs-sidebar sidebar" aria-label="Documentation navigation">
        <div class="sidebar-section-title">Getting Started</div>
        <ul class="sidebar-nav">
          <li class="sidebar-nav-item"><a href="docs.html" aria-current="page">Introduction</a></li>
          <li class="sidebar-nav-item"><a href="docs.html">Quick Start</a></li>
          <li class="sidebar-nav-item"><a href="docs.html">Installation</a></li>
          <li class="sidebar-nav-item"><a href="docs.html">Authentication</a></li>
        </ul>
        <div class="sidebar-section-title">Core Concepts</div>
        <ul class="sidebar-nav">
          <li class="sidebar-nav-item"><a href="docs.html">Projects</a></li>
          <li class="sidebar-nav-item"><a href="docs.html">Pipelines</a></li>
          <li class="sidebar-nav-item"><a href="docs.html">Integrations</a></li>
          <li class="sidebar-nav-item"><a href="docs.html">Webhooks</a></li>
        </ul>
        <div class="sidebar-section-title">API Reference</div>
        <ul class="sidebar-nav">
          <li class="sidebar-nav-item"><a href="docs.html">REST API</a></li>
          <li class="sidebar-nav-item"><a href="docs.html">GraphQL API</a></li>
          <li class="sidebar-nav-item"><a href="docs.html">SDKs</a></li>
        </ul>
      </aside>
      <article class="prose" style="max-width:none;">
        <h1>Introduction</h1>
        <p>Welcome to the Acme developer documentation. This guide will help you get started with the Acme API and platform integrations.</p>
        <div class="alert alert-info"><span class="alert-icon" aria-hidden="true">&#x2139;&#xFE0F;</span><div class="alert-content"><div class="alert-title">API Version</div>You are viewing documentation for Acme API v2. For v1 docs, see the <a href="#">legacy documentation</a>.</div></div>
        <h2>Quick Start</h2>
        <p>Get up and running with the Acme API in under 5 minutes.</p>
        <h3>1. Get your API key</h3>
        <p>Navigate to <strong>Settings &rarr; API Keys</strong> in your Acme workspace and create a new API key.</p>
        <h3>2. Make your first request</h3>
        <pre><code>curl -X GET https://api.acme.com/v2/projects \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json"</code></pre>
        <h3>3. Parse the response</h3>
        <pre><code>{
  "data": [
    {
      "id": "proj_abc123",
      "name": "My Project",
      "status": "active"
    }
  ],
  "meta": {
    "total": 1,
    "page": 1
  }
}</code></pre>
      </article>
      <nav class="docs-toc" aria-label="On this page">
        <h4>On this page</h4>
        <ul>
          <li><a href="#" class="active">Introduction</a></li>
          <li><a href="#">Quick Start</a></li>
          <li><a href="#">Get your API key</a></li>
          <li><a href="#">Make your first request</a></li>
          <li><a href="#">Parse the response</a></li>
        </ul>
      </nav>
    </div>
  </div></section>
""")

# ── Help Center ───────────────────────────────────────────────
PAGES["help-center.html"] = page("Help Center", "Find answers, guides, and tutorials in the Acme Help Center.", """
  <section class="page-hero"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb"><li><a href="../index.html">Home</a></li><li aria-current="page">Help Center</li></ol></nav>
    <span class="eyebrow">Help Center</span><h1>How can we help?</h1>
    <div class="search-bar" style="max-width:560px;margin-top:var(--space-6);"><span class="search-icon" aria-hidden="true">&#x1F50D;</span><input type="search" placeholder="Search for answers..." aria-label="Search help center" /><button class="search-btn">Search</button></div>
  </div></section>
  <section class="section"><div class="container">
    <div class="features-grid">
      <a href="docs.html" class="feature-card" style="text-decoration:none;color:inherit;"><div class="feature-icon" aria-hidden="true">&#x1F4DA;</div><h3>Getting Started</h3><p>New to Acme? Start here for setup guides and onboarding tutorials.</p></a>
      <a href="faq.html" class="feature-card" style="text-decoration:none;color:inherit;"><div class="feature-icon" aria-hidden="true">&#x2753;</div><h3>FAQ</h3><p>Answers to the most commonly asked questions about Acme.</p></a>
      <a href="docs.html" class="feature-card" style="text-decoration:none;color:inherit;"><div class="feature-icon" aria-hidden="true">&#x1F527;</div><h3>Integrations</h3><p>Connect Acme with your existing tools and workflows.</p></a>
      <a href="contact.html" class="feature-card" style="text-decoration:none;color:inherit;"><div class="feature-icon" aria-hidden="true">&#x1F4DE;</div><h3>Contact Support</h3><p>Can't find what you need? Our support team is here to help.</p></a>
    </div>
  </div></section>
  <section class="section section-bg"><div class="container">
    <div class="section-header centered"><span class="eyebrow">Popular Articles</span><h2>Frequently read</h2></div>
    <div style="max-width:700px;margin:0 auto;">
      <div class="accordion" data-multi>
        <div class="accordion-item"><button class="accordion-trigger" aria-expanded="false" aria-controls="hc-1" id="hc-btn-1">How do I invite team members?<span class="accordion-icon" aria-hidden="true">&#9660;</span></button><div class="accordion-panel" id="hc-1"><div class="accordion-content">Go to Settings &rarr; Team Members &rarr; Invite. Enter their email address and select their role. They'll receive an invitation email within minutes.</div></div></div>
        <div class="accordion-item"><button class="accordion-trigger" aria-expanded="false" aria-controls="hc-2" id="hc-btn-2">How do I connect GitHub?<span class="accordion-icon" aria-hidden="true">&#9660;</span></button><div class="accordion-panel" id="hc-2"><div class="accordion-content">Navigate to Settings &rarr; Integrations &rarr; GitHub. Click "Connect" and authorize Acme to access your GitHub organization.</div></div></div>
        <div class="accordion-item"><button class="accordion-trigger" aria-expanded="false" aria-controls="hc-3" id="hc-btn-3">How do I export my data?<span class="accordion-icon" aria-hidden="true">&#9660;</span></button><div class="accordion-panel" id="hc-3"><div class="accordion-content">Go to Settings &rarr; Data &rarr; Export. You can export all your data as JSON or CSV. Enterprise customers can also use the API for bulk exports.</div></div></div>
      </div>
    </div>
  </div></section>
""")

# ── KB Article ────────────────────────────────────────────────
PAGES["kb-article.html"] = page("How to invite team members", "Step-by-step guide to inviting team members to your Acme workspace.", """
  <section class="section"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb"><li><a href="../index.html">Home</a></li><li><a href="help-center.html">Help Center</a></li><li aria-current="page">Invite team members</li></ol></nav>
    <div class="sidebar-layout">
      <article class="prose" style="max-width:none;">
        <div style="display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6);">
          <span class="badge badge-success">Getting Started</span>
          <span style="font-size:var(--font-size-sm);color:var(--color-text-muted);">Updated June 1, 2025 &bull; 3 min read</span>
        </div>
        <h1>How to invite team members</h1>
        <p>This guide walks you through inviting new members to your Acme workspace.</p>
        <div class="alert alert-info"><span class="alert-icon" aria-hidden="true">&#x2139;&#xFE0F;</span><div class="alert-content"><div class="alert-title">Required permissions</div>You must be a Workspace Admin or Owner to invite team members.</div></div>
        <h2>Step 1: Open Team Settings</h2>
        <p>Click your workspace name in the top-left corner, then select <strong>Settings</strong> from the dropdown menu.</p>
        <h2>Step 2: Navigate to Team Members</h2>
        <p>In the Settings sidebar, click <strong>Team Members</strong> under the "Workspace" section.</p>
        <h2>Step 3: Send invitations</h2>
        <p>Click the <strong>Invite members</strong> button. Enter one or more email addresses (separated by commas) and select a role for each invitee.</p>
        <h2>Step 4: Confirm</h2>
        <p>Click <strong>Send invitations</strong>. Each invitee will receive an email with a link to join your workspace. Invitations expire after 7 days.</p>
        <div class="alert alert-success"><span class="alert-icon" aria-hidden="true">&#10003;</span><div class="alert-content"><div class="alert-title">Tip</div>You can invite up to 20 people at once. For bulk imports, use the CSV upload option.</div></div>
      </article>
      <aside class="sidebar">
        <h4 style="font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-subtle);margin-bottom:var(--space-4);">Related articles</h4>
        <ul style="list-style:none;display:flex;flex-direction:column;gap:var(--space-3);">
          <li><a href="kb-article.html" style="font-size:var(--font-size-sm);color:var(--color-text-muted);text-decoration:none;">Managing team roles and permissions</a></li>
          <li><a href="kb-article.html" style="font-size:var(--font-size-sm);color:var(--color-text-muted);text-decoration:none;">Setting up SSO for your workspace</a></li>
          <li><a href="kb-article.html" style="font-size:var(--font-size-sm);color:var(--color-text-muted);text-decoration:none;">Removing team members</a></li>
        </ul>
        <hr style="margin:var(--space-6) 0;" />
        <p style="font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-3);">Was this article helpful?</p>
        <div style="display:flex;gap:var(--space-2);">
          <button class="btn btn-outline btn-sm" data-toast="Thanks for your feedback!" data-toast-type="success">Yes</button>
          <button class="btn btn-outline btn-sm" data-toast="We'll work on improving this article." data-toast-type="info">No</button>
        </div>
      </aside>
    </div>
  </div></section>
""")

# ── Support ───────────────────────────────────────────────────
PAGES["support.html"] = page("Support", "Get help from the Acme support team.", """
  <section class="page-hero"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb"><li><a href="../index.html">Home</a></li><li aria-current="page">Support</li></ol></nav>
    <span class="eyebrow">Support</span><h1>We're here to help</h1>
    <p class="lead">Choose the support channel that works best for you.</p>
  </div></section>
  <section class="section"><div class="container">
    <div class="features-grid">
      <div class="card card-body text-center"><div style="font-size:2.5rem;margin-bottom:var(--space-4);" aria-hidden="true">&#x1F4AC;</div><h3>Live Chat</h3><p class="text-muted mb-4">Chat with our support team in real time. Available Mon-Fri, 9am-6pm PT.</p><button class="btn btn-primary" data-toast="Live chat is not available in this demo." data-toast-type="info">Start chat</button></div>
      <div class="card card-body text-center"><div style="font-size:2.5rem;margin-bottom:var(--space-4);" aria-hidden="true">&#x2709;&#xFE0F;</div><h3>Email Support</h3><p class="text-muted mb-4">Send us a message and we'll respond within one business day.</p><a href="contact.html" class="btn btn-outline">Send email</a></div>
      <div class="card card-body text-center"><div style="font-size:2.5rem;margin-bottom:var(--space-4);" aria-hidden="true">&#x1F4DA;</div><h3>Documentation</h3><p class="text-muted mb-4">Browse our comprehensive docs, guides, and API reference.</p><a href="docs.html" class="btn btn-outline">Browse docs</a></div>
      <div class="card card-body text-center"><div style="font-size:2.5rem;margin-bottom:var(--space-4);" aria-hidden="true">&#x1F465;</div><h3>Community</h3><p class="text-muted mb-4">Join our community forum to ask questions and share tips.</p><a href="#" class="btn btn-outline">Join community</a></div>
    </div>
    <div style="margin-top:var(--space-12);padding:var(--space-8);background:var(--color-bg-subtle);border-radius:var(--radius-xl);border:1px solid var(--color-border);">
      <h3 style="margin-bottom:var(--space-4);">System Status</h3>
      <div style="display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);">
        <span style="width:12px;height:12px;background:var(--color-success);border-radius:50%;display:inline-block;" aria-hidden="true"></span>
        <span style="font-weight:600;">All systems operational</span>
      </div>
      <div style="display:flex;flex-direction:column;gap:var(--space-3);">
        <div style="display:flex;justify-content:space-between;font-size:var(--font-size-sm);"><span>API</span><span class="text-success">Operational</span></div>
        <div style="display:flex;justify-content:space-between;font-size:var(--font-size-sm);"><span>Web App</span><span class="text-success">Operational</span></div>
        <div style="display:flex;justify-content:space-between;font-size:var(--font-size-sm);"><span>CI/CD Pipelines</span><span class="text-success">Operational</span></div>
        <div style="display:flex;justify-content:space-between;font-size:var(--font-size-sm);"><span>Webhooks</span><span class="text-success">Operational</span></div>
      </div>
    </div>
  </div></section>
""")

# ── Dashboard Marketing ───────────────────────────────────────
PAGES["dashboard-marketing.html"] = page("Dashboard Preview", "See what the Acme dashboard looks like — a static mockup.", """
  <section class="page-hero"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb"><li><a href="../index.html">Home</a></li><li aria-current="page">Dashboard Preview</li></ol></nav>
    <span class="eyebrow">Product Preview</span><h1>Your command center for engineering</h1>
    <p class="lead">A real-time view of your team's work, pipelines, and performance — all in one place.</p>
    <a href="signup.html" class="btn btn-primary btn-lg mt-6">Try it free</a>
  </div></section>
  <section class="section"><div class="container">
    <div style="background:var(--color-neutral-900);border-radius:var(--radius-2xl);padding:var(--space-6);box-shadow:var(--shadow-2xl);">
      <div style="display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);">
        <span style="width:12px;height:12px;background:#ff5f57;border-radius:50%;display:inline-block;" aria-hidden="true"></span>
        <span style="width:12px;height:12px;background:#febc2e;border-radius:50%;display:inline-block;" aria-hidden="true"></span>
        <span style="width:12px;height:12px;background:#28c840;border-radius:50%;display:inline-block;" aria-hidden="true"></span>
        <span style="margin-left:var(--space-4);font-size:var(--font-size-sm);color:var(--color-neutral-500);">app.acme.com/dashboard</span>
      </div>
      <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);margin-bottom:var(--space-6);">
        <div style="background:var(--color-neutral-800);border-radius:var(--radius-lg);padding:var(--space-4);"><div style="font-size:var(--font-size-xs);color:var(--color-neutral-400);margin-bottom:var(--space-2);">DEPLOYS TODAY</div><div style="font-size:var(--font-size-2xl);font-weight:800;color:white;">24</div><div style="font-size:var(--font-size-xs);color:var(--color-success);">+12% vs yesterday</div></div>
        <div style="background:var(--color-neutral-800);border-radius:var(--radius-lg);padding:var(--space-4);"><div style="font-size:var(--font-size-xs);color:var(--color-neutral-400);margin-bottom:var(--space-2);">AVG DEPLOY TIME</div><div style="font-size:var(--font-size-2xl);font-weight:800;color:white;">13m</div><div style="font-size:var(--font-size-xs);color:var(--color-success);">-70% vs last month</div></div>
        <div style="background:var(--color-neutral-800);border-radius:var(--radius-lg);padding:var(--space-4);"><div style="font-size:var(--font-size-xs);color:var(--color-neutral-400);margin-bottom:var(--space-2);">SUCCESS RATE</div><div style="font-size:var(--font-size-2xl);font-weight:800;color:white;">96%</div><div style="font-size:var(--font-size-xs);color:var(--color-success);">+19% vs last month</div></div>
        <div style="background:var(--color-neutral-800);border-radius:var(--radius-lg);padding:var(--space-4);"><div style="font-size:var(--font-size-xs);color:var(--color-neutral-400);margin-bottom:var(--space-2);">OPEN PRs</div><div style="font-size:var(--font-size-2xl);font-weight:800;color:white;">8</div><div style="font-size:var(--font-size-xs);color:var(--color-neutral-400);">Across 3 repos</div></div>
      </div>
      <div style="background:var(--color-neutral-800);border-radius:var(--radius-lg);padding:var(--space-4);height:200px;display:flex;align-items:center;justify-content:center;color:var(--color-neutral-500);">
        [Pipeline activity chart — interactive in live app]
      </div>
    </div>
  </div></section>
""")

# ── App Download ──────────────────────────────────────────────
PAGES["app-download.html"] = page("Download Acme", "Download the Acme mobile app for iOS and Android.", """
  <section class="hero hero-gradient" style="text-align:center;"><div class="container">
    <span class="eyebrow">Mobile App</span>
    <h1>Acme in your pocket</h1>
    <p class="lead">Stay connected to your team and projects from anywhere. Available on iOS and Android.</p>
    <div style="display:flex;justify-content:center;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-8);">
      <a href="#" class="btn btn-primary btn-lg" aria-label="Download on the App Store">&#x1F34E; App Store</a>
      <a href="#" class="btn btn-outline btn-lg" aria-label="Get it on Google Play">&#x1F916; Google Play</a>
    </div>
    <div style="margin-top:var(--space-12);max-width:300px;margin-inline:auto;background:var(--color-neutral-900);border-radius:var(--radius-2xl);padding:var(--space-4);box-shadow:var(--shadow-2xl);">
      <div style="background:var(--color-neutral-800);border-radius:var(--radius-xl);aspect-ratio:9/16;display:flex;align-items:center;justify-content:center;color:var(--color-neutral-500);">App screenshot</div>
    </div>
  </div></section>
  <section class="features-section section"><div class="container">
    <div class="section-header centered"><h2>Everything you need, on the go</h2></div>
    <div class="features-grid">
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F514;</div><h3>Push Notifications</h3><p>Get instant alerts for pipeline failures, PR reviews, and @mentions.</p></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F4F5;</div><h3>Offline Support</h3><p>View and update tasks even without an internet connection.</p></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F91D;</div><h3>Full Feature Parity</h3><p>Everything in the web app is available on mobile — no compromises.</p></article>
    </div>
  </div></section>
""")

# ── Comparison ────────────────────────────────────────────────
PAGES["comparison.html"] = page("Acme vs Competitors", "See how Acme compares to Jira, Asana, and Linear.", """
  <section class="page-hero"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb"><li><a href="../index.html">Home</a></li><li aria-current="page">Comparison</li></ol></nav>
    <span class="eyebrow">Comparison</span><h1>Acme vs the competition</h1>
    <p class="lead">See how Acme stacks up against Jira, Asana, and Linear across the features that matter most.</p>
  </div></section>
  <section class="section"><div class="container">
    <div class="comparison-table-wrapper">
      <table class="comparison-table" aria-label="Feature comparison: Acme vs Jira vs Asana vs Linear">
        <thead><tr>
          <th scope="col">Feature</th>
          <th scope="col" class="highlight">Acme</th>
          <th scope="col">Jira</th>
          <th scope="col">Asana</th>
          <th scope="col">Linear</th>
        </tr></thead>
        <tbody>
          <tr><td>Built-in CI/CD</td><td class="highlight-col"><span class="check-icon" aria-label="Yes">&#10003;</span></td><td><span class="dash-icon" aria-label="No">&#8212;</span></td><td><span class="dash-icon" aria-label="No">&#8212;</span></td><td><span class="dash-icon" aria-label="No">&#8212;</span></td></tr>
          <tr><td>Real-time analytics</td><td class="highlight-col"><span class="check-icon" aria-label="Yes">&#10003;</span></td><td><span class="check-icon" aria-label="Yes">&#10003;</span></td><td>Limited</td><td>Limited</td></tr>
          <tr><td>Free tier</td><td class="highlight-col"><span class="check-icon" aria-label="Yes">&#10003;</span></td><td><span class="check-icon" aria-label="Yes">&#10003;</span></td><td><span class="check-icon" aria-label="Yes">&#10003;</span></td><td><span class="check-icon" aria-label="Yes">&#10003;</span></td></tr>
          <tr><td>SSO / SAML</td><td class="highlight-col"><span class="check-icon" aria-label="Yes">&#10003;</span></td><td><span class="check-icon" aria-label="Yes">&#10003;</span></td><td><span class="check-icon" aria-label="Yes">&#10003;</span></td><td><span class="check-icon" aria-label="Yes">&#10003;</span></td></tr>
          <tr><td>Mobile app</td><td class="highlight-col"><span class="check-icon" aria-label="Yes">&#10003;</span></td><td><span class="check-icon" aria-label="Yes">&#10003;</span></td><td><span class="check-icon" aria-label="Yes">&#10003;</span></td><td><span class="check-icon" aria-label="Yes">&#10003;</span></td></tr>
          <tr><td>API access</td><td class="highlight-col">All plans</td><td>Paid only</td><td>Paid only</td><td>All plans</td></tr>
          <tr><td>Starting price</td><td class="highlight-col">Free</td><td>Free</td><td>Free</td><td>Free</td></tr>
          <tr><td>Setup time</td><td class="highlight-col">&lt; 5 min</td><td>Hours</td><td>30 min</td><td>&lt; 10 min</td></tr>
        </tbody>
      </table>
    </div>
    <div style="text-align:center;margin-top:var(--space-8);">
      <a href="signup.html" class="btn btn-primary btn-lg">Try Acme free</a>
    </div>
  </div></section>
""")

# ── Integrations ──────────────────────────────────────────────
PAGES["integrations.html"] = page("Integrations", "Connect Acme with 100+ tools your team already uses.", """
  <section class="page-hero"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb"><li><a href="../index.html">Home</a></li><li aria-current="page">Integrations</li></ol></nav>
    <span class="eyebrow">Integrations</span><h1>Connect your entire stack</h1>
    <p class="lead">Acme integrates with 100+ tools so you can keep using what you love.</p>
    <div class="search-bar" style="max-width:400px;margin-top:var(--space-6);"><span class="search-icon" aria-hidden="true">&#x1F50D;</span><input type="search" placeholder="Search integrations..." aria-label="Search integrations" /></div>
  </div></section>
  <section class="section"><div class="container">
    <div style="display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-8);">
      <a href="integrations.html" class="tag" aria-current="page">All</a>
      <a href="integrations.html" class="tag">Communication</a>
      <a href="integrations.html" class="tag">Development</a>
      <a href="integrations.html" class="tag">Design</a>
      <a href="integrations.html" class="tag">Analytics</a>
    </div>
    <div class="features-grid">
      <a href="integrations.html" class="integration-card"><div class="integration-logo" style="background:var(--color-bg-muted);width:48px;height:48px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;">S</div><h3>Slack</h3><p>Get pipeline notifications and updates directly in Slack channels.</p></a>
      <a href="integrations.html" class="integration-card"><div class="integration-logo" style="background:var(--color-bg-muted);width:48px;height:48px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;">GH</div><h3>GitHub</h3><p>Sync issues, PRs, and deployments with your GitHub repositories.</p></a>
      <a href="integrations.html" class="integration-card"><div class="integration-logo" style="background:var(--color-bg-muted);width:48px;height:48px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;">F</div><h3>Figma</h3><p>Link design files to tasks and keep design and dev in sync.</p></a>
      <a href="integrations.html" class="integration-card"><div class="integration-logo" style="background:var(--color-bg-muted);width:48px;height:48px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;">J</div><h3>Jira</h3><p>Migrate from Jira or sync issues between both platforms.</p></a>
      <a href="integrations.html" class="integration-card"><div class="integration-logo" style="background:var(--color-bg-muted);width:48px;height:48px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;">N</div><h3>Notion</h3><p>Connect your Notion workspace to keep docs and tasks aligned.</p></a>
      <a href="integrations.html" class="integration-card"><div class="integration-logo" style="background:var(--color-bg-muted);width:48px;height:48px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;">Z</div><h3>Zapier</h3><p>Build custom automations connecting Acme to 5,000+ apps.</p></a>
    </div>
  </div></section>
""")

# ── Partners ──────────────────────────────────────────────────
PAGES["partners.html"] = page("Partners", "Join the Acme partner ecosystem.", """
  <section class="page-hero"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb"><li><a href="../index.html">Home</a></li><li aria-current="page">Partners</li></ol></nav>
    <span class="eyebrow">Partner Program</span><h1>Grow with Acme</h1>
    <p class="lead">Join our partner ecosystem and help your clients build better software.</p>
  </div></section>
  <section class="features-section section"><div class="container">
    <div class="features-grid">
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F91D;</div><h3>Reseller Partners</h3><p>Resell Acme to your clients and earn competitive commissions on every deal.</p><a href="contact.html" class="btn btn-outline btn-sm mt-4">Apply now</a></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F527;</div><h3>Technology Partners</h3><p>Build integrations and co-market with Acme to reach 10,000+ engineering teams.</p><a href="contact.html" class="btn btn-outline btn-sm mt-4">Apply now</a></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F393;</div><h3>Consulting Partners</h3><p>Deliver Acme implementations and earn referral fees on qualified leads.</p><a href="contact.html" class="btn btn-outline btn-sm mt-4">Apply now</a></article>
    </div>
  </div></section>
""")

# ── Press ─────────────────────────────────────────────────────
PAGES["press.html"] = page("Press & Media", "Press releases, media kit, and news coverage for Acme Corp.", """
  <section class="page-hero"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb"><li><a href="../index.html">Home</a></li><li aria-current="page">Press</li></ol></nav>
    <span class="eyebrow">Press &amp; Media</span><h1>Acme in the news</h1>
    <p class="lead">Press releases, media assets, and coverage from around the web.</p>
  </div></section>
  <section class="section"><div class="container">
    <div class="section-header"><span class="eyebrow">Press Releases</span><h2>Latest announcements</h2></div>
    <div class="blog-list">
      <article class="blog-list-item"><img class="blog-list-image" src="https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=200&q=80" alt="" loading="lazy" /><div class="blog-list-body"><div class="blog-card-meta"><span class="badge badge-primary">Funding</span><span>June 10, 2025</span></div><h3 class="blog-card-title"><a href="blog-article.html">Acme raises $40M Series B</a></h3><p class="blog-card-excerpt">Acme today announced a $40M Series B funding round led by Sequoia Capital to accelerate product development and international expansion.</p><a href="blog-article.html" class="btn btn-ghost btn-sm">Read release</a></div></article>
    </div>
    <div style="margin-top:var(--space-12);padding:var(--space-8);background:var(--color-bg-subtle);border-radius:var(--radius-xl);border:1px solid var(--color-border);">
      <h3 style="margin-bottom:var(--space-4);">Media Kit</h3>
      <p style="color:var(--color-text-muted);margin-bottom:var(--space-6);">Download our brand assets, logos, and product screenshots for press use.</p>
      <div style="display:flex;gap:var(--space-3);flex-wrap:wrap;">
        <a href="#" class="btn btn-outline">Download logos (SVG)</a>
        <a href="#" class="btn btn-outline">Download screenshots</a>
        <a href="#" class="btn btn-outline">Brand guidelines</a>
      </div>
    </div>
    <div style="margin-top:var(--space-8);"><h3 style="margin-bottom:var(--space-4);">Press contact</h3><p style="color:var(--color-text-muted);">For press inquiries, please contact <a href="mailto:press@acme.com">press@acme.com</a></p></div>
  </div></section>
""")

# ── Resources ─────────────────────────────────────────────────
PAGES["resources.html"] = page("Resources", "Free guides, ebooks, templates, and tools for engineering teams.", """
  <section class="page-hero"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb"><li><a href="../index.html">Home</a></li><li aria-current="page">Resources</li></ol></nav>
    <span class="eyebrow">Resources</span><h1>Free resources for engineering teams</h1>
    <p class="lead">Guides, ebooks, templates, and tools to help your team ship better software.</p>
  </div></section>
  <section class="section"><div class="container">
    <div style="display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-8);">
      <a href="resources.html" class="tag" aria-current="page">All</a>
      <a href="resources.html" class="tag">Ebooks</a>
      <a href="resources.html" class="tag">Templates</a>
      <a href="resources.html" class="tag">Webinars</a>
      <a href="resources.html" class="tag">Checklists</a>
    </div>
    <div class="features-grid">
      <article class="resource-card"><div class="resource-cover" aria-hidden="true">&#x1F4D6;</div><div class="resource-body"><div class="resource-type">Ebook</div><h3>The Engineering Leader's Guide to CI/CD</h3><p>A comprehensive guide to building fast, reliable deployment pipelines.</p><a href="ebook-download.html" class="btn btn-primary btn-sm">Download free</a></div></article>
      <article class="resource-card"><div class="resource-cover" aria-hidden="true">&#x1F4CB;</div><div class="resource-body"><div class="resource-type">Template</div><h3>Sprint Planning Template</h3><p>A ready-to-use sprint planning template for agile engineering teams.</p><a href="ebook-download.html" class="btn btn-outline btn-sm">Download free</a></div></article>
      <article class="resource-card"><div class="resource-cover" aria-hidden="true">&#x1F3A5;</div><div class="resource-body"><div class="resource-type">Webinar</div><h3>Shipping Faster with Acme</h3><p>Watch our on-demand webinar on cutting deploy times by 70%.</p><a href="webinar.html" class="btn btn-outline btn-sm">Watch now</a></div></article>
    </div>
  </div></section>
""")

# ── Ebook Download ────────────────────────────────────────────
PAGES["ebook-download.html"] = page("Download: Engineering Leader's Guide to CI/CD", "Get your free copy of our comprehensive CI/CD guide.", """
  <section style="min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--color-bg);">
    <div style="background:linear-gradient(135deg,var(--color-primary-800),var(--color-primary-600));padding:var(--space-16) var(--space-12);display:flex;flex-direction:column;justify-content:center;color:white;">
      <span class="eyebrow" style="color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);">Free Ebook</span>
      <h1 style="color:white;font-size:var(--font-size-4xl);">The Engineering Leader's Guide to CI/CD</h1>
      <p style="color:rgba(255,255,255,0.8);font-size:var(--font-size-lg);margin-bottom:var(--space-8);">Learn how to build fast, reliable deployment pipelines that your team will love.</p>
      <div style="background:rgba(255,255,255,0.1);border-radius:var(--radius-xl);padding:var(--space-6);">
        <div style="font-size:var(--font-size-sm);color:rgba(255,255,255,0.7);margin-bottom:var(--space-3);">What's inside:</div>
        <ul style="list-style:none;display:flex;flex-direction:column;gap:var(--space-2);">
          <li style="color:rgba(255,255,255,0.9);font-size:var(--font-size-sm);">&#10003; 5 pipeline anti-patterns to avoid</li>
          <li style="color:rgba(255,255,255,0.9);font-size:var(--font-size-sm);">&#10003; How to measure pipeline performance</li>
          <li style="color:rgba(255,255,255,0.9);font-size:var(--font-size-sm);">&#10003; Real-world case studies</li>
          <li style="color:rgba(255,255,255,0.9);font-size:var(--font-size-sm);">&#10003; Step-by-step implementation guide</li>
        </ul>
      </div>
    </div>
    <div style="padding:var(--space-16) var(--space-12);display:flex;align-items:center;">
      <div style="width:100%;max-width:440px;">
        <h2 style="margin-bottom:var(--space-2);">Get your free copy</h2>
        <p style="color:var(--color-text-muted);margin-bottom:var(--space-6);">Fill out the form below and we'll send the ebook to your inbox instantly.</p>
        <form data-validate novalidate aria-label="Ebook download form">
          <div class="form-group"><label class="form-label" for="ebook-name">Full name <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="text" id="ebook-name" required autocomplete="name" /></div>
          <div class="form-group"><label class="form-label" for="ebook-email">Work email <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="email" id="ebook-email" required autocomplete="email" /></div>
          <div class="form-group"><label class="form-label" for="ebook-company">Company</label><input class="form-input" type="text" id="ebook-company" autocomplete="organization" /></div>
          <div class="form-group"><label class="form-check"><input class="form-check-input" type="checkbox" name="newsletter" /><span class="form-check-label">Also subscribe to our weekly newsletter</span></label></div>
          <button type="submit" class="btn btn-primary btn-full btn-lg">Download free ebook</button>
          <p style="font-size:var(--font-size-xs);color:var(--color-text-subtle);text-align:center;margin-top:var(--space-3);">We respect your privacy. Unsubscribe at any time.</p>
        </form>
      </div>
    </div>
  </section>
""", no_header_footer=True)

# ── Newsletter Archive ────────────────────────────────────────
PAGES["newsletter-archive.html"] = page("Newsletter Archive", "Browse past issues of the Acme weekly newsletter.", """
  <section class="page-hero"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb"><li><a href="../index.html">Home</a></li><li aria-current="page">Newsletter Archive</li></ol></nav>
    <span class="eyebrow">Newsletter</span><h1>The Acme Weekly</h1>
    <p class="lead">Engineering insights, product updates, and industry news — delivered every Thursday.</p>
    <form class="newsletter-form" style="justify-content:flex-start;margin-top:var(--space-6);" data-validate novalidate aria-label="Newsletter signup">
      <label for="arch-email" class="sr-only">Email address</label>
      <input type="email" id="arch-email" placeholder="Enter your email" required autocomplete="email" />
      <button type="submit" class="btn btn-primary">Subscribe free</button>
    </form>
  </div></section>
  <section class="section"><div class="container">
    <div class="blog-list">
      <article class="blog-list-item"><div style="width:200px;background:linear-gradient(135deg,var(--color-primary-100),var(--color-secondary-100));display:flex;align-items:center;justify-content:center;font-size:2rem;min-height:120px;" aria-hidden="true">&#x1F4E7;</div><div class="blog-list-body"><div class="blog-card-meta"><span>Issue #52</span><span>June 12, 2025</span></div><h3 class="blog-card-title"><a href="blog-article.html">The state of CI/CD in 2025</a></h3><p class="blog-card-excerpt">This week: our annual survey results, the rise of AI-assisted code review, and 5 pipeline patterns worth stealing.</p><a href="blog-article.html" class="btn btn-ghost btn-sm">Read issue</a></div></article>
      <article class="blog-list-item"><div style="width:200px;background:linear-gradient(135deg,var(--color-primary-100),var(--color-secondary-100));display:flex;align-items:center;justify-content:center;font-size:2rem;min-height:120px;" aria-hidden="true">&#x1F4E7;</div><div class="blog-list-body"><div class="blog-card-meta"><span>Issue #51</span><span>June 5, 2025</span></div><h3 class="blog-card-title"><a href="blog-article.html">Why your deploys are slow (and how to fix it)</a></h3><p class="blog-card-excerpt">The 5 most common pipeline bottlenecks and exactly how to eliminate them.</p><a href="blog-article.html" class="btn btn-ghost btn-sm">Read issue</a></div></article>
    </div>
  </div></section>
""")

# ── Search Results ────────────────────────────────────────────
PAGES["search-results.html"] = page("Search Results", "Search results for your query on Acme.", """
  <section class="page-hero"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb"><li><a href="../index.html">Home</a></li><li aria-current="page">Search Results</li></ol></nav>
    <h1>Search results</h1>
    <div class="search-bar" style="max-width:560px;margin-top:var(--space-4);">
      <span class="search-icon" aria-hidden="true">&#x1F50D;</span>
      <input type="search" value="CI/CD pipeline" aria-label="Search" />
      <button class="search-btn">Search</button>
    </div>
  </div></section>
  <section class="section"><div class="container">
    <p style="color:var(--color-text-muted);margin-bottom:var(--space-6);" aria-live="polite">Showing <strong>24 results</strong> for <strong>"CI/CD pipeline"</strong></p>
    <div style="display:flex;gap:var(--space-8);align-items:flex-start;">
      <aside style="width:200px;flex-shrink:0;" aria-label="Search filters">
        <h3 style="font-size:var(--font-size-sm);font-weight:600;margin-bottom:var(--space-3);">Filter by type</h3>
        <div style="display:flex;flex-direction:column;gap:var(--space-2);">
          <label class="form-check"><input class="form-check-input" type="checkbox" checked /><span class="form-check-label">All (24)</span></label>
          <label class="form-check"><input class="form-check-input" type="checkbox" /><span class="form-check-label">Blog posts (12)</span></label>
          <label class="form-check"><input class="form-check-input" type="checkbox" /><span class="form-check-label">Docs (8)</span></label>
          <label class="form-check"><input class="form-check-input" type="checkbox" /><span class="form-check-label">Help articles (4)</span></label>
        </div>
      </aside>
      <div style="flex:1;">
        <div class="search-result-item"><div class="result-type">Blog</div><h3><a href="blog-article.html">How we rebuilt our CI/CD pipeline and cut deploy times by 70%</a></h3><div class="result-url">acme.com/blog/cicd-pipeline-rebuild</div><p>Last year, our deploy pipeline was a mess. What should have been a 5-minute process regularly took 45 minutes or more. This is the story of how we fixed it — and what we learned along the way.</p></div>
        <div class="search-result-item"><div class="result-type">Documentation</div><h3><a href="docs.html">CI/CD Pipeline Configuration Reference</a></h3><div class="result-url">acme.com/docs/pipelines/configuration</div><p>Complete reference for configuring <mark>CI/CD pipelines</mark> in Acme. Covers triggers, stages, caching, parallelism, and deployment targets.</p></div>
        <div class="search-result-item"><div class="result-type">Help Center</div><h3><a href="kb-article.html">How to set up your first pipeline</a></h3><div class="result-url">acme.com/help/pipelines/getting-started</div><p>Step-by-step guide to creating your first <mark>CI/CD pipeline</mark> in Acme. Estimated time: 10 minutes.</p></div>
        <nav class="mt-8" aria-label="Search results pagination"><ul class="pagination"><li><a href="#" aria-current="page">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul></nav>
      </div>
    </div>
  </div></section>
""")

# ── Category / Archive ────────────────────────────────────────
PAGES["category.html"] = page("Engineering — Blog", "All engineering articles from the Acme blog.", """
  <section class="page-hero"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb"><li><a href="../index.html">Home</a></li><li><a href="blog-index.html">Blog</a></li><li aria-current="page">Engineering</li></ol></nav>
    <span class="eyebrow">Category</span><h1>Engineering</h1>
    <p class="lead">Deep dives, tutorials, and best practices from the Acme engineering team.</p>
  </div></section>
  <section class="blog-section section"><div class="container">
    <div style="display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-8);">
      <a href="blog-index.html" class="tag">All</a>
      <a href="category.html" class="tag" aria-current="page">Engineering</a>
      <a href="category.html" class="tag">Product</a>
      <a href="category.html" class="tag">Design</a>
    </div>
    <div class="blog-grid">
      <article class="blog-card"><img class="blog-card-image" src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=400&q=80" alt="Team working on laptops" loading="lazy" /><div class="blog-card-body"><div class="blog-card-meta"><span>June 10, 2025</span><span>8 min read</span></div><h3 class="blog-card-title"><a href="blog-article.html">How we rebuilt our CI/CD pipeline</a></h3><p class="blog-card-excerpt">A deep dive into the architectural decisions and lessons learned.</p><div class="blog-card-footer"><span class="tag">Engineering</span><a href="blog-article.html" class="btn btn-ghost btn-sm">Read</a></div></div></article>
      <article class="blog-card"><img class="blog-card-image" src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&q=80" alt="Developer at desk" loading="lazy" /><div class="blog-card-body"><div class="blog-card-meta"><span>May 28, 2025</span><span>5 min read</span></div><h3 class="blog-card-title"><a href="blog-article.html">Building accessible UI components from scratch</a></h3><p class="blog-card-excerpt">A practical guide to WCAG 2.2 AA compliance.</p><div class="blog-card-footer"><span class="tag">Engineering</span><a href="blog-article.html" class="btn btn-ghost btn-sm">Read</a></div></div></article>
    </div>
    <nav class="mt-12" aria-label="Category pagination"><ul class="pagination"><li><a href="#" aria-current="page">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul></nav>
  </div></section>
""")

# ── Coming Soon ───────────────────────────────────────────────
PAGES["coming-soon.html"] = page("Coming Soon", "Something exciting is coming. Sign up to be notified.", """
  <div class="coming-soon-page">
    <div>
      <div style="font-size:var(--font-size-3xl);font-weight:800;color:white;margin-bottom:var(--space-8);">Acme</div>
      <span class="eyebrow" style="color:var(--color-primary-400);background:rgba(59,130,246,0.1);border-color:rgba(59,130,246,0.3);">Coming Soon</span>
      <h1>Something big is coming</h1>
      <p>We're working on something exciting. Be the first to know when we launch.</p>
      <div class="countdown" aria-label="Countdown to launch">
        <div class="countdown-unit"><span class="countdown-value" aria-label="14 days">14</span><div class="countdown-label">Days</div></div>
        <div class="countdown-unit"><span class="countdown-value" aria-label="6 hours">06</span><div class="countdown-label">Hours</div></div>
        <div class="countdown-unit"><span class="countdown-value" aria-label="32 minutes">32</span><div class="countdown-label">Minutes</div></div>
        <div class="countdown-unit"><span class="countdown-value" aria-label="18 seconds">18</span><div class="countdown-label">Seconds</div></div>
      </div>
      <form class="newsletter-form" style="justify-content:center;" data-validate novalidate aria-label="Launch notification signup">
        <label for="cs-email" class="sr-only">Email address</label>
        <input type="email" id="cs-email" placeholder="Enter your email" required autocomplete="email" style="background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);color:white;" />
        <button type="submit" class="btn btn-primary">Notify me</button>
      </form>
      <p style="color:var(--color-neutral-500);font-size:var(--font-size-sm);margin-top:var(--space-4);">No spam. Unsubscribe at any time.</p>
    </div>
  </div>
""", no_header_footer=True)

# ── Maintenance ───────────────────────────────────────────────
PAGES["maintenance.html"] = page("Maintenance", "Acme is temporarily unavailable for scheduled maintenance.", """
  <div class="coming-soon-page">
    <div>
      <div style="font-size:var(--font-size-3xl);font-weight:800;color:white;margin-bottom:var(--space-8);">Acme</div>
      <div style="font-size:4rem;margin-bottom:var(--space-6);" aria-hidden="true">&#x1F6E0;&#xFE0F;</div>
      <h1>We'll be right back</h1>
      <p>Acme is currently undergoing scheduled maintenance. We expect to be back online shortly.</p>
      <div style="background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-xl);padding:var(--space-6);margin:var(--space-8) auto;max-width:400px;">
        <div style="font-size:var(--font-size-sm);color:var(--color-neutral-400);margin-bottom:var(--space-2);">Estimated completion</div>
        <div style="font-size:var(--font-size-xl);font-weight:700;color:white;">Thursday, June 13 at 6:00 AM PT</div>
      </div>
      <p style="color:var(--color-neutral-400);font-size:var(--font-size-sm);">Follow <a href="#" style="color:var(--color-primary-400);">@acmestatus</a> for live updates.</p>
    </div>
  </div>
""", no_header_footer=True)

# ── 404 ───────────────────────────────────────────────────────
PAGES["404.html"] = page("Page Not Found", "The page you're looking for doesn't exist.", """
  <div class="error-page">
    <div>
      <div class="error-code" aria-hidden="true">404</div>
      <h1>Page not found</h1>
      <p>Sorry, we couldn't find the page you're looking for. It may have been moved, deleted, or never existed.</p>
      <div class="error-actions">
        <a href="../index.html" class="btn btn-primary btn-lg">Go home</a>
        <a href="contact.html" class="btn btn-outline btn-lg">Contact support</a>
      </div>
      <div style="margin-top:var(--space-12);">
        <p style="font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-4);">You might be looking for:</p>
        <div style="display:flex;justify-content:center;gap:var(--space-3);flex-wrap:wrap;">
          <a href="features.html" class="tag">Features</a>
          <a href="pricing.html" class="tag">Pricing</a>
          <a href="docs.html" class="tag">Documentation</a>
          <a href="blog-index.html" class="tag">Blog</a>
          <a href="contact.html" class="tag">Contact</a>
        </div>
      </div>
    </div>
  </div>
""")

# ── 500 ───────────────────────────────────────────────────────
PAGES["500.html"] = page("Server Error", "Something went wrong on our end. We're working on it.", """
  <div class="error-page">
    <div>
      <div class="error-code" aria-hidden="true">500</div>
      <h1>Something went wrong</h1>
      <p>We're sorry — something went wrong on our end. Our team has been notified and is working to fix it.</p>
      <div class="error-actions">
        <a href="../index.html" class="btn btn-primary btn-lg">Go home</a>
        <button onclick="window.location.reload()" class="btn btn-outline btn-lg">Try again</button>
      </div>
      <div style="margin-top:var(--space-8);">
        <div class="alert alert-warning" style="max-width:480px;margin:0 auto;">
          <span class="alert-icon" aria-hidden="true">&#x26A0;&#xFE0F;</span>
          <div class="alert-content"><div class="alert-title">Error reference</div>ERR_500_INTERNAL · June 13, 2025 at 14:32 UTC</div>
        </div>
      </div>
    </div>
  </div>
""")

# ── Legal ─────────────────────────────────────────────────────
PAGES["legal.html"] = page("Legal — Privacy Policy & Terms of Service", "Acme Corp legal documents including Privacy Policy and Terms of Service.", """
  <section class="page-hero"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb"><li><a href="../index.html">Home</a></li><li aria-current="page">Legal</li></ol></nav>
    <span class="eyebrow">Legal</span><h1>Legal Documents</h1>
    <p class="lead">Our privacy policy, terms of service, and other legal documents.</p>
  </div></section>
  <section class="section"><div class="container">
    <div class="sidebar-layout">
      <aside class="sidebar" aria-label="Legal document navigation">
        <div class="sidebar-section-title">Documents</div>
        <ul class="sidebar-nav">
          <li class="sidebar-nav-item"><a href="#privacy" aria-current="page">Privacy Policy</a></li>
          <li class="sidebar-nav-item"><a href="#terms">Terms of Service</a></li>
          <li class="sidebar-nav-item"><a href="#cookies">Cookie Policy</a></li>
          <li class="sidebar-nav-item"><a href="#security">Security</a></li>
        </ul>
      </aside>
      <div>
        <article class="prose" style="max-width:none;" id="privacy">
          <h2>Privacy Policy</h2>
          <p style="color:var(--color-text-muted);font-size:var(--font-size-sm);">Last updated: June 1, 2025</p>
          <p>Acme Corp ("Acme", "we", "us", or "our") is committed to protecting your privacy. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our services.</p>
          <h3>Information we collect</h3>
          <p>We collect information you provide directly to us, such as when you create an account, use our services, or contact us for support. This may include:</p>
          <ul><li>Name and email address</li><li>Company name and job title</li><li>Payment information (processed securely by our payment provider)</li><li>Usage data and analytics</li></ul>
          <h3>How we use your information</h3>
          <p>We use the information we collect to provide, maintain, and improve our services, process transactions, send you technical notices and support messages, and respond to your comments and questions.</p>
          <h3>Data retention</h3>
          <p>We retain your personal information for as long as necessary to provide our services and comply with our legal obligations. You may request deletion of your data at any time by contacting privacy@acme.com.</p>
        </article>
        <hr style="margin:var(--space-12) 0;" />
        <article class="prose" style="max-width:none;" id="terms">
          <h2>Terms of Service</h2>
          <p style="color:var(--color-text-muted);font-size:var(--font-size-sm);">Last updated: June 1, 2025</p>
          <p>By accessing or using Acme's services, you agree to be bound by these Terms of Service. Please read them carefully.</p>
          <h3>Use of services</h3>
          <p>You may use our services only as permitted by these terms and applicable law. You may not use our services to violate any laws, infringe any intellectual property rights, or transmit harmful content.</p>
          <h3>Account responsibilities</h3>
          <p>You are responsible for maintaining the security of your account credentials and for all activities that occur under your account.</p>
          <h3>Limitation of liability</h3>
          <p>To the maximum extent permitted by law, Acme shall not be liable for any indirect, incidental, special, consequential, or punitive damages arising from your use of our services.</p>
        </article>
        <hr style="margin:var(--space-12) 0;" />
        <article class="prose" style="max-width:none;" id="cookies">
          <h2>Cookie Policy</h2>
          <p style="color:var(--color-text-muted);font-size:var(--font-size-sm);">Last updated: June 1, 2025</p>
          <p>We use cookies and similar tracking technologies to track activity on our services and hold certain information. You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent.</p>
        </article>
        <hr style="margin:var(--space-12) 0;" />
        <article class="prose" style="max-width:none;" id="security">
          <h2>Security</h2>
          <p style="color:var(--color-text-muted);font-size:var(--font-size-sm);">Last updated: June 1, 2025</p>
          <p>Security is a top priority at Acme. We implement industry-standard security measures including SOC 2 Type II certification, end-to-end encryption, and regular third-party security audits.</p>
          <p>To report a security vulnerability, please email <a href="mailto:security@acme.com">security@acme.com</a>. We take all reports seriously and will respond within 24 hours.</p>
        </article>
      </div>
    </div>
  </div></section>
""")