Pare site to three Flexion Solutions offerings (#16)

* docs(spec): pare home page to three Flexion Solutions offerings

Design doc covering the content-driven featured-labs restructuring,
hidden /work/ routes, and nav simplification for this pass.

* docs(plan): implementation plan for pare-down-to-solutions

Bite-sized, TDD-style task list that turns the approved spec into
commits — add featured-lab content, loader, LabCard, home rewrite,
nav update, route gating, and overlay cleanup.

* chore(docs): move specs and plans from docs/superpowers/ into notes/

Matches the project's existing convention where notes/specs/ and
notes/plans/ hold ephemeral planning artifacts, while docs/ is for
durable behavioral documentation.

* feat(content): add featured labs source files

* feat(build): add featured-lab content loader

* feat(design): add LabCard component

* fix(design): register lab-card styles in index.css

* feat(design-system): register LabCard example

* feat(content): expand home front-matter with subtitle, intro, learn-more

* feat(home): rewrite home page with featured labs and learn-more row

* test(home): rewrite view and loader tests for new layout

* feat(header): drop Work, add Home to primary nav

* feat(routes): hide /work directory from the public site

* chore(content): remove work overlay files

* docs: update featured-content guide for the new content type

* fix(docs): unwrap stray outer code fence in featured-content.md

* fix(footer): drop broken Work link, link Home instead

* feat(home): fix learn-more grid, link About to flexion.us, remove /about/

Three review fixes rolled into one:

- The Learn more grid defined itself as a `container-type: inline-size`
  container, so the nested `@container (min-width: 48rem)` column rule
  could never match against its own container. Swap to a media query at
  48rem so the two teasers lay out horizontally on desktop.
- The "Learn about Flexion" teaser now links to https://flexion.us/
  instead of the local /about/ page.
- Remove the /about/ page entirely: delete content/about.md and
  src/pages/about.tsx, drop the route from allRoutes, drop About from
  header and footer nav, and update smoke, a11y, home, and routes tests
  to match.

* feat(lab-card): horizontal band layout with typed, grouped links

Rework the featured-labs cards on the home page to address two UX issues:

**Link differentiation.** Every link now carries a `kind` of `demo`,
`repo`, or `case-study`, rendered with a recognizable inline icon
(globe, GitHub mark, document). Labels shorten to "Live demo",
"Repository", "Case study" — the icons do the category work.

**Sub-project grouping.** Links accept an optional `group` name. When
set, same-group links render under a small uppercase heading. Forms Lab
now makes its two distinct projects (production Platform vs. the
experiment) visually explicit.

**Horizontal band layout.** The card becomes a two-column grid above
40rem (container query) — intro on the left, grouped link panel on the
right. On narrow viewports it stacks. The home page's featured list is
also capped at 72rem so desktop bands don't stretch edge-to-edge.

Schema: `links: [{label, url, kind, group?}]`. Updated the three content
files, loader, loader tests, LabCard component + styles + examples,
LabCard view tests, and docs/featured-content.md.

* fix(lab-card): stack links vertically, right-align in horizontal mode

Two defects reported on the home page:

- Links weren't right-aligned. The link column sat in the right grid
  track but its flex children aligned to the column's start, so the
  block hugged the center gutter.
- The second link in a group appeared slightly lower. The list was
  flex-wrap with a row gap; two-link groups would wrap unpredictably
  when the label widths were close to the column width.

Switch the link list to a vertical stack. In horizontal-band mode
(container ≥40rem), right-align each group and its anchors with
flex-end + text-align: end. On narrow stacked cards, default start
alignment is preserved so the link list reads naturally below the
intro.

* content(commitment): update open source commitment to 2026-03-23 draft

Replace the prior commitment prose with the revised working draft from
the convergence meeting: tighter framing around resilience, a single
"We're open by default" section with a bulleted list of why Flexion is
committed to open source, and a closing paragraph on public benefit.

Preserves existing markdown conventions (h1 title, italic status line,
h2 section, markdown bullets rendered through the ContentPage pipeline).

* feat(lab-card): rework as title-on-top with one column per link

Replace the horizontal-band layout with a column-per-link design:

- Title and tagline sit on top; a horizontal row of columns sits below,
  separated by a subtle top border on the columns row.
- Each column heads with an uppercase kind label ("Demo", "Repository",
  "Case study"), followed by the icon-prefixed link itself.
- Columns flow responsively via container queries: 1 column → 2 at
  32rem → 4 at 56rem. This keeps Forms Lab's four links on a single
  row on desktop while single-link cards remain compact.
- The link `label` is now the project/repo identifier (what you're
  linking to) rather than the action, since the action is carried by
  the column heading.
- Drop the now-unneeded `group` field from the content schema and
  loader. Labels absorb the sub-project identity ("Forms Platform",
  "Forms Lab (experiment)") without a separate grouping construct.

* feat(lab-card): group columns by kind, not per-link

Rework the column layout so each column represents a distinct link
kind (Demo, Repository, Case study), with same-kind links stacking
vertically within the column in document order.

This makes the Forms Lab card read cleanly — one "Demo" column with
Forms Platform above Forms Lab (experiment), one "Repository" column
with flexion/forms above flexion/forms-lab. Matching list positions
across columns refer to the same project. Headings no longer repeat,
so they carry real categorical weight.

Other cards adjust naturally: Messaging has one Repository column,
Document Extractor has Repository and Case study columns.

- `LabCard`: groups links by kind, preserves per-kind document order,
  emits one column per present kind in fixed order (Demo → Repository
  → Case study).
- Styles: columns container auto-fits at 14rem minimum above 32rem;
  stacks below. Inner link list is a vertical flex stack with the
  icon-prefixed anchors.
- Update home and component view tests to match; update the home test
  fixture to include the required `kind` field.
- Update docs/featured-content.md to describe the group-by-kind layout.

* content(commitment): drop working-draft status line

Remove the "Status: Working draft reflecting all 10 strategic decisions
confirmed as of the 2026-03-23 convergence meeting..." line from the
commitment page.

* fix(lab-card): align links across columns via subgrid

Problem: when links grouped by kind sat in side-by-side columns, the
second-row link in one column could sit slightly lower than its
sibling in the next column. Each column was its own layout context,
so rows didn't share heights across siblings — a short label on the
left and a long label on the right wouldn't align.

Fix: switch .lab-card__column to a CSS subgrid inheriting rows from
.lab-card__columns, so heading + each link row share heights across
all columns. Compute --lab-card-rows = max(link count per kind) from
JSX so the outer grid defines enough tracks.

Also flatten the per-column markup: the inner <ul> wrapper around the
link list is gone, since each column now lays out via grid rows
directly.

Author: danielnaab

content/about.md

@@ -2,51 +2,25 @@
 title: Open source commitment
 ---
 
-# Flexion Labs open source commitment
+# Flexion's open source commitment
 
-*Status: Working draft. Pending delivery leadership and ownership group review.*
+Flexion has always worked differently. How we work is what distinguishes us. Our commitment to open source is part of how we create value. Open source enables long-term resilience, and the Flexion approach to development prioritizes resilience. We know that our customers may need to pivot at any moment, and we want them to be able to adapt to changing conditions.
 
-## Why we value openness
+Our competitive advantage comes from delivery expertise and proven capabilities, not from hiding code. We compete by being better at building, deploying, and supporting solutions, not by locking them down.
 
-Open source solves practical problems. For the government agencies we serve, it eliminates vendor lock-in, reduces sustainability risk, and lowers total cost of ownership. For Flexion, it creates options — the freedom to build on proven foundations, to redirect resources from infrastructure to the problems that matter, and to demonstrate technical capability in ways closed projects never can.
+## We're open by default
 
-Transparency improves quality. When code is open, more eyes find more bugs. Agencies and oversight bodies can audit how public systems work. The discipline of building in the open — knowing anyone can read the code — raises the bar for the work itself.
+Flexion's code, architecture, and interfaces are open unless there's a reason they can't be, such as security concerns or client requirements. Once we release something as open source, it remains available under that license.
 
-Openness compounds value across jurisdictions. Investment in one agency's solution becomes infrastructure that others can adopt. This commons-building isn't overhead — it's how we create defensible competitive advantage while empowering agencies to control their technology. Open source attracts talent who value transparency and civic impact, and contributors can become hires.
+Flexion is committed to open source because open source:
 
-Openness also makes sense for the public. Publicly funded work should create reusable public infrastructure. Citizens benefit from transparency into the systems that serve them. And when agencies embrace open source, the result is higher public satisfaction with government technology. We don't ask anyone to take our word for it — the code is there to inspect, use, and build on.
+- Eliminates vendor lock-in, reduces sustainability risk, and lowers total cost of ownership for our customers.
+- Creates options, with the freedom to build on proven foundations.
+- Allows us to redirect resources from infrastructure to the problems that matter.
+- Improves quality by letting more eyes find more bugs.
+- Compounds value, by allowing investment in one solution to become infrastructure that others can adopt.
+- Attracts talent who value transparency and civic impact.
 
-## What we commit to
+Openness also makes sense for the public. Publicly funded work should create reusable public infrastructure. Citizens benefit from transparency into the systems that serve them. And when agencies embrace open source, the result is higher public satisfaction with government technology.
 
-We are open by default. Code, architecture, and interfaces are open unless there's a specific reason otherwise — security concerns, client requirements, or competitive considerations. We will never take an open source project to a closed model. Once we release something as open source, it remains available under that license.
-
-We use licensing appropriate to each project's context. Government-funded work uses public domain (CC0) to maximize reuse and avoid contractual friction. Commercial client work follows client preferences, typically proposing public domain. For projects where Flexion makes significant independent investment and maintains long-term stewardship, we use permissive open source licenses (Apache 2.0) with contributor agreements that preserve flexibility for the project's future. Small enhancements to existing open source projects follow those projects' conventions.
-
-We commit to clear, professional repository standards: proper documentation, contributor guidance, legal terms, and getting-started materials. Code alone isn't enough — a project that's hard to understand or adopt isn't truly open.
-
-Our competitive advantage comes from delivery expertise and proven capabilities, not from hiding code. We compete by being better at building, deploying, and supporting solutions — not by locking them down.
-
-## How we operate
-
-We develop in the open for projects intended to be open source. Public by default means the work is visible from the start, not just after delivery. We are mindful of security considerations and maintain clear vulnerability disclosure processes.
-
-We govern our projects incrementally, starting with Flexion authority and evolving toward broader community governance as projects mature and attract use. For client work, the governance model depends on context — for traditional client engagements, operational decisions belong to the empowered client; for Flexion Solutions, Flexion governs directly.
-
-Contribution processes are documented and all work is done through pull requests. We welcome contributions with clear guidance. We build our stewardship practices by dogfooding them on internal projects first, so we learn what works before applying it externally.
-
-We recognize that governance stagnation — projects going dormant because no one takes ownership — is a primary risk of open source. We address this through honest communication about support levels, explicit project tiers, and a commitment to never let projects silently decay. If a project is no longer actively maintained, we say so clearly.
-
-## What we steward
-
-We recognize that resources are finite and not all projects warrant the same level of investment. We support a tiered approach to stewardship, with honest communication about what we will and won't provide for each project.
-
-For actively maintained projects, we commit to security patch management and defined response commitments. For projects available as-is, we say so clearly. We don't over-promise maintenance. Abandoned repositories damage credibility and create a security risk — if we can't maintain something, we explicitly archive it rather than letting it decay silently.
-
-Open source work is funded primarily through consulting engagements with clients who value openness. We also make strategic investments in projects where the business case warrants it — where open source creates market opportunities, builds community, or strengthens civic infrastructure. Different projects use different funding models: traditional hourly billing, retainers, maintenance within team structures, grants, and partnerships.
-
-## Maintenance tiers
-
-- **Active** — Flexion commits to security patch management and defined response commitments. Bug reports are triaged. Pull requests are reviewed on a predictable cadence.
-- **As-is** — Available without active maintenance. The code works (or worked at one point); future updates are not promised.
-- **Archived** — No longer maintained. The GitHub archive flag is set. The repo is read-only. Listed for transparency.
-- **Unreviewed** — A human has not yet classified this repo. Defaults to this state; visible on the site so gaps are honest.
+We don't ask anyone to take our word for it. The code is there to inspect, use, and build on.

content/commitment.md

@@ -0,0 +1,12 @@
+---
+title: Document Extractor Lab
+tagline: Accurately extract data from PDFs and images for faster application processing.
+order: 3
+links:
+  - label: flexion/document-extractor
+    url: https://github.com/flexion/document-extractor
+    kind: repo
+  - label: Flexion case study
+    url: https://flexion.us/case-study/document-extraction-for-faster-processing/
+    kind: case-study
+---

content/featured/document-extractor-lab.md

@@ -0,0 +1,18 @@
+---
+title: Forms Lab
+tagline: Digitize forms to create modern, accessible experiences for public outreach.
+order: 1
+links:
+  - label: Forms Platform
+    url: https://pp4cc7kwbf.us-east-1.awsapprunner.com/
+    kind: demo
+  - label: flexion/forms
+    url: https://github.com/flexion/forms
+    kind: repo
+  - label: Forms Lab (experiment)
+    url: https://ec2-34-197-222-16.compute-1.amazonaws.com/
+    kind: demo
+  - label: flexion/forms-lab
+    url: https://github.com/flexion/forms-lab
+    kind: repo
+---

content/featured/forms-lab.md

@@ -0,0 +1,9 @@
+---
+title: Messaging Lab
+tagline: Text messaging services to deliver critical updates to the people you serve.
+order: 2
+links:
+  - label: flexion/flexion-notify
+    url: https://github.com/flexion/flexion-notify
+    kind: repo
+---

content/featured/messaging-lab.md

@@ -1,4 +1,19 @@
 ---
-hero: What we build in the open.
-intro: Flexion Labs gathers our open source work in one place — products we steward, tools we share, and the commitment behind them.
+title: Flexion Labs
+subtitle: Solutions for the public, in the open
+intro: |
+  Flexion is committed to excellence in civic technology. We are also
+  committed to transparency. As part of that commitment, Flexion Labs
+  is featuring some of the tools we've developed.
+
+  These are yours to fork and use. Or [reach out to us](https://flexion.us/contact-us/)
+  about an engagement. Instead of starting from zero, we can leverage existing
+  Flexion Labs work to allow us to more quickly build what you need.
+learnMore:
+  commitment: |
+    Flexion is open by default. Unless there's a specific reason we can't,
+    we develop in the open.
+  about: |
+    We help organizations stay future-ready by building high-quality, adaptive
+    software solutions that are easy to use, modify, and modernize.
 ---