feat(site): promote the "who it's for" section to production

site/src/landing/app.jsx

@@ -2,7 +2,7 @@ import { CixAscii } from '../shared/ascii.jsx';
 import { Foot } from '../shared/foot.jsx';
 import { SERVER_VERSION, CLI_VERSION, GITHUB_URL } from '../shared/versions.js';
 import { HeroTerminal } from './terminal.jsx';
-import { Why, Features, Playground, Workspaces, Agent, CaseStudy, QuickStart, FAQ } from './sections.jsx';
+import { Fit, Why, Features, Playground, Workspaces, Agent, CaseStudy, QuickStart, FAQ } from './sections.jsx';
 
 export function App() {
   return (
@@ -11,6 +11,7 @@ export function App() {
       <main>
         <Hero />
         <div className="zigzag" />
+        <Fit />
         <Why />
         <Features />
         <Playground />

site/src/landing/sections.jsx

@@ -3,6 +3,44 @@ import { WorkspaceDemo } from './workspace-demo.jsx';
 import { GITHUB_URL, PLUGIN_VERSION } from '../shared/versions.js';
 import { TeamDiagram } from '../shared/team-diagram.jsx';
 
+const FIT = [
+  { title: 'Your agent should already know the codebase.',
+    body: <>No pasted file paths, no “read these first”. Hooks nudge Claude toward the index and the skills teach it the five search modes — context arrives with the question instead of after three rounds of prompting.</> },
+  { title: 'You research code you didn’t write.',
+    body: <>Large, unfamiliar, half-remembered — the kind of repo where nobody agrees what a thing is called. Ask in plain language, get ranked <code>file:line</code> answers back.</> },
+  { title: 'You are writing the spec before the code.',
+    body: <>Scoping work means knowing what already exists, where the new thing plugs in and what it breaks. Find the touchpoints, walk the references, and write the ticket against the codebase instead of against memory.</> },
+  { title: 'You are doing a security pass.',
+    body: <>cix does not scan for CVEs — it finds everything worth scanning. Where input is parsed, where secrets are read, which callsites actually reach the function you are worried about.</> },
+  { title: 'Your system is a dozen services in a dozen repos.',
+    body: <>Group them into a workspace and search the union: hybrid BM25 + dense ranking surfaces the services involved, then defs and refs drill into the one that owns the answer.</> },
+  { title: 'Your team is spread out. So are its agents.',
+    body: <>One shared server rather than a per-seat sidecar: the same index for every developer, terminal and agent, with roles, view-groups and per-user API keys deciding who sees what.</> },
+];
+
+export function Fit() {
+  return (
+    <section className="section" id="fit">
+      <div className="wrap">
+        <div className="section-head">
+          <span className="eyebrow">Who it's for</span>
+          <h2>If any of this is your week,<br/>cix was built for it.</h2>
+          <p className="lead">Six situations it was made for — and one server behind all of them.</p>
+        </div>
+        <div className="why-grid">
+          {FIT.map(({ title, body }) => (
+            <div className="card fit-card" key={title}>
+              <span className="mark" aria-hidden>→</span>
+              <h3>{title}</h3>
+              <p>{body}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
 export function Why() {
   return (
     <section className="section" id="why">

site/src/styles.css

@@ -681,6 +681,20 @@ h3 { font-size: clamp(20px, 2vw, 24px); }
 .why-card h3 { font-size: 22px; margin-bottom: 8px; }
 .why-card p { color: var(--ink-soft); margin: 0; font-size: 15px; }
 
+/* Who it's for — same grid as Why, quieter marker so the two sections
+   don't read as one long numbered list. */
+.fit-card { padding: 28px; }
+.fit-card .mark {
+  font-family: var(--font-display);
+  font-size: 30px;
+  color: var(--red);
+  line-height: 1;
+  display: block;
+  margin-bottom: 12px;
+}
+.fit-card h3 { font-size: 20px; margin-bottom: 8px; }
+.fit-card p { color: var(--ink-soft); margin: 0; font-size: 15px; }
+
 /* Features grid */
 .feat-grid {
   display: grid;