Homepage Revamp — Design Spec

Date: 2026-10-14
Branch: homepage-revamp (off gh-pages)


Goal

Replace the current migration-focused homepage with a new “Applied AI for finance” landing page. All existing pages and URLs are preserved. The new homepage tells a focused story to a CFO/CRO audience and ends with an inline lead-capture form that books a discovery call.


Scope

In scope:

Out of scope:


Page Structure

The new homepage is the prototype at revamp/index.html with the following modifications:

Sections (in order)

  1. Nav — logo + anchor links + CTA
  2. Hero — full-width headline + single CTA button
  3. Problem (#problem) — “The POC trap”
  4. Approach (#approach) — 3-step model
  5. Outcomes (#outcomes) — Visibility / Predictability / What-if
  6. Example (#example) — what-if model card with interactive sliders
  7. Use cases (#use-cases)
  8. Why DataYoga (#why)
  9. Contact (#contact) — inline lead form ← replaces the CTA box
  10. Footer — copyright + legacy links

Header nav

[Logo]  Approach  Use cases  Why DataYoga  [Schedule a conversation]

Hero CTA

© 2026 DataYoga · Applied AI for finance    Informatica Migration   DataYoga Transform   info@datayoga.io

Contact Form (#contact)

Replaces the .cta-box block. Two-column layout: copy left, form right.

Copy

Fields

| Field | Type | Required | Notes | |—|—|—|—| | Name | text | yes | | | Work email | email | yes | | | Role | select | yes | CFO, CRO, VP Finance, FP&A Lead, Controller, CEO / Founder, Other | | What would you like to improve? | textarea | no | placeholder: “e.g. our commission provisions take 3 days to close every month” |

Submit button

“Schedule a conversation →”

Backend


Jekyll Implementation

New files

| File | Purpose | |—|—| | _layouts/bare.html | Minimal HTML wrapper — no theme CSS/JS, just <html>/<head>/<body> + Jekyll SEO tag | | _layouts/home-v2.html | Extends bare. Full prototype HTML with form replacing #contact section | | assets/images/logo-light.png | Copied from revamp/logo-light.png | | assets/images/logo-dark.png | Copied from revamp/logo-dark.png |

Modified files

| File | Change | |—|—| | index.html | Front matter: layout: home → layout: home-v2 |

Logo paths in home-v2.html

<img class="on-light" src="/assets/images/logo-light.png" alt="DataYoga">
<img class="on-dark"  src="/assets/images/logo-dark.png"  alt="DataYoga">

_layouts/bare.html structure

---
---
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Homepage Revamp — Design Spec</title>
  <meta name="description" content="DataYoga provides a low-code open-source ETL framework, automated Informatica migration tools,  and expert data architecture services. Whether you need to modernize legacy Informatica  workflows, build real-time data pipelines, or optimize your data architecture, DataYoga  offers powerful, independent solutions tailored to your needs.">
  <!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Homepage Revamp — Design Spec | DataYoga: Open Source ETL Framework, Informatica Migration, and Data Architecture Modernization</title>
<meta name="generator" content="Jekyll v3.10.0" />
<meta property="og:title" content="Homepage Revamp — Design Spec" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="DataYoga provides a low-code open-source ETL framework, automated Informatica migration tools, and expert data architecture services. Whether you need to modernize legacy Informatica workflows, build real-time data pipelines, or optimize your data architecture, DataYoga offers powerful, independent solutions tailored to your needs." />
<meta property="og:description" content="DataYoga provides a low-code open-source ETL framework, automated Informatica migration tools, and expert data architecture services. Whether you need to modernize legacy Informatica workflows, build real-time data pipelines, or optimize your data architecture, DataYoga offers powerful, independent solutions tailored to your needs." />
<link rel="canonical" href="https://datayoga.io/docs/superpowers/specs/2026-10-14-homepage-revamp-design" />
<meta property="og:url" content="https://datayoga.io/docs/superpowers/specs/2026-10-14-homepage-revamp-design" />
<meta property="og:site_name" content="DataYoga: Open Source ETL Framework, Informatica Migration, and Data Architecture Modernization" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Homepage Revamp — Design Spec" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebPage","description":"DataYoga provides a low-code open-source ETL framework, automated Informatica migration tools, and expert data architecture services. Whether you need to modernize legacy Informatica workflows, build real-time data pipelines, or optimize your data architecture, DataYoga offers powerful, independent solutions tailored to your needs.","headline":"Homepage Revamp — Design Spec","url":"https://datayoga.io/docs/superpowers/specs/2026-10-14-homepage-revamp-design"}</script>
<!-- End Jekyll SEO tag -->

</head>
<body>
  <article class="post">

  <header class="post-header">
    <h1 class="post-title">Homepage Revamp Implementation Plan</h1>
  </header>

  <div class="post-content">
    <h1 id="homepage-revamp-implementation-plan">Homepage Revamp Implementation Plan</h1>

<blockquote>
  <p><strong>For agentic workers:</strong> REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (<code class="language-plaintext highlighter-rouge">- [ ]</code>) syntax for tracking.</p>
</blockquote>

<p><strong>Goal:</strong> Replace the current homepage with a new “Applied AI for finance” landing page, preserving all existing page URLs and wiring an inline lead-capture form to Formspree + Google Calendar.</p>

<p><strong>Architecture:</strong> A new standalone Jekyll layout (<code class="language-plaintext highlighter-rouge">_layouts/home-v2.html</code>) contains the complete prototype HTML — its own <code class="language-plaintext highlighter-rouge">&lt;!doctype html&gt;</code> shell, CSS, and JS — so it is fully isolated from the existing theme’s Bootstrap/slick/jQuery stack. <code class="language-plaintext highlighter-rouge">index.html</code> is updated to use the new layout. All other pages are untouched.</p>

<p><strong>Tech Stack:</strong> Jekyll 4.2.2, GitHub Pages, Formspree (<code class="language-plaintext highlighter-rouge">mdeapnak</code>), Google Fonts CDN, vanilla JS.</p>

<hr />

<h2 id="file-map">File Map</h2>

<table>
  <thead>
    <tr>
      <th>Action</th>
      <th>File</th>
      <th>What it does</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Create</td>
      <td><code class="language-plaintext highlighter-rouge">_layouts/home-v2.html</code></td>
      <td>Complete standalone homepage — all CSS, HTML, JS</td>
    </tr>
    <tr>
      <td>Copy</td>
      <td><code class="language-plaintext highlighter-rouge">assets/images/logo-light.png</code></td>
      <td>From <code class="language-plaintext highlighter-rouge">revamp/logo-light.png</code></td>
    </tr>
    <tr>
      <td>Copy</td>
      <td><code class="language-plaintext highlighter-rouge">assets/images/logo-dark.png</code></td>
      <td>From <code class="language-plaintext highlighter-rouge">revamp/logo-dark.png</code></td>
    </tr>
    <tr>
      <td>Modify</td>
      <td><code class="language-plaintext highlighter-rouge">index.html</code></td>
      <td>Front matter only: <code class="language-plaintext highlighter-rouge">layout: home</code> → <code class="language-plaintext highlighter-rouge">layout: home-v2</code></td>
    </tr>
  </tbody>
</table>

<hr />

<h2 id="task-1-create-branch">Task 1: Create branch</h2>

<p><strong>Files:</strong> none</p>

<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Switch to gh-pages and pull latest</strong></li>
</ul>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git checkout gh-pages
git pull origin gh-pages
</code></pre></div></div>

<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Create and switch to feature branch</strong></li>
</ul>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git checkout <span class="nt">-b</span> homepage-revamp
</code></pre></div></div>

<p>Expected: <code class="language-plaintext highlighter-rouge">Switched to a new branch 'homepage-revamp'</code></p>

<hr />

<h2 id="task-2-copy-logo-assets">Task 2: Copy logo assets</h2>

<p><strong>Files:</strong></p>
<ul class="task-list">
  <li>Create: <code class="language-plaintext highlighter-rouge">assets/images/logo-light.png</code></li>
  <li>
    <p>Create: <code class="language-plaintext highlighter-rouge">assets/images/logo-dark.png</code></p>
  </li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Copy both logos from revamp/</strong></li>
</ul>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cp</span> /home/dtrop/datayoga-io-site/revamp/logo-light.png /home/dtrop/datayoga-io-site/assets/images/logo-light.png
<span class="nb">cp</span> /home/dtrop/datayoga-io-site/revamp/logo-dark.png /home/dtrop/datayoga-io-site/assets/images/logo-dark.png
</code></pre></div></div>

<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Verify files exist</strong></li>
</ul>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">ls</span> <span class="nt">-lh</span> /home/dtrop/datayoga-io-site/assets/images/logo-light.png /home/dtrop/datayoga-io-site/assets/images/logo-dark.png
</code></pre></div></div>

<p>Expected: two files with non-zero size.</p>

<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Commit</strong></li>
</ul>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git add assets/images/logo-light.png assets/images/logo-dark.png
git commit <span class="nt">-m</span> <span class="s2">"feat: add homepage revamp logo assets"</span>
</code></pre></div></div>

<hr />

<h2 id="task-3-create-_layoutshome-v2html">Task 3: Create <code class="language-plaintext highlighter-rouge">_layouts/home-v2.html</code></h2>

<p><strong>Files:</strong></p>
<ul>
  <li>Create: <code class="language-plaintext highlighter-rouge">_layouts/home-v2.html</code></li>
</ul>

<p>This is the complete standalone homepage layout. It does not extend any other Jekyll layout — it contains its own full HTML shell. The GTM snippet from the existing <code class="language-plaintext highlighter-rouge">_layouts/default.html</code> is preserved for analytics continuity.</p>

<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Create the file with the full content below</strong></li>
</ul>

<p>Create <code class="language-plaintext highlighter-rouge">/home/dtrop/datayoga-io-site/_layouts/home-v2.html</code> with this exact content:</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
---
<span class="cp">&lt;!doctype html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
<span class="nt">&lt;head&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width,initial-scale=1,viewport-fit=cover"</span><span class="nt">&gt;</span>
<span class="nt">&lt;title&gt;</span>DataYoga — Applied AI for Finance<span class="nt">&lt;/title&gt;</span>
<span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"DataYoga specializes in applied AI for finance. We turn your spreadsheets, ERP and CRM into a persistent, auditable financial model your team can stand behind."</span><span class="nt">&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"shortcut icon"</span> <span class="na">href=</span><span class="s">"/assets/images/favicon.ico"</span> <span class="na">type=</span><span class="s">"image/png"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Google Tag Manager --&gt;</span>
<span class="nt">&lt;script&gt;</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">w</span><span class="p">,</span><span class="nx">d</span><span class="p">,</span><span class="nx">s</span><span class="p">,</span><span class="nx">l</span><span class="p">,</span><span class="nx">i</span><span class="p">){</span><span class="nx">w</span><span class="p">[</span><span class="nx">l</span><span class="p">]</span><span class="o">=</span><span class="nx">w</span><span class="p">[</span><span class="nx">l</span><span class="p">]</span><span class="o">||</span><span class="p">[];</span><span class="nx">w</span><span class="p">[</span><span class="nx">l</span><span class="p">].</span><span class="nx">push</span><span class="p">({</span><span class="dl">'</span><span class="s1">gtm.start</span><span class="dl">'</span><span class="p">:</span>
<span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">getTime</span><span class="p">(),</span><span class="na">event</span><span class="p">:</span><span class="dl">'</span><span class="s1">gtm.js</span><span class="dl">'</span><span class="p">});</span><span class="kd">var</span> <span class="nx">f</span><span class="o">=</span><span class="nx">d</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="nx">s</span><span class="p">)[</span><span class="mi">0</span><span class="p">],</span>
<span class="nx">j</span><span class="o">=</span><span class="nx">d</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="nx">s</span><span class="p">),</span><span class="nx">dl</span><span class="o">=</span><span class="nx">l</span><span class="o">!=</span><span class="dl">'</span><span class="s1">dataLayer</span><span class="dl">'</span><span class="p">?</span><span class="dl">'</span><span class="s1">&amp;l=</span><span class="dl">'</span><span class="o">+</span><span class="nx">l</span><span class="p">:</span><span class="dl">''</span><span class="p">;</span><span class="nx">j</span><span class="p">.</span><span class="k">async</span><span class="o">=</span><span class="kc">true</span><span class="p">;</span><span class="nx">j</span><span class="p">.</span><span class="nx">src</span><span class="o">=</span>
<span class="dl">'</span><span class="s1">https://www.googletagmanager.com/gtm.js?id=</span><span class="dl">'</span><span class="o">+</span><span class="nx">i</span><span class="o">+</span><span class="nx">dl</span><span class="p">;</span><span class="nx">f</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">insertBefore</span><span class="p">(</span><span class="nx">j</span><span class="p">,</span><span class="nx">f</span><span class="p">);</span>
<span class="p">})(</span><span class="nb">window</span><span class="p">,</span><span class="nb">document</span><span class="p">,</span><span class="dl">'</span><span class="s1">script</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">dataLayer</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">GTM-TH9XLWX</span><span class="dl">'</span><span class="p">);</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- End Google Tag Manager --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"preconnect"</span> <span class="na">href=</span><span class="s">"https://fonts.googleapis.com"</span><span class="nt">&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"preconnect"</span> <span class="na">href=</span><span class="s">"https://fonts.gstatic.com"</span> <span class="na">crossorigin</span><span class="nt">&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700&amp;family=IBM+Plex+Sans:wght@400;500;600&amp;family=IBM+Plex+Mono:wght@400;500&amp;display=swap"</span><span class="nt">&gt;</span>
<span class="nt">&lt;style&gt;</span>
<span class="nd">:root</span><span class="p">{</span><span class="py">color-scheme</span><span class="p">:</span><span class="n">light</span><span class="p">;</span>
  <span class="py">--bg</span><span class="p">:</span><span class="m">#F6F7FB</span><span class="p">;</span> <span class="py">--surface</span><span class="p">:</span><span class="m">#FFFFFF</span><span class="p">;</span> <span class="py">--fg</span><span class="p">:</span><span class="m">#0D0E1F</span><span class="p">;</span> <span class="py">--muted</span><span class="p">:</span><span class="m">#585D72</span><span class="p">;</span> <span class="py">--line</span><span class="p">:</span><span class="m">#DADDE9</span><span class="p">;</span>
  <span class="py">--accent</span><span class="p">:</span><span class="m">#3424C4</span><span class="p">;</span> <span class="py">--accent-deep</span><span class="p">:</span><span class="m">#221782</span><span class="p">;</span> <span class="py">--accent-ink</span><span class="p">:</span><span class="m">#FFFFFF</span><span class="p">;</span> <span class="py">--accent-soft</span><span class="p">:</span><span class="m">#ECEAFB</span><span class="p">;</span> <span class="py">--blue</span><span class="p">:</span><span class="m">#0066D6</span><span class="p">;</span> <span class="py">--blue-soft</span><span class="p">:</span><span class="m">#E3F0FF</span><span class="p">;</span>
  <span class="py">--warn</span><span class="p">:</span><span class="m">#B4740A</span><span class="p">;</span> <span class="py">--warn-soft</span><span class="p">:</span><span class="m">#F6EBD6</span><span class="p">;</span>
  <span class="py">--grid</span><span class="p">:</span><span class="n">rgba</span><span class="p">(</span><span class="m">26</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">.035</span><span class="p">);</span>
  <span class="py">--display</span><span class="p">:</span><span class="s1">"Bricolage Grotesque"</span><span class="p">,</span> <span class="s1">"Segoe UI"</span><span class="p">,</span> <span class="n">system-ui</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
  <span class="py">--body</span><span class="p">:</span><span class="s1">"IBM Plex Sans"</span><span class="p">,</span> <span class="s1">"Segoe UI"</span><span class="p">,</span> <span class="n">system-ui</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span>
  <span class="py">--mono</span><span class="p">:</span><span class="s1">"IBM Plex Mono"</span><span class="p">,</span> <span class="n">ui-monospace</span><span class="p">,</span> <span class="s1">"SFMono-Regular"</span><span class="p">,</span> <span class="n">Menlo</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">prefers-color-scheme</span><span class="p">:</span> <span class="n">dark</span><span class="p">){</span> <span class="nd">:root:not</span><span class="o">([</span><span class="nt">data-theme</span><span class="o">=</span><span class="s1">"light"</span><span class="o">])</span><span class="p">{</span>
  <span class="py">--bg</span><span class="p">:</span><span class="m">#0E0F1E</span><span class="p">;</span> <span class="py">--surface</span><span class="p">:</span><span class="m">#161830</span><span class="p">;</span> <span class="py">--fg</span><span class="p">:</span><span class="m">#E9EAF4</span><span class="p">;</span> <span class="py">--muted</span><span class="p">:</span><span class="m">#9EA2BC</span><span class="p">;</span> <span class="py">--line</span><span class="p">:</span><span class="m">#2A2D4A</span><span class="p">;</span>
  <span class="py">--accent</span><span class="p">:</span><span class="m">#9387F0</span><span class="p">;</span> <span class="py">--accent-deep</span><span class="p">:</span><span class="m">#B9B1F5</span><span class="p">;</span> <span class="py">--accent-ink</span><span class="p">:</span><span class="m">#0B0A24</span><span class="p">;</span> <span class="py">--accent-soft</span><span class="p">:</span><span class="m">#221F4D</span><span class="p">;</span> <span class="py">--blue</span><span class="p">:</span><span class="m">#4DA3FF</span><span class="p">;</span> <span class="py">--blue-soft</span><span class="p">:</span><span class="m">#14284A</span><span class="p">;</span>
  <span class="py">--warn</span><span class="p">:</span><span class="m">#E3A33A</span><span class="p">;</span> <span class="py">--warn-soft</span><span class="p">:</span><span class="m">#33280F</span><span class="p">;</span>
  <span class="py">--grid</span><span class="p">:</span><span class="n">rgba</span><span class="p">(</span><span class="m">138</span><span class="p">,</span><span class="m">122</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">.05</span><span class="p">);</span> <span class="py">color-scheme</span><span class="p">:</span><span class="n">dark</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span>
<span class="nd">:root</span><span class="o">[</span><span class="nt">data-theme</span><span class="o">=</span><span class="s1">"dark"</span><span class="o">]</span><span class="p">{</span>
  <span class="py">--bg</span><span class="p">:</span><span class="m">#0E0F1E</span><span class="p">;</span> <span class="py">--surface</span><span class="p">:</span><span class="m">#161830</span><span class="p">;</span> <span class="py">--fg</span><span class="p">:</span><span class="m">#E9EAF4</span><span class="p">;</span> <span class="py">--muted</span><span class="p">:</span><span class="m">#9EA2BC</span><span class="p">;</span> <span class="py">--line</span><span class="p">:</span><span class="m">#2A2D4A</span><span class="p">;</span>
  <span class="py">--accent</span><span class="p">:</span><span class="m">#9387F0</span><span class="p">;</span> <span class="py">--accent-deep</span><span class="p">:</span><span class="m">#B9B1F5</span><span class="p">;</span> <span class="py">--accent-ink</span><span class="p">:</span><span class="m">#0B0A24</span><span class="p">;</span> <span class="py">--accent-soft</span><span class="p">:</span><span class="m">#221F4D</span><span class="p">;</span> <span class="py">--blue</span><span class="p">:</span><span class="m">#4DA3FF</span><span class="p">;</span> <span class="py">--blue-soft</span><span class="p">:</span><span class="m">#14284A</span><span class="p">;</span>
  <span class="py">--warn</span><span class="p">:</span><span class="m">#E3A33A</span><span class="p">;</span> <span class="py">--warn-soft</span><span class="p">:</span><span class="m">#33280F</span><span class="p">;</span>
  <span class="py">--grid</span><span class="p">:</span><span class="n">rgba</span><span class="p">(</span><span class="m">138</span><span class="p">,</span><span class="m">122</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">.05</span><span class="p">);</span> <span class="py">color-scheme</span><span class="p">:</span><span class="n">dark</span><span class="p">;</span> <span class="p">}</span>
<span class="nc">.logo</span> <span class="nt">img</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="nb">block</span><span class="p">;</span><span class="nl">height</span><span class="p">:</span><span class="m">34px</span><span class="p">;</span><span class="nl">width</span><span class="p">:</span><span class="nb">auto</span><span class="p">}</span>
<span class="nc">.logo</span> <span class="nc">.on-dark</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="nb">none</span><span class="p">}</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">prefers-color-scheme</span><span class="p">:</span> <span class="n">dark</span><span class="p">){</span> <span class="nd">:root:not</span><span class="o">([</span><span class="nt">data-theme</span><span class="o">=</span><span class="s1">"light"</span><span class="o">])</span> <span class="nc">.logo</span> <span class="nc">.on-light</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="nb">none</span><span class="p">}</span> <span class="nd">:root:not</span><span class="o">([</span><span class="nt">data-theme</span><span class="o">=</span><span class="s1">"light"</span><span class="o">])</span> <span class="nc">.logo</span> <span class="nc">.on-dark</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="nb">block</span><span class="p">}</span> <span class="p">}</span>
<span class="nd">:root</span><span class="o">[</span><span class="nt">data-theme</span><span class="o">=</span><span class="s1">"dark"</span><span class="o">]</span> <span class="nc">.logo</span> <span class="nc">.on-light</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="nb">none</span><span class="p">}</span>
<span class="nd">:root</span><span class="o">[</span><span class="nt">data-theme</span><span class="o">=</span><span class="s1">"dark"</span><span class="o">]</span> <span class="nc">.logo</span> <span class="nc">.on-dark</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="nb">block</span><span class="p">}</span>
<span class="o">*</span><span class="p">{</span><span class="nl">box-sizing</span><span class="p">:</span><span class="n">border-box</span><span class="p">}</span>
<span class="nt">body</span><span class="p">{</span><span class="nl">margin</span><span class="p">:</span><span class="m">0</span><span class="p">;</span><span class="nl">padding</span><span class="p">:</span><span class="m">0</span><span class="p">;</span><span class="nl">background</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--bg</span><span class="p">);</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--fg</span><span class="p">);</span><span class="nl">font-family</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--body</span><span class="p">);</span><span class="nl">font-size</span><span class="p">:</span><span class="m">17px</span><span class="p">;</span><span class="nl">line-height</span><span class="p">:</span><span class="m">1.6</span><span class="p">;</span>
  <span class="nl">background-image</span><span class="p">:</span><span class="n">linear-gradient</span><span class="p">(</span><span class="n">var</span><span class="p">(</span><span class="n">--grid</span><span class="p">)</span> <span class="m">1px</span><span class="p">,</span><span class="nb">transparent</span> <span class="m">1px</span><span class="p">),</span><span class="n">linear-gradient</span><span class="p">(</span><span class="m">90deg</span><span class="p">,</span><span class="n">var</span><span class="p">(</span><span class="n">--grid</span><span class="p">)</span> <span class="m">1px</span><span class="p">,</span><span class="nb">transparent</span> <span class="m">1px</span><span class="p">);</span>
  <span class="nl">background-size</span><span class="p">:</span><span class="m">28px</span> <span class="m">28px</span><span class="p">;}</span>
<span class="nc">.wrap</span><span class="p">{</span><span class="nl">max-width</span><span class="p">:</span><span class="m">1140px</span><span class="p">;</span><span class="nl">margin</span><span class="p">:</span><span class="m">0</span> <span class="nb">auto</span><span class="p">;</span><span class="py">padding-inline</span><span class="p">:</span><span class="m">24px</span><span class="p">}</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span><span class="m">520px</span><span class="p">){</span><span class="nc">.wrap</span><span class="p">{</span><span class="py">padding-inline</span><span class="p">:</span><span class="m">16px</span><span class="p">}}</span>
<span class="nt">h1</span><span class="o">,</span><span class="nt">h2</span><span class="o">,</span><span class="nt">h3</span><span class="p">{</span><span class="nl">font-family</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--display</span><span class="p">);</span><span class="nl">font-weight</span><span class="p">:</span><span class="m">700</span><span class="p">;</span><span class="nl">line-height</span><span class="p">:</span><span class="m">1.08</span><span class="p">;</span><span class="nl">text-wrap</span><span class="p">:</span><span class="n">balance</span><span class="p">;</span><span class="nl">margin</span><span class="p">:</span><span class="m">0</span><span class="p">;</span><span class="nl">letter-spacing</span><span class="p">:</span><span class="m">-.015em</span><span class="p">}</span>
<span class="nt">p</span><span class="p">{</span><span class="nl">margin</span><span class="p">:</span><span class="m">0</span><span class="p">}</span>
<span class="nt">a</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="nb">inherit</span><span class="p">}</span>
<span class="nc">.eyebrow</span><span class="p">{</span><span class="nl">font-family</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--mono</span><span class="p">);</span><span class="nl">font-size</span><span class="p">:</span><span class="m">.78rem</span><span class="p">;</span><span class="nl">letter-spacing</span><span class="p">:</span><span class="m">.08em</span><span class="p">;</span><span class="nl">text-transform</span><span class="p">:</span><span class="nb">uppercase</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--accent</span><span class="p">)}</span>
<span class="nc">.btn</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="n">inline-flex</span><span class="p">;</span><span class="nl">align-items</span><span class="p">:</span><span class="nb">center</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">.5em</span><span class="p">;</span><span class="nl">font-weight</span><span class="p">:</span><span class="m">600</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="m">.98rem</span><span class="p">;</span><span class="nl">text-decoration</span><span class="p">:</span><span class="nb">none</span><span class="p">;</span>
  <span class="nl">padding</span><span class="p">:</span><span class="m">.8em</span> <span class="m">1.25em</span><span class="p">;</span><span class="nl">border-radius</span><span class="p">:</span><span class="m">6px</span><span class="p">;</span><span class="nl">border</span><span class="p">:</span><span class="m">1.5px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--accent</span><span class="p">);</span><span class="nl">transition</span><span class="p">:</span><span class="n">transform</span> <span class="m">.15s</span><span class="p">,</span><span class="n">background</span> <span class="m">.15s</span><span class="p">;</span><span class="nl">cursor</span><span class="p">:</span><span class="nb">pointer</span><span class="p">}</span>
<span class="nc">.btn.primary</span><span class="p">{</span><span class="nl">background</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--accent</span><span class="p">);</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--accent-ink</span><span class="p">)}</span>
<span class="nc">.btn.ghost</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--fg</span><span class="p">);</span><span class="nl">border-color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--line</span><span class="p">);</span><span class="nl">background</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--surface</span><span class="p">)}</span>
<span class="nc">.btn</span><span class="nd">:hover</span><span class="p">{</span><span class="nl">transform</span><span class="p">:</span><span class="n">translateY</span><span class="p">(</span><span class="m">-1px</span><span class="p">)}</span>
<span class="nc">.btn</span><span class="nd">:focus-visible</span><span class="o">,</span><span class="nt">input</span><span class="nd">:focus-visible</span><span class="o">,</span><span class="nt">select</span><span class="nd">:focus-visible</span><span class="o">,</span><span class="nt">textarea</span><span class="nd">:focus-visible</span><span class="p">{</span><span class="nl">outline</span><span class="p">:</span><span class="m">2px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--accent</span><span class="p">);</span><span class="nl">outline-offset</span><span class="p">:</span><span class="m">3px</span><span class="p">}</span>
<span class="c">/* nav */</span>
<span class="nt">header</span><span class="nc">.nav</span><span class="p">{</span><span class="nl">position</span><span class="p">:</span><span class="n">sticky</span><span class="p">;</span><span class="nl">top</span><span class="p">:</span><span class="m">0</span><span class="p">;</span><span class="nl">z-index</span><span class="p">:</span><span class="m">5</span><span class="p">;</span><span class="nl">background</span><span class="p">:</span><span class="n">color-mix</span><span class="p">(</span><span class="n">in</span> <span class="n">srgb</span><span class="p">,</span><span class="n">var</span><span class="p">(</span><span class="n">--bg</span><span class="p">)</span> <span class="m">88%</span><span class="p">,</span><span class="nb">transparent</span><span class="p">);</span>
  <span class="py">backdrop-filter</span><span class="p">:</span><span class="n">blur</span><span class="p">(</span><span class="m">8px</span><span class="p">);</span><span class="nl">border-bottom</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--line</span><span class="p">)}</span>
<span class="nc">.nav</span> <span class="nc">.wrap</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="n">flex</span><span class="p">;</span><span class="nl">align-items</span><span class="p">:</span><span class="nb">center</span><span class="p">;</span><span class="nl">justify-content</span><span class="p">:</span><span class="n">space-between</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">16px</span><span class="p">;</span><span class="py">padding-block</span><span class="p">:</span><span class="m">14px</span><span class="p">}</span>
<span class="nc">.logo</span><span class="p">{</span><span class="nl">font-family</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--display</span><span class="p">);</span><span class="nl">font-weight</span><span class="p">:</span><span class="m">700</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="m">1.3rem</span><span class="p">;</span><span class="nl">letter-spacing</span><span class="p">:</span><span class="m">-.02em</span><span class="p">;</span><span class="nl">text-decoration</span><span class="p">:</span><span class="nb">none</span><span class="p">}</span>
<span class="nc">.logo</span> <span class="nt">span</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--accent</span><span class="p">)}</span>
<span class="nc">.nav</span> <span class="nt">ul</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="n">flex</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">28px</span><span class="p">;</span><span class="nl">list-style</span><span class="p">:</span><span class="nb">none</span><span class="p">;</span><span class="nl">margin</span><span class="p">:</span><span class="m">0</span><span class="p">;</span><span class="nl">padding</span><span class="p">:</span><span class="m">0</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="m">.95rem</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--muted</span><span class="p">)}</span>
<span class="nc">.nav</span> <span class="nt">ul</span> <span class="nt">a</span><span class="p">{</span><span class="nl">text-decoration</span><span class="p">:</span><span class="nb">none</span><span class="p">}</span><span class="nc">.nav</span> <span class="nt">ul</span> <span class="nt">a</span><span class="nd">:hover</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--fg</span><span class="p">)}</span>
<span class="nc">.nav</span> <span class="nc">.btn</span><span class="p">{</span><span class="nl">padding</span><span class="p">:</span><span class="m">.55em</span> <span class="m">1em</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="m">.9rem</span><span class="p">}</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span><span class="m">820px</span><span class="p">){</span><span class="nc">.nav</span> <span class="nt">ul</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="nb">none</span><span class="p">}}</span>
<span class="c">/* hero */</span>
<span class="nc">.hero</span> <span class="nc">.wrap</span><span class="p">{</span><span class="py">padding-block</span><span class="p">:</span><span class="m">96px</span> <span class="m">88px</span><span class="p">}</span>
<span class="nc">.hero</span> <span class="nt">h1</span><span class="p">{</span><span class="nl">font-size</span><span class="p">:</span><span class="n">clamp</span><span class="p">(</span><span class="m">2.6rem</span><span class="p">,</span><span class="m">6vw</span><span class="p">,</span><span class="m">4.8rem</span><span class="p">);</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">18px</span><span class="p">;</span><span class="nl">max-width</span><span class="p">:</span><span class="m">18ch</span><span class="p">}</span>
<span class="nc">.hero</span> <span class="nt">h1</span> <span class="nt">em</span><span class="p">{</span><span class="nl">font-style</span><span class="p">:</span><span class="nb">normal</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--accent-deep</span><span class="p">)}</span>
<span class="nc">.hero</span> <span class="nc">.sub</span><span class="p">{</span><span class="nl">font-size</span><span class="p">:</span><span class="m">1.15rem</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--muted</span><span class="p">);</span><span class="nl">max-width</span><span class="p">:</span><span class="m">56ch</span><span class="p">;</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">22px</span><span class="p">}</span>
<span class="nc">.hero</span> <span class="nc">.ctas</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="n">flex</span><span class="p">;</span><span class="nl">flex-wrap</span><span class="p">:</span><span class="n">wrap</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">12px</span><span class="p">;</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">32px</span><span class="p">}</span>
<span class="nc">.cta-note</span><span class="p">{</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">14px</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="m">.9rem</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--muted</span><span class="p">);</span><span class="nl">max-width</span><span class="p">:</span><span class="m">52ch</span><span class="p">}</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span><span class="m">900px</span><span class="p">){</span><span class="nc">.hero</span> <span class="nc">.wrap</span><span class="p">{</span><span class="py">padding-block</span><span class="p">:</span><span class="m">56px</span><span class="p">}}</span>
<span class="c">/* example section */</span>
<span class="nc">.example</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="n">grid</span><span class="p">;</span><span class="py">grid-template-columns</span><span class="p">:</span><span class="m">.9</span><span class="n">fr</span> <span class="m">1.1</span><span class="n">fr</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">56px</span><span class="p">;</span><span class="nl">align-items</span><span class="p">:</span><span class="nb">center</span><span class="p">}</span>
<span class="nc">.example</span> <span class="nt">ul</span><span class="p">{</span><span class="nl">margin</span><span class="p">:</span><span class="m">20px</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span><span class="nl">padding-left</span><span class="p">:</span><span class="m">1.1em</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--muted</span><span class="p">);</span><span class="nl">display</span><span class="p">:</span><span class="n">grid</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">6px</span><span class="p">}</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span><span class="m">900px</span><span class="p">){</span><span class="nc">.example</span><span class="p">{</span><span class="py">grid-template-columns</span><span class="p">:</span><span class="m">1</span><span class="n">fr</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">36px</span><span class="p">}}</span>
<span class="c">/* model card */</span>
<span class="nc">.model</span><span class="p">{</span><span class="nl">background</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--surface</span><span class="p">);</span><span class="nl">border</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--line</span><span class="p">);</span><span class="nl">border-radius</span><span class="p">:</span><span class="m">10px</span><span class="p">;</span><span class="nl">box-shadow</span><span class="p">:</span><span class="m">0</span> <span class="m">18px</span> <span class="m">40px</span> <span class="m">-24px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">.35</span><span class="p">);</span><span class="nl">min-width</span><span class="p">:</span><span class="m">0</span><span class="p">;</span><span class="nl">overflow</span><span class="p">:</span><span class="nb">hidden</span><span class="p">}</span>
<span class="nc">.model-head</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="n">flex</span><span class="p">;</span><span class="nl">justify-content</span><span class="p">:</span><span class="n">space-between</span><span class="p">;</span><span class="nl">align-items</span><span class="p">:</span><span class="nb">center</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">12px</span><span class="p">;</span><span class="nl">padding</span><span class="p">:</span><span class="m">14px</span> <span class="m">18px</span><span class="p">;</span><span class="nl">border-bottom</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--line</span><span class="p">);</span><span class="nl">font-family</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--mono</span><span class="p">);</span><span class="nl">font-size</span><span class="p">:</span><span class="m">.78rem</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--muted</span><span class="p">)}</span>
<span class="nc">.model-head</span> <span class="nt">b</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--fg</span><span class="p">);</span><span class="nl">font-weight</span><span class="p">:</span><span class="m">500</span><span class="p">}</span>
<span class="nc">.tag</span><span class="p">{</span><span class="nl">background</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--warn-soft</span><span class="p">);</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--warn</span><span class="p">);</span><span class="nl">padding</span><span class="p">:</span><span class="m">2px</span> <span class="m">8px</span><span class="p">;</span><span class="nl">border-radius</span><span class="p">:</span><span class="m">99px</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="m">.7rem</span><span class="p">;</span><span class="nl">white-space</span><span class="p">:</span><span class="nb">nowrap</span><span class="p">}</span>
<span class="nc">.model-body</span><span class="p">{</span><span class="nl">padding</span><span class="p">:</span><span class="m">18px</span><span class="p">;</span><span class="nl">display</span><span class="p">:</span><span class="n">grid</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">18px</span><span class="p">}</span>
<span class="nc">.ctrl</span> <span class="nt">label</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="n">flex</span><span class="p">;</span><span class="nl">justify-content</span><span class="p">:</span><span class="n">space-between</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="m">.9rem</span><span class="p">;</span><span class="nl">font-weight</span><span class="p">:</span><span class="m">500</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">8px</span><span class="p">}</span>
<span class="nc">.ctrl</span> <span class="nt">output</span><span class="p">{</span><span class="nl">font-family</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--mono</span><span class="p">);</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--accent</span><span class="p">)}</span>
<span class="nc">.ctrl</span> <span class="nt">input</span><span class="p">{</span><span class="nl">width</span><span class="p">:</span><span class="m">100%</span><span class="p">;</span><span class="py">accent-color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--accent</span><span class="p">);</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">6px</span><span class="p">}</span>
<span class="nc">.ctrl</span> <span class="nt">small</span><span class="p">{</span><span class="nl">font-family</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--mono</span><span class="p">);</span><span class="nl">font-size</span><span class="p">:</span><span class="m">.72rem</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--muted</span><span class="p">)}</span>
<span class="nc">.results</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="n">grid</span><span class="p">;</span><span class="py">grid-template-columns</span><span class="p">:</span><span class="m">1</span><span class="n">fr</span> <span class="m">1</span><span class="n">fr</span><span class="p">;</span><span class="nl">border-top</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--line</span><span class="p">)}</span>
<span class="nc">.res</span><span class="p">{</span><span class="nl">padding</span><span class="p">:</span><span class="m">16px</span> <span class="m">18px</span><span class="p">;</span><span class="nl">min-width</span><span class="p">:</span><span class="m">0</span><span class="p">}</span>
<span class="nc">.res</span><span class="o">+</span><span class="nc">.res</span><span class="p">{</span><span class="nl">border-left</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--line</span><span class="p">)}</span>
<span class="nc">.res</span> <span class="nc">.k</span><span class="p">{</span><span class="nl">font-size</span><span class="p">:</span><span class="m">.78rem</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--muted</span><span class="p">)}</span>
<span class="nc">.res</span> <span class="nc">.v</span><span class="p">{</span><span class="nl">font-family</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--mono</span><span class="p">);</span><span class="nl">font-size</span><span class="p">:</span><span class="m">1.5rem</span><span class="p">;</span><span class="nl">font-variant-numeric</span><span class="p">:</span><span class="n">tabular-nums</span><span class="p">;</span><span class="nl">font-weight</span><span class="p">:</span><span class="m">500</span><span class="p">;</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">2px</span><span class="p">}</span>
<span class="nc">.res</span> <span class="nc">.d</span><span class="p">{</span><span class="nl">font-family</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--mono</span><span class="p">);</span><span class="nl">font-size</span><span class="p">:</span><span class="m">.78rem</span><span class="p">;</span><span class="nl">font-variant-numeric</span><span class="p">:</span><span class="n">tabular-nums</span><span class="p">}</span>
<span class="nc">.d.up</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--warn</span><span class="p">)}</span><span class="nc">.d.down</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--accent</span><span class="p">)}</span>
<span class="nc">.src</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="n">flex</span><span class="p">;</span><span class="nl">flex-wrap</span><span class="p">:</span><span class="n">wrap</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">6px</span><span class="p">;</span><span class="nl">padding</span><span class="p">:</span><span class="m">12px</span> <span class="m">18px</span> <span class="m">16px</span><span class="p">;</span><span class="nl">border-top</span><span class="p">:</span><span class="m">1px</span> <span class="nb">dashed</span> <span class="n">var</span><span class="p">(</span><span class="n">--line</span><span class="p">)}</span>
<span class="nc">.src</span> <span class="nt">span</span><span class="p">{</span><span class="nl">font-family</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--mono</span><span class="p">);</span><span class="nl">font-size</span><span class="p">:</span><span class="m">.7rem</span><span class="p">;</span><span class="nl">background</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--blue-soft</span><span class="p">);</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--blue</span><span class="p">);</span><span class="nl">padding</span><span class="p">:</span><span class="m">3px</span> <span class="m">8px</span><span class="p">;</span><span class="nl">border-radius</span><span class="p">:</span><span class="m">4px</span><span class="p">}</span>
<span class="c">/* sections */</span>
<span class="nt">section</span><span class="p">{</span><span class="py">padding-block</span><span class="p">:</span><span class="m">88px</span><span class="p">;</span><span class="nl">border-top</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--line</span><span class="p">)}</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span><span class="m">600px</span><span class="p">){</span><span class="nt">section</span><span class="p">{</span><span class="py">padding-block</span><span class="p">:</span><span class="m">60px</span><span class="p">}}</span>
<span class="nc">.sec-head</span><span class="p">{</span><span class="nl">max-width</span><span class="p">:</span><span class="m">720px</span><span class="p">}</span>
<span class="nc">.sec-head</span> <span class="nt">h2</span><span class="p">{</span><span class="nl">font-size</span><span class="p">:</span><span class="n">clamp</span><span class="p">(</span><span class="m">1.9rem</span><span class="p">,</span><span class="m">3.6vw</span><span class="p">,</span><span class="m">2.8rem</span><span class="p">);</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">12px</span><span class="p">}</span>
<span class="nc">.sec-head</span> <span class="nt">p</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--muted</span><span class="p">);</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">16px</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="m">1.08rem</span><span class="p">;</span><span class="nl">max-width</span><span class="p">:</span><span class="m">62ch</span><span class="p">}</span>
<span class="c">/* problem */</span>
<span class="nc">.problem-grid</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="n">grid</span><span class="p">;</span><span class="py">grid-template-columns</span><span class="p">:</span><span class="m">.8</span><span class="n">fr</span> <span class="m">1.2</span><span class="n">fr</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">48px</span><span class="p">;</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">48px</span><span class="p">;</span><span class="nl">align-items</span><span class="p">:</span><span class="n">start</span><span class="p">}</span>
<span class="nc">.stat</span><span class="p">{</span><span class="nl">background</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--warn-soft</span><span class="p">);</span><span class="nl">border-radius</span><span class="p">:</span><span class="m">10px</span><span class="p">;</span><span class="nl">padding</span><span class="p">:</span><span class="m">32px</span><span class="p">}</span>
<span class="nc">.stat</span> <span class="nc">.num</span><span class="p">{</span><span class="nl">font-family</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--display</span><span class="p">);</span><span class="nl">font-weight</span><span class="p">:</span><span class="m">700</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="n">clamp</span><span class="p">(</span><span class="m">4rem</span><span class="p">,</span><span class="m">9vw</span><span class="p">,</span><span class="m">6.5rem</span><span class="p">);</span><span class="nl">line-height</span><span class="p">:</span><span class="m">1</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--warn</span><span class="p">);</span><span class="nl">letter-spacing</span><span class="p">:</span><span class="m">-.03em</span><span class="p">}</span>
<span class="nc">.stat</span> <span class="nt">p</span><span class="p">{</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">12px</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="m">1.05rem</span><span class="p">}</span>
<span class="nc">.stat</span> <span class="nt">small</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="nb">block</span><span class="p">;</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">16px</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="m">.8rem</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--muted</span><span class="p">)}</span>
<span class="nc">.reasons</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="n">grid</span><span class="p">;</span><span class="py">grid-template-columns</span><span class="p">:</span><span class="m">1</span><span class="n">fr</span> <span class="m">1</span><span class="n">fr</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">32px</span> <span class="m">36px</span><span class="p">}</span>
<span class="nc">.reasons</span> <span class="nt">h3</span><span class="p">{</span><span class="nl">font-size</span><span class="p">:</span><span class="m">1.2rem</span><span class="p">}</span>
<span class="nc">.reasons</span> <span class="nt">p</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--muted</span><span class="p">);</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">8px</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="m">.98rem</span><span class="p">}</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span><span class="m">900px</span><span class="p">){</span><span class="nc">.problem-grid</span><span class="p">{</span><span class="py">grid-template-columns</span><span class="p">:</span><span class="m">1</span><span class="n">fr</span><span class="p">}}</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span><span class="m">560px</span><span class="p">){</span><span class="nc">.reasons</span><span class="p">{</span><span class="py">grid-template-columns</span><span class="p">:</span><span class="m">1</span><span class="n">fr</span><span class="p">}}</span>
<span class="c">/* approach */</span>
<span class="nc">.steps</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="n">grid</span><span class="p">;</span><span class="py">grid-template-columns</span><span class="p">:</span><span class="nb">repeat</span><span class="p">(</span><span class="m">3</span><span class="p">,</span><span class="m">1</span><span class="n">fr</span><span class="p">);</span><span class="py">gap</span><span class="p">:</span><span class="m">0</span><span class="p">;</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">48px</span><span class="p">;</span><span class="nl">border</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--line</span><span class="p">);</span><span class="nl">border-radius</span><span class="p">:</span><span class="m">10px</span><span class="p">;</span><span class="nl">background</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--surface</span><span class="p">);</span><span class="nl">overflow</span><span class="p">:</span><span class="nb">hidden</span><span class="p">}</span>
<span class="nc">.step</span><span class="p">{</span><span class="nl">padding</span><span class="p">:</span><span class="m">28px</span><span class="p">;</span><span class="nl">min-width</span><span class="p">:</span><span class="m">0</span><span class="p">}</span>
<span class="nc">.step</span><span class="o">+</span><span class="nc">.step</span><span class="p">{</span><span class="nl">border-left</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--line</span><span class="p">)}</span>
<span class="nc">.step</span> <span class="nc">.n</span><span class="p">{</span><span class="nl">font-family</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--mono</span><span class="p">);</span><span class="nl">font-size</span><span class="p">:</span><span class="m">.8rem</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--accent</span><span class="p">)}</span>
<span class="nc">.step</span> <span class="nt">h3</span><span class="p">{</span><span class="nl">font-size</span><span class="p">:</span><span class="m">1.45rem</span><span class="p">;</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">10px</span><span class="p">}</span>
<span class="nc">.step</span> <span class="nt">p</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--muted</span><span class="p">);</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">10px</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="m">.98rem</span><span class="p">}</span>
<span class="nc">.punch</span><span class="p">{</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">28px</span><span class="p">;</span><span class="nl">font-family</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--display</span><span class="p">);</span><span class="nl">font-size</span><span class="p">:</span><span class="m">1.35rem</span><span class="p">;</span><span class="nl">font-weight</span><span class="p">:</span><span class="m">500</span><span class="p">}</span>
<span class="nc">.punch</span> <span class="nt">b</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--accent</span><span class="p">)}</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span><span class="m">820px</span><span class="p">){</span><span class="nc">.steps</span><span class="p">{</span><span class="py">grid-template-columns</span><span class="p">:</span><span class="m">1</span><span class="n">fr</span><span class="p">}</span><span class="nc">.step</span><span class="o">+</span><span class="nc">.step</span><span class="p">{</span><span class="nl">border-left</span><span class="p">:</span><span class="m">0</span><span class="p">;</span><span class="nl">border-top</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--line</span><span class="p">)}}</span>
<span class="c">/* outcomes */</span>
<span class="nc">.outcomes</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="n">grid</span><span class="p">;</span><span class="py">grid-template-columns</span><span class="p">:</span><span class="nb">repeat</span><span class="p">(</span><span class="m">3</span><span class="p">,</span><span class="m">1</span><span class="n">fr</span><span class="p">);</span><span class="py">gap</span><span class="p">:</span><span class="m">36px</span><span class="p">;</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">48px</span><span class="p">}</span>
<span class="nc">.outcome</span><span class="p">{</span><span class="nl">border-top</span><span class="p">:</span><span class="m">3px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--accent</span><span class="p">);</span><span class="nl">padding-top</span><span class="p">:</span><span class="m">18px</span><span class="p">}</span>
<span class="nc">.outcome</span> <span class="nt">h3</span><span class="p">{</span><span class="nl">font-size</span><span class="p">:</span><span class="m">1.5rem</span><span class="p">}</span>
<span class="nc">.outcome</span> <span class="nt">p</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--muted</span><span class="p">);</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">10px</span><span class="p">}</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span><span class="m">820px</span><span class="p">){</span><span class="nc">.outcomes</span><span class="p">{</span><span class="py">grid-template-columns</span><span class="p">:</span><span class="m">1</span><span class="n">fr</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">28px</span><span class="p">}}</span>
<span class="c">/* use cases */</span>
<span class="nc">.uses</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="n">grid</span><span class="p">;</span><span class="py">grid-template-columns</span><span class="p">:</span><span class="m">1</span><span class="n">fr</span> <span class="m">1</span><span class="n">fr</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">0</span><span class="p">;</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">40px</span><span class="p">;</span><span class="nl">border-top</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--line</span><span class="p">)}</span>
<span class="nc">.uses</span> <span class="nt">div</span><span class="p">{</span><span class="nl">padding</span><span class="p">:</span><span class="m">20px</span> <span class="m">0</span><span class="p">;</span><span class="nl">border-bottom</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--line</span><span class="p">);</span><span class="nl">display</span><span class="p">:</span><span class="n">flex</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">16px</span><span class="p">;</span><span class="nl">align-items</span><span class="p">:</span><span class="nb">baseline</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="m">1.08rem</span><span class="p">;</span><span class="nl">font-weight</span><span class="p">:</span><span class="m">500</span><span class="p">}</span>
<span class="nc">.uses</span> <span class="nt">div</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">odd</span><span class="o">)</span><span class="p">{</span><span class="nl">padding-right</span><span class="p">:</span><span class="m">24px</span><span class="p">}</span>
<span class="nc">.uses</span> <span class="nt">code</span><span class="p">{</span><span class="nl">font-family</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--mono</span><span class="p">);</span><span class="nl">font-size</span><span class="p">:</span><span class="m">.75rem</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--muted</span><span class="p">);</span><span class="nl">font-weight</span><span class="p">:</span><span class="m">400</span><span class="p">;</span><span class="nl">flex</span><span class="p">:</span><span class="nb">none</span><span class="p">}</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span><span class="m">640px</span><span class="p">){</span><span class="nc">.uses</span><span class="p">{</span><span class="py">grid-template-columns</span><span class="p">:</span><span class="m">1</span><span class="n">fr</span><span class="p">}}</span>
<span class="c">/* why */</span>
<span class="nc">.why</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="n">grid</span><span class="p">;</span><span class="py">grid-template-columns</span><span class="p">:</span><span class="m">1</span><span class="n">fr</span> <span class="m">1</span><span class="n">fr</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">48px</span><span class="p">;</span><span class="nl">align-items</span><span class="p">:</span><span class="n">start</span><span class="p">}</span>
<span class="nc">.why</span> <span class="nt">ul</span><span class="p">{</span><span class="nl">list-style</span><span class="p">:</span><span class="nb">none</span><span class="p">;</span><span class="nl">margin</span><span class="p">:</span><span class="m">0</span><span class="p">;</span><span class="nl">padding</span><span class="p">:</span><span class="m">0</span><span class="p">;</span><span class="nl">display</span><span class="p">:</span><span class="n">grid</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">14px</span><span class="p">}</span>
<span class="nc">.why</span> <span class="nt">li</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="n">flex</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">12px</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="m">1.05rem</span><span class="p">}</span>
<span class="nc">.why</span> <span class="nt">li</span><span class="nd">::before</span><span class="p">{</span><span class="nl">content</span><span class="p">:</span><span class="s1">""</span><span class="p">;</span><span class="nl">flex</span><span class="p">:</span><span class="nb">none</span><span class="p">;</span><span class="nl">width</span><span class="p">:</span><span class="m">8px</span><span class="p">;</span><span class="nl">height</span><span class="p">:</span><span class="m">8px</span><span class="p">;</span><span class="nl">margin-top</span><span class="p">:</span><span class="m">.6em</span><span class="p">;</span><span class="nl">background</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--blue</span><span class="p">);</span><span class="nl">border-radius</span><span class="p">:</span><span class="m">50%</span><span class="p">}</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span><span class="m">820px</span><span class="p">){</span><span class="nc">.why</span><span class="p">{</span><span class="py">grid-template-columns</span><span class="p">:</span><span class="m">1</span><span class="n">fr</span><span class="p">}}</span>
<span class="c">/* contact form */</span>
<span class="nc">.contact-grid</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="n">grid</span><span class="p">;</span><span class="py">grid-template-columns</span><span class="p">:</span><span class="m">1</span><span class="n">fr</span> <span class="m">1.1</span><span class="n">fr</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">56px</span><span class="p">;</span><span class="nl">align-items</span><span class="p">:</span><span class="n">start</span><span class="p">}</span>
<span class="nc">.contact-form</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="n">grid</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">16px</span><span class="p">}</span>
<span class="nc">.form-group</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="n">grid</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">6px</span><span class="p">}</span>
<span class="nc">.form-group</span> <span class="nt">label</span><span class="p">{</span><span class="nl">font-size</span><span class="p">:</span><span class="m">.9rem</span><span class="p">;</span><span class="nl">font-weight</span><span class="p">:</span><span class="m">500</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--fg</span><span class="p">)}</span>
<span class="nc">.form-group</span> <span class="nc">.optional</span><span class="p">{</span><span class="nl">opacity</span><span class="p">:</span><span class="m">.6</span><span class="p">;</span><span class="nl">font-weight</span><span class="p">:</span><span class="m">400</span><span class="p">}</span>
<span class="nc">.form-group</span> <span class="nt">input</span><span class="o">,</span><span class="nc">.form-group</span> <span class="nt">select</span><span class="o">,</span><span class="nc">.form-group</span> <span class="nt">textarea</span><span class="p">{</span>
  <span class="nl">width</span><span class="p">:</span><span class="m">100%</span><span class="p">;</span><span class="nl">padding</span><span class="p">:</span><span class="m">.7em</span> <span class="m">1em</span><span class="p">;</span><span class="nl">border</span><span class="p">:</span><span class="m">1.5px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--line</span><span class="p">);</span><span class="nl">border-radius</span><span class="p">:</span><span class="m">6px</span><span class="p">;</span>
  <span class="nl">background</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--surface</span><span class="p">);</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--fg</span><span class="p">);</span><span class="nl">font-family</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--body</span><span class="p">);</span><span class="nl">font-size</span><span class="p">:</span><span class="m">.95rem</span><span class="p">;</span>
  <span class="nl">transition</span><span class="p">:</span><span class="n">border-color</span> <span class="m">.15s</span><span class="p">;</span><span class="nl">-webkit-appearance</span><span class="p">:</span><span class="nb">none</span><span class="p">;</span><span class="nl">appearance</span><span class="p">:</span><span class="nb">none</span><span class="p">}</span>
<span class="nc">.form-group</span> <span class="nt">select</span><span class="p">{</span><span class="nl">background-image</span><span class="p">:</span><span class="sx">url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23585D72' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")</span><span class="p">;</span><span class="nl">background-repeat</span><span class="p">:</span><span class="nb">no-repeat</span><span class="p">;</span><span class="nl">background-position</span><span class="p">:</span><span class="nb">right</span> <span class="m">1em</span> <span class="nb">center</span><span class="p">;</span><span class="nl">padding-right</span><span class="p">:</span><span class="m">2.5em</span><span class="p">}</span>
<span class="nc">.form-group</span> <span class="nt">textarea</span><span class="p">{</span><span class="nl">resize</span><span class="p">:</span><span class="n">vertical</span><span class="p">;</span><span class="nl">min-height</span><span class="p">:</span><span class="m">88px</span><span class="p">}</span>
<span class="nc">.form-group</span> <span class="nt">input</span><span class="nd">:focus</span><span class="o">,</span><span class="nc">.form-group</span> <span class="nt">select</span><span class="nd">:focus</span><span class="o">,</span><span class="nc">.form-group</span> <span class="nt">textarea</span><span class="nd">:focus</span><span class="p">{</span><span class="nl">outline</span><span class="p">:</span><span class="nb">none</span><span class="p">;</span><span class="nl">border-color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--accent</span><span class="p">)}</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="p">:</span><span class="m">820px</span><span class="p">){</span><span class="nc">.contact-grid</span><span class="p">{</span><span class="py">grid-template-columns</span><span class="p">:</span><span class="m">1</span><span class="n">fr</span><span class="p">}}</span>
<span class="c">/* footer */</span>
<span class="nt">footer</span><span class="p">{</span><span class="py">padding-block</span><span class="p">:</span><span class="m">32px</span> <span class="m">48px</span><span class="p">;</span><span class="nl">font-size</span><span class="p">:</span><span class="m">.88rem</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--muted</span><span class="p">);</span><span class="nl">border-top</span><span class="p">:</span><span class="m">1px</span> <span class="nb">solid</span> <span class="n">var</span><span class="p">(</span><span class="n">--line</span><span class="p">)}</span>
<span class="nt">footer</span> <span class="nc">.wrap</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="n">flex</span><span class="p">;</span><span class="nl">flex-wrap</span><span class="p">:</span><span class="n">wrap</span><span class="p">;</span><span class="nl">justify-content</span><span class="p">:</span><span class="n">space-between</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">12px</span><span class="p">;</span><span class="nl">align-items</span><span class="p">:</span><span class="nb">center</span><span class="p">}</span>
<span class="nc">.footer-links</span><span class="p">{</span><span class="nl">display</span><span class="p">:</span><span class="n">flex</span><span class="p">;</span><span class="py">gap</span><span class="p">:</span><span class="m">24px</span><span class="p">;</span><span class="nl">flex-wrap</span><span class="p">:</span><span class="n">wrap</span><span class="p">}</span>
<span class="nc">.footer-links</span> <span class="nt">a</span><span class="p">{</span><span class="nl">text-decoration</span><span class="p">:</span><span class="nb">none</span><span class="p">;</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--muted</span><span class="p">)}</span><span class="nc">.footer-links</span> <span class="nt">a</span><span class="nd">:hover</span><span class="p">{</span><span class="nl">color</span><span class="p">:</span><span class="n">var</span><span class="p">(</span><span class="n">--fg</span><span class="p">)}</span>
<span class="k">@media</span> <span class="p">(</span><span class="n">prefers-reduced-motion</span><span class="p">:</span><span class="n">reduce</span><span class="p">){</span><span class="o">*</span><span class="p">{</span><span class="nl">transition</span><span class="p">:</span><span class="nb">none</span><span class="cp">!important</span><span class="p">}}</span>
<span class="nt">&lt;/style&gt;</span>
<span class="nt">&lt;/head&gt;</span>
<span class="nt">&lt;body&gt;</span>
<span class="c">&lt;!-- Google Tag Manager (noscript) --&gt;</span>
<span class="nt">&lt;noscript&gt;&lt;iframe</span> <span class="na">src=</span><span class="s">"https://www.googletagmanager.com/ns.html?id=GTM-TH9XLWX"</span>
<span class="na">height=</span><span class="s">"0"</span> <span class="na">width=</span><span class="s">"0"</span> <span class="na">style=</span><span class="s">"display:none;visibility:hidden"</span><span class="nt">&gt;&lt;/iframe&gt;&lt;/noscript&gt;</span>
<span class="c">&lt;!-- End Google Tag Manager (noscript) --&gt;</span>

<span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">"nav"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"wrap"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"logo"</span> <span class="na">href=</span><span class="s">"/"</span> <span class="na">aria-label=</span><span class="s">"DataYoga home"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"on-light"</span> <span class="na">src=</span><span class="s">"/assets/images/logo-light.png"</span> <span class="na">alt=</span><span class="s">"DataYoga"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"on-dark"</span> <span class="na">src=</span><span class="s">"/assets/images/logo-dark.png"</span> <span class="na">alt=</span><span class="s">"DataYoga"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;ul&gt;</span>
      <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#approach"</span><span class="nt">&gt;</span>Approach<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
      <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#use-cases"</span><span class="nt">&gt;</span>Use cases<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
      <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#why"</span><span class="nt">&gt;</span>Why DataYoga<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;/ul&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn primary"</span> <span class="na">href=</span><span class="s">"#contact"</span><span class="nt">&gt;</span>Schedule a conversation<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/header&gt;</span>

<span class="nt">&lt;main</span> <span class="na">id=</span><span class="s">"top"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hero"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"wrap"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"eyebrow"</span><span class="nt">&gt;</span>Applied AI for finance<span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;h1&gt;</span>AI financial modelling, <span class="nt">&lt;em&gt;</span>built for production.<span class="nt">&lt;/em&gt;&lt;/h1&gt;</span>
      <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"sub"</span><span class="nt">&gt;</span>DataYoga specializes in applied AI for finance. We turn your spreadsheets, ERP and CRM into a persistent, auditable model, so your finance team can see what's happening, forecast with confidence and test any "what if" in minutes.<span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ctas"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn primary"</span> <span class="na">href=</span><span class="s">"#contact"</span><span class="nt">&gt;</span>Book a 30-min discovery call<span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"cta-note"</span><span class="nt">&gt;</span>Show us the spreadsheet everyone's afraid to touch. We'll show you how it could work as a living, AI-powered model.<span class="nt">&lt;/p&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>

  <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"problem"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"wrap"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"sec-head"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"eyebrow"</span><span class="nt">&gt;</span>The POC trap<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Chat demos are exciting. Production is where they fail.<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;p&gt;</span>Everyone has seen the demo: upload a spreadsheet, ask a question, get a neat answer. It's impressive, and it's easy to fund. Then it meets real finance work.<span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"problem-grid"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"stat"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"num"</span><span class="nt">&gt;</span>70%+<span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;p&gt;</span>of AI projects never make it to production.<span class="nt">&lt;/p&gt;</span>
          <span class="nt">&lt;small&gt;</span>RAND puts AI project failure above 80%. MIT's 2025 study found about 95% of generative AI pilots deliver no measurable P<span class="ni">&amp;amp;</span>L impact.<span class="nt">&lt;/small&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"reasons"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;div&gt;&lt;h3&gt;</span>Answers aren't models<span class="nt">&lt;/h3&gt;&lt;p&gt;</span>A chat answers one question and then forgets it. Finance needs numbers that stay put, add up and can be rerun next month.<span class="nt">&lt;/p&gt;&lt;/div&gt;</span>
          <span class="nt">&lt;div&gt;&lt;h3&gt;</span>No audit trail<span class="nt">&lt;/h3&gt;&lt;p&gt;</span>If you can't trace a figure back to the cell or record it came from, you can't sign off on it.<span class="nt">&lt;/p&gt;&lt;/div&gt;</span>
          <span class="nt">&lt;div&gt;&lt;h3&gt;</span>The data is scattered<span class="nt">&lt;/h3&gt;&lt;p&gt;</span>The logic lives in dozens of Excel files, the actuals in your ERP, the pipeline in your CRM. A chatbot sees only the part you pasted in.<span class="nt">&lt;/p&gt;&lt;/div&gt;</span>
          <span class="nt">&lt;div&gt;&lt;h3&gt;</span>"Almost right" counts as wrong<span class="nt">&lt;/h3&gt;&lt;p&gt;</span>A 2% error in a forecast or a provision isn't a rounding issue. It's a restatement.<span class="nt">&lt;/p&gt;&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/section&gt;</span>

  <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"approach"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"wrap"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"sec-head"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"eyebrow"</span><span class="nt">&gt;</span>Our approach<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;h2&gt;</span>We build models, not chatbots.<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;p&gt;</span>We use AI for the work it does well: mapping messy spreadsheets, reconciling sources and capturing the business logic hidden in formulas. Its output goes into a structured financial model that is deterministic, versioned and traceable.<span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"steps"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"step"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"n"</span><span class="nt">&gt;</span>Step 1<span class="nt">&lt;/div&gt;&lt;h3&gt;</span>Extract<span class="nt">&lt;/h3&gt;&lt;p&gt;</span>AI maps your spreadsheets, ERP and CRM data and captures every driver behind the numbers: rates, tiers, assumptions and dependencies.<span class="nt">&lt;/p&gt;&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"step"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"n"</span><span class="nt">&gt;</span>Step 2<span class="nt">&lt;/div&gt;&lt;h3&gt;</span>Model<span class="nt">&lt;/h3&gt;&lt;p&gt;</span>Those drivers feed a persistent model that's connected to your actuals and recalculates as the data changes.<span class="nt">&lt;/p&gt;&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"step"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"n"</span><span class="nt">&gt;</span>Step 3<span class="nt">&lt;/div&gt;&lt;h3&gt;</span>Ask<span class="nt">&lt;/h3&gt;&lt;p&gt;</span>Your team explores the model in plain language and runs scenarios, and every answer links back to its source.<span class="nt">&lt;/p&gt;&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"punch"</span><span class="nt">&gt;</span>The AI does the reasoning. <span class="nt">&lt;b&gt;</span>Your model does the math.<span class="nt">&lt;/b&gt;&lt;/p&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/section&gt;</span>

  <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"outcomes"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"wrap"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"sec-head"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"eyebrow"</span><span class="nt">&gt;</span>What you get<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Numbers your finance team can stand behind.<span class="nt">&lt;/h2&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"outcomes"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"outcome"</span><span class="nt">&gt;&lt;h3&gt;</span>Visibility<span class="nt">&lt;/h3&gt;&lt;p&gt;</span>One view of the drivers, commitments and exposures that are scattered across Excel, your ERP and your CRM today.<span class="nt">&lt;/p&gt;&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"outcome"</span><span class="nt">&gt;&lt;h3&gt;</span>Predictability<span class="nt">&lt;/h3&gt;&lt;p&gt;</span>Forecasts and provisions built from your real business logic instead of last year's spreadsheet.<span class="nt">&lt;/p&gt;&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"outcome"</span><span class="nt">&gt;&lt;h3&gt;</span>What-if<span class="nt">&lt;/h3&gt;&lt;p&gt;</span>Change a rate, a volume or an assumption and see the effect on P<span class="ni">&amp;amp;</span>L and cash right away.<span class="nt">&lt;/p&gt;&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/section&gt;</span>

  <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"example"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"wrap example"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"sec-head"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"eyebrow"</span><span class="nt">&gt;</span>One example<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;h2&gt;</span>A what-if, traced to source.<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;p&gt;</span>Here is a single scenario on illustrative numbers: a change in sales volume or commission rate, and its effect on the Q4 provision. Every figure links back to the file or system it came from.<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;p</span> <span class="na">style=</span><span class="s">"margin-top:16px"</span><span class="nt">&gt;</span>The same model answers questions across revenue, cash, headcount and pricing. This is one of many.<span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"model"</span> <span class="na">aria-label=</span><span class="s">"Example what-if model"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"model-head"</span><span class="nt">&gt;&lt;span&gt;&lt;b&gt;</span>Q4 commission provision<span class="nt">&lt;/b&gt;</span> · scenario<span class="nt">&lt;/span&gt;&lt;span</span> <span class="na">class=</span><span class="s">"tag"</span><span class="nt">&gt;</span>Illustrative example<span class="nt">&lt;/span&gt;&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"model-body"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ctrl"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"vol"</span><span class="nt">&gt;</span>Q4 sales volume vs. plan <span class="nt">&lt;output</span> <span class="na">id=</span><span class="s">"volOut"</span><span class="nt">&gt;</span>+0%<span class="nt">&lt;/output&gt;&lt;/label&gt;</span>
            <span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">"vol"</span> <span class="na">type=</span><span class="s">"range"</span> <span class="na">min=</span><span class="s">"-20"</span> <span class="na">max=</span><span class="s">"30"</span> <span class="na">step=</span><span class="s">"1"</span> <span class="na">value=</span><span class="s">"0"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;small&gt;</span>Plan: $12.4M revenue<span class="nt">&lt;/small&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ctrl"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"rate"</span><span class="nt">&gt;</span>Tier 2 commission rate <span class="nt">&lt;output</span> <span class="na">id=</span><span class="s">"rateOut"</span><span class="nt">&gt;</span>5.0%<span class="nt">&lt;/output&gt;&lt;/label&gt;</span>
            <span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">"rate"</span> <span class="na">type=</span><span class="s">"range"</span> <span class="na">min=</span><span class="s">"4"</span> <span class="na">max=</span><span class="s">"8"</span> <span class="na">step=</span><span class="s">"0.5"</span> <span class="na">value=</span><span class="s">"5"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;small&gt;</span>Tier 1: 3% up to $10M<span class="nt">&lt;/small&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"results"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"res"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"k"</span><span class="nt">&gt;</span>Q4 revenue<span class="nt">&lt;/div&gt;&lt;div</span> <span class="na">class=</span><span class="s">"v"</span> <span class="na">id=</span><span class="s">"rev"</span><span class="nt">&gt;</span>$12.40M<span class="nt">&lt;/div&gt;&lt;div</span> <span class="na">class=</span><span class="s">"d"</span> <span class="na">id=</span><span class="s">"revD"</span><span class="nt">&gt;</span>on plan<span class="nt">&lt;/div&gt;&lt;/div&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"res"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"k"</span><span class="nt">&gt;</span>Commission provision<span class="nt">&lt;/div&gt;&lt;div</span> <span class="na">class=</span><span class="s">"v"</span> <span class="na">id=</span><span class="s">"prov"</span><span class="nt">&gt;</span>$420K<span class="nt">&lt;/div&gt;&lt;div</span> <span class="na">class=</span><span class="s">"d"</span> <span class="na">id=</span><span class="s">"provD"</span><span class="nt">&gt;</span>on plan<span class="nt">&lt;/div&gt;&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"src"</span> <span class="na">aria-label=</span><span class="s">"Sources"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;span&gt;</span>CRM · Q4 pipeline<span class="nt">&lt;/span&gt;&lt;span&gt;</span>Commissions_FY26.xlsx · Tiers!C4:C7<span class="nt">&lt;/span&gt;&lt;span&gt;</span>ERP · GL 6210<span class="nt">&lt;/span&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/section&gt;</span>

  <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"use-cases"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"wrap"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"sec-head"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"eyebrow"</span><span class="nt">&gt;</span>Use cases<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Where we start.<span class="nt">&lt;/h2&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"uses"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div&gt;&lt;code&gt;</span>P<span class="ni">&amp;amp;</span>L<span class="nt">&lt;/code&gt;</span>Commission and incentive provisions<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div&gt;&lt;code&gt;</span>REV<span class="nt">&lt;/code&gt;</span>Revenue forecasting and budget vs. actuals<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div&gt;&lt;code&gt;</span>CASH<span class="nt">&lt;/code&gt;</span>Cash flow scenarios and liquidity planning<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;div&gt;&lt;code&gt;</span>OPEX<span class="nt">&lt;/code&gt;</span>Pricing, headcount and cost what-ifs<span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/section&gt;</span>

  <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"why"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"wrap why"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"sec-head"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"eyebrow"</span><span class="nt">&gt;</span>Why DataYoga<span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;h2&gt;</span>Enterprise data expertise, amplified by AI.<span class="nt">&lt;/h2&gt;</span>
        <span class="nt">&lt;p&gt;</span>Our team has designed, built and modernized enterprise data platforms, from complex ETL and Informatica migrations to modern cloud stacks. We apply AI on top of that expertise. That's why our projects reach production: we start with the data, the lineage and the controls, and the interface comes last.<span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;ul&gt;</span>
        <span class="nt">&lt;li&gt;</span>Specialists in applied AI for finance<span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;</span>Production from day one: auditable, versioned and secure<span class="nt">&lt;/li&gt;</span>
        <span class="nt">&lt;li&gt;</span>We work alongside your team, not around it<span class="nt">&lt;/li&gt;</span>
      <span class="nt">&lt;/ul&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/section&gt;</span>

  <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">"contact"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"wrap"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"contact-grid"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"sec-head"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"eyebrow"</span><span class="nt">&gt;</span>Get in touch<span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;h2&gt;</span>Tell us what's slowing your team down.<span class="nt">&lt;/h2&gt;</span>
          <span class="nt">&lt;p&gt;</span>Share the challenge. We'll show you what's possible.<span class="nt">&lt;/p&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"contact-form"</span> <span class="na">action=</span><span class="s">"https://formspree.io/f/mdeapnak"</span> <span class="na">method=</span><span class="s">"POST"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"hidden"</span> <span class="na">name=</span><span class="s">"_next"</span> <span class="na">value=</span><span class="s">"https://calendar.app.google/2VFk5nRs8ufa8pZQA"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"name"</span><span class="nt">&gt;</span>Name<span class="nt">&lt;/label&gt;</span>
            <span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">"name"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">required</span> <span class="na">placeholder=</span><span class="s">"Your name"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"email"</span><span class="nt">&gt;</span>Work email<span class="nt">&lt;/label&gt;</span>
            <span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">"email"</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">name=</span><span class="s">"email"</span> <span class="na">required</span> <span class="na">placeholder=</span><span class="s">"you@company.com"</span><span class="nt">&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"role"</span><span class="nt">&gt;</span>Role<span class="nt">&lt;/label&gt;</span>
            <span class="nt">&lt;select</span> <span class="na">id=</span><span class="s">"role"</span> <span class="na">name=</span><span class="s">"role"</span> <span class="na">required</span><span class="nt">&gt;</span>
              <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">""</span> <span class="na">disabled</span> <span class="na">selected</span><span class="nt">&gt;</span>Select your role<span class="nt">&lt;/option&gt;</span>
              <span class="nt">&lt;option&gt;</span>CFO<span class="nt">&lt;/option&gt;</span>
              <span class="nt">&lt;option&gt;</span>CRO<span class="nt">&lt;/option&gt;</span>
              <span class="nt">&lt;option&gt;</span>VP Finance<span class="nt">&lt;/option&gt;</span>
              <span class="nt">&lt;option&gt;</span>FP<span class="err">&amp;</span>A Lead<span class="nt">&lt;/option&gt;</span>
              <span class="nt">&lt;option&gt;</span>Controller<span class="nt">&lt;/option&gt;</span>
              <span class="nt">&lt;option&gt;</span>CEO / Founder<span class="nt">&lt;/option&gt;</span>
              <span class="nt">&lt;option&gt;</span>Other<span class="nt">&lt;/option&gt;</span>
            <span class="nt">&lt;/select&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
            <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"improve"</span><span class="nt">&gt;</span>What would you like to improve? <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"optional"</span><span class="nt">&gt;</span>(optional)<span class="nt">&lt;/span&gt;&lt;/label&gt;</span>
            <span class="nt">&lt;textarea</span> <span class="na">id=</span><span class="s">"improve"</span> <span class="na">name=</span><span class="s">"improve"</span> <span class="na">placeholder=</span><span class="s">"e.g. our commission provisions take 3 days to close every month"</span><span class="nt">&gt;&lt;/textarea&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn primary"</span><span class="nt">&gt;</span>Schedule a conversation →<span class="nt">&lt;/button&gt;</span>
        <span class="nt">&lt;/form&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/section&gt;</span>
<span class="nt">&lt;/main&gt;</span>

<span class="nt">&lt;footer&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"wrap"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span&gt;</span>© 2026 DataYoga · Applied AI for finance<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"footer-links"</span> <span class="na">aria-label=</span><span class="s">"Other offerings"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/informatica-to-snowflake-migration/"</span><span class="nt">&gt;</span>Informatica Migration<span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"/datayoga-transform/"</span><span class="nt">&gt;</span>DataYoga Transform<span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"mailto:info@datayoga.io"</span><span class="nt">&gt;</span>info@datayoga.io<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/nav&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/footer&gt;</span>

<span class="nt">&lt;script&gt;</span>
<span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
  <span class="kd">const</span> <span class="nx">vol</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">vol</span><span class="dl">'</span><span class="p">),</span> <span class="nx">rate</span><span class="o">=</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">rate</span><span class="dl">'</span><span class="p">);</span>
  <span class="kd">const</span> <span class="nx">PLAN</span><span class="o">=</span><span class="mf">12.4</span><span class="p">,</span> <span class="nx">T1</span><span class="o">=</span><span class="mi">10</span><span class="p">,</span> <span class="nx">R1</span><span class="o">=</span><span class="mf">0.03</span><span class="p">,</span> <span class="nx">PLAN_RATE</span><span class="o">=</span><span class="mf">0.05</span><span class="p">;</span>
  <span class="kd">const</span> <span class="nx">prov</span><span class="o">=</span><span class="p">(</span><span class="nx">rev</span><span class="p">,</span><span class="nx">r</span><span class="p">)</span><span class="o">=&gt;</span><span class="nx">R1</span><span class="o">*</span><span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">rev</span><span class="p">,</span><span class="nx">T1</span><span class="p">)</span><span class="o">+</span><span class="nx">r</span><span class="o">*</span><span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">rev</span><span class="o">-</span><span class="nx">T1</span><span class="p">,</span><span class="mi">0</span><span class="p">);</span>
  <span class="kd">const</span> <span class="nx">planProv</span><span class="o">=</span><span class="nx">prov</span><span class="p">(</span><span class="nx">PLAN</span><span class="p">,</span><span class="nx">PLAN_RATE</span><span class="p">);</span>
  <span class="kd">function</span> <span class="nx">delta</span><span class="p">(</span><span class="nx">el</span><span class="p">,</span><span class="nx">d</span><span class="p">,</span><span class="nx">fmt</span><span class="p">){</span>
    <span class="nx">el</span><span class="p">.</span><span class="nx">className</span><span class="o">=</span><span class="dl">'</span><span class="s1">d </span><span class="dl">'</span><span class="o">+</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="nx">d</span><span class="p">)</span><span class="o">&lt;</span><span class="mi">1</span><span class="nx">e</span><span class="o">-</span><span class="mi">9</span><span class="p">?</span><span class="dl">''</span><span class="p">:(</span><span class="nx">d</span><span class="o">&gt;</span><span class="mi">0</span><span class="p">?</span><span class="dl">'</span><span class="s1">up</span><span class="dl">'</span><span class="p">:</span><span class="dl">'</span><span class="s1">down</span><span class="dl">'</span><span class="p">));</span>
    <span class="nx">el</span><span class="p">.</span><span class="nx">textContent</span><span class="o">=</span><span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="nx">d</span><span class="p">)</span><span class="o">&lt;</span><span class="mi">1</span><span class="nx">e</span><span class="o">-</span><span class="mi">9</span><span class="p">?</span><span class="dl">'</span><span class="s1">on plan</span><span class="dl">'</span><span class="p">:(</span><span class="nx">d</span><span class="o">&gt;</span><span class="mi">0</span><span class="p">?</span><span class="dl">'</span><span class="s1">+</span><span class="dl">'</span><span class="p">:</span><span class="dl">'</span><span class="s1">−</span><span class="dl">'</span><span class="p">)</span><span class="o">+</span><span class="nx">fmt</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="nx">d</span><span class="p">))</span><span class="o">+</span><span class="dl">'</span><span class="s1"> vs. plan</span><span class="dl">'</span><span class="p">;</span>
  <span class="p">}</span>
  <span class="kd">function</span> <span class="nx">update</span><span class="p">(){</span>
    <span class="kd">const</span> <span class="nx">v</span><span class="o">=+</span><span class="nx">vol</span><span class="p">.</span><span class="nx">value</span><span class="p">,</span> <span class="nx">r</span><span class="o">=+</span><span class="nx">rate</span><span class="p">.</span><span class="nx">value</span><span class="o">/</span><span class="mi">100</span><span class="p">;</span>
    <span class="kd">const</span> <span class="nx">rev</span><span class="o">=</span><span class="nx">PLAN</span><span class="o">*</span><span class="p">(</span><span class="mi">1</span><span class="o">+</span><span class="nx">v</span><span class="o">/</span><span class="mi">100</span><span class="p">),</span> <span class="nx">p</span><span class="o">=</span><span class="nx">prov</span><span class="p">(</span><span class="nx">rev</span><span class="p">,</span><span class="nx">r</span><span class="p">);</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">volOut</span><span class="dl">'</span><span class="p">).</span><span class="nx">textContent</span><span class="o">=</span><span class="p">(</span><span class="nx">v</span><span class="o">&gt;</span><span class="mi">0</span><span class="p">?</span><span class="dl">'</span><span class="s1">+</span><span class="dl">'</span><span class="p">:</span><span class="dl">''</span><span class="p">)</span><span class="o">+</span><span class="nx">v</span><span class="o">+</span><span class="dl">'</span><span class="s1">%</span><span class="dl">'</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">rateOut</span><span class="dl">'</span><span class="p">).</span><span class="nx">textContent</span><span class="o">=</span><span class="p">(</span><span class="o">+</span><span class="nx">rate</span><span class="p">.</span><span class="nx">value</span><span class="p">).</span><span class="nx">toFixed</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span><span class="o">+</span><span class="dl">'</span><span class="s1">%</span><span class="dl">'</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">rev</span><span class="dl">'</span><span class="p">).</span><span class="nx">textContent</span><span class="o">=</span><span class="dl">'</span><span class="s1">$</span><span class="dl">'</span><span class="o">+</span><span class="nx">rev</span><span class="p">.</span><span class="nx">toFixed</span><span class="p">(</span><span class="mi">2</span><span class="p">)</span><span class="o">+</span><span class="dl">'</span><span class="s1">M</span><span class="dl">'</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">prov</span><span class="dl">'</span><span class="p">).</span><span class="nx">textContent</span><span class="o">=</span><span class="dl">'</span><span class="s1">$</span><span class="dl">'</span><span class="o">+</span><span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nx">p</span><span class="o">*</span><span class="mi">1000</span><span class="p">)</span><span class="o">+</span><span class="dl">'</span><span class="s1">K</span><span class="dl">'</span><span class="p">;</span>
    <span class="nx">delta</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">revD</span><span class="dl">'</span><span class="p">),</span><span class="nx">rev</span><span class="o">-</span><span class="nx">PLAN</span><span class="p">,</span><span class="nx">x</span><span class="o">=&gt;</span><span class="dl">'</span><span class="s1">$</span><span class="dl">'</span><span class="o">+</span><span class="nx">x</span><span class="p">.</span><span class="nx">toFixed</span><span class="p">(</span><span class="mi">2</span><span class="p">)</span><span class="o">+</span><span class="dl">'</span><span class="s1">M</span><span class="dl">'</span><span class="p">);</span>
    <span class="nx">delta</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">provD</span><span class="dl">'</span><span class="p">),</span><span class="nx">p</span><span class="o">-</span><span class="nx">planProv</span><span class="p">,</span><span class="nx">x</span><span class="o">=&gt;</span><span class="dl">'</span><span class="s1">$</span><span class="dl">'</span><span class="o">+</span><span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nx">x</span><span class="o">*</span><span class="mi">1000</span><span class="p">)</span><span class="o">+</span><span class="dl">'</span><span class="s1">K</span><span class="dl">'</span><span class="p">);</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">revD</span><span class="dl">'</span><span class="p">).</span><span class="nx">className</span><span class="o">=</span><span class="dl">'</span><span class="s1">d</span><span class="dl">'</span><span class="p">;</span>
  <span class="p">}</span>
  <span class="nx">vol</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">input</span><span class="dl">'</span><span class="p">,</span><span class="nx">update</span><span class="p">);</span> <span class="nx">rate</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">input</span><span class="dl">'</span><span class="p">,</span><span class="nx">update</span><span class="p">);</span> <span class="nx">update</span><span class="p">();</span>
<span class="p">})();</span>
<span class="nt">&lt;/script&gt;</span>
<span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div></div>

<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Verify Jekyll can parse the file (no Liquid errors)</strong></li>
</ul>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd</span> /home/dtrop/datayoga-io-site <span class="o">&amp;&amp;</span> bundle <span class="nb">exec </span>jekyll build 2&gt;&amp;1 | <span class="nb">head</span> <span class="nt">-30</span>
</code></pre></div></div>

<p>Expected: <code class="language-plaintext highlighter-rouge">Build complete!</code> or <code class="language-plaintext highlighter-rouge">done in X seconds</code> with no errors. If you see a Liquid/YAML parse error, check the front matter dashes at the very top of the file.</p>

<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Commit</strong></li>
</ul>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git add _layouts/home-v2.html
git commit <span class="nt">-m</span> <span class="s2">"feat: add home-v2 standalone layout with AI finance page and contact form"</span>
</code></pre></div></div>

<hr />

<h2 id="task-4-update-indexhtml">Task 4: Update <code class="language-plaintext highlighter-rouge">index.html</code></h2>

<p><strong>Files:</strong></p>
<ul class="task-list">
  <li>
    <p>Modify: <code class="language-plaintext highlighter-rouge">index.html</code> (front matter only)</p>
  </li>
  <li class="task-list-item">
    <p><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Replace the layout line in index.html front matter</strong></p>
  </li>
</ul>

<p>Open <code class="language-plaintext highlighter-rouge">index.html</code>. Find this line in the YAML front matter (near the top):</p>

<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">layout</span><span class="pi">:</span> <span class="s">home</span>
</code></pre></div></div>

<p>Change it to:</p>

<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">layout</span><span class="pi">:</span> <span class="s">home-v2</span>
</code></pre></div></div>

<p>Leave every other line in the front matter untouched.</p>

<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Build and preview locally</strong></li>
</ul>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd</span> /home/dtrop/datayoga-io-site <span class="o">&amp;&amp;</span> bundle <span class="nb">exec </span>jekyll serve <span class="nt">--port</span> 4000
</code></pre></div></div>

<p>Open <code class="language-plaintext highlighter-rouge">http://localhost:4000</code> in your browser. Verify:</p>
<ul>
  <li>New homepage loads (Bricolage Grotesque font, indigo accent, grid background)</li>
  <li>Logo displays in the header</li>
  <li>All section anchors work (Approach, Use cases, Why DataYoga scroll correctly)</li>
  <li>Interactive model card sliders update the revenue/provision values</li>
  <li>Contact form displays all fields (Name, Work email, Role dropdown, textarea, submit button)</li>
  <li>Footer shows Informatica Migration and DataYoga Transform links</li>
  <li>Navigate to <code class="language-plaintext highlighter-rouge">/about/</code>, <code class="language-plaintext highlighter-rouge">/etl-migration/</code> — confirm those pages still use the old theme (Bootstrap, existing header/nav)</li>
</ul>

<p>Stop the server with <code class="language-plaintext highlighter-rouge">Ctrl+C</code> when done.</p>

<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Commit</strong></li>
</ul>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git add index.html
git commit <span class="nt">-m</span> <span class="s2">"feat: switch homepage to new AI finance layout"</span>
</code></pre></div></div>

<hr />

<h2 id="task-5-push-branch-and-open-pr">Task 5: Push branch and open PR</h2>

<p><strong>Files:</strong> none</p>

<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 1: Push the branch</strong></li>
</ul>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git push <span class="nt">-u</span> origin homepage-revamp
</code></pre></div></div>

<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 2: Open a pull request targeting gh-pages</strong></li>
</ul>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gh <span class="nb">pr </span>create <span class="se">\</span>
  <span class="nt">--base</span> gh-pages <span class="se">\</span>
  <span class="nt">--title</span> <span class="s2">"Homepage revamp: Applied AI for finance"</span> <span class="se">\</span>
  <span class="nt">--body</span> <span class="s2">"Replaces the homepage with the new AI-for-finance design. All existing page URLs unchanged. New inline contact form posts to Formspree (mdeapnak) and redirects to Google Calendar booking. Legacy nav links (Informatica Migration, DataYoga Transform) in footer."</span>
</code></pre></div></div>

<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><strong>Step 3: Merge the PR</strong></li>
</ul>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gh <span class="nb">pr </span>merge <span class="nt">--squash</span> <span class="nt">--delete-branch</span>
</code></pre></div></div>

<p>GitHub Pages will redeploy automatically from <code class="language-plaintext highlighter-rouge">gh-pages</code>. It typically takes 1–3 minutes. Check https://datayoga.io after the deploy completes.</p>

<hr />

<h2 id="post-deploy-checklist">Post-deploy checklist</h2>

<ul class="task-list">
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Homepage loads at datayoga.io with new design</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Submit a test form entry — confirm it appears in Formspree dashboard and redirects to Google Calendar</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" /><code class="language-plaintext highlighter-rouge">/about/</code>, <code class="language-plaintext highlighter-rouge">/etl-migration/</code>, <code class="language-plaintext highlighter-rouge">/datayoga-transform/</code> still load correctly with old theme</li>
  <li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />Footer links on homepage navigate to correct legacy pages</li>
</ul>

  </div>

</article>

</body>
</html>

URLs — No Changes

All existing permalinks are unchanged. No redirects needed.


Assets


Out-of-scope follow-ups (post-launch)