@tryvitris/website-harness 0.0.0-stage → 0.1.0-beta.5

package/blocks/incentives/incentive-cards/styles.css

@@ -0,0 +1,4 @@
+.c-incentive-cards__grid .card{background:var(--color-surface-2);border-color:transparent}
+.c-incentive-cards__grid .card__body{padding:var(--space-6);gap:var(--space-3)}
+.c-incentive-cards__grid .card__body > .icon-tile{margin-bottom:var(--space-2);background:var(--color-surface)}
+.c-incentive-cards__grid .card__body > h3{font-size:var(--step-2)}

package/blocks/incentives/incentive-cards/template.html

@@ -0,0 +1 @@
+<section class="c-incentive-cards section"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="grid grid--3 c-incentive-cards__grid"><slot name="cards"></slot></div></div></section>

package/blocks/navbar/nav-announcement/README.md

@@ -0,0 +1,35 @@
+# nav-announcement
+
+Announcement strip above sticky split nav.
+
+- **Category:** navbar
+- **Media:** logo optional
+- **Registers:** trade, beauty, food, b2b
+- **Variants:** accent
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `announcement` | One short line, optionally with an inline `<a>` |
+| `brand` | Business name or logo |
+| `links` | 3–5 `<a>` primary links |
+| `actions` | Primary CTA button |
+
+## Example
+
+```html
+<nav-announcement>
+  <span slot="announcement">Spring roof inspections are free through May — <a href="/contact">book yours</a></span>
+  <span slot="brand">Harbor Roofing</span>
+  <a slot="links" href="/services">Services</a>
+  <a slot="links" href="/work">Our work</a>
+  <a slot="links" href="/about">About</a>
+  <a slot="links" href="/contact">Contact</a>
+  <a slot="actions" class="btn" href="/contact">Free estimate</a>
+</nav-announcement>
+```
+
+Variants: `<nav-announcement variant="accent">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/navbar/nav-announcement/styles.css

@@ -0,0 +1,10 @@
+.c-nav-announcement__inner{display:flex;align-items:center;gap:var(--space-5);min-height:var(--header-h)}
+.c-nav-announcement__links{display:none;margin-inline:auto}
+.c-nav-announcement__actions{display:flex;align-items:center;gap:var(--space-2);margin-inline-start:auto}
+.c-nav-announcement__cta > :not(:first-child){display:none}
+.c-nav-announcement--accent .c-nav-announcement__strip{background:var(--color-accent);color:var(--color-accent-text);border-bottom-color:transparent}
+@media(min-width:900px){
+  .c-nav-announcement__links{display:flex}
+  .c-nav-announcement__cta > :not(:first-child){display:inline-flex}
+  .c-nav-announcement__toggle{display:none}
+}

package/blocks/navbar/nav-announcement/template.html

@@ -0,0 +1,14 @@
+<div class="c-nav-announcement">
+  <div class="announcement c-nav-announcement__strip"><slot name="announcement"></slot></div>
+  <header class="c-nav-announcement__bar header--sticky" data-island="header">
+    <div class="wrap c-nav-announcement__inner">
+      <a class="brand" href="/"><slot name="brand"></slot></a>
+      <nav class="nav-links c-nav-announcement__links" aria-label="Primary"><slot name="links"></slot></nav>
+      <div class="c-nav-announcement__actions">
+        <div class="btn-group c-nav-announcement__cta"><slot name="actions"></slot></div>
+        <button type="button" class="btn-ghost btn-icon c-nav-announcement__toggle" data-nav-toggle aria-expanded="false" aria-label="Open menu"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
+      </div>
+    </div>
+    <div class="nav-drawer"><div class="nav-drawer__panel"><nav aria-label="Mobile"><slot name="links"></slot></nav><div class="btn-group"><slot name="actions"></slot></div></div></div>
+  </header>
+</div>

package/blocks/navbar/nav-centered/README.md

@@ -0,0 +1,35 @@
+# nav-centered
+
+Centered mark with flanking link clusters — beauty / premium.
+
+- **Category:** navbar
+- **Media:** logo preferred
+- **Registers:** beauty, food, professional
+- **Variants:** static
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `links-left` | 2–3 `<a>` links shown left of the brand |
+| `brand` | Wordmark or logo (centered) |
+| `links-right` | 1–2 `<a>` links shown right of the brand |
+| `actions` | Primary CTA button (right edge) |
+
+## Example
+
+```html
+<nav-centered>
+  <a slot="links-left" href="/services">Services</a>
+  <a slot="links-left" href="/gallery">Gallery</a>
+  <a slot="links-left" href="/team">Team</a>
+  <span slot="brand">Maison Lune</span>
+  <a slot="links-right" href="/about">About</a>
+  <a slot="links-right" href="/contact">Visit</a>
+  <a slot="actions" class="btn" href="/book">Book now</a>
+</nav-centered>
+```
+
+Variants: `<nav-centered variant="static">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/navbar/nav-centered/styles.css

@@ -0,0 +1,11 @@
+.c-nav-centered__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:var(--header-h);gap:var(--space-3)}
+.c-nav-centered__brand{justify-self:center;font-size:var(--step-3);letter-spacing:.02em;text-transform:uppercase;font-weight:600}
+.c-nav-centered__left{display:none}
+.c-nav-centered__links{display:none}
+.c-nav-centered__right{display:flex;justify-content:flex-end;align-items:center;gap:var(--space-2)}
+.c-nav-centered__cta{display:none}
+.c-nav-centered--static{position:static;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--color-bg)}
+@media(min-width:900px){
+  .c-nav-centered__left,.c-nav-centered__links,.c-nav-centered__cta{display:flex}
+  .c-nav-centered__toggle{display:none}
+}

package/blocks/navbar/nav-centered/template.html

@@ -0,0 +1,12 @@
+<header class="c-nav-centered header--sticky" data-island="header">
+  <div class="wrap c-nav-centered__inner">
+    <nav class="nav-links c-nav-centered__left" aria-label="Primary"><slot name="links-left"></slot></nav>
+    <a class="brand c-nav-centered__brand" href="/"><slot name="brand"></slot></a>
+    <div class="c-nav-centered__right">
+      <nav class="nav-links c-nav-centered__links" aria-label="Secondary"><slot name="links-right"></slot></nav>
+      <div class="btn-group c-nav-centered__cta"><slot name="actions"></slot></div>
+      <button type="button" class="btn-ghost btn-icon c-nav-centered__toggle" data-nav-toggle aria-expanded="false" aria-label="Open menu"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
+    </div>
+  </div>
+  <div class="nav-drawer"><div class="nav-drawer__panel"><nav aria-label="Mobile"><slot name="links-left"></slot><slot name="links-right"></slot></nav><div class="btn-group"><slot name="actions"></slot></div></div></div>
+</header>

package/blocks/navbar/nav-minimal/README.md

@@ -0,0 +1,29 @@
+# nav-minimal
+
+Logo + CTA only — landing / lead-capture pages.
+
+- **Category:** navbar
+- **Media:** logo optional
+- **Registers:** trade, b2b, beauty
+- **Variants:** static
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `brand` | Business name or logo |
+| `actions` | 1–2 buttons; the first stays visible on mobile |
+
+## Example
+
+```html
+<nav-minimal>
+  <span slot="brand">Harbor Roofing</span>
+  <a slot="actions" class="btn" href="#estimate">Get an estimate</a>
+  <a slot="actions" class="btn-ghost" href="tel:+15550102000"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h4l2 5-3 2a12 12 0 0 0 6 6l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 4 5a2 2 0 0 1 2-2z"/></svg>(555) 010-2000</a>
+</nav-minimal>
+```
+
+Variants: `<nav-minimal variant="static">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/navbar/nav-minimal/styles.css

@@ -0,0 +1,5 @@
+.c-nav-minimal__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--header-h)}
+.c-nav-minimal__actions{flex-wrap:nowrap}
+.c-nav-minimal__actions > :not(:first-child){display:none}
+@media(min-width:720px){.c-nav-minimal__actions > :not(:first-child){display:inline-flex}}
+.c-nav-minimal--static{position:static;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--color-bg)}

package/blocks/navbar/nav-minimal/template.html

@@ -0,0 +1,6 @@
+<header class="c-nav-minimal header--sticky" data-island="header">
+  <div class="wrap c-nav-minimal__inner">
+    <a class="brand" href="/"><slot name="brand"></slot></a>
+    <div class="btn-group c-nav-minimal__actions"><slot name="actions"></slot></div>
+  </div>
+</header>

package/blocks/navbar/nav-split/README.md

@@ -0,0 +1,34 @@
+# nav-split
+
+Sticky blurred header: logo left, links center-right, filled CTA.
+
+- **Category:** navbar
+- **Media:** logo optional
+- **Registers:** trade, beauty, b2b, food, professional
+- **Variants:** static
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `brand` | Business name text or `<img>` logo (≤2rem tall) |
+| `links` | 3–5 `<a>` primary links (repeated in the drawer) |
+| `actions` | 1–2 buttons; first is the primary CTA and stays visible on mobile |
+
+## Example
+
+```html
+<nav-split>
+  <span slot="brand">Harbor Roofing</span>
+  <a slot="links" href="/services">Services</a>
+  <a slot="links" href="/work">Our work</a>
+  <a slot="links" href="/about">About</a>
+  <a slot="links" href="/contact">Contact</a>
+  <a slot="actions" class="btn" href="/contact">Free estimate</a>
+  <a slot="actions" class="btn-ghost" href="tel:+15550102000">(555) 010-2000</a>
+</nav-split>
+```
+
+Variants: `<nav-split variant="static">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/navbar/nav-split/styles.css

@@ -0,0 +1,11 @@
+.c-nav-split__inner{display:flex;align-items:center;gap:var(--space-5);min-height:var(--header-h)}
+.c-nav-split__links{display:none;margin-inline:auto}
+.c-nav-split__actions{display:flex;align-items:center;gap:var(--space-2);margin-inline-start:auto}
+.c-nav-split__cta{flex-wrap:nowrap}
+.c-nav-split__cta > :not(:first-child){display:none}
+.c-nav-split--static{position:static;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--color-bg)}
+@media(min-width:900px){
+  .c-nav-split__links{display:flex}
+  .c-nav-split__cta > :not(:first-child){display:inline-flex}
+  .c-nav-split__toggle{display:none}
+}

package/blocks/navbar/nav-split/template.html

@@ -0,0 +1,11 @@
+<header class="c-nav-split header--sticky" data-island="header">
+  <div class="wrap c-nav-split__inner">
+    <a class="brand" href="/"><slot name="brand"></slot></a>
+    <nav class="nav-links c-nav-split__links" aria-label="Primary"><slot name="links"></slot></nav>
+    <div class="c-nav-split__actions">
+      <div class="btn-group c-nav-split__cta"><slot name="actions"></slot></div>
+      <button type="button" class="btn-ghost btn-icon c-nav-split__toggle" data-nav-toggle aria-expanded="false" aria-label="Open menu"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
+    </div>
+  </div>
+  <div class="nav-drawer"><div class="nav-drawer__panel"><nav aria-label="Mobile"><slot name="links"></slot></nav><div class="btn-group"><slot name="actions"></slot></div></div></div>
+</header>

package/blocks/navbar/nav-utility/README.md

@@ -0,0 +1,37 @@
+# nav-utility
+
+Dual-tier: slim utility row (phone/hours) + primary bar. B2B default.
+
+- **Category:** navbar
+- **Media:** logo optional
+- **Registers:** b2b, professional, trade
+- **Variants:** static
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `utility` | Short inline facts: hours, phone, service area (1–3 `<span>`/`<a>`; only `<a>` items show on mobile) |
+| `brand` | Business name or logo |
+| `links` | 3–5 `<a>` primary links |
+| `actions` | Primary CTA button |
+
+## Example
+
+```html
+<nav-utility>
+  <span slot="utility"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>Mon–Fri 7:30–5:00</span>
+  <a slot="utility" href="tel:+15550102000"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h4l2 5-3 2a12 12 0 0 0 6 6l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 4 5a2 2 0 0 1 2-2z"/></svg>(555) 010-2000</a>
+  <span slot="utility"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></svg>Serving Greater Portland</span>
+  <span slot="brand">Northline Mechanical</span>
+  <a slot="links" href="/services">Services</a>
+  <a slot="links" href="/work">Our work</a>
+  <a slot="links" href="/about">About</a>
+  <a slot="links" href="/contact">Contact</a>
+  <a slot="actions" class="btn" href="/contact">Request a quote</a>
+</nav-utility>
+```
+
+Variants: `<nav-utility variant="static">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/navbar/nav-utility/styles.css

@@ -0,0 +1,17 @@
+.c-nav-utility__bar{background:var(--color-surface-2);border-bottom:1px solid var(--color-border);font-size:var(--step-0);color:var(--color-muted)}
+.c-nav-utility__util{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2) var(--space-5);min-height:2.25rem;align-items:center}
+.c-nav-utility__util > :not(a){display:none}
+@media(min-width:720px){.c-nav-utility__util > :not(a){display:inline}}
+.c-nav-utility__util a{text-decoration:none;color:var(--color-text);font-weight:500}
+.c-nav-utility__util .icon{width:1rem;height:1rem;margin-right:.35rem;vertical-align:-.15em}
+.c-nav-utility__inner{display:flex;align-items:center;gap:var(--space-5);min-height:calc(var(--header-h) - .75rem)}
+.c-nav-utility__links{display:none;margin-inline-start:auto}
+.c-nav-utility__actions{display:flex;align-items:center;gap:var(--space-2);margin-inline-start:auto}
+.c-nav-utility__cta > :not(:first-child){display:none}
+.c-nav-utility--static{position:static;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--color-bg)}
+@media(min-width:900px){
+  .c-nav-utility__links{display:flex}
+  .c-nav-utility__actions{margin-inline-start:var(--space-3)}
+  .c-nav-utility__cta > :not(:first-child){display:inline-flex}
+  .c-nav-utility__toggle{display:none}
+}

package/blocks/navbar/nav-utility/template.html

@@ -0,0 +1,12 @@
+<header class="c-nav-utility header--sticky" data-island="header">
+  <div class="c-nav-utility__bar"><div class="wrap c-nav-utility__util"><slot name="utility"></slot></div></div>
+  <div class="wrap c-nav-utility__inner">
+    <a class="brand" href="/"><slot name="brand"></slot></a>
+    <nav class="nav-links c-nav-utility__links" aria-label="Primary"><slot name="links"></slot></nav>
+    <div class="c-nav-utility__actions">
+      <div class="btn-group c-nav-utility__cta"><slot name="actions"></slot></div>
+      <button type="button" class="btn-ghost btn-icon c-nav-utility__toggle" data-nav-toggle aria-expanded="false" aria-label="Open menu"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
+    </div>
+  </div>
+  <div class="nav-drawer"><div class="nav-drawer__panel"><nav aria-label="Mobile"><slot name="links"></slot></nav><div class="btn-group"><slot name="actions"></slot></div></div></div>
+</header>

package/blocks/pricing/menu-featured/README.md

@@ -0,0 +1,34 @@
+# menu-featured
+
+Featured dishes with prices.
+
+- **Category:** pricing
+- **Media:** food photos
+- **Registers:** food
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `actions` | Optional link to the full menu |
+| `cards` | 3 or 6 dish `.card`: `.card__media.ratio-4x3`, `<h3>`, `.price`, `<p>` description |
+
+## Example
+
+```html
+<menu-featured>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">From the kitchen</p>
+  <h2 slot="heading">This week's favorites</h2>
+  <p slot="lede" class="lede">Menu changes with the market — these three rarely leave.</p>
+  <a slot="actions" class="btn-outline" href="/menu">Full menu</a>
+  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/dish-1.jpg" alt="Seared scallops" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Seared scallops</h3><p class="price"><span class="price__amount">$28</span></p><p>Brown butter, sweet corn, chive.</p></div></article>
+  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/dish-2.jpg" alt="Roast half chicken" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Roast half chicken</h3><p class="price"><span class="price__amount">$24</span></p><p>Potato purée, charred lemon, jus.</p></div></article>
+  <article slot="cards" class="card card--interactive"><div class="card__media ratio-4x3"><img src="/media/harvest/dish-3.jpg" alt="Mushroom tagliatelle" width="1200" height="900" loading="lazy"></div><div class="card__body"><h3>Mushroom tagliatelle</h3><p class="price"><span class="price__amount">$22</span></p><p>Hen of the woods, thyme, pecorino.</p></div></article>
+</menu-featured>
+```
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/pricing/menu-featured/styles.css

@@ -0,0 +1,4 @@
+.c-menu-featured__grid .card__body{grid-template-columns:1fr auto;align-items:start;gap:var(--space-2) var(--space-3)}
+.c-menu-featured__grid .card__body > h3{font-size:var(--step-1)}
+.c-menu-featured__grid .card__body > p:not(.price){grid-column:1 / -1;font-size:var(--step-0)}
+.c-menu-featured__grid .price__amount{font-size:var(--step-2)}

package/blocks/pricing/menu-featured/template.html

@@ -0,0 +1 @@
+<section class="c-menu-featured section"><div class="wrap"><div class="section__head section__head--row"><div class="stack stack--tight"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="btn-group"><slot name="actions"></slot></div></div><div class="grid grid--3 c-menu-featured__grid"><slot name="cards"></slot></div></div></section>

package/blocks/pricing/menu-sections/README.md

@@ -0,0 +1,33 @@
+# menu-sections
+
+Categorized menu lists.
+
+- **Category:** pricing
+- **Media:** optional
+- **Registers:** food, beauty
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `sections` | 2–6 `.c-menu-sections__group`: `<h3>` category, then `.c-menu-sections__item` rows (`<div><strong>name</strong><span>description</span></div><span class="c-menu-sections__price">`) |
+
+## Example
+
+```html
+<menu-sections>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Dinner</p>
+  <h2 slot="heading">The menu</h2>
+  <p slot="lede" class="lede">Served 5–10 pm. Ask about tonight's specials.</p>
+  <div slot="sections" class="c-menu-sections__group"><h3>Starters</h3><div class="c-menu-sections__item"><div><strong>Oysters on the half shell</strong><span>Six, mignonette</span></div><span class="c-menu-sections__price">$18</span></div><div class="c-menu-sections__item"><div><strong>Burrata</strong><span>Peaches, basil, olive oil</span></div><span class="c-menu-sections__price">$14</span></div><div class="c-menu-sections__item"><div><strong>Clam chowder</strong><span>Bacon, thyme, oyster crackers</span></div><span class="c-menu-sections__price">$12</span></div></div>
+  <div slot="sections" class="c-menu-sections__group"><h3>Mains</h3><div class="c-menu-sections__item"><div><strong>Seared scallops</strong><span>Brown butter, sweet corn</span></div><span class="c-menu-sections__price">$28</span></div><div class="c-menu-sections__item"><div><strong>Roast half chicken</strong><span>Potato purée, jus</span></div><span class="c-menu-sections__price">$24</span></div><div class="c-menu-sections__item"><div><strong>Haddock</strong><span>Leeks, mussels, saffron broth</span></div><span class="c-menu-sections__price">$27</span></div><div class="c-menu-sections__item"><div><strong>Ribeye</strong><span>16 oz, salsa verde</span></div><span class="c-menu-sections__price">$44</span></div></div>
+  <div slot="sections" class="c-menu-sections__group"><h3>Sides</h3><div class="c-menu-sections__item"><div><strong>Fries</strong><span>Rosemary salt</span></div><span class="c-menu-sections__price">$7</span></div><div class="c-menu-sections__item"><div><strong>Charred broccolini</strong><span>Chili, lemon</span></div><span class="c-menu-sections__price">$9</span></div></div>
+  <div slot="sections" class="c-menu-sections__group"><h3>Dessert</h3><div class="c-menu-sections__item"><div><strong>Blueberry buckle</strong><span>Vanilla ice cream</span></div><span class="c-menu-sections__price">$10</span></div><div class="c-menu-sections__item"><div><strong>Chocolate pot de crème</strong><span>Sea salt, olive oil</span></div><span class="c-menu-sections__price">$10</span></div></div>
+</menu-sections>
+```
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/pricing/menu-sections/styles.css

@@ -0,0 +1,9 @@
+.c-menu-sections__grid{display:grid;gap:var(--space-7) var(--space-8);max-width:66rem;margin-inline:auto}
+@media(min-width:900px){.c-menu-sections__grid{grid-template-columns:1fr 1fr}}
+.c-menu-sections__group{display:grid;align-content:start}
+.c-menu-sections__group > h3{font-size:var(--step-0);font-family:var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border)}
+.c-menu-sections__item{display:grid;grid-template-columns:1fr auto;gap:var(--space-4);align-items:baseline;padding:var(--space-3) 0;border-bottom:1px solid var(--color-border)}
+.c-menu-sections__item > div{display:grid}
+.c-menu-sections__item strong{font-weight:600}
+.c-menu-sections__item span:not(.c-menu-sections__price){color:var(--color-muted);font-size:var(--step-0)}
+.c-menu-sections__price{font-family:var(--font-display);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

package/blocks/pricing/menu-sections/template.html

@@ -0,0 +1 @@
+<section class="c-menu-sections section"><div class="wrap"><div class="section__head section__head--center"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="c-menu-sections__grid"><slot name="sections"></slot></div></div></section>

package/blocks/pricing/pricing-table/README.md

@@ -0,0 +1,40 @@
+# pricing-table
+
+Simple feature compare table.
+
+- **Category:** pricing
+- **Media:** none
+- **Registers:** b2b, professional
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `table` | A `<table class="table">` with `<thead>` (feature, then one column per plan) and `<tbody>`; use the check icon or `—` in cells |
+
+## Example
+
+```html
+<pricing-table>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Compare plans</p>
+  <h2 slot="heading">What's included at each level</h2>
+  <table slot="table" class="table">
+    <thead><tr><th>Feature</th><th>Starter</th><th>Growth</th><th>Scale</th></tr></thead>
+    <tbody>
+      <tr><td>Monthly transactions</td><td>100</td><td>400</td><td>Unlimited</td></tr>
+      <tr><td>Monthly close by the 5th</td><td><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></td><td><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></td><td><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></td></tr>
+      <tr><td>Job-cost reporting</td><td>—</td><td><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></td><td><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></td></tr>
+      <tr><td>Payroll reconciliation</td><td>—</td><td><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></td><td><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></td></tr>
+      <tr><td>Multi-entity consolidation</td><td>—</td><td>—</td><td><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></td></tr>
+      <tr><td>Response time</td><td>2 days</td><td>1 day</td><td>Same day</td></tr>
+    </tbody>
+    <tfoot><tr><td></td><td><a class="btn-outline btn-sm" href="/contact">Choose</a></td><td><a class="btn btn-sm" href="/contact">Choose</a></td><td><a class="btn-outline btn-sm" href="/contact">Choose</a></td></tr></tfoot>
+  </table>
+</pricing-table>
+```
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/pricing/pricing-table/styles.css

@@ -0,0 +1,9 @@
+.c-pricing-table__card{max-width:60rem;margin-inline:auto}
+.c-pricing-table .table{min-width:38rem}
+.c-pricing-table .table th,.c-pricing-table .table td{padding:var(--space-4) var(--space-5)}
+.c-pricing-table .table thead th{background:var(--color-surface-2)}
+.c-pricing-table .table thead th:not(:first-child){font-family:var(--font-display);text-transform:none;letter-spacing:-.01em;font-size:var(--step-1);color:var(--color-text)}
+.c-pricing-table .table tbody tr:last-child td{border-bottom:0}
+.c-pricing-table .table td .icon{color:var(--color-accent);width:1.1rem;height:1.1rem}
+.c-pricing-table .table td:first-child{font-weight:500}
+.c-pricing-table .table tfoot td{border-bottom:0;padding-top:var(--space-5)}

package/blocks/pricing/pricing-table/template.html

@@ -0,0 +1 @@
+<section class="c-pricing-table section section--muted"><div class="wrap"><div class="section__head"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="card c-pricing-table__card"><div class="table-wrap"><slot name="table"></slot></div></div></div></section>

package/blocks/pricing/pricing-tiers/README.md

@@ -0,0 +1,34 @@
+# pricing-tiers
+
+Three pricing tiers.
+
+- **Category:** pricing
+- **Media:** none
+- **Registers:** b2b, professional, beauty
+- **Variants:** highlight-mid
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `tiers` | 3 `.card` tiers: optional `.badge`, `<h3>`, `.price`, `<p>`, `<ul class="list-check">`, button. Add `c-pricing-tiers__featured` to one card to lift it. |
+
+## Example
+
+```html
+<pricing-tiers>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Pricing</p>
+  <h2 slot="heading">Flat monthly pricing. No hourly surprises.</h2>
+  <p slot="lede" class="lede">Every plan includes a dedicated bookkeeper and a monthly close by the 5th.</p>
+  <div slot="tiers" class="card"><div class="card__body"><h3>Starter</h3><p class="price"><span class="price__amount">$349</span><span class="price__period">/mo</span></p><p>Sole proprietors and one-truck operations.</p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Up to 100 transactions / mo</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Monthly P&amp;L and balance sheet</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Email support</li></ul><a class="btn-outline" href="/contact">Start with Starter</a></div></div>
+  <div slot="tiers" class="card c-pricing-tiers__featured"><div class="card__body"><span class="badge badge--accent c-pricing-tiers__badge">Most popular</span><h3>Growth</h3><p class="price"><span class="price__amount">$649</span><span class="price__period">/mo</span></p><p>Crews of 2–10 with payroll and job costing.</p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Up to 400 transactions / mo</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Job-cost reporting</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Payroll reconciliation</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Quarterly review call</li></ul><a class="btn" href="/contact">Choose Growth</a></div></div>
+  <div slot="tiers" class="card"><div class="card__body"><h3>Scale</h3><p class="price"><span class="price__amount">$1,200</span><span class="price__period">/mo</span></p><p>Multi-crew companies and multiple entities.</p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Unlimited transactions</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Multi-entity consolidation</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Cash-flow forecasting</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Dedicated Slack channel</li></ul><a class="btn-outline" href="/contact">Talk to us</a></div></div>
+</pricing-tiers>
+```
+
+Variants: `<pricing-tiers variant="highlight-mid">`.
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/pricing/pricing-tiers/styles.css

@@ -0,0 +1,7 @@
+.c-pricing-tiers__grid{align-items:stretch;max-width:66rem;margin-inline:auto}
+.c-pricing-tiers__grid .card__body{padding:var(--space-6);gap:var(--space-4)}
+.c-pricing-tiers__grid .card__body > h3{font-size:var(--step-2)}
+.c-pricing-tiers__badge{justify-self:start}
+.c-pricing-tiers__grid .list-check{margin-top:var(--space-2);padding-top:var(--space-4);border-top:1px solid var(--color-border);font-size:var(--step-0)}
+.c-pricing-tiers__grid .card__body > .btn,.c-pricing-tiers__grid .card__body > .btn-outline{margin-top:auto;justify-self:stretch}
+.c-pricing-tiers__featured,.c-pricing-tiers--highlight-mid .c-pricing-tiers__grid > :nth-child(2){border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent),var(--shadow-2)}

package/blocks/pricing/pricing-tiers/template.html

@@ -0,0 +1 @@
+<section class="c-pricing-tiers section"><div class="wrap"><div class="section__head section__head--center"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="grid grid--3 c-pricing-tiers__grid"><slot name="tiers"></slot></div></div></section>

package/blocks/pricing/pricing-toggle/README.md

@@ -0,0 +1,34 @@
+# pricing-toggle
+
+Monthly/annual toggle via tabs island.
+
+- **Category:** pricing
+- **Media:** none
+- **Registers:** b2b, professional
+- **Variants:** (none)
+
+## Slots
+
+| Slot | Content |
+|------|---------|
+| `eyebrow` | Optional `<p class="eyebrow">` |
+| `heading` | `<h2>` |
+| `lede` | Optional `<p class="lede">` |
+| `tabs` | A `.tabs__list.tabs__list--pill[role=tablist]` with two `button.tabs__tab[role=tab]`, then two `.tabs__panel[role=tabpanel]` each containing a `.grid.grid--3` of tier cards |
+
+## Example
+
+```html
+<pricing-toggle>
+  <p slot="eyebrow" class="eyebrow eyebrow--accent">Pricing</p>
+  <h2 slot="heading">Pay monthly, or save 15% annually</h2>
+  <div slot="tabs" class="tabs__list tabs__list--pill" role="tablist">
+    <button type="button" class="tabs__tab" role="tab" id="pt-m" aria-controls="pt-pm" aria-selected="true">Monthly</button>
+    <button type="button" class="tabs__tab" role="tab" id="pt-a" aria-controls="pt-pa" aria-selected="false">Annual <span class="badge badge--accent c-pricing-toggle__save">−15%</span></button>
+  </div>
+  <div slot="tabs" class="tabs__panel" role="tabpanel" id="pt-pm" aria-labelledby="pt-m"><div class="grid grid--3"><div class="card"><div class="card__body"><h3>Starter</h3><p class="price"><span class="price__amount">$349</span><span class="price__period">/mo</span></p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>100 transactions / mo</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Monthly P&amp;L</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Email support</li></ul><a class="btn-outline" href="/contact">Choose Starter</a></div></div><div class="card c-pricing-toggle__featured"><div class="card__body"><h3>Growth</h3><p class="price"><span class="price__amount">$649</span><span class="price__period">/mo</span></p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>400 transactions / mo</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Job-cost reporting</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Payroll reconciliation</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Quarterly review</li></ul><a class="btn" href="/contact">Choose Growth</a></div></div><div class="card"><div class="card__body"><h3>Scale</h3><p class="price"><span class="price__amount">$1,200</span><span class="price__period">/mo</span></p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Unlimited transactions</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Multi-entity</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Cash-flow forecasting</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Dedicated channel</li></ul><a class="btn-outline" href="/contact">Choose Scale</a></div></div></div></div>
+  <div slot="tabs" class="tabs__panel" role="tabpanel" id="pt-pa" aria-labelledby="pt-a" hidden><div class="grid grid--3"><div class="card"><div class="card__body"><h3>Starter</h3><p class="price"><span class="price__amount">$297</span><span class="price__period">/mo · billed yearly</span></p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>100 transactions / mo</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Monthly P&amp;L</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Email support</li></ul><a class="btn-outline" href="/contact">Choose Starter</a></div></div><div class="card c-pricing-toggle__featured"><div class="card__body"><h3>Growth</h3><p class="price"><span class="price__amount">$552</span><span class="price__period">/mo · billed yearly</span></p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>400 transactions / mo</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Job-cost reporting</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Payroll reconciliation</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Quarterly review</li></ul><a class="btn" href="/contact">Choose Growth</a></div></div><div class="card"><div class="card__body"><h3>Scale</h3><p class="price"><span class="price__amount">$1,020</span><span class="price__period">/mo · billed yearly</span></p><ul class="list-check"><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Unlimited transactions</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Multi-entity</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Cash-flow forecasting</li><li><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Dedicated channel</li></ul><a class="btn-outline" href="/contact">Choose Scale</a></div></div></div></div>
+</pricing-toggle>
+```
+
+Copy this folder into the site repo as `components/<your-name>/`, rename the root class to `c-<your-name>`, and adapt slots, copy, and media.

package/blocks/pricing/pricing-toggle/styles.css

@@ -0,0 +1,10 @@
+.c-pricing-toggle__tabs{justify-items:center}
+.c-pricing-toggle__tabs .tabs__list{margin-bottom:var(--space-4)}
+.c-pricing-toggle__tabs .tabs__panel{width:100%}
+.c-pricing-toggle__tabs .grid{max-width:66rem;margin-inline:auto;align-items:stretch}
+.c-pricing-toggle__tabs .card__body{padding:var(--space-6);gap:var(--space-4)}
+.c-pricing-toggle__tabs .card__body > h3{font-size:var(--step-2)}
+.c-pricing-toggle__tabs .list-check{margin-top:var(--space-2);padding-top:var(--space-4);border-top:1px solid var(--color-border);font-size:var(--step-0)}
+.c-pricing-toggle__tabs .card__body > .btn,.c-pricing-toggle__tabs .card__body > .btn-outline{margin-top:auto;justify-self:stretch}
+.c-pricing-toggle__featured{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent),var(--shadow-2)}
+.c-pricing-toggle__save{margin-left:.4rem;font-size:.7rem;padding:0 .45rem;min-height:1.25rem}

package/blocks/pricing/pricing-toggle/template.html

@@ -0,0 +1 @@
+<section class="c-pricing-toggle section"><div class="wrap"><div class="section__head section__head--center"><slot name="eyebrow"></slot><slot name="heading"></slot><slot name="lede"></slot></div><div class="tabs c-pricing-toggle__tabs" data-island="tabs"><slot name="tabs"></slot></div></div></section>