chore: bootstrap lean sysadmin-chronicles repo

Import the runnable game code, content, docs, scripts, and repo guidance while leaving local agent state, dependency installs, build output, and backup copies out of the published tree.
2026-05-02 11:49:07 -04:00
commit 0265afa054
252 changed files with 37574 additions and 0 deletions
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>About — Axiom Works</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<nav>
+  <div class="nav-inner">
+    <a class="nav-logo" href="index.html">
+      <img src="assets/logo.png" alt="Axiom Works">
+      <span>Axiom Works</span>
+    </a>
+    <ul class="nav-links">
+      <li><a href="index.html">Home</a></li>
+      <li><a href="products.html">Products</a></li>
+      <li><a href="about.html" class="active">About</a></li>
+      <li><a href="people.html">Our Team</a></li>
+    </ul>
+  </div>
+</nav>
+
+<div class="page-header">
+  <h1>About Axiom Works</h1>
+  <p>Founded in 2011. Still here. Still shipping.</p>
+</div>
+
+<main class="page">
+
+  <div class="about-block">
+    <div>
+      <h2>Where we started</h2>
+      <p>Axiom Works was founded in 2011 by a small team of operations veterans who were tired of watching mid-size manufacturers paper over process problems with spreadsheets and tribal knowledge. The original product was a rules engine. It was not elegant, but it worked.</p>
+      <p>Over the next few years, that rules engine became AxiomFlow — a full workflow automation platform built for the realities of industrial operations: shift handoffs, exception handling, equipment downtime, and the kind of edge cases that enterprise vendors prefer not to demo.</p>
+      <p>We have been profitable since 2014. We have not taken outside investment. This is a deliberate choice.</p>
+
+      <div class="stat-row">
+        <div class="stat">
+          <span class="stat-num">2011</span>
+          <span class="stat-lbl">Founded</span>
+        </div>
+        <div class="stat">
+          <span class="stat-num">280</span>
+          <span class="stat-lbl">Employees</span>
+        </div>
+        <div class="stat">
+          <span class="stat-num">140+</span>
+          <span class="stat-lbl">Customers</span>
+        </div>
+      </div>
+    </div>
+    <div>
+      <h2>What we actually do</h2>
+      <p>AxiomFlow automates the workflows that keep operations running — purchase approvals, quality checks, shift reports, compliance sign-offs, exception escalations. The kind of work that gets done in every facility but rarely appears in a vendor's use-case library.</p>
+      <p>Our customers are mostly mid-size manufacturers and logistics companies in the 200–2,000 employee range. They have real IT departments and real process complexity. They don't need a product designed for a 12-person SaaS startup.</p>
+      <p>We sell to operations leaders and implement with their IT teams. We do not use resellers. When something needs to be configured, a person from Axiom Works handles it.</p>
+    </div>
+  </div>
+
+  <hr class="divider">
+
+  <section style="margin-bottom: 3.5rem;">
+    <p class="section-label">What We Believe</p>
+    <h2 class="section-title">How we work</h2>
+    <p class="section-intro">These aren't values we arrived at in a workshop. They're conclusions from fourteen years of watching what works and what doesn't.</p>
+
+    <div class="about-block" style="margin-bottom: 0;">
+      <div>
+        <ul class="values-list">
+          <li>
+            <strong>Reliability over features</strong>
+            <span>A workflow automation platform that goes down during a shift is worse than no platform at all. Uptime is not a selling point. It is the baseline.</span>
+          </li>
+          <li>
+            <strong>Customers are not case studies</strong>
+            <span>We do not publish customer names without permission. We do not write up their implementations as thought leadership. Their problems are not content.</span>
+          </li>
+          <li>
+            <strong>Slow is smooth, smooth is fast</strong>
+            <span>We have never shipped a feature to meet a conference deadline. This is probably why our release notes are boring and our customers don't have to roll back.</span>
+          </li>
+        </ul>
+      </div>
+      <div>
+        <ul class="values-list">
+          <li>
+            <strong>Support is not a department</strong>
+            <span>Every customer has a named contact. Support issues get routed to the people who built the feature. The alternative is faster for us and worse for everyone.</span>
+          </li>
+          <li>
+            <strong>Honest pricing</strong>
+            <span>Our pricing is published. We do not have tiers designed to make the middle option look reasonable. The contract you sign is the contract you get.</span>
+          </li>
+          <li>
+            <strong>We stay in our lane</strong>
+            <span>We automate workflows for operations teams. We are not building an AI platform, a marketplace, or a suite of adjacent products nobody asked for.</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
+
+  <hr class="divider">
+
+  <section id="contact" style="margin-bottom: 2rem;">
+    <p class="section-label">Get in Touch</p>
+    <h2 class="section-title">Talk to us</h2>
+    <p class="section-intro">We respond to every inquiry. Usually the same day, always within 24 hours.</p>
+
+    <div class="card-grid" style="grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));">
+      <div class="card">
+        <div class="card-icon">💬</div>
+        <h3>Sales Inquiries</h3>
+        <p>If you'd like to see a demo or talk through whether AxiomFlow is a fit for your operation, reach out to our sales team.</p>
+        <p style="margin-top:1rem;"><a href="mailto:sales@axiomworks.com">sales@axiomworks.com</a></p>
+      </div>
+      <div class="card">
+        <div class="card-icon">🛠️</div>
+        <h3>Customer Support</h3>
+        <p>Existing customers can reach support directly. Your account contact's email is in your onboarding documentation.</p>
+        <p style="margin-top:1rem;"><a href="mailto:support@axiomworks.com">support@axiomworks.com</a></p>
+      </div>
+      <div class="card">
+        <div class="card-icon">🏢</div>
+        <h3>Our Office</h3>
+        <p>We're headquartered downtown, or close enough to it that we say downtown and nobody pushes back.</p>
+        <p style="margin-top:1rem; color: var(--muted); font-size:0.9rem;">Axiom Works, Inc.<br>Downtown-Adjacent, Suite 300</p>
+      </div>
+    </div>
+  </section>
+
+  <div class="cta-banner">
+    <h2>Meet the team behind the platform</h2>
+    <p>The people who build and support AxiomFlow have been doing this for a while. Some of them have been here since the rules engine days.</p>
+    <a href="people.html" class="btn btn-primary">Our Team</a>
+  </div>
+
+</main>
+
+<footer>
+  <div class="footer-logo">
+    <img src="assets/logo.png" alt="Axiom Works">
+    <span>Axiom Works</span>
+  </div>
+  <p>&copy; 2025 Axiom Works, Inc. All rights reserved. &nbsp;·&nbsp; <a href="about.html">About</a> &nbsp;·&nbsp; <a href="products.html">Products</a> &nbsp;·&nbsp; <a href="people.html">Our Team</a></p>
+</footer>
+
+</body>
+</html>
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Axiom Works — Workflow Automation for Modern Operations</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<nav>
+  <div class="nav-inner">
+    <a class="nav-logo" href="index.html">
+      <img src="assets/logo.png" alt="Axiom Works">
+      <span>Axiom Works</span>
+    </a>
+    <ul class="nav-links">
+      <li><a href="index.html" class="active">Home</a></li>
+      <li><a href="products.html">Products</a></li>
+      <li><a href="about.html">About</a></li>
+      <li><a href="people.html">Our Team</a></li>
+    </ul>
+  </div>
+</nav>
+
+<section class="hero">
+  <div class="hero-inner">
+    <p class="hero-eyebrow">Enterprise Workflow Automation</p>
+    <h1>Streamline. Scale. Succeed.</h1>
+    <p>Axiom Works helps mid-size manufacturers and logistics companies automate the workflows that keep operations running — without the complexity that gets in the way.</p>
+    <div>
+      <a href="products.html" class="btn btn-primary">See Our Products</a>
+      <a href="about.html" class="btn btn-outline">Learn About Us</a>
+    </div>
+  </div>
+</section>
+
+<main class="page">
+
+  <section>
+    <p class="section-label">Why Axiom Works</p>
+    <h2 class="section-title">Built for the way operations actually work</h2>
+    <p class="section-intro">Most workflow tools are designed for software teams. AxiomFlow was designed for the people running shifts, managing fleets, and keeping production lines moving.</p>
+
+    <div class="card-grid">
+      <div class="card">
+        <div class="card-icon">⚙️</div>
+        <h3>Configurable Without Consultants</h3>
+        <p>Your team can build and modify workflows without waiting on a vendor or a dedicated IT project. If you can describe the process, you can automate it.</p>
+      </div>
+      <div class="card">
+        <div class="card-icon">📊</div>
+        <h3>Visibility Across the Operation</h3>
+        <p>AxiomDash gives managers a live view of what's moving, what's stalled, and where the bottlenecks are — without pulling reports by hand.</p>
+      </div>
+      <div class="card">
+        <div class="card-icon">🔗</div>
+        <h3>Connects to What You Have</h3>
+        <p>We integrate with ERP systems, warehouse management tools, and the spreadsheets your team has been using since 2009. We don't ask you to start over.</p>
+      </div>
+      <div class="card">
+        <div class="card-icon">🛡️</div>
+        <h3>Supported by a Real Team</h3>
+        <p>Every customer gets a named support contact. When something breaks during a shift, you call a person — not a ticketing system that routes you to a chatbot.</p>
+      </div>
+    </div>
+  </section>
+
+  <hr class="section-divider">
+
+  <section>
+    <p class="section-label">Our Platform</p>
+    <h2 class="section-title">The AxiomFlow platform</h2>
+    <p class="section-intro">A connected suite of tools for workflow automation, reporting, and system integration — built to run reliably at scale.</p>
+
+    <div class="card-grid">
+      <div class="card">
+        <div class="card-icon">🔄</div>
+        <h3>AxiomFlow</h3>
+        <p>The core workflow automation platform. Define processes, assign tasks, set triggers, and track completion — all in one place. Trusted by over 140 customers across manufacturing, logistics, and distribution.</p>
+        <span class="card-tag">Flagship Product</span>
+      </div>
+      <div class="card">
+        <div class="card-icon">📈</div>
+        <h3>AxiomDash</h3>
+        <p>Real-time reporting and analytics built on top of your AxiomFlow data. Track KPIs, spot trends, and share dashboards with stakeholders — without an analyst in the loop.</p>
+        <span class="card-tag">Analytics Add-On</span>
+      </div>
+      <div class="card">
+        <div class="card-icon">🔌</div>
+        <h3>AxiomSync</h3>
+        <p>Our legacy data integration layer, connecting older systems to AxiomFlow where modern connectors aren't available. Available for existing customers on legacy contracts.</p>
+        <span class="card-tag legacy">Legacy</span>
+      </div>
+    </div>
+  </section>
+
+  <hr class="section-divider">
+
+  <section>
+    <p class="section-label">By The Numbers</p>
+    <h2 class="section-title">A track record that holds up</h2>
+    <p class="section-intro">We've been doing this since 2011. The numbers reflect what happens when you focus on one thing and keep doing it well.</p>
+
+    <div class="card-grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));">
+      <div class="card" style="text-align:center;">
+        <span class="stat-num">140+</span>
+        <span class="stat-lbl">Active Customers</span>
+      </div>
+      <div class="card" style="text-align:center;">
+        <span class="stat-num">14</span>
+        <span class="stat-lbl">Years in Business</span>
+      </div>
+      <div class="card" style="text-align:center;">
+        <span class="stat-num">280</span>
+        <span class="stat-lbl">Employees</span>
+      </div>
+      <div class="card" style="text-align:center;">
+        <span class="stat-num">99.6%</span>
+        <span class="stat-lbl">Uptime (12-Month Avg)</span>
+      </div>
+    </div>
+  </section>
+
+  <div class="cta-banner">
+    <h2>Ready to see AxiomFlow in action?</h2>
+    <p>Schedule a 30-minute demo with one of our solutions engineers. No slides, no pitch deck — just the product.</p>
+    <a href="about.html#contact" class="btn btn-primary">Request a Demo</a>
+  </div>
+
+</main>
+
+<footer>
+  <div class="footer-logo">
+    <img src="assets/logo.png" alt="Axiom Works">
+    <span>Axiom Works</span>
+  </div>
+  <p>&copy; 2025 Axiom Works, Inc. All rights reserved. &nbsp;·&nbsp; <a href="about.html">About</a> &nbsp;·&nbsp; <a href="products.html">Products</a> &nbsp;·&nbsp; <a href="people.html">Our Team</a></p>
+</footer>
+
+</body>
+</html>
@@ -0,0 +1,385 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Our Team — Axiom Works</title>
+  <link rel="stylesheet" href="style.css">
+  <style>
+    .exec-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 2rem;
+      margin-bottom: 1rem;
+    }
+
+    .exec-card {
+      background: var(--white);
+      border: 1px solid var(--border);
+      border-radius: var(--r);
+      padding: 2rem 1.75rem;
+      box-shadow: var(--shadow);
+      display: flex;
+      gap: 1.5rem;
+      align-items: flex-start;
+    }
+
+    .exec-photo {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 3px solid var(--border);
+      flex-shrink: 0;
+    }
+
+    .exec-initial {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      background: var(--navy);
+      color: #fff;
+      font-size: 1.6rem;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .exec-info h3 { font-size: 1.1rem; font-weight: 600; color: var(--navy-dk); margin-bottom: 0.2rem; }
+    .exec-info .title { font-size: 0.82rem; color: var(--blue); font-weight: 500; margin-bottom: 0.6rem; }
+    .exec-info p { font-size: 0.85rem; color: var(--muted); line-height: 1.55; }
+  </style>
+</head>
+<body>
+
+<nav>
+  <div class="nav-inner">
+    <a class="nav-logo" href="index.html">
+      <img src="assets/logo.png" alt="Axiom Works">
+      <span>Axiom Works</span>
+    </a>
+    <ul class="nav-links">
+      <li><a href="index.html">Home</a></li>
+      <li><a href="products.html">Products</a></li>
+      <li><a href="about.html">About</a></li>
+      <li><a href="people.html" class="active">Our Team</a></li>
+    </ul>
+  </div>
+</nav>
+
+<div class="page-header">
+  <h1>Our Team</h1>
+  <p>280 people. Most of them are not on this page.</p>
+</div>
+
+<main class="page">
+
+  <!-- ── EXECUTIVE LEADERSHIP ───────────────────── -->
+  <section style="margin-bottom: 3rem;">
+    <p class="section-label">Executive Leadership</p>
+    <h2 class="section-title">The people running the company</h2>
+    <p class="section-intro">Axiom Works has been founder-led since 2011. The leadership team is small and has been largely stable since 2015.</p>
+
+    <div class="exec-grid">
+
+      <div class="exec-card">
+        <img class="exec-photo" src="assets/ellen_marsh_ceo_cofounder.png" alt="Ellen Marsh" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="exec-initial" style="display:none;">EM</div>
+        <div class="exec-info">
+          <h3>Ellen Marsh</h3>
+          <p class="title">CEO &amp; Co-Founder</p>
+          <p>Ellen built the first version of AxiomFlow's rules engine after a decade running operations at a mid-size manufacturer and deciding the tools available were not good enough. She has no CS background, which is probably why the product ended up designed for people who don't either. Attends all-hands twice a year. Has final say on pricing and customer commitments. Does not use Slack.</p>
+        </div>
+      </div>
+
+      <div class="exec-card">
+        <img class="exec-photo" src="assets/david_park_cto_cofounder.png" alt="David Park" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="exec-initial" style="display:none;">DP</div>
+        <div class="exec-info">
+          <h3>David Park</h3>
+          <p class="title">CTO &amp; Co-Founder</p>
+          <p>Wrote the original rules engine in 2011 and has been quietly refactoring it ever since. David now manages engineering managers rather than engineers, which he describes as an acceptable trade. Reviews architecture decisions. Still has opinions about the data model. Has a standing Thursday meeting with security that hasn't moved since 2017.</p>
+        </div>
+      </div>
+
+      <div class="exec-card">
+        <img class="exec-photo" src="assets/karen_volkov_coo.png" alt="Karen Volkov" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="exec-initial" style="display:none;">KV</div>
+        <div class="exec-info">
+          <h3>Karen Volkov</h3>
+          <p class="title">Chief Operating Officer</p>
+          <p>Joined in 2014 to turn a functional startup into a company that could scale past 50 people. Responsible for the fact that Axiom Works has documented processes for anything at all. Has opinions about infrastructure costs that occasionally surface in IT's world via Finance. Prefers decisions with clear owners and deadlines.</p>
+        </div>
+      </div>
+
+      <div class="exec-card">
+        <img class="exec-photo" src="assets/rachel_brandt_cfo.png" alt="Rachel Brandt" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="exec-initial" style="display:none;">RB</div>
+        <div class="exec-info">
+          <h3>Rachel Brandt</h3>
+          <p class="title">Chief Financial Officer</p>
+          <p>Joined in 2016 from a regional accounting firm that handled several of Axiom Works' early customers. Has been working to consolidate the company's cloud spend since 2019. Methodical. Approves all capital expenditure over $5,000. Does not enjoy surprises in the infrastructure budget.</p>
+        </div>
+      </div>
+
+    </div>
+  </section>
+
+  <hr class="divider">
+
+  <!-- ── SALES & CUSTOMER SUCCESS ──────────────── -->
+  <section style="margin-bottom: 3rem;">
+    <p class="section-label">Sales &amp; Customer Success</p>
+    <h2 class="section-title">Getting customers and keeping them</h2>
+    <p class="section-intro">Axiom Works does not use resellers. Every customer relationship runs through this team.</p>
+
+    <div class="people-grid">
+
+      <div class="person-card">
+        <img class="person-photo" src="assets/phil_ruiz_vp_sales.png" alt="Phil Ruiz" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="person-initial" style="display:none;">PR</div>
+        <h3>Phil Ruiz</h3>
+        <p class="title">VP of Sales</p>
+        <p>Has been promising features to prospects since 2016. Maintains a warm relationship with infrastructure because Marcus once fixed the staging environment with twenty minutes to spare before a demo. Travels frequently. Expense reports submitted promptly.</p>
+      </div>
+
+      <div class="person-card">
+        <img class="person-photo" src="assets/tanya_okafor_head_customer_success.png" alt="Tanya Okafor" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="person-initial" style="display:none;">TO</div>
+        <h3>Tanya Okafor</h3>
+        <p class="title">Head of Customer Success</p>
+        <p>Manages post-sale relationships for all AxiomFlow customers and the twelve AxiomSync accounts that haven't migrated yet. Uses the word "partnership" a lot. Usually the first person to know when something is wrong in production, because a customer has already called her.</p>
+      </div>
+
+      <div class="person-card">
+        <img class="person-photo" src="assets/mike_kawamoto_account_executive.png" alt="Mike Kawamoto" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="person-initial" style="display:none;">MK</div>
+        <h3>Mike Kawamoto</h3>
+        <p class="title">Account Executive</p>
+        <p>Handles mid-market manufacturing accounts in the northeast. Has closed more deals in Q4 than any other quarter for four years running. Believes strongly in the demo environment.</p>
+      </div>
+
+      <div class="person-card">
+        <img class="person-photo" src="assets/lisa_ferreira_customer_success_manager.png" alt="Lisa Ferreira" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="person-initial" style="display:none;">LF</div>
+        <h3>Lisa Ferreira</h3>
+        <p class="title">Customer Success Manager</p>
+        <p>Manages onboarding for new AxiomFlow deployments. Responsible for the onboarding documentation that actually gets used, as opposed to the documentation that exists. Has a talent for figuring out what customers mean rather than what they say.</p>
+      </div>
+
+    </div>
+  </section>
+
+  <hr class="divider">
+
+  <!-- ── PRODUCT ───────────────────────────────── -->
+  <section style="margin-bottom: 3rem;">
+    <p class="section-label">Product</p>
+    <h2 class="section-title">What we build and why</h2>
+    <p class="section-intro">The product team defines the roadmap and answers for it when the roadmap turns out to be wrong.</p>
+
+    <div class="people-grid">
+
+      <div class="person-card">
+        <img class="person-photo" src="assets/sarah-chen.png" alt="Sarah Chen" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="person-initial" style="display:none;">SC</div>
+        <h3>Sarah Chen</h3>
+        <p class="title">Product Manager, AxiomFlow</p>
+        <p>Owns the AxiomFlow roadmap. Coordinates between sales, engineering, and customers to decide what gets built and in what order. Has strong feelings about the demo environment because it's the product she can see. Emails Monday mornings.</p>
+      </div>
+
+      <div class="person-card">
+        <img class="person-photo" src="assets/ben_portillo_product_manager_axiomdash.png" alt="Ben Portillo" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="person-initial" style="display:none;">BP</div>
+        <h3>Ben Portillo</h3>
+        <p class="title">Product Manager, AxiomDash</p>
+        <p>Leads product development for the analytics add-on. Works closely with the largest accounts to understand what they actually want from dashboards, which is usually different from what they asked for.</p>
+      </div>
+
+      <div class="person-card">
+        <img class="person-photo" src="assets/annika_gosse_ux_designer.png" alt="Annika Gosse" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="person-initial" style="display:none;">AG</div>
+        <h3>Annika Gosse</h3>
+        <p class="title">UX Designer</p>
+        <p>Responsible for AxiomFlow's interface layer. Has been advocating for a redesign of the workflow builder since 2022. Produces research that is read carefully and then partially implemented. Patient.</p>
+      </div>
+
+    </div>
+  </section>
+
+  <hr class="divider">
+
+  <!-- ── ENGINEERING ───────────────────────────── -->
+  <section style="margin-bottom: 3rem;">
+    <p class="section-label">Engineering</p>
+    <h2 class="section-title">The people who build it</h2>
+    <p class="section-intro">The engineering team is distributed across product development, integrations, and platform reliability.</p>
+
+    <div class="people-grid">
+
+      <div class="person-card">
+        <img class="person-photo" src="assets/yusuf_halabi_engineering_manager.png" alt="Yusuf Halabi" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="person-initial" style="display:none;">YH</div>
+        <h3>Yusuf Halabi</h3>
+        <p class="title">Engineering Manager</p>
+        <p>Reports to the CTO and manages the core AxiomFlow platform team. Has opinions about test coverage. Occasionally leaves pull request comments that are technically correct and diplomatically suboptimal. Runs the Thursday architecture review.</p>
+      </div>
+
+      <div class="person-card">
+        <img class="person-photo" src="assets/mei_lin_senior_software_engineer.png" alt="Mei Lin" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="person-initial" style="display:none;">ML</div>
+        <h3>Mei Lin</h3>
+        <p class="title">Senior Software Engineer</p>
+        <p>Has maintained AxiomSync's integration layer since 2018. Knows more about it than anyone would prefer, including herself. Currently leading the migration tooling project to help the remaining AxiomSync customers off the platform. Thorough commit messages.</p>
+      </div>
+
+      <div class="person-card">
+        <img class="person-photo" src="assets/cora_reyes_software_engineer.png" alt="Cora Reyes" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="person-initial" style="display:none;">CR</div>
+        <h3>Cora Reyes</h3>
+        <p class="title">Software Engineer</p>
+        <p>Works on the AxiomDash reporting pipeline. Joined in 2022 as a mid-level hire and has been moving steadily toward senior. Has submitted more internal RFCs than anyone else on the team in the past year.</p>
+      </div>
+
+      <div class="person-card">
+        <img class="person-photo" src="assets/nikhil_sharma_platform_engineer.png" alt="Nikhil Sharma" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="person-initial" style="display:none;">NS</div>
+        <h3>Nikhil Sharma</h3>
+        <p class="title">Platform Engineer</p>
+        <p>Owns the build and release pipeline, the internal CI infrastructure, and the parts of the deployment process that nobody else wants to think about. Has strong opinions about reproducible builds. Occasionally sends Slack messages at 6am.</p>
+      </div>
+
+    </div>
+  </section>
+
+  <hr class="divider">
+
+  <!-- ── IT OPERATIONS ─────────────────────────── -->
+  <section style="margin-bottom: 3rem;">
+    <p class="section-label">IT &amp; Infrastructure</p>
+    <h2 class="section-title">Keeping everything running</h2>
+    <p class="section-intro">The team that manages internal systems, the hosted demo environments, and the infrastructure that everything else depends on.</p>
+
+    <div class="people-grid">
+
+      <div class="person-card">
+        <img class="person-photo" src="assets/dave-kowalski.png" alt="Dave Kowalski" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="person-initial" style="display:none;">DK</div>
+        <h3>Dave Kowalski</h3>
+        <p class="title">Director of IT Operations</p>
+        <p>Oversees systems, networking, and IT support. Background is originally in network engineering. Has been with Axiom Works since 2015. Describes the infrastructure as mature. Has said "we should really document that" more times than he would admit.</p>
+      </div>
+
+      <div class="person-card">
+        <img class="person-photo" src="assets/marcus-webb.png" alt="Marcus Webb" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="person-initial" style="display:none;">MW</div>
+        <h3>Marcus Webb</h3>
+        <p class="title">Senior Systems Administrator</p>
+        <p>Six years at Axiom Works. Knows where everything is and why it's there. Communicates efficiently. Available on Slack during business hours and occasionally at 11pm when something is on his mind.</p>
+      </div>
+
+      <div class="person-card">
+        <img class="person-photo" src="assets/rachel_huang_systems_administrator.png" alt="Rachel Huang" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="person-initial" style="display:none;">RH</div>
+        <h3>Rachel Huang</h3>
+        <p class="title">Systems Administrator</p>
+        <p>Handles provisioning, patch cycles, and the ongoing negotiation with finance over cloud consolidation. Came from a managed services background. Has strong opinions about monitoring dashboards, most of which are correct.</p>
+      </div>
+
+      <div class="person-card">
+        <img class="person-photo" src="assets/tom_malaney_network_engineer.png" alt="Tom Malaney" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="person-initial" style="display:none;">TM</div>
+        <h3>Tom Malaney</h3>
+        <p class="title">Network Engineer</p>
+        <p>Responsible for network infrastructure across the office and the hosted environments. Has been on-call for more holiday weekends than he prefers to discuss. Thorough in documentation when he finds time to write it.</p>
+      </div>
+
+    </div>
+  </section>
+
+  <hr class="divider">
+
+  <!-- ── SECURITY & COMPLIANCE ─────────────────── -->
+  <section style="margin-bottom: 3rem;">
+    <p class="section-label">Security &amp; Compliance</p>
+    <h2 class="section-title">Risk, access, and the things that matter when they go wrong</h2>
+    <p class="section-intro">Security at Axiom Works is treated as a function, not a checkbox.</p>
+
+    <div class="people-grid">
+
+      <div class="person-card">
+        <img class="person-photo" src="assets/priya-nair.png" alt="Priya Nair" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="person-initial" style="display:none;">PN</div>
+        <h3>Priya Nair</h3>
+        <p class="title">Head of Security &amp; Compliance</p>
+        <p>Leads all security reviews, access audits, and compliance programmes. Frames concerns in terms of what happens when things go wrong, rather than whether they will. Usually correct. Not someone who appreciates being told about a change after it's already in production.</p>
+      </div>
+
+      <div class="person-card">
+        <img class="person-photo" src="assets/james_osei_security_analyst.png" alt="James Osei" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="person-initial" style="display:none;">JO</div>
+        <h3>James Osei</h3>
+        <p class="title">Security Analyst</p>
+        <p>Handles vulnerability assessments, access reviews, and quarterly compliance reporting. Methodical. Has a spreadsheet for everything, which is not a criticism.</p>
+      </div>
+
+    </div>
+  </section>
+
+  <hr class="divider">
+
+  <!-- ── FINANCE & ADMINISTRATION ──────────────── -->
+  <section style="margin-bottom: 3rem;">
+    <p class="section-label">Finance &amp; Administration</p>
+    <h2 class="section-title">The numbers and the people who manage them</h2>
+    <p class="section-intro">A small team that keeps the books, manages the office, and appears on CC lines of emails that involve infrastructure spending.</p>
+
+    <div class="people-grid">
+
+      <div class="person-card">
+        <img class="person-photo" src="assets/derek_ashford_financial_controller.png" alt="Derek Ashford" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="person-initial" style="display:none;">DA</div>
+        <h3>Derek Ashford</h3>
+        <p class="title">Financial Controller</p>
+        <p>Manages financial reporting, budget tracking, and vendor contracts. Does not appear at team meetings. Does appear on CC lines of any email that mentions cloud costs, hardware procurement, or infrastructure budget. Always replies-all.</p>
+      </div>
+
+      <div class="person-card">
+        <img class="person-photo" src="assets/sandra_wu_hr_manager.png" alt="Sandra Wu" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="person-initial" style="display:none;">SW</div>
+        <h3>Sandra Wu</h3>
+        <p class="title">HR Manager</p>
+        <p>Manages hiring, onboarding, and employee relations. Has been with Axiom Works since 2016. Responsible for the onboarding process that new employees go through, which is thorough and takes three days. Sends birthday emails on time, every time.</p>
+      </div>
+
+      <div class="person-card">
+        <img class="person-photo" src="assets/owen_blake_office_manager.png" alt="Owen Blake" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
+        <div class="person-initial" style="display:none;">OB</div>
+        <h3>Owen Blake</h3>
+        <p class="title">Office Manager</p>
+        <p>Keeps the office running. Manages facilities, supplies, vendor relationships for non-technical services, and the kitchen situation. Has fixed more things than his job title implies. The person you contact if the conference room equipment stops working.</p>
+      </div>
+
+    </div>
+  </section>
+
+  <div class="cta-banner">
+    <h2>We're hiring — carefully</h2>
+    <p>We add people slowly and try to keep them. Open roles are listed on our careers page. We don't use recruiters.</p>
+    <a href="about.html#contact" class="btn btn-primary">Get in Touch</a>
+  </div>
+
+</main>
+
+<footer>
+  <div class="footer-logo">
+    <img src="assets/logo.png" alt="Axiom Works">
+    <span>Axiom Works</span>
+  </div>
+  <p>&copy; 2025 Axiom Works, Inc. All rights reserved. &nbsp;·&nbsp; <a href="about.html">About</a> &nbsp;·&nbsp; <a href="products.html">Products</a> &nbsp;·&nbsp; <a href="people.html">Our Team</a></p>
+</footer>
+
+</body>
+</html>
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Products — Axiom Works</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<nav>
+  <div class="nav-inner">
+    <a class="nav-logo" href="index.html">
+      <img src="assets/logo.png" alt="Axiom Works">
+      <span>Axiom Works</span>
+    </a>
+    <ul class="nav-links">
+      <li><a href="index.html">Home</a></li>
+      <li><a href="products.html" class="active">Products</a></li>
+      <li><a href="about.html">About</a></li>
+      <li><a href="people.html">Our Team</a></li>
+    </ul>
+  </div>
+</nav>
+
+<div class="page-header">
+  <h1>Products</h1>
+  <p>The AxiomFlow platform and the tools built around it.</p>
+</div>
+
+<main class="page">
+
+  <section style="margin-bottom: 1rem;">
+    <p class="section-label">Platform Overview</p>
+    <h2 class="section-title">One platform, built for operations</h2>
+    <p class="section-intro">AxiomFlow is the core. AxiomDash extends it with analytics. AxiomSync bridges older systems where needed. All three are designed to run together — or independently, where that's what makes sense.</p>
+  </section>
+
+  <!-- AxiomFlow -->
+  <div class="product-feature">
+    <div>
+      <span class="product-badge main">Flagship</span>
+      <h3>AxiomFlow</h3>
+      <p>Workflow automation platform for mid-size manufacturers, logistics providers, and distribution operations. Define, deploy, and monitor business processes without a development team or a multi-quarter implementation project.</p>
+      <p>AxiomFlow handles the workflows that matter most: approvals, task routing, exception handling, compliance sign-offs, shift handoffs, and the dozens of other processes that run every day and fail quietly when something goes wrong.</p>
+      <p>Currently active across 140+ customers. Most deployments are live within 60–90 days of contract signing.</p>
+    </div>
+    <div>
+      <ul class="feature-list">
+        <li>Visual workflow builder — no code required for standard processes</li>
+        <li>Role-based task routing with fallback escalation rules</li>
+        <li>Trigger-based automation: time, event, threshold, or external webhook</li>
+        <li>Audit trail on every workflow action — immutable, exportable</li>
+        <li>Exception handling with configurable escalation paths</li>
+        <li>Shift and calendar-aware scheduling</li>
+        <li>ERP and WMS integration via REST API and native connectors</li>
+        <li>Single-sign-on (SAML 2.0, OIDC)</li>
+        <li>On-premise or private cloud deployment</li>
+        <li>99.6% uptime SLA (12-month rolling average)</li>
+      </ul>
+    </div>
+  </div>
+
+  <!-- AxiomDash -->
+  <div class="product-feature">
+    <div>
+      <span class="product-badge">Analytics Add-On</span>
+      <h3>AxiomDash</h3>
+      <p>Reporting and analytics built directly on top of your AxiomFlow data. No ETL pipeline, no separate database, no BI tool license to negotiate. If it happened in AxiomFlow, AxiomDash can show it.</p>
+      <p>Designed for operations managers and team leads who need a live view of what's moving, what's overdue, and where the recurring problems are — without pulling reports by hand or waiting on an analyst.</p>
+    </div>
+    <div>
+      <ul class="feature-list">
+        <li>Pre-built dashboards for common operational metrics</li>
+        <li>Custom dashboard builder with drag-and-drop layout</li>
+        <li>Live data — no scheduled refresh, no stale snapshots</li>
+        <li>Threshold alerts via email or webhook</li>
+        <li>Shareable read-only views for stakeholders without platform access</li>
+        <li>Export to CSV, PDF, or scheduled email delivery</li>
+        <li>Role-based visibility — teams see their data, not each other's</li>
+        <li>Available as an add-on to any AxiomFlow subscription</li>
+      </ul>
+    </div>
+  </div>
+
+  <!-- AxiomSync -->
+  <div class="product-feature legacy">
+    <div>
+      <span class="product-badge end-of-sale">End of Sale</span>
+      <h3>AxiomSync</h3>
+      <p>Legacy data integration layer for connecting older systems — primarily pre-2015 ERP installations and proprietary shop-floor software — to AxiomFlow where modern API connectors aren't available.</p>
+      <p>AxiomSync has been end-of-sale since 2021. It remains in active maintenance for existing customers on legacy contracts. No new deployments are supported.</p>
+      <p>Customers still on AxiomSync are encouraged to discuss migration options with their account contact. The migration path to native AxiomFlow connectors is well-documented and typically takes one to two quarters depending on integration complexity.</p>
+    </div>
+    <div>
+      <ul class="feature-list">
+        <li>File-based and database-level integration for legacy systems</li>
+        <li>Scheduled sync jobs with configurable polling intervals</li>
+        <li>Transform and mapping layer for data normalization</li>
+        <li>Error logging and alerting for failed sync events</li>
+        <li>Maintained for existing customers through end of current contract terms</li>
+      </ul>
+      <p style="margin-top: 1.5rem; font-size: 0.85rem; color: var(--muted);">If you are an AxiomSync customer and have questions about your contract or migration timeline, contact your account representative directly.</p>
+    </div>
+  </div>
+
+  <hr class="section-divider">
+
+  <section style="margin-bottom: 2rem;">
+    <p class="section-label">Deployment</p>
+    <h2 class="section-title">How it runs</h2>
+    <p class="section-intro">AxiomFlow is designed to run in your environment — not ours. We support private cloud and on-premise deployments for customers with data residency or security requirements that preclude multi-tenant SaaS.</p>
+
+    <div class="card-grid">
+      <div class="card">
+        <div class="card-icon">🏗️</div>
+        <h3>On-Premise</h3>
+        <p>Full installation in your data centre. You own the stack. We provide the software, the documentation, and the support. Suitable for customers with strict data residency requirements or existing on-prem infrastructure.</p>
+      </div>
+      <div class="card">
+        <div class="card-icon">☁️</div>
+        <h3>Private Cloud</h3>
+        <p>Deployed in your cloud tenancy (AWS, Azure, or GCP). Single-tenant. Your VPC, your keys, your audit logs. We handle the application layer; you retain control of the infrastructure.</p>
+      </div>
+      <div class="card">
+        <div class="card-icon">🤝</div>
+        <h3>Managed Hosting</h3>
+        <p>For customers who want the isolation of a private deployment without the operational overhead, we offer managed single-tenant hosting in our infrastructure. Contact sales for availability.</p>
+      </div>
+    </div>
+  </section>
+
+  <div class="cta-banner">
+    <h2>See it running in your scenario</h2>
+    <p>We'll walk through a demo built around your actual processes, not a generic workflow that happens to look impressive on a projector.</p>
+    <a href="about.html#contact" class="btn btn-primary">Request a Demo</a>
+  </div>
+
+</main>
+
+<footer>
+  <div class="footer-logo">
+    <img src="assets/logo.png" alt="Axiom Works">
+    <span>Axiom Works</span>
+  </div>
+  <p>&copy; 2025 Axiom Works, Inc. All rights reserved. &nbsp;·&nbsp; <a href="about.html">About</a> &nbsp;·&nbsp; <a href="products.html">Products</a> &nbsp;·&nbsp; <a href="people.html">Our Team</a></p>
+</footer>
+
+</body>
+</html>
@@ -0,0 +1,377 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --navy:    #1b3558;
+  --navy-dk: #112240;
+  --blue:    #2563a0;
+  --blue-lt: #3b82c4;
+  --bg:      #f4f6f9;
+  --white:   #ffffff;
+  --text:    #1a1f2e;
+  --muted:   #6b7280;
+  --border:  #d1d9e6;
+  --shadow:  0 1px 4px rgba(0,0,0,.10), 0 4px 16px rgba(0,0,0,.06);
+  --r:       6px;
+  --max:     1100px;
+}
+
+body {
+  font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--text);
+  background: var(--bg);
+}
+
+a { color: var(--blue); text-decoration: none; }
+a:hover { text-decoration: underline; }
+img { display: block; max-width: 100%; }
+
+/* ── NAV ─────────────────────────────────────────── */
+nav {
+  background: var(--navy-dk);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.nav-inner {
+  max-width: var(--max);
+  margin: 0 auto;
+  padding: 0 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 2.5rem;
+  height: 60px;
+}
+
+.nav-logo {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  text-decoration: none;
+}
+
+.nav-logo img { height: 32px; width: 32px; border-radius: 4px; }
+
+.nav-logo span {
+  color: #ffffff;
+  font-size: 1.05rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.nav-links {
+  display: flex;
+  gap: 0;
+  list-style: none;
+  margin-left: auto;
+}
+
+.nav-links a {
+  display: block;
+  color: rgba(255,255,255,.78);
+  font-size: 0.9rem;
+  padding: 0 1rem;
+  line-height: 60px;
+  letter-spacing: 0.01em;
+  transition: color .15s, background .15s;
+}
+
+.nav-links a:hover,
+.nav-links a.active { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
+
+/* ── HERO ────────────────────────────────────────── */
+.hero {
+  background: linear-gradient(135deg, var(--navy-dk) 0%, var(--navy) 55%, var(--blue) 100%);
+  color: #fff;
+  padding: 6rem 1.5rem 5rem;
+  text-align: center;
+}
+
+.hero-inner { max-width: 680px; margin: 0 auto; }
+
+.hero-eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  font-size: 0.8rem;
+  color: rgba(255,255,255,.6);
+  margin-bottom: 1rem;
+}
+
+.hero h1 {
+  font-size: clamp(2.2rem, 5vw, 3.4rem);
+  font-weight: 700;
+  line-height: 1.15;
+  margin-bottom: 1.25rem;
+}
+
+.hero p {
+  font-size: 1.15rem;
+  color: rgba(255,255,255,.82);
+  margin-bottom: 2.25rem;
+  max-width: 520px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.btn {
+  display: inline-block;
+  padding: 0.8rem 2rem;
+  border-radius: var(--r);
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: filter .15s;
+}
+
+.btn:hover { filter: brightness(1.1); text-decoration: none; }
+
+.btn-primary { background: #fff; color: var(--navy); }
+.btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.5); margin-left: 0.75rem; }
+
+/* ── PAGE WRAPPER ────────────────────────────────── */
+.page { max-width: var(--max); margin: 0 auto; padding: 3.5rem 1.5rem 5rem; }
+
+/* ── SECTION HEADINGS ────────────────────────────── */
+.section-label {
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  font-size: 0.75rem;
+  color: var(--blue);
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+h2.section-title {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: var(--navy-dk);
+  margin-bottom: 0.75rem;
+}
+
+.section-intro {
+  color: var(--muted);
+  max-width: 580px;
+  margin-bottom: 2.5rem;
+}
+
+/* ── CARDS ───────────────────────────────────────── */
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+}
+
+.card {
+  background: var(--white);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  padding: 1.75rem;
+  box-shadow: var(--shadow);
+}
+
+.card-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 8px;
+  background: var(--navy);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1.1rem;
+  font-size: 1.3rem;
+}
+
+.card h3 { font-size: 1.1rem; font-weight: 600; color: var(--navy-dk); margin-bottom: 0.5rem; }
+.card p  { font-size: 0.9rem; color: var(--muted); line-height: 1.6; }
+
+.card-tag {
+  display: inline-block;
+  margin-top: 1rem;
+  padding: 0.2rem 0.6rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  background: #e8f0fb;
+  color: var(--blue);
+}
+
+.card-tag.legacy { background: #f0f0f0; color: var(--muted); }
+
+/* ── PEOPLE GRID ─────────────────────────────────── */
+.people-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 2rem;
+}
+
+.person-card {
+  background: var(--white);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  padding: 1.75rem 1.5rem;
+  box-shadow: var(--shadow);
+  text-align: center;
+}
+
+.person-photo {
+  width: 110px;
+  height: 110px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin: 0 auto 1.1rem;
+  border: 3px solid var(--border);
+}
+
+.person-initial {
+  width: 110px;
+  height: 110px;
+  border-radius: 50%;
+  background: var(--navy);
+  color: #fff;
+  font-size: 2rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 1.1rem;
+}
+
+.person-card h3 { font-size: 1rem; font-weight: 600; color: var(--navy-dk); margin-bottom: 0.25rem; }
+.person-card .title { font-size: 0.82rem; color: var(--blue); font-weight: 500; margin-bottom: 0.5rem; }
+.person-card p { font-size: 0.83rem; color: var(--muted); line-height: 1.55; }
+
+/* ── ABOUT SECTIONS ──────────────────────────────── */
+.about-block {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  align-items: start;
+  margin-bottom: 3.5rem;
+}
+
+@media (max-width: 720px) {
+  .about-block { grid-template-columns: 1fr; gap: 2rem; }
+}
+
+.about-block h2 { font-size: 1.55rem; font-weight: 700; color: var(--navy-dk); margin-bottom: 1rem; }
+.about-block p  { color: var(--muted); margin-bottom: 0.9rem; font-size: 0.95rem; }
+
+.stat-row { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 2rem; }
+
+.stat { text-align: center; }
+.stat-num { font-size: 2rem; font-weight: 700; color: var(--navy); display: block; }
+.stat-lbl { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
+
+.values-list { list-style: none; }
+.values-list li {
+  padding: 1rem 1.2rem;
+  border-left: 3px solid var(--blue);
+  margin-bottom: 1rem;
+  background: var(--white);
+  border-radius: 0 var(--r) var(--r) 0;
+  box-shadow: var(--shadow);
+}
+
+.values-list li strong { display: block; color: var(--navy-dk); margin-bottom: 0.2rem; font-size: 0.95rem; }
+.values-list li span { font-size: 0.87rem; color: var(--muted); }
+
+/* ── PRODUCT DETAIL ──────────────────────────────── */
+.product-feature {
+  display: grid;
+  grid-template-columns: 1fr 1.5fr;
+  gap: 2.5rem;
+  align-items: start;
+  background: var(--white);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  padding: 2rem;
+  margin-bottom: 1.5rem;
+  box-shadow: var(--shadow);
+}
+
+@media (max-width: 640px) {
+  .product-feature { grid-template-columns: 1fr; }
+}
+
+.product-feature.legacy { opacity: 0.7; }
+
+.product-badge {
+  display: inline-block;
+  padding: 0.35rem 0.9rem;
+  border-radius: 4px;
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  background: #e8f0fb;
+  color: var(--blue);
+  margin-bottom: 0.8rem;
+}
+
+.product-badge.main { background: var(--navy); color: #fff; }
+.product-badge.end-of-sale { background: #f0f0f0; color: var(--muted); }
+
+.product-feature h3 { font-size: 1.3rem; font-weight: 700; color: var(--navy-dk); margin-bottom: 0.5rem; }
+.product-feature p  { color: var(--muted); font-size: 0.92rem; line-height: 1.6; margin-bottom: 0.9rem; }
+
+.feature-list { list-style: none; }
+.feature-list li {
+  font-size: 0.88rem;
+  color: var(--muted);
+  padding: 0.3rem 0;
+  padding-left: 1.2rem;
+  position: relative;
+}
+.feature-list li::before { content: "✓"; position: absolute; left: 0; color: var(--blue-lt); font-weight: 700; }
+
+/* ── BANNER ──────────────────────────────────────── */
+.cta-banner {
+  background: linear-gradient(135deg, var(--navy-dk), var(--blue));
+  color: #fff;
+  border-radius: var(--r);
+  padding: 3rem 2rem;
+  text-align: center;
+  margin-top: 3rem;
+}
+
+.cta-banner h2 { font-size: 1.6rem; margin-bottom: 0.75rem; }
+.cta-banner p  { color: rgba(255,255,255,.75); margin-bottom: 1.5rem; }
+
+/* ── FOOTER ──────────────────────────────────────── */
+footer {
+  background: var(--navy-dk);
+  color: rgba(255,255,255,.5);
+  font-size: 0.82rem;
+  text-align: center;
+  padding: 2rem 1.5rem;
+  margin-top: 0;
+}
+
+footer a { color: rgba(255,255,255,.6); }
+footer .footer-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+footer .footer-logo img { height: 22px; width: 22px; opacity: 0.8; }
+footer .footer-logo span { color: rgba(255,255,255,.75); font-weight: 600; font-size: 0.9rem; }
+
+/* ── PAGE HEADER (inner pages) ───────────────────── */
+.page-header {
+  background: linear-gradient(135deg, var(--navy-dk), var(--navy));
+  color: #fff;
+  padding: 3.5rem 1.5rem;
+  text-align: center;
+}
+
+.page-header h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 0.5rem; }
+.page-header p  { color: rgba(255,255,255,.7); font-size: 1rem; max-width: 540px; margin: 0 auto; }
+
+/* ── DIVIDER ─────────────────────────────────────── */
+.divider { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; }
+
+hr.section-divider { border: none; border-top: 1px solid var(--border); margin: 3rem 0; }