@palate/cli 0.0.0-stage → 0.0.2

package/kb/sections/order-ahead-ticket.md

@@ -0,0 +1,119 @@
+---
+id: order-ahead-ticket
+name: Order ahead on a paper order slip
+kind: signup
+shape: form-led
+layout: "the pre-order form drawn as a paper order slip or kitchen ticket on the page ground: items with quantity steppers and prices, pickup day and window, name and phone, a running total in tabular figures; the cut-off stated plainly beside it; on submit the slip is stamped with a pickup number"
+fits: [food, local, warm, friendly, crafted, tactile, playful, community]
+avoid: [saas, developer, b2b, enterprise, data-dense-tool]
+needs: ["the real pre-order menu: 4–10 items with prices", "the cut-off and pickup days and windows (e.g. close Thursday 9 pm for Saturday and Sunday)", "how pickup works at the shop (window, name, number)", "a working order endpoint, or a clear statement that this is a request confirmed by text"]
+imagery: texture
+density: balanced
+effort: m
+moves: [tactile-button, layered-paper-depth]
+---
+
+## When it's right
+
+A bakery, café, butcher, florist or restaurant takes orders ahead for pickup, and the page should let a regular do it in one minute. Mabel's Bakehouse: the Saturday queue goes round the block, so regulars pre-order by Thursday 9 pm and skip the queue at the pickup window. Hollow Tree's Saturday pickup, Ember & Oak's Sunday lunch boxes, a butcher's Christmas orders: same shape.
+
+The median build is an app checkout: a stepper (“1 Items · 2 Pickup · 3 Details”), product cards with “Add to cart” buttons, a cart drawer, and a status tracker after. It turns a corner bakery into a delivery app. This archetype makes the form the thing the shop already uses: a paper order slip, with the items printed on it, boxes to fill in, and a total at the bottom. On submit it is stamped.
+
+Not for full e-commerce with shipping (use the shop's checkout), large catalogues (more than ~12 items), or same-hour ordering.
+
+## Structure
+
+```
+1440 ─ container 1240; words cols 1–4, the slip cols 6–11 (about 560px wide), slightly rotated −0.6°
+┌──────────────────────────────────────────────────────────────────────────────────────────┐
+│ H2 "Skip the Saturday queue"         ┌ order slip, paper, --shadow-2 ────────────────┐   │
+│                                      │ MABEL'S · ORDER          No. ____             │   │ ← slip header, caps
+│ Pre-orders close Thursday 9 pm       │ ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ │   │ ← perforation
+│ for Saturday and Sunday pickup.      │ Cardamom bun          £3.40   [ − 2 + ]      │   │ ← item rows: dot leaders,
+│ ← --t-lead, the one rule             │ Cinnamon knot         £3.20   [ − 0 + ]      │   │   price, stepper
+│                                      │ Country sourdough     £6.50   [ − 1 + ]      │   │
+│ Pick up at the side window on        │ Box of 6 buns        £18.00   [ − 0 + ]      │   │
+│ Great Junction Street. Say your      │ This weekend: brown butter & pear danish     │   │ ← special, handwritten-
+│ name; we'll have your bag ready.     │                       £3.80   [ − 0 + ]      │   │   style note
+│                                      │ ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ │   │
+│ Pay at the window, card or cash.     │ Pick up  ( ) Sat  (•) Sun                    │   │ ← radios as tick boxes
+│ Unclaimed orders go to the Leith     │ Between  [ 8–10 am ▾ ]                       │   │
+│ Community Larder at close.           │ Name     ______________________              │   │ ← underlined fields
+│                                      │ Phone    ______________________              │   │
+│                                      │ ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ │   │
+│                                      │ Total                          £13.30        │   │ ← tabular, bold
+│                                      │ [ Place my order ]                           │   │ ← one primary, tactile
+│                                      └───────────────────────────────────────────────┘   │
+└──────────────────────────────────────────────────────────────────────────────────────────┘
+```
+
+```
+390 ─ side padding 16; rule first, then the slip at full width, no rotation
+┌──────────────────────────────┐
+│ H2                           │
+│ Pre-orders close Thu 9 pm    │
+│ for Sat & Sun pickup.        │
+│ ┌ slip ────────────────────┐ │
+│ │ MABEL'S · ORDER          │ │
+│ │ Cardamom bun   £3.40     │ │
+│ │           [ − 2 + ]      │ │ ← stepper under the name
+│ │ …                        │ │   when the row is tight
+│ │ Pick up (•)Sat ( )Sun    │ │
+│ │ Name ______________      │ │
+│ │ Phone ______________     │ │
+│ │ Total          £13.30    │ │
+│ │ [ Place my order ] full  │ │
+│ └──────────────────────────┘ │
+│ pickup and payment, 3 lines  │
+└──────────────────────────────┘
+```
+
+At 390 the cut-off line comes first, then the slip at full width minus the gutter with no rotation; steppers are 44px tall and move under the item name if the row is tight. Inputs are 16px text. The total sticks to the bottom of the slip, not the viewport.
+
+## Finish
+
+- The slip: `--surface` warm paper (a touch warmer than the page ground), radius `--r-sm` (paper has small corners), `--shadow-2` so it lies on the page, paper fibre texture at 4–6% (`_finish.md` textures; move `layered-paper-depth`). Rotation −0.4° to −0.8° at 1440 only, never on the inputs' hit areas in a way that misaligns focus rings (rotate the slip wrapper; focus rings follow).
+- Header: shop name and “ORDER” in caps `--t-caption` +0.08em, a “No. ____” blank top right that is filled on confirmation. Perforations as a dashed 1px `--hairline-strong` line (`border-top: 1px dashed`), or a CSS-drawn torn edge at the top.
+- Item rows: name `--t-body` `--ink`, a dot leader to the price (`tabular-nums`, `--ink-2`), stepper at the right: two 36–40px round buttons (− and +) with the count between them in `--t-body` weight 600. The stepper looks like pen boxes on paper (1px `--ink` 40% outline), not like app chips. A count above zero darkens the row's name.
+- The weekend special: one line set in a handwriting-like face or the display italic, as if added by hand, with its price.
+- Choices: pickup day as large tick boxes (custom radios styled as square boxes with a pen tick), time window as a native `<select>`, name and phone as underlined fields (no boxes, a 1px `--ink` bottom border, focus thickens it to 2px in `--focus`). Labels sit left of the line like a printed form.
+- Total: `--t-h3`, weight 600, `tabular-nums`, right-aligned to the price column, updates as steppers change.
+- Button: the page's `.btn-primary`, full slip width, with move `tactile-button` (press sinks 1px, shadow tightens). Label: “Place my order”.
+- Words column: `--t-lead` for the cut-off rule; `--t-body` for pickup and payment, max 40ch.
+- Ground: the page's `--paper` or `--paper-2`; the slip is the only raised thing.
+
+## Content
+
+- Real items and prices from the shop, in the order the shop lists them. The special named and priced.
+- The cut-off as a sentence with a day and time. If it has passed, say so and when the next one opens.
+- How pickup works, how to pay, what happens to unclaimed orders.
+- Allergen info as a link to the full list (or a short line: “All our bakes contain wheat, egg and dairy; ask us about nuts”).
+- No account, no password. Name and phone only (email optional for a copy).
+
+## States and motion
+
+- Empty: total £0.00, button disabled with the reason beside it in `--t-small` (“Add something to order”).
+- Sold out item: the row's name struck through with “sold out for Saturday” in `--ink-2`; its stepper disabled.
+- After the cut-off: the slip shows its items but the form is replaced at the bottom by “Orders for this weekend are closed. Come by from 8 am — or order from Friday for next weekend.”
+- Submit: the button shows “Sending…” (no spinner overlay); on success the slip gets its number written in (“No. 042”), a stamp (“PICK UP · SUN 8–10”) rotates in at −8° with a 240ms scale 1.2 → 1 ease-out, and the text below says what to do: “Show this number or say your name at the side window.” Under reduced motion the stamp just appears.
+- Error: the slip stays filled; the message says what failed in words under the button and the phone number to call. Field errors under the field in `--t-small`.
+- No progress tracker after ordering. A text message the day before is enough.
+
+## Pitfalls
+
+- An app checkout: numbered stepper, cart drawer, product cards with “Add to cart”, a status tracker with pills (“Preparing · Ready”). The bakery becomes a delivery app.
+- A receipt UI with a QR code and line-item table in grey boxes.
+- Too much paper effect: coffee stains, heavy torn edges, a rotation big enough to read as broken.
+- Steppers smaller than 36px, or + and − as tiny text.
+- The cut-off hidden in small print under the button.
+- Requiring an account to pre-order buns.
+
+## Floor checks
+
+- Does the order form look like a paper order slip or ticket (warm paper, printed items, filled-in lines) rather than an app checkout?
+- Is the cut-off for ordering stated plainly in words, near the top?
+- Can a visitor choose items, quantities, a pickup day and time, and leave a name and phone, all in one place?
+- Is there a running total in tabular figures, aligned with the prices?
+- Is there exactly one primary action to place the order?
+- Is the section free of step indicators, status pills, cart drawers and receipt-style grey boxes?
+- At 390, is the slip full width and unrotated, with steppers and fields large enough to tap and nothing scrolling sideways?

package/kb/sections/press-strip-quoted.md

@@ -0,0 +1,106 @@
+---
+id: press-strip-quoted
+name: Press strip with the actual lines quoted
+kind: proof
+shape: cards-row
+layout: "2–4 real press mentions side by side, each the publication's name set in type, the line it actually printed, the writer and the date, and a link to the piece; ruled columns on the page ground, no logo wall"
+fits: [food, local, travel, crafted, heritage, editorial, publishing, cultural]
+avoid: [saas, developer, b2b, enterprise]
+needs: ["2–4 real press or review mentions with the exact words printed", "for each: publication, writer if named, date, and a link or issue reference", "permission or fair-use length for each quote (one sentence)"]
+imagery: type
+density: balanced
+effort: s
+---
+
+## When it's right
+
+A restaurant, bakery, inn, shop or studio has been written about, and the line a critic printed says more than anything the place could say about itself. “The best thing I ate this year was a carrot.” (Denver Post on Ember & Oak) or The Scotsman on Mabel's cardamom bun: one sentence with a name under it is proof a visitor believes.
+
+The median page shows an “As seen in” strip of greyed-out newspaper logos: it says nothing, the logos are often used without permission, and the visitor can't tell what was actually said. This archetype quotes the line, names the paper in type, dates it and links to it, like the press clippings pinned by a restaurant's door.
+
+Not for customer testimonials (use `proof-single-honest-quote`), for a single strong review (use that too), or for software products wanting logo proof (use `proof-logo-cloud-with-reasons`). Not with fewer than two real mentions.
+
+## Structure
+
+```
+1440 ─ container 1240; 3 equal columns (2 or 4 when that's what exists), gap 48, hairline rules between
+┌──────────────────────────────────────────────────────────────────────────────────────────┐
+│ small label "Written about us", --t-small ink-2                                          │
+│ ──────────────────────────────────────────────────────────────────────────────────────── │ ← one hairline across
+│ THE DENVER POST           │ 5280 MAGAZINE              │ WESTWORD                         │ ← publication in type,
+│                           │                            │                                  │   caps 13px +0.08em, or
+│ “The best thing I ate     │ “A neighbourhood room      │ “Sit at the counter and          │   its own name in the
+│ this year was a carrot.”  │ that cooks like it's       │ watch the fire.”                 │   display face
+│                           │ trying to impress a        │                                  │ ← quote: --t-h3, display
+│                           │ critic, and doesn't care   │                                  │   face, hanging quote
+│                           │ if you notice.”            │                                  │
+│                           │                            │                                  │
+│ Jane Doe, March 2025      │ Ari Lee, Best New          │ Review, June 2025                │ ← byline: --t-caption,
+│ Read the review ↗         │ Restaurants 2025 ↗         │ Read ↗                           │   ink-2; link
+│ ──────────────────────────────────────────────────────────────────────────────────────── │
+└──────────────────────────────────────────────────────────────────────────────────────────┘
+  1px vertical hairlines between columns; quotes top-aligned; bylines on one baseline
+```
+
+```
+390 ─ side padding 16; one column, ruled
+┌──────────────────────────────┐
+│ Written about us             │
+│ ──────────────────────────── │
+│ THE DENVER POST              │
+│ “The best thing I ate this   │
+│ year was a carrot.”          │
+│ Jane Doe, March 2025 ↗       │
+│ ──────────────────────────── │
+│ 5280 MAGAZINE                │
+│ “A neighbourhood room …”     │
+│ Ari Lee, 2025 ↗              │
+│ ──────────────────────────── │
+└──────────────────────────────┘
+```
+
+At 390 the columns become a ruled list, one mention per block, hairline between. Quotes step down to 20–22px. No horizontal carousel: two to four mentions fit in one phone screen and a half.
+
+## Finish
+
+- Publication name: set in type, not a logo. Either small caps (`--t-caption`, `font-variant-caps: all-small-caps` or uppercase with +0.08em tracking, weight 600, `--ink`) or the page's display face at `--t-body`. A masthead logo only when the publication's licence allows it, and then all of them in one ink colour at the same cap height.
+- Quote: `--t-h3` (22–26px) in the display face or its italic, `--ink`, leading 1.25, `text-wrap: balance`, curly quotes with the opening quote hanging (`_finish.md` hanging punctuation). Max 30 words.
+- Byline: `--t-caption`, `--ink-2`: writer, date (month and year), section if useful (“Best New Restaurants 2025”). The link is a text link with ↗ for off-site pieces.
+- Rules: one 1px `--hairline` above and below the strip, 1px vertical hairlines between columns at full strip height (or none at all, with `--s-7` gaps; pick one). No cards, no shadows, no quote-mark icons in circles.
+- Columns: publication names on one baseline, quotes top-aligned, bylines on one baseline at the bottom (flex column with the byline pushed down), P01.
+- Spacing: label to rule `--s-3`; rule to publication `--s-5`; publication to quote `--s-3`; quote to byline `--s-5`.
+- Ground: `--paper` with the strip quiet; if the brand has a paper texture (move `layered-paper-depth` elsewhere on the page), the strip may sit on a cutting-like slip, but only one.
+- A real rating, if used: in words with its source and count (“4.9 on Tripadvisor from 1,100 reviews”), `--t-small`, beside the label. No row of five gold stars.
+
+## Content
+
+- The exact words printed, trimmed only with an ellipsis, never reworded. One sentence is best; quote length within fair use.
+- Real publications, writers and dates. If the place has been in one paper and two blogs, show those three honestly; don't promote a blog to a “magazine”.
+- Order by what a visitor trusts most, not by date.
+- Link to the piece; if it's print-only, say the issue (“The Scotsman, 12 April 2025, print”).
+- Awards are their own line in the same style (“Statens Byggeskikkpris 2023”), not a badge.
+
+## States and motion
+
+- Static. No marquee of press quotes, no auto-rotating carousel: the visitor reads at their own pace.
+- Links: underline on hover, visible focus ring.
+- A broken link is worse than none: check links at build time and fall back to the issue reference.
+
+## Pitfalls
+
+- “As seen in” followed by six greyed newspaper logos and no words: proves nothing and often isn't licensed.
+- Five gold stars with no count and no source.
+- Quotes reworded into marketing copy (“Simply the best bakery in Edinburgh!”).
+- Quote cards with shadows, avatars and quote-mark icons: SaaS testimonial chrome on a restaurant page.
+- A carousel that hides all but one quote.
+- Undated mentions from years ago presented as current.
+
+## Floor checks
+
+- Are there two to four press mentions, each quoting the actual line printed?
+- Is each publication's name shown in type (or a consistent licensed masthead), not a wall of grey logos?
+- Does each mention carry a byline with writer or date and a link or issue reference?
+- Are the quotes set in readable display type with curly quotation marks?
+- Is the strip free of cards, shadows, star rows without sources, and quote-mark icons in circles?
+- Do the publication names and bylines line up across the columns?
+- At 390, do the mentions stack as a ruled list with nothing scrolling sideways?

package/kb/sections/pricing-comparison-table-sticky.md

@@ -0,0 +1,94 @@
+---
+id: pricing-comparison-table-sticky
+name: Compact comparison table with a sticky header
+kind: pricing
+shape: table
+layout: "a real table of every plan feature grouped by topic; plan names, prices and buttons stick to the top while the rows scroll under them"
+fits: [saas, b2b, enterprise, developer, technical, data-rich, trustworthy, honest, finance]
+avoid: [luxury, playful-kids, fashion, kids, consumer, food, portfolio]
+needs: ["3–4 plans with real prices", "a full feature list per plan, 12–40 rows", "feature groups (e.g. collaboration, security, support)"]
+imagery: none
+density: dense
+effort: m
+---
+
+## When it's right
+
+Buyers who compare seriously (procurement, technical leads) need the whole list, and the page already has a short pricing summary above. This is the long, dense, scannable table that answers "does Team include audit logs?" without losing which column is which. Use as the second pricing section on a pricing page, or as the only one for B2B tools with many features. Not as the first thing a consumer sees.
+
+## Structure
+
+```
+1440 ─ container 1200
+┌──────────────────────────────────────────────────────────────────────────┐
+│ H2 "Compare every feature"                       [ Show only differences ]│
+│ ┌─────────────────┬──────────────┬──────────────┬──────────────┐          │
+│ │                 │ Free  $0     │ Team  $14    │ Business $32 │ ← sticky │  ← sticks at top: 0 (below site nav)
+│ │                 │ [Start free] │ [Start trial]│ [Talk to us] │   header │
+│ ├─────────────────┴──────────────┴──────────────┴──────────────┤          │
+│ │ Collaboration                                                │ ← group  │
+│ │ Members           1              Up to 50       Unlimited    │          │
+│ │ Guests            —              5              Unlimited    │          │
+│ │ Comments          ✓              ✓              ✓            │          │
+│ │ Security                                                     │ ← group  │
+│ │ SSO               —              —              SAML, SCIM   │          │
+│ │ Audit log         —              30 days        1 year       │          │
+│ │ …                                                            │          │
+│ └──────────────────────────────────────────────────────────────┘          │
+│ ⓘ hover/tap a feature name for a one-line definition                     │
+└──────────────────────────────────────────────────────────────────────────┘
+```
+
+```
+390 ─ plan picker replaces columns
+[ Free | Team | Business ]  ← sticky segmented control with the chosen plan's price + button under it
+Collaboration
+  Members ............ Up to 50
+  Guests ............. 5
+Security
+  SSO ................ —
+```
+
+At 390 a three-column table won't fit. The header becomes a sticky segmented control (plan names), and the table shows two columns: feature and the chosen plan's value. Optionally a "compare with" second select adds one more column (feature | A | B). Groups stay as row headings.
+
+## Finish
+
+- Real `<table>` with `<caption>` (visually hidden), `<th scope="col">` for plans, `<th scope="row">` for features, group rows as `<th colspan scope="rowgroup">`.
+- Sticky header: `position: sticky; top: <nav height>`, page background colour, a hairline at its bottom edge that turns into `--shadow-1` (resting, `_finish.md`) only once it is stuck (toggle via an IntersectionObserver sentinel). Plan name body 600, price h3 size `tabular-nums`, button small size.
+- Rows: 40–44px, hairlines in `--hairline`, text small-to-body size. Feature column 30–36% of the width; plan columns equal. Values left-aligned in each column, on the same x as the plan name above (P01).
+- Group rows: body size 600, 32px above, 8px below, no background fill.
+- Recommended column: a background tint ≤ 4% toward the accent running the full height, header included. No border around it.
+- Ticks: one glyph, secondary colour; absent = em dash tertiary. Prefer words over ticks wherever a value has nuance.
+- Buttons in the sticky header: recommended = `.btn-primary`, others `.btn-secondary` (the page's button language), all one size.
+
+## Content
+
+- Every row comes from the product's real plan definitions. Group by how a buyer thinks (collaboration, security, admin, support), 3–6 groups.
+- Feature names in plain words; a one-line definition on hover/focus (tooltip per D37) for jargon only.
+- "Show only differences" hides rows that are identical across plans; on by default when there are more than 25 rows.
+- No invented SLAs, certifications or limits. If a value is "custom", say what it depends on.
+
+## States and motion
+
+- Sticky header gains its shadow when stuck; no other motion.
+- "Show only differences" toggles rows with a 150ms opacity fade, no height animation of the whole table.
+- Tooltips on feature names open on hover and focus, close on Escape.
+- No-JS: full table, header sticky via CSS alone, toggle hidden.
+
+## Pitfalls
+
+- A grid of divs instead of a table: screen readers lose the headers.
+- Sticky header without a background, so rows show through it.
+- Zebra stripes plus hairlines plus column borders: three dividing systems at once.
+- Red crosses and green ticks: a wall of colour that says nothing.
+- At 390, a sideways-scrolling table with the first column frozen and two tiny plan columns.
+
+## Floor checks
+
+- Is it a real table whose plan header stays visible while scrolling the rows?
+- Can you find any feature's value for any plan without counting columns?
+- Are the features grouped under clear group headings?
+- Does each plan in the header have its own button, with one visibly primary?
+- Is there one dividing system (hairlines only), without stripes and boxes stacked on top?
+- Are absent features shown quietly (a dash) rather than as red crosses?
+- At 390, does the table show a plan picker instead of squeezed columns?

package/kb/sections/pricing-free-pro-upgrade-moment.md

@@ -0,0 +1,85 @@
+---
+id: pricing-free-pro-upgrade-moment
+name: Free and Pro, with the upgrade moment shown
+kind: pricing
+shape: split
+layout: "two halves, Free and Pro; between them the exact moment a free user hits the limit, shown as the product's own message, so the visitor sees when they'd pay and why"
+fits: [saas, consumer, productivity, developer, ai, honest, friendly, education, crafted]
+avoid: [enterprise-compliance, luxury, government, finance-trust-first, food, portfolio]
+needs: ["a free tier and one paid tier with real prices", "the real limit that triggers upgrading (count, size, feature)", "the product's own limit message or upgrade prompt"]
+imagery: product-ui
+density: balanced
+effort: m
+---
+
+## When it's right
+
+Freemium products where most people start free and the honest question is "when would I have to pay?". The section answers it by showing the moment itself: the product's real "you've used 3 of 3 projects" notice, sitting on the seam between the two plans. It makes the free tier feel generous and the paid tier feel like a natural next step, not a trap. Not for products without a free tier, or with more than two plans (use `pricing-plans-ledger`).
+
+## Structure
+
+```
+1440 ─ container 1200
+┌──────────────────────────────────────────────────────────────────────────┐
+│ H2 "Free until you need more"                                            │
+│ ┌ Free (cols 1–5) ───────────┐        ┌ Pro (cols 8–12) ──────────────┐   │
+│ │ Free                       │        │ Pro                            │   │
+│ │ $0, no card                │        │ $9 / month                     │   │
+│ │ ─────────────              │ ┌────┐ │ ─────────────                  │   │
+│ │ 3 projects                 │ │ ⓘ  │ │ Unlimited projects             │   │  ← rows align across the seam
+│ │ 1 GB storage               │ │You've│ │ 100 GB storage                │   │
+│ │ Public links               │ │used 3│ │ Private links, passwords      │   │
+│ │                            │ │of 3  │ │ Custom domain                 │   │
+│ │ [ Start free ]             │ │[Upgr]│ │ [ Start Pro ]                 │   │
+│ └────────────────────────────┘ └────┘ └────────────────────────────────┘   │
+│                    the product's real limit message, cols 6–7, on the seam │
+│ Most people stay on Free for months. Upgrade or downgrade any time.        │
+└──────────────────────────────────────────────────────────────────────────┘
+```
+
+```
+390 ─ one column
+H2
+Free block (price, 3 rows, button)
+the limit message, full width, with a short caption "This is when you'd upgrade"
+Pro block (price, rows, button)
+reassurance line
+```
+
+At 390 the order tells the story top to bottom: free, the moment, pro. The limit message keeps its product styling at the same scale as the product.
+
+## Finish
+
+- Free and Pro are two columns on the page surface, no card boxes; a single vertical hairline between them at 1440 runs behind the limit message. The limit message is the only raised object (`--shadow-2` (raised, `_finish.md`), `--r-lg`) and overlaps the hairline.
+- Rows in both columns share baselines (same row height, 40px, hairline between), so "3 projects" sits across from "Unlimited projects".
+- Plan names body 600; prices h2-size `tabular-nums`. Free's price reads "$0, no card" as one phrase.
+- The limit message is built in HTML with the product's own tokens and copy, at its real size; a small caption above it in secondary type ("What you'll see on project 4").
+- Buttons: Free = secondary ("Start free"), Pro = primary ("Start Pro"). Free goes first in reading order but Pro carries the primary weight. Both in the page's button language (`.btn-primary`, `.btn-secondary`).
+
+## Content
+
+- The limit and the message are the product's real ones. If the product has no such message yet, write the one it should have and ship it in the product too; never show a message the product won't show.
+- Rows: 3–5 differences, each a number or a capability, parallel across the seam.
+- Reassurance line: only claims that are true (downgrade policy, data kept after downgrade). "Most people stay on Free for months" only if measured; otherwise cut it.
+
+## States and motion
+
+- When the section enters view, the limit message's counter ticks from "2 of 3" to "3 of 3" once and the upgrade button inside it appears (300ms, ease-out). Reduced motion and no-JS: final state.
+- Hovering a Free row highlights its Pro counterpart (background tint) to make the pair obvious.
+- Buttons per `_finish.md`; the button inside the product message is part of the illustration and is `aria-hidden` and not focusable, or links to the same Pro signup.
+
+## Pitfalls
+
+- A fake, scary limit message ("Your account is restricted!"): it makes Free feel like a trap.
+- Free and Pro as identical cards with a "Popular" pill, which is the stock layout this replaces.
+- Rows that don't line up across the seam, so comparison needs reading.
+- The limit message so small it reads as an icon.
+
+## Floor checks
+
+- Can you see the exact point at which a free user would need to pay?
+- Does each plan have its own call to action, with Pro visibly primary?
+- Do the Free and Pro rows line up so each difference reads across?
+- Is the limit message shown at readable product scale, in the product's own style?
+- Is the free price stated plainly with what it doesn't require (e.g. no card)?
+- Is the area between the plans used by the upgrade moment rather than left empty?

package/kb/sections/pricing-plan-beside-product.md

@@ -0,0 +1,88 @@
+---
+id: pricing-plan-beside-product
+name: What you get, shown in the product
+kind: pricing
+shape: split
+layout: "one plan card on the left; on the right the product itself rendered in that plan's state, with the plan's limits visible inside it; a plan switch changes both"
+fits: [saas, productivity, consumer, ai, crafted, friendly, honest, calm, developer]
+avoid: [enterprise-compliance, government, data-dense-tool, food, portfolio]
+needs: ["one plan, or two at most", "the product UI buildable in HTML in that plan's state", "the plan's real limits as they appear in the product"]
+imagery: product-ui
+density: balanced
+moves: [screenshot-detail-crops, sliding-nav-indicator]
+effort: l
+---
+
+## When it's right
+
+There is one paid plan (or a free and a paid one) and the value is easier to see than to list: more history in the timeline, a second workspace in the switcher, the export button that unlocks. Instead of a feature list, the section shows the product as a customer on this plan would see it, and the card beside it just names the price and the action. Strong for single-plan products and crafted consumer tools. Not for 3+ plans (use `pricing-plans-ledger`) or products whose UI can't be built in HTML.
+
+## Structure
+
+```
+1440 ─ container 1200, 12-col grid
+┌──────────────────────────────────────────────────────────────────────────┐
+│ ┌ plan card (cols 1–4) ────────┐  ┌ product in plan state (cols 5–12) ───┐ │
+│ │ [ Free | Pro ]               │  │ ┌ sidebar ┐┌ timeline ─────────────┐ │ │
+│ │                              │  │ │ ● Home  ││ Today                 │ │ │
+│ │ Pro                          │  │ │ ● Notes ││ …                     │ │ │
+│ │ $8 / month                   │  │ │ ● Shared││ 3 months ago   ◀──── ①│ │ │  ← callouts mark what the plan adds
+│ │ everything, for one person   │  │ │         ││ 1 year ago            │ │ │
+│ │                              │  │ └─────────┘└───────────────────────┘ │ │
+│ │ ① Full history, not 30 days  │  │        [ Export ▾ ]  ◀──── ②         │ │
+│ │ ② Export to PDF and Markdown │  │                                      │ │
+│ │ ③ Shared spaces              │  │                                      │ │
+│ │                              │  └──────────────────────────────────────┘ │
+│ │ [ Start Pro, 14 days free ]  │                                          │
+│ │ Cancel in two clicks.        │                                          │
+│ └──────────────────────────────┘                                          │
+└──────────────────────────────────────────────────────────────────────────┘
+```
+
+```
+390 ─ one column
+[ Free | Pro ]
+product crop (the part that changes most between plans), full bleed to 16 gutters
+plan name, price, 3 numbered differences
+primary button full width, reassurance line
+```
+
+At 390 the product view is cropped to the one region that differs most between plans (see `screenshot-detail-crops`), shown above the card so the visitor sees before reading. Callout numbers stay on the crop.
+
+## Finish
+
+- Card: no box, or the quietest surface the page has; the product view carries the elevation (`--shadow-2` (raised, `_finish.md`), `--r-lg`). Product view inner panels nest concentrically.
+- Plan name body size 600; price at `--t-h2` (about 40px), `tabular-nums`; per-period in small secondary.
+- The differences are a numbered list (①②③ or 1–3 in small circles, 20px, accent outline) and the same numbers sit on the product view as callouts with a 1px leader line in the accent. Numbers are real here: they map list to picture.
+- Product UI built in HTML from the product's tokens, readable at 100% (P40), no fake window chrome (M19). Strip unimportant chrome to skeleton blocks in `--hairline`.
+- Plan switch: a segmented control; the active segment slides (see `sliding-nav-indicator`).
+- One primary button (the page's `.btn-primary`), label names plan and trial. Reassurance line in small secondary.
+
+## Content
+
+- The product view shows the plan's real limits as the product shows them (the "30 days of history" notice on Free, the locked export menu). Use realistic sample content, never lorem ipsum.
+- Three differences at most, each a concrete thing you can point at in the view.
+- Price, trial length and cancellation copy come from the product. No invented user counts.
+
+## States and motion
+
+- Switching Free ↔ Pro morphs the product view in place: the history list extends, the locked item unlocks (opacity and height, 250ms, ease-out); callouts appear once the change settles. Reduced motion: swap instantly.
+- Hovering a list item highlights its callout and the region in the view (outline in accent at 40%), and vice versa.
+- Long plan names and prices in other currencies don't break the card; the view keeps its aspect ratio.
+- No-JS: the paid plan state renders; the switch is hidden.
+
+## Pitfalls
+
+- A static screenshot in a device frame instead of the product built in HTML.
+- Callouts with no matching list item, or list items you can't find in the picture.
+- Showing a feature the plan doesn't actually have, for looks.
+- A product view so small the differences can't be read.
+
+## Floor checks
+
+- Does the section show the product itself (not a feature list alone) in the state the plan gives you?
+- Can you point at each listed plan difference inside the product view?
+- Is the price readable in one glance next to a single primary call to action?
+- Is the product text legible at 100% zoom?
+- Is there no fake browser or window chrome around the product view?
+- At 390, is the part of the product that changes between plans visible before the price?

package/kb/sections/pricing-plans-ledger.md

@@ -0,0 +1,94 @@
+---
+id: pricing-plans-ledger
+name: Plans side by side over one feature ledger
+kind: pricing
+shape: table
+layout: "2–4 plan heads in columns that share one ruled ledger of differences below them, so each row reads across all plans at once"
+fits: [saas, b2b, developer, productivity, ai, honest, trustworthy, technical, crafted]
+avoid: [luxury, fashion, playful-kids, food, portfolio]
+needs: ["2–4 plans with real prices", "the 5–9 differences that actually separate the plans", "one plan the business wants most people on"]
+imagery: none
+density: balanced
+moves: [sliding-nav-indicator]
+effort: m
+---
+
+## When it's right
+
+The product has a small set of fixed plans and the honest question a buyer asks is "what do I get for the extra money?". The ledger answers it in one look: plan heads on top, then only the rows where plans differ, read across. Use it as the default pricing section for self-serve SaaS. Not for usage-priced products (use `pricing-usage-calculator`), a single plan (use `pricing-plan-beside-product`), or more than 12 rows of differences (use `pricing-comparison-table-sticky`).
+
+## Structure
+
+```
+1440 ─ container 1200, 12-col grid, gutter 24
+┌──────────────────────────────────────────────────────────────────────────┐
+│ H2 "Pricing" plain heading            [ Monthly | Yearly −2 months ]     │  ← heading left, billing toggle right, same baseline
+│                                                                          │
+│ ┌ label col ┐┌ Free ──────────┐┌ Team ── recommended ┐┌ Business ───────┐ │  ← cols: 3 / 3 / 3 / 3
+│ │           ││ Free           ││ Team                ││ Business        │ │
+│ │           ││ $0             ││ $14 /seat/mo        ││ $32 /seat/mo    │ │  ← prices on one baseline
+│ │           ││ for one person ││ for teams up to 50  ││ SSO, audit, SLA │ │
+│ │           ││ [Start free]   ││ [Start Team trial]  ││ [Talk to us]    │ │  ← buttons on one baseline
+│ ├───────────┼┼────────────────┼┼─────────────────────┼┼─────────────────┤ │
+│ │ Projects  ││ 3              ││ Unlimited           ││ Unlimited       │ │  ← ledger rows, hairline between
+│ │ History   ││ 7 days         ││ 1 year              ││ Forever         │ │
+│ │ SSO       ││ —              ││ —                   ││ ✓ SAML, SCIM    │ │
+│ │ Support   ││ Community      ││ Email, 1 day        ││ Named, 4 hours  │ │
+│ └───────────┘└────────────────┘└─────────────────────┘└─────────────────┘ │
+│ Prices in USD, excl. tax. All plans: export, API, 2FA.  Full comparison →│
+└──────────────────────────────────────────────────────────────────────────┘
+```
+
+```
+390 ─ one column, 16 gutter
+[ Monthly | Yearly ]
+┌ Team (recommended, first) ┐  price, line, button, then its own ledger rows as label: value pairs
+┌ Free ┐                       same anatomy
+┌ Business ┐
+"All plans include…" line, link to full comparison
+```
+
+At 390 the recommended plan moves first. Each plan becomes a card carrying its own ledger rows (label left, value right, hairlines), so nothing scrolls sideways. The billing toggle sits above the first card, full width.
+
+## Finish
+
+- Section padding: the page's section spacing (96 at 1440, 64 at 390). Heading to plan heads 48; plan heads to ledger 0 (the ledger is the same columns continuing).
+- Plan name: body size, weight 600. Price: two steps above h3 (about 40–48px), `tabular-nums`, weight 600, the unit ("/seat/mo") in small size, secondary colour, on the same baseline. One-line audience under it in secondary colour.
+- Columns share edges with the ledger cells: same x for the plan name, price, button and every value below it (P01, P35).
+- Ledger rows: 48–56px tall, 1px hairline in `--hairline` between rows (see `_finish.md` hairlines), no zebra striping, no vertical rules. Labels in secondary colour; values in primary. A missing feature is an em dash in tertiary colour, never a red cross. A present feature with nuance says the nuance ("✓ SAML, SCIM"), not just a tick.
+- Recommended plan: its whole column (head + ledger) sits on one raised surface: background one step lighter or tinted ≤ 4% toward the accent, radius = `--r-lg`, `--shadow-1` (resting, `_finish.md`). Inner elements nest concentrically (button radius = column radius − column padding). A small label "Recommended" in body face, sentence case, inside the column top, not a floating pill above it.
+- Buttons: one per plan, all the same size. Recommended plan = `.btn-primary`; others = `.btn-secondary` (the page's button language). Labels name the action and the plan ("Start Team trial", "Start free", "Talk to us").
+- Billing toggle: a two-option segmented control with a sliding indicator (see `sliding-nav-indicator`); the yearly saving as a fact ("2 months free"), not a percentage badge.
+- Footnote line: small, secondary, states currency, tax and what all plans share.
+
+## Content
+
+- Plan heads: real prices from the product's pricing source. If the price is not set yet, do not build this section; say so in the brief.
+- One-line audience per plan ("for one person", "for teams up to 50"), not adjectives ("Powerful", "Ultimate").
+- Ledger rows: only differences, ordered by how often buyers ask. Shared features go in the footnote line ("All plans: …"), not repeated as ticks across every column.
+- Never invent limits, SLAs or support hours; take them from the product. No "Most popular" unless it is measured; "Recommended" is an honest editorial word.
+
+## States and motion
+
+- Billing toggle: prices crossfade in place (opacity 150ms, no count-up, no layout shift: reserve the width of the longest price with `tabular-nums`). The yearly price shows the per-month equivalent and the billed total underneath.
+- Button hover/press per `_finish.md`; focus ring visible on every button and toggle option.
+- Long values wrap inside their cell; long plan names never push the price off the shared baseline (fixed head slot heights).
+- No entrance animation needed. No-JS: monthly prices server-rendered, toggle hidden.
+
+## Pitfalls
+
+- Twelve rows of ticks that are the same in every column: the eye can't find the difference.
+- A recommended plan that is taller or offset so the ledger rows no longer line up across.
+- Floating "Most popular" pill above one card (template furniture) and a 2px accent border on it (M24).
+- Three outline buttons and no primary, or three filled ones.
+- Prices that change width when toggling, so the whole row jumps.
+
+## Floor checks
+
+- Does every plan have its own call to action, with the recommended plan's button visibly the primary one?
+- Can you compare the plans' differences by reading across rows, without reading paragraphs?
+- Do plan names, prices and buttons sit on shared baselines across the columns?
+- Is a missing feature shown as a quiet dash or word rather than a red cross or empty cell?
+- Is the recommended plan marked by a surface treatment that spans its whole column, not only a badge?
+- Is there a line saying currency/tax or what every plan includes?
+- At 390, does every plan show its own values without sideways scrolling?