howone 0.1.28 → 0.1.30

package/templates/vite/.howone/skills/hallmark/site/examples/najm/tokens.css

@@ -1,97 +0,0 @@
-/* Hallmark tokens · custom theme · NAJM
- * vibe: "hyped Moroccan drop, editorial fashion, sun-warm earth"
- * axes: light / geometric-sans / warm
- */
-
-:root {
-  /* ── Color (OKLCH) ──────────────────────────── */
-  --color-paper: oklch(96.5% 0.012 75);
-  --color-paper-soft: oklch(99% 0.006 75);
-  --color-paper-warm: oklch(93% 0.020 70);
-  --color-ink: oklch(20% 0.022 55);
-  --color-ink-soft: oklch(38% 0.018 55);
-  --color-ink-mute: oklch(56% 0.012 60);
-  --color-rule: oklch(86% 0.014 70);
-  --color-rule-soft: oklch(91% 0.010 70);
-
-  --color-accent: oklch(58% 0.18 35);
-  /* terracotta */
-  --color-accent-deep: oklch(48% 0.20 32);
-  --color-accent-soft: oklch(82% 0.08 45);
-  --color-saffron: oklch(78% 0.16 78);
-  /* sparing */
-  --color-marine: oklch(34% 0.09 240);
-  /* sparing */
-
-  --color-overlay-ink: oklch(20% 0.022 55 / 0.55);
-  --color-focus-ring: oklch(48% 0.20 32);
-
-  /* ── Typography ─────────────────────────────── */
-  --font-display: "Bricolage Grotesque", -apple-system, system-ui, sans-serif;
-  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
-  --font-mono: "JetBrains Mono", ui-monospace, monospace;
-
-  /* Scale */
-  --text-xs: 0.75rem;
-  --text-sm: 0.875rem;
-  --text-base: 1rem;
-  --text-md: 1.0625rem;
-  --text-lg: 1.25rem;
-  --text-xl: 1.625rem;
-  --text-2xl: 2.25rem;
-  --text-3xl: 3.25rem;
-  --text-4xl: clamp(2.75rem, 6vw, 4.5rem);
-  --text-5xl: clamp(3.5rem, 9vw, 7rem);
-  --text-hero: clamp(2.25rem, 7vw, 5.5rem);
-
-  /* Tracking + leading */
-  --track-tight: -0.04em;
-  --track-display: -0.045em;
-  --track-wide: 0.16em;
-  --leading-tight: 0.92;
-  --leading-snug: 1.1;
-  --leading-body: 1.55;
-
-  /* ── Spacing · 4pt scale ─────────────────────── */
-  --space-1: 0.25rem;
-  --space-2: 0.5rem;
-  --space-3: 0.75rem;
-  --space-4: 1rem;
-  --space-5: 1.5rem;
-  --space-6: 2rem;
-  --space-7: 3rem;
-  --space-8: 4rem;
-  --space-9: 6rem;
-  --space-10: 8rem;
-  --space-11: 12rem;
-
-  /* ── Motion ─────────────────────────────────── */
-  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
-  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
-  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
-
-  --dur-fast: 120ms;
-  --dur-base: 200ms;
-  --dur-slow: 320ms;
-
-  /* ── Surface ────────────────────────────────── */
-  --radius-sm: 4px;
-  --radius-md: 10px;
-  --radius-lg: 18px;
-  --radius-pill: 999px;
-
-  --rule-thin: 1px;
-  --rule-base: 2px;
-
-  /* Layout */
-  --gutter: clamp(1rem, 4vw, 2.5rem);
-  --max-w: 1440px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    --dur-fast: 0ms;
-    --dur-base: 0ms;
-    --dur-slow: 0ms;
-  }
-}

package/templates/vite/.howone/skills/hallmark/site/examples/tally/app.js

@@ -1,84 +0,0 @@
-/* Hallmark · motion primitives: counter · marquee (CSS) · hover-tilt
- * respects prefers-reduced-motion
- */
-
-(function () {
-  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-
-  /* ── counter · live ticker for hero status + invoice + bench stats ── */
-  const liveEvents = document.getElementById("live-events");
-  const benchEps   = document.getElementById("bench-eps");
-  const invCalls   = document.getElementById("inv-calls");
-  const invTotal   = document.getElementById("inv-total");
-  const benchMrr   = document.getElementById("bench-mrr");
-
-  let eps   = 12847;
-  let calls = 1284512;
-  let total = 5142.86;
-  let mrr   = 412.6;
-
-  const fmt = (n) => n.toLocaleString("en-US");
-
-  function tick() {
-    // small jitter, bounded
-    eps   += Math.round((Math.random() - 0.4) * 80);
-    if (eps < 11000) eps = 11200;
-    if (eps > 14500) eps = 14200;
-
-    calls += Math.round(Math.random() * 24 + 4);
-    total += Math.random() * 0.18;
-    mrr   += (Math.random() - 0.5) * 0.4;
-    if (mrr < 410) mrr = 410.3;
-    if (mrr > 416) mrr = 415.8;
-
-    if (liveEvents) liveEvents.textContent = fmt(eps);
-    if (benchEps)   benchEps.textContent   = fmt(eps);
-    if (invCalls)   invCalls.textContent   = fmt(calls);
-    if (invTotal)   invTotal.textContent   = total.toFixed(2);
-    if (benchMrr)   benchMrr.textContent   = mrr.toFixed(1);
-  }
-
-  if (!reduceMotion) {
-    tick();
-    setInterval(tick, 1100);
-  }
-
-  /* ── pricing toggle ── */
-  const pricingButtons = document.querySelectorAll(".pricing__toggle button");
-  const pricedSpans    = document.querySelectorAll("[data-price-monthly]");
-
-  pricingButtons.forEach((btn) => {
-    btn.addEventListener("click", () => {
-      const period = btn.dataset.period;
-      pricingButtons.forEach((b) => b.setAttribute("aria-pressed", b === btn ? "true" : "false"));
-      pricedSpans.forEach((span) => {
-        span.textContent = period === "annual" ? span.dataset.priceAnnual : span.dataset.priceMonthly;
-      });
-    });
-  });
-
-  /* ── hover-tilt on feature cards ── */
-  const tiltCards = document.querySelectorAll("[data-tilt]");
-
-  if (!reduceMotion) {
-    tiltCards.forEach((card) => {
-      let raf = null;
-
-      card.addEventListener("mousemove", (e) => {
-        const rect = card.getBoundingClientRect();
-        const x = (e.clientX - rect.left) / rect.width  - 0.5;
-        const y = (e.clientY - rect.top)  / rect.height - 0.5;
-        if (raf) cancelAnimationFrame(raf);
-        raf = requestAnimationFrame(() => {
-          card.style.transform =
-            `perspective(900px) rotateX(${(-y * 4).toFixed(2)}deg) rotateY(${(x * 5).toFixed(2)}deg) translateY(-2px)`;
-        });
-      });
-
-      card.addEventListener("mouseleave", () => {
-        if (raf) cancelAnimationFrame(raf);
-        card.style.transform = "";
-      });
-    });
-  }
-})();

package/templates/vite/.howone/skills/hallmark/site/examples/tally/index.html

@@ -1,446 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>Tally · Bill what your customers actually use</title>
-<meta name="description" content="Tally meters every API call, every minute, every byte — and turns it into invoices your finance team trusts." />
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet" />
-<link rel="stylesheet" href="./styles.css" />
-</head>
-<body>
-
-<!-- ───────── nav · N5 Floating pill ───────── -->
-<nav class="nav" aria-label="Primary">
-  <a href="#" class="nav__brand" aria-label="Tally home">
-    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-      <rect x="3" y="3" width="6" height="18" rx="1.5" fill="currentColor"/>
-      <rect x="11" y="9" width="6" height="12" rx="1.5" fill="currentColor" opacity="0.55"/>
-      <rect x="19" y="14" width="3" height="7" rx="1" fill="currentColor" opacity="0.3"/>
-    </svg>
-    Tally
-  </a>
-  <div class="nav__links">
-    <a class="nav__link" href="#workbench">Product</a>
-    <a class="nav__link" href="#pricing">Pricing</a>
-    <a class="nav__link" href="#">Docs</a>
-    <a class="nav__link" href="#">Changelog</a>
-  </div>
-  <a class="nav__link" href="#">Sign in</a>
-  <button class="nav__cta" type="button">Start free</button>
-</nav>
-
-<!-- ───────── hero · Marquee Hero ───────── -->
-<section class="hero">
-  <div class="container">
-    <div class="hero__live" role="status" aria-live="polite">
-      <span class="dot" aria-hidden="true"></span>
-      <span>LIVE · METERING <strong id="live-events">12,847</strong> EVENTS / SEC</span>
-    </div>
-
-    <div class="hero__layout">
-      <div>
-        <h1 class="hero__h1">
-          Bill what your customers <span class="italic-accent">actually</span> use.
-        </h1>
-        <p class="hero__sub">
-          Tally meters every API call, every minute, every byte — and turns it
-          into invoices your finance team trusts. No usage spreadsheets,
-          no end-of-month dread, no creative accounting.
-        </p>
-        <div class="hero__ctas">
-          <button class="btn btn--primary" type="button">Start free <span aria-hidden="true">→</span></button>
-          <button class="btn btn--ghost" type="button">Book a demo</button>
-        </div>
-        <div class="hero__fineprint">
-          <span>no credit card</span>
-          <span>5-min setup</span>
-          <span>first 100k events free / mo</span>
-        </div>
-      </div>
-
-      <!-- live invoice card (Tier-A pure-CSS art) -->
-      <aside class="invoice" aria-label="Live invoice preview">
-        <div class="invoice__head">
-          <div>
-            <div class="invoice__title">INV-04212</div>
-            <div style="font-size: var(--text-xs); color: var(--color-ink-2); margin-top: 2px;">Acme Robotics · May 2026</div>
-          </div>
-          <span class="invoice__tag">draft · live</span>
-        </div>
-        <div class="invoice__rows">
-          <div class="invoice__row"><span>API calls</span><strong id="inv-calls">1,284,512</strong></div>
-          <div class="invoice__row"><span>Compute (vCPU·hr)</span><strong>3,847.2</strong></div>
-          <div class="invoice__row"><span>Storage (GB)</span><strong>912.8</strong></div>
-          <div class="invoice__row" style="color: var(--color-success);"><span>Volume discount</span><strong>−$214.20</strong></div>
-        </div>
-        <div class="invoice__total">
-          <span>Total this month</span>
-          <span class="num">$<span id="inv-total">5,142.86</span></span>
-        </div>
-        <div class="invoice__bar" aria-hidden="true"><i></i></div>
-        <div style="font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-2); margin-top: 8px;">
-          64 % of $8,000 budget · 12 days remaining
-        </div>
-      </aside>
-    </div>
-
-    <!-- marquee strip -->
-    <div class="hero__marquee" aria-hidden="true">
-      <div class="hero__marquee__track">
-        <span>METER · EVERY · CALL</span>
-        <span>PRICE · WITHOUT · GUESSING</span>
-        <span>INVOICE · ON · AUTOPILOT</span>
-        <span>SYNC · TO · STRIPE</span>
-        <span>AUDIT · WITHOUT · PANIC</span>
-        <span>METER · EVERY · CALL</span>
-        <span>PRICE · WITHOUT · GUESSING</span>
-        <span>INVOICE · ON · AUTOPILOT</span>
-        <span>SYNC · TO · STRIPE</span>
-        <span>AUDIT · WITHOUT · PANIC</span>
-      </div>
-    </div>
-  </div>
-</section>
-
-<!-- ───────── logos ───────── -->
-<section class="logos">
-  <div class="container">
-    <div class="logos__label">Metering revenue for fast-moving teams</div>
-    <div class="logos__row">
-      <div class="l-1">Bramble</div>
-      <div class="l-2">orbit/labs</div>
-      <div class="l-3">FORGE</div>
-      <div class="l-4">Quietly</div>
-      <div class="l-5">Northsky</div>
-      <div class="l-6">Mercer &amp; Co.</div>
-    </div>
-  </div>
-</section>
-
-<!-- ───────── workbench ───────── -->
-<section class="workbench" id="workbench">
-  <div class="container">
-    <div class="section-head">
-      <div>
-        <span class="eyebrow">◇ workbench</span>
-        <h2 class="section-head__title">A pricing console that <em>knows</em> your model.</h2>
-      </div>
-      <p class="section-head__desc">
-        Drop in a meter. Tally watches the events flow in, suggests a
-        price model that fits, and shows you what next month's invoice
-        looks like — before you ship a line of pricing code.
-      </p>
-    </div>
-
-    <div class="bench" role="img" aria-label="Tally console preview">
-      <div class="bench__rail">
-        <div class="bench__brand">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-            <rect x="3" y="3" width="6" height="18" rx="1.5"/>
-            <rect x="11" y="9" width="6" height="12" rx="1.5" opacity="0.55"/>
-            <rect x="19" y="14" width="3" height="7" rx="1" opacity="0.3"/>
-          </svg>
-          Tally
-        </div>
-        <div class="bench__nav">
-          <div class="bench__navitem" aria-current="page">
-            <svg class="glyph" viewBox="0 0 16 16" fill="currentColor"><circle cx="8" cy="8" r="3"/><circle cx="8" cy="8" r="6.5" fill="none" stroke="currentColor"/></svg>
-            Live meters
-          </div>
-          <div class="bench__navitem">
-            <svg class="glyph" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="2" y="2" width="12" height="12" rx="1.5"/><path d="M2 6h12M6 2v12"/></svg>
-            Price models
-          </div>
-          <div class="bench__navitem">
-            <svg class="glyph" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="3" y="2" width="10" height="12" rx="1.5"/><path d="M5 5h6M5 8h6M5 11h4"/></svg>
-            Invoices
-          </div>
-          <div class="bench__navitem">
-            <svg class="glyph" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="8" cy="8" r="6"/><path d="M8 4v4l3 2"/></svg>
-            Forecasts
-          </div>
-          <div class="bench__navitem">
-            <svg class="glyph" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 13l4-4 3 3 4-6"/><circle cx="13" cy="6" r="0.8" fill="currentColor"/></svg>
-            Audit log
-          </div>
-        </div>
-      </div>
-
-      <div class="bench__main">
-        <div class="bench__statrow">
-          <div class="bench__stat">
-            <div class="label">Events / sec</div>
-            <div class="value"><span id="bench-eps">12,847</span><span class="delta">+8.4%</span></div>
-          </div>
-          <div class="bench__stat">
-            <div class="label">MRR (live)</div>
-            <div class="value">$<span id="bench-mrr">412.6</span><small>K</small><span class="delta">+12.1%</span></div>
-          </div>
-          <div class="bench__stat">
-            <div class="label">Active meters</div>
-            <div class="value">237<span class="delta">+6</span></div>
-          </div>
-        </div>
-
-        <div class="bench__chart">
-          <h4>Revenue · last 30 days <span class="live">live</span></h4>
-          <svg viewBox="0 0 600 200" preserveAspectRatio="none" aria-hidden="true">
-            <defs>
-              <linearGradient id="area-grad" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="0%" stop-color="oklch(54% 0.220 268)" stop-opacity="0.34"/>
-                <stop offset="100%" stop-color="oklch(54% 0.220 268)" stop-opacity="0"/>
-              </linearGradient>
-            </defs>
-            <g class="grid">
-              <line x1="0" y1="40"  x2="600" y2="40"/>
-              <line x1="0" y1="80"  x2="600" y2="80"/>
-              <line x1="0" y1="120" x2="600" y2="120"/>
-              <line x1="0" y1="160" x2="600" y2="160"/>
-            </g>
-            <path class="area"
-              d="M0,160 L40,150 L80,140 L120,148 L160,128 L200,134 L240,110 L280,118 L320,96 L360,82 L400,90 L440,68 L480,76 L520,52 L560,44 L600,30 L600,200 L0,200 Z"/>
-            <path class="line"
-              d="M0,160 L40,150 L80,140 L120,148 L160,128 L200,134 L240,110 L280,118 L320,96 L360,82 L400,90 L440,68 L480,76 L520,52 L560,44 L600,30"/>
-            <circle class="dot" cx="600" cy="30" r="6"/>
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-
-<!-- ───────── stats triplet ───────── -->
-<section class="stats">
-  <div class="container">
-    <div class="section-head">
-      <div>
-        <span class="eyebrow">◇ proof</span>
-        <h2 class="section-head__title">Numbers that <em>don't</em> need a footnote.</h2>
-      </div>
-      <p class="section-head__desc">
-        Tally has metered north of forty billion events for teams shipping
-        to seven-figure customers. The math holds.
-      </p>
-    </div>
-
-    <div class="stats__grid">
-      <div class="stats__card">
-        <div class="stats__num">42<small>B+</small></div>
-        <div class="stats__label">events metered</div>
-        <div class="stats__note">Across 14,000+ meters since 2024 — every one of them auditable.</div>
-      </div>
-      <div class="stats__card">
-        <div class="stats__num">9.2<small>×</small></div>
-        <div class="stats__label">faster month-end close</div>
-        <div class="stats__note">From 4-day spreadsheet hell to 11 minutes of "looks good — send."</div>
-      </div>
-      <div class="stats__card">
-        <div class="stats__num">$0.00</div>
-        <div class="stats__label">in invoice disputes</div>
-        <div class="stats__note">Per-call audit trails. Customers see the same numbers you do.</div>
-      </div>
-    </div>
-  </div>
-</section>
-
-<!-- ───────── three feature cards ───────── -->
-<section class="features">
-  <div class="container">
-    <div class="section-head">
-      <div>
-        <span class="eyebrow">◇ how it works</span>
-        <h2 class="section-head__title">Meter, price, invoice — <em>then</em> sleep.</h2>
-      </div>
-      <p class="section-head__desc">
-        Three primitives, one console. Wire one event, configure one model,
-        ship invoices that don't need anyone to "check the math."
-      </p>
-    </div>
-
-    <div class="features__grid">
-      <article class="feature" data-tilt>
-        <div class="feature__art art-meter" aria-hidden="true"></div>
-        <h3 class="feature__title">Meter anything in one line</h3>
-        <p class="feature__desc">
-          Drop a single SDK call wherever the value happens. We handle
-          dedup, ordering, and replay so your meters never lie.
-        </p>
-        <a class="feature__link" href="#">Read the SDK docs</a>
-      </article>
-
-      <article class="feature" data-tilt>
-        <div class="feature__art art-tiers" aria-hidden="true">
-          <i></i><i></i><i></i><i></i><i></i>
-        </div>
-        <h3 class="feature__title">Price without rebuilding</h3>
-        <p class="feature__desc">
-          Tiered, volume, package, hybrid — pick a model in the console
-          and Tally retro-prices the meter. No deploy required.
-        </p>
-        <a class="feature__link" href="#">See price models</a>
-      </article>
-
-      <article class="feature" data-tilt>
-        <div class="feature__art art-invoice" aria-hidden="true">
-          <div class="sheet"><b>INV-04210</b>Bramble · Apr<br/><em>$3,118.40</em></div>
-          <div class="sheet"><b>INV-04211</b>Forge · Apr<br/><em>$8,940.20</em></div>
-          <div class="sheet"><b>INV-04212</b>Acme · May<br/><em>$5,142.86</em></div>
-        </div>
-        <h3 class="feature__title">Invoices customers don't argue with</h3>
-        <p class="feature__desc">
-          Every line ties back to a metered event. When a customer asks
-          "what's this?", you point at a clickable trail.
-        </p>
-        <a class="feature__link" href="#">Browse invoice templates</a>
-      </article>
-    </div>
-  </div>
-</section>
-
-<!-- ───────── pricing ───────── -->
-<section class="pricing" id="pricing">
-  <div class="container">
-    <div class="pricing__head">
-      <span class="eyebrow">◇ pricing</span>
-      <h2 class="section-head__title" style="text-align:center; margin-inline:auto;">Plans that scale with you, <em>not</em> against you.</h2>
-      <div class="pricing__toggle" role="group" aria-label="Billing period">
-        <button type="button" data-period="monthly" aria-pressed="true">Monthly</button>
-        <button type="button" data-period="annual"  aria-pressed="false">Annual <span class="save">save 20%</span></button>
-      </div>
-    </div>
-
-    <div class="pricing__grid">
-      <article class="tier">
-        <div class="tier__name">Starter</div>
-        <div class="tier__price"><span data-price-monthly="$0" data-price-annual="$0">$0</span></div>
-        <p class="tier__desc">Up to 100k events / month. For weekend builds and side projects.</p>
-        <ul class="tier__features">
-          <li>1 meter, 1 product</li>
-          <li>Stripe sync</li>
-          <li>Basic invoice PDF</li>
-          <li>Community support</li>
-        </ul>
-        <button class="btn btn--ghost" type="button" style="margin-top: auto;">Start free</button>
-      </article>
-
-      <article class="tier tier--featured">
-        <span class="tier__badge">Most teams pick this</span>
-        <div class="tier__name">Scale</div>
-        <div class="tier__price">
-          <span data-price-monthly="$249" data-price-annual="$199">$249</span>
-          <small>/ mo</small>
-        </div>
-        <p class="tier__desc">For teams shipping to real customers with real revenue. No event ceiling.</p>
-        <ul class="tier__features">
-          <li>Unlimited meters &amp; products</li>
-          <li>Hybrid &amp; tiered pricing</li>
-          <li>Net-terms &amp; multi-currency invoicing</li>
-          <li>Audit log &amp; SSO</li>
-          <li>Dedicated solutions engineer</li>
-        </ul>
-        <button class="btn btn--primary" type="button" style="margin-top: auto;">Start 14-day trial</button>
-      </article>
-
-      <article class="tier">
-        <div class="tier__name">Enterprise</div>
-        <div class="tier__price"><span>Custom</span></div>
-        <p class="tier__desc">Self-hosted option, custom SLAs, procurement-friendly contracts.</p>
-        <ul class="tier__features">
-          <li>Self-host or VPC peering</li>
-          <li>SOC 2 Type II + HIPAA</li>
-          <li>Custom data residency</li>
-          <li>White-glove onboarding</li>
-        </ul>
-        <button class="btn btn--ghost" type="button" style="margin-top: auto;">Talk to sales</button>
-      </article>
-    </div>
-  </div>
-</section>
-
-<!-- ───────── testimonial ───────── -->
-<section class="testimonial">
-  <div class="container">
-    <p class="testimonial__quote">
-      We went from a four-day month-end to closing the books before lunch.
-    </p>
-    <div class="testimonial__byline">
-      <strong>Imani Okafor</strong>
-      <span>VP Finance · Northsky · 1.4M API calls/day</span>
-    </div>
-  </div>
-</section>
-
-<!-- ───────── CTA ───────── -->
-<section class="cta">
-  <div class="container">
-    <div class="cta__panel">
-      <h2 class="cta__title">Ship usage billing this <em>afternoon</em>.</h2>
-      <p class="cta__sub">
-        Wire a meter, pick a model, send your first invoice — all before
-        your standup runs long. We'll be your finance team's favourite tool by Friday.
-      </p>
-      <div style="display:flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap;">
-        <button class="btn btn--primary" type="button">Start free <span aria-hidden="true">→</span></button>
-        <button class="btn btn--ghost" type="button">Book a 20-minute demo</button>
-      </div>
-    </div>
-  </div>
-</section>
-
-<!-- ───────── footer · Ft5 Statement ───────── -->
-<footer class="footer">
-  <div class="container">
-    <p class="footer__statement">
-      Tally is a pricing engine for teams who'd rather <em>build</em> than reconcile.
-    </p>
-    <div class="footer__row">
-      <div class="footer__col">
-        <h5>Product</h5>
-        <ul>
-          <li><a href="#">Metering</a></li>
-          <li><a href="#">Pricing models</a></li>
-          <li><a href="#">Invoicing</a></li>
-          <li><a href="#">Audit log</a></li>
-        </ul>
-      </div>
-      <div class="footer__col">
-        <h5>Developers</h5>
-        <ul>
-          <li><a href="#">API reference</a></li>
-          <li><a href="#">SDKs</a></li>
-          <li><a href="#">Quickstarts</a></li>
-          <li><a href="#">Status</a></li>
-        </ul>
-      </div>
-      <div class="footer__col">
-        <h5>Company</h5>
-        <ul>
-          <li><a href="#">About</a></li>
-          <li><a href="#">Customers</a></li>
-          <li><a href="#">Careers</a></li>
-          <li><a href="#">Press</a></li>
-        </ul>
-      </div>
-      <div class="footer__col">
-        <h5>Resources</h5>
-        <ul>
-          <li><a href="#">Pricing playbook</a></li>
-          <li><a href="#">Changelog</a></li>
-          <li><a href="#">Security</a></li>
-          <li><a href="#">Contact</a></li>
-        </ul>
-      </div>
-    </div>
-    <div class="footer__legal">
-      <span class="wordmark">Tally</span>
-      <span>© 2026 Tally Labs · Made in Brooklyn &amp; Lisbon · v0.8.0</span>
-    </div>
-  </div>
-</footer>
-
-<script src="./app.js"></script>
-</body>
-</html>