#!/usr/bin/env python3
"""Page content definitions — Part 2 (core pages 1-25)"""

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

PAGES = {}

# ── About ─────────────────────────────────────────────────────
PAGES["about.html"] = page("About Us", "Learn about Acme Corp — our mission, values, and the team behind the product.", """
  <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">About</li></ol></nav>
      <span class="eyebrow">Our Story</span>
      <h1>We're building the future of team productivity</h1>
      <p class="lead">Founded in 2019, Acme started with a simple belief: great software should help people do their best work.</p>
    </div>
  </section>
  <section class="stats-section section section-bg">
    <div class="container">
      <div class="stats-grid">
        <div class="stat-item"><div class="stat-value">2019</div><div class="stat-label">Founded</div></div>
        <div class="stat-item"><div class="stat-value">120+</div><div class="stat-label">Team Members</div></div>
        <div class="stat-item"><div class="stat-value">10K+</div><div class="stat-label">Customers</div></div>
        <div class="stat-item"><div class="stat-value">$40M</div><div class="stat-label">Series B Raised</div></div>
      </div>
    </div>
  </section>
  <section class="section">
    <div class="container">
      <div class="features-alternating">
        <div class="feature-row">
          <div class="feature-content">
            <span class="eyebrow">Our Mission</span>
            <h3>Empowering teams to build with confidence</h3>
            <p>We believe every team deserves tools that are powerful, accessible, and a joy to use.</p>
            <ul class="feature-list">
              <li><span class="check" aria-hidden="true">&#10003;</span> Built for teams of all sizes</li>
              <li><span class="check" aria-hidden="true">&#10003;</span> Accessibility-first design</li>
              <li><span class="check" aria-hidden="true">&#10003;</span> Transparent and honest pricing</li>
            </ul>
          </div>
          <div class="feature-visual">
            <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=600&q=80" alt="Team collaborating around a table" loading="lazy" />
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="team-section section">
    <div class="container">
      <div class="section-header centered"><span class="eyebrow">Leadership</span><h2>Meet the team</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 &amp; Co-founder</div><p class="bio">Previously VP Product at Stripe.</p><div class="social-links"><a href="#" class="social-link" aria-label="LinkedIn">in</a></div></article>
        <article class="team-card"><img class="avatar" src="https://i.pravatar.cc/96?img=25" alt="Portrait of Jordan Kim" /><div class="name">Jordan Kim</div><div class="role">CTO &amp; Co-founder</div><p class="bio">Former Staff Engineer at Google.</p><div class="social-links"><a href="#" class="social-link" aria-label="GitHub">GH</a></div></article>
        <article class="team-card"><img class="avatar" src="https://i.pravatar.cc/96?img=30" alt="Portrait of Sam Okafor" /><div class="name">Sam Okafor</div><div class="role">Head of Design</div><p class="bio">Design systems expert. Previously at Figma.</p><div class="social-links"><a href="#" class="social-link" aria-label="LinkedIn">in</a></div></article>
        <article class="team-card"><img class="avatar" src="https://i.pravatar.cc/96?img=35" alt="Portrait of Maya Patel" /><div class="name">Maya Patel</div><div class="role">VP Engineering</div><p class="bio">10+ years building scalable infrastructure.</p><div class="social-links"><a href="#" class="social-link" aria-label="LinkedIn">in</a></div></article>
      </div>
    </div>
  </section>
  <section class="cta-section section"><div class="container"><h2>Want to join our team?</h2><p>We're always looking for talented people who share our passion.</p><div class="cta-actions"><a href="careers.html" class="btn btn-white btn-lg">View open roles</a></div></div></section>
""")

# ── Services ──────────────────────────────────────────────────
PAGES["services.html"] = page("Services", "Explore Acme's full range of services.", """
  <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">Services</li></ol></nav>
    <span class="eyebrow">What We Offer</span>
    <h1>Services built for every stage of growth</h1>
    <p class="lead">From initial setup to enterprise-scale deployment, our team is with you every step of the way.</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>Implementation</h3><p>Our experts handle the full setup — data migration to custom integrations.</p><a href="service-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">&#x1F393;</div><h3>Training &amp; Onboarding</h3><p>Live workshops, on-demand videos, and custom training programs.</p><a href="service-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">&#x1F527;</div><h3>Custom Development</h3><p>Our engineering team builds custom integrations, workflows, and extensions.</p><a href="service-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">&#x1F4DE;</div><h3>Dedicated Support</h3><p>Enterprise customers get a dedicated success manager and 24/7 priority support.</p><a href="service-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>Analytics Consulting</h3><p>Our data team helps you set up dashboards and extract actionable insights.</p><a href="service-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">&#x1F512;</div><h3>Security Review</h3><p>Comprehensive security audits, compliance reviews, and penetration testing.</p><a href="service-detail.html" class="btn btn-outline btn-sm mt-4">Learn more</a></article>
    </div>
  </div></section>
  <section class="section section-bg"><div class="container"><div class="cta-banner"><div class="cta-text"><h3>Not sure which service is right for you?</h3><p>Talk to our team and we'll recommend the best path forward.</p></div><div class="cta-actions"><a href="contact.html" class="btn btn-primary">Talk to sales</a><a href="pricing.html" class="btn btn-outline">View pricing</a></div></div></div></section>
""")

# ── Service Detail ────────────────────────────────────────────
PAGES["service-detail.html"] = page("Implementation Service", "Full-service implementation to get your team up and running fast.", """
  <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="services.html">Services</a></li><li aria-current="page">Implementation</li></ol></nav>
    <span class="eyebrow">Service Detail</span>
    <h1>Implementation Service</h1>
    <p class="lead">Get up and running in days, not months. Our implementation team handles everything.</p>
  </div></section>
  <section class="section"><div class="container">
    <div class="sidebar-layout">
      <aside class="sidebar" aria-label="Service navigation">
        <div class="sidebar-section-title">Services</div>
        <ul class="sidebar-nav">
          <li class="sidebar-nav-item"><a href="service-detail.html" aria-current="page">Implementation</a></li>
          <li class="sidebar-nav-item"><a href="services.html">Training</a></li>
          <li class="sidebar-nav-item"><a href="services.html">Custom Dev</a></li>
          <li class="sidebar-nav-item"><a href="services.html">Support</a></li>
        </ul>
      </aside>
      <article class="prose" style="max-width:none;">
        <h2>What's included</h2>
        <p>Our implementation service is a fully managed onboarding experience. A dedicated implementation engineer works alongside your team to ensure a smooth, successful launch.</p>
        <h3>Phase 1: Discovery (Week 1)</h3>
        <p>We start with a deep-dive into your existing workflows, tools, and goals.</p>
        <ul><li>Stakeholder interviews and requirements gathering</li><li>Current tooling audit</li><li>Custom implementation roadmap</li></ul>
        <h3>Phase 2: Configuration (Weeks 2-3)</h3>
        <p>Your dedicated engineer configures Acme to match your workflows.</p>
        <h3>Phase 3: Migration (Week 3-4)</h3>
        <p>We migrate your existing data from any source — Jira, Asana, Trello, or CSV files.</p>
        <h3>Phase 4: Training &amp; Launch (Week 4)</h3>
        <p>Live training sessions for your team, followed by a supported launch day.</p>
        <div class="alert alert-success mt-8">
          <span class="alert-icon" aria-hidden="true">&#10003;</span>
          <div class="alert-content"><div class="alert-title">Average time to launch: 3 weeks</div>Most teams are fully operational within 3 weeks of kickoff.</div>
        </div>
      </article>
    </div>
  </div></section>
""")

# ── Pricing ───────────────────────────────────────────────────
PAGES["pricing.html"] = page("Pricing", "Simple, transparent pricing for teams of all sizes.", """
  <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">Pricing</li></ol></nav>
    <span class="eyebrow">Pricing</span>
    <h1>Simple, transparent pricing</h1>
    <p class="lead">No hidden fees. No surprises. Start free and upgrade when ready.</p>
  </div></section>
  <section class="pricing-section section"><div class="container">
    <div class="pricing-grid three-col">
      <div class="pricing-card">
        <h3>Starter</h3><p class="text-muted text-sm mb-4">Perfect for small teams.</p>
        <div class="price"><sup>$</sup>0<span class="price-period">/month</span></div>
        <ul class="pricing-features">
          <li><span class="check" aria-hidden="true">&#10003;</span> Up to 5 users</li>
          <li><span class="check" aria-hidden="true">&#10003;</span> 3 active projects</li>
          <li><span class="check" aria-hidden="true">&#10003;</span> Basic analytics</li>
          <li><span class="cross" aria-hidden="true">&#10007;</span> <span class="text-muted">Priority support</span></li>
        </ul>
        <a href="signup.html" class="btn btn-outline btn-full">Get started free</a>
      </div>
      <div class="pricing-card featured">
        <div class="pricing-badge">Most Popular</div>
        <h3>Pro</h3><p class="text-muted text-sm mb-4">For growing teams.</p>
        <div class="price"><sup>$</sup>49<span class="price-period">/month</span></div>
        <ul class="pricing-features">
          <li><span class="check" aria-hidden="true">&#10003;</span> Up to 25 users</li>
          <li><span class="check" aria-hidden="true">&#10003;</span> Unlimited projects</li>
          <li><span class="check" aria-hidden="true">&#10003;</span> Advanced analytics</li>
          <li><span class="check" aria-hidden="true">&#10003;</span> Priority support</li>
        </ul>
        <a href="signup.html" class="btn btn-primary btn-full">Start free trial</a>
      </div>
      <div class="pricing-card">
        <h3>Enterprise</h3><p class="text-muted text-sm mb-4">For large organizations.</p>
        <div class="price" style="font-size:var(--font-size-3xl);">Custom</div>
        <ul class="pricing-features">
          <li><span class="check" aria-hidden="true">&#10003;</span> Unlimited users</li>
          <li><span class="check" aria-hidden="true">&#10003;</span> Unlimited projects</li>
          <li><span class="check" aria-hidden="true">&#10003;</span> SSO / SAML</li>
          <li><span class="check" aria-hidden="true">&#10003;</span> SLA guarantee</li>
        </ul>
        <a href="contact.html" class="btn btn-outline btn-full">Contact sales</a>
      </div>
    </div>
  </div></section>
  <section class="section"><div class="container" style="max-width:700px;">
    <div class="section-header centered"><span class="eyebrow">FAQ</span><h2>Pricing questions answered</h2></div>
    <div class="accordion" data-multi>
      <div class="accordion-item"><button class="accordion-trigger" aria-expanded="false" aria-controls="pfaq-1" id="pfaq-btn-1">Can I change plans at any time?<span class="accordion-icon" aria-hidden="true">&#9660;</span></button><div class="accordion-panel" id="pfaq-1"><div class="accordion-content">Yes, you can upgrade or downgrade at any time. Changes take effect immediately.</div></div></div>
      <div class="accordion-item"><button class="accordion-trigger" aria-expanded="false" aria-controls="pfaq-2" id="pfaq-btn-2">Is there a free trial for Pro?<span class="accordion-icon" aria-hidden="true">&#9660;</span></button><div class="accordion-panel" id="pfaq-2"><div class="accordion-content">Yes! The Pro plan comes with a 14-day free trial. No credit card required.</div></div></div>
      <div class="accordion-item"><button class="accordion-trigger" aria-expanded="false" aria-controls="pfaq-3" id="pfaq-btn-3">What payment methods do you accept?<span class="accordion-icon" aria-hidden="true">&#9660;</span></button><div class="accordion-panel" id="pfaq-3"><div class="accordion-content">We accept all major credit cards, PayPal, and bank transfers for annual Enterprise plans.</div></div></div>
    </div>
  </div></section>
""")

# ── Contact ───────────────────────────────────────────────────
PAGES["contact.html"] = page("Contact Us", "Get in touch with the Acme 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">Contact</li></ol></nav>
    <span class="eyebrow">Get in Touch</span>
    <h1>We'd love to hear from you</h1>
    <p class="lead">Whether you have a question, feedback, or want to explore a partnership.</p>
  </div></section>
  <section class="contact-section section"><div class="container">
    <div class="contact-split">
      <div class="contact-info">
        <h3>Contact information</h3>
        <p>Reach out and we'll get back to you within one business day.</p>
        <div class="contact-detail"><div class="contact-detail-icon" aria-hidden="true">&#x2709;&#xFE0F;</div><div class="contact-detail-text"><strong>Email</strong><span><a href="mailto:hello@acme.com">hello@acme.com</a></span></div></div>
        <div class="contact-detail"><div class="contact-detail-icon" aria-hidden="true">&#x1F4DE;</div><div class="contact-detail-text"><strong>Phone</strong><span><a href="tel:+18005551234">+1 (800) 555-1234</a></span></div></div>
        <div class="contact-detail"><div class="contact-detail-icon" aria-hidden="true">&#x1F4CD;</div><div class="contact-detail-text"><strong>Office</strong><span>340 Pine Street, Suite 800<br>San Francisco, CA 94104</span></div></div>
        <div class="contact-detail"><div class="contact-detail-icon" aria-hidden="true">&#x1F550;</div><div class="contact-detail-text"><strong>Hours</strong><span>Monday-Friday, 9am-6pm PT</span></div></div>
      </div>
      <div>
        <form class="card card-body" data-validate aria-label="Contact form" novalidate>
          <h3 class="mb-6">Send us a message</h3>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);">
            <div class="form-group"><label class="form-label" for="c-first">First name <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="text" id="c-first" name="first_name" required autocomplete="given-name" /></div>
            <div class="form-group"><label class="form-label" for="c-last">Last name <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="text" id="c-last" name="last_name" required autocomplete="family-name" /></div>
          </div>
          <div class="form-group"><label class="form-label" for="c-email">Email address <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="email" id="c-email" name="email" required autocomplete="email" /></div>
          <div class="form-group"><label class="form-label" for="c-subject">Subject <span class="required" aria-hidden="true">*</span></label><div class="form-select-wrapper"><select class="form-select" id="c-subject" name="subject" required><option value="">Select a topic</option><option>Sales inquiry</option><option>Technical support</option><option>Billing question</option><option>Partnership</option><option>Other</option></select></div></div>
          <div class="form-group"><label class="form-label" for="c-message">Message <span class="required" aria-hidden="true">*</span></label><textarea class="form-textarea" id="c-message" name="message" rows="5" required placeholder="Tell us how we can help..."></textarea></div>
          <div class="form-group"><label class="form-check"><input class="form-check-input" type="checkbox" name="consent" required /><span class="form-check-label">I agree to the <a href="legal.html#privacy">Privacy Policy</a>.</span></label></div>
          <button type="submit" class="btn btn-primary btn-full">Send message</button>
        </form>
      </div>
    </div>
  </div></section>
""")

# ── FAQ ───────────────────────────────────────────────────────
PAGES["faq.html"] = page("FAQ", "Frequently asked questions about 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">FAQ</li></ol></nav>
    <span class="eyebrow">FAQ</span>
    <h1>Frequently asked questions</h1>
    <p class="lead">Can't find what you're looking for? <a href="contact.html">Contact our support team</a>.</p>
  </div></section>
  <section class="section"><div class="container" style="max-width:800px;">
    <div class="tabs">
      <div class="tab-list" role="tablist" aria-label="FAQ categories">
        <button class="tab-btn" role="tab" aria-selected="true" aria-controls="tab-general" id="tab-btn-general">General</button>
        <button class="tab-btn" role="tab" aria-selected="false" aria-controls="tab-pricing" id="tab-btn-pricing" tabindex="-1">Pricing</button>
        <button class="tab-btn" role="tab" aria-selected="false" aria-controls="tab-security" id="tab-btn-security" tabindex="-1">Security</button>
      </div>
      <div class="tab-panel" role="tabpanel" id="tab-general" aria-labelledby="tab-btn-general">
        <div class="accordion" data-multi>
          <div class="accordion-item"><button class="accordion-trigger" aria-expanded="true" aria-controls="gen-1" id="gen-btn-1">What is Acme?<span class="accordion-icon" aria-hidden="true">&#9660;</span></button><div class="accordion-panel open" id="gen-1"><div class="accordion-content">Acme is a team productivity platform that helps engineering and product teams plan, build, and ship software faster.</div></div></div>
          <div class="accordion-item"><button class="accordion-trigger" aria-expanded="false" aria-controls="gen-2" id="gen-btn-2">How do I get started?<span class="accordion-icon" aria-hidden="true">&#9660;</span></button><div class="accordion-panel" id="gen-2"><div class="accordion-content">Sign up for a free account. You can be up and running in minutes — no credit card required for the Starter plan.</div></div></div>
          <div class="accordion-item"><button class="accordion-trigger" aria-expanded="false" aria-controls="gen-3" id="gen-btn-3">Can I import data from other tools?<span class="accordion-icon" aria-hidden="true">&#9660;</span></button><div class="accordion-panel" id="gen-3"><div class="accordion-content">Yes! We support imports from Jira, Asana, Trello, Linear, GitHub Issues, and CSV files.</div></div></div>
        </div>
      </div>
      <div class="tab-panel" role="tabpanel" id="tab-pricing" aria-labelledby="tab-btn-pricing" hidden>
        <div class="accordion" data-multi>
          <div class="accordion-item"><button class="accordion-trigger" aria-expanded="false" aria-controls="price-1" id="price-btn-1">Can I change plans at any time?<span class="accordion-icon" aria-hidden="true">&#9660;</span></button><div class="accordion-panel" id="price-1"><div class="accordion-content">Yes, you can upgrade or downgrade at any time.</div></div></div>
          <div class="accordion-item"><button class="accordion-trigger" aria-expanded="false" aria-controls="price-2" id="price-btn-2">Do you offer nonprofit discounts?<span class="accordion-icon" aria-hidden="true">&#9660;</span></button><div class="accordion-panel" id="price-2"><div class="accordion-content">Yes! We offer 50% discounts for verified nonprofits and educational institutions.</div></div></div>
        </div>
      </div>
      <div class="tab-panel" role="tabpanel" id="tab-security" aria-labelledby="tab-btn-security" hidden>
        <div class="accordion" data-multi>
          <div class="accordion-item"><button class="accordion-trigger" aria-expanded="false" aria-controls="sec-1" id="sec-btn-1">Is my data encrypted?<span class="accordion-icon" aria-hidden="true">&#9660;</span></button><div class="accordion-panel" id="sec-1"><div class="accordion-content">All data is encrypted at rest (AES-256) and in transit (TLS 1.3). We are SOC 2 Type II certified.</div></div></div>
          <div class="accordion-item"><button class="accordion-trigger" aria-expanded="false" aria-controls="sec-2" id="sec-btn-2">Where is my data stored?<span class="accordion-icon" aria-hidden="true">&#9660;</span></button><div class="accordion-panel" id="sec-2"><div class="accordion-content">Data is stored in AWS data centers in the US by default. EU data residency is available on Enterprise plans.</div></div></div>
        </div>
      </div>
    </div>
  </div></section>
  <section class="section section-bg"><div class="container"><div class="cta-banner"><div class="cta-text"><h3>Still have questions?</h3><p>Our support team is available Monday-Friday, 9am-6pm PT.</p></div><div class="cta-actions"><a href="contact.html" class="btn btn-primary">Contact support</a><a href="docs.html" class="btn btn-outline">Browse docs</a></div></div></div></section>
""")

# ── Blog Index ────────────────────────────────────────────────
PAGES["blog-index.html"] = page("Blog", "Insights, tutorials, and product updates from the Acme 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">Blog</li></ol></nav>
    <span class="eyebrow">Blog</span>
    <h1>Insights from the Acme team</h1>
    <p class="lead">Product updates, engineering deep-dives, and best practices for modern software teams.</p>
  </div></section>
  <section class="blog-section section"><div class="container">
    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);margin-bottom:var(--space-8);">
      <div style="display:flex;gap:var(--space-2);flex-wrap:wrap;">
        <a href="blog-index.html" class="tag" aria-current="page">All</a>
        <a href="category.html" class="tag">Engineering</a>
        <a href="category.html" class="tag">Product</a>
        <a href="category.html" class="tag">Design</a>
      </div>
      <div class="search-bar" style="max-width:280px;"><span class="search-icon" aria-hidden="true">&#x1F50D;</span><input type="search" placeholder="Search articles..." aria-label="Search blog" /></div>
    </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 class="badge badge-primary">Featured</span><span>June 10, 2025</span></div><h3 class="blog-card-title"><a href="blog-article.html">How we rebuilt our CI/CD pipeline and cut deploy times by 70%</a></h3><p class="blog-card-excerpt">A deep dive into the architectural decisions and lessons learned from our infrastructure overhaul.</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 a standing 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 for modern web applications.</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-1460925895917-afdab827c52f?w=400&q=80" alt="Analytics dashboard" loading="lazy" /><div class="blog-card-body"><div class="blog-card-meta"><span>May 15, 2025</span><span>6 min read</span></div><h3 class="blog-card-title"><a href="blog-article.html">The metrics that actually matter for product teams</a></h3><p class="blog-card-excerpt">Stop tracking vanity metrics. Here's what high-performing product teams measure instead.</p><div class="blog-card-footer"><span class="tag">Product</span><a href="blog-article.html" class="btn btn-ghost btn-sm">Read</a></div></div></article>
    </div>
    <nav class="mt-12" aria-label="Blog 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><li><span class="ellipsis">...</span></li><li><a href="#">12</a></li><li><a href="#" aria-label="Next page">&raquo;</a></li></ul></nav>
  </div></section>
""")

# ── Blog Article ──────────────────────────────────────────────
PAGES["blog-article.html"] = page("How we rebuilt our CI/CD pipeline", "A deep dive into our infrastructure overhaul.", """
  <section class="section"><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">CI/CD Pipeline</li></ol></nav>
    <div class="sidebar-layout">
      <article>
        <header style="margin-bottom:var(--space-8);">
          <div style="display:flex;gap:var(--space-3);margin-bottom:var(--space-4);"><span class="tag">Engineering</span><span class="tag">DevOps</span></div>
          <h1 style="font-size:var(--font-size-4xl);margin-bottom:var(--space-4);">How we rebuilt our CI/CD pipeline and cut deploy times by 70%</h1>
          <div style="display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);">
            <img src="https://i.pravatar.cc/48?img=20" alt="" style="width:48px;height:48px;border-radius:50%;" />
            <div><div style="font-weight:600;">Alex Rivera</div><div style="font-size:var(--font-size-sm);color:var(--color-text-muted);">June 10, 2025 &middot; 8 min read</div></div>
          </div>
        </header>
        <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=800&q=80" alt="Team collaborating on a software project" style="width:100%;border-radius:var(--radius-xl);margin-bottom:var(--space-8);" loading="lazy" />
        <div class="prose" style="max-width:none;">
          <p>Last year, our deploy pipeline was a mess. What should have been a 5-minute process regularly took 45 minutes or more.</p>
          <h2>The problem</h2>
          <p>Our original pipeline had grown organically over three years. Each team had added their own steps without a coherent overall design.</p>
          <blockquote>"We had 47 separate pipeline steps. Nobody knew what half of them did." — Jordan Kim, CTO</blockquote>
          <h2>The solution</h2>
          <p>We started from scratch with three core principles: parallelism first, fail fast, and full observability.</p>
          <h2>The results</h2>
          <ul><li>Average deploy time: 45 min to 13 min (71% reduction)</li><li>Pipeline failure rate: 23% to 4%</li><li>Engineer satisfaction: 3.2/5 to 4.7/5</li></ul>
        </div>
        <footer style="margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--color-border);">
          <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);">
            <div><div style="font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-2);">Share this article</div><div style="display:flex;gap:var(--space-2);"><a href="#" class="btn btn-outline btn-sm">Twitter</a><a href="#" class="btn btn-outline btn-sm">LinkedIn</a></div></div>
            <a href="blog-index.html" class="btn btn-ghost btn-sm">&larr; Back to blog</a>
          </div>
        </footer>
      </article>
      <aside class="sidebar" aria-label="Article 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);">Table of Contents</h4>
        <nav aria-label="Article sections"><ul style="list-style:none;display:flex;flex-direction:column;gap:var(--space-2);">
          <li><a href="#" style="font-size:var(--font-size-sm);color:var(--color-brand);text-decoration:none;padding:var(--space-1-5) var(--space-3);display:block;border-left:2px solid var(--color-brand);">The problem</a></li>
          <li><a href="#" style="font-size:var(--font-size-sm);color:var(--color-text-muted);text-decoration:none;padding:var(--space-1-5) var(--space-3);display:block;">The solution</a></li>
          <li><a href="#" style="font-size:var(--font-size-sm);color:var(--color-text-muted);text-decoration:none;padding:var(--space-1-5) var(--space-3);display:block;">The results</a></li>
        </ul></nav>
      </aside>
    </div>
  </div></section>
""")

# ── Features ──────────────────────────────────────────────────
PAGES["features.html"] = page("Features", "Explore all of Acme's powerful features.", """
  <section class="page-hero brand"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb" style="color:rgba(255,255,255,0.7);"><li><a href="../index.html" style="color:rgba(255,255,255,0.7);">Home</a></li><li aria-current="page" style="color:white;">Features</li></ol></nav>
    <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);">Platform</span>
    <h1>Everything you need to ship great software</h1>
    <p class="lead">Acme brings together project management, CI/CD, analytics, and collaboration in one unified platform.</p>
    <div style="display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-6);"><a href="signup.html" class="btn btn-white btn-lg">Start for free</a><a href="pricing.html" class="btn btn-outline btn-lg" style="border-color:rgba(255,255,255,0.5);color:white;">View pricing</a></div>
  </div></section>
  <section class="features-section section"><div class="container">
    <div class="section-header centered"><span class="eyebrow">Core Features</span><h2>Built for the way modern teams work</h2></div>
    <div class="features-grid">
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F4CB;</div><h3>Project Management</h3><p>Boards, lists, timelines, and sprints — all in one place.</p></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F504;</div><h3>CI/CD Pipelines</h3><p>Automated build, test, and deploy pipelines with one-click rollbacks.</p></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F4CA;</div><h3>Analytics &amp; Reporting</h3><p>Real-time dashboards and custom reports to keep everyone aligned.</p></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F4AC;</div><h3>Team Collaboration</h3><p>Inline comments, @mentions, and threaded discussions in context.</p></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F517;</div><h3>Integrations</h3><p>Connect with 100+ tools including Slack, GitHub, Jira, and Figma.</p></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F916;</div><h3>Automation</h3><p>Build powerful no-code automations to eliminate repetitive work.</p></article>
    </div>
  </div></section>
  <section class="cta-section section"><div class="container"><h2>Ready to see it in action?</h2><p>Start your free trial today. No credit card required.</p><div class="cta-actions"><a href="signup.html" class="btn btn-white btn-lg">Start free trial</a><a href="contact.html" class="btn btn-outline btn-lg" style="border-color:rgba(255,255,255,0.5);color:white;">Request a demo</a></div></div></section>
""")

# ── Team ──────────────────────────────────────────────────────
PAGES["team.html"] = page("Our Team", "Meet the talented people behind 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><a href="about.html">About</a></li><li aria-current="page">Team</li></ol></nav>
    <span class="eyebrow">Our People</span>
    <h1>The team behind Acme</h1>
    <p class="lead">120+ talented people united by a passion for great software.</p>
  </div></section>
  <section class="team-section section"><div class="container">
    <div class="section-header centered"><span class="eyebrow">Leadership</span><h2>Executive team</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 &amp; Co-founder</div><p class="bio">Previously VP Product at Stripe.</p><div class="social-links"><a href="#" class="social-link" aria-label="LinkedIn">in</a></div></article>
      <article class="team-card"><img class="avatar" src="https://i.pravatar.cc/96?img=25" alt="Portrait of Jordan Kim" /><div class="name">Jordan Kim</div><div class="role">CTO &amp; Co-founder</div><p class="bio">Former Staff Engineer at Google.</p><div class="social-links"><a href="#" class="social-link" aria-label="GitHub">GH</a></div></article>
      <article class="team-card"><img class="avatar" src="https://i.pravatar.cc/96?img=30" alt="Portrait of Sam Okafor" /><div class="name">Sam Okafor</div><div class="role">Head of Design</div><p class="bio">Design systems expert. Previously at Figma.</p><div class="social-links"><a href="#" class="social-link" aria-label="LinkedIn">in</a></div></article>
      <article class="team-card"><img class="avatar" src="https://i.pravatar.cc/96?img=35" alt="Portrait of Maya Patel" /><div class="name">Maya Patel</div><div class="role">VP Engineering</div><p class="bio">10+ years building scalable infrastructure.</p><div class="social-links"><a href="#" class="social-link" aria-label="LinkedIn">in</a></div></article>
    </div>
  </div></section>
  <section class="cta-section section"><div class="container"><h2>Want to join us?</h2><p>We're hiring across engineering, design, product, and more.</p><div class="cta-actions"><a href="careers.html" class="btn btn-white btn-lg">View open roles</a></div></div></section>
""")

# ── Testimonials ──────────────────────────────────────────────
PAGES["testimonials.html"] = page("Customer Stories", "See how teams use Acme to build better software.", """
  <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">Testimonials</li></ol></nav>
    <span class="eyebrow">Customer Stories</span>
    <h1>Loved by teams everywhere</h1>
    <p class="lead">Here's what our customers have to say about Acme.</p>
  </div></section>
  <section class="section"><div class="container">
    <div class="testimonial-featured">
      <div class="stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
      <p class="quote-text">"Acme completely transformed how our engineering team ships. We went from weekly releases to multiple deploys per day."</p>
      <div class="author"><img class="author-avatar" src="https://i.pravatar.cc/48?img=5" alt="" /><div><div class="author-name">Sarah Chen</div><div class="author-role">VP Engineering, Stripe</div></div></div>
    </div>
  </div></section>
  <section class="testimonials-section section section-bg"><div class="container">
    <div class="testimonials-grid">
      <article class="testimonial-card"><div class="stars" aria-label="5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div><div class="quote-mark" aria-hidden="true">"</div><p class="quote-text">"The analytics alone are worth it. We finally have visibility into what's happening across all our projects."</p><div class="author"><img class="author-avatar" src="https://i.pravatar.cc/48?img=8" alt="" /><div><div class="author-name">Marcus Johnson</div><div class="author-role">CTO, Notion</div></div></div></article>
      <article class="testimonial-card"><div class="stars" aria-label="5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div><div class="quote-mark" aria-hidden="true">"</div><p class="quote-text">"Onboarding our 200-person team took less than a week. The documentation and support are world-class."</p><div class="author"><img class="author-avatar" src="https://i.pravatar.cc/48?img=12" alt="" /><div><div class="author-name">Priya Patel</div><div class="author-role">Head of Product, Linear</div></div></div></article>
      <article class="testimonial-card"><div class="stars" aria-label="5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div><div class="quote-mark" aria-hidden="true">"</div><p class="quote-text">"We evaluated 6 tools before choosing Acme. The combination of power and simplicity is unmatched."</p><div class="author"><img class="author-avatar" src="https://i.pravatar.cc/48?img=15" alt="" /><div><div class="author-name">Tom Nakamura</div><div class="author-role">Engineering Manager, Vercel</div></div></div></article>
    </div>
  </div></section>
""")

# ── Case Studies ──────────────────────────────────────────────
PAGES["case-studies.html"] = page("Case Studies", "See how leading companies use 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">Case Studies</li></ol></nav>
    <span class="eyebrow">Case Studies</span>
    <h1>Real results from real teams</h1>
    <p class="lead">See how leading companies use Acme to ship faster and collaborate better.</p>
  </div></section>
  <section class="section"><div class="container">
    <div class="blog-grid">
      <article class="blog-card"><img class="blog-card-image" src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=400&q=80" alt="Modern office building" loading="lazy" /><div class="blog-card-body"><div class="blog-card-meta"><span class="badge badge-primary">Engineering</span><span>70% faster deploys</span></div><h3 class="blog-card-title"><a href="case-study.html">How Stripe cut deploy times by 70% with Acme</a></h3><p class="blog-card-excerpt">Stripe's engineering team used Acme to overhaul their CI/CD pipeline.</p><div class="blog-card-footer"><span class="tag">500+ engineers</span><a href="case-study.html" class="btn btn-ghost btn-sm">Read story</a></div></div></article>
      <article class="blog-card"><img class="blog-card-image" src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=400&q=80" alt="Open plan office" loading="lazy" /><div class="blog-card-body"><div class="blog-card-meta"><span class="badge badge-secondary">Product</span><span>3x faster releases</span></div><h3 class="blog-card-title"><a href="case-study.html">Notion ships 3x faster after switching to Acme</a></h3><p class="blog-card-excerpt">Notion's product team consolidated 5 separate tools into Acme.</p><div class="blog-card-footer"><span class="tag">200+ team members</span><a href="case-study.html" class="btn btn-ghost btn-sm">Read story</a></div></div></article>
    </div>
  </div></section>
""")

# ── Case Study Detail ─────────────────────────────────────────
PAGES["case-study.html"] = page("Stripe Case Study", "How Stripe cut deploy times by 70% using Acme.", """
  <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><a href="case-studies.html" style="color:var(--color-neutral-400);">Case Studies</a></li><li aria-current="page" style="color:white;">Stripe</li></ol></nav>
    <span class="eyebrow">Case Study</span>
    <h1>How Stripe cut deploy times by 70%</h1>
    <p class="lead">Stripe's 500-person engineering team used Acme to transform their release process.</p>
    <div style="display:flex;gap:var(--space-8);margin-top:var(--space-8);flex-wrap:wrap;">
      <div><div style="font-size:var(--font-size-3xl);font-weight:800;color:var(--color-primary-400);">70%</div><div style="font-size:var(--font-size-sm);color:var(--color-neutral-400);">Faster deploys</div></div>
      <div><div style="font-size:var(--font-size-3xl);font-weight:800;color:var(--color-primary-400);">500+</div><div style="font-size:var(--font-size-sm);color:var(--color-neutral-400);">Engineers</div></div>
      <div><div style="font-size:var(--font-size-3xl);font-weight:800;color:var(--color-primary-400);">3 weeks</div><div style="font-size:var(--font-size-sm);color:var(--color-neutral-400);">To full rollout</div></div>
    </div>
  </div></section>
  <section class="section"><div class="container">
    <div class="sidebar-layout">
      <article class="prose" style="max-width:none;">
        <h2>The challenge</h2>
        <p>Stripe's engineering team had grown rapidly from 50 to 500 engineers. Their original CI/CD pipeline was struggling to keep up. Deploy times had ballooned to 45 minutes, and pipeline failures were occurring in 23% of all runs.</p>
        <h2>The solution</h2>
        <p>Stripe partnered with Acme to redesign their entire pipeline from the ground up, leveraging Acme's parallel execution engine and real-time observability tools.</p>
        <blockquote>"Acme gave us the visibility we needed to understand where time was being wasted." — Sarah Chen, VP Engineering</blockquote>
        <h2>The results</h2>
        <ul><li>Average deploy time reduced from 45 minutes to 13 minutes</li><li>Pipeline failure rate dropped from 23% to 4%</li><li>Engineer satisfaction increased from 3.2 to 4.7 out of 5</li></ul>
      </article>
      <aside class="sidebar">
        <div style="margin-bottom:var(--space-5);"><div style="font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-subtle);margin-bottom:var(--space-2);">Company</div><div style="font-weight:700;">Stripe</div></div>
        <div style="margin-bottom:var(--space-5);"><div style="font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-subtle);margin-bottom:var(--space-2);">Industry</div><div>Financial Technology</div></div>
        <div style="margin-bottom:var(--space-5);"><div style="font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-subtle);margin-bottom:var(--space-2);">Team size</div><div>500+ engineers</div></div>
        <div style="margin-bottom:var(--space-6);"><div style="font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-subtle);margin-bottom:var(--space-2);">Plan</div><div>Enterprise</div></div>
        <a href="contact.html" class="btn btn-primary btn-full">Talk to sales</a>
      </aside>
    </div>
  </div></section>
""")

# ── Portfolio ─────────────────────────────────────────────────
PAGES["portfolio.html"] = page("Portfolio", "Browse our portfolio of work.", """
  <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">Portfolio</li></ol></nav>
    <span class="eyebrow">Our Work</span>
    <h1>Projects we're proud of</h1>
    <p class="lead">A selection of design systems, web applications, and digital experiences.</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="portfolio.html" class="tag" aria-current="page">All</a>
      <a href="portfolio.html" class="tag">Web Apps</a>
      <a href="portfolio.html" class="tag">Design Systems</a>
      <a href="portfolio.html" class="tag">Mobile</a>
    </div>
    <div class="blog-grid">
      <article class="blog-card"><img class="blog-card-image" src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&q=80" alt="Dashboard interface" loading="lazy" /><div class="blog-card-body"><div class="blog-card-meta"><span class="badge badge-primary">Web App</span></div><h3 class="blog-card-title"><a href="portfolio-detail.html">Acme Analytics Dashboard</a></h3><p class="blog-card-excerpt">A real-time analytics platform for engineering teams.</p><div class="blog-card-footer"><span class="tag">React</span><a href="portfolio-detail.html" class="btn btn-ghost btn-sm">View</a></div></div></article>
      <article class="blog-card"><img class="blog-card-image" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&q=80" alt="Design system" loading="lazy" /><div class="blog-card-body"><div class="blog-card-meta"><span class="badge badge-secondary">Design System</span></div><h3 class="blog-card-title"><a href="portfolio-detail.html">Acme Design System</a></h3><p class="blog-card-excerpt">A comprehensive design system with 200+ components.</p><div class="blog-card-footer"><span class="tag">Figma</span><a href="portfolio-detail.html" class="btn btn-ghost btn-sm">View</a></div></div></article>
      <article class="blog-card"><img class="blog-card-image" src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=400&q=80" alt="Mobile app" loading="lazy" /><div class="blog-card-body"><div class="blog-card-meta"><span class="badge badge-neutral">Mobile</span></div><h3 class="blog-card-title"><a href="portfolio-detail.html">Acme Mobile App</a></h3><p class="blog-card-excerpt">Native iOS and Android apps with full feature parity.</p><div class="blog-card-footer"><span class="tag">React Native</span><a href="portfolio-detail.html" class="btn btn-ghost btn-sm">View</a></div></div></article>
    </div>
  </div></section>
""")

# ── Portfolio Detail ──────────────────────────────────────────
PAGES["portfolio-detail.html"] = page("Acme Analytics Dashboard", "A real-time analytics platform built 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="portfolio.html">Portfolio</a></li><li aria-current="page">Analytics Dashboard</li></ol></nav>
    <span class="eyebrow">Case Study</span>
    <h1>Acme Analytics Dashboard</h1>
    <p class="lead">A real-time analytics platform for engineering teams with custom reporting and alerting.</p>
  </div></section>
  <section class="section"><div class="container">
    <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=1200&q=80" alt="Analytics dashboard" style="width:100%;border-radius:var(--radius-2xl);margin-bottom:var(--space-12);" loading="lazy" />
    <div class="sidebar-layout">
      <article class="prose" style="max-width:none;">
        <h2>Overview</h2>
        <p>The Acme Analytics Dashboard gives engineering teams real-time visibility into their deployment pipeline, team velocity, and system health.</p>
        <h2>Key features</h2>
        <ul><li>Real-time data streaming with sub-second latency</li><li>Custom widget builder with drag-and-drop layout</li><li>Automated weekly reports via email and Slack</li><li>Anomaly detection with configurable alerting</li></ul>
      </article>
      <aside class="sidebar">
        <div style="margin-bottom:var(--space-5);"><div style="font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-subtle);margin-bottom:var(--space-2);">Client</div><div style="font-weight:600;">Internal / Acme</div></div>
        <div style="margin-bottom:var(--space-5);"><div style="font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-subtle);margin-bottom:var(--space-2);">Year</div><div>2024</div></div>
        <div style="margin-bottom:var(--space-6);"><div style="font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-subtle);margin-bottom:var(--space-2);">Technologies</div><div>React, TypeScript, D3.js</div></div>
        <a href="contact.html" class="btn btn-primary btn-full">Start a project</a>
      </aside>
    </div>
  </div></section>
""")

# ── Careers ───────────────────────────────────────────────────
PAGES["careers.html"] = page("Careers", "Join the Acme team. We're hiring across engineering, design, and product.", """
  <section class="page-hero brand"><div class="container">
    <nav aria-label="Breadcrumb"><ol class="breadcrumb" style="color:rgba(255,255,255,0.7);"><li><a href="../index.html" style="color:rgba(255,255,255,0.7);">Home</a></li><li aria-current="page" style="color:white;">Careers</li></ol></nav>
    <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);">We're Hiring</span>
    <h1>Build the future with us</h1>
    <p class="lead">Join a team of 120+ passionate people building tools that help engineering teams do their best work.</p>
  </div></section>
  <section class="section"><div class="container">
    <div class="section-header centered"><span class="eyebrow">Why Acme</span><h2>Perks &amp; benefits</h2></div>
    <div class="features-grid">
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F4B0;</div><h3>Competitive Compensation</h3><p>Top-of-market salary, equity, and annual performance bonuses.</p></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F3E5;</div><h3>Health &amp; Wellness</h3><p>100% covered medical, dental, and vision for you and your family.</p></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F3E0;</div><h3>Remote-First</h3><p>Work from anywhere. We have hubs in SF, NYC, London, and Berlin.</p></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F4DA;</div><h3>Learning Budget</h3><p>$2,000/year for conferences, courses, and books.</p></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F334;</div><h3>Unlimited PTO</h3><p>Take the time you need. We trust you to manage your own schedule.</p></article>
      <article class="feature-card"><div class="feature-icon" aria-hidden="true">&#x1F476;</div><h3>Parental Leave</h3><p>16 weeks fully paid parental leave for all parents.</p></article>
    </div>
  </div></section>
  <section class="section section-bg"><div class="container">
    <div class="section-header"><span class="eyebrow">Open Roles</span><h2>Current openings</h2></div>
    <div style="display:flex;flex-direction:column;gap:var(--space-3);">
      <a href="job-detail.html" class="job-card"><div class="job-info"><h3>Senior Frontend Engineer</h3><div class="job-meta"><span>Engineering</span><span>Remote</span><span>Full-time</span></div></div><span class="btn btn-outline btn-sm">Apply</span></a>
      <a href="job-detail.html" class="job-card"><div class="job-info"><h3>Staff Backend Engineer</h3><div class="job-meta"><span>Engineering</span><span>Remote / SF</span><span>Full-time</span></div></div><span class="btn btn-outline btn-sm">Apply</span></a>
      <a href="job-detail.html" class="job-card"><div class="job-info"><h3>Product Designer</h3><div class="job-meta"><span>Design</span><span>Remote</span><span>Full-time</span></div></div><span class="btn btn-outline btn-sm">Apply</span></a>
      <a href="job-detail.html" class="job-card"><div class="job-info"><h3>Product Manager</h3><div class="job-meta"><span>Product</span><span>Remote / NYC</span><span>Full-time</span></div></div><span class="btn btn-outline btn-sm">Apply</span></a>
    </div>
  </div></section>
""")

# ── Job Detail ────────────────────────────────────────────────
PAGES["job-detail.html"] = page("Senior Frontend Engineer", "Join Acme as a Senior Frontend Engineer.", """
  <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="careers.html">Careers</a></li><li aria-current="page">Senior Frontend Engineer</li></ol></nav>
    <div style="display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:var(--space-6);">
      <div><span class="eyebrow">Engineering</span><h1>Senior Frontend Engineer</h1><div style="display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-4);"><span class="badge badge-primary">Full-time</span><span class="badge badge-neutral">Remote</span><span class="badge badge-neutral">$160K-$200K</span></div></div>
      <a href="#apply" class="btn btn-primary btn-lg">Apply now</a>
    </div>
  </div></section>
  <section class="section"><div class="container">
    <div class="sidebar-layout">
      <article class="prose" style="max-width:none;">
        <h2>About the role</h2>
        <p>We're looking for a Senior Frontend Engineer to join our platform team. You'll work on the core Acme web application, building accessible, performant interfaces used by 10,000+ engineering teams.</p>
        <h2>What you'll do</h2>
        <ul><li>Build and maintain core features of the Acme web application</li><li>Contribute to our design system and component library</li><li>Champion accessibility and performance best practices</li><li>Mentor junior engineers</li></ul>
        <h2>What we're looking for</h2>
        <ul><li>5+ years of professional frontend engineering experience</li><li>Deep expertise in React, TypeScript, and modern CSS</li><li>Strong understanding of web accessibility (WCAG 2.2)</li><li>Experience with performance optimization</li></ul>
        <h2 id="apply">Apply for this role</h2>
        <form class="card card-body" data-validate novalidate aria-label="Job application form">
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);">
            <div class="form-group"><label class="form-label" for="app-first">First name <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="text" id="app-first" required autocomplete="given-name" /></div>
            <div class="form-group"><label class="form-label" for="app-last">Last name <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="text" id="app-last" required autocomplete="family-name" /></div>
          </div>
          <div class="form-group"><label class="form-label" for="app-email">Email <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="email" id="app-email" required autocomplete="email" /></div>
          <div class="form-group"><label class="form-label" for="app-cover">Cover letter <span class="required" aria-hidden="true">*</span></label><textarea class="form-textarea" id="app-cover" rows="5" required placeholder="Tell us why you're excited about this role..."></textarea></div>
          <button type="submit" class="btn btn-primary">Submit application</button>
        </form>
      </article>
      <aside class="sidebar">
        <div style="margin-bottom:var(--space-5);"><div style="font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-subtle);margin-bottom:var(--space-2);">Department</div><div style="font-weight:600;">Engineering</div></div>
        <div style="margin-bottom:var(--space-5);"><div style="font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-subtle);margin-bottom:var(--space-2);">Location</div><div>Remote (US/EU)</div></div>
        <div style="margin-bottom:var(--space-6);"><div style="font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-subtle);margin-bottom:var(--space-2);">Salary</div><div>$160K-$200K + equity</div></div>
        <a href="careers.html" class="btn btn-outline btn-full">All openings</a>
      </aside>
    </div>
  </div></section>
""")

# ── Landing Page ──────────────────────────────────────────────
PAGES["landing.html"] = page("Free Trial", "Start your free 14-day trial of Acme. No credit card required.", """
  <section style="background:linear-gradient(135deg,var(--color-primary-900) 0%,var(--color-primary-700) 100%);color:white;min-height:100vh;display:flex;align-items:center;padding:var(--space-12) 0;">
    <div class="container" style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center;">
      <div>
        <span class="eyebrow" style="color:var(--color-primary-300);background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);">14-Day Free Trial</span>
        <h1 style="color:white;font-size:var(--font-size-5xl);">Ship software faster, starting today</h1>
        <p class="lead" style="color:rgba(255,255,255,0.8);">Join 10,000+ engineering teams who use Acme to plan, build, and deploy with confidence.</p>
        <div style="display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-6);">
          <div style="display:flex;align-items:center;gap:var(--space-2);color:rgba(255,255,255,0.8);font-size:var(--font-size-sm);">&#10003; Free for 14 days</div>
          <div style="display:flex;align-items:center;gap:var(--space-2);color:rgba(255,255,255,0.8);font-size:var(--font-size-sm);">&#10003; No credit card required</div>
          <div style="display:flex;align-items:center;gap:var(--space-2);color:rgba(255,255,255,0.8);font-size:var(--font-size-sm);">&#10003; Cancel anytime</div>
        </div>
      </div>
      <div class="card card-body" style="background:white;color:var(--color-text);">
        <h2 style="font-size:var(--font-size-xl);margin-bottom:var(--space-6);">Start your free trial</h2>
        <form data-validate novalidate aria-label="Trial signup form">
          <div class="form-group"><label class="form-label" for="trial-name">Full name <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="text" id="trial-name" required autocomplete="name" /></div>
          <div class="form-group"><label class="form-label" for="trial-email">Work email <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="email" id="trial-email" required autocomplete="email" /></div>
          <div class="form-group"><label class="form-label" for="trial-company">Company name <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="text" id="trial-company" required autocomplete="organization" /></div>
          <button type="submit" class="btn btn-primary btn-full btn-lg">Start free trial</button>
          <p style="font-size:var(--font-size-xs);color:var(--color-text-subtle);text-align:center;margin-top:var(--space-3);">By signing up, you agree to our <a href="legal.html#terms">Terms</a> and <a href="legal.html#privacy">Privacy Policy</a>.</p>
        </form>
      </div>
    </div>
  </section>
""")

# ── Login ─────────────────────────────────────────────────────
PAGES["login.html"] = page("Sign In", "Sign in to your Acme account.", """
  <div class="auth-page">
    <div class="auth-visual">
      <div><div style="font-size:var(--font-size-3xl);font-weight:800;color:white;margin-bottom:var(--space-4);">Acme</div><h2>Welcome back</h2><p>Sign in to continue building great software with your team.</p></div>
    </div>
    <div class="auth-form-panel">
      <div class="auth-form-inner">
        <a href="../index.html" style="font-size:var(--font-size-xl);font-weight:800;color:var(--color-text);text-decoration:none;display:block;margin-bottom:var(--space-8);">Acme</a>
        <h1>Sign in to Acme</h1>
        <p class="auth-subtitle">Don't have an account? <a href="signup.html">Sign up free</a></p>
        <div class="auth-social-btns">
          <a href="#" class="auth-social-btn" aria-label="Continue with Google">G &nbsp; Continue with Google</a>
          <a href="#" class="auth-social-btn" aria-label="Continue with GitHub">GH &nbsp; Continue with GitHub</a>
        </div>
        <div class="auth-divider"><span>or continue with email</span></div>
        <form data-validate novalidate aria-label="Sign in form">
          <div class="form-group"><label class="form-label" for="login-email">Email address <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="email" id="login-email" required autocomplete="email" /></div>
          <div class="form-group">
            <div style="display:flex;justify-content:space-between;align-items:center;"><label class="form-label" for="login-password">Password <span class="required" aria-hidden="true">*</span></label><a href="password-reset.html" style="font-size:var(--font-size-sm);">Forgot password?</a></div>
            <input class="form-input" type="password" id="login-password" required autocomplete="current-password" />
          </div>
          <div class="form-group"><label class="form-check"><input class="form-check-input" type="checkbox" name="remember" /><span class="form-check-label">Remember me for 30 days</span></label></div>
          <button type="submit" class="btn btn-primary btn-full">Sign in</button>
        </form>
      </div>
    </div>
  </div>
""", no_header_footer=True)

# ── Sign Up ───────────────────────────────────────────────────
PAGES["signup.html"] = page("Create Account", "Create your free Acme account.", """
  <div class="auth-page">
    <div class="auth-visual">
      <div><div style="font-size:var(--font-size-3xl);font-weight:800;color:white;margin-bottom:var(--space-4);">Acme</div><h2>Start building today</h2><p>Join 10,000+ teams already using Acme to ship better software, faster.</p></div>
    </div>
    <div class="auth-form-panel">
      <div class="auth-form-inner">
        <a href="../index.html" style="font-size:var(--font-size-xl);font-weight:800;color:var(--color-text);text-decoration:none;display:block;margin-bottom:var(--space-8);">Acme</a>
        <h1>Create your account</h1>
        <p class="auth-subtitle">Already have an account? <a href="login.html">Sign in</a></p>
        <div class="auth-social-btns">
          <a href="#" class="auth-social-btn" aria-label="Sign up with Google">G &nbsp; Sign up with Google</a>
          <a href="#" class="auth-social-btn" aria-label="Sign up with GitHub">GH &nbsp; Sign up with GitHub</a>
        </div>
        <div class="auth-divider"><span>or sign up with email</span></div>
        <form data-validate novalidate aria-label="Sign up form">
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);">
            <div class="form-group"><label class="form-label" for="signup-first">First name <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="text" id="signup-first" required autocomplete="given-name" /></div>
            <div class="form-group"><label class="form-label" for="signup-last">Last name <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="text" id="signup-last" required autocomplete="family-name" /></div>
          </div>
          <div class="form-group"><label class="form-label" for="signup-email">Work email <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="email" id="signup-email" required autocomplete="email" /></div>
          <div class="form-group"><label class="form-label" for="signup-password">Password <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="password" id="signup-password" required autocomplete="new-password" data-minlength="8" /><div class="form-hint">Minimum 8 characters</div></div>
          <div class="form-group"><label class="form-check"><input class="form-check-input" type="checkbox" name="terms" required /><span class="form-check-label">I agree to the <a href="legal.html#terms">Terms</a> and <a href="legal.html#privacy">Privacy Policy</a></span></label></div>
          <button type="submit" class="btn btn-primary btn-full">Create account</button>
        </form>
      </div>
    </div>
  </div>
""", no_header_footer=True)

# ── Password Reset ────────────────────────────────────────────
PAGES["password-reset.html"] = page("Reset Password", "Reset your Acme account password.", """
  <div style="min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-8);background:var(--color-bg-subtle);">
    <div style="width:100%;max-width:420px;">
      <div style="text-align:center;margin-bottom:var(--space-8);"><a href="../index.html" style="font-size:var(--font-size-2xl);font-weight:800;color:var(--color-text);text-decoration:none;">Acme</a></div>
      <div class="card card-body">
        <h1 style="font-size:var(--font-size-2xl);margin-bottom:var(--space-2);">Reset your password</h1>
        <p style="color:var(--color-text-muted);margin-bottom:var(--space-6);">Enter your email and we'll send you a reset link.</p>
        <form data-validate novalidate aria-label="Password reset form">
          <div class="form-group"><label class="form-label" for="reset-email">Email address <span class="required" aria-hidden="true">*</span></label><input class="form-input" type="email" id="reset-email" required autocomplete="email" /></div>
          <button type="submit" class="btn btn-primary btn-full">Send reset link</button>
        </form>
        <div style="text-align:center;margin-top:var(--space-6);font-size:var(--font-size-sm);"><a href="login.html">Back to sign in</a></div>
      </div>
    </div>
  </div>
""", no_header_footer=True)