feat: IMAP mail sync with thread-to-contact matching (PRD §6.1)

Real IMAP connection via imapflow library:
- Connects to IMAP server (IMAPFlow, TLS on port 993)
- Fetches recent messages (configurable limit, default 20)
- Extracts: from, fromEmail, subject, date, snippet (200 chars)
- Thread-to-contact matching (PRD §6.1):
  1. Match sender email against persons table
  2. If no person match, extract domain and match against company.website
  3. Returns matchedCompany + matchedPerson for each email
- Audit-logged (action: crm.mailsync:imap)
- Zod validated (host, port, user, password, folder, limit)
- 502 on IMAP connection failure with detail
- 400 on validation failure

Tested: invalid creds → 502 'IMAP connection failed', missing host → 400

skills/design/design-templates/social-card-swiss/references/portrait-fill.md

@@ -0,0 +1,85 @@
+# Portrait Fill Rules
+
+3:4 social images have much more vertical space than a horizontal PPT slide. A layout that works in 16:9 often becomes a thin strip in 3:4. Solve that at the planning stage.
+
+## Vertical Zones
+
+Think of a 1080x1440 Rednote image as five zones:
+
+| Zone | Typical Height | Role |
+| --- | --- | --- |
+| Header/meta | 56-90px | issue label, category, page |
+| Title/lead | 240-420px | hook and claim |
+| Evidence/body | 520-760px | image, ledger, diagram, comparison |
+| Bottom strip | 90-180px | captions, checklist, summary |
+| Footer | 52-86px | issue/page metadata |
+
+Not every page needs all five, but every page needs an intentional vertical composition.
+
+## Underfilled Page Smells
+
+Revise if:
+
+- A table or ledger occupies less than 45% of the canvas height.
+- The lower 25% of the page is empty without being an atmospheric hero page.
+- Four list items are rendered as short rows with large blank space below.
+- A screenshot is small even though it is the evidence.
+- Body copy is centered in the middle with no top/bottom rhythm.
+
+## Fixes For Thin Tables
+
+When a table is too short:
+
+1. Increase row height to 118-170px.
+2. Add a left marginal column with large numbers, keywords, or category labels.
+3. Add a pull quote column beside the table.
+4. Add a top or bottom issue strip with 2-3 consequences.
+5. Convert the table to M08 Tall Ledger.
+6. If there are only 2-3 points, use M04 Pull Quote or M09 Atmospheric Thesis instead of a table.
+
+## Fixes For Sparse Text
+
+If a page has only one core sentence:
+
+- Use M09 Atmospheric Thesis with visible WebGL/ink background.
+- Make the sentence the hero, not a small paragraph.
+- Add one small source/context row.
+- Use dark/ink page if the package needs rhythm.
+
+## Fixes For Screenshot Pages
+
+If screenshot content matters:
+
+- Give it 45%-65% of the page height.
+- Put only one key sentence above it.
+- Use a bottom caption band instead of a side paragraph.
+- Crop carefully; preserve readable UI labels.
+
+## Page Rhythm
+
+For a 7-page Rednote set, use at least 5 distinct shapes:
+
+- Cover / feature image.
+- Essay split.
+- Tall ledger.
+- Evidence screenshot.
+- Pull quote or atmospheric thesis.
+- Checklist/comparison.
+- Closing note.
+
+Avoid repeating `title + lead + 3 rows` more than twice in one set.
+
+## Minimum Occupancy
+
+As a rough rule, the active composition should occupy at least 78% of the page height.
+
+This can include:
+
+- Large type.
+- Images/screenshots.
+- Ledger rows.
+- Background atmosphere on hero pages.
+- Caption bands.
+- Marginalia columns.
+
+Whitespace is good only when it is designed. Empty leftover space is not.