/* Mesh homepage — v5 hero + feature, integrated verbatim from the mesh-hero-v5
   package (the "first part" of the page). The markup, CSS (meshv5.css) and the
   animation engines (meshv5-kit.js / meshv5-hero.js / meshv5-features.js) are the
   package's own code, only scoped under `.meshv5` / `body.meshv5home` so they
   can't touch the rest of the site. Everything below this component is the repo's
   existing page.

   - HERO  = <header class="hero hero-blue" id="top">  — animated workbook conveyor
   - FEAT  = <section class="tg5" id="product">         — scroll-driven 4-tab story
   - SCENE = fixed backdrop that lerps blue -> white as you scroll (initScene)

   The hero's "Get a demo" buttons (data-demo-cta) are wired to the site's existing
   cal.com demo modal via onCta; "See how it works" is a native #product anchor. */

const A = (k) => window.__assets(k);

const SCENE_HTML = `<div class="scene" aria-hidden="true"></div>`;

const HERO_HTML = `
  <header class="hero hero-blue" id="top">
    <div class="hero-bg" aria-hidden="true"></div>
    <div class="hbg-grid" aria-hidden="true"></div>
    <div class="hbg-glow" id="heroGlow" aria-hidden="true"></div>
    <div class="wrap hero-grid">
      <div class="hero-left">
        <h1>
          <span class="h1-line">Month-end</span>
          <span class="h1-line">without the</span>
          <span class="blank" id="heroBlank">
            <span class="blank-measure" aria-hidden="true">late nights</span>
            <span class="blank-reveal hl"><span class="rl" style="animation-delay:0ms">l</span><span class="rl" style="animation-delay:50ms">a</span><span class="rl" style="animation-delay:100ms">t</span><span class="rl" style="animation-delay:150ms">e</span><span class="rl" style="animation-delay:200ms">&nbsp;</span><span class="rl" style="animation-delay:250ms">n</span><span class="rl" style="animation-delay:300ms">i</span><span class="rl" style="animation-delay:350ms">g</span><span class="rl" style="animation-delay:400ms">h</span><span class="rl" style="animation-delay:450ms">t</span><span class="rl" style="animation-delay:500ms">s</span></span>
          </span>
        </h1>
        <div class="hero-foot">
          <p class="sub">Eliminate accrual spreadsheets with auditable scripts for your team.</p>
          <div class="hero-backed">
            <span class="backed-label">Backed by</span>
            <span class="yc-lockup" aria-label="Y Combinator"><svg class="yc-mark" viewBox="0 0 2233 448" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><g clip-path="url(#clip0_2825_24321)"><path d="M0 0H447.78V448H0V0Z" fill="#FC6723"/><path d="M1427.41 95.4528C1432.79 93.7707 1438.59 94.0651 1443.76 96.2829C1448.45 99.2944 1452.05 103.732 1454.03 108.943C1457.49 120.133 1448.4 132.693 1437.01 133.973C1428.21 134.953 1418.54 129.803 1415.81 121.083C1412.19 111.223 1417.76 99.3528 1427.41 95.4528ZM633.732 115.703C646.522 107.143 661.432 100.703 677.022 100.503C692.892 100.213 709.342 101.343 723.942 108.103C729.922 110.843 735.952 113.723 740.922 118.123C737.292 124.393 732.502 129.863 727.972 135.473C722.162 132.023 716.422 128.313 709.972 126.123C694.252 120.573 676.382 119.383 660.702 125.703C647.582 130.693 636.862 140.883 630.132 153.093C625.482 161.693 621.592 170.823 619.652 180.453C617.922 189.853 617.372 199.423 617.222 208.963C616.712 221.643 616.122 234.363 616.892 247.033C619.122 264.643 625.232 282.373 637.242 295.763C647.762 307.863 663.302 314.963 679.122 316.553C687.452 317.013 695.962 317.123 704.102 315.013C714.002 312.843 722.772 307.643 731.922 303.543C737.262 308.843 741.902 314.803 746.262 320.923C739.436 324.765 732.383 328.188 725.142 331.173C705.622 339.083 683.972 339.253 663.312 337.263C648.452 334.173 634.662 326.663 623.202 316.803C609.982 305.303 600.302 290.043 594.472 273.583C590.542 262.493 588.622 250.793 587.582 239.103C587.172 230.413 586.202 221.693 587.182 212.993C587.482 196.523 590.152 179.913 596.722 164.713C604.632 145.643 616.502 127.553 633.732 115.703Z" fill="#FC6723"/><path d="M133.02 111.644C134.99 111.204 136.95 110.704 138.98 110.644C148.6 110.444 158.21 111.044 167.82 111.344C169.34 111.104 169.87 112.514 170.43 113.614C185.08 143.634 199.52 173.774 214.31 203.734C217.49 209.954 220.34 216.354 223.94 222.354C226.97 217.434 229.43 212.184 232.1 207.064C248.71 175.074 264.42 142.614 280.77 110.494C291.59 110.824 302.52 109.754 313.25 111.524C311.3 117.654 307.79 123.104 305.01 128.874C283.55 169.994 261.51 210.804 239.85 251.814C239.067 253.403 238.699 255.164 238.78 256.934C238.82 286.244 238.78 315.564 238.8 344.874C228.35 344.884 217.9 344.944 207.45 344.834C207.56 316.224 207.42 287.614 207.52 259.004C207.48 255.934 207.87 252.644 206.17 249.914C186.21 212.474 166.18 175.074 146.33 137.584C141.94 128.914 136.98 120.524 133.02 111.644Z" fill="#FFFEFE"/><path fill-rule="evenodd" clip-rule="evenodd" d="M1744 163.312C1751.32 163.362 1758.73 163.041 1766.01 164.161C1784.19 167.601 1799.73 183.952 1800.21 202.812C1801.18 230.862 1800.01 258.942 1800.3 287.002C1800.51 295.342 1800.2 303.832 1802.25 311.981C1803.47 317.481 1808.59 320.521 1812.53 323.991C1808.66 329.281 1805.49 335.242 1800.46 339.542C1797.53 341.992 1793.91 339.331 1791.44 337.531C1784.92 332.701 1780.49 325.681 1776.89 318.531C1771.11 321.681 1766.68 326.702 1761.05 330.092C1751.24 336.312 1739.67 340.012 1728.01 339.842C1717.55 340.082 1706.83 338.342 1697.41 333.672C1682.11 325.592 1673.61 307.971 1674.05 291.021C1673.92 274.732 1682.18 258.872 1695.26 249.262C1710.92 237.572 1730.82 233.721 1749.92 232.321C1758.65 231.551 1767.43 231.512 1776.19 231.132C1776.54 222.582 1775.89 214.022 1774.67 205.562C1773.64 198.372 1770.21 191.011 1763.61 187.401C1755.7 183.232 1746.35 183.132 1737.7 184.382C1721.38 186.372 1706.06 193.342 1692.78 202.852C1689.24 197.802 1685.48 192.871 1682.47 187.491C1681 184.801 1683.38 182.682 1685.62 181.582C1703.53 171.712 1723.16 163.162 1744 163.312ZM1774.83 249.454C1768.19 249.664 1761.63 248.153 1755 248.733C1746.72 249.513 1738.33 249.994 1730.29 252.244C1720.65 254.984 1711.77 261.044 1706.65 269.773C1703.72 274.613 1703.75 280.473 1703.44 285.943C1703.3 292.003 1702.51 298.384 1704.92 304.134C1707.3 309.864 1711.18 315.484 1717.11 317.934C1723.96 320.804 1731.59 321.084 1738.9 320.434C1747.65 319.374 1755.48 314.654 1762.24 309.244C1767.9 304.544 1773.4 298.414 1773.79 290.674C1774.91 276.974 1774.66 263.194 1774.83 249.454Z" fill="#FC6723"/><path d="M1890.79 118.102C1889.49 134.431 1888.29 150.771 1887.72 167.151C1901.65 167.481 1915.59 167.482 1929.52 168.052C1927.11 174.312 1924.55 180.513 1921.84 186.651C1910.11 186.691 1898.37 186.601 1886.64 186.691C1886.6 201.801 1886.77 216.902 1886.77 232.012C1886.63 244.012 1887.48 255.992 1887.29 268.002C1887.61 281.602 1886.9 295.272 1888.44 308.821C1888.83 314.461 1893.9 318.431 1899 319.871C1907.5 321.821 1916.38 321.131 1924.8 319.071C1927.07 323.978 1928.1 329.364 1927.82 334.762C1920.18 338.742 1911.42 339.512 1902.99 340.262C1891.09 340.742 1877.82 338.852 1869.27 329.722C1862.23 323.182 1862.78 312.781 1861.97 303.991C1861.11 284.681 1861.45 265.332 1861.35 246.002C1861.31 226.232 1861.41 206.471 1861.3 186.701C1853.87 186.601 1846.45 186.671 1839.04 186.661C1838.76 180.201 1838.8 173.731 1839 167.271C1846.29 167.211 1853.58 167.371 1860.87 167.161C1861.98 152.931 1862.23 138.601 1864.53 124.491C1873.11 121.731 1881.92 119.692 1890.79 118.102Z" fill="#FC6723"/><path fill-rule="evenodd" clip-rule="evenodd" d="M829.448 163.691C835.268 162.951 841.149 163.231 846.999 163.281C853.929 163.511 861.039 163.132 867.719 165.332C883.048 170.602 896.538 181.242 904.738 195.281C911.718 207.391 916.628 220.982 917.188 235.052C918.058 253.952 918.688 273.402 912.768 291.632C907.258 308.732 895.198 323.972 879.068 332.142C863.028 340.431 843.828 341.981 826.478 337.312C810.879 333.211 797.339 322.931 788.389 309.621C778.439 295.351 775.079 277.682 774.469 260.592C774.069 244.062 773.749 227.052 779.249 211.212C784.439 195.592 794.469 181.312 808.528 172.502C814.988 168.542 821.968 165.141 829.448 163.691ZM866.121 188.834C856.351 183.104 844.301 182.243 833.421 184.813C824.431 186.933 815.941 192.084 810.971 200.004C803.901 211.304 802.881 225.054 802.081 238.014C801.171 247.664 802.011 257.344 802.861 266.964C804.271 278.594 806.491 290.444 812.121 300.854C818.271 311.774 830.881 317.364 842.981 318.204C854.521 318.954 867.062 315.843 875.271 307.273C881.911 299.993 885.731 290.463 887.071 280.773C888.771 268.604 888.491 256.273 888.281 244.023C887.711 231.274 886.831 218.164 881.681 206.304C878.555 198.929 873.087 192.789 866.121 188.834Z" fill="#FC6723"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2015.41 163.672C2025.82 162.225 2036.4 162.519 2046.71 164.542C2062.08 168.227 2075.6 177.339 2084.78 190.201C2092.15 200.501 2096.95 212.561 2099.24 224.991C2101.01 236.904 2101.68 248.955 2101.25 260.991C2100.79 280.551 2094.77 300.221 2082.84 315.861C2073.19 328.381 2058.24 335.892 2042.89 338.672C2024.25 341.932 2004.02 338.632 1988.43 327.552C1974.75 317.812 1966.03 302.572 1961.3 286.722C1958.74 278.732 1958.29 270.302 1957.69 262.002C1957.43 248.022 1957.16 233.872 1959.99 220.102C1963.86 204.492 1971.56 189.482 1983.51 178.512C1992.33 170.348 2003.48 165.158 2015.41 163.672ZM2043.88 186.094C2035.4 183.214 2026.18 183.433 2017.41 184.613C2004.81 185.993 1994.65 195.974 1990.57 207.604C1985.52 219.764 1986.17 233.124 1985.88 246.004C1986.22 258.174 1986.2 270.424 1988.41 282.443C1989.95 290.503 1992.57 298.683 1998.05 304.983C2003.28 311.263 2010.89 315.224 2018.8 316.954C2030.02 319.464 2042.34 318.204 2052.37 312.384C2059.14 308.494 2063.73 301.734 2066.64 294.624C2070.06 286.194 2070.46 276.974 2071.16 268.014C2071.68 257.364 2071.78 246.684 2071.18 236.034C2070.27 224.894 2069.05 213.323 2063.59 203.363C2058.88 195.893 2051.93 189.724 2043.88 186.094Z" fill="#FC6723"/><path d="M1550.8 173.792C1564.78 165.492 1582.23 159.812 1598.17 165.762C1607.52 169.062 1616.61 174.371 1622.27 182.741C1626.9 188.801 1627.97 196.632 1628.45 204.021C1629.86 230.321 1629.41 256.671 1629.74 282.991C1629.72 300.631 1630.08 318.262 1630.13 335.892C1621.18 336.152 1612.22 336.121 1603.27 335.911C1603.26 306.941 1602.69 277.971 1602.63 248.991C1602.24 232.871 1603.09 216.661 1601.14 200.621C1598.72 192.931 1591.28 186.502 1583.02 186.292C1576.92 186.042 1570.6 185.812 1564.78 187.962C1551.98 192.732 1540.45 200.362 1530.02 209.102C1529.72 251.372 1530 293.661 1529.88 335.941C1522.04 336.101 1514.2 336.142 1506.37 335.892C1506.34 311.922 1505.74 287.961 1505.62 263.991C1505.4 239.321 1505.59 214.642 1504.3 190.002C1504.03 183.052 1501.75 176.461 1500.27 169.731C1508.2 167.231 1516.23 164.311 1524.62 164.151C1527.63 171.885 1529.6 179.987 1530.48 188.241C1537.56 183.861 1543.53 177.912 1550.8 173.792Z" fill="#FC6723"/><path d="M1132.94 163.031C1144.31 161.731 1156.21 165.542 1164.53 173.462C1168.29 177.072 1172.29 180.742 1174.37 185.642C1176.39 190.422 1177.01 195.642 1177.48 200.771C1179.46 227.801 1178.1 254.942 1179.16 282.002C1179.16 299.992 1179.29 317.972 1179.3 335.962C1170.3 336.092 1161.31 336.151 1152.32 335.901C1152.35 308.932 1152.33 281.972 1152.33 255.002C1152.25 237.662 1152.66 220.291 1151.24 202.991C1150.87 200.234 1149.94 197.581 1148.52 195.194C1147.09 192.808 1145.19 190.738 1142.93 189.111C1137.68 185.652 1131.07 186.031 1125.08 186.371C1114.45 187.371 1105.56 194.032 1097.54 200.521C1093.74 203.731 1089.79 206.762 1086.09 210.082C1084.94 210.992 1085.3 212.642 1085.17 213.922C1085.18 254.592 1085.24 295.271 1085.14 335.951C1076.19 336.101 1067.23 336.141 1058.29 335.911C1058.3 304.271 1058.31 272.642 1058.28 241.002C1058.21 233.322 1058.44 225.622 1057.81 217.962C1057.33 210.152 1058.13 201.772 1054.47 194.592C1049.01 186.862 1038.19 185.242 1029.51 187.382C1015.98 190.632 1004.31 198.971 994.079 208.111C992.419 209.171 992.578 211.231 992.568 212.941C992.648 253.921 992.539 294.912 992.619 335.892C984.769 336.132 976.908 336.151 969.068 335.871C968.328 293.921 968.849 251.931 967.709 209.972C967.469 200.452 967.479 190.901 966.219 181.441C965.459 177.231 964.079 173.161 963.369 168.941C971.13 166.448 979.043 164.454 987.059 162.972C990.338 170.477 992.342 178.477 992.988 186.642C998.458 183.802 1002.73 179.252 1007.83 175.842C1019.47 167.512 1033.61 162.212 1048.06 162.832C1051.32 163.052 1054.48 164.092 1057.4 165.562C1062.37 168.051 1067.44 170.612 1071.49 174.521C1075.76 178.551 1078.44 183.871 1081.38 188.871C1087.9 185.961 1092.95 180.771 1098.8 176.812C1108.95 169.802 1120.52 164.241 1132.94 163.031Z" fill="#FC6723"/><path d="M1446.9 163.052C1447.99 186.672 1447.61 210.351 1447.82 233.991C1447.86 267.971 1447.83 301.952 1447.83 335.922C1438.91 336.122 1429.99 336.122 1421.07 335.932C1420.79 287.292 1421.03 238.642 1420.95 190.002C1421 182.492 1420.79 174.972 1421.15 167.462C1429.77 166.202 1438.35 164.712 1446.9 163.052Z" fill="#FC6723"/><path d="M2187.95 178.951C2199.62 167.391 2216.48 160.401 2233 163.361V165.432C2229.38 173.372 2227.12 181.841 2223.72 189.861C2223.24 191.341 2221.21 190.862 2220.07 191.142C2212.86 191.312 2205.22 191.132 2198.74 194.762C2192.36 198.494 2186.75 203.392 2182.19 209.201C2177.76 214.791 2178.62 222.331 2178.3 228.991C2177.88 238.661 2177.66 248.332 2177.77 258.002C2177.73 283.982 2177.78 309.952 2177.74 335.922C2168.8 336.122 2159.85 336.122 2150.91 335.922C2150.77 306.952 2150.9 277.972 2150.85 249.002C2150.7 229.322 2151 209.611 2149.98 189.951C2149.78 182.981 2147.55 176.311 2146.97 169.401C2154.99 167.141 2162.97 164.682 2171.11 162.842C2175.4 171.062 2176.25 180.422 2176.7 189.521C2180.84 186.431 2184.29 182.571 2187.95 178.951Z" fill="#FC6723"/><path fill-rule="evenodd" clip-rule="evenodd" d="M1255.46 89.0026C1259.59 89.1926 1260.21 94.0518 1260.58 97.2418C1261.58 112.235 1262.1 127.256 1262.14 142.282C1262.8 156.582 1262.71 170.902 1262.99 185.222C1271.07 179.012 1278.99 172.302 1288.56 168.492C1303.87 161.762 1322.24 161.682 1337.17 169.492C1353.22 177.522 1364.43 193.022 1370.07 209.762C1375.35 225.642 1376.62 242.652 1375.73 259.282C1374.3 278.712 1369.02 298.373 1357.5 314.333C1350.68 323.582 1341.72 331.693 1330.77 335.623C1313.23 342.043 1292.75 339.743 1277.01 329.713C1272.02 326.593 1267.82 322.422 1263.25 318.762C1261.41 324.512 1260.02 330.402 1258.23 336.182C1249.82 336.272 1241.33 336.862 1233 335.492C1236.36 322.042 1236.44 308.112 1236.81 294.333C1237.43 245.983 1236.76 197.622 1236.56 149.272C1235.49 130.492 1237.06 111.502 1233.56 92.9118C1240.75 91.1918 1248 88.9126 1255.46 89.0026ZM1318.01 188.715C1310.75 187.105 1303.19 187.295 1295.83 187.905C1282.41 189.785 1271.7 199.025 1262.92 208.695C1262.51 211.875 1262.76 215.085 1262.73 218.285C1262.75 243.965 1262.73 269.635 1262.73 295.315C1262.27 298.045 1264.72 299.625 1266.39 301.315C1279.4 313.785 1298.84 319.745 1316.46 315.245C1324.99 313.085 1332.28 307.215 1336.69 299.665C1342.96 288.975 1345.16 276.515 1346.51 264.355C1347.08 255.005 1348.24 245.615 1347.2 236.255C1346.7 225.375 1344.65 214.234 1339.04 204.755C1334.47 196.985 1326.95 190.635 1318.01 188.715Z" fill="#FC6723"/></g><defs><clipPath id="clip0_2825_24321"><rect width="2233" height="448" fill="white"/></clipPath></defs></svg></span>
          </div>
          <div class="hero-capture">
            <button class="btn btn-hero-ghost btn-capture" data-demo-cta>Get a demo <span class="ic" data-icon="arrow-up-right"></span></button>
            <a class="btn btn-hero-solid btn-capture" href="#product"><span class="ic" data-icon="play"></span> See how it works</a>
          </div>
        </div>
      </div>

      <div class="hero-right">
        <div class="wb" id="wbFlow" role="img" aria-label="Animated demo of the real Mesh accruals workbook: a new purchase-order row is created at the bottom and pushes the sheet up, its health check rings and the Mesh accrual are computed inline, then the row locks in.">
          <div class="wb-sheet">
            <div class="sh-lrow" aria-hidden="true"><span class="c-rn"></span><span class="c-vendor">A</span><span class="c-rembal">B</span><span class="c-health">C</span><span class="c-amt">D</span><span class="c-expl">E</span></div>
            <div class="sh-nrow"><span class="sh-rn c-rn"></span><span class="sh-th c-vendor"><i class="ct src"><svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></i>Vendor</span><span class="sh-th c-rembal"><i class="ct src"><svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></i>Remaining PO</span><span class="sh-th c-health c">Health Check</span><span class="sh-th c-amt"><i class="ct mesh"><svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2 7 7 2-7 2-2 7-2-7-7-2 7-2z"/></svg></i>Mesh Accrual Amount</span><span class="sh-th c-expl"><i class="ct mesh"><svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2 7 7 2-7 2-2 7-2-7-7-2 7-2z"/></svg></i>Mesh Explanation</span></div>
            <div class="wb-rows" id="wbRows">
              <div class="wb-row" data-po="7646-1"><div class="wb-cells"><span class="wb-c c-rn wb-rn">1</span><span class="wb-c c-vendor wb-vendor"><span class="tw">Atlas Partners Group</span></span><span class="wb-c c-rembal wb-num">159,600.00</span><span class="wb-c c-health wb-health"><span class="health-ring yellow"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="36.65 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">5/6</span></span></span><span class="wb-c c-amt wb-amount"><span class="amt-main"><b class="amt-num">$101,600.00</b></span><i class="amt-form"></i></span><span class="wb-c c-expl wb-expl"><span class="expl-line">Estimated using $12,700.00 last month invoice with 8x multiplier for missing months</span></span></div></div>
              <div class="wb-row" data-po="7660-1"><div class="wb-cells"><span class="wb-c c-rn wb-rn">2</span><span class="wb-c c-vendor wb-vendor"><span class="tw">Atlas Distribution Corp.</span></span><span class="wb-c c-rembal wb-num">132,152.00</span><span class="wb-c c-health wb-health"><span class="health-ring yellow"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="36.65 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">5/6</span></span></span><span class="wb-c c-amt wb-amount"><span class="amt-main"><b class="amt-num">$132,152.00</b></span><i class="amt-form"></i></span><span class="wb-c c-expl wb-expl"><span class="expl-line">Straight-line calculation</span></span></div></div>
              <div class="wb-row" data-po="6679-1"><div class="wb-cells"><span class="wb-c c-rn wb-rn">3</span><span class="wb-c c-vendor wb-vendor"><span class="tw">Nexus Industrial USA</span></span><span class="wb-c c-rembal wb-num">183,440.00</span><span class="wb-c c-health wb-health"><span class="health-ring yellow"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="36.65 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">5/6</span></span></span><span class="wb-c c-amt wb-amount"><span class="amt-main"><b class="amt-num">$183,440.00</b></span><i class="amt-form"></i></span><span class="wb-c c-expl wb-expl"><span class="expl-line">Estimated using $34,764.00 last month invoice with 8x multiplier capped at remaining PO balance</span></span></div></div>
              <div class="wb-row" data-po="2662-1"><div class="wb-cells"><span class="wb-c c-rn wb-rn">4</span><span class="wb-c c-vendor wb-vendor"><span class="tw">Vertex Industrial Intl.</span></span><span class="wb-c c-rembal wb-num">219,208.00</span><span class="wb-c c-health wb-health"><span class="health-ring yellow"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="36.65 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">5/6</span></span></span><span class="wb-c c-amt wb-amount"><span class="amt-main"><b class="amt-num">$219,208.00</b></span><i class="amt-form"></i></span><span class="wb-c c-expl wb-expl"><span class="expl-line">Estimated using $27,296.00 last month invoice with 9x multiplier capped at remaining PO balance</span></span></div></div>
              <div class="wb-row" data-po="6577-1"><div class="wb-cells"><span class="wb-c c-rn wb-rn">5</span><span class="wb-c c-vendor wb-vendor"><span class="tw">Nexus Partners Worldwide</span></span><span class="wb-c c-rembal wb-num">456,000.00</span><span class="wb-c c-health wb-health"><span class="health-ring green"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="43.98 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">6/6</span></span></span><span class="wb-c c-amt wb-amount"><span class="amt-main"><b class="amt-num">$456,000.00</b></span><i class="amt-form"></i></span><span class="wb-c c-expl wb-expl"><span class="expl-line">Straight-line calculation</span></span></div></div>
              <div class="wb-row" data-po="2333-1"><div class="wb-cells"><span class="wb-c c-rn wb-rn">6</span><span class="wb-c c-vendor wb-vendor"><span class="tw">Vertex Manufacturing LLC</span></span><span class="wb-c c-rembal wb-num">100,000.00</span><span class="wb-c c-health wb-health"><span class="health-ring yellow"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="36.65 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">5/6</span></span></span><span class="wb-c c-amt wb-amount"><span class="amt-main"><b class="amt-num">$9,000.00</b></span><i class="amt-form"></i></span><span class="wb-c c-expl wb-expl"><span class="expl-line">Booked via project cost accounting module</span></span></div></div>
              <div class="wb-row" data-po="2380-1"><div class="wb-cells"><span class="wb-c c-rn wb-rn">7</span><span class="wb-c c-vendor wb-vendor"><span class="tw">Vertex Industries USA</span></span><span class="wb-c c-rembal wb-num">60,500.00</span><span class="wb-c c-health wb-health"><span class="health-ring yellow"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="36.65 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">5/6</span></span></span><span class="wb-c c-amt wb-amount"><span class="amt-main"><b class="amt-num">$60,500.00</b></span><i class="amt-form"></i></span><span class="wb-c c-expl wb-expl"><span class="expl-line">Estimated using $17,500.00 last month invoice with 8x multiplier capped at remaining PO balance</span></span></div></div>
              <div class="wb-row" data-po="8724-1"><div class="wb-cells"><span class="wb-c c-rn wb-rn">8</span><span class="wb-c c-vendor wb-vendor"><span class="tw">Atlas Components LLC</span></span><span class="wb-c c-rembal wb-num">165,600.00</span><span class="wb-c c-health wb-health"><span class="health-ring green"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="43.98 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">6/6</span></span></span><span class="wb-c c-amt wb-amount"><span class="amt-main"><b class="amt-num">$165,600.00</b></span><i class="amt-form"></i></span><span class="wb-c c-expl wb-expl"><span class="expl-line">Straight-line calculation</span></span></div></div>
              <div class="wb-row" data-po="4060-1"><div class="wb-cells"><span class="wb-c c-rn wb-rn">9</span><span class="wb-c c-vendor wb-vendor"><span class="tw">Nexus Systems Group</span></span><span class="wb-c c-rembal wb-num">92,275.00</span><span class="wb-c c-health wb-health"><span class="health-ring yellow"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="29.32 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">4/6</span></span></span><span class="wb-c c-amt wb-amount"><span class="amt-main"><span class="old-v">$0.00</span><b class="amt-num">$26,600.00</b></span><i class="amt-form"></i></span><span class="wb-c c-expl wb-expl"><span class="expl-line">Estimated using $3,800.00 last month invoice with 7x multiplier for missing months</span></span></div></div>
              <div class="wb-row" data-po="6097-1"><div class="wb-cells"><span class="wb-c c-rn wb-rn">10</span><span class="wb-c c-vendor wb-vendor"><span class="tw">Vertex Components LLC</span></span><span class="wb-c c-rembal wb-num">165,454.00</span><span class="wb-c c-health wb-health"><span class="health-ring yellow"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="36.65 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">5/6</span></span></span><span class="wb-c c-amt wb-amount"><span class="amt-main"><b class="amt-num">$165,454.00</b></span><i class="amt-form"></i></span><span class="wb-c c-expl wb-expl"><span class="expl-line">Estimated using $20,765.00 last month invoice with 8x multiplier capped at remaining PO balance</span></span></div></div>
              <div class="wb-row" data-po="5240-1"><div class="wb-cells"><span class="wb-c c-rn wb-rn">11</span><span class="wb-c c-vendor wb-vendor"><span class="tw">Atlas Logistics Inc.</span></span><span class="wb-c c-rembal wb-num">235,000.00</span><span class="wb-c c-health wb-health"><span class="health-ring green"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="43.98 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">6/6</span></span></span><span class="wb-c c-amt wb-amount"><span class="amt-main"><b class="amt-num">$235,000.00</b></span><i class="amt-form"></i></span><span class="wb-c c-expl wb-expl"><span class="expl-line">Straight-line calculation</span></span></div></div>
              <div class="wb-row" data-po="8011-1"><div class="wb-cells"><span class="wb-c c-rn wb-rn">12</span><span class="wb-c c-vendor wb-vendor"><span class="tw">Nexus Global Trade</span></span><span class="wb-c c-rembal wb-num">172,000.00</span><span class="wb-c c-health wb-health"><span class="health-ring green"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="43.98 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">6/6</span></span></span><span class="wb-c c-amt wb-amount"><span class="amt-main"><b class="amt-num">$172,000.00</b></span><i class="amt-form"></i></span><span class="wb-c c-expl wb-expl"><span class="expl-line">Straight-line calculation</span></span></div></div>
              <div class="wb-row" data-po="6459-1"><div class="wb-cells"><span class="wb-c c-rn wb-rn">13</span><span class="wb-c c-vendor wb-vendor"><span class="tw">Vertex Systems Co.</span></span><span class="wb-c c-rembal wb-num">137,500.00</span><span class="wb-c c-health wb-health"><span class="health-ring yellow"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="36.65 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">5/6</span></span></span><span class="wb-c c-amt wb-amount"><span class="amt-main"><span class="old-v">$12,500.00</span><b class="amt-num">$137,500.00</b></span><i class="amt-form"></i></span><span class="wb-c c-expl wb-expl"><span class="expl-line">Estimated using $4,166.67 last month invoice with 3x multiplier for missing months</span></span></div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
`;

const FEATURE_HTML = `
  <section class="tg5" id="product">
    <div class="tg5-sticky">
      <div class="wrap">
        <div class="tg5-head">
          <!-- Words wrapped so the mobile intro can reveal them one-by-one on
               scroll (see .tg5-word + mobileScroll). Grouped into .tg5-line
               spans for a poster line-break layout on mobile (block); on
               desktop the lines flow inline (nowrap) so it reads as one line. -->
          <h2 class="tg5-h2"><span class="tg5-line"><span class="tg5-word">The</span></span> <span class="tg5-line"><span class="tg5-word hl-1">trust</span> <span class="tg5-word">and</span></span> <span class="tg5-line"><span class="tg5-word hl-2">governance</span></span> <span class="tg5-line"><span class="tg5-word">layer</span> <span class="tg5-word">for</span></span> <span class="tg5-line"><span class="tg5-word">your</span> <span class="tg5-word">close</span></span></h2>
        </div>

        <div class="tg5-tabs t4" role="tablist">
          <button class="tg5-tab active" data-step="0" role="tab">
            <span class="tg5-tab-t">Aggregate</span>
            <span class="tg5-tab-s">every signal source</span>
          </button>
          <button class="tg5-tab" data-step="1" role="tab">
            <span class="tg5-tab-t">Standardize</span>
            <span class="tg5-tab-s">map &amp; clean every column</span>
          </button>
          <button class="tg5-tab" data-step="2" role="tab">
            <span class="tg5-tab-t">Estimate</span>
            <span class="tg5-tab-s">with auditable logic</span>
          </button>
          <button class="tg5-tab" data-step="3" role="tab">
            <span class="tg5-tab-t">Audit</span>
            <span class="tg5-tab-s">every change traced</span>
          </button>
        </div>

        <!-- feature layer: on phones (≤880px) this wraps the retyping step
             label + the card stage into the layer that parallaxes up over the
             title intro. display:contents at desktop widths, so desktop layout
             is unchanged. Label text is sourced from the tabs above (one
             source of truth) by js/site-features.js typeMStep. -->
        <div class="tg5-feat">
        <div class="tg5-mstep" aria-hidden="true"><span class="tg5-mstep-t"></span><span class="tg5-mstep-s"></span></div>

        <div class="tg5-stage" id="tg5Stage">
          <!-- STEP 1 · Aggregate — integration cards connect in (DOSS grid) -->
          <div class="tg5-panel show in" data-step="0">
            <!-- scripted recording of the real Integrations page: list → click
                 NetSuite → its Data preferences → click "View query" → the
                 SuiteQL query drawer. Markup/classes mirror css/integrations.css
                 + js/04-integrations.js (the SuiteQL is verbatim). -->
            <div class="dp-panel ia" id="iaApp">
              <span class="ia-cursor" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="#fff" stroke="rgba(8,16,40,.55)" stroke-width="1.2" stroke-linejoin="round"><path d="M5 3l15 8.5-6.4 1.4L10 19.5z"/></svg></span>
              <div class="ia-stage">
                <div class="ia-view ia-list">
                  <div class="ia-bar"><span class="ia-bar-title">Integrations</span><span class="ia-bar-sub">Connect Mesh to your ledger, mail, chat &amp; warehouse</span></div>
                  <div class="ia-scroll">
                    <div class="ia-cat">ERP</div>
                    <div class="ia-card" id="iaNetsuite"><span class="ia-logo ns">N</span><span class="ia-cbody"><b>NetSuite</b></span><span class="ia-btn reauth">Reauthenticate</span></div>
                    <div class="ia-cat">Communication</div>
                    <div class="ia-card"><span class="ia-logo"><img src=\"${A('brands/msg_slack.png')}\" alt=""></span><span class="ia-cbody"><b>Slack</b></span><span class="ia-btn reauth">Reauthenticate</span></div>
                    <div class="ia-card"><span class="ia-logo"><img src=\"${A('brands/email_outlook.png')}\" alt=""></span><span class="ia-cbody"><b>Outlook</b></span><span class="ia-btn connect">Connect</span></div>
                    <div class="ia-card"><span class="ia-logo"><img src=\"${A('brands/email_gmail.png')}\" alt=""></span><span class="ia-cbody"><b>Gmail</b></span><span class="ia-btn connect">Connect</span></div>
                    <div class="ia-card"><span class="ia-logo"><img src=\"${A('brands/msg_teams.png')}\" alt=""></span><span class="ia-cbody"><b>Microsoft Teams</b></span><span class="ia-btn connect">Connect</span></div>
                    <div class="ia-cat">Procurement</div>
                    <div class="ia-card"><span class="ia-logo"><img src=\"${A('brands/proc_coupa.png')}\" alt=""></span><span class="ia-cbody"><b>Coupa</b></span><span class="ia-btn reauth">Reauthenticate</span></div>
                    <div class="ia-card"><span class="ia-logo"><img src=\"${A('brands/proc_zip.png')}\" alt=""></span><span class="ia-cbody"><b>Zip</b></span><span class="ia-btn connect">Connect</span></div>
                    <div class="ia-cat">Data Warehouse</div>
                    <div class="ia-card"><span class="ia-logo"><img src=\"${A('brands/db_snowflake.png')}\" alt=""></span><span class="ia-cbody"><b>Snowflake</b></span><span class="ia-btn reauth">Reauthenticate</span></div>
                    <div class="ia-card"><span class="ia-logo"><img src=\"${A('brands/db_bigquery.png')}\" alt=""></span><span class="ia-cbody"><b>BigQuery</b></span><span class="ia-btn connect">Connect</span></div>
                  </div>
                </div>
                <div class="ia-view ia-detail">
                  <div class="ia-bar"><span class="ia-back">‹ Integrations</span><span class="ia-bar-title">NetSuite</span><span class="ia-badge ok">Connected</span></div>
                  <div class="ia-scroll">
                    <div class="ia-dp-head"><span class="ia-logo ns sm">N</span>Data preferences</div>
                    <div class="ia-dp-desc">Which sheets NetSuite feeds — by hand (Manual) or automatically (Automated).</div>
                    <div class="ia-dp-list">
                      <div class="ia-dp-row" id="iaPoRow"><div class="ia-dp-info"><b>Purchase Orders</b></div><div class="ia-seg"><span class="opt">Manual</span><span class="opt on">⚡ Automated</span></div></div>
                      <div class="ia-dp-row"><div class="ia-dp-info"><b>Invoices</b></div><div class="ia-seg"><span class="opt">Manual</span><span class="opt on">⚡ Automated</span></div></div>
                      <div class="ia-dp-row"><div class="ia-dp-info"><b>Internal Outreach</b></div><div class="ia-seg"><span class="opt on">Manual</span><span class="opt">⚡ Automated</span></div></div>
                      <div class="ia-dp-row"><div class="ia-dp-info"><b>Vendor Outreach</b></div><div class="ia-seg"><span class="opt on">Manual</span><span class="opt">⚡ Automated</span></div></div>
                      <div class="ia-dp-row"><div class="ia-dp-info"><b>Exclusion Criteria</b></div><div class="ia-seg"><span class="opt on">Manual</span><span class="opt">⚡ Automated</span></div></div>
                      <div class="ia-dp-row"><div class="ia-dp-info"><b>Vendors</b></div><div class="ia-seg"><span class="opt">Manual</span><span class="opt on">⚡ Automated</span></div></div>
                      <div class="ia-dp-row"><div class="ia-dp-info"><b>GL Accounts</b></div><div class="ia-seg"><span class="opt">Manual</span><span class="opt on">⚡ Automated</span></div></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="ia-drawer">
                <div class="ia-drawer-head"><div class="ia-drawer-titles"><b>Purchase Orders query</b><i>NetSuite · live + version history</i></div><span class="ia-x">✕</span></div>
                <div class="ia-drawer-scroll">
                  <div class="ia-q-head"><span class="ia-logo ns xs">N</span><b>NetSuite</b><span class="ia-lang">SuiteQL</span><span class="ia-ver">⟲ v3 · Jan 31, 2026</span></div>
                  <div class="ia-q-ai"><span class="ia-ai-badge">✦ Mesh AI</span><span class="ia-ai-tx">Pulls NetSuite PO lines (Pending Bill or Soft Closed) with vendor, department and dates.</span></div>
                  <div class="ia-q-prov"><span class="ia-live-dot"></span><span>Ran for <b>Jan 2026 · PO Accruals</b> <span class="ia-live">LIVE</span> · Nandini R. · Added soft-closed POs alongside Pending Bill</span></div>
                  <pre class="ia-q-code"><span class="ia-l"><span class="kw">SELECT</span></span><span class="ia-l">  t.tranid || <span class="st">'-'</span> || tl.linesequencenumber  <span class="kw">AS</span> po_id,</span><span class="ia-l">  t.tranid                            <span class="kw">AS</span> po_number,</span><span class="ia-l">  <span class="fn">TO_CHAR</span>(t.createddate, <span class="st">'YYYY-MM-DD'</span>) <span class="kw">AS</span> created_date,</span><span class="ia-l">  <span class="fn">BUILTIN.DF</span>(t.status)                <span class="kw">AS</span> status,</span><span class="ia-l">  <span class="fn">ABS</span>(t.total)                        <span class="kw">AS</span> total_amount,</span><span class="ia-l">  <span class="fn">BUILTIN.DF</span>(t.entity)                <span class="kw">AS</span> vendor_name,</span><span class="ia-l">  d.name                              <span class="kw">AS</span> department_name</span><span class="ia-l"><span class="cm">  -- … 24 more attribute columns</span></span><span class="ia-l"><span class="kw">FROM</span> transaction t</span><span class="ia-l"><span class="kw">JOIN</span> transactionline tl <span class="kw">ON</span> tl.transaction = t.id</span><span class="ia-l"><span class="kw">LEFT JOIN</span> department d <span class="kw">ON</span> d.id = tl.department</span><span class="ia-l"><span class="kw">WHERE</span> t.type = <span class="st">'PurchOrd'</span></span><span class="ia-l">  <span class="kw">AND</span> <span class="fn">BUILTIN.DF</span>(t.status) <span class="kw">IN</span> (<span class="st">'… Pending Bill'</span>, <span class="st">'… Soft Closed'</span>)</span><span class="ia-l">  <span class="var">{watermark_filter}</span></span><span class="ia-l">  <span class="kw">AND</span> tl.mainline = <span class="st">'F'</span> <span class="kw">AND</span> tl.taxline = <span class="st">'F'</span></span><span class="ia-l"><span class="kw">ORDER BY</span> t.createddate <span class="kw">ASC</span></span></pre>
                  <div class="ia-q-filters"><div class="ia-q-filters-h">Then filtered in the service layer</div><ul><li>Drop line items with no start or end date</li><li>Drop line items whose status is not Open (status ≠ 0)</li></ul></div>
                </div>
              </div>
            </div>
          </div>

          <!-- STEP 2 · Standardize — the column-mapping modal: each source column is
               pulled from the connected source, matched to a Mesh field, and its
               meaning is decoded (scramble type-on); the last 2 columns are inferred
               by Mesh AI. Mirrors the app's "Match columns to Mesh fields" modal
               (js/08-modals-utils.js + css/modals.css). Static markup = the settled,
               fully-mapped state, so it reads with no JS. -->
          <div class="tg5-panel" data-step="1">
            <div class="dp-panel mp" id="mpApp">
              <div class="mp-hd">
                <div class="mp-htext">
                  <div class="mp-title">Match columns to Mesh fields</div>
                  <div class="mp-sub">We've matched <b id="mpDone">10</b> of 10 columns automatically. Review or edit before saving.</div>
                </div>
                <span class="mp-x">✕</span>
              </div>
              <div class="mp-stats"><span><b>10</b> columns in file</span><span><b id="mpMapped">10</b> auto-mapped</span><span><b id="mpUnmapped">0</b> unmapped</span><span><b>528</b> rows detected</span></div>
              <div class="mp-tblwrap" id="mpScroll">
                <div class="mp-thead"><span>Column Header</span><span>Mesh_Name</span></div>
                <div class="mp-row" data-mesh="PO + Line"><span class="mp-actual">po_line</span><span class="mp-sel"><span class="mp-selv">PO + Line</span><span class="mp-chev">⌄</span></span></div>
                <div class="mp-row" data-mesh="Supplier #"><span class="mp-actual">supplier_id</span><span class="mp-sel"><span class="mp-selv">Supplier #</span><span class="mp-chev">⌄</span></span></div>
                <div class="mp-row" data-mesh="Supplier Name"><span class="mp-actual">supplier_name</span><span class="mp-sel"><span class="mp-selv">Supplier Name</span><span class="mp-chev">⌄</span></span></div>
                <div class="mp-row" data-mesh="Item"><span class="mp-actual">item_descr</span><span class="mp-sel"><span class="mp-selv">Item</span><span class="mp-chev">⌄</span></span></div>
                <div class="mp-row" data-mesh="Department"><span class="mp-actual">dept</span><span class="mp-sel"><span class="mp-selv">Department</span><span class="mp-chev">⌄</span></span></div>
                <div class="mp-row" data-mesh="Name"><span class="mp-actual">contact_name</span><span class="mp-sel"><span class="mp-selv">Name</span><span class="mp-chev">⌄</span></span></div>
                <div class="mp-row" data-mesh="Email"><span class="mp-actual">contact_email</span><span class="mp-sel"><span class="mp-selv">Email</span><span class="mp-chev">⌄</span></span></div>
                <div class="mp-row" data-mesh="Role"><span class="mp-actual">contact_role</span><span class="mp-sel"><span class="mp-selv">Role</span><span class="mp-chev">⌄</span></span></div>
                <div class="mp-row" data-skip="1" data-mesh="Service Provided"><span class="mp-actual">svc_provided</span><span class="mp-sel"><span class="mp-selv">Service Provided</span><span class="mp-chev">⌄</span></span></div>
                <div class="mp-row" data-skip="1" data-mesh="Cost Estimate"><span class="mp-actual">cost_estimate_usd</span><span class="mp-sel"><span class="mp-selv">Cost Estimate</span><span class="mp-chev">⌄</span></span></div>
              </div>
              <div class="mp-ft"><span class="mp-foot-note">✦ 8 auto-mapped · 2 inferred by Mesh AI</span><span class="mp-btn">Back</span><span class="mp-btn primary">Continue</span></div>
            </div>
          </div>

          <!-- STEP 4 · Audit — the per-PO drawer's auditable trail: open the drawer,
               the Activity timeline (Audit History) scrolls through every change, then
               it switches to the Emails thread and the reviewer Comments. Mirrors the
               app's drawer (js/10-drawer-details.js, js/08-modals-utils.js audit
               history, css/drawer.css .hist-*). -->
          <div class="tg5-panel" data-step="3">
            <div class="dp-panel ow" id="owApp">
              <span class="ow-cursor" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="#fff" stroke="rgba(8,16,40,.55)" stroke-width="1.2" stroke-linejoin="round"><path d="M5 3l15 8.5-6.4 1.4L10 19.5z"/></svg></span>
              <div class="ow-main">
                <div class="ow-bar"><span class="ow-ic">✦</span><span class="ow-titles"><span class="ow-bar-title">Expense Accruals</span><span class="ow-subtitle">May 2026</span></span><span class="ow-bar-tag">Workbook</span></div>
                <div class="ow-sheet">
                  <div class="ow-cols"><span>PO+Line</span><span class="r">Mesh Accrual</span><span class="r">Status</span><span class="cmt">·</span></div>
                  <div class="ow-row"><span>7646-1</span><span class="r">$101,600.00</span><span class="ow-st rev">Ready</span><span class="ow-cmt"></span></div>
                  <div class="ow-row"><span>6679-1</span><span class="r">$183,440.00</span><span class="ow-st rev">Ready</span><span class="ow-cmt"></span></div>
                  <div class="ow-row comments" id="owRow"><span>2333-1</span><span class="r">$9,000.00</span><span class="ow-st cmt">Commented</span><span class="ow-cmt"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg><i class="ow-badge">1</i></span></div>
                  <div class="ow-row"><span>2380-1</span><span class="r">$60,500.00</span><span class="ow-st cmt">Commented</span><span class="ow-cmt"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg><i class="ow-badge">2</i></span></div>
                  <div class="ow-row"><span>6577-1</span><span class="r">$456,000.00</span><span class="ow-st rev">Ready</span><span class="ow-cmt"></span></div>
                  <div class="ow-row"><span>2294-1</span><span class="r">$41,377.00</span><span class="ow-st rev">Ready</span><span class="ow-cmt"></span></div>
                  <div class="ow-row"><span>8724-1</span><span class="r">$165,600.00</span><span class="ow-st rev">Ready</span><span class="ow-cmt"></span></div>
                  <div class="ow-row"><span>6097-1</span><span class="r">$165,454.00</span><span class="ow-st rev">Ready</span><span class="ow-cmt"></span></div>
                  <div class="ow-row"><span>5240-1</span><span class="r">$235,000.00</span><span class="ow-st rev">Ready</span><span class="ow-cmt"></span></div>
                  <div class="ow-row"><span>4060-1</span><span class="r">$26,600.00</span><span class="ow-st cmt">Commented</span><span class="ow-cmt"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg><i class="ow-badge">1</i></span></div>
                </div>
              </div>
              <div class="ow-drawer">
                <div class="ow-d-head"><div class="ow-d-titles"><b>2333-1</b><i>Vertex Manufacturing LLC · Customer Success</i></div><span class="ow-x">✕</span></div>
                <div class="ow-tabs"><span class="ow-tab">Details</span><span class="ow-tab">Invoices <i>5</i></span><span class="ow-tab" data-pane="comments">Comments <i>1</i></span><span class="ow-tab" data-pane="emails">Emails</span><span class="ow-tab on" data-pane="activity">Activity</span></div>
                <div class="ow-panes">
                  <div class="ow-pane ow-activity show" id="owActivity">
                    <div class="ow-act-title">Audit History</div>
                    <div class="ow-act-sub">PO: 2333-1</div>
                    <div class="hist-list">
                      <div class="hist-row">
                        <div class="hist-ic-col"><div class="hist-ic"><span class="ic" data-icon="check" data-stroke="3"></span></div><div class="hist-line"></div></div>
                        <div class="hist-body">
                          <div class="hist-title">Data imported · Apr 23, 2026 · 10:51 AM</div>
                          <div class="hist-meta">Created by: Mesh</div>
                          <div class="hist-detail">Row was created in the system</div>
                          <div class="hist-source">Source: File upload • Acme Accruals — Purchase Orders (5).csv</div>
                        </div>
                      </div>
                      <div class="hist-row">
                        <div class="hist-ic-col"><div class="hist-ic"><span class="ic" data-icon="check" data-stroke="3"></span></div><div class="hist-line"></div></div>
                        <div class="hist-body">
                          <div class="hist-title">Computed result · Apr 23, 2026 · 10:51 AM</div>
                          <div class="hist-meta">Created by: Mesh</div>
                          <div class="hist-changes on"><div class="hc-row"><span class="hc-field">Mesh Accrual</span><span class="hc-from">—</span><span class="hc-arr">→</span><span class="hc-to">$9,000.00</span></div><div class="hc-row"><span class="hc-field">Explanation</span><span class="hc-from">—</span><span class="hc-arr">→</span><span class="hc-to">Booked via project cost accounting module</span></div></div>
                        </div>
                      </div>
                      <div class="hist-row">
                        <div class="hist-ic-col"><div class="hist-ic"><span class="ic" data-icon="check" data-stroke="3"></span></div><div class="hist-line"></div></div>
                        <div class="hist-body">
                          <div class="hist-title">Updated · Apr 23, 2026 · 10:52 AM</div>
                          <div class="hist-meta">Updated by: Erin C. · Controller</div>
                          <div class="hist-changes on"><div class="hc-row"><span class="hc-field">Status</span><span class="hc-from">Needs Review</span><span class="hc-arr">→</span><span class="hc-to">Reviewed – Comments</span></div></div>
                        </div>
                      </div>
                      <div class="hist-row">
                        <div class="hist-ic-col"><div class="hist-ic current"><span class="ic" data-icon="check" data-stroke="2.5"></span></div></div>
                        <div class="hist-body">
                          <div class="hist-title">Updated (Current) · Apr 23, 2026 · 10:52 AM</div>
                          <div class="hist-meta">Updated by: Mesh Admin</div>
                          <div class="hist-empty">No changes detected</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="ow-pane ow-comments">
                    <div class="ow-msg" id="owMsg">
                      <div class="ow-msg-h"><span class="ow-av">SL</span><b>Sarah L.</b><span class="ow-role">Controller</span><span class="ow-time">Mar 29 · 10:45 AM</span></div>
                      <div class="ow-msg-body">Accrual jumped from $15k to $72k. Confirm with the DRI: real services, or a billing error?</div>
                      <div class="ow-msg-act"><span class="ow-resolve">Resolve</span></div>
                    </div>
                    <div class="ow-reply"><span class="ow-reply-as">Reply as Erin C. (Controller)</span><div class="ow-reply-box">Type your comment…</div></div>
                  </div>
                  <div class="ow-pane ow-emails">
                    <div class="ow-email" style="--i:0"><div class="ow-em-h"><span class="ow-av me">EC</span><b>Erin C. → Vertex Manufacturing</b><span class="ow-time">09:14</span></div><div class="ow-em-sub">Confirm May services — PO 2333-1</div><div class="ow-em-body">Hi team — our May accrual on PO 2333-1 moved to $9,000.00. Can you confirm services delivered vs. a billing adjustment?</div></div>
                    <div class="ow-email" style="--i:1"><div class="ow-em-h"><span class="ow-av vm">VM</span><b>Vertex Manufacturing LLC</b><span class="ow-time">11:02</span><span class="ow-em-badge">Replied</span></div><div class="ow-em-sub">Re: Confirm May services — PO 2333-1</div><div class="ow-em-body">Confirmed — May services delivered per the project plan; the remaining invoice follows next cycle.</div></div>
                    <div class="ow-em-foot"><span class="ow-check"><span class="ic" data-icon="check" data-stroke="3"></span></span>Reply auto-filed to the PO record</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- STEP 3 · Estimate — the real workbook running the agent: the bottom
               row estimates inline — its Mesh accrual number fills while the
               policy rules are checked (rule-checking status), then it locks to
               Ready for Review. Markup mirrors css/base.css (.sheet, health rings,
               status-ctrl-sel). -->
          <div class="tg5-panel" data-step="2">
            <div class="dp-panel es" id="esApp">
              <div class="es-bar"><span class="es-ic">✦</span><span class="es-titles"><span class="es-title">Expense Accruals</span><span class="es-subtitle">May 2026</span></span><span class="es-agent" id="esAgent">Run Agent</span></div>
              <div class="es-sheet">
                <div class="es-cols"><span>PO+Line</span><span>Health</span><span class="r">Accrual Amount</span><span>Preparer</span><span>Reviewer</span><span>Status</span><span class="r">Line Total</span></div>
                <div class="es-row"><span class="es-po">6577-1</span><span class="es-health"><span class="health-ring green"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="43.98 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">6/6</span></span></span><span class="es-amt r">$456,000.00</span><span class="es-prep"><span class="es-ml">✦ Mesh</span></span><span class="es-rev">Erin C.</span><span class="es-status"><span class="status-ctrl-sel s-needs-review">Ready for Review</span></span><span class="es-lt r">456,000.00</span></div>
                <div class="es-row"><span class="es-po">7646-1</span><span class="es-health"><span class="health-ring yellow"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="36.65 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">5/6</span></span></span><span class="es-amt r">$101,600.00</span><span class="es-prep">Sarah K.</span><span class="es-rev">Sarah L.</span><span class="es-status"><span class="status-ctrl-sel s-needs-review">Ready for Review</span></span><span class="es-lt r">174,800.00</span></div>
                <div class="es-row"><span class="es-po">2294-1</span><span class="es-health"><span class="health-ring yellow"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="36.65 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">5/6</span></span></span><span class="es-amt r">$41,377.00</span><span class="es-prep"><span class="es-ml">✦ Mesh</span></span><span class="es-rev">Erin C.</span><span class="es-status"><span class="status-ctrl-sel s-needs-review">Ready for Review</span></span><span class="es-lt r">95,916.00</span></div>
                <div class="es-row"><span class="es-po">8724-1</span><span class="es-health"><span class="health-ring green"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="43.98 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">6/6</span></span></span><span class="es-amt r">$165,600.00</span><span class="es-prep"><span class="es-ml">✦ Mesh</span></span><span class="es-rev">Erin C.</span><span class="es-status"><span class="status-ctrl-sel s-needs-review">Ready for Review</span></span><span class="es-lt r">165,600.00</span></div>
                <div class="es-row"><span class="es-po">6097-1</span><span class="es-health"><span class="health-ring yellow"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="36.65 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">5/6</span></span></span><span class="es-amt r">$165,454.00</span><span class="es-prep">Sarah K.</span><span class="es-rev">Sarah L.</span><span class="es-status"><span class="status-ctrl-sel s-needs-review">Ready for Review</span></span><span class="es-lt r">165,454.00</span></div>
                <div class="es-row"><span class="es-po">5240-1</span><span class="es-health"><span class="health-ring green"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="43.98 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">6/6</span></span></span><span class="es-amt r">$235,000.00</span><span class="es-prep"><span class="es-ml">✦ Mesh</span></span><span class="es-rev">Erin C.</span><span class="es-status"><span class="status-ctrl-sel s-needs-review">Ready for Review</span></span><span class="es-lt r">235,000.00</span></div>
                <div class="es-row"><span class="es-po">6320-1</span><span class="es-health"><span class="health-ring yellow"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="36.65 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">5/6</span></span></span><span class="es-amt r">$55,000.00</span><span class="es-prep"><span class="es-ml">✦ Mesh</span></span><span class="es-rev">Erin C.</span><span class="es-status"><span class="status-ctrl-sel s-needs-review">Ready for Review</span></span><span class="es-lt r">55,000.00</span></div>
                <div class="es-row"><span class="es-po">4060-1</span><span class="es-health"><span class="health-ring green"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="43.98 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">6/6</span></span></span><span class="es-amt r">$26,600.00</span><span class="es-prep"><span class="es-ml">✦ Mesh</span></span><span class="es-rev">Erin C.</span><span class="es-status"><span class="status-ctrl-sel s-needs-review">Ready for Review</span></span><span class="es-lt r">26,600.00</span></div>
                <div class="es-row"><span class="es-po">6679-1</span><span class="es-health"><span class="health-ring yellow"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="36.65 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">5/6</span></span></span><span class="es-amt r">$183,440.00</span><span class="es-prep">Sarah K.</span><span class="es-rev">Sarah L.</span><span class="es-status"><span class="status-ctrl-sel s-needs-review">Ready for Review</span></span><span class="es-lt r">183,440.00</span></div>
                <div class="es-row"><span class="es-po">2380-1</span><span class="es-health"><span class="health-ring green"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="43.98 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">6/6</span></span></span><span class="es-amt r">$60,500.00</span><span class="es-prep"><span class="es-ml">✦ Mesh</span></span><span class="es-rev">Erin C.</span><span class="es-status"><span class="status-ctrl-sel s-needs-review">Ready for Review</span></span><span class="es-lt r">60,500.00</span></div>
                <div class="es-row"><span class="es-po">5118-1</span><span class="es-health"><span class="health-ring yellow"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="36.65 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">5/6</span></span></span><span class="es-amt r">$74,250.00</span><span class="es-prep">Sarah K.</span><span class="es-rev">Sarah L.</span><span class="es-status"><span class="status-ctrl-sel s-needs-review">Ready for Review</span></span><span class="es-lt r">74,250.00</span></div>
                <div class="es-row"><span class="es-po">3902-1</span><span class="es-health"><span class="health-ring green"><svg width="18" height="18" viewBox="0 0 18 18"><circle class="health-ring-track" cx="9" cy="9" r="7" fill="none" stroke-width="2.5"/><circle class="health-ring-fill" cx="9" cy="9" r="7" fill="none" stroke-width="2.5" stroke-dasharray="43.98 43.98" stroke-linecap="round"/></svg><span class="health-ring-text">6/6</span></span></span><span class="es-amt r">$318,000.00</span><span class="es-prep"><span class="es-ml">✦ Mesh</span></span><span class="es-rev">Erin C.</span><span class="es-status"><span class="status-ctrl-sel s-needs-review">Ready for Review</span></span><span class="es-lt r">318,000.00</span></div>
              </div>
            </div>
          </div>
        </div>
        </div><!-- /.tg5-feat -->
      </div>
    </div>
  </section>
`;

function MeshV5Top({ onCta }) {
  const ref = React.useRef(null);
  const ctaRef = React.useRef(onCta);
  ctaRef.current = onCta;

  React.useEffect(() => {
    const root = ref.current;
    if (!root) return;
    // Wire the hero's "Get a demo" buttons to the site's cal.com demo modal.
    const ctas = Array.from(root.querySelectorAll('[data-demo-cta]'));
    const onClick = (e) => { e.preventDefault(); if (ctaRef.current) ctaRef.current(); };
    ctas.forEach((b) => b.addEventListener('click', onClick));
    // Run the package's own animation engines once the markup is in the DOM
    // (loaded as plain scripts that registered these on window.MeshV5).
    const K = window.MeshV5 || {};
    if (K.initKit) K.initKit(root);
    if (K.initHero) K.initHero();
    if (K.initFeatures) K.initFeatures();
    return () => ctas.forEach((b) => b.removeEventListener('click', onClick));
  }, []);

  return (
    <div className="meshv5" ref={ref}
      dangerouslySetInnerHTML={{ __html: SCENE_HTML + HERO_HTML + FEATURE_HTML }} />
  );
}

Object.assign(window, { MeshV5Top });
