feat: launch day site (Inter labels, SolidCraft compare, Ko-fi, new pictures)

src/data/compare.ts

@@ -1,36 +1,41 @@
 // "Why not just use …": PartBuddy against kinds of tools, not named products, so every cell
-// stays true without tracking other products. Cells: [mark, note]. The last column is PartBuddy;
-// its claims must match site-content.json.
+// stays true without tracking other products. The one exception is SolidCraft, PartBuddy's own
+// engine, because "why not drive it directly" is the obvious question (Manuel 2026-11-08).
+// Cells: [mark, note]. The last column is PartBuddy; its claims must match site-content.json.
 type Mark = 'yes' | 'no' | 'part';
 type Cell = [Mark, string?];
 
 export const compare: { intro: string; columns: string[]; rows: { label: string; cells: Cell[] }[]; footnote: string } = {
-  intro: 'There are three usual ways to get a functional printed part today. Each solves one half of the problem.',
-  columns: ['Classic CAD', 'Text-to-3D generator', 'Chatbot writing CAD code', 'PartBuddy'],
+  intro: 'There are four usual ways to get a functional printed part today. Each solves one part of the problem.',
+  columns: ['Classic CAD', 'Text-to-3D generator', 'Chatbot writing CAD code', 'Chatbot connected to SolidCraft', 'PartBuddy'],
   rows: [
     {
       label: 'Exact, editable geometry (STEP)',
-      cells: [['yes'], ['no', 'Mesh'], ['yes', 'As code'], ['yes', 'With full history']],
+      cells: [['yes'], ['no', 'Mesh'], ['yes', 'As code'], ['yes', 'Same engine'], ['yes', 'With full history']],
     },
     {
       label: 'Describe the part in words',
-      cells: [['no'], ['yes'], ['yes'], ['yes', 'Or a sketch or photo']],
+      cells: [['no'], ['yes'], ['yes'], ['yes'], ['yes', 'Or a sketch or photo']],
     },
     {
       label: 'Asks about loads, fits and real sizes',
-      cells: [['no', 'You decide alone'], ['no'], ['part', 'If you ask it to'], ['yes', 'Before it builds']],
+      cells: [['no', 'You decide alone'], ['no'], ['part', 'If you ask it to'], ['part', 'If you ask it to'], ['yes', 'Before it builds']],
     },
     {
       label: 'ISO fasteners, inserts and fits built in',
-      cells: [['part', 'Libraries, by hand'], ['no'], ['part', 'If it knows them'], ['yes', 'Sized per material']],
+      cells: [['part', 'Libraries, by hand'], ['no'], ['part', 'If it knows them'], ['part', 'If it knows them'], ['yes', 'Sized per material']],
     },
     {
       label: 'Checked against your printer',
-      cells: [['part', 'Add-ons'], ['no'], ['no'], ['yes', 'After every change']],
+      cells: [['part', 'Add-ons'], ['no'], ['no'], ['no'], ['yes', 'After every change']],
     },
     {
       label: 'See and change every step in 3D',
-      cells: [['yes'], ['no'], ['part', 'After each run'], ['yes', 'Click a face, ask in words']],
+      cells: [['yes'], ['no'], ['part', 'After each run'], ['part', 'Faces named in words'], ['yes', 'Click a face, ask in words']],
+    },
+    {
+      label: 'Notes pinned to the model',
+      cells: [['part', 'Comments, for people'], ['no'], ['no'], ['no'], ['yes', 'The assistant reads them']],
     },
   ],
   footnote: 'Typical for each kind of tool; single products differ.',

src/data/crops.ts

@@ -28,4 +28,6 @@ export const crops: Record<string, Rect | { from: string; rect: Rect }> = {
   import: [0, 40, 1020, 760],
   export: [160, 0, 860, 540],
   model: [1000, 180, 440, 700],
+  // The clip with its three numbered notes (face, edge, plate).
+  notes: [330, 320, 600, 440],
 };

src/layouts/Base.astro

@@ -58,6 +58,7 @@ const cta = RELEASED ? { href: DOWNLOAD_URL, label: 'Download' } : { href: to('#
         <a href={to('#compare')}>Compare</a>
         <a href="/changelog.html">Changelog</a>
         <a href={to('#faq')}>FAQ</a>
+        <a class="nav-kofi" href={KOFI_URL}><Brand name="Ko-fi" />Support</a>
       </nav>
       <a class="btn btn-sm" href={cta.href}>{cta.label}</a>
     </div>

src/pages/index.astro

@@ -32,6 +32,7 @@ const faq = [
   { q: 'Does it do supports and print orientation?', a: ['No, on purpose. That is slicer work, and your slicer knows your printer profile. PartBuddy designs the part, checks what can only be decided while designing, and opens it in Bambu Studio or OrcaSlicer.'] },
   { q: 'Does it run only on Windows?', a: ['Yes. PartBuddy is a Windows desktop app.'] },
   { q: 'What is SolidCraft?', a: ['The CAD engine behind PartBuddy. It builds the geometry; PartBuddy runs it in the background and shows every step in its own 3D view. You install SolidCraft yourself, and the setup on first start helps you find it.'] },
+  { q: 'Why not connect Claude or ChatGPT to SolidCraft directly?', a: ['You can: SolidCraft has its own MCP server, and PartBuddy drives the same engine. What PartBuddy adds is everything around it.', 'It asks about loads, fits and real sizes and shows a plan before it builds. It checks every change against your printer and material. ISO fasteners, inserts and fits measured on your printer are built in. You click a face and pin a note to it, so the assistant knows exactly which face you mean, even after a rebuild.', 'The assistant works only through PartBuddy’s checks and only in your project folder. Every step can be taken back, versions can be compared, and the part goes straight to your slicer. And there is nothing to configure: sign in with your plan and start.'] },
   ...(RELEASED ? [{ q: 'Why does Windows warn about the installer?', a: ['PartBuddy is a hobby project and its installer is not code-signed, so Windows SmartScreen may show a warning. Choose More info, then Run anyway. The source code is public.'] }] : []),
 ];
 
@@ -241,7 +242,10 @@ const jsonLd = {
           <li><a class="channel" href={c.url} rel="me"><Brand name={c.name} />{c.name}<span class="sr-only"> {c.handle}</span><ArrowUpRight aria-hidden="true" /></a></li>
         ))}
       </ul>
-      <p class="kofi">Want to help? <a href={KOFI_URL}>Support PartBuddy on Ko-fi</a>. Entirely voluntary.</p>
+      <div class="kofi">
+        <p>PartBuddy is free and a hobby project. If it saves you a print, you can buy it a coffee. Entirely voluntary.</p>
+        <a class="btn" href={KOFI_URL}><Brand name="Ko-fi" />Support on Ko-fi</a>
+      </div>
     </div>
   </section>
 

src/styles/global.css

@@ -22,7 +22,8 @@
   --accent-text: #7aa7f6;
   --ok: #4fc58a;
   --light: rgb(47 106 214 / 0.5);
-  --mono: 'Cascadia Mono', ui-monospace, Consolas, monospace;
+  /* No monospace anywhere (Manuel 2026-11-08): labels use Inter, figures use tabular numbers. */
+  --sans: Inter, system-ui, 'Segoe UI', sans-serif;
   --wrap: 1200px;
   --gutter: clamp(16px, 4vw, 32px);
   --radius: 16px;
@@ -34,7 +35,7 @@ html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; background: var
 @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
 body {
   background: var(--bg); color: var(--ink); overflow-x: clip;
-  font: 400 1rem/1.6 Inter, system-ui, 'Segoe UI', sans-serif;
+  font: 400 1rem/1.6 var(--sans);
   -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
 }
 img, svg, video { display: block; max-width: 100%; }
@@ -50,7 +51,7 @@ p { text-wrap: pretty; }
 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 .skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--bg); border-radius: 8px; }
 .skip:focus { top: 12px; }
-.mono { font-family: var(--mono); }
+.mono { font-variant-numeric: tabular-nums; }
 .muted { color: var(--muted); }
 .wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
 
@@ -82,6 +83,8 @@ p { text-wrap: pretty; }
 .nav { display: flex; gap: 2px; font-size: 0.875rem; color: var(--muted); }
 .nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px; transition: color 0.15s; }
 .nav a:hover { color: var(--ink); }
+.nav-kofi { gap: 7px; }
+.nav-kofi svg { width: 15px; height: 15px; }
 @supports (animation-timeline: scroll()) {
   .site-header { animation: header-line linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
   @keyframes header-line { to { border-bottom-color: var(--line); } }
@@ -94,7 +97,7 @@ p { text-wrap: pretty; }
 .eyebrow {
   justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 14px;
   border: 1px solid var(--line-strong); border-radius: 999px; background: rgb(255 255 255 / 0.03);
-  font: 500 0.8125rem/1 var(--mono); color: var(--muted); transition: color 0.15s, border-color 0.15s;
+  font: 500 0.8125rem/1 var(--sans); color: var(--muted); transition: color 0.15s, border-color 0.15s;
 }
 a.eyebrow:hover { color: var(--ink); border-color: rgb(255 255 255 / 0.25); }
 .eyebrow svg { width: 14px; height: 14px; }
@@ -104,7 +107,7 @@ a.eyebrow:hover { color: var(--ink); border-color: rgb(255 255 255 / 0.25); }
 .hero h1 span { color: #7a828d; }
 .sub { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; color: var(--muted); max-width: 30em; }
 .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
-.fine { margin-top: 18px; font: 0.75rem/1.6 var(--mono); color: var(--faint); }
+.fine { margin-top: 18px; font: 0.75rem/1.6 var(--sans); color: var(--faint); }
 @media (min-width: 1000px) {
   .hero-copy { grid-template-columns: 1.25fr 1fr; align-items: end; column-gap: 64px; }
   .hero-copy .eyebrow { grid-column: 1 / -1; }
@@ -133,7 +136,7 @@ a.eyebrow:hover { color: var(--ink); border-color: rgb(255 255 255 / 0.25); }
 }
 
 .works { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; margin-top: -32px; padding-bottom: clamp(72px, 10vw, 128px); }
-.works > p { font: 500 0.75rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
+.works > p { font: 500 0.75rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
 .logos { display: flex; flex-wrap: wrap; gap: 14px 32px; }
 .logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; color: #c9ced5; }
 .logo svg { width: 22px; height: 22px; }
@@ -145,7 +148,7 @@ a.eyebrow:hover { color: var(--ink); border-color: rgb(255 255 255 / 0.25); }
 .section-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
 .section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
 .section-head.center { margin-inline: auto; text-align: center; }
-.kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 0.8125rem var(--mono); color: var(--accent-text); letter-spacing: 0.02em; }
+.kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 0.75rem var(--sans); color: var(--accent-text); letter-spacing: 0.12em; text-transform: uppercase; }
 .kicker .no { color: var(--faint); }
 h2 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem); line-height: 1.02; letter-spacing: -0.04em; margin-top: 16px; }
 .section-head p { margin-top: 20px; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); color: var(--muted); }
@@ -189,7 +192,7 @@ h3 { font-size: 1.125rem; letter-spacing: -0.015em; line-height: 1.3; }
 /* Spec sheet under the check chapter: the numbers behind it. */
 .spec { display: grid; gap: 1px; margin-top: clamp(56px, 8vw, 88px); border-radius: var(--radius); overflow: hidden; background: var(--line); box-shadow: 0 0 0 1px var(--line); }
 .spec > div { background: var(--surface); padding: 28px; }
-.spec h3 { font: 500 0.8125rem var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); margin-bottom: 18px; }
+.spec h3 { font: 500 0.8125rem var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); margin-bottom: 18px; }
 .spec dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 0.9375rem; }
 .spec dt { color: var(--muted); }
 .spec dd { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
@@ -200,7 +203,7 @@ h3 { font-size: 1.125rem; letter-spacing: -0.015em; line-height: 1.3; }
 .fits { width: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
 .fits th, .fits td { padding: 9px 8px 9px 0; text-align: left; border-top: 1px solid var(--line); }
 .fits thead th { font-weight: 500; font-size: 0.75rem; color: var(--faint); border-top: 0; padding-top: 0; }
-.fits td { font-family: var(--mono); font-size: 0.875rem; }
+.fits td { font-variant-numeric: tabular-nums; font-size: 0.875rem; }
 .fits tbody th { font-weight: 600; }
 @media (min-width: 960px) { .spec { grid-template-columns: 1.4fr 1fr 1fr; } }
 
@@ -222,7 +225,7 @@ h3 { font-size: 1.125rem; letter-spacing: -0.015em; line-height: 1.3; }
 
 /* ---------- Compare ---------- */
 .compare-scroll { overflow-x: auto; border-radius: var(--radius); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
-.compare { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.9375rem; }
+.compare { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 0.9375rem; }
 .compare th, .compare td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
 .compare tbody tr:last-child > * { border-bottom: 0; }
 .compare thead th { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
@@ -244,7 +247,7 @@ h3 { font-size: 1.125rem; letter-spacing: -0.015em; line-height: 1.3; }
 @media (min-width: 760px) { .trust { grid-template-columns: repeat(3, 1fr); } }
 .status { display: grid; gap: 1px; margin-top: clamp(56px, 8vw, 80px); border-radius: var(--radius); overflow: hidden; background: var(--line); box-shadow: 0 0 0 1px var(--line); }
 .status > div { background: var(--surface); padding: 24px 28px; }
-.status h3 { display: flex; align-items: center; gap: 10px; font: 500 0.8125rem var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 14px; }
+.status h3 { display: flex; align-items: center; gap: 10px; font: 500 0.8125rem var(--sans); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 14px; }
 .status h3 .dot { box-shadow: none; }
 .status .dot-next { background: var(--accent-text); }
 .status .dot-later { background: var(--faint); }
@@ -269,8 +272,10 @@ h3 { font-size: 1.125rem; letter-spacing: -0.015em; line-height: 1.3; }
 .channel { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgb(8 9 11 / 0.5); backdrop-filter: blur(10px); font-size: 0.875rem; color: #d3d7dd; transition: border-color 0.15s, color 0.15s; }
 .channel:hover { border-color: rgb(255 255 255 / 0.3); color: var(--ink); }
 .channel svg { width: 18px; height: 18px; }
-.kofi { margin-top: 28px; font-size: 0.9375rem; color: var(--muted); }
-.kofi a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 0.2em; }
+.kofi { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; max-width: 640px; margin: 40px auto 0; padding: 20px 24px; border-radius: var(--radius); background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 0.9375rem; color: var(--muted); }
+.kofi p { flex: 1 1 280px; text-align: left; }
+/* Ko-fi red only on the cup: present, not loud. */
+:is(.kofi, .nav-kofi) svg { color: #ff5e5b; }
 
 /* ---------- FAQ ---------- */
 .faq-wrap { display: grid; gap: 32px; }
@@ -288,7 +293,7 @@ h3 { font-size: 1.125rem; letter-spacing: -0.015em; line-height: 1.3; }
 /* ---------- Footer ---------- */
 .site-footer { border-top: 1px solid var(--line); padding: 56px 0 40px; font-size: 0.875rem; color: var(--muted); }
 .footer-grid { display: grid; gap: 40px; }
-.footer-grid h2 { font: 500 0.75rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin: 0 0 12px; }
+.footer-grid h2 { font: 500 0.75rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin: 0 0 12px; }
 .footer-grid li a { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; transition: color 0.15s; }
 .footer-grid li a:hover { color: var(--ink); }
 .footer-grid li svg { width: 16px; height: 16px; }
@@ -318,8 +323,8 @@ h3 { font-size: 1.125rem; letter-spacing: -0.015em; line-height: 1.3; }
 .legal a, .release-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 0.2em; }
 .release { display: grid; gap: 16px; padding: 40px 0; border-top: 1px solid var(--line); }
 .release-meta h2 { font-size: 1.75rem; margin: 0; letter-spacing: -0.03em; }
-.release-meta time { display: block; margin-top: 4px; font: 0.8125rem var(--mono); color: var(--faint); }
-.release-body h3 { font: 500 0.8125rem var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-text); margin: 0 0 10px; }
+.release-meta time { display: block; margin-top: 4px; font: 0.8125rem var(--sans); color: var(--faint); }
+.release-body h3 { font: 500 0.8125rem var(--sans); text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-text); margin: 0 0 10px; }
 .release-body ul + h3 { margin-top: 24px; }
 .release-body li { position: relative; padding-left: 18px; color: #d3d7dd; }
 .release-body li + li { margin-top: 6px; }