{"$schema":"https://ui.artbloom.tech/schema/registry-item.json","name":"momentum","type":"registry:page","title":"Momentum","description":"A light-mode scheduling-SaaS conversion stack: a live DOM booking widget that loops through date, slots and confirmation, a monthly/annual pricing toggle that rolls the prices, count-up case-study stats and parallax-lagged feature mocks. No image assets; reduced-motion respected.","author":"@artbloom","dependencies":[],"registryDependencies":[],"files":[{"path":"app/momentum/page.tsx","target":"app/momentum/page.tsx","content":"\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\n\n/**\n * Momentum — a light-mode Conversion Stack landing page for a scheduling SaaS.\n *\n * The one bold move is interaction, not decoration: a live DOM scheduling widget\n * that picks a date, fans in time-slot chips, and confirms a booking on a gentle\n * loop; a pricing toggle whose numbers roll between monthly and annual; case-study\n * stats that count up on reveal. Everything else stays quiet — a single indigo\n * accent, hairline borders, generous white, sentence-case labels. A muted green is\n * used only for success semantics (a booked check, an \"available\" dot), never as a\n * second brand colour. All motion is gated on prefers-reduced-motion: reduce.\n */\n\n/* ----------------------------------------------------------------- icons -- */\n\nfunction IconChevron({ dir = \"right\" }: { dir?: \"left\" | \"right\" }) {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path\n        d={dir === \"left\" ? \"M15 6l-6 6 6 6\" : \"M9 6l6 6-6 6\"}\n        stroke=\"currentColor\"\n        strokeWidth=\"1.8\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nfunction IconClock() {\n  return (\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" strokeWidth=\"1.6\" />\n      <path d=\"M12 7.5V12l3 2\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nfunction IconVideo() {\n  return (\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <rect x=\"3\" y=\"6\" width=\"12\" height=\"12\" rx=\"2.5\" stroke=\"currentColor\" strokeWidth=\"1.6\" />\n      <path d=\"M15 10l6-3v10l-6-3\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nfunction IconCheck() {\n  return (\n    <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M5 12.5l4.2 4.2L19 7\" stroke=\"currentColor\" strokeWidth=\"2.4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nfunction Logo() {\n  return (\n    <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"mo-logo\">\n      <rect x=\"1\" y=\"1\" width=\"22\" height=\"22\" rx=\"7\" fill=\"currentColor\" />\n      <path\n        d=\"M6.5 15.5 11 10.5 14 13.2 17.5 8.5\"\n        stroke=\"#fff\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\n/* ------------------------------------------------------------------ hooks -- */\n\n/** Reveal children once when they scroll into view. Reduced-motion shows instantly. */\nfunction useReveal<T extends HTMLElement>() {\n  const ref = useRef<T>(null)\n  const [shown, setShown] = useState(false)\n  useEffect(() => {\n    const node = ref.current\n    if (!node) return\n    if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n      setShown(true)\n      return\n    }\n    const io = new IntersectionObserver(\n      ([e]) => {\n        if (e.isIntersecting) {\n          setShown(true)\n          io.disconnect()\n        }\n      },\n      { threshold: 0.25 },\n    )\n    io.observe(node)\n    return () => io.disconnect()\n  }, [])\n  return [ref, shown] as const\n}\n\n/** Ease a number toward `target` whenever it changes, once `active`. Reduced-motion jumps. */\nfunction useTween(target: number, active: boolean, reduced: boolean, duration = 1100) {\n  const [val, setVal] = useState(0)\n  const valRef = useRef(0)\n  useEffect(() => {\n    if (!active) return\n    if (reduced) {\n      valRef.current = target\n      setVal(target)\n      return\n    }\n    const from = valRef.current\n    const start = performance.now()\n    let raf = 0\n    const tick = (now: number) => {\n      const t = Math.min(1, (now - start) / duration)\n      const eased = 1 - Math.pow(1 - t, 3)\n      const v = from + (target - from) * eased\n      valRef.current = v\n      setVal(v)\n      if (t < 1) raf = requestAnimationFrame(tick)\n    }\n    raf = requestAnimationFrame(tick)\n    return () => cancelAnimationFrame(raf)\n  }, [target, active, reduced, duration])\n  return val\n}\n\n/** Subtle scroll-linked drift, written imperatively so it stays off the render path. */\nfunction useParallax<T extends HTMLElement>(rate: number, reduced: boolean) {\n  const ref = useRef<T>(null)\n  useEffect(() => {\n    const el = ref.current\n    if (!el || reduced) return\n    let raf = 0\n    const update = () => {\n      raf = 0\n      const rect = el.getBoundingClientRect()\n      const vh = window.innerHeight || 1\n      const center = rect.top + rect.height / 2\n      const prog = (center - vh / 2) / (vh / 2 + rect.height / 2)\n      el.style.transform = `translate3d(0, ${(prog * rate).toFixed(2)}px, 0)`\n    }\n    const onScroll = () => {\n      if (!raf) raf = requestAnimationFrame(update)\n    }\n    window.addEventListener(\"scroll\", onScroll, { passive: true })\n    window.addEventListener(\"resize\", onScroll)\n    update()\n    return () => {\n      window.removeEventListener(\"scroll\", onScroll)\n      window.removeEventListener(\"resize\", onScroll)\n      if (raf) cancelAnimationFrame(raf)\n    }\n  }, [rate, reduced])\n  return ref\n}\n\n/* ------------------------------------------------------------- widget data -- */\n\nconst WEEKDAYS = [\"S\", \"M\", \"T\", \"W\", \"T\", \"F\", \"S\"]\nconst CAL_LEAD = 2 // September 2026 opens on a Tuesday\nconst CAL_DATES = Array.from({ length: 30 }, (_, i) => i + 1)\nconst TARGET_DATE = 24\nconst SLOTS = [\"9:00 am\", \"9:30 am\", \"10:00 am\", \"10:30 am\", \"11:00 am\", \"1:30 pm\"]\nconst TARGET_SLOT = 3\n\nfunction calDisabled(d: number) {\n  const col = (CAL_LEAD + d - 1) % 7\n  return d < 16 || col === 0 || col === 6\n}\n\n/**\n * The live scheduling widget. A five-step loop:\n * 0 empty calendar → 1 date picked → 2 slots fan in → 3 slot picked → 4 booked.\n * Reduced-motion settles on step 3, a fully populated, calm state.\n */\nfunction SchedulingWidget({ reduced }: { reduced: boolean }) {\n  const [step, setStep] = useState(0)\n\n  useEffect(() => {\n    if (reduced) {\n      setStep(3)\n      return\n    }\n    const holds = [1300, 1150, 1250, 1500, 2500]\n    let i = 0\n    let timer: ReturnType<typeof setTimeout>\n    const run = () => {\n      timer = setTimeout(() => {\n        i = (i + 1) % holds.length\n        setStep(i)\n        run()\n      }, holds[i])\n    }\n    setStep(0)\n    run()\n    return () => clearTimeout(timer)\n  }, [reduced])\n\n  const dateOn = step >= 1\n  const slotsOn = step >= 2\n  const slotOn = step >= 3\n  const booked = step >= 4\n\n  return (\n    <div className=\"mo-widget\" role=\"img\" aria-label=\"Momentum scheduling widget booking a 30-minute meeting\">\n      <div className=\"mo-w-side\">\n        <div className=\"mo-w-host\">\n          <span className=\"mo-w-avatar\" aria-hidden=\"true\">AR</span>\n          <div>\n            <p className=\"mo-w-org\">Ana Ruiz</p>\n            <p className=\"mo-w-title\">30-minute product intro</p>\n          </div>\n        </div>\n        <ul className=\"mo-w-meta\">\n          <li>\n            <IconClock /> 30 min\n          </li>\n          <li>\n            <IconVideo /> Zoom, added on confirm\n          </li>\n        </ul>\n        <p className=\"mo-w-tz\">Times shown in your local time zone.</p>\n      </div>\n\n      <div className=\"mo-w-main\">\n        <div className=\"mo-w-calhead\">\n          <span>September 2026</span>\n          <div className=\"mo-w-nav\" aria-hidden=\"true\">\n            <button type=\"button\" tabIndex={-1}>\n              <IconChevron dir=\"left\" />\n            </button>\n            <button type=\"button\" tabIndex={-1}>\n              <IconChevron dir=\"right\" />\n            </button>\n          </div>\n        </div>\n\n        <div className=\"mo-w-body\">\n          <div className=\"mo-w-cal\">\n            <div className=\"mo-w-dow\">\n              {WEEKDAYS.map((d, i) => (\n                <span key={i}>{d}</span>\n              ))}\n            </div>\n            <div className=\"mo-w-grid\">\n              {Array.from({ length: CAL_LEAD }).map((_, i) => (\n                <span key={`b${i}`} className=\"mo-w-blank\" />\n              ))}\n              {CAL_DATES.map((d) => {\n                const off = calDisabled(d)\n                const sel = dateOn && d === TARGET_DATE\n                return (\n                  <span\n                    key={d}\n                    className={`mo-w-date${off ? \" is-off\" : \"\"}${sel ? \" is-sel\" : \"\"}${\n                      !off && !sel ? \" is-open\" : \"\"\n                    }`}\n                  >\n                    {d}\n                  </span>\n                )\n              })}\n            </div>\n          </div>\n\n          <div className={`mo-w-slots${slotsOn ? \" is-open\" : \"\"}`}>\n            <p className=\"mo-w-slotday\">Thursday, Sep 24</p>\n            <div className=\"mo-w-sloplist\">\n              {SLOTS.map((s, i) => (\n                <span\n                  key={s}\n                  className={`mo-w-slot${slotOn && i === TARGET_SLOT ? \" is-sel\" : \"\"}`}\n                  style={{ transitionDelay: `${i * 55}ms` }}\n                >\n                  {s}\n                </span>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div className={`mo-w-confirm${booked ? \" is-open\" : \"\"}`} aria-hidden={!booked}>\n        <span className=\"mo-w-tick\">\n          <IconCheck />\n        </span>\n        <p className=\"mo-w-cf-head\">You&rsquo;re booked</p>\n        <p className=\"mo-w-cf-when\">Thursday, September 24 at 10:30 am</p>\n        <p className=\"mo-w-cf-sub\">Calendar invite and Zoom link on their way to both of you.</p>\n      </div>\n    </div>\n  )\n}\n\n/* ------------------------------------------------------------- trust cloud -- */\n\nconst TRUST = [\"Northwind\", \"Lumen\", \"Cadence\", \"Verve\", \"Atlas Freight\", \"Poste\"]\n\n/* ================================================================== page == */\n\nexport default function Momentum() {\n  const [reduced, setReduced] = useState(false)\n  const [stuck, setStuck] = useState(false)\n\n  useEffect(() => {\n    const mq = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n    setReduced(mq.matches)\n    const onMq = () => setReduced(mq.matches)\n    mq.addEventListener(\"change\", onMq)\n\n    let raf = 0\n    const onScroll = () => {\n      if (raf) return\n      raf = requestAnimationFrame(() => {\n        setStuck(window.scrollY > 8)\n        raf = 0\n      })\n    }\n    window.addEventListener(\"scroll\", onScroll, { passive: true })\n    onScroll()\n    return () => {\n      mq.removeEventListener(\"change\", onMq)\n      window.removeEventListener(\"scroll\", onScroll)\n      if (raf) cancelAnimationFrame(raf)\n    }\n  }, [])\n\n  return (\n    <div className=\"mo-root\">\n      <style>{css}</style>\n\n      <header className={`mo-nav${stuck ? \" is-stuck\" : \"\"}`}>\n        <a className=\"mo-brand\" href=\"#top\">\n          <span className=\"mo-brand-mark\">\n            <Logo />\n          </span>\n          Momentum\n        </a>\n        <nav className=\"mo-nav-links\">\n          <a href=\"#features\">Features</a>\n          <a href=\"#pricing\">Pricing</a>\n          <a href=\"#customers\">Customers</a>\n        </nav>\n        <div className=\"mo-nav-cta\">\n          <a href=\"#demo\" className=\"mo-btn mo-btn-ghost\">\n            Book a demo\n          </a>\n          <a href=\"#start\" className=\"mo-btn mo-btn-solid\">\n            Start free\n          </a>\n        </div>\n      </header>\n\n      {/* HERO */}\n      <section className=\"mo-hero\" id=\"top\">\n        <div className=\"mo-hero-copy\">\n          <span className=\"mo-pill\">\n            <span className=\"mo-pill-dot\" aria-hidden=\"true\" />\n            New: team round-robin routing\n          </span>\n          <h1 className=\"mo-h1\">The last scheduling link you&rsquo;ll send.</h1>\n          <p className=\"mo-lede\">\n            Momentum reads your real calendar, offers only the times you&rsquo;re actually free, and books\n            the meeting the second a guest picks one. No back-and-forth, no 2 a.m. double-bookings.\n          </p>\n          <div className=\"mo-hero-actions\">\n            <a href=\"#start\" className=\"mo-btn mo-btn-solid mo-btn-lg\">\n              Start free\n            </a>\n            <a href=\"#demo\" className=\"mo-btn mo-btn-ghost mo-btn-lg\">\n              Book a demo\n            </a>\n          </div>\n          <p className=\"mo-hero-fine\">Free for individuals. No credit card required.</p>\n        </div>\n        <div className=\"mo-hero-visual\">\n          <SchedulingWidget reduced={reduced} />\n        </div>\n      </section>\n\n      {/* TRUST */}\n      <section className=\"mo-trust\">\n        <p className=\"mo-trust-lead\">The teams closing more meetings run on Momentum</p>\n        <ul className=\"mo-trust-row\">\n          {TRUST.map((name) => (\n            <li key={name} className=\"mo-wordmark\">\n              <span className=\"mo-wordmark-glyph\" aria-hidden=\"true\" />\n              {name}\n            </li>\n          ))}\n        </ul>\n      </section>\n\n      {/* BEFORE / AFTER */}\n      <BeforeAfter />\n\n      {/* FEATURES */}\n      <section className=\"mo-features\" id=\"features\">\n        <div className=\"mo-sec-head\">\n          <span className=\"mo-eyebrow\">How teams use it</span>\n          <h2 className=\"mo-h2\">Everything that made scheduling a chore, handled quietly.</h2>\n        </div>\n        {FEATURES.map((f, i) => (\n          <FeatureRow key={f.title} feature={f} flip={i % 2 === 1} reduced={reduced} />\n        ))}\n      </section>\n\n      {/* SOCIAL PROOF */}\n      <ProofSection reduced={reduced} />\n\n      {/* PRICING */}\n      <Pricing reduced={reduced} />\n\n      {/* INTEGRATIONS */}\n      <section className=\"mo-integ\">\n        <div className=\"mo-integ-head\">\n          <span className=\"mo-eyebrow\">Works with your stack</span>\n          <h2 className=\"mo-h2\">It lands where your team already works.</h2>\n          <p className=\"mo-integ-sub\">\n            Sync every calendar, drop meetings into your CRM, and let the tools you already pay for do\n            the busywork.\n          </p>\n        </div>\n        <ul className=\"mo-integ-grid\">\n          {INTEGRATIONS.map((it) => (\n            <li key={it.name} className=\"mo-integ-cell\">\n              <span className=\"mo-integ-glyph\" style={{ background: it.tint }} aria-hidden=\"true\">\n                {it.i}\n              </span>\n              <span className=\"mo-integ-name\">{it.name}</span>\n              <span className=\"mo-integ-kind\">{it.kind}</span>\n            </li>\n          ))}\n        </ul>\n      </section>\n\n      {/* FINAL CTA */}\n      <section className=\"mo-cta\" id=\"start\">\n        <div className=\"mo-cta-inner\">\n          <h2 className=\"mo-cta-title\">Send your last scheduling link today.</h2>\n          <p className=\"mo-cta-lede\">\n            Set it up in the time this page took to read. Your next meeting can book itself.\n          </p>\n          <div className=\"mo-hero-actions mo-cta-actions\">\n            <a href=\"#start\" className=\"mo-btn mo-btn-lg mo-cta-solid\">\n              Start free\n            </a>\n            <a href=\"#demo\" className=\"mo-btn mo-btn-lg mo-cta-ghost\">\n              Book a demo\n            </a>\n          </div>\n          <p className=\"mo-cta-fine\">No credit card required. Free forever for individuals.</p>\n        </div>\n      </section>\n\n      {/* FOOTER */}\n      <footer className=\"mo-footer\">\n        <div className=\"mo-footer-inner\">\n          <div className=\"mo-footer-brand\">\n            <a className=\"mo-brand\" href=\"#top\">\n              <span className=\"mo-brand-mark\">\n                <Logo />\n              </span>\n              Momentum\n            </a>\n            <p className=\"mo-footer-note\">Scheduling that books itself. Made for teams who&rsquo;d rather be in the meeting than arranging it.</p>\n          </div>\n          <div className=\"mo-footer-cols\">\n            {FOOTER.map((col) => (\n              <div key={col.head} className=\"mo-footer-col\">\n                <p className=\"mo-footer-head\">{col.head}</p>\n                <ul>\n                  {col.links.map((l) => (\n                    <li key={l}>\n                      <a href=\"#\">{l}</a>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            ))}\n          </div>\n        </div>\n        <div className=\"mo-footer-base\">\n          <span>&copy; 2026 Momentum Labs, Inc.</span>\n          <span className=\"mo-footer-legal\">\n            <a href=\"#\">Privacy</a>\n            <a href=\"#\">Terms</a>\n            <a href=\"#\">Status</a>\n          </span>\n        </div>\n      </footer>\n    </div>\n  )\n}\n\n/* ----------------------------------------------------------- integrations -- */\n\nconst INTEGRATIONS = [\n  { name: \"Google Calendar\", kind: \"Calendar\", i: \"G\", tint: \"#eef2ff\" },\n  { name: \"Outlook\", kind: \"Calendar\", i: \"O\", tint: \"#eaf3fb\" },\n  { name: \"Zoom\", kind: \"Conferencing\", i: \"Z\", tint: \"#eaf1fe\" },\n  { name: \"Google Meet\", kind: \"Conferencing\", i: \"M\", tint: \"#eafaf1\" },\n  { name: \"Salesforce\", kind: \"CRM\", i: \"S\", tint: \"#eef4fb\" },\n  { name: \"HubSpot\", kind: \"CRM\", i: \"H\", tint: \"#fdf0ec\" },\n  { name: \"Slack\", kind: \"Notifications\", i: \"#\", tint: \"#f3eefb\" },\n  { name: \"Stripe\", kind: \"Payments\", i: \"$\", tint: \"#eef0fe\" },\n  { name: \"Zapier\", kind: \"Automation\", i: \"Z\", tint: \"#fbf1ea\" },\n  { name: \"Webhooks\", kind: \"Developer API\", i: \"{}\", tint: \"#eef1f4\" },\n]\n\nconst FOOTER = [\n  { head: \"Product\", links: [\"Features\", \"Pricing\", \"Round-robin\", \"Integrations\", \"Changelog\"] },\n  { head: \"Company\", links: [\"About\", \"Customers\", \"Careers\", \"Contact\"] },\n  { head: \"Resources\", links: [\"Help center\", \"Scheduling guide\", \"API docs\", \"Status\"] },\n]\n\n/* --------------------------------------------------------- social proof -- */\n\ntype Stat = { value: number; suffix: string; prefix?: string; label: string; decimals?: number }\nconst STATS: Stat[] = [\n  { value: 63, suffix: \"%\", label: \"fewer no-shows in the first quarter\" },\n  { value: 9400, suffix: \"\", label: \"meetings booked without a single email\" },\n  { value: 4.2, suffix: \" days\", label: \"saved per rep every month\", decimals: 1 },\n]\n\nfunction StatCard({ stat, shown, reduced }: { stat: Stat; shown: boolean; reduced: boolean }) {\n  const v = useTween(shown ? stat.value : 0, shown, reduced, 1400)\n  const text = stat.decimals ? v.toFixed(stat.decimals) : Math.round(v).toLocaleString(\"en-US\")\n  return (\n    <div className=\"mo-stat\">\n      <span className=\"mo-stat-num\">\n        {stat.prefix}\n        {text}\n        {stat.suffix}\n      </span>\n      <span className=\"mo-stat-label\">{stat.label}</span>\n    </div>\n  )\n}\n\nfunction ProofSection({ reduced }: { reduced: boolean }) {\n  const [ref, shown] = useReveal<HTMLDivElement>()\n  return (\n    <section className=\"mo-proof\" id=\"customers\" ref={ref}>\n      <div className={`mo-proof-inner${shown ? \" is-in\" : \"\"}`}>\n        <figure className=\"mo-quote\">\n          <blockquote>\n            &ldquo;We cut a full week off our sales cycle the month we switched. Prospects book\n            themselves while they&rsquo;re still excited, and my reps stopped playing email\n            tennis.&rdquo;\n          </blockquote>\n          <figcaption>\n            <span className=\"mo-quote-av\" aria-hidden=\"true\">DO</span>\n            <span>\n              <span className=\"mo-quote-name\">Dana Okafor</span>\n              <span className=\"mo-quote-role\">VP Revenue, Cadence</span>\n            </span>\n          </figcaption>\n        </figure>\n        <div className=\"mo-stats\">\n          {STATS.map((s) => (\n            <StatCard key={s.label} stat={s} shown={shown} reduced={reduced} />\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n\n/* ---------------------------------------------------------------- pricing -- */\n\ntype Tier = {\n  name: string\n  monthly: number\n  blurb: string\n  features: string[]\n  popular?: boolean\n  cta: string\n}\nconst TIERS: Tier[] = [\n  {\n    name: \"Free\",\n    monthly: 0,\n    blurb: \"For individuals scheduling their own meetings.\",\n    features: [\"One booking link\", \"Connect one calendar\", \"Automated email reminders\", \"Zoom & Google Meet\"],\n    cta: \"Start free\",\n  },\n  {\n    name: \"Team\",\n    monthly: 12,\n    blurb: \"For teams that book together and route smartly.\",\n    features: [\"Everything in Free\", \"Round-robin & collective links\", \"Availability rules & buffers\", \"SMS reminders\", \"Salesforce & HubSpot\"],\n    popular: true,\n    cta: \"Start free trial\",\n  },\n  {\n    name: \"Scale\",\n    monthly: 24,\n    blurb: \"For companies that need control and reporting.\",\n    features: [\"Everything in Team\", \"SAML single sign-on\", \"Routing forms & analytics\", \"Managed onboarding\", \"Priority support\"],\n    cta: \"Talk to sales\",\n  },\n]\n\nfunction Price({ monthly, annual, reduced }: { monthly: number; annual: boolean; reduced: boolean }) {\n  const target = annual ? Math.round(monthly * 0.8) : monthly\n  const [ref, shown] = useReveal<HTMLSpanElement>()\n  const v = useTween(shown ? target : monthly, shown, reduced, 550)\n  return (\n    <span className=\"mo-price\" ref={ref}>\n      <span className=\"mo-price-cur\">$</span>\n      <span className=\"mo-price-num\">{Math.round(v)}</span>\n      <span className=\"mo-price-per\">/user, mo</span>\n    </span>\n  )\n}\n\nfunction Pricing({ reduced }: { reduced: boolean }) {\n  const [annual, setAnnual] = useState(true)\n  return (\n    <section className=\"mo-pricing\" id=\"pricing\">\n      <div className=\"mo-sec-head mo-pricing-head\">\n        <span className=\"mo-eyebrow\">Pricing</span>\n        <h2 className=\"mo-h2\">Start free. Upgrade when your calendar earns it.</h2>\n        <div className=\"mo-toggle\" role=\"group\" aria-label=\"Billing period\">\n          <button\n            type=\"button\"\n            className={`mo-toggle-opt${!annual ? \" is-active\" : \"\"}`}\n            aria-pressed={!annual}\n            onClick={() => setAnnual(false)}\n          >\n            Monthly\n          </button>\n          <button\n            type=\"button\"\n            className={`mo-toggle-opt${annual ? \" is-active\" : \"\"}`}\n            aria-pressed={annual}\n            onClick={() => setAnnual(true)}\n          >\n            Annual\n          </button>\n          <span className={`mo-toggle-thumb${annual ? \" is-right\" : \"\"}`} aria-hidden=\"true\" />\n          <span className=\"mo-toggle-save\">Save 20%</span>\n        </div>\n      </div>\n      <div className=\"mo-tiers\">\n        {TIERS.map((t) => (\n          <div key={t.name} className={`mo-tier${t.popular ? \" is-popular\" : \"\"}`}>\n            {t.popular && <span className=\"mo-tier-flag\">Most popular</span>}\n            <h3 className=\"mo-tier-name\">{t.name}</h3>\n            <p className=\"mo-tier-blurb\">{t.blurb}</p>\n            {t.monthly === 0 ? (\n              <span className=\"mo-price\">\n                <span className=\"mo-price-num\">Free</span>\n              </span>\n            ) : (\n              <Price monthly={t.monthly} annual={annual} reduced={reduced} />\n            )}\n            <a href=\"#start\" className={`mo-btn mo-btn-lg ${t.popular ? \"mo-btn-solid\" : \"mo-btn-ghost\"} mo-tier-cta`}>\n              {t.cta}\n            </a>\n            <ul className=\"mo-tier-feats\">\n              {t.features.map((f) => (\n                <li key={f}>\n                  <span className=\"mo-frow-tick\" aria-hidden=\"true\">\n                    <IconCheck />\n                  </span>\n                  {f}\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n}\n\n/* ------------------------------------------------------- before / after -- */\n\nfunction BeforeAfter() {\n  const [ref, shown] = useReveal<HTMLDivElement>()\n  return (\n    <section className=\"mo-ba\" ref={ref}>\n      <div className={`mo-ba-inner${shown ? \" is-in\" : \"\"}`}>\n        <div className=\"mo-ba-copy\">\n          <span className=\"mo-eyebrow\">The difference</span>\n          <h2 className=\"mo-h2\">One link beats six emails across three time zones.</h2>\n          <p className=\"mo-ba-lede\">\n            The old way is a thread that never quite lands. The Momentum way is a link that already\n            knows when you&rsquo;re free.\n          </p>\n        </div>\n        <div className=\"mo-ba-grid\">\n          <div className=\"mo-ba-card is-before\">\n            <span className=\"mo-ba-tag\">Before</span>\n            <ul className=\"mo-thread\">\n              <li>&ldquo;Does Tuesday work?&rdquo;</li>\n              <li className=\"mo-thread-them\">&ldquo;Tuesday&rsquo;s full &mdash; Thursday?&rdquo;</li>\n              <li>&ldquo;Thursday I&rsquo;m in Berlin, so&hellip;&rdquo;</li>\n              <li className=\"mo-thread-them\">&ldquo;What&rsquo;s that in your time?&rdquo;</li>\n              <li className=\"mo-thread-late\">Re: Re: Re: quick sync?</li>\n            </ul>\n          </div>\n          <div className=\"mo-ba-card is-after\">\n            <span className=\"mo-ba-tag is-ok\">After</span>\n            <div className=\"mo-after-row\">\n              <span className=\"mo-after-dot\" aria-hidden=\"true\" />\n              <div>\n                <p className=\"mo-after-line\">Thursday, 10:30 am</p>\n                <p className=\"mo-after-sub\">Confirmed the moment they picked it</p>\n              </div>\n              <span className=\"mo-after-check\" aria-hidden=\"true\">\n                <IconCheck />\n              </span>\n            </div>\n            <p className=\"mo-after-foot\">Invite sent. Reminder scheduled. Nothing left in your inbox.</p>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n\n/* ----------------------------------------------------------- feature rows -- */\n\ntype Feature = {\n  title: string\n  benefit: string\n  points: string[]\n  mock: \"rules\" | \"team\" | \"reminders\"\n}\n\nconst FEATURES: Feature[] = [\n  {\n    title: \"Availability rules that guard your focus\",\n    benefit:\n      \"Set working hours, daily meeting caps, and buffers once. Momentum enforces them on every link, so nobody books over your deep-work block or stacks eight calls back to back.\",\n    points: [\"Automatic buffers between meetings\", \"A cap on how many book per day\", \"Minimum notice before anyone grabs a slot\"],\n    mock: \"rules\",\n  },\n  {\n    title: \"Round-robin that shares the load fairly\",\n    benefit:\n      \"Pool a team behind one link and Momentum routes each guest to whoever is free and next in line. Weight it by capacity when your senior reps need lighter days.\",\n    points: [\"Routes by real-time availability\", \"Weighted by fairness or capacity\", \"Falls back to a teammate automatically\"],\n    mock: \"team\",\n  },\n  {\n    title: \"Reminders that quietly kill no-shows\",\n    benefit:\n      \"Email and text nudges go out on your schedule, with a one-tap reschedule link. Teams switching to Momentum see attendance climb without lifting a finger.\",\n    points: [\"Email and SMS on your cadence\", \"One-tap reschedule, no email chain\", \"Follow-ups fire after the call ends\"],\n    mock: \"reminders\",\n  },\n]\n\nfunction FeatureMock({ kind }: { kind: Feature[\"mock\"] }) {\n  if (kind === \"rules\") {\n    return (\n      <div className=\"mo-mock mo-mock-rules\">\n        <div className=\"mo-mock-bar\">\n          <span>Working hours</span>\n          <span className=\"mo-mock-val\">9:00 am &ndash; 5:00 pm</span>\n        </div>\n        <div className=\"mo-mock-bar\">\n          <span>Buffer before &amp; after</span>\n          <span className=\"mo-mock-pill\">15 min</span>\n        </div>\n        <div className=\"mo-mock-bar\">\n          <span>Max meetings per day</span>\n          <span className=\"mo-mock-pill\">6</span>\n        </div>\n        <div className=\"mo-mock-toggle\">\n          <span>Protect Fridays for focus</span>\n          <span className=\"mo-switch is-on\" aria-hidden=\"true\"><span /></span>\n        </div>\n      </div>\n    )\n  }\n  if (kind === \"team\") {\n    return (\n      <div className=\"mo-mock mo-mock-team\">\n        <p className=\"mo-mock-label\">Next in rotation</p>\n        {[\n          { n: \"Ana Ruiz\", i: \"AR\", free: true, load: \"3 today\" },\n          { n: \"Dev Patel\", i: \"DP\", free: true, load: \"2 today\" },\n          { n: \"Mara Kane\", i: \"MK\", free: false, load: \"full\" },\n        ].map((m, idx) => (\n          <div key={m.n} className={`mo-team-row${idx === 0 ? \" is-next\" : \"\"}`}>\n            <span className=\"mo-team-av\">{m.i}</span>\n            <span className=\"mo-team-name\">{m.n}</span>\n            <span className={`mo-team-state${m.free ? \" is-free\" : \"\"}`}>\n              {m.free ? \"available\" : \"at capacity\"}\n            </span>\n            <span className=\"mo-team-load\">{m.load}</span>\n          </div>\n        ))}\n        <p className=\"mo-mock-foot\">Guest is routed to Ana, next in line and free.</p>\n      </div>\n    )\n  }\n  return (\n    <div className=\"mo-mock mo-mock-rem\">\n      <div className=\"mo-rem-row\">\n        <span className=\"mo-rem-when\">24h before</span>\n        <span className=\"mo-rem-what\">Email reminder</span>\n        <span className=\"mo-rem-ok\" aria-hidden=\"true\"><IconCheck /></span>\n      </div>\n      <div className=\"mo-rem-row\">\n        <span className=\"mo-rem-when\">1h before</span>\n        <span className=\"mo-rem-what\">Text with join link</span>\n        <span className=\"mo-rem-ok\" aria-hidden=\"true\"><IconCheck /></span>\n      </div>\n      <div className=\"mo-rem-row is-pending\">\n        <span className=\"mo-rem-when\">After call</span>\n        <span className=\"mo-rem-what\">Follow-up &amp; recap</span>\n        <span className=\"mo-rem-dot\" aria-hidden=\"true\" />\n      </div>\n      <p className=\"mo-mock-foot\">Attendance up, and not one message you had to send.</p>\n    </div>\n  )\n}\n\nfunction FeatureRow({ feature, flip, reduced }: { feature: Feature; flip: boolean; reduced: boolean }) {\n  const [ref, shown] = useReveal<HTMLDivElement>()\n  const parRef = useParallax<HTMLDivElement>(reduced ? 0 : -26, reduced)\n  return (\n    <div className={`mo-frow${flip ? \" is-flip\" : \"\"}${shown ? \" is-in\" : \"\"}`} ref={ref}>\n      <div className=\"mo-frow-copy\">\n        <h3 className=\"mo-frow-title\">{feature.title}</h3>\n        <p className=\"mo-frow-benefit\">{feature.benefit}</p>\n        <ul className=\"mo-frow-points\">\n          {feature.points.map((p) => (\n            <li key={p}>\n              <span className=\"mo-frow-tick\" aria-hidden=\"true\">\n                <IconCheck />\n              </span>\n              {p}\n            </li>\n          ))}\n        </ul>\n      </div>\n      <div className=\"mo-frow-visual\">\n        <div className=\"mo-frow-par\" ref={parRef}>\n          <FeatureMock kind={feature.mock} />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst css = `\n.mo-root {\n  --bg: #fbfbfd;\n  --card: #ffffff;\n  --ink: #12141a;\n  --muted: #5b6270;\n  --faint: #9aa0ad;\n  --accent: #4b47e0;\n  --accent-press: #3d39c9;\n  --accent-soft: rgba(75, 71, 224, 0.08);\n  --accent-line: rgba(75, 71, 224, 0.22);\n  --ok: #0f9d6a;\n  --ok-soft: rgba(15, 157, 106, 0.12);\n  --line: rgba(18, 20, 26, 0.09);\n  --line-2: rgba(18, 20, 26, 0.14);\n  --shadow-sm: 0 1px 2px rgba(18, 20, 26, 0.05), 0 4px 12px -6px rgba(18, 20, 26, 0.1);\n  --shadow-lg: 0 24px 60px -28px rgba(28, 30, 60, 0.4), 0 8px 24px -16px rgba(18, 20, 26, 0.14);\n  background: var(--bg);\n  color: var(--ink);\n  font-family: var(--font-geist), system-ui, -apple-system, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  line-height: 1.6;\n  overflow-x: hidden;\n}\n.mo-root *,\n.mo-root *::before,\n.mo-root *::after { box-sizing: border-box; }\n.mo-root ::selection { background: var(--accent); color: #fff; }\n\n/* buttons */\n.mo-btn {\n  display: inline-flex; align-items: center; justify-content: center;\n  font: inherit; font-weight: 550; font-size: 0.95rem; text-decoration: none;\n  padding: 0.62rem 1.15rem; border-radius: 10px; border: 1px solid transparent;\n  cursor: pointer; white-space: nowrap;\n  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s, box-shadow 0.3s, border-color 0.2s, color 0.2s;\n}\n.mo-btn-solid { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(75, 71, 224, 0.4), 0 10px 24px -14px rgba(75, 71, 224, 0.9); }\n.mo-btn-solid:hover { background: var(--accent-press); transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(75, 71, 224, 0.7); }\n.mo-btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line-2); }\n.mo-btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }\n.mo-btn-lg { padding: 0.85rem 1.5rem; font-size: 1rem; border-radius: 11px; }\n\n/* NAV */\n.mo-nav {\n  position: sticky; top: 0; z-index: 60;\n  display: flex; align-items: center; gap: 1.5rem;\n  padding: 0.85rem clamp(1.1rem, 4vw, 3rem);\n  background: rgba(251, 251, 253, 0.82);\n  border-bottom: 1px solid transparent;\n  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;\n}\n.mo-nav.is-stuck { background: rgba(251, 251, 253, 0.97); border-bottom-color: var(--line); box-shadow: 0 1px 0 rgba(18,20,26,0.02), 0 8px 24px -20px rgba(18,20,26,0.4); }\n.mo-brand {\n  display: inline-flex; align-items: center; gap: 0.55rem;\n  font-weight: 650; font-size: 1.12rem; letter-spacing: -0.02em;\n  color: var(--ink); text-decoration: none; margin-right: auto;\n}\n.mo-brand-mark { color: var(--accent); display: inline-flex; }\n.mo-logo { display: block; }\n.mo-nav-links { display: flex; gap: 1.6rem; }\n.mo-nav-links a { color: var(--muted); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: color 0.2s; }\n.mo-nav-links a:hover { color: var(--ink); }\n.mo-nav-cta { display: flex; align-items: center; gap: 0.6rem; }\n@media (max-width: 860px) { .mo-nav-links { display: none; } }\n@media (max-width: 560px) { .mo-nav-cta .mo-btn-ghost { display: none; } }\n\n/* HERO */\n.mo-hero {\n  display: grid; grid-template-columns: 1.02fr 1fr; align-items: center;\n  gap: clamp(2rem, 5vw, 4.5rem);\n  max-width: 1200px; margin: 0 auto;\n  padding: clamp(3rem, 7vw, 6rem) clamp(1.1rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);\n}\n.mo-pill {\n  display: inline-flex; align-items: center; gap: 0.5rem;\n  background: var(--accent-soft); color: var(--accent-press);\n  border: 1px solid var(--accent-line);\n  font-size: 0.85rem; font-weight: 550; padding: 0.32rem 0.75rem; border-radius: 999px;\n  margin-bottom: 1.5rem;\n}\n.mo-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }\n.mo-h1 {\n  font-size: clamp(2.5rem, 5.4vw, 4.2rem); line-height: 1.02; letter-spacing: -0.035em;\n  font-weight: 640; margin: 0 0 1.3rem; max-width: 14ch;\n}\n.mo-lede { font-size: clamp(1.08rem, 1.5vw, 1.28rem); color: var(--muted); margin: 0 0 2rem; max-width: 34rem; }\n.mo-hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }\n.mo-hero-fine { color: var(--faint); font-size: 0.9rem; margin: 1.1rem 0 0; }\n@media (max-width: 900px) {\n  .mo-hero { grid-template-columns: 1fr; }\n  .mo-h1 { max-width: 18ch; }\n}\n\n/* SCHEDULING WIDGET */\n.mo-widget {\n  position: relative;\n  display: grid; grid-template-columns: 12rem 1fr;\n  background: var(--card); border: 1px solid var(--line);\n  border-radius: 18px; box-shadow: var(--shadow-lg);\n  overflow: hidden; min-height: 20rem;\n}\n.mo-w-side { padding: 1.4rem; border-right: 1px solid var(--line); background: linear-gradient(180deg, #fcfcff, #f7f7fb); }\n.mo-w-host { display: flex; gap: 0.7rem; align-items: center; margin-bottom: 1.1rem; }\n.mo-w-avatar {\n  flex: 0 0 auto; width: 2.35rem; height: 2.35rem; border-radius: 50%;\n  background: var(--accent); color: #fff; font-size: 0.82rem; font-weight: 600;\n  display: grid; place-items: center; letter-spacing: 0.01em;\n}\n.mo-w-org { font-size: 0.82rem; color: var(--muted); margin: 0; }\n.mo-w-title { font-size: 0.98rem; font-weight: 600; margin: 0.05rem 0 0; letter-spacing: -0.01em; }\n.mo-w-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }\n.mo-w-meta li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; color: var(--muted); }\n.mo-w-meta svg { color: var(--faint); flex: 0 0 auto; }\n.mo-w-tz { font-size: 0.78rem; color: var(--faint); margin: 1.1rem 0 0; }\n\n.mo-w-main { padding: 1.3rem 1.4rem; }\n.mo-w-calhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }\n.mo-w-calhead > span { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }\n.mo-w-nav { display: flex; gap: 0.3rem; }\n.mo-w-nav button {\n  display: grid; place-items: center; width: 1.8rem; height: 1.8rem; padding: 0;\n  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--muted); cursor: default;\n}\n.mo-w-body { display: grid; grid-template-columns: 1fr 8.5rem; gap: 1.1rem; }\n.mo-w-dow, .mo-w-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }\n.mo-w-dow { margin-bottom: 5px; }\n.mo-w-dow span { text-align: center; font-size: 0.7rem; color: var(--faint); font-weight: 600; }\n.mo-w-date {\n  aspect-ratio: 1; display: grid; place-items: center;\n  font-size: 0.82rem; border-radius: 8px; font-variant-numeric: tabular-nums;\n  color: var(--ink); transition: background 0.3s, color 0.3s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.mo-w-blank { aspect-ratio: 1; }\n.mo-w-date.is-off { color: var(--faint); opacity: 0.55; }\n.mo-w-date.is-open { background: var(--accent-soft); color: var(--accent-press); font-weight: 550; }\n.mo-w-date.is-sel { background: var(--accent); color: #fff; font-weight: 600; transform: scale(1.06); box-shadow: 0 6px 16px -8px rgba(75,71,224,0.9); }\n\n.mo-w-slots { border-left: 1px solid var(--line); padding-left: 1.1rem; opacity: 0; transition: opacity 0.4s ease; }\n.mo-w-slots.is-open { opacity: 1; }\n.mo-w-slotday { font-size: 0.82rem; font-weight: 600; margin: 0 0 0.6rem; letter-spacing: -0.01em; }\n.mo-w-sloplist { display: grid; gap: 0.4rem; }\n.mo-w-slot {\n  font-size: 0.82rem; font-weight: 550; text-align: center; padding: 0.42rem 0;\n  border: 1px solid var(--accent-line); border-radius: 8px; color: var(--accent-press);\n  background: var(--card);\n  opacity: 0; transform: translateY(6px);\n  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s, color 0.3s;\n}\n.mo-w-slots.is-open .mo-w-slot { opacity: 1; transform: none; }\n.mo-w-slot.is-sel { background: var(--accent); color: #fff; border-color: var(--accent); }\n\n.mo-w-confirm {\n  position: absolute; inset: 0; background: var(--card);\n  display: flex; flex-direction: column; align-items: center; justify-content: center;\n  text-align: center; padding: 1.5rem; gap: 0.3rem;\n  opacity: 0; transform: scale(0.985); pointer-events: none;\n  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.mo-w-confirm.is-open { opacity: 1; transform: none; }\n.mo-w-tick {\n  width: 3.1rem; height: 3.1rem; border-radius: 50%; display: grid; place-items: center;\n  background: var(--ok-soft); color: var(--ok); margin-bottom: 0.6rem;\n}\n.mo-w-cf-head { font-size: 1.25rem; font-weight: 640; letter-spacing: -0.02em; margin: 0; }\n.mo-w-cf-when { font-size: 0.95rem; font-weight: 550; margin: 0.1rem 0 0; }\n.mo-w-cf-sub { font-size: 0.86rem; color: var(--muted); margin: 0.5rem 0 0; max-width: 22rem; }\n\n@media (max-width: 460px) {\n  .mo-widget { grid-template-columns: 1fr; }\n  .mo-w-side { border-right: none; border-bottom: 1px solid var(--line); }\n  .mo-w-body { grid-template-columns: 1fr; }\n  .mo-w-slots { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 0.9rem; }\n  .mo-w-sloplist { grid-template-columns: repeat(3, 1fr); }\n}\n\n/* TRUST CLOUD */\n.mo-trust {\n  max-width: 1120px; margin: 0 auto;\n  padding: clamp(1rem, 3vw, 2rem) clamp(1.1rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);\n  text-align: center;\n}\n.mo-trust-lead { font-size: 0.92rem; color: var(--muted); margin: 0 0 1.6rem; }\n.mo-trust-row {\n  list-style: none; margin: 0; padding: 0;\n  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;\n  gap: clamp(1.5rem, 5vw, 3.5rem);\n}\n.mo-wordmark {\n  display: inline-flex; align-items: center; gap: 0.5rem;\n  font-size: 1.1rem; font-weight: 640; letter-spacing: -0.02em;\n  color: var(--ink); opacity: 0.42; filter: grayscale(1);\n  transition: opacity 0.3s;\n}\n.mo-wordmark:hover { opacity: 0.72; }\n.mo-wordmark-glyph {\n  width: 1.05rem; height: 1.05rem; border-radius: 5px;\n  background: var(--ink); opacity: 0.85;\n  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);\n}\n.mo-wordmark:nth-child(2) .mo-wordmark-glyph { border-radius: 50%; clip-path: none; }\n.mo-wordmark:nth-child(3) .mo-wordmark-glyph { clip-path: polygon(50% 0, 100% 100%, 0 100%); }\n.mo-wordmark:nth-child(4) .mo-wordmark-glyph { border-radius: 50%; clip-path: polygon(0 0, 100% 0, 100% 100%); }\n.mo-wordmark:nth-child(5) .mo-wordmark-glyph { border-radius: 2px; clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%); }\n.mo-wordmark:nth-child(6) .mo-wordmark-glyph { border-radius: 50%; }\n\n/* shared section furniture */\n.mo-eyebrow { display: block; font-size: 0.9rem; font-weight: 600; color: var(--accent); margin-bottom: 0.7rem; }\n.mo-h2 {\n  font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.06; letter-spacing: -0.03em;\n  font-weight: 640; margin: 0; max-width: 18ch;\n}\n.mo-sec-head { max-width: 1120px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); padding: 0 clamp(1.1rem, 4vw, 3rem); }\n\n/* BEFORE / AFTER */\n.mo-ba { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }\n.mo-ba-inner {\n  max-width: 1120px; margin: 0 auto;\n  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.1rem, 4vw, 3rem);\n  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;\n}\n.mo-ba-lede { color: var(--muted); font-size: 1.08rem; margin: 1.1rem 0 0; }\n.mo-ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\n.mo-ba-card {\n  border-radius: 14px; padding: 1.3rem; border: 1px solid var(--line);\n  opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.mo-ba-inner.is-in .mo-ba-card { opacity: 1; transform: none; }\n.mo-ba-inner.is-in .mo-ba-card.is-after { transition-delay: 0.12s; }\n.mo-ba-card.is-before { background: #fafafa; }\n.mo-ba-card.is-after { background: linear-gradient(180deg, #fff, #fbfbff); box-shadow: var(--shadow-sm); border-color: var(--accent-line); }\n.mo-ba-tag {\n  display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--muted);\n  background: rgba(18,20,26,0.05); padding: 0.2rem 0.55rem; border-radius: 6px; margin-bottom: 0.9rem;\n}\n.mo-ba-tag.is-ok { color: var(--ok); background: var(--ok-soft); }\n.mo-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }\n.mo-thread li {\n  font-size: 0.86rem; color: var(--muted); background: var(--card); border: 1px solid var(--line);\n  padding: 0.5rem 0.7rem; border-radius: 9px 9px 9px 2px; max-width: 15rem;\n}\n.mo-thread li.mo-thread-them { margin-left: auto; border-radius: 9px 9px 2px 9px; background: #f2f2f5; }\n.mo-thread li.mo-thread-late { max-width: none; color: var(--faint); font-style: italic; text-align: center; border-style: dashed; background: transparent; }\n.mo-after-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0 1rem; }\n.mo-after-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; box-shadow: 0 0 0 4px var(--ok-soft); }\n.mo-after-line { font-size: 1.05rem; font-weight: 640; margin: 0; letter-spacing: -0.01em; }\n.mo-after-sub { font-size: 0.82rem; color: var(--muted); margin: 0.1rem 0 0; }\n.mo-after-check { margin-left: auto; color: var(--ok); display: inline-flex; }\n.mo-after-foot { font-size: 0.86rem; color: var(--muted); margin: 0; padding-top: 0.9rem; border-top: 1px solid var(--line); }\n@media (max-width: 820px) { .mo-ba-inner { grid-template-columns: 1fr; } }\n@media (max-width: 520px) { .mo-ba-grid { grid-template-columns: 1fr; } }\n\n/* FEATURE ROWS */\n.mo-features {\n  max-width: 1120px; margin: 0 auto;\n  padding: clamp(4rem, 8vw, 7rem) clamp(1.1rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);\n}\n.mo-frow {\n  display: grid; grid-template-columns: 1fr 1fr; align-items: center;\n  gap: clamp(2rem, 6vw, 5rem); margin-bottom: clamp(3.5rem, 7vw, 6rem);\n}\n.mo-frow.is-flip .mo-frow-copy { order: 2; }\n.mo-frow-copy, .mo-frow-visual { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }\n.mo-frow-visual { transition-delay: 0.14s; }\n.mo-frow.is-in .mo-frow-copy, .mo-frow.is-in .mo-frow-visual { opacity: 1; transform: none; }\n.mo-frow-title { font-size: clamp(1.4rem, 2.6vw, 1.95rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 620; margin: 0 0 0.9rem; }\n.mo-frow-benefit { color: var(--muted); font-size: 1.05rem; margin: 0 0 1.4rem; }\n.mo-frow-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }\n.mo-frow-points li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.98rem; color: var(--ink); }\n.mo-frow-tick { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: 0.05rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }\n.mo-frow-tick svg { width: 15px; height: 15px; }\n@media (max-width: 820px) {\n  .mo-frow { grid-template-columns: 1fr; gap: 1.8rem; }\n  .mo-frow.is-flip .mo-frow-copy { order: 0; }\n}\n\n/* feature mocks */\n.mo-frow-par { will-change: transform; }\n.mo-mock { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem; box-shadow: var(--shadow-sm); }\n.mo-mock-label { font-size: 0.78rem; font-weight: 600; color: var(--faint); margin: 0 0 0.9rem; }\n.mo-mock-foot { font-size: 0.84rem; color: var(--muted); margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--line); }\n.mo-mock-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }\n.mo-mock-bar:last-of-type { border-bottom: none; }\n.mo-mock-val { font-weight: 550; font-variant-numeric: tabular-nums; }\n.mo-mock-pill { background: var(--accent-soft); color: var(--accent-press); font-weight: 600; font-size: 0.82rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-variant-numeric: tabular-nums; }\n.mo-mock-toggle { display: flex; align-items: center; justify-content: space-between; margin-top: 0.7rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 0.92rem; }\n.mo-switch { width: 2.3rem; height: 1.3rem; border-radius: 999px; background: rgba(18,20,26,0.14); position: relative; transition: background 0.3s; flex: 0 0 auto; }\n.mo-switch span { position: absolute; top: 2px; left: 2px; width: calc(1.3rem - 4px); height: calc(1.3rem - 4px); border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }\n.mo-switch.is-on { background: var(--accent); }\n.mo-switch.is-on span { transform: translateX(1rem); }\n\n.mo-team-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 0.7rem; padding: 0.6rem 0.7rem; border-radius: 10px; margin-bottom: 0.35rem; }\n.mo-team-row.is-next { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }\n.mo-team-av { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--ink); color: #fff; font-size: 0.72rem; font-weight: 600; display: grid; place-items: center; }\n.mo-team-row.is-next .mo-team-av { background: var(--accent); }\n.mo-team-name { font-size: 0.92rem; font-weight: 550; }\n.mo-team-state { font-size: 0.76rem; font-weight: 600; color: var(--faint); }\n.mo-team-state.is-free { color: var(--ok); }\n.mo-team-load { font-size: 0.78rem; color: var(--faint); font-variant-numeric: tabular-nums; }\n\n.mo-rem-row { display: grid; grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: 0.6rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }\n.mo-rem-when { font-size: 0.78rem; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }\n.mo-rem-what { font-size: 0.92rem; font-weight: 500; }\n.mo-rem-ok { color: var(--ok); display: inline-flex; }\n.mo-rem-ok svg { width: 18px; height: 18px; }\n.mo-rem-dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--faint); }\n.mo-rem-row.is-pending .mo-rem-what { color: var(--muted); }\n\n/* SOCIAL PROOF */\n.mo-proof { background: var(--ink); color: #fff; }\n.mo-proof-inner {\n  max-width: 1120px; margin: 0 auto;\n  padding: clamp(4rem, 8vw, 6.5rem) clamp(1.1rem, 4vw, 3rem);\n  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center;\n}\n.mo-quote { margin: 0; opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1); }\n.mo-proof-inner.is-in .mo-quote { opacity: 1; transform: none; }\n.mo-quote blockquote {\n  font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.32; letter-spacing: -0.02em;\n  font-weight: 520; margin: 0 0 1.6rem;\n}\n.mo-quote figcaption { display: flex; align-items: center; gap: 0.8rem; }\n.mo-quote-av { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 600; font-size: 0.85rem; display: grid; place-items: center; flex: 0 0 auto; }\n.mo-quote-name { display: block; font-weight: 600; }\n.mo-quote-role { display: block; font-size: 0.9rem; color: #a7abb8; }\n.mo-stats { display: grid; gap: 1.6rem; }\n.mo-stat { border-left: 2px solid var(--accent); padding-left: 1.1rem; }\n.mo-stat-num { display: block; font-size: clamp(2.2rem, 4.5vw, 3.2rem); font-weight: 660; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }\n.mo-stat-label { display: block; font-size: 0.95rem; color: #a7abb8; margin-top: 0.5rem; max-width: 22rem; }\n@media (max-width: 820px) { .mo-proof-inner { grid-template-columns: 1fr; } }\n\n/* PRICING */\n.mo-pricing { max-width: 1120px; margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) clamp(1.1rem, 4vw, 3rem); }\n.mo-pricing-head { margin-bottom: clamp(2rem, 4vw, 3rem); }\n.mo-toggle {\n  position: relative; display: inline-flex; margin-top: 1.6rem;\n  background: rgba(18,20,26,0.05); border: 1px solid var(--line); border-radius: 999px; padding: 4px;\n}\n.mo-toggle-opt {\n  position: relative; z-index: 1; border: none; background: none; cursor: pointer;\n  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--muted);\n  padding: 0.45rem 1.1rem; border-radius: 999px; transition: color 0.3s;\n}\n.mo-toggle-opt.is-active { color: var(--ink); }\n.mo-toggle-thumb {\n  position: absolute; top: 4px; left: 4px; z-index: 0; height: calc(100% - 8px); width: calc(50% - 4px);\n  background: var(--card); border-radius: 999px; box-shadow: var(--shadow-sm);\n  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.mo-toggle-thumb.is-right { transform: translateX(100%); }\n.mo-toggle-save { align-self: center; margin-left: 0.8rem; font-size: 0.82rem; font-weight: 600; color: var(--ok); }\n.mo-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: start; }\n.mo-tier {\n  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px;\n  padding: 1.8rem 1.6rem; box-shadow: var(--shadow-sm);\n  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s;\n}\n.mo-tier.is-popular { border-color: var(--accent); box-shadow: var(--shadow-lg); transform: translateY(-10px); z-index: 1; }\n.mo-tier-flag { position: absolute; top: -0.75rem; left: 1.6rem; background: var(--accent); color: #fff; font-size: 0.74rem; font-weight: 600; padding: 0.25rem 0.7rem; border-radius: 999px; }\n.mo-tier-name { font-size: 1.25rem; font-weight: 640; letter-spacing: -0.02em; margin: 0 0 0.35rem; }\n.mo-tier-blurb { font-size: 0.9rem; color: var(--muted); margin: 0 0 1.2rem; min-height: 2.6rem; }\n.mo-price { display: flex; align-items: baseline; gap: 0.1rem; margin-bottom: 1.3rem; }\n.mo-price-cur { font-size: 1.4rem; font-weight: 600; align-self: flex-start; margin-top: 0.35rem; }\n.mo-price-num { font-size: clamp(2.6rem, 5vw, 3.2rem); font-weight: 680; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }\n.mo-price-per { font-size: 0.9rem; color: var(--muted); margin-left: 0.25rem; }\n.mo-tier-cta { width: 100%; margin-bottom: 1.5rem; }\n.mo-tier-feats { list-style: none; margin: 0; padding: 1.3rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 0.7rem; }\n.mo-tier-feats li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.92rem; }\n@media (max-width: 860px) {\n  .mo-tiers { grid-template-columns: 1fr; max-width: 26rem; margin: 0 auto; }\n  .mo-tier.is-popular { transform: none; order: -1; }\n}\n\n/* INTEGRATIONS */\n.mo-integ { background: var(--card); border-top: 1px solid var(--line); }\n.mo-integ-head { max-width: 1120px; margin: 0 auto; padding: clamp(4rem, 8vw, 6.5rem) clamp(1.1rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem); }\n.mo-integ-sub { color: var(--muted); font-size: 1.05rem; margin: 1rem 0 0; max-width: 38rem; }\n.mo-integ-grid {\n  max-width: 1120px; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 3rem) clamp(4rem, 8vw, 6.5rem);\n  list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem;\n}\n.mo-integ-cell {\n  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;\n  background: var(--bg); border: 1px solid var(--line); border-radius: 13px; padding: 1.1rem;\n  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.25s, box-shadow 0.35s;\n}\n.mo-integ-cell:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow-sm); }\n.mo-integ-glyph {\n  width: 2.4rem; height: 2.4rem; border-radius: 9px; display: grid; place-items: center;\n  font-weight: 700; font-size: 1.05rem; color: var(--ink); margin-bottom: 0.6rem;\n}\n.mo-integ-name { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }\n.mo-integ-kind { font-size: 0.8rem; color: var(--faint); }\n@media (max-width: 900px) { .mo-integ-grid { grid-template-columns: repeat(3, 1fr); } }\n@media (max-width: 520px) { .mo-integ-grid { grid-template-columns: repeat(2, 1fr); } }\n\n/* FINAL CTA */\n.mo-cta {\n  background: linear-gradient(135deg, var(--accent), #6a5cf0 55%, #7b53ef);\n  color: #fff;\n}\n.mo-cta-inner { max-width: 46rem; margin: 0 auto; text-align: center; padding: clamp(4.5rem, 9vw, 7rem) clamp(1.1rem, 4vw, 3rem); }\n.mo-cta-title { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 660; margin: 0 0 1.1rem; }\n.mo-cta-lede { font-size: 1.15rem; margin: 0 auto 2rem; max-width: 32rem; color: rgba(255,255,255,0.88); }\n.mo-cta-actions { justify-content: center; }\n.mo-cta-solid { background: #fff; color: var(--accent-press); box-shadow: 0 12px 30px -12px rgba(0,0,0,0.4); }\n.mo-cta-solid:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 16px 36px -12px rgba(0,0,0,0.5); }\n.mo-cta-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }\n.mo-cta-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.1); transform: translateY(-2px); }\n.mo-cta-fine { color: rgba(255,255,255,0.8); font-size: 0.9rem; margin: 1.2rem 0 0; }\n\n/* FOOTER */\n.mo-footer { background: var(--bg); border-top: 1px solid var(--line); }\n.mo-footer-inner {\n  max-width: 1120px; margin: 0 auto; padding: clamp(3rem, 6vw, 4.5rem) clamp(1.1rem, 4vw, 3rem) 2.5rem;\n  display: grid; grid-template-columns: 1.3fr 2fr; gap: clamp(2rem, 5vw, 4rem);\n}\n.mo-footer-note { color: var(--muted); font-size: 0.92rem; margin: 1rem 0 0; max-width: 22rem; }\n.mo-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }\n.mo-footer-head { font-size: 0.82rem; font-weight: 600; color: var(--ink); margin: 0 0 0.9rem; }\n.mo-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }\n.mo-footer-col a { color: var(--muted); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }\n.mo-footer-col a:hover { color: var(--accent); }\n.mo-footer-base {\n  max-width: 1120px; margin: 0 auto; padding: 1.5rem clamp(1.1rem, 4vw, 3rem);\n  border-top: 1px solid var(--line);\n  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;\n  font-size: 0.86rem; color: var(--faint);\n}\n.mo-footer-legal { display: flex; gap: 1.3rem; }\n.mo-footer-legal a { color: var(--faint); text-decoration: none; transition: color 0.2s; }\n.mo-footer-legal a:hover { color: var(--ink); }\n@media (max-width: 720px) {\n  .mo-footer-inner { grid-template-columns: 1fr; }\n  .mo-footer-cols { grid-template-columns: repeat(3, 1fr); }\n}\n@media (max-width: 480px) { .mo-footer-cols { grid-template-columns: 1fr 1fr; } }\n\n/* reduced motion: settle everything into its final, quiet state */\n@media (prefers-reduced-motion: reduce) {\n  .mo-root * { animation: none !important; transition: none !important; }\n  .mo-frow-copy, .mo-frow-visual, .mo-ba-card, .mo-quote { opacity: 1 !important; transform: none !important; }\n  .mo-frow-par { transform: none !important; }\n}\n\n/* __CSS_END__ */\n`\n","type":"registry:page"}],"meta":{"kind":"templates","categories":["landing"],"docs":"https://ui.artbloom.tech/artbloom/templates/momentum"}}