/* AquiferHQ, shared stylesheet. THIS IS THE LIVE SITE as of the 2026-09-24 cutover, when
   direction E replaced the seven-page site it had been prototyped beside. Split out of a
   single page on 2026-09-21 when the home page passed 26,000px and the tabs became real
   pages. site.css and styles.css are the OLD site's and now serve legal.html only. */
:root{
  /* neutrals tinted toward the mark, not toward grey */
  --ink:#0b2430; --ink-2:#55747f; --ink-3:#7d97a0;
  --bg:#fff; --bg-2:#edf7fb; --bg-3:#04222e; --hair:#cfe3ea;
  --card:#fff; --nav-bg:rgba(255,255,255,.8); --hair-2:rgba(11,36,48,.09);
  --shadow-1:rgba(11,36,48,.05); --shadow-2:rgba(6,112,140,.3);
  --chrome-a:#e7eff3; --chrome-b:#dbe6ec; --chrome-bar:#fff; --chrome-url:#eef4f7;
  --tab-on:#fff; --chrome-ink:rgba(11,36,48,.78); --chrome-ink-2:rgba(11,36,48,.55);
  --chrome-ink-3:rgba(11,36,48,.4);
  /* The mark is a NEON-CYAN droplet, #22d3ee. Every cyan here is that color or a step of
     it: --cy-hot is the mark itself and carries the graphics, --cy is the deepest step that
     still reads as the same color and carries text on white, --cy-3 is the highlight on a
     dark ground. Nothing in the ramp is allowed to drift toward slate or sea-green, which
     is what made the earlier #2ab0de/#0a5f78 pair look like dirty water. */
  --cy:#0596b8; --cy-2:#22d3ee; --cy-3:#67e8f9; --cy-hot:#22d3ee; --cy-deep:#0e7490;
  --cy-rgb:34,211,238;
  --am:#e29c24; --am-2:#f2a82a; --am-3:#b97d17;
  --f:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  --logo:'Outfit',sans-serif;   /* the live site's actual wordmark font, not the body face */
  /* ONE triangulated field, reused at four strengths. It is held here rather than
     written into each rule so the 14KB data URI is downloaded and parsed once. */
  /* The light relative of --mesh: the same seeded lattice, a pale blue ramp, and a
     scattering of brighter accent facets. Separate asset rather than the dark one
     dimmed, because that ramp bottoms out near black and goes grey when lightened. */
  --mesh-lt:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1400 560%22 preserveAspectRatio=%22none%22%3E%3Crect width=%221400%22 height=%22560%22 fill=%22%23eef6fa%22/%3E%3Cpolygon points=%220.0,0.0 83.3,0.0 0.0,73.7%22 fill=%22%23edf4f6%22/%3E%3Cpolygon points=%2283.3,0.0 95.7,102.8 0.0,73.7%22 fill=%22%23f2f9fb%22/%3E%3Cpolygon points=%2283.3,0.0 222.4,0.0 200.8,74.2%22 fill=%22%23eff8fb%22/%3E%3Cpolygon points=%2283.3,0.0 200.8,74.2 95.7,102.8%22 fill=%22%23f0f8fb%22/%3E%3Cpolygon points=%22222.4,0.0 277.7,0.0 200.8,74.2%22 fill=%22%23e9f3f7%22/%3E%3Cpolygon points=%22277.7,0.0 278.1,92.8 200.8,74.2%22 fill=%22%23ecf6fa%22/%3E%3Cpolygon points=%22277.7,0.0 400.6,0.0 425.3,94.9%22 fill=%22%23e9f5f9%22/%3E%3Cpolygon points=%22277.7,0.0 425.3,94.9 278.1,92.8%22 fill=%22%23eaf5fa%22/%3E%3Cpolygon points=%22400.6,0.0 476.6,0.0 425.3,94.9%22 fill=%22%23e7f4f9%22/%3E%3Cpolygon points=%22476.6,0.0 511.6,108.7 425.3,94.9%22 fill=%22%23e6f3f9%22/%3E%3Cpolygon points=%22476.6,0.0 607.8,0.0 587.1,125.6%22 fill=%22%23e2f1f7%22/%3E%3Cpolygon points=%22476.6,0.0 587.1,125.6 511.6,108.7%22 fill=%22%23e4f2f8%22/%3E%3Cpolygon points=%22607.8,0.0 740.0,0.0 587.1,125.6%22 fill=%22%23dff0f7%22/%3E%3Cpolygon points=%22740.0,0.0 700.2,77.8 587.1,125.6%22 fill=%22%23d6e8f0%22/%3E%3Cpolygon points=%22740.0,0.0 780.2,0.0 841.3,115.5%22 fill=%22%23d7ecf5%22/%3E%3Cpolygon points=%22740.0,0.0 841.3,115.5 700.2,77.8%22 fill=%22%23d7ebf4%22/%3E%3Cpolygon points=%22780.2,0.0 905.0,0.0 841.3,115.5%22 fill=%22%23d6ecf5%22/%3E%3Cpolygon points=%22905.0,0.0 889.4,110.9 841.3,115.5%22 fill=%22%23d4ebf5%22/%3E%3Cpolygon points=%22905.0,0.0 1018.8,0.0 1010.3,68.8%22 fill=%22%23cee7f2%22/%3E%3Cpolygon points=%22905.0,0.0 1010.3,68.8 889.4,110.9%22 fill=%22%23cae3ed%22/%3E%3Cpolygon points=%221018.8,0.0 1086.0,0.0 1010.3,68.8%22 fill=%22%23c8e5f1%22/%3E%3Cpolygon points=%221086.0,0.0 1088.3,64.2 1010.3,68.8%22 fill=%22%23c9e7f3%22/%3E%3Cpolygon points=%221086.0,0.0 1182.7,0.0 1238.3,115.5%22 fill=%22%23bce0ef%22/%3E%3Cpolygon points=%221086.0,0.0 1238.3,115.5 1088.3,64.2%22 fill=%22%23c2e4f2%22/%3E%3Cpolygon points=%221182.7,0.0 1329.3,0.0 1238.3,115.5%22 fill=%22%23b9e2f1%22/%3E%3Cpolygon points=%221329.3,0.0 1280.4,65.6 1238.3,115.5%22 fill=%22%23b1dbeb%22/%3E%3Cpolygon points=%221329.3,0.0 1400.0,0.0 1400.0,88.7%22 fill=%22%23a5d5e7%22/%3E%3Cpolygon points=%221329.3,0.0 1400.0,88.7 1280.4,65.6%22 fill=%22%23b0def0%22/%3E%3Cpolygon points=%220.0,73.7 95.7,102.8 74.9,210.1%22 fill=%22%23f1f9fb%22/%3E%3Cpolygon points=%220.0,73.7 74.9,210.1 0.0,218.3%22 fill=%22%23f2f9fb%22/%3E%3Cpolygon points=%2295.7,102.8 200.8,74.2 74.9,210.1%22 fill=%22%23eef6f9%22/%3E%3Cpolygon points=%22200.8,74.2 191.8,218.7 74.9,210.1%22 fill=%22%23edf6fa%22/%3E%3Cpolygon points=%22200.8,74.2 278.1,92.8 295.4,180.4%22 fill=%22%2399e4f1%22/%3E%3Cpolygon points=%22200.8,74.2 295.4,180.4 191.8,218.7%22 fill=%22%23ecf6fa%22/%3E%3Cpolygon points=%22278.1,92.8 425.3,94.9 295.4,180.4%22 fill=%22%23e1ecf1%22/%3E%3Cpolygon points=%22425.3,94.9 386.3,153.2 295.4,180.4%22 fill=%22%23e8f4f9%22/%3E%3Cpolygon points=%22425.3,94.9 511.6,108.7 468.9,177.0%22 fill=%22%23e5f3f8%22/%3E%3Cpolygon points=%22425.3,94.9 468.9,177.0 386.3,153.2%22 fill=%22%23e6f3f8%22/%3E%3Cpolygon points=%22511.6,108.7 587.1,125.6 468.9,177.0%22 fill=%22%23e3f1f8%22/%3E%3Cpolygon points=%22587.1,125.6 590.7,148.7 468.9,177.0%22 fill=%22%23e2f1f8%22/%3E%3Cpolygon points=%22587.1,125.6 700.2,77.8 682.0,165.6%22 fill=%22%23d6e8ef%22/%3E%3Cpolygon points=%22587.1,125.6 682.0,165.6 590.7,148.7%22 fill=%22%23d6e7ee%22/%3E%3Cpolygon points=%22700.2,77.8 841.3,115.5 682.0,165.6%22 fill=%22%23daeef6%22/%3E%3Cpolygon points=%22841.3,115.5 777.4,188.0 682.0,165.6%22 fill=%22%23d7ecf6%22/%3E%3Cpolygon points=%22841.3,115.5 889.4,110.9 898.7,222.4%22 fill=%22%23d2eaf5%22/%3E%3Cpolygon points=%22841.3,115.5 898.7,222.4 777.4,188.0%22 fill=%22%23d1e9f3%22/%3E%3Cpolygon points=%22889.4,110.9 1010.3,68.8 898.7,222.4%22 fill=%22%23d0e9f4%22/%3E%3Cpolygon points=%221010.3,68.8 1030.2,173.5 898.7,222.4%22 fill=%22%23c8e4f0%22/%3E%3Cpolygon points=%221010.3,68.8 1088.3,64.2 1074.0,200.1%22 fill=%22%23c6e6f2%22/%3E%3Cpolygon points=%221010.3,68.8 1074.0,200.1 1030.2,173.5%22 fill=%22%23c8e7f3%22/%3E%3Cpolygon points=%221088.3,64.2 1238.3,115.5 1074.0,200.1%22 fill=%22%23baddeb%22/%3E%3Cpolygon points=%221238.3,115.5 1219.3,153.8 1074.0,200.1%22 fill=%22%23bce3f2%22/%3E%3Cpolygon points=%221238.3,115.5 1280.4,65.6 1261.2,147.8%22 fill=%22%23b6e0f1%22/%3E%3Cpolygon points=%221238.3,115.5 1261.2,147.8 1219.3,153.8%22 fill=%22%23b8e1f1%22/%3E%3Cpolygon points=%221280.4,65.6 1400.0,88.7 1261.2,147.8%22 fill=%22%2375d7ec%22/%3E%3Cpolygon points=%221400.0,88.7 1400.0,211.6 1261.2,147.8%22 fill=%22%23a7daec%22/%3E%3Cpolygon points=%220.0,218.3 74.9,210.1 0.0,272.0%22 fill=%22%23eef5f8%22/%3E%3Cpolygon points=%2274.9,210.1 90.5,296.6 0.0,272.0%22 fill=%22%23eaf2f5%22/%3E%3Cpolygon points=%2274.9,210.1 191.8,218.7 224.6,312.2%22 fill=%22%23ebf5f9%22/%3E%3Cpolygon points=%2274.9,210.1 224.6,312.2 90.5,296.6%22 fill=%22%23eaf3f6%22/%3E%3Cpolygon points=%22191.8,218.7 295.4,180.4 224.6,312.2%22 fill=%22%23eaf5fa%22/%3E%3Cpolygon points=%22295.4,180.4 302.6,273.2 224.6,312.2%22 fill=%22%23a0e4f1%22/%3E%3Cpolygon points=%22295.4,180.4 386.3,153.2 401.8,250.3%22 fill=%22%23bfebf4%22/%3E%3Cpolygon points=%22295.4,180.4 401.8,250.3 302.6,273.2%22 fill=%22%23e4eff4%22/%3E%3Cpolygon points=%22386.3,153.2 468.9,177.0 401.8,250.3%22 fill=%22%23e6f3f9%22/%3E%3Cpolygon points=%22468.9,177.0 506.9,265.2 401.8,250.3%22 fill=%22%23e4f2f8%22/%3E%3Cpolygon points=%22468.9,177.0 590.7,148.7 559.0,285.5%22 fill=%22%23dcebf2%22/%3E%3Cpolygon points=%22468.9,177.0 559.0,285.5 506.9,265.2%22 fill=%22%23ddecf3%22/%3E%3Cpolygon points=%22590.7,148.7 682.0,165.6 559.0,285.5%22 fill=%22%23d9eaf2%22/%3E%3Cpolygon points=%22682.0,165.6 675.8,300.6 559.0,285.5%22 fill=%22%23dceff7%22/%3E%3Cpolygon points=%22682.0,165.6 777.4,188.0 818.8,275.0%22 fill=%22%23d7ecf6%22/%3E%3Cpolygon points=%22682.0,165.6 818.8,275.0 675.8,300.6%22 fill=%22%23d7ecf5%22/%3E%3Cpolygon points=%22777.4,188.0 898.7,222.4 818.8,275.0%22 fill=%22%23d0e8f2%22/%3E%3Cpolygon points=%22898.7,222.4 925.9,279.5 818.8,275.0%22 fill=%22%23d1eaf5%22/%3E%3Cpolygon points=%22898.7,222.4 1030.2,173.5 1039.6,278.3%22 fill=%22%23cae7f3%22/%3E%3Cpolygon points=%22898.7,222.4 1039.6,278.3 925.9,279.5%22 fill=%22%23cce8f4%22/%3E%3Cpolygon points=%221030.2,173.5 1074.0,200.1 1039.6,278.3%22 fill=%22%23c5e6f3%22/%3E%3Cpolygon points=%221074.0,200.1 1069.9,292.9 1039.6,278.3%22 fill=%22%23c0e3f1%22/%3E%3Cpolygon points=%221074.0,200.1 1219.3,153.8 1225.6,302.3%22 fill=%22%23b7deee%22/%3E%3Cpolygon points=%221074.0,200.1 1225.6,302.3 1069.9,292.9%22 fill=%22%239be0f1%22/%3E%3Cpolygon points=%221219.3,153.8 1261.2,147.8 1225.6,302.3%22 fill=%22%23b1dcec%22/%3E%3Cpolygon points=%221261.2,147.8 1270.5,307.1 1225.6,302.3%22 fill=%22%23b2dff0%22/%3E%3Cpolygon points=%221261.2,147.8 1400.0,211.6 1400.0,261.4%22 fill=%22%23a8dcee%22/%3E%3Cpolygon points=%221261.2,147.8 1400.0,261.4 1270.5,307.1%22 fill=%22%2388daef%22/%3E%3Cpolygon points=%220.0,272.0 90.5,296.6 68.1,399.8%22 fill=%22%23eff8fb%22/%3E%3Cpolygon points=%220.0,272.0 68.1,399.8 0.0,361.6%22 fill=%22%23eef6f9%22/%3E%3Cpolygon points=%2290.5,296.6 224.6,312.2 68.1,399.8%22 fill=%22%23e6eff3%22/%3E%3Cpolygon points=%22224.6,312.2 225.4,403.3 68.1,399.8%22 fill=%22%23eaf4f9%22/%3E%3Cpolygon points=%22224.6,312.2 302.6,273.2 338.8,388.9%22 fill=%22%23e1ecf1%22/%3E%3Cpolygon points=%22224.6,312.2 338.8,388.9 225.4,403.3%22 fill=%22%23e9f4f9%22/%3E%3Cpolygon points=%22302.6,273.2 401.8,250.3 338.8,388.9%22 fill=%22%23dfebf0%22/%3E%3Cpolygon points=%22401.8,250.3 408.2,402.2 338.8,388.9%22 fill=%22%23e6f3f8%22/%3E%3Cpolygon points=%22401.8,250.3 506.9,265.2 530.0,412.0%22 fill=%22%23deedf3%22/%3E%3Cpolygon points=%22401.8,250.3 530.0,412.0 408.2,402.2%22 fill=%22%23deedf3%22/%3E%3Cpolygon points=%22506.9,265.2 559.0,285.5 530.0,412.0%22 fill=%22%23ddedf5%22/%3E%3Cpolygon points=%22559.0,285.5 562.1,411.7 530.0,412.0%22 fill=%22%23deeff7%22/%3E%3Cpolygon points=%22559.0,285.5 675.8,300.6 681.9,398.3%22 fill=%22%23d7eaf2%22/%3E%3Cpolygon points=%22559.0,285.5 681.9,398.3 562.1,411.7%22 fill=%22%23dceff7%22/%3E%3Cpolygon points=%22675.8,300.6 818.8,275.0 681.9,398.3%22 fill=%22%23d1e7f0%22/%3E%3Cpolygon points=%22818.8,275.0 766.7,405.8 681.9,398.3%22 fill=%22%23a5e4f2%22/%3E%3Cpolygon points=%22818.8,275.0 925.9,279.5 910.7,354.2%22 fill=%22%23cde7f2%22/%3E%3Cpolygon points=%22818.8,275.0 910.7,354.2 766.7,405.8%22 fill=%22%23cbe3ed%22/%3E%3Cpolygon points=%22925.9,279.5 1039.6,278.3 910.7,354.2%22 fill=%22%23cae7f3%22/%3E%3Cpolygon points=%221039.6,278.3 981.5,384.8 910.7,354.2%22 fill=%22%23c7e6f3%22/%3E%3Cpolygon points=%221039.6,278.3 1069.9,292.9 1135.2,376.1%22 fill=%22%23c0e4f2%22/%3E%3Cpolygon points=%221039.6,278.3 1135.2,376.1 981.5,384.8%22 fill=%22%23bbdeeb%22/%3E%3Cpolygon points=%221069.9,292.9 1225.6,302.3 1135.2,376.1%22 fill=%22%23b4dbea%22/%3E%3Cpolygon points=%221225.6,302.3 1189.8,336.8 1135.2,376.1%22 fill=%22%23b4deef%22/%3E%3Cpolygon points=%221225.6,302.3 1270.5,307.1 1276.6,357.4%22 fill=%22%2381dbef%22/%3E%3Cpolygon points=%221225.6,302.3 1276.6,357.4 1189.8,336.8%22 fill=%22%23b3e0f0%22/%3E%3Cpolygon points=%221270.5,307.1 1400.0,261.4 1276.6,357.4%22 fill=%22%23a8dcee%22/%3E%3Cpolygon points=%221400.0,261.4 1400.0,376.5 1276.6,357.4%22 fill=%22%23a2daed%22/%3E%3Cpolygon points=%220.0,361.6 68.1,399.8 0.0,474.7%22 fill=%22%23f0f8fb%22/%3E%3Cpolygon points=%2268.1,399.8 121.9,473.3 0.0,474.7%22 fill=%22%23eef7fa%22/%3E%3Cpolygon points=%2268.1,399.8 225.4,403.3 207.3,438.5%22 fill=%22%23ebf6fa%22/%3E%3Cpolygon points=%2268.1,399.8 207.3,438.5 121.9,473.3%22 fill=%22%23ecf6fa%22/%3E%3Cpolygon points=%22225.4,403.3 338.8,388.9 207.3,438.5%22 fill=%22%23e9f4f9%22/%3E%3Cpolygon points=%22338.8,388.9 321.6,448.7 207.3,438.5%22 fill=%22%23a3e7f3%22/%3E%3Cpolygon points=%22338.8,388.9 408.2,402.2 385.9,492.2%22 fill=%22%23e3f1f7%22/%3E%3Cpolygon points=%22338.8,388.9 385.9,492.2 321.6,448.7%22 fill=%22%23e6f3f9%22/%3E%3Cpolygon points=%22408.2,402.2 530.0,412.0 385.9,492.2%22 fill=%22%23dcebf1%22/%3E%3Cpolygon points=%22530.0,412.0 490.2,484.6 385.9,492.2%22 fill=%22%23dfeff6%22/%3E%3Cpolygon points=%22530.0,412.0 562.1,411.7 594.3,503.1%22 fill=%22%23dceff7%22/%3E%3Cpolygon points=%22530.0,412.0 594.3,503.1 490.2,484.6%22 fill=%22%23ddeff7%22/%3E%3Cpolygon points=%22562.1,411.7 681.9,398.3 594.3,503.1%22 fill=%22%23d5e8f1%22/%3E%3Cpolygon points=%22681.9,398.3 694.5,438.0 594.3,503.1%22 fill=%22%23d7edf6%22/%3E%3Cpolygon points=%22681.9,398.3 766.7,405.8 822.4,478.9%22 fill=%22%23d0e8f2%22/%3E%3Cpolygon points=%22681.9,398.3 822.4,478.9 694.5,438.0%22 fill=%22%23d4ebf5%22/%3E%3Cpolygon points=%22766.7,405.8 910.7,354.2 822.4,478.9%22 fill=%22%23cee7f2%22/%3E%3Cpolygon points=%22910.7,354.2 881.2,472.0 822.4,478.9%22 fill=%22%23cee9f4%22/%3E%3Cpolygon points=%22910.7,354.2 981.5,384.8 961.3,443.6%22 fill=%22%23c4e3f0%22/%3E%3Cpolygon points=%22910.7,354.2 961.3,443.6 881.2,472.0%22 fill=%22%23c9e7f3%22/%3E%3Cpolygon points=%22981.5,384.8 1135.2,376.1 961.3,443.6%22 fill=%22%23c2e5f2%22/%3E%3Cpolygon points=%221135.2,376.1 1075.5,482.5 961.3,443.6%22 fill=%22%23bae0ee%22/%3E%3Cpolygon points=%221135.2,376.1 1189.8,336.8 1229.6,478.1%22 fill=%22%23b3dff0%22/%3E%3Cpolygon points=%221135.2,376.1 1229.6,478.1 1075.5,482.5%22 fill=%22%23b5e0f0%22/%3E%3Cpolygon points=%221189.8,336.8 1276.6,357.4 1229.6,478.1%22 fill=%22%23aedeef%22/%3E%3Cpolygon points=%221276.6,357.4 1309.3,493.2 1229.6,478.1%22 fill=%22%2370d4e9%22/%3E%3Cpolygon points=%221276.6,357.4 1400.0,376.5 1400.0,491.4%22 fill=%22%2399d5e9%22/%3E%3Cpolygon points=%221276.6,357.4 1400.0,491.4 1309.3,493.2%22 fill=%22%239fd9ed%22/%3E%3Cpolygon points=%220.0,474.7 121.9,473.3 84.8,560.0%22 fill=%22%23edf7fa%22/%3E%3Cpolygon points=%220.0,474.7 84.8,560.0 0.0,560.0%22 fill=%22%23eef7fb%22/%3E%3Cpolygon points=%22121.9,473.3 207.3,438.5 84.8,560.0%22 fill=%22%23ebf6fa%22/%3E%3Cpolygon points=%22207.3,438.5 198.9,560.0 84.8,560.0%22 fill=%22%23eaf5fa%22/%3E%3Cpolygon points=%22207.3,438.5 321.6,448.7 286.4,560.0%22 fill=%22%23e8f4f9%22/%3E%3Cpolygon points=%22207.3,438.5 286.4,560.0 198.9,560.0%22 fill=%22%23e8f4f9%22/%3E%3Cpolygon points=%22321.6,448.7 385.9,492.2 286.4,560.0%22 fill=%22%23e6f3f9%22/%3E%3Cpolygon points=%22385.9,492.2 427.3,560.0 286.4,560.0%22 fill=%22%23e4f2f8%22/%3E%3Cpolygon points=%22385.9,492.2 490.2,484.6 463.1,560.0%22 fill=%22%23dcecf2%22/%3E%3Cpolygon points=%22385.9,492.2 463.1,560.0 427.3,560.0%22 fill=%22%23d9e9ef%22/%3E%3Cpolygon points=%22490.2,484.6 594.3,503.1 463.1,560.0%22 fill=%22%23d6e8ef%22/%3E%3Cpolygon points=%22594.3,503.1 561.9,560.0 463.1,560.0%22 fill=%22%23d4e7ef%22/%3E%3Cpolygon points=%22594.3,503.1 694.5,438.0 734.7,560.0%22 fill=%22%23d2e8f2%22/%3E%3Cpolygon points=%22594.3,503.1 734.7,560.0 561.9,560.0%22 fill=%22%23d7edf6%22/%3E%3Cpolygon points=%22694.5,438.0 822.4,478.9 734.7,560.0%22 fill=%22%23d2eaf5%22/%3E%3Cpolygon points=%22822.4,478.9 812.8,560.0 734.7,560.0%22 fill=%22%23d0e9f4%22/%3E%3Cpolygon points=%22822.4,478.9 881.2,472.0 881.0,560.0%22 fill=%22%23c8e4f0%22/%3E%3Cpolygon points=%22822.4,478.9 881.0,560.0 812.8,560.0%22 fill=%22%23cde8f4%22/%3E%3Cpolygon points=%22881.2,472.0 961.3,443.6 881.0,560.0%22 fill=%22%2386dff1%22/%3E%3Cpolygon points=%22961.3,443.6 982.5,560.0 881.0,560.0%22 fill=%22%23c1e2ef%22/%3E%3Cpolygon points=%22961.3,443.6 1075.5,482.5 1080.6,560.0%22 fill=%22%23bee3f2%22/%3E%3Cpolygon points=%22961.3,443.6 1080.6,560.0 982.5,560.0%22 fill=%22%23bfe3f2%22/%3E%3Cpolygon points=%221075.5,482.5 1229.6,478.1 1080.6,560.0%22 fill=%22%23b5e0f1%22/%3E%3Cpolygon points=%221229.6,478.1 1185.3,560.0 1080.6,560.0%22 fill=%22%23abd8e8%22/%3E%3Cpolygon points=%221229.6,478.1 1309.3,493.2 1326.5,560.0%22 fill=%22%23a0d8ec%22/%3E%3Cpolygon points=%221229.6,478.1 1326.5,560.0 1185.3,560.0%22 fill=%22%23a7dcee%22/%3E%3Cpolygon points=%221309.3,493.2 1400.0,491.4 1326.5,560.0%22 fill=%22%239bd7ec%22/%3E%3Cpolygon points=%221400.0,491.4 1400.0,560.0 1326.5,560.0%22 fill=%22%2391d2e8%22/%3E%3C/svg%3E");
  --mesh:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1400 560%22 preserveAspectRatio=%22none%22%3E%3Crect width=%221400%22 height=%22560%22 fill=%22%230596b8%22/%3E%3Cpolygon points=%220.0,0.0 83.3,0.0 0.0,73.7%22 fill=%22%23063a4d%22/%3E%3Cpolygon points=%2283.3,0.0 95.7,102.8 0.0,73.7%22 fill=%22%23063c4f%22/%3E%3Cpolygon points=%2283.3,0.0 222.4,0.0 200.8,74.2%22 fill=%22%230d4b5f%22/%3E%3Cpolygon points=%2283.3,0.0 200.8,74.2 95.7,102.8%22 fill=%22%2309465a%22/%3E%3Cpolygon points=%22222.4,0.0 277.7,0.0 200.8,74.2%22 fill=%22%23084a5f%22/%3E%3Cpolygon points=%22277.7,0.0 278.1,92.8 200.8,74.2%22 fill=%22%2315576c%22/%3E%3Cpolygon points=%22277.7,0.0 400.6,0.0 425.3,94.9%22 fill=%22%2309536a%22/%3E%3Cpolygon points=%22277.7,0.0 425.3,94.9 278.1,92.8%22 fill=%22%230a556c%22/%3E%3Cpolygon points=%22400.6,0.0 476.6,0.0 425.3,94.9%22 fill=%22%2316657c%22/%3E%3Cpolygon points=%22476.6,0.0 511.6,108.7 425.3,94.9%22 fill=%22%230a5f78%22/%3E%3Cpolygon points=%22476.6,0.0 607.8,0.0 587.1,125.6%22 fill=%22%2315728b%22/%3E%3Cpolygon points=%22476.6,0.0 587.1,125.6 511.6,108.7%22 fill=%22%230e6b85%22/%3E%3Cpolygon points=%22607.8,0.0 740.0,0.0 587.1,125.6%22 fill=%22%23087692%22/%3E%3Cpolygon points=%22740.0,0.0 700.2,77.8 587.1,125.6%22 fill=%22%23117f9c%22/%3E%3Cpolygon points=%22740.0,0.0 780.2,0.0 841.3,115.5%22 fill=%22%230a89a8%22/%3E%3Cpolygon points=%22740.0,0.0 841.3,115.5 700.2,77.8%22 fill=%22%230d88a6%22/%3E%3Cpolygon points=%22780.2,0.0 905.0,0.0 841.3,115.5%22 fill=%22%231293b2%22/%3E%3Cpolygon points=%22905.0,0.0 889.4,110.9 841.3,115.5%22 fill=%22%230c97b7%22/%3E%3Cpolygon points=%22905.0,0.0 1018.8,0.0 1010.3,68.8%22 fill=%22%2311a4c3%22/%3E%3Cpolygon points=%22905.0,0.0 1010.3,68.8 889.4,110.9%22 fill=%22%2314a1c0%22/%3E%3Cpolygon points=%221018.8,0.0 1086.0,0.0 1010.3,68.8%22 fill=%22%2311accb%22/%3E%3Cpolygon points=%221086.0,0.0 1088.3,64.2 1010.3,68.8%22 fill=%22%2312b0cf%22/%3E%3Cpolygon points=%221086.0,0.0 1182.7,0.0 1238.3,115.5%22 fill=%22%231ac2de%22/%3E%3Cpolygon points=%221086.0,0.0 1238.3,115.5 1088.3,64.2%22 fill=%22%2324c2de%22/%3E%3Cpolygon points=%221182.7,0.0 1329.3,0.0 1238.3,115.5%22 fill=%22%232ad3ed%22/%3E%3Cpolygon points=%221329.3,0.0 1280.4,65.6 1238.3,115.5%22 fill=%22%2342d9f0%22/%3E%3Cpolygon points=%221329.3,0.0 1400.0,0.0 1400.0,88.7%22 fill=%22%2383e6f5%22/%3E%3Cpolygon points=%221329.3,0.0 1400.0,88.7 1280.4,65.6%22 fill=%22%235ed6e8%22/%3E%3Cpolygon points=%220.0,73.7 95.7,102.8 74.9,210.1%22 fill=%22%23074053%22/%3E%3Cpolygon points=%220.0,73.7 74.9,210.1 0.0,218.3%22 fill=%22%23073e52%22/%3E%3Cpolygon points=%2295.7,102.8 200.8,74.2 74.9,210.1%22 fill=%22%230f4c60%22/%3E%3Cpolygon points=%22200.8,74.2 191.8,218.7 74.9,210.1%22 fill=%22%2308495d%22/%3E%3Cpolygon points=%22200.8,74.2 278.1,92.8 295.4,180.4%22 fill=%22%230d5369%22/%3E%3Cpolygon points=%22200.8,74.2 295.4,180.4 191.8,218.7%22 fill=%22%2314576c%22/%3E%3Cpolygon points=%22278.1,92.8 425.3,94.9 295.4,180.4%22 fill=%22%2309536a%22/%3E%3Cpolygon points=%22425.3,94.9 386.3,153.2 295.4,180.4%22 fill=%22%23156279%22/%3E%3Cpolygon points=%22425.3,94.9 511.6,108.7 468.9,177.0%22 fill=%22%2309617a%22/%3E%3Cpolygon points=%22425.3,94.9 468.9,177.0 386.3,153.2%22 fill=%22%230a5e76%22/%3E%3Cpolygon points=%22511.6,108.7 587.1,125.6 468.9,177.0%22 fill=%22%23096a85%22/%3E%3Cpolygon points=%22587.1,125.6 590.7,148.7 468.9,177.0%22 fill=%22%23086983%22/%3E%3Cpolygon points=%22587.1,125.6 700.2,77.8 682.0,165.6%22 fill=%22%230b7c99%22/%3E%3Cpolygon points=%22587.1,125.6 682.0,165.6 590.7,148.7%22 fill=%22%23087591%22/%3E%3Cpolygon points=%22700.2,77.8 841.3,115.5 682.0,165.6%22 fill=%22%230f89a7%22/%3E%3Cpolygon points=%22841.3,115.5 777.4,188.0 682.0,165.6%22 fill=%22%23128fad%22/%3E%3Cpolygon points=%22841.3,115.5 889.4,110.9 898.7,222.4%22 fill=%22%230593b4%22/%3E%3Cpolygon points=%22841.3,115.5 898.7,222.4 777.4,188.0%22 fill=%22%230590b1%22/%3E%3Cpolygon points=%22889.4,110.9 1010.3,68.8 898.7,222.4%22 fill=%22%230ca1c1%22/%3E%3Cpolygon points=%221010.3,68.8 1030.2,173.5 898.7,222.4%22 fill=%22%2313abca%22/%3E%3Cpolygon points=%221010.3,68.8 1088.3,64.2 1074.0,200.1%22 fill=%22%2313aecb%22/%3E%3Cpolygon points=%221010.3,68.8 1074.0,200.1 1030.2,173.5%22 fill=%22%2319b5d3%22/%3E%3Cpolygon points=%221088.3,64.2 1238.3,115.5 1074.0,200.1%22 fill=%22%2323c5e0%22/%3E%3Cpolygon points=%221238.3,115.5 1219.3,153.8 1074.0,200.1%22 fill=%22%231dc4df%22/%3E%3Cpolygon points=%221238.3,115.5 1280.4,65.6 1261.2,147.8%22 fill=%22%2335d4ed%22/%3E%3Cpolygon points=%221238.3,115.5 1261.2,147.8 1219.3,153.8%22 fill=%22%232bcae2%22/%3E%3Cpolygon points=%221280.4,65.6 1400.0,88.7 1261.2,147.8%22 fill=%22%2363e0f3%22/%3E%3Cpolygon points=%221400.0,88.7 1400.0,211.6 1261.2,147.8%22 fill=%22%238be8f6%22/%3E%3Cpolygon points=%220.0,218.3 74.9,210.1 0.0,272.0%22 fill=%22%23073f52%22/%3E%3Cpolygon points=%2274.9,210.1 90.5,296.6 0.0,272.0%22 fill=%22%23134d60%22/%3E%3Cpolygon points=%2274.9,210.1 191.8,218.7 224.6,312.2%22 fill=%22%2315556a%22/%3E%3Cpolygon points=%2274.9,210.1 224.6,312.2 90.5,296.6%22 fill=%22%23084b60%22/%3E%3Cpolygon points=%22191.8,218.7 295.4,180.4 224.6,312.2%22 fill=%22%23095269%22/%3E%3Cpolygon points=%22295.4,180.4 302.6,273.2 224.6,312.2%22 fill=%22%2309556c%22/%3E%3Cpolygon points=%22295.4,180.4 386.3,153.2 401.8,250.3%22 fill=%22%23095971%22/%3E%3Cpolygon points=%22295.4,180.4 401.8,250.3 302.6,273.2%22 fill=%22%23095971%22/%3E%3Cpolygon points=%22386.3,153.2 468.9,177.0 401.8,250.3%22 fill=%22%23095b73%22/%3E%3Cpolygon points=%22468.9,177.0 506.9,265.2 401.8,250.3%22 fill=%22%23146d86%22/%3E%3Cpolygon points=%22468.9,177.0 590.7,148.7 559.0,285.5%22 fill=%22%23086d88%22/%3E%3Cpolygon points=%22468.9,177.0 559.0,285.5 506.9,265.2%22 fill=%22%2314748e%22/%3E%3Cpolygon points=%22590.7,148.7 682.0,165.6 559.0,285.5%22 fill=%22%230d7b97%22/%3E%3Cpolygon points=%22682.0,165.6 675.8,300.6 559.0,285.5%22 fill=%22%23077b99%22/%3E%3Cpolygon points=%22682.0,165.6 777.4,188.0 818.8,275.0%22 fill=%22%230683a2%22/%3E%3Cpolygon points=%22682.0,165.6 818.8,275.0 675.8,300.6%22 fill=%22%23108dab%22/%3E%3Cpolygon points=%22777.4,188.0 898.7,222.4 818.8,275.0%22 fill=%22%230594b6%22/%3E%3Cpolygon points=%22898.7,222.4 925.9,279.5 818.8,275.0%22 fill=%22%230c9fc0%22/%3E%3Cpolygon points=%22898.7,222.4 1030.2,173.5 1039.6,278.3%22 fill=%22%2313b0cf%22/%3E%3Cpolygon points=%22898.7,222.4 1039.6,278.3 925.9,279.5%22 fill=%22%230faaca%22/%3E%3Cpolygon points=%221030.2,173.5 1074.0,200.1 1039.6,278.3%22 fill=%22%2316b9d7%22/%3E%3Cpolygon points=%221074.0,200.1 1069.9,292.9 1039.6,278.3%22 fill=%22%2317bad7%22/%3E%3Cpolygon points=%221074.0,200.1 1219.3,153.8 1225.6,302.3%22 fill=%22%2321cfea%22/%3E%3Cpolygon points=%221074.0,200.1 1225.6,302.3 1069.9,292.9%22 fill=%22%2329cbe6%22/%3E%3Cpolygon points=%221219.3,153.8 1261.2,147.8 1225.6,302.3%22 fill=%22%233fd9f0%22/%3E%3Cpolygon points=%221261.2,147.8 1270.5,307.1 1225.6,302.3%22 fill=%22%2356ddf2%22/%3E%3Cpolygon points=%221261.2,147.8 1400.0,211.6 1400.0,261.4%22 fill=%22%2392e0eb%22/%3E%3Cpolygon points=%221261.2,147.8 1400.0,261.4 1270.5,307.1%22 fill=%22%2382e6f5%22/%3E%3Cpolygon points=%220.0,272.0 90.5,296.6 68.1,399.8%22 fill=%22%23074255%22/%3E%3Cpolygon points=%220.0,272.0 68.1,399.8 0.0,361.6%22 fill=%22%23124c5f%22/%3E%3Cpolygon points=%2290.5,296.6 224.6,312.2 68.1,399.8%22 fill=%22%23115267%22/%3E%3Cpolygon points=%22224.6,312.2 225.4,403.3 68.1,399.8%22 fill=%22%230d546a%22/%3E%3Cpolygon points=%22224.6,312.2 302.6,273.2 338.8,388.9%22 fill=%22%230a5971%22/%3E%3Cpolygon points=%22224.6,312.2 338.8,388.9 225.4,403.3%22 fill=%22%23125e75%22/%3E%3Cpolygon points=%22302.6,273.2 401.8,250.3 338.8,388.9%22 fill=%22%230d5f77%22/%3E%3Cpolygon points=%22401.8,250.3 408.2,402.2 338.8,388.9%22 fill=%22%2311677f%22/%3E%3Cpolygon points=%22401.8,250.3 506.9,265.2 530.0,412.0%22 fill=%22%23096b85%22/%3E%3Cpolygon points=%22401.8,250.3 530.0,412.0 408.2,402.2%22 fill=%22%23096882%22/%3E%3Cpolygon points=%22506.9,265.2 559.0,285.5 530.0,412.0%22 fill=%22%230c7691%22/%3E%3Cpolygon points=%22559.0,285.5 562.1,411.7 530.0,412.0%22 fill=%22%2307738f%22/%3E%3Cpolygon points=%22559.0,285.5 675.8,300.6 681.9,398.3%22 fill=%22%23077e9c%22/%3E%3Cpolygon points=%22559.0,285.5 681.9,398.3 562.1,411.7%22 fill=%22%23077996%22/%3E%3Cpolygon points=%22675.8,300.6 818.8,275.0 681.9,398.3%22 fill=%22%23068bab%22/%3E%3Cpolygon points=%22818.8,275.0 766.7,405.8 681.9,398.3%22 fill=%22%230691b2%22/%3E%3Cpolygon points=%22818.8,275.0 925.9,279.5 910.7,354.2%22 fill=%22%2318a7c5%22/%3E%3Cpolygon points=%22818.8,275.0 910.7,354.2 766.7,405.8%22 fill=%22%230798b8%22/%3E%3Cpolygon points=%22925.9,279.5 1039.6,278.3 910.7,354.2%22 fill=%22%2310a7c4%22/%3E%3Cpolygon points=%221039.6,278.3 981.5,384.8 910.7,354.2%22 fill=%22%2319b6d3%22/%3E%3Cpolygon points=%221039.6,278.3 1069.9,292.9 1135.2,376.1%22 fill=%22%2324c7e2%22/%3E%3Cpolygon points=%221039.6,278.3 1135.2,376.1 981.5,384.8%22 fill=%22%2319bcd8%22/%3E%3Cpolygon points=%221069.9,292.9 1225.6,302.3 1135.2,376.1%22 fill=%22%2324d0eb%22/%3E%3Cpolygon points=%221225.6,302.3 1189.8,336.8 1135.2,376.1%22 fill=%22%233cd8f0%22/%3E%3Cpolygon points=%221225.6,302.3 1270.5,307.1 1276.6,357.4%22 fill=%22%2372e3f4%22/%3E%3Cpolygon points=%221225.6,302.3 1276.6,357.4 1189.8,336.8%22 fill=%22%2356d3e6%22/%3E%3Cpolygon points=%221270.5,307.1 1400.0,261.4 1276.6,357.4%22 fill=%22%239cebf7%22/%3E%3Cpolygon points=%221400.0,261.4 1400.0,376.5 1276.6,357.4%22 fill=%22%23c3e0d1%22/%3E%3Cpolygon points=%220.0,361.6 68.1,399.8 0.0,474.7%22 fill=%22%230a475b%22/%3E%3Cpolygon points=%2268.1,399.8 121.9,473.3 0.0,474.7%22 fill=%22%2308495e%22/%3E%3Cpolygon points=%2268.1,399.8 225.4,403.3 207.3,438.5%22 fill=%22%23084f65%22/%3E%3Cpolygon points=%2268.1,399.8 207.3,438.5 121.9,473.3%22 fill=%22%23084d63%22/%3E%3Cpolygon points=%22225.4,403.3 338.8,388.9 207.3,438.5%22 fill=%22%230c5a72%22/%3E%3Cpolygon points=%22338.8,388.9 321.6,448.7 207.3,438.5%22 fill=%22%23095870%22/%3E%3Cpolygon points=%22338.8,388.9 408.2,402.2 385.9,492.2%22 fill=%22%23166c85%22/%3E%3Cpolygon points=%22338.8,388.9 385.9,492.2 321.6,448.7%22 fill=%22%230a617a%22/%3E%3Cpolygon points=%22408.2,402.2 530.0,412.0 385.9,492.2%22 fill=%22%2312738d%22/%3E%3Cpolygon points=%22530.0,412.0 490.2,484.6 385.9,492.2%22 fill=%22%23086f8a%22/%3E%3Cpolygon points=%22530.0,412.0 562.1,411.7 594.3,503.1%22 fill=%22%23077b99%22/%3E%3Cpolygon points=%22530.0,412.0 594.3,503.1 490.2,484.6%22 fill=%22%23087a97%22/%3E%3Cpolygon points=%22562.1,411.7 681.9,398.3 594.3,503.1%22 fill=%22%23067c99%22/%3E%3Cpolygon points=%22681.9,398.3 694.5,438.0 594.3,503.1%22 fill=%22%230c8baa%22/%3E%3Cpolygon points=%22681.9,398.3 766.7,405.8 822.4,478.9%22 fill=%22%23058fb0%22/%3E%3Cpolygon points=%22681.9,398.3 822.4,478.9 694.5,438.0%22 fill=%22%23058aa9%22/%3E%3Cpolygon points=%22766.7,405.8 910.7,354.2 822.4,478.9%22 fill=%22%230997b7%22/%3E%3Cpolygon points=%22910.7,354.2 881.2,472.0 822.4,478.9%22 fill=%22%230da4c4%22/%3E%3Cpolygon points=%22910.7,354.2 981.5,384.8 961.3,443.6%22 fill=%22%2312acca%22/%3E%3Cpolygon points=%22910.7,354.2 961.3,443.6 881.2,472.0%22 fill=%22%2310a9c8%22/%3E%3Cpolygon points=%22981.5,384.8 1135.2,376.1 961.3,443.6%22 fill=%22%231ac0dd%22/%3E%3Cpolygon points=%221135.2,376.1 1075.5,482.5 961.3,443.6%22 fill=%22%2322c9e4%22/%3E%3Cpolygon points=%221135.2,376.1 1189.8,336.8 1229.6,478.1%22 fill=%22%234ddcf1%22/%3E%3Cpolygon points=%221135.2,376.1 1229.6,478.1 1075.5,482.5%22 fill=%22%233ad8f0%22/%3E%3Cpolygon points=%221189.8,336.8 1276.6,357.4 1229.6,478.1%22 fill=%22%2368dced%22/%3E%3Cpolygon points=%221276.6,357.4 1309.3,493.2 1229.6,478.1%22 fill=%22%2393e3ee%22/%3E%3Cpolygon points=%221276.6,357.4 1400.0,376.5 1400.0,491.4%22 fill=%22%23e3e3c4%22/%3E%3Cpolygon points=%221276.6,357.4 1400.0,491.4 1309.3,493.2%22 fill=%22%23caddc8%22/%3E%3Cpolygon points=%220.0,474.7 121.9,473.3 84.8,560.0%22 fill=%22%23084a5f%22/%3E%3Cpolygon points=%220.0,474.7 84.8,560.0 0.0,560.0%22 fill=%22%2308475b%22/%3E%3Cpolygon points=%22121.9,473.3 207.3,438.5 84.8,560.0%22 fill=%22%2315596f%22/%3E%3Cpolygon points=%22207.3,438.5 198.9,560.0 84.8,560.0%22 fill=%22%23115a70%22/%3E%3Cpolygon points=%22207.3,438.5 321.6,448.7 286.4,560.0%22 fill=%22%230b5d75%22/%3E%3Cpolygon points=%22207.3,438.5 286.4,560.0 198.9,560.0%22 fill=%22%23105e75%22/%3E%3Cpolygon points=%22321.6,448.7 385.9,492.2 286.4,560.0%22 fill=%22%23095e77%22/%3E%3Cpolygon points=%22385.9,492.2 427.3,560.0 286.4,560.0%22 fill=%22%23096882%22/%3E%3Cpolygon points=%22385.9,492.2 490.2,484.6 463.1,560.0%22 fill=%22%23086d87%22/%3E%3Cpolygon points=%22385.9,492.2 463.1,560.0 427.3,560.0%22 fill=%22%23086d88%22/%3E%3Cpolygon points=%22490.2,484.6 594.3,503.1 463.1,560.0%22 fill=%22%230c7c99%22/%3E%3Cpolygon points=%22594.3,503.1 561.9,560.0 463.1,560.0%22 fill=%22%231584a1%22/%3E%3Cpolygon points=%22594.3,503.1 694.5,438.0 734.7,560.0%22 fill=%22%230686a5%22/%3E%3Cpolygon points=%22594.3,503.1 734.7,560.0 561.9,560.0%22 fill=%22%230f8dab%22/%3E%3Cpolygon points=%22694.5,438.0 822.4,478.9 734.7,560.0%22 fill=%22%230594b6%22/%3E%3Cpolygon points=%22822.4,478.9 812.8,560.0 734.7,560.0%22 fill=%22%2313a3c2%22/%3E%3Cpolygon points=%22822.4,478.9 881.2,472.0 881.0,560.0%22 fill=%22%2313abca%22/%3E%3Cpolygon points=%22822.4,478.9 881.0,560.0 812.8,560.0%22 fill=%22%2315aac9%22/%3E%3Cpolygon points=%22881.2,472.0 961.3,443.6 881.0,560.0%22 fill=%22%231db4d2%22/%3E%3Cpolygon points=%22961.3,443.6 982.5,560.0 881.0,560.0%22 fill=%22%2315b6d4%22/%3E%3Cpolygon points=%22961.3,443.6 1075.5,482.5 1080.6,560.0%22 fill=%22%2327cae5%22/%3E%3Cpolygon points=%22961.3,443.6 1080.6,560.0 982.5,560.0%22 fill=%22%231ac0dc%22/%3E%3Cpolygon points=%221075.5,482.5 1229.6,478.1 1080.6,560.0%22 fill=%22%2336cde3%22/%3E%3Cpolygon points=%221229.6,478.1 1185.3,560.0 1080.6,560.0%22 fill=%22%2359d8eb%22/%3E%3Cpolygon points=%221229.6,478.1 1309.3,493.2 1326.5,560.0%22 fill=%22%23c1e8df%22/%3E%3Cpolygon points=%221229.6,478.1 1326.5,560.0 1185.3,560.0%22 fill=%22%23a1ecf7%22/%3E%3Cpolygon points=%221309.3,493.2 1400.0,491.4 1326.5,560.0%22 fill=%22%23f1d7a8%22/%3E%3Cpolygon points=%221400.0,491.4 1400.0,560.0 1326.5,560.0%22 fill=%22%23f8c26a%22/%3E%3C/svg%3E");
  --wrap:1180px; --gut:clamp(22px,5vw,48px);
  --r:20px; --r-lg:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 17px/1.5 var(--f);
  letter-spacing:-.012em;overflow-x:hidden;-webkit-font-smoothing:antialiased}
/* A single grain layer over the whole page, the way a real product page is never quite flat
   color. Fixed rather than painted per-section, so it never doubles up or misaligns at a
   section seam, and cheap: one inline SVG turbulence filter, no image request. Opacity is low
   enough that it is felt as production value rather than seen as a texture. */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  mix-blend-mode:overlay;opacity:.035;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>')}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.hero-copy{width:min(1000px,100% - var(--gut)*2);margin-inline:auto}
.narrow{width:min(780px,100% - var(--gut)*2);margin-inline:auto}

/* ── bar ── */
.bar{position:sticky;top:0;z-index:90;height:48px;
  background:var(--nav-bg);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hair-2)}
/* The bar is the one row that should NOT be held to the 1180 content column: on a wide
   screen that left the logo, the tabs and the button clustered in the middle third with
   empty margins either side. It takes the full width less the page gutter, and the two
   auto margins push the mark hard left and the button hard right, which leaves the tabs
   centred between them on their own. */
.bar__in{display:flex;align-items:center;gap:clamp(20px,2.4vw,40px);height:100%;
  width:min(1720px,100% - var(--gut)*2)}
.bar__n{margin-right:auto}
.bar .pill{margin-left:auto}
.bar__n{display:flex;align-items:center;gap:8px;font-family:var(--logo);font-weight:800;
  font-size:19px;letter-spacing:-.02em;margin-right:auto}
.bar__n img{width:21px;height:21px}
.bar a.l{font-size:12.5px;color:var(--ink-2);transition:color .2s}
.bar a.l:hover{color:var(--cy)}
/* Apple gives one tab in the product bar a different job: it is not another page in the
   set, it is the thing you click if you are coming from somewhere else. */
.bar a.l--sw{color:var(--ink);font-weight:500}
.bar a.l--sw:hover{color:var(--cy)}
/* Safe on a <button> as well as an <a>. It was written for links, so a button wearing it
   kept its native border (the grey ring around Send it), its own font family, and the UA's
   appearance. None of that inherits, so each is reset explicitly rather than relied on. */
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:980px;
  padding:8px 17px;font-size:12.5px;font-weight:500;transition:background .2s,transform .15s,color .2s;
  background:var(--cy);color:#fff;white-space:nowrap;flex:none;
  border:0;font-family:inherit;line-height:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none}
.pill:focus-visible{outline:2px solid var(--cy-2);outline-offset:3px}
.pill:hover{background:#0a7f9b}
.pill--lg{padding:14px 27px;font-size:17px}
.pill--am{background:var(--am)}
.pill--am:hover{background:var(--am-3)}
.pill--ghost{background:none;color:var(--cy);border:1px solid rgba(var(--cy-rgb),.5)}
.pill--ghost:hover{background:rgba(8,145,178,.08)}
.burger{display:none;background:none;border:0;padding:6px;font-size:17px;color:var(--ink);cursor:pointer}

/* ── sections ──
   Flat fills read as placeholders once the product screens are photographic. Every field on
   the page now carries the same light: a soft bloom from the top right (the sun's corner in
   the ocean study, kept as one consistent light source across every direction this page has
   taken) plus a second, quieter one low on the left so the two colors in the mark actually
   meet somewhere other than the hero. Both are radial gradients, generous and soft-edged, so
   they read as light rather than as shapes. */
.sec{position:relative;padding:clamp(86px,12vw,170px) 0;text-align:center;
  background:radial-gradient(920px circle at 90% -12%,rgba(var(--cy-rgb),.075),transparent 58%),var(--bg)}
.ch{background:radial-gradient(920px circle at 90% -12%,rgba(var(--cy-rgb),.07),transparent 58%),var(--bg)}
.sec--tint{position:relative;isolation:isolate;overflow:hidden;background:
  radial-gradient(860px circle at 92% -10%,rgba(var(--cy-rgb),.15),transparent 55%),
  radial-gradient(760px circle at 3% 108%,rgba(226,156,36,.13),transparent 55%),
  var(--bg-2)}
.sec--dark{color:#eaf6fa;background:
  radial-gradient(920px circle at 85% -10%,rgba(var(--cy-rgb),.26),transparent 60%),
  radial-gradient(680px circle at 8% 106%,rgba(226,156,36,.11),transparent 55%),
  /* a faint technical grid, the one texture on the page that is drawn from structure rather
     than sprinkled on, and it only belongs in the section about the engine */
  repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 56px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 56px),
  var(--bg-3)}
.sec--dark .sub,.sec--dark .pts li{color:#9dbdc7}
.sec--tight{padding-top:clamp(40px,5vw,72px)}
.kick{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cy);margin-bottom:14px}
.kick--am{color:var(--am-3)}
.sec--dark .kick{color:var(--am-2)}
h1{font-size:clamp(46px,8.4vw,102px);line-height:1.03;font-weight:700;letter-spacing:-.036em}
h2{font-size:clamp(33px,5vw,60px);line-height:1.07;font-weight:700;letter-spacing:-.032em;
  max-width:17ch;margin-inline:auto}
h3{font-size:clamp(21px,2.3vw,28px);line-height:1.18;font-weight:600;letter-spacing:-.024em}
/* Cyan and amber are near-complementary, so a gradient that runs from one to the other goes
   olive through the middle. The gradient stays inside the droplet's own family; the ring's
   amber earns its place as a solid, somewhere else. */
.grad{background:linear-gradient(96deg,#3ddcf2 0%,var(--cy-hot) 30%,#0cbadd 64%,var(--cy) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin-top:22px;font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--ink-2);
  max-width:34em;margin-inline:auto}
.links{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:center;margin-top:28px}
.lnk{color:var(--cy);font-size:17px;display:inline-flex;align-items:center;gap:5px}
.lnk--am{color:var(--am-3)}
.sec--dark .lnk{color:var(--cy-3)}
.lnk:hover{text-decoration:underline}
.lnk::after{content:"\203A";font-size:19px;line-height:1}
.cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px}

/* ── ECHELON'S CHAPTER: copy one side, the product carried off the other ── */
.ch{padding:clamp(80px,10vw,150px) 0;overflow:hidden}
.ch__g{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(34px,5vw,80px);align-items:center;text-align:left}
.ch--flip .ch__g{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.ch--flip .ch__copy{order:2}
.ch--flip .ch__shot{order:1}
.ch h2{max-width:14ch;margin-inline:0}
.ch .sub{margin-inline:0;max-width:40ch;font-size:18px}
.ch .links{justify-content:flex-start}
.pts{list-style:none;margin-top:24px;display:grid;gap:13px;max-width:44ch}
.pts li{display:flex;gap:12px;font-size:16.5px;line-height:1.5;color:var(--ink-2)}
.pts li::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;margin-top:9px;
  background:var(--cy-2)}
.pts li:nth-child(2)::before{background:var(--am-2)}
/* the window runs off the edge of the page, which is the Echelon move */
.ch__shot{position:relative;margin-right:calc(-1 * var(--gut) - 5vw)}
.ch--flip .ch__shot{margin-right:0;margin-left:calc(-1 * var(--gut) - 5vw)}

/* ── the product window ── */
.shot{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--card);
  box-shadow:0 2px 6px var(--shadow-1),0 34px 80px -32px var(--shadow-2)}
.sec--dark .shot,.ch--dark .shot{box-shadow:0 34px 100px -30px rgba(0,0,0,.85)}
.shot__vp{overflow:hidden}

.chrome{background:linear-gradient(180deg,var(--chrome-a),var(--chrome-b))}
.chrome__t{display:flex;align-items:flex-end;gap:2px;padding:8px 11px 0;overflow:hidden}
.tl{display:flex;gap:6px;padding:0 12px 9px 3px}
.tl i{width:11px;height:11px;border-radius:50%}
.tl i:nth-child(1){background:#ff5f57}.tl i:nth-child(2){background:#febc2e}.tl i:nth-child(3){background:#28c840}
.tab{display:flex;align-items:center;gap:8px;max-width:230px;min-width:0;flex:0 1 auto;padding:8px 11px;
  border-radius:9px 9px 0 0;font-size:12px;font-weight:500;color:var(--chrome-ink-2);white-space:nowrap;overflow:hidden}
.tab.on{background:var(--tab-on);color:var(--ink)}
.tab img{width:14px;height:14px;flex:none}
.tab b{margin-left:6px;font-weight:400;font-size:14px;opacity:.38}
.plus{padding:7px 10px 9px;font-size:15px;color:var(--chrome-ink-3)}
.chrome__b{display:flex;align-items:center;gap:10px;padding:8px 13px;background:var(--chrome-bar);
  border-bottom:1px solid var(--hair-2)}
.chrome__b svg{width:15px;height:15px;flex:none;color:var(--chrome-ink-3)}
.url{flex:1;display:flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:15px;
  background:var(--chrome-url);font-size:12px;color:var(--chrome-ink)}
.url svg{width:11px;height:11px;color:var(--chrome-ink-2)}
.url__p{color:var(--chrome-ink-3)}

/* the hero reveal, same field as the rest of the white sections so nothing seams against it */
.stage{height:260vh;position:relative;
  background:radial-gradient(920px circle at 90% -12%,rgba(var(--cy-rgb),.075),transparent 58%),var(--bg)}
.stage__pin{position:sticky;top:48px;height:calc(100svh - 48px);display:grid;place-items:center;overflow:hidden}
/* FLOATY, NOT JUST BIGGER. A single scale from .74 to 1 reads as a zoom, which is
   mechanical, not Apple. Two things fix that:
     1. The arrival is on three axes, not one: it tilts back and rises into place as it
        scales, so it settles rather than just inflates, and the shadow grows and softens
        with it, which is what actually sells "lifting into view."
     2. Once it has arrived it never goes fully still. A slow, small, continuous bob lives
        on its OWN wrapper, independent of the scroll-driven transform below, so the two
        motions compose without either having to know about the other.
   Both resolve to nothing at rest: the settled state is flat, scale(1), which is why this
   does not reintroduce the softness a persisted 3D tilt caused on the product screens
   elsewhere on the page. That lesson was about a ROTATION YOU READ TEXT THROUGH; this one
   resolves to flat before you linger on it. */
/* The pin centres its child, which makes that child shrink to fit its contents. That was
   invisible while the content was a 1600px image carrying its own intrinsic width; a drawn
   screen has none, so it collapsed to whatever the text wanted. The width is declared here,
   where it is definite, and the frame below simply fills it. */
.stage__float{width:min(1180px,100% - var(--gut)*2);animation:stFloat 5.5s ease-in-out infinite}
@keyframes stFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.stage__in{width:100%;
  transform:perspective(1800px)
    translateY(calc(46px - 46px * var(--p,0)))
    rotateX(calc(6deg - 6deg * var(--p,0)))
    scale(calc(.8 + .2 * var(--p,0)));
  transform-origin:50% 72%;
  border-radius:calc(46px - 18px * var(--p,0));overflow:hidden;
  box-shadow:0 calc(18px + 30px * var(--p,0)) calc(40px + 66px * var(--p,0))
    calc(-30px - 4px * var(--p,0)) rgba(6,112,140,.4)}
.stage__vp{overflow:hidden}


/* ── numbers ── */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,4vw,56px);
  margin-top:clamp(50px,6vw,84px)}
/* All four sit on ONE line, so the captions below them start at the same height. "Your name"
   was the only entry wide enough to wrap, which pushed its caption down and broke the row.
   The word entries take a smaller size rather than the numerals taking a bigger column. */
/* Same box height for all four and the text sat on the bottom of it, so a smaller word
   entry still shares the numerals' baseline and every caption starts on the same line. */
.num b{display:flex;align-items:flex-end;justify-content:center;
  height:clamp(38px,4.6vw,60px);font-size:clamp(38px,4.6vw,60px);line-height:1;
  font-weight:700;letter-spacing:-.042em;white-space:nowrap}
.num--w b{font-size:clamp(26px,3.05vw,42px);letter-spacing:-.032em}
.num--am b{color:var(--am)}
.num--cy b{color:var(--cy)}
.num--dp b{color:var(--cy-deep)}
.num span{display:block;margin-top:14px;font-size:15px;line-height:1.45;color:var(--ink-2);
  max-width:21ch;margin-inline:auto}

/* ── tiles ── */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(44px,5vw,72px);text-align:left}
.tile{position:relative;overflow:hidden;background:var(--card);border-radius:var(--r);
  padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;min-height:240px;
  transition:transform .3s cubic-bezier(.25,.8,.3,1),box-shadow .3s;
  box-shadow:0 1px 3px var(--shadow-1)}
.tile:hover{transform:translateY(-4px);box-shadow:0 14px 34px -14px rgba(8,80,100,.3)}
/* the top edge lights up on arrival, in whichever of the two colors that tile's own number
   already wears, so the accent is an answer to something already on the card rather than a
   new idea */
.tile::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--cy-2),var(--cy));transform:scaleX(.42);transform-origin:0 0;
  opacity:0;transition:opacity .3s,transform .45s cubic-bezier(.25,.8,.3,1)}
.tile:nth-child(3n+2)::before{background:linear-gradient(90deg,var(--am-2),var(--am))}
.tile:hover::before{opacity:1;transform:scaleX(1)}
.tile__n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:11px;font-size:13px;font-weight:700;margin-bottom:16px;
  background:var(--cy);color:#fff}
.tile p{margin-top:12px;font-size:15.5px;line-height:1.48;color:var(--ink-2)}
.tile__f{margin-top:auto;padding-top:18px;font-size:13px;color:var(--ink-3);letter-spacing:.01em}

/* ── the lead map, drawn from the same state-derived mask as the ocean study ── */
.map{position:relative}
.map svg{width:100%;height:auto;display:block;overflow:visible}
.map .dot{fill:var(--a-ink);opacity:.14}
.sec--dark .map .dot{opacity:.2}
.map .pin{stroke:none}
.map .halo{fill:none;stroke-width:1.5;opacity:.45}
/* The stages are a progression IN THE BRAND, not four arbitrary hues: cold and
   untouched, then two steps of the mark's own cyan as the lead warms, then amber when
   it is ready to close. The slate/violet/blue set this replaced read as somebody
   else's palette, and violet in particular is another brand in this portfolio. */
.map .st-new{fill:#8aa4b0} .map .halo.st-new{stroke:#b3c6ce}
.map .st-contacted{fill:#0596b8} .map .halo.st-contacted{stroke:#3bb6d2}
.map .st-working{fill:#22d3ee} .map .halo.st-working{stroke:#7fe6f5}
.map .st-hot{fill:var(--am)} .map .halo.st-hot{stroke:var(--am-2)}
.mapkey{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:10px;font-size:11px;color:var(--a-mut)}
.mapkey span{display:flex;align-items:center;gap:6px}
.mapkey i{width:7px;height:7px;border-radius:50%}

/* ── the tool grid, sold by name ── */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,18px);
  margin-top:clamp(40px,4.6vw,66px);text-align:left}
.tool{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);
  padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.25,.8,.3,1),border-color .3s}
.sec--dark .tool{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.tool:hover{transform:translateY(-3px);border-color:rgba(8,145,178,.45)}
.tool__i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:14px;
  background:var(--cy);color:#fff;flex:none}
.sec--dark .tool__i{background:var(--cy-2);color:#04222e}
.tool__i svg{width:18px;height:18px}
.tool h3{font-size:17px;font-weight:600;letter-spacing:-.02em}
.tool p{margin-top:8px;font-size:14.5px;line-height:1.46;color:var(--ink-2)}

/* the literal module list: breadth stated as a fact, not as a number */
.mods{margin-top:clamp(34px,4vw,54px);display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.mods span{font-size:12.5px;color:var(--ink-2);border:1px solid var(--hair);border-radius:999px;
  padding:6px 13px;background:var(--card)}
.sec--dark .mods span{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.mods b{color:var(--cy);font-weight:600}

/* ── two ways to connect ── */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(40px,4.6vw,66px);text-align:left}
.way{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,40px);display:flex;flex-direction:column}
.way--b{background:var(--bg-3);color:#eaf6fa;border-color:transparent}
.way__k{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cy);margin-bottom:14px}
.way--b .way__k{color:var(--am-2)}
.way h3{font-size:clamp(21px,2.4vw,29px);font-weight:700;letter-spacing:-.028em;max-width:17ch}
.way > p{margin-top:12px;font-size:16px;line-height:1.5;color:var(--ink-2);max-width:40ch}
.way--b > p{color:#9dbdc7}
.way ul{list-style:none;margin-top:20px;display:grid;gap:11px}
.way li{display:flex;gap:11px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.way--b li{color:#bcd6de}
.way li svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--cy)}
.way--b li svg{color:var(--cy-3)}
.way__f{margin-top:auto;padding-top:22px;font-size:13px;color:var(--ink-3)}
.way--b .way__f{color:#7f9ba5}
.way__f b{color:var(--cy-2);font-weight:600}

/* ── integrations ── */
.conn{margin-top:clamp(40px,4.6vw,66px);display:grid;gap:clamp(12px,1.5vw,18px);text-align:left}
.conn__g{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);
  padding:clamp(20px,2.4vw,30px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);
  gap:clamp(16px,2.4vw,34px);align-items:start}
.sec--dark .conn__g{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.conn__t{font-size:16.5px;font-weight:600;letter-spacing:-.02em}
.conn__d{margin-top:7px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.conn__l{display:flex;flex-wrap:wrap;gap:7px;align-content:start}
.conn__l span{font-size:13.5px;font-weight:500;padding:8px 14px;border-radius:10px;
  background:var(--bg-2);border:1px solid var(--hair);white-space:nowrap}
.sec--dark .conn__l span{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.conn__l span.is-own{background:rgba(var(--cy-rgb),.12);border-color:rgba(var(--cy-rgb),.4);color:var(--cy)}
.sec--dark .conn__l span.is-own{color:var(--cy-2)}

@media(max-width:940px){
  .tools{grid-template-columns:1fr}
  .ways{grid-template-columns:1fr}
  .conn__g{grid-template-columns:1fr;gap:14px}
}

/* ── THE PRODUCT SCREENS ─────────────────────────────────────────────────────────
   Drawn, not photographed. Three rounds of trying to make a 1600px PNG of a dense
   data app look good at display size failed for a reason that was never going to go
   away: it is a raster, the source is 1x, and every fix traded sharpness against how
   much of the app you could see. So the screens are rebuilt in markup, from the real
   app's own numbers and labels.

   What that buys: they are sharp at any size on any display, the type can be set at a
   density that is actually legible in a browser window rather than inherited from a
   screenshot, and a dark section renders a genuinely dark app rather than an inverted
   picture of a light one. The Themes deck already proved the approach on this page. */
.app{--a-bg:#f2f7f9;--a-panel:#fff;--a-ink:#0f2937;--a-mut:#5f7b88;--a-line:#e2ecf0;
  --a-soft:#f7fbfc;--a-ac:#0596b8;--a-good:#16a34a;
  background:var(--a-bg);color:var(--a-ink);font-size:13px;line-height:1.45;text-align:left}
.sec--dark .app,.app--dark{--a-bg:#0a1a22;--a-panel:#102832;--a-ink:#eaf6fa;--a-mut:#8fa9b3;
  --a-line:#1d3946;--a-soft:#0d222c;--a-ac:#22d3ee;--a-good:#34d399}

.app__bar{display:flex;align-items:center;gap:12px;padding:11px 16px;background:var(--a-panel);
  border-bottom:1px solid var(--a-line)}
.app__bar .bl{width:15px;height:11px;flex:none;display:grid;gap:2.5px}
.app__bar .bl i{height:1.6px;background:var(--a-mut);border-radius:2px;display:block}
.app__srch{flex:1;max-width:330px;display:flex;align-items:center;gap:8px;height:28px;padding:0 11px;
  border:1px solid var(--a-line);border-radius:8px;color:var(--a-mut);font-size:12px;background:var(--a-bg)}
.app__srch svg{width:12px;height:12px;flex:none}
.app__seg{margin-left:auto;display:flex;padding:2.5px;background:var(--a-bg);border-radius:8px;
  border:1px solid var(--a-line);font-size:11.5px;font-weight:500}
.app__seg span{padding:4px 10px;border-radius:6px;color:var(--a-mut)}
.app__seg span.on{background:var(--a-panel);color:var(--a-ink);box-shadow:0 1px 2px rgba(0,0,0,.07)}
.app__av{width:24px;height:24px;border-radius:50%;background:var(--a-ac);color:#fff;flex:none;
  display:grid;place-items:center;font-size:10px;font-weight:700}

.app__body{padding:clamp(16px,2vw,24px)}
.app__head{display:flex;align-items:flex-end;gap:14px;margin-bottom:clamp(14px,1.8vw,20px)}
.app__t{font-size:clamp(19px,2.1vw,25px);font-weight:700;letter-spacing:-.025em;line-height:1.1}
.app__s{margin-top:3px;font-size:12px;color:var(--a-mut)}
.app__act{margin-left:auto;display:flex;gap:7px;flex:none}
.btn-s{font-size:11.5px;font-weight:500;padding:6px 11px;border-radius:7px;border:1px solid var(--a-line);
  color:var(--a-ink);background:var(--a-panel);white-space:nowrap}
.btn-s--p{background:#0f2937;border-color:#0f2937;color:#fff}
.app--dark .btn-s--p,.sec--dark .app .btn-s--p{background:var(--a-ac);border-color:var(--a-ac);color:#04202a}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.kpi{background:var(--a-panel);border:1px solid var(--a-line);border-radius:11px;padding:12px 13px;
  position:relative;overflow:hidden}
.kpi span{font-size:11px;color:var(--a-mut);display:block}
.kpi b{display:block;margin-top:7px;font-size:clamp(17px,1.9vw,22px);font-weight:700;letter-spacing:-.025em}
.kpi em{display:block;margin-top:5px;font-style:normal;font-size:11px;font-weight:600;color:var(--a-good)}
.kpi em i{font-style:normal;font-weight:400;color:var(--a-mut)}
.kpi__spark{position:absolute;left:0;right:0;bottom:0;height:26px;opacity:.5}
.kpi__spark svg{width:100%;height:100%}
.kpi__spark path{fill:none;stroke:var(--a-ac);stroke-width:2}

.panel{background:var(--a-panel);border:1px solid var(--a-line);border-radius:12px;
  padding:13px 15px;margin-top:10px}
.panel__h{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;margin-bottom:11px}
.panel__h i{width:6px;height:6px;border-radius:50%;background:var(--a-ac);flex:none}
.panel__h span{margin-left:auto;font-size:10.5px;font-weight:400;color:var(--a-mut)}
.quad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.quad div{background:var(--a-bg);border-radius:9px;padding:10px 11px}
.quad span{font-size:10.5px;color:var(--a-mut);display:block}
.quad b{display:block;margin-top:5px;font-size:15px;font-weight:700;letter-spacing:-.02em}
.quad b.g{color:var(--a-good)}
.note{margin-top:9px;background:var(--a-ac);color:#fff;border-radius:8px;padding:8px 12px;font-size:11.5px}
.app--dark .note,.sec--dark .app .note{color:#04202a}
.rows{margin-top:10px}
.rows__t{font-size:10.5px;color:var(--a-mut);margin-bottom:5px}
.rows div{display:flex;align-items:center;padding:5.5px 0;font-size:12px;border-bottom:1px solid var(--a-line)}
.rows div:last-child{border-bottom:0}
.rows div b{margin-left:auto;font-weight:600;color:var(--a-good)}
.pw{text-align:right;font-size:10px;color:var(--a-mut);margin-top:7px}
.pw b{color:var(--a-ac);font-weight:600}

.cols2{display:grid;grid-template-columns:1.45fr 1fr;gap:10px;margin-top:10px}
.chart{height:clamp(92px,11vw,128px);margin-top:8px}
.chart svg{width:100%;height:100%;overflow:visible}
.chart .ln{fill:none;stroke:var(--a-ac);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.chart .ar{fill:var(--a-ac);opacity:.12}
.chart .dl{fill:none;stroke:var(--a-mut);stroke-width:1.8;stroke-dasharray:4 4}
.chart .gl{stroke:var(--a-line);stroke-width:1}
.chart .bar{fill:var(--a-ac)}
.chart .bar2{fill:var(--a-ink);opacity:.75}
.axis{display:flex;justify-content:space-between;font-size:9.5px;color:var(--a-mut);margin-top:5px}

.bars{display:grid;gap:8px;margin-top:9px}
.bars div{font-size:11.5px}
.bars .lb{display:flex;justify-content:space-between;margin-bottom:4px}
.bars .lb span{color:var(--a-mut)}
.bars .lb b{font-weight:600}
.bars .tr{height:5px;border-radius:3px;background:var(--a-line);overflow:hidden}
.bars .tr i{display:block;height:100%;border-radius:3px;background:var(--a-ac)}

table.tb{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:4px}
table.tb th{text-align:left;font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--a-mut);padding:0 0 7px;border-bottom:1px solid var(--a-line)}
table.tb td{padding:8px 0;border-bottom:1px solid var(--a-line);color:var(--a-mut)}
table.tb td b{color:var(--a-ink);font-weight:600;display:block}
table.tb td small{font-size:10px;color:var(--a-mut)}
table.tb .r{text-align:right;color:var(--a-ink);font-weight:600}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;
  padding:3px 8px;border-radius:999px;background:var(--a-bg);border:1px solid var(--a-line);color:var(--a-mut)}
.chip i{width:5px;height:5px;border-radius:50%;background:var(--a-ac)}
.chip--ok{color:var(--a-good)} .chip--ok i{background:var(--a-good)}
.mid{width:26px;height:26px;border-radius:7px;flex:none;display:grid;place-items:center;
  font-size:9.5px;font-weight:700;color:#fff;background:var(--a-ac);margin-right:9px}
.mrow{display:flex;align-items:center}

@media(max-width:940px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .quad{grid-template-columns:repeat(2,1fr)}
  .cols2{grid-template-columns:1fr}
  .app{font-size:12px}
}

/* the real app has a rail; without it these read as a dashboard, not as a product */
.app{display:grid;grid-template-columns:auto 1fr}
/* Wide enough for the longest real label, "Payments Engine", at the sub indent. */
.app__rail{width:clamp(148px,15%,178px);background:var(--a-rail);border-right:1px solid var(--a-line);
  padding:12px 9px;display:flex;flex-direction:column;gap:1px;min-width:0}
.app{--a-rail:#0b2530}
.sec--dark .app,.app--dark{--a-rail:#071820}
.app__brand{display:flex;align-items:center;gap:7px;padding:5px 7px 13px;
  font-family:var(--logo);font-weight:800;font-size:13.5px;letter-spacing:-.02em;color:#eaf6fa}
.app__brand img{width:17px;height:17px}
/* Labels truncate with an ellipsis rather than being cut mid-glyph. A hard cut reads as a
   rendering fault ("Payments Engin"); an ellipsis reads as a narrow sidebar, which is what a
   real one does. */
.app__nav{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;
  font-size:11.5px;font-weight:500;color:#8fa9b3;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.app__nav i{width:5px;height:5px;border-radius:2px;background:currentColor;opacity:.55;flex:none}
.app__nav.on{background:rgba(var(--cy-rgb),.16);color:#eaf6fa}
.app__nav.on i{background:var(--cy-2);opacity:1}
/* NOT .sub. That is the page's own section-paragraph class, which carries margin-top:22px,
   and it was landing on these three nav rows: the sidebar had a 22px hole above every
   sub item while the rest sat 1px apart. A generic word makes a bad modifier. */
.app__nav--sub{padding-left:17px;font-size:11px;margin-top:0}
.app__foot{margin-top:auto;padding:9px 8px 2px;border-top:1px solid rgba(255,255,255,.08)}
.app__foot b{display:block;font-family:var(--logo);font-weight:800;font-size:11.5px;color:#eaf6fa}
.app__foot span{font-size:10px;color:#6d8792}
.app__main{min-width:0}
.app__org{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--a-mut);
  border:1px solid var(--a-line);border-radius:7px;padding:5px 9px;white-space:nowrap}
.app__ic{width:15px;height:15px;color:var(--a-mut);flex:none}
@media(max-width:940px){ .app__rail{display:none} .app{grid-template-columns:1fr} }

/* ── equipment ── */
.kit{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:4px}
.kit__c{background:var(--a-panel);border:1px solid var(--a-line);border-radius:11px;padding:13px}
.kit__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.kit__h i{width:26px;height:26px;border-radius:8px;background:rgba(var(--cy-rgb),.14);color:var(--a-ac);
  display:grid;place-items:center}
.kit__h i svg{width:14px;height:14px}
.kit__c b{display:block;font-size:12.5px;font-weight:600}
.kit__c p{font-size:10.5px;color:var(--a-mut);margin-top:3px;line-height:1.35}
.kit__f{display:flex;align-items:flex-end;justify-content:space-between;margin-top:10px}
.kit__p{font-size:15px;font-weight:700;letter-spacing:-.02em}
.kit__r{font-size:10px;color:var(--a-mut);display:block;margin-top:2px}

/* ── splits ── */
.sp{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:4px}
.sp__c{background:var(--a-panel);border:1px solid var(--a-line);border-radius:11px;padding:13px}
.sp__t{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;margin-bottom:9px}
.sp__t span{margin-left:auto}
.sp__b{height:7px;border-radius:4px;overflow:hidden;display:flex;margin-bottom:8px}
.sp__b i{display:block;height:100%}
.sp__l{display:flex;flex-wrap:wrap;gap:5px 12px;font-size:10.5px;color:var(--a-mut)}
.sp__l span{display:flex;align-items:center;gap:5px}
.sp__l em{width:6px;height:6px;border-radius:50%;font-style:normal}

/* ── deals board ── */
.brd{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:4px}
.brd__c{background:var(--a-bg);border:1px solid var(--a-line);border-radius:10px;padding:9px;min-width:0}
.brd__h{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;margin-bottom:8px}
.brd__h i{width:6px;height:6px;border-radius:50%;flex:none}
.brd__h b{margin-left:auto;color:var(--a-mut);font-weight:500}
.brd__s{font-size:9.5px;color:var(--a-mut);margin:-5px 0 8px}
.brd__d{background:var(--a-panel);border:1px solid var(--a-line);border-radius:8px;padding:8px;margin-bottom:6px}
.brd__d b{display:block;font-size:10.5px;font-weight:600;line-height:1.3}
.brd__d span{display:block;font-size:11px;font-weight:700;margin-top:4px;letter-spacing:-.02em}
.brd__d em{display:block;font-style:normal;font-size:9.5px;color:var(--a-mut);margin-top:3px}

/* ── THEMES: Echelon's deck mechanism, ported. Cards STACK, they do not morph into
   each other: each one is a fixed rect (position:absolute;inset:0) offset by --x (a
   percentage, 106% is fully off to the right) and, once buried under a later card,
   scaled down a hair and faded a hair by --s/opacity. All three are set from nothing
   but the scroll fraction, so reversing the scroll reverses the stack exactly and
   there is no separate state to fall out of sync. */
.th__track{position:relative}
.th__stage{position:sticky;top:48px;min-height:calc(100svh - 48px);display:flex;align-items:center;padding:44px 0}
.th__g{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.05fr);
  gap:clamp(30px,4.4vw,64px);align-items:center;text-align:left}
.th__h{font-size:clamp(25px,3vw,36px);font-weight:700;letter-spacing:-.03em;min-height:2.3em}
.th__p{margin-top:12px;font-size:16.5px;line-height:1.5;color:var(--ink-2);max-width:38ch;min-height:3.2em}
.th__ticks{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.th__tick{display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:600;color:var(--ink-3)}
.th__tick i{width:24px;height:3px;border-radius:2px;background:var(--hair);transition:background .3s,width .3s}
.th__tick.on{color:var(--ink)}
.th__tick.on i{background:var(--tick,var(--cy));width:40px}

.th__viz{position:relative;min-width:0}
/* A card waiting its turn sits at --x:106%, off to the right of its OWN width, which
   escapes .th__deck's box with nothing to stop it — exactly the kind of transform
   overflow body's own overflow-x:hidden does not reliably catch. The deck clips its
   own cards, the same way .shot__vp clips the product screenshots elsewhere. */
.th__deck{position:relative;height:clamp(360px,40vw,460px);overflow:hidden;border-radius:var(--r-lg)}
.tcard{position:absolute;inset:0;border-radius:var(--r-lg);overflow:hidden;
  will-change:transform;transform:translate3d(var(--x,0),0,0) scale(var(--s,1));
  box-shadow:0 30px 70px -30px rgba(6,112,140,.4)}

/* the synthetic dashboard every card shares, themed entirely by its own five custom
   properties so the SAME markup produces five honestly different-looking products */
.tcard--aq {--t-bg:#eef7fa;--t-card:#fff;   --t-ink:#0b2430;--t-mut:#5c7a84;--t-line:#dbeaf0}
.tcard--mid{--t-bg:#0a2029;--t-card:#0f2b35;--t-ink:#eaf6fa;--t-mut:#7fa5b0;--t-line:#173947}
.tcard--sun{--t-bg:#fff8f2;--t-card:#fff;   --t-ink:#2a1a0c;--t-mut:#8a7361;--t-line:#f0e0cf}
.tcard--vio{--t-bg:#f8f6ff;--t-card:#fff;   --t-ink:#211a33;--t-mut:#7a71a0;--t-line:#e6e1f7}
.tcard--for{--t-bg:#f3faf4;--t-card:#fff;   --t-ink:#0f2b18;--t-mut:#5f8a6c;--t-line:#dcefe1}
.tcard--aq {--t-ac:#0596b8;--t-ac2:#22d3ee}
.tcard--mid{--t-ac:#22d3ee;--t-ac2:#67e8f9}
.tcard--sun{--t-ac:#ea580c;--t-ac2:#fb923c}
.tcard--vio{--t-ac:#7c3aed;--t-ac2:#a78bfa}
.tcard--for{--t-ac:#16a34a;--t-ac2:#4ade80}

.tdash{width:100%;height:100%;background:var(--t-bg);color:var(--t-ink);
  padding:clamp(20px,2.8vw,32px);display:flex;flex-direction:column}
.tdash__top{display:flex;align-items:center;gap:9px;margin-bottom:clamp(20px,3vw,30px)}
.tdash__mk{width:22px;height:22px}
.tdash__mono{width:22px;height:22px;border-radius:7px;background:var(--t-ac);color:#fff;
  display:grid;place-items:center;font-family:var(--logo);font-weight:800;font-size:12px}
.tdash__nm{font-family:var(--logo);font-weight:800;font-size:15px;letter-spacing:-.02em}
.tdash__pl{margin-left:auto;font-size:11px;font-weight:600;color:var(--t-mut);
  border:1px solid var(--t-line);border-radius:999px;padding:4px 10px}
.tdash__h{font-size:clamp(19px,2.3vw,25px);font-weight:700;letter-spacing:-.025em}
.tdash__sub{margin-top:4px;font-size:13px;color:var(--t-mut)}
.tdash__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:clamp(18px,2.4vw,26px)}
.tdash__kpi{background:var(--t-card);border:1px solid var(--t-line);border-radius:12px;padding:14px}
.tdash__kpi span{display:block;font-size:11px;color:var(--t-mut)}
.tdash__kpi b{display:block;margin-top:8px;font-size:clamp(16px,1.8vw,20px);font-weight:700;letter-spacing:-.02em}
.tdash__kpi i{display:block;margin-top:6px;font-style:normal;font-size:11px;font-weight:600;color:#16a34a}
.tdash__chart{margin-top:auto;padding-top:clamp(16px,2vw,22px)}
.tdash__chart svg{width:100%;height:clamp(48px,6.6vw,82px);overflow:visible}
.tdash__chart polyline{fill:none;stroke:var(--t-ac);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:940px){
  /* Pinning fights a phone's own scroll, and a section that goes on driving a scroll
     hijack under CSS that has already restacked the cards is the exact bug Echelon's
     own deck.js was written to stop repeating: a pinned track with only one card
     visible and the rest parked off to the side. So JS is told the stack is static
     (below, via the same width match) and stops touching --x/--s entirely, and CSS
     alone lays every card out, whole, in a column. */
  .th__stage{position:static;min-height:0;padding:0}
  .th__g{grid-template-columns:1fr}
  /* The generic "Same platform. Your own look." heading exists to caption a card that
     is currently active; stacked, every card is visible at once and captions itself
     (its own name and mark are right there), so repeating the section's own h2 right
     underneath it would just look like a mistake. */
  .th__copy{display:contents}
  .th__h,.th__p{display:none}
  .th__deck{position:static;height:auto;display:flex;flex-direction:column;gap:16px}
  .tcard{position:relative;inset:auto;height:360px;transform:none!important;opacity:1!important}
  .th__ticks{display:none}
}

/* ── COMPARE ─────────────────────────────────────────────────────────────────────
   The claims in the table are about the CATEGORY, not about one company's current
   feature list, which is why the column is headed "A general-purpose CRM" even though
   the copy above it names Salesforce. Naming the category leader is what makes the
   point land; pinning per-row feature claims to a named product that ships changes
   every quarter is how a comparison page ends up wrong. No competitor pricing appears
   anywhere here, because I have no verified figure for one. */
/* ════════════════════════════════════════════════════════════════════════════
   THE COMPARISON
   Three columns, and the ONE that matters is lifted out of the page as a single
   continuous card running the whole height of the table. That is what carries the
   answer, not a colour on each row.

   NO RED AND GREEN, ruled 2026-09-24; do not reintroduce. A scorecard palette turns this into a vendor
   bake-off, it puts the meaning in colour alone, and a page confident about its own
   product does not need to paint the other one red. The win is carried by weight
   instead: our column is on white, in ink, with a cyan tick; theirs is on the page's
   own ground, a step down in contrast, with a dash rather than a cross. A dash reads
   as "not a thing it does", which is the honest claim. A cross reads as "fails",
   which is not.

   The card is built from the CELLS, not a pseudo-element behind the column, because
   the columns are fr-based and nothing can position a backdrop over one of them
   reliably. So the row carries no padding and no rule; the cells do, and the us cells
   share one background that meets edge to edge down the stack.
   ════════════════════════════════════════════════════════════════════════════ */
.cmp{margin-top:clamp(44px,5vw,72px);text-align:left;
  --cmp-cols:minmax(0,1fr) minmax(0,1.12fr) minmax(0,1.12fr)}
.cmp__r{display:grid;grid-template-columns:var(--cmp-cols);
  gap:clamp(10px,1.4vw,22px);align-items:stretch}
.cmp__k,.cmp__v,.cmp__h{padding:clamp(15px,1.7vw,20px) clamp(14px,1.5vw,20px)}
/* the hairline is on the cells that are NOT the lifted column, so it never crosses it */
.cmp__r + .cmp__r .cmp__k,
.cmp__r + .cmp__r .cmp__v--them{border-top:1px solid var(--hair)}

.cmp__h{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-3);
  align-self:end}
.cmp__h b{display:block;font-size:clamp(17px,1.7vw,20px);font-weight:700;
  letter-spacing:-.022em;color:var(--ink);margin-bottom:3px}
.cmp__h--us{background:var(--card);border-radius:var(--r) var(--r) 0 0;
  box-shadow:0 -1px 0 rgba(var(--cy-rgb),.5) inset, 0 -3px 0 var(--cy) inset}
.cmp__h--us b{color:var(--cy)}

.cmp__k{font-size:15px;font-weight:600;color:var(--ink);align-self:center}
.cmp__v{font-size:14.5px;line-height:1.45;display:flex;gap:10px;align-items:flex-start}
.cmp__v svg{width:17px;height:17px;flex:none;margin-top:2px}

/* ours: on the card, full contrast */
.cmp__v--us{background:var(--card);color:var(--ink)}
.cmp__v--us svg{color:var(--cy)}
.cmp__r:last-child .cmp__v--us{border-radius:0 0 var(--r) var(--r)}

/* theirs: a step back, on the page's own ground */
.cmp__v--them{color:var(--ink-3)}
.cmp__v--them svg{color:var(--ink-3);opacity:.6}

/* One shadow for the whole lifted column rather than one per cell, which would stack
   at every seam and draw the rows as separate cards. */
.cmp{position:relative}
.cmp__lift{position:absolute;top:0;bottom:0;pointer-events:none;z-index:0;
  border-radius:var(--r);box-shadow:0 26px 60px -30px var(--shadow-2)}
.cmp__r{position:relative;z-index:1}

/* the experience note, set as a quiet aside rather than a badge */
.cmp__who{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:auto 1fr;
  gap:clamp(18px,2.4vw,30px);align-items:center;text-align:left;
  background:var(--bg-2);border-radius:var(--r);padding:clamp(24px,3vw,36px)}
/* Solid, and cyan. It was a translucent amber wash, ruled out 2026-09-24 on both counts:
   a badge that lets the page through behind it reads as unfinished, and orange is not this
   product's colour. Same rule applied to the other icon badges below. */
.cmp__who i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:var(--cy);color:#fff}
.cmp__who svg{width:23px;height:23px}
.cmp__who p{font-size:16.5px;line-height:1.5;color:var(--ink-2)}
.cmp__who b{color:var(--ink)}

/* Apple's floating pill: a CTA that sits over the section rather than in the column */
.floatcta{display:inline-flex;align-items:center;gap:14px;margin-top:clamp(34px,4vw,52px);
  background:var(--card);border:1px solid var(--hair);border-radius:980px;
  padding:10px 10px 10px 26px;font-size:17px;font-weight:500;
  box-shadow:0 10px 34px -14px var(--shadow-2);transition:transform .2s,box-shadow .2s}
.floatcta:hover{transform:translateY(-2px);box-shadow:0 16px 40px -14px var(--shadow-2)}
.floatcta i{width:32px;height:32px;border-radius:50%;background:var(--cy);color:#fff;
  display:grid;place-items:center;font-size:20px;font-weight:400;line-height:1}

/* ── SWITCHING ── */
.switch{background:var(--bg-2);border-radius:var(--r-lg);padding:clamp(34px,5vw,64px);
  margin-top:clamp(44px,5vw,72px);text-align:center}
.switch h3{font-size:clamp(25px,3.2vw,40px);font-weight:700;letter-spacing:-.03em;max-width:18ch;margin-inline:auto}
.switch .sub{font-size:17px;margin-top:16px}
/* ── the move, as a sequence rather than three loose cards ──
   Three equal boxes side by side say nothing about order; these are numbered nodes on
   one line, so the eye reads 1 to 2 to 3 before it reads a word. The line DRAWS as the
   block arrives (--sf, set on the scroll event like everything else on this page) and
   each node lands as the line reaches it, which is the whole reason to have a line.
   Under 760px it becomes a vertical spine, because a horizontal rail on a phone is
   either three lines of nothing or a scroller. */
.steps{position:relative;margin-top:clamp(36px,4.4vw,58px);text-align:left;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,30px)}
/* The rail runs from the FIRST node's centre to the LAST node's centre, and those are
   measured (--railL/--railR, set in aq.js). They cannot be written here: the nodes sit at
   each column's left edge, not at its centre, so the percentage guess that was here ran the
   line out past the last node on one side and short of the first on the other.
   z-index matters too. ::after is generated after the content, so without these it painted
   OVER the circles and struck through the unlit ones. */
.steps::before,.steps::after{content:"";position:absolute;
  left:var(--railL,0px);right:var(--railR,0px);top:21px;height:2px;border-radius:2px;z-index:0}
.steps::before{background:var(--hair)}
.steps::after{background:linear-gradient(90deg,var(--cy-2),var(--cy));
  transform:scaleX(var(--sf,0));transform-origin:left center}
.step{position:relative;z-index:1;padding-top:56px}
.step::before{content:attr(data-n);position:absolute;top:0;left:0;
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--logo);font-weight:800;font-size:17px;
  background:var(--card);color:var(--ink-3);border:2px solid var(--hair);
  transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s ease}
.step[data-on]::before{background:var(--cy);color:#fff;border-color:var(--cy);
  transform:scale(1.06)}
.step b{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cy);margin-bottom:9px}
.step p{font-size:15px;line-height:1.5;color:var(--ink-2)}
/* 940, matching where an existing rule already collapses this grid. At 760 there was a
   180px band where the steps stacked but the rail was still drawn horizontally across
   them, which is the kind of gap only a width sweep finds. */
@media(max-width:940px){
  .steps{grid-template-columns:1fr;gap:0}
  .steps::before,.steps::after{left:20px;right:auto;top:8px;bottom:8px;
    width:2px;height:auto}
  .steps::after{transform:scaleY(var(--sf,0));transform-origin:top center}
  .step{padding:0 0 30px 62px}
  .step:last-child{padding-bottom:0}
  .step::before{top:-2px}
}
@media(prefers-reduced-motion:reduce){
  .steps::after{transform:none}
  .step::before{transition:none}
}

/* ── the black statement, Apple's privacy page ──
   Pure black whatever the page theme is, a gradient mark, one centered line, and a
   paragraph whose FIRST clause is white and whose remainder drops to grey. That
   two-tone body copy is the actual signature of that Apple section and it is what makes
   a long paragraph read as a statement rather than as a wall. */
.stmt{position:relative;isolation:isolate;overflow:hidden;background:#05222f;color:#f5f5f7;padding:clamp(90px,13vw,180px) 0;text-align:center}
.stmt__mk{width:64px;height:64px;margin:0 auto clamp(26px,3vw,40px)}
.stmt h2{color:#f5f5f7;max-width:15ch}
.stmt__p{margin:clamp(24px,3vw,38px) auto 0;max-width:46ch;font-size:clamp(17px,1.6vw,21px);
  line-height:1.55;color:#9bb3bd;letter-spacing:-.015em}
.stmt__p b{color:#f5f5f7;font-weight:600}
.stmt .lnk{color:var(--cy-2);margin-top:clamp(24px,3vw,36px);display:inline-flex}

@media(max-width:940px){
  .cmp__r,.cmp__r--h{grid-template-columns:1fr;gap:8px;padding:20px 0}
  .cmp__h{display:none}
  .cmp__h--us,.cmp__h--them{display:none}
  .cmp__v{font-size:14.5px}
  .cmp__who{grid-template-columns:1fr}
  /* Stacked, there is no column to lift: the shadow span has nothing to sit over, and
     every us cell becomes its own card instead of one continuous strip. */
  .cmp__lift{display:none}
  .cmp__v--us{border-radius:var(--r)}
  .cmp__r:last-child .cmp__v--us{border-radius:var(--r)}
  .cmp__r + .cmp__r .cmp__k{border-top:0}
  .cmp__r + .cmp__r .cmp__v--them{border-top:0}
}

/* ── the full-bleed statement, in the mark's own colors ──
   The same top-right light, but on a colored ground it is a gloss sheen rather than a bloom:
   a soft white highlight laid over the gradient, which is what keeps a large flat color area
   from reading as a single dyed poster. */
/* LOW-POLY %3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1400 560%22 preserveAspectRatio=%22none%22%3E%3Crect width=%221400%22 height=%22560%22 fill=%22%230596b8%22/%3E%3Cpolygon points=%220.0,0.0 83.3,0.0 0.0,73.7%22 fill=%22%23063a4d%22/%3E%3Cpolygon points=%2283.3,0.0 95.7,102.8 0.0,73.7%22 fill=%22%23063c4f%22/%3E%3Cpolygon points=%2283.3,0.0 222.4,0.0 200.8,74.2%22 fill=%22%230d4b5f%22/%3E%3Cpolygon points=%2283.3,0.0 200.8,74.2 95.7,102.8%22 fill=%22%2309465a%22/%3E%3Cpolygon points=%22222.4,0.0 277.7,0.0 200.8,74.2%22 fill=%22%23084a5f%22/%3E%3Cpolygon points=%22277.7,0.0 278.1,92.8 200.8,74.2%22 fill=%22%2315576c%22/%3E%3Cpolygon points=%22277.7,0.0 400.6,0.0 425.3,94.9%22 fill=%22%2309536a%22/%3E%3Cpolygon points=%22277.7,0.0 425.3,94.9 278.1,92.8%22 fill=%22%230a556c%22/%3E%3Cpolygon points=%22400.6,0.0 476.6,0.0 425.3,94.9%22 fill=%22%2316657c%22/%3E%3Cpolygon points=%22476.6,0.0 511.6,108.7 425.3,94.9%22 fill=%22%230a5f78%22/%3E%3Cpolygon points=%22476.6,0.0 607.8,0.0 587.1,125.6%22 fill=%22%2315728b%22/%3E%3Cpolygon points=%22476.6,0.0 587.1,125.6 511.6,108.7%22 fill=%22%230e6b85%22/%3E%3Cpolygon points=%22607.8,0.0 740.0,0.0 587.1,125.6%22 fill=%22%23087692%22/%3E%3Cpolygon points=%22740.0,0.0 700.2,77.8 587.1,125.6%22 fill=%22%23117f9c%22/%3E%3Cpolygon points=%22740.0,0.0 780.2,0.0 841.3,115.5%22 fill=%22%230a89a8%22/%3E%3Cpolygon points=%22740.0,0.0 841.3,115.5 700.2,77.8%22 fill=%22%230d88a6%22/%3E%3Cpolygon points=%22780.2,0.0 905.0,0.0 841.3,115.5%22 fill=%22%231293b2%22/%3E%3Cpolygon points=%22905.0,0.0 889.4,110.9 841.3,115.5%22 fill=%22%230c97b7%22/%3E%3Cpolygon points=%22905.0,0.0 1018.8,0.0 1010.3,68.8%22 fill=%22%2311a4c3%22/%3E%3Cpolygon points=%22905.0,0.0 1010.3,68.8 889.4,110.9%22 fill=%22%2314a1c0%22/%3E%3Cpolygon points=%221018.8,0.0 1086.0,0.0 1010.3,68.8%22 fill=%22%2311accb%22/%3E%3Cpolygon points=%221086.0,0.0 1088.3,64.2 1010.3,68.8%22 fill=%22%2312b0cf%22/%3E%3Cpolygon points=%221086.0,0.0 1182.7,0.0 1238.3,115.5%22 fill=%22%231ac2de%22/%3E%3Cpolygon points=%221086.0,0.0 1238.3,115.5 1088.3,64.2%22 fill=%22%2324c2de%22/%3E%3Cpolygon points=%221182.7,0.0 1329.3,0.0 1238.3,115.5%22 fill=%22%232ad3ed%22/%3E%3Cpolygon points=%221329.3,0.0 1280.4,65.6 1238.3,115.5%22 fill=%22%2342d9f0%22/%3E%3Cpolygon points=%221329.3,0.0 1400.0,0.0 1400.0,88.7%22 fill=%22%2383e6f5%22/%3E%3Cpolygon points=%221329.3,0.0 1400.0,88.7 1280.4,65.6%22 fill=%22%235ed6e8%22/%3E%3Cpolygon points=%220.0,73.7 95.7,102.8 74.9,210.1%22 fill=%22%23074053%22/%3E%3Cpolygon points=%220.0,73.7 74.9,210.1 0.0,218.3%22 fill=%22%23073e52%22/%3E%3Cpolygon points=%2295.7,102.8 200.8,74.2 74.9,210.1%22 fill=%22%230f4c60%22/%3E%3Cpolygon points=%22200.8,74.2 191.8,218.7 74.9,210.1%22 fill=%22%2308495d%22/%3E%3Cpolygon points=%22200.8,74.2 278.1,92.8 295.4,180.4%22 fill=%22%230d5369%22/%3E%3Cpolygon points=%22200.8,74.2 295.4,180.4 191.8,218.7%22 fill=%22%2314576c%22/%3E%3Cpolygon points=%22278.1,92.8 425.3,94.9 295.4,180.4%22 fill=%22%2309536a%22/%3E%3Cpolygon points=%22425.3,94.9 386.3,153.2 295.4,180.4%22 fill=%22%23156279%22/%3E%3Cpolygon points=%22425.3,94.9 511.6,108.7 468.9,177.0%22 fill=%22%2309617a%22/%3E%3Cpolygon points=%22425.3,94.9 468.9,177.0 386.3,153.2%22 fill=%22%230a5e76%22/%3E%3Cpolygon points=%22511.6,108.7 587.1,125.6 468.9,177.0%22 fill=%22%23096a85%22/%3E%3Cpolygon points=%22587.1,125.6 590.7,148.7 468.9,177.0%22 fill=%22%23086983%22/%3E%3Cpolygon points=%22587.1,125.6 700.2,77.8 682.0,165.6%22 fill=%22%230b7c99%22/%3E%3Cpolygon points=%22587.1,125.6 682.0,165.6 590.7,148.7%22 fill=%22%23087591%22/%3E%3Cpolygon points=%22700.2,77.8 841.3,115.5 682.0,165.6%22 fill=%22%230f89a7%22/%3E%3Cpolygon points=%22841.3,115.5 777.4,188.0 682.0,165.6%22 fill=%22%23128fad%22/%3E%3Cpolygon points=%22841.3,115.5 889.4,110.9 898.7,222.4%22 fill=%22%230593b4%22/%3E%3Cpolygon points=%22841.3,115.5 898.7,222.4 777.4,188.0%22 fill=%22%230590b1%22/%3E%3Cpolygon points=%22889.4,110.9 1010.3,68.8 898.7,222.4%22 fill=%22%230ca1c1%22/%3E%3Cpolygon points=%221010.3,68.8 1030.2,173.5 898.7,222.4%22 fill=%22%2313abca%22/%3E%3Cpolygon points=%221010.3,68.8 1088.3,64.2 1074.0,200.1%22 fill=%22%2313aecb%22/%3E%3Cpolygon points=%221010.3,68.8 1074.0,200.1 1030.2,173.5%22 fill=%22%2319b5d3%22/%3E%3Cpolygon points=%221088.3,64.2 1238.3,115.5 1074.0,200.1%22 fill=%22%2323c5e0%22/%3E%3Cpolygon points=%221238.3,115.5 1219.3,153.8 1074.0,200.1%22 fill=%22%231dc4df%22/%3E%3Cpolygon points=%221238.3,115.5 1280.4,65.6 1261.2,147.8%22 fill=%22%2335d4ed%22/%3E%3Cpolygon points=%221238.3,115.5 1261.2,147.8 1219.3,153.8%22 fill=%22%232bcae2%22/%3E%3Cpolygon points=%221280.4,65.6 1400.0,88.7 1261.2,147.8%22 fill=%22%2363e0f3%22/%3E%3Cpolygon points=%221400.0,88.7 1400.0,211.6 1261.2,147.8%22 fill=%22%238be8f6%22/%3E%3Cpolygon points=%220.0,218.3 74.9,210.1 0.0,272.0%22 fill=%22%23073f52%22/%3E%3Cpolygon points=%2274.9,210.1 90.5,296.6 0.0,272.0%22 fill=%22%23134d60%22/%3E%3Cpolygon points=%2274.9,210.1 191.8,218.7 224.6,312.2%22 fill=%22%2315556a%22/%3E%3Cpolygon points=%2274.9,210.1 224.6,312.2 90.5,296.6%22 fill=%22%23084b60%22/%3E%3Cpolygon points=%22191.8,218.7 295.4,180.4 224.6,312.2%22 fill=%22%23095269%22/%3E%3Cpolygon points=%22295.4,180.4 302.6,273.2 224.6,312.2%22 fill=%22%2309556c%22/%3E%3Cpolygon points=%22295.4,180.4 386.3,153.2 401.8,250.3%22 fill=%22%23095971%22/%3E%3Cpolygon points=%22295.4,180.4 401.8,250.3 302.6,273.2%22 fill=%22%23095971%22/%3E%3Cpolygon points=%22386.3,153.2 468.9,177.0 401.8,250.3%22 fill=%22%23095b73%22/%3E%3Cpolygon points=%22468.9,177.0 506.9,265.2 401.8,250.3%22 fill=%22%23146d86%22/%3E%3Cpolygon points=%22468.9,177.0 590.7,148.7 559.0,285.5%22 fill=%22%23086d88%22/%3E%3Cpolygon points=%22468.9,177.0 559.0,285.5 506.9,265.2%22 fill=%22%2314748e%22/%3E%3Cpolygon points=%22590.7,148.7 682.0,165.6 559.0,285.5%22 fill=%22%230d7b97%22/%3E%3Cpolygon points=%22682.0,165.6 675.8,300.6 559.0,285.5%22 fill=%22%23077b99%22/%3E%3Cpolygon points=%22682.0,165.6 777.4,188.0 818.8,275.0%22 fill=%22%230683a2%22/%3E%3Cpolygon points=%22682.0,165.6 818.8,275.0 675.8,300.6%22 fill=%22%23108dab%22/%3E%3Cpolygon points=%22777.4,188.0 898.7,222.4 818.8,275.0%22 fill=%22%230594b6%22/%3E%3Cpolygon points=%22898.7,222.4 925.9,279.5 818.8,275.0%22 fill=%22%230c9fc0%22/%3E%3Cpolygon points=%22898.7,222.4 1030.2,173.5 1039.6,278.3%22 fill=%22%2313b0cf%22/%3E%3Cpolygon points=%22898.7,222.4 1039.6,278.3 925.9,279.5%22 fill=%22%230faaca%22/%3E%3Cpolygon points=%221030.2,173.5 1074.0,200.1 1039.6,278.3%22 fill=%22%2316b9d7%22/%3E%3Cpolygon points=%221074.0,200.1 1069.9,292.9 1039.6,278.3%22 fill=%22%2317bad7%22/%3E%3Cpolygon points=%221074.0,200.1 1219.3,153.8 1225.6,302.3%22 fill=%22%2321cfea%22/%3E%3Cpolygon points=%221074.0,200.1 1225.6,302.3 1069.9,292.9%22 fill=%22%2329cbe6%22/%3E%3Cpolygon points=%221219.3,153.8 1261.2,147.8 1225.6,302.3%22 fill=%22%233fd9f0%22/%3E%3Cpolygon points=%221261.2,147.8 1270.5,307.1 1225.6,302.3%22 fill=%22%2356ddf2%22/%3E%3Cpolygon points=%221261.2,147.8 1400.0,211.6 1400.0,261.4%22 fill=%22%2392e0eb%22/%3E%3Cpolygon points=%221261.2,147.8 1400.0,261.4 1270.5,307.1%22 fill=%22%2382e6f5%22/%3E%3Cpolygon points=%220.0,272.0 90.5,296.6 68.1,399.8%22 fill=%22%23074255%22/%3E%3Cpolygon points=%220.0,272.0 68.1,399.8 0.0,361.6%22 fill=%22%23124c5f%22/%3E%3Cpolygon points=%2290.5,296.6 224.6,312.2 68.1,399.8%22 fill=%22%23115267%22/%3E%3Cpolygon points=%22224.6,312.2 225.4,403.3 68.1,399.8%22 fill=%22%230d546a%22/%3E%3Cpolygon points=%22224.6,312.2 302.6,273.2 338.8,388.9%22 fill=%22%230a5971%22/%3E%3Cpolygon points=%22224.6,312.2 338.8,388.9 225.4,403.3%22 fill=%22%23125e75%22/%3E%3Cpolygon points=%22302.6,273.2 401.8,250.3 338.8,388.9%22 fill=%22%230d5f77%22/%3E%3Cpolygon points=%22401.8,250.3 408.2,402.2 338.8,388.9%22 fill=%22%2311677f%22/%3E%3Cpolygon points=%22401.8,250.3 506.9,265.2 530.0,412.0%22 fill=%22%23096b85%22/%3E%3Cpolygon points=%22401.8,250.3 530.0,412.0 408.2,402.2%22 fill=%22%23096882%22/%3E%3Cpolygon points=%22506.9,265.2 559.0,285.5 530.0,412.0%22 fill=%22%230c7691%22/%3E%3Cpolygon points=%22559.0,285.5 562.1,411.7 530.0,412.0%22 fill=%22%2307738f%22/%3E%3Cpolygon points=%22559.0,285.5 675.8,300.6 681.9,398.3%22 fill=%22%23077e9c%22/%3E%3Cpolygon points=%22559.0,285.5 681.9,398.3 562.1,411.7%22 fill=%22%23077996%22/%3E%3Cpolygon points=%22675.8,300.6 818.8,275.0 681.9,398.3%22 fill=%22%23068bab%22/%3E%3Cpolygon points=%22818.8,275.0 766.7,405.8 681.9,398.3%22 fill=%22%230691b2%22/%3E%3Cpolygon points=%22818.8,275.0 925.9,279.5 910.7,354.2%22 fill=%22%2318a7c5%22/%3E%3Cpolygon points=%22818.8,275.0 910.7,354.2 766.7,405.8%22 fill=%22%230798b8%22/%3E%3Cpolygon points=%22925.9,279.5 1039.6,278.3 910.7,354.2%22 fill=%22%2310a7c4%22/%3E%3Cpolygon points=%221039.6,278.3 981.5,384.8 910.7,354.2%22 fill=%22%2319b6d3%22/%3E%3Cpolygon points=%221039.6,278.3 1069.9,292.9 1135.2,376.1%22 fill=%22%2324c7e2%22/%3E%3Cpolygon points=%221039.6,278.3 1135.2,376.1 981.5,384.8%22 fill=%22%2319bcd8%22/%3E%3Cpolygon points=%221069.9,292.9 1225.6,302.3 1135.2,376.1%22 fill=%22%2324d0eb%22/%3E%3Cpolygon points=%221225.6,302.3 1189.8,336.8 1135.2,376.1%22 fill=%22%233cd8f0%22/%3E%3Cpolygon points=%221225.6,302.3 1270.5,307.1 1276.6,357.4%22 fill=%22%2372e3f4%22/%3E%3Cpolygon points=%221225.6,302.3 1276.6,357.4 1189.8,336.8%22 fill=%22%2356d3e6%22/%3E%3Cpolygon points=%221270.5,307.1 1400.0,261.4 1276.6,357.4%22 fill=%22%239cebf7%22/%3E%3Cpolygon points=%221400.0,261.4 1400.0,376.5 1276.6,357.4%22 fill=%22%23c3e0d1%22/%3E%3Cpolygon points=%220.0,361.6 68.1,399.8 0.0,474.7%22 fill=%22%230a475b%22/%3E%3Cpolygon points=%2268.1,399.8 121.9,473.3 0.0,474.7%22 fill=%22%2308495e%22/%3E%3Cpolygon points=%2268.1,399.8 225.4,403.3 207.3,438.5%22 fill=%22%23084f65%22/%3E%3Cpolygon points=%2268.1,399.8 207.3,438.5 121.9,473.3%22 fill=%22%23084d63%22/%3E%3Cpolygon points=%22225.4,403.3 338.8,388.9 207.3,438.5%22 fill=%22%230c5a72%22/%3E%3Cpolygon points=%22338.8,388.9 321.6,448.7 207.3,438.5%22 fill=%22%23095870%22/%3E%3Cpolygon points=%22338.8,388.9 408.2,402.2 385.9,492.2%22 fill=%22%23166c85%22/%3E%3Cpolygon points=%22338.8,388.9 385.9,492.2 321.6,448.7%22 fill=%22%230a617a%22/%3E%3Cpolygon points=%22408.2,402.2 530.0,412.0 385.9,492.2%22 fill=%22%2312738d%22/%3E%3Cpolygon points=%22530.0,412.0 490.2,484.6 385.9,492.2%22 fill=%22%23086f8a%22/%3E%3Cpolygon points=%22530.0,412.0 562.1,411.7 594.3,503.1%22 fill=%22%23077b99%22/%3E%3Cpolygon points=%22530.0,412.0 594.3,503.1 490.2,484.6%22 fill=%22%23087a97%22/%3E%3Cpolygon points=%22562.1,411.7 681.9,398.3 594.3,503.1%22 fill=%22%23067c99%22/%3E%3Cpolygon points=%22681.9,398.3 694.5,438.0 594.3,503.1%22 fill=%22%230c8baa%22/%3E%3Cpolygon points=%22681.9,398.3 766.7,405.8 822.4,478.9%22 fill=%22%23058fb0%22/%3E%3Cpolygon points=%22681.9,398.3 822.4,478.9 694.5,438.0%22 fill=%22%23058aa9%22/%3E%3Cpolygon points=%22766.7,405.8 910.7,354.2 822.4,478.9%22 fill=%22%230997b7%22/%3E%3Cpolygon points=%22910.7,354.2 881.2,472.0 822.4,478.9%22 fill=%22%230da4c4%22/%3E%3Cpolygon points=%22910.7,354.2 981.5,384.8 961.3,443.6%22 fill=%22%2312acca%22/%3E%3Cpolygon points=%22910.7,354.2 961.3,443.6 881.2,472.0%22 fill=%22%2310a9c8%22/%3E%3Cpolygon points=%22981.5,384.8 1135.2,376.1 961.3,443.6%22 fill=%22%231ac0dd%22/%3E%3Cpolygon points=%221135.2,376.1 1075.5,482.5 961.3,443.6%22 fill=%22%2322c9e4%22/%3E%3Cpolygon points=%221135.2,376.1 1189.8,336.8 1229.6,478.1%22 fill=%22%234ddcf1%22/%3E%3Cpolygon points=%221135.2,376.1 1229.6,478.1 1075.5,482.5%22 fill=%22%233ad8f0%22/%3E%3Cpolygon points=%221189.8,336.8 1276.6,357.4 1229.6,478.1%22 fill=%22%2368dced%22/%3E%3Cpolygon points=%221276.6,357.4 1309.3,493.2 1229.6,478.1%22 fill=%22%2393e3ee%22/%3E%3Cpolygon points=%221276.6,357.4 1400.0,376.5 1400.0,491.4%22 fill=%22%23e3e3c4%22/%3E%3Cpolygon points=%221276.6,357.4 1400.0,491.4 1309.3,493.2%22 fill=%22%23caddc8%22/%3E%3Cpolygon points=%220.0,474.7 121.9,473.3 84.8,560.0%22 fill=%22%23084a5f%22/%3E%3Cpolygon points=%220.0,474.7 84.8,560.0 0.0,560.0%22 fill=%22%2308475b%22/%3E%3Cpolygon points=%22121.9,473.3 207.3,438.5 84.8,560.0%22 fill=%22%2315596f%22/%3E%3Cpolygon points=%22207.3,438.5 198.9,560.0 84.8,560.0%22 fill=%22%23115a70%22/%3E%3Cpolygon points=%22207.3,438.5 321.6,448.7 286.4,560.0%22 fill=%22%230b5d75%22/%3E%3Cpolygon points=%22207.3,438.5 286.4,560.0 198.9,560.0%22 fill=%22%23105e75%22/%3E%3Cpolygon points=%22321.6,448.7 385.9,492.2 286.4,560.0%22 fill=%22%23095e77%22/%3E%3Cpolygon points=%22385.9,492.2 427.3,560.0 286.4,560.0%22 fill=%22%23096882%22/%3E%3Cpolygon points=%22385.9,492.2 490.2,484.6 463.1,560.0%22 fill=%22%23086d87%22/%3E%3Cpolygon points=%22385.9,492.2 463.1,560.0 427.3,560.0%22 fill=%22%23086d88%22/%3E%3Cpolygon points=%22490.2,484.6 594.3,503.1 463.1,560.0%22 fill=%22%230c7c99%22/%3E%3Cpolygon points=%22594.3,503.1 561.9,560.0 463.1,560.0%22 fill=%22%231584a1%22/%3E%3Cpolygon points=%22594.3,503.1 694.5,438.0 734.7,560.0%22 fill=%22%230686a5%22/%3E%3Cpolygon points=%22594.3,503.1 734.7,560.0 561.9,560.0%22 fill=%22%230f8dab%22/%3E%3Cpolygon points=%22694.5,438.0 822.4,478.9 734.7,560.0%22 fill=%22%230594b6%22/%3E%3Cpolygon points=%22822.4,478.9 812.8,560.0 734.7,560.0%22 fill=%22%2313a3c2%22/%3E%3Cpolygon points=%22822.4,478.9 881.2,472.0 881.0,560.0%22 fill=%22%2313abca%22/%3E%3Cpolygon points=%22822.4,478.9 881.0,560.0 812.8,560.0%22 fill=%22%2315aac9%22/%3E%3Cpolygon points=%22881.2,472.0 961.3,443.6 881.0,560.0%22 fill=%22%231db4d2%22/%3E%3Cpolygon points=%22961.3,443.6 982.5,560.0 881.0,560.0%22 fill=%22%2315b6d4%22/%3E%3Cpolygon points=%22961.3,443.6 1075.5,482.5 1080.6,560.0%22 fill=%22%2327cae5%22/%3E%3Cpolygon points=%22961.3,443.6 1080.6,560.0 982.5,560.0%22 fill=%22%231ac0dc%22/%3E%3Cpolygon points=%221075.5,482.5 1229.6,478.1 1080.6,560.0%22 fill=%22%2336cde3%22/%3E%3Cpolygon points=%221229.6,478.1 1185.3,560.0 1080.6,560.0%22 fill=%22%2359d8eb%22/%3E%3Cpolygon points=%221229.6,478.1 1309.3,493.2 1326.5,560.0%22 fill=%22%23c1e8df%22/%3E%3Cpolygon points=%221229.6,478.1 1326.5,560.0 1185.3,560.0%22 fill=%22%23a1ecf7%22/%3E%3Cpolygon points=%221309.3,493.2 1400.0,491.4 1326.5,560.0%22 fill=%22%23f1d7a8%22/%3E%3Cpolygon points=%221400.0,491.4 1400.0,560.0 1326.5,560.0%22 fill=%22%23f8c26a%22/%3E%3C/svg%3E. A flat gradient over an area this large reads as a dyed poster; a
   triangulated field of the same ramp reads as a surface, which is the whole trick in the
   reference. 168 facets on a jittered lattice, each one a step of the ramp plus a few
   percent of its own lightness. The lattice is seeded so the mesh is byte-identical on
   every build, and it is one data URI in this stylesheet rather than inline SVG on each of
   the three pages that use the band.

   Value runs dark at the left and bright at the right, exactly as the gradient it replaces
   did, so the white type in the centre keeps the contrast it already had. The amber only
   appears past about 93% of the axis, which puts it in the far corner where no text goes.
   The gloss sheen stays on top; the mesh is the surface, the sheen is the light on it. */
.band{padding:clamp(72px,9vw,124px) 0;text-align:center;color:#fff;background:
  radial-gradient(1100px circle at 84% -22%,rgba(255,255,255,.2),transparent 58%),
  var(--mesh) center/cover no-repeat,
  linear-gradient(118deg,#083f52 0%,var(--cy-deep) 30%,var(--cy) 68%,var(--cy-2) 100%)}
.band h2{max-width:18ch;color:#fff}
.band .sub{color:rgba(255,255,255,.88)}

/* ── pricing ── */
.plan{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(13px,1.4vw,20px);
  margin-top:clamp(44px,5vw,72px);text-align:left}
.p{background:var(--card);border-radius:var(--r);padding:clamp(26px,2.8vw,36px);display:flex;flex-direction:column;
  box-shadow:0 1px 3px var(--shadow-1)}
.p--hero{background:var(--bg-3);color:#eaf6fa}
.p h3{font-size:20px}
.p__amt{margin:18px 0 4px;font-size:clamp(34px,3.8vw,46px);font-weight:700;letter-spacing:-.04em;line-height:1;
  color:var(--cy)}
.p--hero .p__amt{color:var(--cy-3)}
.p__amt small{font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--ink-2)}
.p--hero .p__amt small{color:#8fb2bd}
.p__note{font-size:13.5px;color:var(--ink-2)}
.p--hero .p__note{color:#8fb2bd}
.p ul{list-style:none;margin:20px 0 24px;display:grid;gap:9px;font-size:15px}
.p li{display:flex;gap:9px;color:var(--ink-2)}
.p--hero li{color:#bcd6de}
.p li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cy-2);flex:none;margin-top:8px}
.p--hero li::before{background:var(--am-2)}
.p .pill{margin-top:auto;align-self:flex-start}
.p--hero .pill{background:var(--am);color:#2a1a02}

/* ── footer ── */
/* No ground of its own and no mesh layer of its own: it sits on the closing section's
   ground, which is what makes the join invisible rather than merely subtle. Half the
   height it used to take. */
.foot{background:none;padding:clamp(48px,6vw,92px) 0 clamp(22px,2.6vw,34px);
  font-size:12px;line-height:1.55;color:var(--ink-3)}
/* Held to the content column, not the full viewport. Justified edge to edge across 1720px
   the seven links stopped reading as a row and became seven isolated words. */
.foot p{max-width:92ch;margin-inline:auto}
.foot__n{display:flex;flex-wrap:wrap;justify-content:center;gap:10px clamp(20px,2.4vw,40px);
  padding-bottom:0;border-bottom:0;margin-bottom:22px}
.foot__n a{color:var(--ink-2);font-size:12.5px}
.foot__n a:hover{color:var(--cy)}
.foot p + p{margin-top:10px}

@media(max-width:940px){
  .ch__g,.ch--flip .ch__g{grid-template-columns:1fr;gap:34px}
  .ch--flip .ch__copy,.ch--flip .ch__shot{order:0}
  .ch__shot,.ch--flip .ch__shot{margin:0}
  .tiles,.plan{grid-template-columns:1fr}
  .nums{grid-template-columns:repeat(2,1fr)}
  .stage{height:auto}
  .stage__pin{position:static;height:auto}
  .stage__in{transform:none;border-radius:var(--r-lg)}
  .chrome .tab + .tab,.plus{display:none}
}
@media(max-width:700px){
  .bar a.l{display:none} .burger{display:block}
  .nums{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage__in{transform:none} .stage__float{animation:none} .tile{transition:none}
  .tcard{transition:none!important}
}

/* ── Added when the tabs became pages ───────────────────────────────────────── */
/* The current tab is lit rather than underlined, so the bar stays a row of words. */
.bar a.l.on{color:var(--ink);font-weight:500}
.sec--dark .bar a.l.on{color:#fff}
/* Sub-page opener. Same type as the home hero, less air above it, because a reader who
   clicked Pricing wants the prices, not another full-height title card. */
.phead{padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(26px,3.4vw,48px)}
.phead h1{font-size:clamp(38px,6.4vw,84px)}
.phead .sub{max-width:62ch}
/* A section whose eyebrow and heading were lifted into the page opener above it. */
.sec--lifted{padding-top:clamp(18px,2.2vw,34px)}

/* ════════════════════════════════════════════════════════════════════════════
   THE HERO, ARRIVING WHOLE
   There was an "assembly" here: the rail slid in, the bar dropped, the figures rose
   one by one and the panel came last. It scrubbed correctly and it looked terrible,
   because for most of the scroll it showed a half-built product with an empty white
   body and a rail floating off its own edge. Apple never does that. They move a
   FINISHED product: it scales, it parallaxes, light crosses it, the page behind it
   recedes. What they do not do is let you watch the thing be built out of parts,
   because a product missing its parts reads as broken rather than as impressive.

   So nothing here is ever absent. The screen is complete at every scroll position and
   three things happen to it as a whole: it rises and settles (on .stage__in above),
   its contents sit fractionally behind the glass and catch up as it lands, and a soft
   highlight travels across the surface once on the way in.
   ════════════════════════════════════════════════════════════════════════════ */
.stage__in{position:relative}
/* Depth, not disassembly: the content layer trails the frame by a few pixels and a
   hair of scale, so the glass reads as being in front of it. Everything stays visible
   and nothing moves far enough to look loose. */
.stage .app{transform:translateY(calc(8px - 8px * var(--p,1)))
            scale(calc(1.012 - .012 * var(--p,1)));transform-origin:50% 40%}
/* One highlight crossing the glass as it lands. It leaves entirely at rest, so the
   settled state is the product, not the product with an effect on it. */
.stage__in::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  border-radius:inherit;
  background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
  opacity:calc(.5 * (1 - var(--p,1)));
  transform:translateX(calc(-36% + 150% * var(--p,1)))}
@media(max-width:940px),(prefers-reduced-motion:reduce){
  .stage .app{transform:none}
  .stage__in::after{display:none}
}

/* ════════════════════════════════════════════════════════════════════════════
   THE PATH — vertical scroll, horizontal move
   ════════════════════════════════════════════════════════════════════════════ */
.pipe{position:relative}                 /* height is set in script, from the card count */
.pipe__pin{position:sticky;top:48px;height:calc(100svh - 48px);overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.4vh,30px);
  isolation:isolate}
/* The ground was flat dark with a faint grid, which is why the stage read as cards
   floating in an empty room. Two layers fix it: the same triangulated field the rest of
   the site wears, screened out of the dark so it is a surface rather than a void, and a
   pool of light at the centre where the active card always sits. The card is lit by the
   room instead of only by its own ring. */
.pipe__pin::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--mesh) center/cover no-repeat;opacity:.16;mix-blend-mode:screen}
.pipe__pin::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(760px 520px at 50% 58%,rgba(var(--cy-rgb),.16),transparent 68%)}
.pipe__top,.pipe__vp,.pipe__ticks,.pipe__ghost{position:relative;z-index:1}
/* The step number, set large and nearly invisible BEHIND THE HEADLINE. Sat behind the
   card it was almost entirely occluded and read as a smudge rather than a number; up
   here it is unobstructed, so it does the editorial job of saying which of the six you
   are on without another line of copy. */
.pipe__ghost{position:absolute;left:50%;top:0;transform:translate(-50%,-16%);
  z-index:0;font:700 clamp(190px,27vw,430px)/0.74 var(--f);letter-spacing:-.06em;
  color:#fff;opacity:.055;pointer-events:none;user-select:none;white-space:nowrap}
@media(max-height:820px){ .pipe__ghost{font-size:clamp(150px,20vw,300px)} }
.pipe__top{text-align:center}
.pipe__h{font:700 clamp(26px,min(3.6vw,5vh),48px)/1.05 var(--f);letter-spacing:-.04em;margin-bottom:9px}
.pipe__p{max-width:62ch;margin-inline:auto;font-size:clamp(14px,1.1vw,16.5px)}
.pipe__vp{overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%)}
.pipe__rail{--cw:clamp(320px,34vw,470px);
  display:flex;gap:clamp(18px,2vw,30px);align-items:stretch;
  padding-inline:calc(50% - var(--cw)/2);will-change:transform}
/* Depth of field. A card you are not reading falls back, dims AND goes out of focus,
   which is what makes the stage feel like a room with something in front of you rather
   than a row of equally-present tiles. The blur resolves to zero on the active card, so
   the one you actually read is never soft. */
.stn{width:var(--cw);flex:none;display:flex;flex-direction:column;gap:11px;
  opacity:calc(.2 + .8*var(--on,1));
  transform:scale(calc(.86 + .14*var(--on,1)))
            translateY(calc(16px - 16px*var(--on,1)));
  transform-origin:50% 50%;
  filter:blur(calc(5px * (1 - var(--on,1))))}
/* A node and a rule on every station label, so the six cards read as stops on one
   continuous line instead of six unrelated cards that happen to be side by side. */
.stn__k{display:flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(234,246,250,.5);font-weight:600}
.stn__k b{width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--cy-hot);opacity:calc(.28 + .72*var(--on,1));
  box-shadow:0 0 calc(12px*var(--on,1)) var(--cy-hot)}
.stn__k::after{content:"";flex:1;height:1px;margin-left:4px;
  background:linear-gradient(90deg,rgba(var(--cy-rgb),calc(.1 + .35*var(--on,1))),
                                   rgba(var(--cy-rgb),.05))}
.stn__k i{font-style:normal;font-size:11.5px;color:var(--cy-hot);
  opacity:calc(.45 + .55*var(--on,1))}
/* The active card is the only lit one. The ring is the brand cyan at full strength,
   which is the whole reason the ramp had to stop being a mid-teal. */
.stn__card{flex:1;background:#fff;color:#0b2430;border-radius:18px;padding:19px 21px 20px;
  min-height:clamp(320px,48vh,500px);
  box-shadow:0 0 0 calc(2px * var(--on,1)) rgba(var(--cy-rgb),calc(.15 + .75*var(--on,1))),
             0 calc(14px + 26px*var(--on,1)) calc(30px + 40px*var(--on,1))
             calc(-22px) rgba(0,0,0,.55),
             0 0 calc(60px * var(--on,1)) calc(-10px) rgba(var(--cy-rgb),calc(.5*var(--on,1)))}
.stn__hd{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.stn__hd b{font-size:16px;font-weight:600;letter-spacing:-.02em}
.stn__b{margin-left:auto;font-size:10px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 7px;border-radius:999px;
  background:#eef4f7;color:#55747f;flex:none}
.stn__b--new{background:rgba(var(--cy-rgb),.16);color:#0e7490}
.stn__b--ok {background:rgba(22,163,74,.13);color:#15803d}
.stn__sub{font-size:12.5px;color:#5f7b88;margin-bottom:13px}
.stn__rows{display:grid;gap:0;font-size:12.5px}
.stn__rows div{display:flex;align-items:center;gap:10px;padding:6px 0;
  border-bottom:1px solid #eaf1f4;color:#5f7b88}
.stn__rows div:last-child{border-bottom:0}
.stn__rows b{margin-left:auto;font-weight:600;color:#0b2430;text-align:right}
.stn__rows b.g{color:#15803d} .stn__rows b.w{color:#b45309}
.stn__big{font:700 clamp(30px,3.2vw,40px)/1 var(--f);letter-spacing:-.04em;margin:4px 0 2px}
.stn__big i{font-style:normal;color:#9db4bd;margin:0 4px}
.stn__big em{font-style:normal;color:var(--cy-deep)}
.stn__big2{font:700 clamp(30px,3.2vw,40px)/1 var(--f);letter-spacing:-.04em;margin:6px 0 12px;
  display:flex;align-items:baseline;gap:9px}
.stn__big2 i{font-style:normal;font-size:11.5px;font-weight:500;color:#5f7b88;letter-spacing:0}
.stn__kv{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:11px}
.stn__kv div{background:#f4f9fb;border-radius:9px;padding:8px 10px}
.stn__kv span{display:block;font-size:10.5px;color:#5f7b88;margin-bottom:2px}
.stn__kv b{font-size:18px;font-weight:600;letter-spacing:-.02em}
.stn__kv b.g{color:#15803d}
.stn__steps{display:flex;gap:5px;margin:10px 0 12px}
.stn__steps div{flex:1;text-align:center;font-size:10px;font-weight:600;letter-spacing:.03em;
  padding:5px 2px;border-radius:7px;background:#f1f6f8;color:#8aa3ac}
.stn__steps div.on{background:rgba(var(--cy-rgb),.16);color:#0e7490}
.stn__sig{border-top:1px solid #eaf1f4;padding-top:10px;font:500 20px/1.1 'Outfit',cursive;
  letter-spacing:-.01em}
.stn__sig i{display:block;font:400 11px/1 var(--f);color:#5f7b88;margin-top:5px;font-style:normal}
/* Ticks: where you are on the path, and the only thing on this stage that is a control
   rather than a picture. */
.pipe__ticks{display:flex;gap:6px;justify-content:center}
.pipe__ticks div{flex:0 1 96px;height:3px;border-radius:2px;background:rgba(234,246,250,.16);
  position:relative;overflow:hidden}
.pipe__ticks div::after{content:"";position:absolute;inset:0;border-radius:2px;
  background:var(--cy-hot);transform:scaleX(var(--t,0));transform-origin:0 50%}
@media(max-width:940px){
  /* A rail is a desktop idea. On a phone the same six steps are simply six cards you
     scroll past, which is the layout that reads there, not a squeezed version of this one. */
  .pipe{height:auto!important}
  .pipe__pin{position:static;height:auto;padding:clamp(56px,9vw,90px) 0}
  .pipe__ghost{display:none}
  .stn{filter:none}
  .stn__card{min-height:0}
  .pipe__vp{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .pipe__rail{flex-direction:column;padding-inline:var(--gut);gap:20px;transform:none!important}
  .stn{width:100%;opacity:1;transform:none}
  .stn__card{box-shadow:0 0 0 1px rgba(var(--cy-rgb),.22),0 20px 40px -26px rgba(0,0,0,.5)}
  .pipe__ticks{display:none}
}

/* ── the lead map ignites rather than arriving already lit ── */
.map .pin{transform-box:fill-box;transform-origin:50% 50%;
  opacity:var(--ps,1);transform:scale(calc(.2 + .8*var(--ps,1)))}
.map .pin:nth-of-type(8n+1){--ps:clamp(0,calc((var(--m,1) - .00)/.30),1)}
.map .pin:nth-of-type(8n+2){--ps:clamp(0,calc((var(--m,1) - .07)/.30),1)}
.map .pin:nth-of-type(8n+3){--ps:clamp(0,calc((var(--m,1) - .14)/.30),1)}
.map .pin:nth-of-type(8n+4){--ps:clamp(0,calc((var(--m,1) - .21)/.30),1)}
.map .pin:nth-of-type(8n+5){--ps:clamp(0,calc((var(--m,1) - .28)/.30),1)}
.map .pin:nth-of-type(8n+6){--ps:clamp(0,calc((var(--m,1) - .35)/.30),1)}
.map .pin:nth-of-type(8n+7){--ps:clamp(0,calc((var(--m,1) - .42)/.30),1)}
.map .pin:nth-of-type(8n+8){--ps:clamp(0,calc((var(--m,1) - .49)/.30),1)}
.map .dot{opacity:calc(.14 * clamp(0,calc(var(--m,1)/.5),1))}
.sec--dark .map .dot{opacity:calc(.2 * clamp(0,calc(var(--m,1)/.5),1))}
@media(prefers-reduced-motion:reduce){ .map .pin{opacity:1;transform:none} }

/* ════════════════════════════════════════════════════════════════════════════
   TWO MORE CHAPTER SHAPES
   The page had exactly one: copy on the left, a window on the right, flipped every
   other time. Nine of those in a row is a texture, not a rhythm, and it is why the
   whole thing read as plain however good any single chapter was. These two are the
   relief. Use them sparingly; the two-column chapter is still the workhorse.
   ════════════════════════════════════════════════════════════════════════════ */

/* 1. FULL BLEED. Small centred copy, then a screen edge to edge with nothing beside
      it. Reserved for the one screen worth stopping at. */
.bleed{padding:clamp(80px,10vw,140px) 0 clamp(54px,7vw,96px);overflow:hidden}
.bleed__copy{text-align:center;margin-bottom:clamp(36px,4.6vw,68px)}
.bleed__copy h2{max-width:20ch;margin-inline:auto}
.bleed__copy .sub{margin-inline:auto;max-width:62ch}
.bleed__shot{width:min(1560px,100% - var(--gut));margin-inline:auto;
  border-radius:clamp(14px,1.6vw,26px);overflow:hidden;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
.bleed__shot img{width:100%;height:auto}
.bleed__legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 22px;margin-top:clamp(22px,2.8vw,38px);font-size:13px;
  color:rgba(234,246,250,.62)}
.bleed__legend span{display:inline-flex;align-items:center;gap:7px}
.bleed__legend i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.bleed__legend .lnk{font-size:14px;margin-left:6px}

/* 2. THE TRIO. Three screens in one shot, stepped so the eye reads them as one group
      rather than three chapters. The middle one sits forward; the outer two are
      dropped back and slightly dimmed, which is what stops it looking like a grid. */
   HERO: THE ANGULAR FIELD, LIGHT
   The lead map used to run behind this type. It is a light angular field now, the
   same triangulation the rest of the site wears, in a pale blue ramp with a handful
   of brighter facets as accents.

   It drifts, very slowly and on a long loop, because a hero that is completely still
   is the thing this page kept getting called out for. Far slower than the map was:
   this is a surface, not an event.
   ════════════════════════════════════════════════════════════════════════════ */
.hero{position:relative;overflow:hidden;isolation:isolate;background:var(--bg);
  min-height:min(720px,84vh);display:flex;flex-direction:column;justify-content:center}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero__bg::before{content:"";position:absolute;inset:-6%;
  background:var(--mesh-lt) center/cover no-repeat;
  animation:heroField 80s ease-in-out infinite}
@keyframes heroField{
  0%,100%{transform:scale(1.02) translate3d(0,0,0)}
  50%    {transform:scale(1.09) translate3d(-1.8%,-1.2%,0)}
}
/* Keeps the middle of the field pale so the headline sits on near-white rather than on
   whichever facet happens to land behind it, and fades the bottom into the page. */
.hero__scrim{position:absolute;inset:0;
  background:
    radial-gradient(min(1100px,82vw) min(620px,62vh) at 50% 42%,rgba(255,255,255,.93),rgba(255,255,255,.5) 58%,transparent 84%),
    linear-gradient(180deg,rgba(255,255,255,.85) 0%,transparent 26%,transparent 62%,var(--bg) 98%)}
.hero .hero-copy{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){ .hero__bg::before{animation:none} }

/* ════════════════════════════════════════════════════════════════════════════
   THE HERO, ARRIVING WHOLE
   There was an "assembly" here: the rail slid in, the bar dropped, the figures rose
   one by one and the panel came last. It scrubbed correctly and it looked terrible,
   because for most of the scroll it showed a half-built product with an empty white
   body and a rail floating off its own edge. Apple never does that. They move a
   FINISHED product: it scales, it parallaxes, light crosses it, the page behind it
   recedes. What they do not do is let you watch the thing be built out of parts,
   because a product missing its parts reads as broken rather than as impressive.

   So nothing here is ever absent. The screen is complete at every scroll position and
   three things happen to it as a whole: it rises and settles (on .stage__in above),
   its contents sit fractionally behind the glass and catch up as it lands, and a soft
   highlight travels across the surface once on the way in.
   ════════════════════════════════════════════════════════════════════════════ */
.stage__in{position:relative}
/* Depth, not disassembly: the content layer trails the frame by a few pixels and a
   hair of scale, so the glass reads as being in front of it. Everything stays visible
   and nothing moves far enough to look loose. */
.stage .app{transform:translateY(calc(8px - 8px * var(--p,1)))
            scale(calc(1.012 - .012 * var(--p,1)));transform-origin:50% 40%}
/* One highlight crossing the glass as it lands. It leaves entirely at rest, so the
   settled state is the product, not the product with an effect on it. */
.stage__in::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  border-radius:inherit;
  background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
  opacity:calc(.5 * (1 - var(--p,1)));
  transform:translateX(calc(-36% + 150% * var(--p,1)))}
@media(max-width:940px),(prefers-reduced-motion:reduce){
  .stage .app{transform:none}
  .stage__in::after{display:none}
}

/* ════════════════════════════════════════════════════════════════════════════
   THE PATH — vertical scroll, horizontal move
   ════════════════════════════════════════════════════════════════════════════ */
.pipe{position:relative}                 /* height is set in script, from the card count */
.pipe__pin{position:sticky;top:48px;height:calc(100svh - 48px);overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.4vh,30px);
  isolation:isolate}
/* The ground was flat dark with a faint grid, which is why the stage read as cards
   floating in an empty room. Two layers fix it: the same triangulated field the rest of
   the site wears, screened out of the dark so it is a surface rather than a void, and a
   pool of light at the centre where the active card always sits. The card is lit by the
   room instead of only by its own ring. */
.pipe__pin::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--mesh) center/cover no-repeat;opacity:.16;mix-blend-mode:screen}
.pipe__pin::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(760px 520px at 50% 58%,rgba(var(--cy-rgb),.16),transparent 68%)}
.pipe__top,.pipe__vp,.pipe__ticks,.pipe__ghost{position:relative;z-index:1}
/* The step number, set large and nearly invisible BEHIND THE HEADLINE. Sat behind the
   card it was almost entirely occluded and read as a smudge rather than a number; up
   here it is unobstructed, so it does the editorial job of saying which of the six you
   are on without another line of copy. */
.pipe__ghost{position:absolute;left:50%;top:0;transform:translate(-50%,-16%);
  z-index:0;font:700 clamp(190px,27vw,430px)/0.74 var(--f);letter-spacing:-.06em;
  color:#fff;opacity:.055;pointer-events:none;user-select:none;white-space:nowrap}
@media(max-height:820px){ .pipe__ghost{font-size:clamp(150px,20vw,300px)} }
.pipe__top{text-align:center}
.pipe__h{font:700 clamp(26px,min(3.6vw,5vh),48px)/1.05 var(--f);letter-spacing:-.04em;margin-bottom:9px}
.pipe__p{max-width:62ch;margin-inline:auto;font-size:clamp(14px,1.1vw,16.5px)}
.pipe__vp{overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%)}
.pipe__rail{--cw:clamp(320px,34vw,470px);
  display:flex;gap:clamp(18px,2vw,30px);align-items:stretch;
  padding-inline:calc(50% - var(--cw)/2);will-change:transform}
/* Depth of field. A card you are not reading falls back, dims AND goes out of focus,
   which is what makes the stage feel like a room with something in front of you rather
   than a row of equally-present tiles. The blur resolves to zero on the active card, so
   the one you actually read is never soft. */
.stn{width:var(--cw);flex:none;display:flex;flex-direction:column;gap:11px;
  opacity:calc(.2 + .8*var(--on,1));
  transform:scale(calc(.86 + .14*var(--on,1)))
            translateY(calc(16px - 16px*var(--on,1)));
  transform-origin:50% 50%;
  filter:blur(calc(5px * (1 - var(--on,1))))}
/* A node and a rule on every station label, so the six cards read as stops on one
   continuous line instead of six unrelated cards that happen to be side by side. */
.stn__k{display:flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(234,246,250,.5);font-weight:600}
.stn__k b{width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--cy-hot);opacity:calc(.28 + .72*var(--on,1));
  box-shadow:0 0 calc(12px*var(--on,1)) var(--cy-hot)}
.stn__k::after{content:"";flex:1;height:1px;margin-left:4px;
  background:linear-gradient(90deg,rgba(var(--cy-rgb),calc(.1 + .35*var(--on,1))),
                                   rgba(var(--cy-rgb),.05))}
.stn__k i{font-style:normal;font-size:11.5px;color:var(--cy-hot);
  opacity:calc(.45 + .55*var(--on,1))}
/* The active card is the only lit one. The ring is the brand cyan at full strength,
   which is the whole reason the ramp had to stop being a mid-teal. */
.stn__card{flex:1;background:#fff;color:#0b2430;border-radius:18px;padding:19px 21px 20px;
  min-height:clamp(320px,48vh,500px);
  box-shadow:0 0 0 calc(2px * var(--on,1)) rgba(var(--cy-rgb),calc(.15 + .75*var(--on,1))),
             0 calc(14px + 26px*var(--on,1)) calc(30px + 40px*var(--on,1))
             calc(-22px) rgba(0,0,0,.55),
             0 0 calc(60px * var(--on,1)) calc(-10px) rgba(var(--cy-rgb),calc(.5*var(--on,1)))}
.stn__hd{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.stn__hd b{font-size:16px;font-weight:600;letter-spacing:-.02em}
.stn__b{margin-left:auto;font-size:10px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 7px;border-radius:999px;
  background:#eef4f7;color:#55747f;flex:none}
.stn__b--new{background:rgba(var(--cy-rgb),.16);color:#0e7490}
.stn__b--ok {background:rgba(22,163,74,.13);color:#15803d}
.stn__sub{font-size:12.5px;color:#5f7b88;margin-bottom:13px}
.stn__rows{display:grid;gap:0;font-size:12.5px}
.stn__rows div{display:flex;align-items:center;gap:10px;padding:6px 0;
  border-bottom:1px solid #eaf1f4;color:#5f7b88}
.stn__rows div:last-child{border-bottom:0}
.stn__rows b{margin-left:auto;font-weight:600;color:#0b2430;text-align:right}
.stn__rows b.g{color:#15803d} .stn__rows b.w{color:#b45309}
.stn__big{font:700 clamp(30px,3.2vw,40px)/1 var(--f);letter-spacing:-.04em;margin:4px 0 2px}
.stn__big i{font-style:normal;color:#9db4bd;margin:0 4px}
.stn__big em{font-style:normal;color:var(--cy-deep)}
.stn__big2{font:700 clamp(30px,3.2vw,40px)/1 var(--f);letter-spacing:-.04em;margin:6px 0 12px;
  display:flex;align-items:baseline;gap:9px}
.stn__big2 i{font-style:normal;font-size:11.5px;font-weight:500;color:#5f7b88;letter-spacing:0}
.stn__kv{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:11px}
.stn__kv div{background:#f4f9fb;border-radius:9px;padding:8px 10px}
.stn__kv span{display:block;font-size:10.5px;color:#5f7b88;margin-bottom:2px}
.stn__kv b{font-size:18px;font-weight:600;letter-spacing:-.02em}
.stn__kv b.g{color:#15803d}
.stn__steps{display:flex;gap:5px;margin:10px 0 12px}
.stn__steps div{flex:1;text-align:center;font-size:10px;font-weight:600;letter-spacing:.03em;
  padding:5px 2px;border-radius:7px;background:#f1f6f8;color:#8aa3ac}
.stn__steps div.on{background:rgba(var(--cy-rgb),.16);color:#0e7490}
.stn__sig{border-top:1px solid #eaf1f4;padding-top:10px;font:500 20px/1.1 'Outfit',cursive;
  letter-spacing:-.01em}
.stn__sig i{display:block;font:400 11px/1 var(--f);color:#5f7b88;margin-top:5px;font-style:normal}
/* Ticks: where you are on the path, and the only thing on this stage that is a control
   rather than a picture. */
.pipe__ticks{display:flex;gap:6px;justify-content:center}
.pipe__ticks div{flex:0 1 96px;height:3px;border-radius:2px;background:rgba(234,246,250,.16);
  position:relative;overflow:hidden}
.pipe__ticks div::after{content:"";position:absolute;inset:0;border-radius:2px;
  background:var(--cy-hot);transform:scaleX(var(--t,0));transform-origin:0 50%}
@media(max-width:940px){
  /* A rail is a desktop idea. On a phone the same six steps are simply six cards you
     scroll past, which is the layout that reads there, not a squeezed version of this one. */
  .pipe{height:auto!important}
  .pipe__pin{position:static;height:auto;padding:clamp(56px,9vw,90px) 0}
  .pipe__ghost{display:none}
  .stn{filter:none}
  .stn__card{min-height:0}
  .pipe__vp{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .pipe__rail{flex-direction:column;padding-inline:var(--gut);gap:20px;transform:none!important}
  .stn{width:100%;opacity:1;transform:none}
  .stn__card{box-shadow:0 0 0 1px rgba(var(--cy-rgb),.22),0 20px 40px -26px rgba(0,0,0,.5)}
  .pipe__ticks{display:none}
}

/* ── the lead map ignites rather than arriving already lit ── */
.map .pin{transform-box:fill-box;transform-origin:50% 50%;
  opacity:var(--ps,1);transform:scale(calc(.2 + .8*var(--ps,1)))}
.map .pin:nth-of-type(8n+1){--ps:clamp(0,calc((var(--m,1) - .00)/.30),1)}
.map .pin:nth-of-type(8n+2){--ps:clamp(0,calc((var(--m,1) - .07)/.30),1)}
.map .pin:nth-of-type(8n+3){--ps:clamp(0,calc((var(--m,1) - .14)/.30),1)}
.map .pin:nth-of-type(8n+4){--ps:clamp(0,calc((var(--m,1) - .21)/.30),1)}
.map .pin:nth-of-type(8n+5){--ps:clamp(0,calc((var(--m,1) - .28)/.30),1)}
.map .pin:nth-of-type(8n+6){--ps:clamp(0,calc((var(--m,1) - .35)/.30),1)}
.map .pin:nth-of-type(8n+7){--ps:clamp(0,calc((var(--m,1) - .42)/.30),1)}
.map .pin:nth-of-type(8n+8){--ps:clamp(0,calc((var(--m,1) - .49)/.30),1)}
.map .dot{opacity:calc(.14 * clamp(0,calc(var(--m,1)/.5),1))}
.sec--dark .map .dot{opacity:calc(.2 * clamp(0,calc(var(--m,1)/.5),1))}
@media(prefers-reduced-motion:reduce){ .map .pin{opacity:1;transform:none} }

/* ════════════════════════════════════════════════════════════════════════════
   TWO MORE CHAPTER SHAPES
   The page had exactly one: copy on the left, a window on the right, flipped every
   other time. Nine of those in a row is a texture, not a rhythm, and it is why the
   whole thing read as plain however good any single chapter was. These two are the
   relief. Use them sparingly; the two-column chapter is still the workhorse.
   ════════════════════════════════════════════════════════════════════════════ */

/* 1. FULL BLEED. Small centred copy, then a screen edge to edge with nothing beside
      it. Reserved for the one screen worth stopping at. */
.bleed{padding:clamp(80px,10vw,140px) 0 clamp(54px,7vw,96px);overflow:hidden}
.bleed__copy{text-align:center;margin-bottom:clamp(36px,4.6vw,68px)}
.bleed__copy h2{max-width:20ch;margin-inline:auto}
.bleed__copy .sub{margin-inline:auto;max-width:62ch}
.bleed__shot{width:min(1560px,100% - var(--gut));margin-inline:auto;
  border-radius:clamp(14px,1.6vw,26px);overflow:hidden;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
.bleed__shot img{width:100%;height:auto}
.bleed__legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 22px;margin-top:clamp(22px,2.8vw,38px);font-size:13px;
  color:rgba(234,246,250,.62)}
.bleed__legend span{display:inline-flex;align-items:center;gap:7px}
.bleed__legend i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.bleed__legend .lnk{font-size:14px;margin-left:6px}

/* 2. THE TRIO. Three screens in one shot, stepped so the eye reads them as one group
      rather than three chapters. The middle one sits forward; the outer two are
      dropped back and slightly dimmed, which is what stops it looking like a grid. */
.trio{padding:clamp(78px,9vw,132px) 0;overflow:hidden}
.trio__copy{text-align:center;margin-bottom:clamp(34px,4.4vw,62px)}
.trio__copy h2{max-width:22ch;margin-inline:auto}
.trio__copy .sub{margin-inline:auto;max-width:60ch}
.trio__g{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,26px);
  align-items:center;width:min(1460px,100% - var(--gut));margin-inline:auto}

/* The three screens rest slightly back and come FORWARD under the pointer: the one you are
   looking at goes to full colour and full size, lifts over its neighbours, and the other two
   drop further back so the choice is unambiguous.

   The recessed state is opacity ONLY, never a blur or a saturate filter. Both of those turn a
   screenshot of a real product into something that looks like a rendering fault, and the whole
   point of these three is that they are real screens.

   Targeting is the WRAPPER, not .trio__i. The old rules read .trio__i:nth-child(odd), but
   .trio__i is always the first (and only) child of its own wrapper, so odd matched all three
   and :nth-child(2) matched none: every screen sat recessed and the middle one never came
   forward. It looked like a deliberate wash rather than a broken selector. */
.trio__g > div{position:relative;
  transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .42s ease}
.trio__i{border-radius:14px;overflow:hidden;position:relative;
  box-shadow:0 26px 70px -34px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.07);
  transition:box-shadow .42s ease}
.trio__i img{width:100%;height:auto;display:block}
/* position+z so the label paints ABOVE the card's shadow. .trio__i is positioned and comes
   first, so without this it and its shadow paint over the caption that follows it, and on the
   light ground the hover shadow washed straight across the word. */
.trio__c{position:relative;z-index:1;
  text-align:center;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(234,246,250,.5);margin-top:17px;font-weight:600;transition:color .42s ease}

/* Resting: the outer two sit back, the middle leads. */
.trio__g > div:first-child,
.trio__g > div:last-child{transform:scale(.93);opacity:.66}
.trio__g > div:nth-child(2){z-index:2}

/* Hover, on a device that actually has a pointer. Guarded, or a phone paints the :hover state
   on tap and leaves it stuck there after the finger lifts. */
@media(hover:hover) and (pointer:fine){
  .trio__g:hover > div{opacity:.42;transform:scale(.9)}
  .trio__g > div:hover{opacity:1;transform:scale(1.07);z-index:3}
  /* Reach is what matters here, not opacity: y + blur/2 - spread is how far a shadow falls
     below the card, and the first version of this put that at ~64px with the caption 17px
     down. Kept to ~26px so the lift still reads and the label stays clear of it. */
  .trio__g > div:hover .trio__i{
    box-shadow:0 26px 60px -34px rgba(0,0,0,.9),0 0 0 1px rgba(var(--cy-rgb),.5)}
  .trio__g > div:hover .trio__c{color:var(--cy-3)}
}
@media(prefers-reduced-motion:reduce){
  .trio__g > div,.trio__i,.trio__c{transition:none}
}
@media(max-width:880px){
  .trio__g{grid-template-columns:1fr;gap:26px}
  /* Stacked, nothing is "to the side", so nothing recedes. */
  .trio__g > div:first-child,.trio__g > div:last-child{transform:none;opacity:1}
}
/* A real capture inside the browser frame. width/height attributes are on the markup so
   the box is reserved before it loads and nothing jumps; height:auto is what keeps the
   attribute from fighting max-width and squashing it. */
.shot__vp img{width:100%;height:auto;display:block}

/* ════════════════════════════════════════════════════════════════════════════
   CHAPTER SCREENS: BIGGER, AND NO LONGER OVERFLOWING
   The drawn screens were built and checked inside the hero stage, which is 1180px
   wide. A chapter frame gives roughly 770px, and the drawn app needs 982px to lay
   out, so in every chapter it silently overflowed its frame and was clipped: the
   rail ran wide, the top bar pushed the table right, and the table's own columns
   collided. It looked like a broken graphic because it was one.

   Fixed from both ends. The frame gets materially wider, which is worth doing on
   its own because these are the product and they were too small. And the drawn app
   drops the two widest things in its top bar at this size, the search field and the
   org chip, the same way the real app does when its window narrows. Nothing is
   scaled: a transform here would rasterize the screen and stretch it, which is the
   softness that took three passes to get rid of the first time.
   ════════════════════════════════════════════════════════════════════════════ */
.ch__g{grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr)}
.ch--flip .ch__g{grid-template-columns:minmax(0,1.26fr) minmax(0,.74fr)}
.ch__shot{margin-right:calc(-1 * var(--gut) - 13vw)}
.ch--flip .ch__shot{margin-right:0;margin-left:calc(-1 * var(--gut) - 13vw)}
.ch h2{max-width:16ch}

.ch .app{font-size:12px}
/* Sized off the longest real label, "Payments Engine" at the sub indent, which needs about
   129px inside a rail that also carries 9px of padding each side. */
.ch .app__rail{width:clamp(150px,16%,176px)}
.ch .app__srch,.ch .app__org{display:none}
.ch .app__bar{gap:9px}
@media(max-width:1120px){
  /* Below this the bar has to give up its segmented control too, and the rail its
     sub-items, rather than push the table off the right edge again. */
  .ch .app__seg{display:none}
}
@media(max-width:940px){
  .ch__g,.ch--flip .ch__g{grid-template-columns:1fr}
  .ch__shot,.ch--flip .ch__shot{margin:0}
}
/* Between roughly 960 and 1120 the two-column chapter simply cannot give a real
   console enough room, whatever the top bar drops. Rather than crop the product, the
   chapter stacks earlier and the screen takes the full width of the page. A narrow
   window gets a different layout, not a squeezed one. */
@media(max-width:1120px){
  .ch__g,.ch--flip .ch__g{grid-template-columns:1fr;gap:34px}
  .ch--flip .ch__copy,.ch--flip .ch__shot{order:0}
  .ch__shot,.ch--flip .ch__shot{margin:0}
  .ch h2{max-width:20ch}
}
.ch .app__brand{font-size:11.5px;letter-spacing:-.02em;gap:6px}
.ch .app__brand img{width:15px;height:15px}
/* Extra pieces the bigger station cards carry: an inline unit, a caption under a
   headline figure, small proportional bars, and a footer line with a marker. Detail
   is the point of these cards; a reader who stops on one should find something in it. */
.stn__big{display:flex;align-items:baseline;gap:8px;margin:6px 0 3px}
.stn__cap{font-size:11.5px;color:#5f7b88;margin-bottom:13px}
.stn__kv b i{font-style:normal;font-size:11.5px;font-weight:500;color:#5f7b88;margin-left:2px}
.stn__bars{display:grid;gap:9px;margin:4px 0 14px}
.stn__bars div{display:grid;grid-template-columns:1fr auto;grid-template-areas:"l v" "b b";
  gap:4px 10px;align-items:center}
.stn__bars span{grid-area:l;font-size:11.5px;color:#5f7b88}
.stn__bars b{grid-area:v;font-size:13px;font-weight:600}
.stn__bars i{grid-area:b;height:6px;border-radius:3px;background:#eaf1f4;position:relative}
.stn__bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);
  border-radius:3px;background:var(--c)}
.stn__ft{display:flex;align-items:center;gap:8px;margin-top:13px;padding-top:12px;
  border-top:1px solid #eaf1f4;font-size:11.5px;color:#5f7b88;line-height:1.4}
.stn__av{width:22px;height:22px;border-radius:50%;background:rgba(var(--cy-rgb),.18);
  color:#0e7490;font-size:9.5px;font-weight:700;display:grid;place-items:center;flex:none}
.stn__dot{width:7px;height:7px;border-radius:50%;background:var(--am);flex:none}
.stn__dot--ok{background:#16a34a}
@media(max-width:620px){
  /* A real console does not fit in 390px and pretending otherwise means cropping it.
     The frame scrolls sideways instead, so the whole screen is reachable by swiping it,
     which is what the app itself does on a phone. */
  .shot__vp{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .shot__vp .app{min-width:560px}
}
.bleed__note{color:rgba(234,246,250,.55)}

/* ════════════════════════════════════════════════════════════════════════════
   THE MESH, EVERYWHERE ELSE
   The band wears the field at full strength. Every other surface borrows the same
   geometry as a TEXTURE: one asset, laid over the section's own ground and blended
   into it, so a flat area of colour becomes a faceted one without becoming a second
   loud thing competing with the type.

   Blend rather than opacity alone is what makes one asset serve a white section and
   a black one. Multiply on a light ground darkens only where the facets are dark and
   leaves the page white between them; screen on a dark ground lifts the facets out of
   it. Both keep the seams of the triangulation, which is the part worth having.
   ════════════════════════════════════════════════════════════════════════════ */
/* overflow:hidden is load-bearing, not tidiness: the closing note's layer scales to
   1.14 as it drifts, and with nothing clipping it that widened layer pushed a
   horizontal scrollbar onto every desktop page. */
.msh{position:relative;isolation:isolate;overflow:hidden}
.msh > *{position:relative;z-index:1}
.msh::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--mesh) center/cover no-repeat;
  opacity:var(--msh-o,.1);mix-blend-mode:var(--msh-b,multiply)}

/* Light grounds. Faint enough that the facets are felt at a glance and only resolve
   into triangles if you look for them. */
.sec--tint{--msh-o:.13;--msh-b:multiply}
/* A calm ground for a section whose whole job is to be read across, row by row. The
   tint's own radials plus the mesh at .13 are fine behind copy and wrong behind a
   comparison: every facet edge competes with a row edge, which is what made the
   features hard to focus on. Flat page colour, no mesh, no radials. */
.sec--calm{background:var(--bg-2)}

/* The closing note carries more of it, because it is the last thing on the page and
   has nothing but one line and two buttons to hold the eye. */
.close{--msh-o:.2;--msh-b:multiply}
/* Pricing closes on white. That page already ends on a long tinted block of plans and
   small print, and running the mesh straight on underneath it gave the last screen no
   edge at all, so the closing line read as more of the same section rather than as the
   end of the page. The mesh is switched off here rather than dimmed: at any opacity it
   still tints, and white is the point. */
.close--plain{background:var(--bg)}
.close--plain::before{display:none}

/* The statement. Lifted off true black onto a deep teal, with the field screened over
   it hard enough that the facets and the amber corner actually register. Screen rather
   than multiply, so the mesh lifts OUT of the dark instead of muddying it. Still the
   darkest thing on the page, just no longer a flat void. */
.stmt{--msh-o:.3;--msh-b:screen}

@media(prefers-reduced-motion:no-preference){
  /* The closing note's field drifts, very slowly, so the foot of the page is not
     completely dead. Far slower than the hero: this is a surface, not an event. */
  .close::before{animation:mshDrift 90s ease-in-out infinite}
}
@keyframes mshDrift{
  0%,100%{transform:scale(1.06) translate3d(0,0,0)}
  50%    {transform:scale(1.14) translate3d(-1.6%,-1.2%,0)}
}

/* These three predate the .msh utility and carry their own grounds, so they get the
   same layer by selector rather than by adding a class to every section that uses them. */
.sec--tint::before,.stmt::before{content:"";position:absolute;inset:0;
  z-index:0;pointer-events:none;background:var(--mesh) center/cover no-repeat;
  opacity:var(--msh-o);mix-blend-mode:var(--msh-b)}
.sec--tint > *,.stmt > *{position:relative;z-index:1}

/* ════════════════════════════════════════════════════════════════════════════
   THE BOOK AT A GLANCE
   Light ground, white cards. It was a deep field with the cards floating on it; on a
   page whose hero is already dark that made two heavy blocks in the first two screens.
   The mesh is still here, laid over a tinted ground with multiply so it darkens only
   where its facets are dark, which keeps the triangulation without the weight.

   The tint is what separates this from the plain white chapter directly below it, so
   the two light sections still read as two.
   ════════════════════════════════════════════════════════════════════════════ */
.mx{position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(80px,10vw,150px) 0;background:var(--bg-2)}
.mx::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--mesh) center/cover no-repeat;opacity:.17;mix-blend-mode:multiply}
/* A wash that keeps the centre of the band pale, so the heading sits on near-white
   rather than on whichever facet happens to land behind it. */
.mx::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(1200px 620px at 50% 12%,rgba(255,255,255,.92),transparent 72%)}
.mx > *{position:relative;z-index:1}
.mx__top{text-align:center;margin-bottom:clamp(34px,4.4vw,62px)}
.mx__top h2{max-width:22ch;margin-inline:auto}
.mx__top .sub{margin-inline:auto;max-width:56ch}
/* The eyebrow takes a short rule on its left, as in the reference. */
.kick--rule{display:inline-flex;align-items:center;gap:11px;color:var(--cy)}
.kick--rule::before{content:"";width:22px;height:1.5px;background:currentColor;opacity:.7}

.mx__g{display:grid;gap:clamp(13px,1.4vw,20px);
  grid-template-columns:1fr 1.06fr 1fr;
  grid-template-areas:"gauge trend top" "fees fees pipe"}
.mx__c--gauge{grid-area:gauge} .mx__c--trend{grid-area:trend}
.mx__c--top{grid-area:top}     .mx__c--fees{grid-area:fees}
.mx__c--pipe{grid-area:pipe}
.mx__c{background:#fff;color:var(--ink);border-radius:16px;padding:20px 22px 22px;
  display:flex;flex-direction:column;
  box-shadow:0 1px 2px var(--shadow-1),0 18px 44px -30px rgba(6,112,140,.5),
             0 0 0 1px rgba(11,36,48,.055)}
.mx__h{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.mx__h b{font-size:15px;font-weight:600;letter-spacing:-.02em}
.mx__h span{margin-left:auto;font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.mx__note{margin-top:auto;padding-top:14px;font-size:12px;color:var(--ink-2)}
.mx__note b{color:var(--ink);font-weight:600}
.mx__p{margin-top:14px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}

/* gauge ─ one arc, drawn on the same fraction as everything else */
.mx__gauge{position:relative;display:grid;place-items:center}
.mx__gauge svg{width:100%;max-width:230px;height:auto;overflow:visible}
.mx__trk{fill:none;stroke:#e6eef1;stroke-width:17;stroke-linecap:round}
.mx__arc{fill:none;stroke:url(#mxg);stroke:var(--cy-2);stroke-width:17;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - .925 * var(--f,1))}
.mx__val{position:absolute;bottom:2px;font-size:clamp(28px,2.9vw,38px);font-weight:700;
  letter-spacing:-.04em}

/* trend ─ the line draws, the fill comes up behind it */
.mx__spark{margin:2px 0 4px}
.mx__spark svg{width:100%;height:clamp(96px,10vw,132px);display:block}
.mx__grid{stroke:#eef4f6;stroke-width:1;fill:none}
.mx__area{fill:rgba(var(--cy-rgb),.13);opacity:var(--f,1)}
.mx__line{fill:none;stroke:var(--cy);stroke-width:2.4;stroke-linejoin:round;
  stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--f,1))}
.mx__dot{fill:#fff;stroke:var(--cy);stroke-width:3;
  opacity:clamp(0,calc((var(--f,1) - .8)/.2),1)}

/* top merchants */
.mx__ms{display:grid;gap:2px}
.mx__m{display:flex;align-items:center;gap:11px;padding:9px 0;font-size:13.5px}
.mx__av{width:27px;height:27px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:var(--c);color:#fff;font-size:10px;font-weight:700;letter-spacing:.02em}
.mx__m b{font-weight:500}
.mx__m em{margin-left:auto;font-style:normal;font-weight:600;color:var(--cy);
  letter-spacing:.01em;font-variant-numeric:tabular-nums}

/* where the fees go */
.mx__fs{display:grid;gap:11px}
.mx__f{display:grid;grid-template-columns:120px 1fr auto;gap:14px;align-items:center;
  font-size:13px;color:var(--ink-2)}
.mx__f i{height:9px;border-radius:5px;background:#eef3f5;position:relative;overflow:hidden}
.mx__f i::after{content:"";position:absolute;inset:0 auto 0 0;border-radius:5px;
  width:calc(var(--w) * var(--f,1));background:var(--c)}
.mx__f b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* pipeline */
.mx__ps{display:grid;gap:15px}
.mx__p s,.mx__p{}
.mx__ps > div{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:baseline}
.mx__ps span{font-size:13.5px;font-weight:500}
.mx__ps b{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.mx__ps i{grid-column:1/-1;height:7px;border-radius:4px;background:#eef3f5;
  position:relative;overflow:hidden}
.mx__ps i::after{content:"";position:absolute;inset:0 auto 0 0;border-radius:4px;
  width:calc(var(--w) * var(--f,1));background:var(--c)}

@media(max-width:1020px){
  .mx__g{grid-template-columns:1fr 1fr;
    grid-template-areas:"gauge trend" "top top" "fees fees" "pipe pipe"}
}
@media(max-width:680px){
  .mx__g{grid-template-columns:1fr;
    grid-template-areas:"gauge" "trend" "top" "fees" "pipe"}
  .mx__f{grid-template-columns:1fr auto;gap:4px 12px}
  .mx__f i{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
  .mx__arc{stroke-dashoffset:calc(1 - .925)}
  .mx__line{stroke-dashoffset:0} .mx__area,.mx__dot{opacity:1}
}

/* Six tiers, not three. Two rows of three on a wide screen, and the cards carry a flag
   and a features list of the same length so the row reads as one block rather than a
   ragged set. */
.p{position:relative}
.p__tag{position:absolute;top:0;right:clamp(26px,2.8vw,36px);transform:translateY(-50%);
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:var(--am);color:#2a1a02;padding:5px 11px;border-radius:999px}
.p__amt--txt{font-size:clamp(26px,2.6vw,32px);letter-spacing:-.03em}
.p__fine{margin-top:clamp(24px,3vw,38px);font-size:13px;line-height:1.6;
  color:var(--ink-2);max-width:88ch;margin-inline:auto;text-align:center}
@media(max-width:1020px){ .plan{grid-template-columns:repeat(2,1fr)} }
@media(max-width:680px){ .plan{grid-template-columns:1fr} }

/* ════════════════════════════════════════════════════════════════════════════
   THE TOOLS DECK
   Same mechanism as the Themes deck, different cards: these are real captures in
   a window rather than drawn dashboards, so the card is a frame with a chrome bar
   and the screenshot filling the rest of it.
   ════════════════════════════════════════════════════════════════════════════ */
.tk{position:relative;background:
  radial-gradient(880px circle at 88% -8%,rgba(var(--cy-rgb),.09),transparent 58%),var(--bg)}
.tk__track{position:relative}
/* The clip goes HERE, on the sticky element itself, not on .tk. overflow:hidden on an
   ancestor of a sticky element makes it a scroll container and the stickiness stops
   working entirely; on the sticky element it is just a clip. */
.tk__stage{position:sticky;top:48px;min-height:calc(100svh - 48px);
  display:flex;align-items:center;padding:44px 0;overflow:hidden}
/* No width:100% here. .wrap already sets its own width and centres itself with auto
   inline margins, and overriding that inside a flex stage left the copy flush against
   the viewport edge with no gutter at all. */
/* The deck takes most of the row. These are screenshots of a dense console, so the
   only thing that makes them readable is width: the copy column gives up everything it
   can spare and the deck bleeds a long way past the right edge on top of that. */
.tk__g{display:grid;grid-template-columns:minmax(0,.56fr) minmax(0,1.44fr);
  gap:clamp(24px,2.8vw,44px);align-items:center}
.tk__h{font-size:clamp(23px,2.5vw,34px);font-weight:700;letter-spacing:-.034em;
  line-height:1.1;min-height:3.4em;margin-top:13px}
.tk__p{margin-top:12px;font-size:15px;line-height:1.55;color:var(--ink-2);
  max-width:40ch;min-height:7.8em}
.tk__ticks{margin-top:22px}
/* The deck bleeds off the right edge, so the stack reads as continuing past the page
   rather than sitting in a box. overflow:hidden is required: a card parked at
   --x:106% escapes the deck's box with nothing else to stop it. */
.tk__viz{margin-right:calc(-1 * var(--gut) - 16vw)}
.tk__deck{position:relative;height:clamp(340px,44vw,640px);overflow:hidden;
  border-radius:var(--r-lg)}
.tkcard{position:absolute;inset:0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--chrome-a);
  transform:translateX(var(--x,0)) scale(var(--s,1));transform-origin:50% 100%;
  box-shadow:0 30px 80px -34px rgba(8,60,80,.5),0 0 0 1px rgba(11,36,48,.07);
  display:flex;flex-direction:column;will-change:transform}
.tkcard__bar{display:flex;align-items:center;gap:9px;padding:7px 12px;flex:none;
  background:var(--chrome-bar);border-bottom:1px solid rgba(11,36,48,.07)}
.tkcard__tl{display:flex;gap:5px;flex:none}
.tkcard__tl i{width:8px;height:8px;border-radius:50%;background:#e0e6ea}
.tkcard__tl i:nth-child(1){background:#f0685f}
.tkcard__tl i:nth-child(2){background:#f4be4f}
.tkcard__tl i:nth-child(3){background:#61c454}
.tkcard__url{flex:1;background:var(--chrome-url);border-radius:999px;padding:3px 11px;
  font-size:11px;color:var(--chrome-ink-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.tkcard__url b{color:var(--chrome-ink);font-weight:500}
.tkcard img{flex:1;width:100%;min-height:0;object-fit:cover;object-position:top center}

/* The tools that have no capture yet. Named, not drawn: a drawn card sitting in a deck
   of photographs is the thing that would give the whole row away. */
.tk__also{display:flex;flex-wrap:wrap;align-items:center;gap:9px 10px;
  padding-bottom:clamp(60px,7vw,100px);justify-content:center}
.tk__also span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--ink-3);margin-right:6px}
.tk__also b{font-size:13px;font-weight:500;color:var(--ink-2);
  background:var(--bg-2);border:1px solid var(--hair);border-radius:999px;padding:6px 14px}

@media(max-width:940px){
  /* A stack is a desktop idea. On a phone the nine are simply nine windows you scroll
     past, which is the layout that reads there rather than a squeezed version of this. */
  .tk__track{height:auto!important}
  .tk__stage{position:static;min-height:0;padding:0;overflow:visible}
  .tk__g{grid-template-columns:1fr;gap:26px}
  .tk__viz{margin-right:0}
  .tk__h,.tk__p{display:none}
  .tk__deck{height:auto;overflow:visible;display:grid;gap:18px;border-radius:0}
  .tkcard{position:relative;inset:auto;transform:none!important;opacity:1!important;
    height:clamp(240px,62vw,340px)}
  .tk__also{padding-top:8px}
}

/* The closing section now carries the footer too, so it keeps its top padding and gives
   up the bottom one; the footer supplies the tail. */
.close{padding-bottom:0}
/* Two full sections meeting put 170px of bottom padding against 170px of top padding, which
   is 340px of nothing between the last card and the closing line. Collapse one side when the
   close follows a section, the way a margin would if these were not both padded. Four of the
   five pages hit this, so it is fixed on the rule rather than on the page that showed it. */
.sec + .close{padding-top:clamp(30px,4vw,56px)}

@media(max-width:700px){ .foot__n{gap:9px 18px} }


/* ════════════════════════════════════════════════════════════════════════════
   FEATURE SECTIONS
   Copy on one side, a drawn panel of the thing on the other, sides alternating,
   a hairline between each.
   ════════════════════════════════════════════════════════════════════════════ */
.ft{padding:clamp(48px,5.6vw,84px) 0;position:relative}
.ft + .ft{border-top:1px solid var(--hair)}
.ft__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,4.6vw,76px);align-items:center;text-align:left}
.ft--flip .ft__c{order:2}
.ft h3{font-size:clamp(24px,2.7vw,36px);font-weight:700;letter-spacing:-.034em;
  line-height:1.1;margin:12px 0 14px;max-width:17ch}
.ft p{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:46ch}
.ft__l{list-style:none;margin-top:18px;display:grid;gap:11px}
.ft__l li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.5;
  color:var(--ink-2)}
/* A ring rather than a tick: these are specifics, not a checklist of claims. */
.ft__l li::before{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;
  border-radius:50%;border:2px solid var(--cy-2)}

/* The panel. A white card on a soft coloured bed, which is what stops a drawn UI
   reading as a wireframe floating on the page. */
.ft__v{position:relative}
.fp{background:#fff;border-radius:16px;padding:18px 20px 19px;color:var(--ink);
  box-shadow:0 2px 4px var(--shadow-1),0 30px 70px -36px rgba(6,112,140,.55),
             0 0 0 1px rgba(11,36,48,.06);position:relative;z-index:1}
.ft__v::before{content:"";position:absolute;inset:14px -10px -14px 22px;border-radius:20px;
  background:linear-gradient(135deg,rgba(var(--cy-rgb),.5),rgba(226,156,36,.32));
  filter:blur(26px);opacity:.55}
.fp__hd{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.fp__hd b{font-size:14.5px;font-weight:600;letter-spacing:-.02em}
.fp__pill{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;flex:none;
  background:#eef4f7;color:var(--ink-2)}
.fp__pill--ok{background:rgba(22,163,74,.13);color:#15803d}
.fp__pill--warn{background:rgba(226,156,36,.16);color:#a06a08}
.fp__row{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:13px;
  color:var(--ink-2);border-bottom:1px solid #eef3f5}
.fp__row:last-of-type{border-bottom:0}
.fp__row b{margin-left:auto;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.fp__row b.g{color:#15803d}
.fp__split{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 12px}
.fp__split div{background:#f4f9fb;border-radius:10px;padding:10px 12px}
.fp__split > div > span{display:block;font-size:10.5px;color:var(--ink-2);margin-bottom:3px}
.fp__split b{font-size:19px;font-weight:600;letter-spacing:-.03em}
.fp__split b.g{color:#15803d}
.fp__split b i{font-style:normal;font-size:11px;font-weight:500;color:var(--ink-2)}
.fp__steps{display:flex;gap:5px;margin:11px 0 13px}
.fp__steps div{flex:1;text-align:center;font-size:9.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:6px 2px;border-radius:7px;background:#f1f6f8;color:#8aa3ac}
.fp__steps div.on{background:rgba(var(--cy-rgb),.16);color:var(--cy-deep)}
.fp__fields{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:4px}
.fp__fields div{background:#f6fafb;border:1px solid #e7eff2;border-radius:9px;padding:8px 10px}
.fp__fields span{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:3px}
.fp__fields i{font-style:normal;font-size:13px;font-weight:500}
.fp__checks{display:grid;gap:7px;margin:11px 0 4px}
.fp__checks div{position:relative;padding-left:22px;font-size:12.5px;color:var(--ink-2)}
.fp__checks div::before{content:"";position:absolute;left:0;top:2px;width:13px;height:13px;
  border-radius:4px;background:#eef3f5}
.fp__checks div.on::before{background:#16a34a}
.fp__checks div.on::after{content:"";position:absolute;left:4px;top:5.5px;width:5px;height:2.5px;
  border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg)}
.fp__tbl{display:grid;gap:0;margin:4px 0;font-size:12.5px}
.fp__tbl div{display:grid;grid-template-columns:1fr auto auto;gap:14px;padding:7px 0;
  border-bottom:1px solid #eef3f5;color:var(--ink-2)}
.fp__tbl div span:not(:first-child){min-width:52px;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.fp__tbl .h{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.fp__tbl .h span{color:var(--ink-3)!important}
.fp__tbl .bad span:nth-child(2){color:#b45309;font-weight:600}
.fp__tree{display:grid;gap:7px;margin:4px 0 6px}
.fp__tree div{display:flex;align-items:center;gap:9px;font-size:13px;padding:6px 0}
.fp__tree i{font-style:normal;width:24px;height:24px;border-radius:7px;flex:none;
  display:grid;place-items:center;font-size:9.5px;font-weight:700;
  background:rgba(var(--cy-rgb),.15);color:var(--cy-deep)}
.fp__tree b{margin-left:auto;font-size:12px;font-weight:600;color:var(--ink-2)}
.fp__tree .l1{padding-left:20px} .fp__tree .l2{padding-left:40px}
.fp__tree .l1::before,.fp__tree .l2::before{content:"";width:12px;height:1px;
  background:var(--hair);margin-right:-4px}
.fp__bars{display:grid;gap:12px;margin:4px 0 6px}
.fp__bars div{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:baseline}
.fp__bars span{font-size:12.5px;color:var(--ink-2)}
.fp__bars b{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.fp__bars i{grid-column:1/-1;height:6px;border-radius:3px;background:#eef3f5;position:relative}
.fp__bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);
  border-radius:3px;background:var(--cy-2)}
.fp__sig{border-top:1px solid #eef3f5;margin-top:10px;padding-top:11px;
  font:500 21px/1 'Outfit',sans-serif;letter-spacing:-.01em}
.fp__foot{display:flex;align-items:center;gap:8px;margin-top:13px;padding-top:12px;
  border-top:1px solid #eef3f5;font-size:11.5px;color:var(--ink-2);line-height:1.4}
.fp__dot{width:7px;height:7px;border-radius:50%;background:var(--cy-2);flex:none}
.fp__dot--ok{background:#16a34a} .fp__dot--warn{background:var(--am)}
@media(max-width:880px){
  .ft__g{grid-template-columns:1fr;gap:28px}
  .ft--flip .ft__c{order:0}
  .ft h3{max-width:none}
  .ft__v::before{inset:12px -6px -10px 14px}
}

/* ════════════════════════════════════════════════════════════════════════════
   THE PANELS, RUNNING
   A drawn panel that just sits there is a diagram. These build when they reach
   you and never go completely still afterwards.

   TWO KINDS OF MOTION, on purpose:
     1. SCROLL-DRIVEN, off one --f per panel. Bars fill, steps light one after
        another, checks tick in order, rows and tree levels arrive, the signature
        writes itself, figures count up. Reversing the scroll reverses all of it,
        because every value is derived from the fraction rather than triggered.
     2. AMBIENT, on a timer, because a page you are not scrolling should still be
        alive. A status light pulses, a caret blinks in the field being typed into,
        and a soft sheen crosses each panel on a long loop, staggered per section so
        something is always moving without everything moving at once.

   Nothing that carries a NUMBER moves on the ambient loop. Figures animate only on
   the way in and then hold, because a number that drifts on its own is a lie about
   live data.
   ════════════════════════════════════════════════════════════════════════════ */
.fp{overflow:hidden}
/* Stagger. One index per child, so a single fraction lights them in sequence. */
.fp__steps div,.fp__checks div,.fp__tree div,.fp__row,.fp__bars div,.fp__fields div{
  --on:clamp(0,calc((var(--f,1) - var(--d,0))/.22),1)}
.fp__steps div:nth-child(1),.fp__checks div:nth-child(1),.fp__tree div:nth-child(1),
.fp__row:nth-of-type(1),.fp__bars div:nth-child(1),.fp__fields div:nth-child(1){--d:.06}
.fp__steps div:nth-child(2),.fp__checks div:nth-child(2),.fp__tree div:nth-child(2),
.fp__row:nth-of-type(2),.fp__bars div:nth-child(2),.fp__fields div:nth-child(2){--d:.17}
.fp__steps div:nth-child(3),.fp__checks div:nth-child(3),.fp__tree div:nth-child(3),
.fp__row:nth-of-type(3),.fp__bars div:nth-child(3),.fp__fields div:nth-child(3){--d:.28}
.fp__steps div:nth-child(4),.fp__checks div:nth-child(4),.fp__tree div:nth-child(4),
.fp__row:nth-of-type(4),.fp__fields div:nth-child(4){--d:.39}
.fp__tree div:nth-child(5){--d:.50}

/* bars fill */
.fp__bars i::after{width:calc(var(--w) * var(--on,1))}
/* steps light */
.fp__steps div{position:relative;overflow:hidden;background:#f1f6f8;color:#8aa3ac;z-index:0}
.fp__steps div.on::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:rgba(var(--cy-rgb),.16);opacity:var(--on,1)}
.fp__steps div.on{color:color-mix(in srgb,var(--cy-deep) calc(var(--on,1)*100%),#8aa3ac)}
/* checks tick */
.fp__checks div.on::before{background:color-mix(in srgb,#16a34a calc(var(--on,1)*100%),#eef3f5)}
.fp__checks div.on::after{opacity:var(--on,1)}
/* rows and tree arrive */
.fp__row,.fp__fields div{opacity:calc(.15 + .85*var(--on,1));
  transform:translateY(calc(6px - 6px*var(--on,1)))}
.fp__tree div{opacity:calc(.15 + .85*var(--on,1));
  transform:translateX(calc(-10px + 10px*var(--on,1)))}
/* the signature writes itself */
.fp__sig{clip-path:inset(0 calc((1 - clamp(0,calc((var(--f,1) - .42)/.42),1)) * 100%) 0 0)}

/* ── ambient ── */
.fp__dot{animation:fpDot 2.8s ease-out infinite}
.fp__dot--ok{animation-name:fpDotOk}
.fp__dot--warn{animation-name:fpDotWarn}
@keyframes fpDot{0%{box-shadow:0 0 0 0 rgba(var(--cy-rgb),.55)}
  70%,100%{box-shadow:0 0 0 9px rgba(var(--cy-rgb),0)}}
@keyframes fpDotOk{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}
  70%,100%{box-shadow:0 0 0 9px rgba(22,163,74,0)}}
@keyframes fpDotWarn{0%{box-shadow:0 0 0 0 rgba(226,156,36,.55)}
  70%,100%{box-shadow:0 0 0 9px rgba(226,156,36,0)}}
/* a caret in the field being typed into */
.fp__fields i u{display:inline-block;width:1.5px;height:12px;background:var(--cy);
  margin-left:2px;vertical-align:-1px;animation:fpCaret 1.05s steps(1) infinite}
@keyframes fpCaret{0%,50%{opacity:1}50.01%,100%{opacity:0}}
/* one sheen crossing the glass, staggered so the page always has one running */
.fp::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(104deg,transparent 42%,rgba(255,255,255,.6) 50%,transparent 58%);
  transform:translateX(-130%);animation:fpSheen 9s ease-in-out infinite var(--sheen,0s)}
@keyframes fpSheen{0%{transform:translateX(-130%)}
  26%,100%{transform:translateX(130%)}}
/* The delay is stamped on each section in the markup. nth-of-type here would count
   every <section> on the page, not every .ft, so the selectors matched nothing. */
@media(prefers-reduced-motion:reduce){
  .fp__dot,.fp__fields i u{animation:none}
  .fp::after{display:none}
  .fp__sig{clip-path:none}
  .fp__row,.fp__fields div,.fp__tree div{opacity:1;transform:none}
}
@media(max-width:1020px){
  /* A four-step row cannot hold "Underwritten" at this width, and shrinking the type
     until it fits would make it unreadable. It wraps into two rows of two instead. */
  .fp__steps{flex-wrap:wrap}
  .fp__steps div{flex:1 1 calc(50% - 3px)}
}
/* The hero headline is a sentence now, not two short phrases. At the global h1 size it
   wrapped to four lines and stopped reading as a headline; this is the size that holds
   it on the two the <br> intends. */
.hero h1{font-size:clamp(36px,5.9vw,70px);line-height:1.06}

/* ════════════════════════════════════════════════════════════════════════════
   THE PATH
   Six numbered rows that say what the rest of the page is about to walk through.
   They arrive in sequence off one scroll fraction, and the row you are level with
   lights, so the list reads as a route rather than a table of contents.
   ════════════════════════════════════════════════════════════════════════════ */
.stg{padding:clamp(72px,9vw,128px) 0;background:
  radial-gradient(900px circle at 88% -10%,rgba(var(--cy-rgb),.08),transparent 58%),var(--bg)}
.stg__top{margin-bottom:clamp(32px,4vw,58px)}
.stg__top h2{max-width:18ch;margin-inline:0}
.stg__top .sub{margin-inline:0;max-width:56ch}
.stg{text-align:left}
.stg__g{border-top:1px solid var(--hair)}
.stg__r{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.5fr);
  gap:clamp(16px,2.4vw,40px);align-items:start;
  padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--hair);
  position:relative;
  opacity:clamp(.18,calc((var(--f,1) - var(--d,0))/.2),1);
  transform:translateY(calc(10px - 10px*clamp(0,calc((var(--f,1) - var(--d,0))/.2),1)))}
/* A tint that wipes in behind the row as it arrives, so the list builds rather than
   simply appearing. */
.stg__r::before{content:"";position:absolute;inset:0 -18px;border-radius:12px;z-index:-1;
  background:linear-gradient(90deg,rgba(var(--cy-rgb),.09),transparent 72%);
  transform:scaleX(clamp(0,calc((var(--f,1) - var(--d,0))/.24),1));transform-origin:0 50%}
.stg__n{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--cy);
  padding-top:5px;font-variant-numeric:tabular-nums}
.stg__t{font-size:clamp(17px,1.7vw,21px);font-weight:600;letter-spacing:-.022em;
  line-height:1.25}
.stg__b p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0}
.stg__k{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.stg__k b{font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);background:var(--bg-2);border:1px solid var(--hair);
  border-radius:6px;padding:4px 8px}
@media(max-width:820px){
  .stg__r{grid-template-columns:44px 1fr;gap:12px 14px}
  .stg__b{grid-column:2}
  .stg__r::before{inset:0 -10px}
}
@media(prefers-reduced-motion:reduce){
  .stg__r{opacity:1;transform:none}
  .stg__r::before{transform:none}
}

/* ════════════════════════════════════════════════════════════════════════════
   ISO IN A BOX
   The package is stated as ONE checklist of what arrives, not split by which company
   supplies which line. It was two sourced cards, which asked a reader to hold a
   corporate structure in their head before they had decided they wanted the thing.
   Locked 2026-09-24; do not re-introduce supplier labels here.
   ════════════════════════════════════════════════════════════════════════════ */
.box{padding:clamp(76px,9vw,132px) 0;position:relative;isolation:isolate;overflow:hidden}
.box::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--mesh) center/cover no-repeat;opacity:.26;mix-blend-mode:screen}
.box > *{position:relative;z-index:1}
.box__top{text-align:center;margin-bottom:clamp(34px,4.4vw,60px)}
.box__top h2{max-width:20ch;margin-inline:auto;color:#fff}
.box__top .sub{margin-inline:auto;max-width:62ch;color:#a8c8d4}
.box__g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px);text-align:left}
.box__c{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r);padding:clamp(22px,2.6vw,34px)}
/* The one you cannot build for yourself gets the brand ring and the glow. */
.box__c--own{background:rgba(var(--cy-rgb),.07);border-color:rgba(var(--cy-rgb),.34);
  box-shadow:0 0 60px -22px rgba(var(--cy-rgb),.5)}
.box__k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cy-3);margin-bottom:12px}
.box__c--own .box__k{color:var(--cy-2)}
.box__c h3{font-size:clamp(19px,1.9vw,24px);font-weight:600;letter-spacing:-.025em;
  color:#fff;margin-bottom:16px}
.box__c ul{list-style:none;display:grid;gap:12px}
.box__c li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.55;
  color:#a8c8d4}
.box__c li b{color:#eaf6fa;font-weight:600}
.box__c li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;
  border-radius:50%;border:2px solid var(--cy-2)}
.box__c--own li::before{background:var(--cy-2);border-color:var(--cy-2)}

.box__f{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 10px;
  margin-top:clamp(24px,3vw,38px)}
.box__f span{font-size:12.5px;font-weight:500;color:#a8c8d4;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:6px 14px}
.box__cta{justify-content:center;margin-top:clamp(22px,2.6vw,34px)}
@media(max-width:860px){ .box__g{grid-template-columns:1fr} }
/* On its own page the package section gives up the opener it carried inline on the
   home page, and the page header supplies it instead. */
.box--pg{padding-top:clamp(20px,2.4vw,36px)}

/* ── how it works, and who it is for ── */
.hw{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,26px);
  margin-top:clamp(28px,3.4vw,48px);text-align:left}
.hw__s span{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;
  color:var(--cy);margin-bottom:10px;font-variant-numeric:tabular-nums}
.hw__s b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.022em;
  margin-bottom:8px;line-height:1.25}
.hw__s p{font-size:14px;line-height:1.6;color:var(--ink-2)}
.hw__s{padding-top:16px;border-top:2px solid rgba(var(--cy-rgb),.35)}
/* Cards, not bubbles: each one leads with the screen that persona lives in, so the
   section shows the product rather than describing four kinds of reader. The image is
   a real capture, clipped to a fixed ratio so four different source aspects still line
   up, and anchored top so the app's own header stays in frame when it is cropped. */
.who{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px);
  margin-top:clamp(34px,4vw,54px);text-align:left}
.who__c{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 18px 44px -28px var(--shadow-2);
  transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s ease}
.who__i{aspect-ratio:16/8.2;overflow:hidden;background:var(--bg-2);
  border-bottom:1px solid var(--hair)}
/* 80% opacity, so the photography sits back behind the copy rather than competing with it.
   The tile under it is the page's own pale ground, so what shows through is the site, not
   white. Full strength on hover, which gives the card somewhere to go. */
.who__i img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;
  opacity:.8;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .35s ease}
.who__t{padding:clamp(18px,2vw,26px)}
.who__c b{display:block;font-size:17px;font-weight:600;letter-spacing:-.022em;
  color:var(--ink);margin-bottom:8px}
.who__c p{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
@media(hover:hover) and (pointer:fine){
  .who__c:hover{transform:translateY(-3px);box-shadow:0 26px 56px -26px var(--shadow-2)}
  .who__c:hover .who__i img{transform:scale(1.035);opacity:1}
}
@media(max-width:700px){ .who{grid-template-columns:1fr} }
@media(max-width:940px){ .hw{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .hw,.who{grid-template-columns:1fr} }

/* ── the inventory ── */
.inv{text-align:left}
.inv__top{text-align:center;margin-bottom:clamp(30px,3.8vw,52px)}
.inv__top h2{margin-inline:auto}
.inv__top .sub{margin-inline:auto;max-width:56ch}
.inv__g{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(13px,1.5vw,22px)}
.inv__c{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);
  padding:clamp(20px,2.2vw,28px);box-shadow:0 1px 2px var(--shadow-1)}
.inv__k{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cy);margin-bottom:9px}
.inv__c h3{font-size:18px;font-weight:600;letter-spacing:-.024em;margin-bottom:8px}
.inv__d{font-size:13.5px;line-height:1.55;color:var(--ink-2);
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--hair)}
.inv__c ul{list-style:none;display:grid;gap:10px}
.inv__c li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.5;
  color:var(--ink-2)}
.inv__c li::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;
  border-radius:50%;border:1.8px solid var(--cy-2)}
@media(max-width:1180px){ .inv__g{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .inv__g{grid-template-columns:1fr} }

/* A drawn panel standing in a chapter's shot column, where that stage has no capture
   yet. Same component as the Tools feature panels, so when a capture arrives the swap
   is markup only. */
.ch__shot--fp{margin:0!important;display:flex;align-items:center}
.ch__shot--fp .fp{width:100%;padding:clamp(20px,2.3vw,28px)}
.sec--dark .ch__shot--fp .fp{box-shadow:0 2px 4px rgba(0,0,0,.2),
  0 34px 80px -38px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08)}
.ch__shot--fp .fp__rows{display:grid;font-size:13px}
.ch__shot--fp .fp__rows div{display:flex;align-items:center;gap:12px;padding:8px 0;
  border-bottom:1px solid #eef3f5;color:var(--ink-2)}
.ch__shot--fp .fp__rows div:last-child{border-bottom:0}
.ch__shot--fp .fp__rows b{margin-left:auto;font-weight:600;color:var(--ink)}
/* The trio carries a stage heading on the home page, so it needs the light treatment
   too; it was only ever used on a dark ground before. */
.trio:not(.sec--dark) .trio__c{color:var(--ink-3)}
.trio:not(.sec--dark) .trio__i{box-shadow:0 26px 70px -36px rgba(6,112,140,.55),
  0 0 0 1px rgba(11,36,48,.08)}
@media(hover:hover) and (pointer:fine){
  .trio:not(.sec--dark) .trio__g > div:hover .trio__i{
    box-shadow:0 24px 56px -34px rgba(6,112,140,.7),0 0 0 1px rgba(var(--cy-rgb),.55)}
  .trio:not(.sec--dark) .trio__g > div:hover .trio__c{color:var(--cy)}
}

/* ════════════════════════════════════════════════════════════════════════════
   THE FIGURES BAR
   Four numbers set large and ruled, sitting between the hero and the book panel.
   It is a bar rather than a section: no heading, no padding to speak of, just the
   numbers and their labels, so it reads as a ledger line under the headline rather
   than as a second hero.

   Every figure is checkable against a page on this site. Modules are the inventory
   published on the ISO in a box page (53 items in 8 groups, so "40+" understates it
   rather than reaching). Connectors are the 22 named in the marquee on Tools.
   "$0" is the same pricing claim the Pricing and Compare pages make in words.

   It carries --f from the same driver as the .fp panels, so the numbers count up on
   the way in and the columns arrive one after another. The counters SNAP to their
   real value at the top of the range: a figure still ticking would read as live data,
   and none of it is live.
   ════════════════════════════════════════════════════════════════════════════ */
.figs{position:relative;isolation:isolate;background:var(--bg-2);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.figs::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--mesh-lt) center/cover no-repeat;opacity:.5;mix-blend-mode:multiply}
.figs__g{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr)}
.fig{padding:clamp(26px,3.2vw,42px) clamp(18px,2vw,30px);
  border-right:1px solid var(--hair);
  /* All four arrive TOGETHER, and only once the bar has been reached. Scrubbing this to the
     wheel (which it did) leaves the bar half-built on first paint: it already overlaps the
     fold, so the counters sat frozen partway up at 16+ and 9+ while the last two columns
     waited on a stagger that had not started. A bar of four figures is one object. */
  opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.figs--in .fig{opacity:1;transform:none}
.fig:last-child{border-right:0}
.fig b{display:block;font-family:var(--logo);font-weight:800;
  font-size:clamp(34px,4.2vw,58px);line-height:.92;letter-spacing:-.035em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.fig b em{font-style:normal;color:var(--cy)}
.fig > span{display:block;margin-top:12px;font-size:13px;line-height:1.5;color:var(--ink-2)}
/* The counter's own span lives INSIDE the <b> and must not pick up the label rule,
   which would break the figure onto its own line away from its suffix. */
.fig b span{display:inline;margin:0;font:inherit;color:inherit}
@media(max-width:860px){
  .figs__g{grid-template-columns:repeat(2,1fr)}
  .fig:nth-child(2n){border-right:0}
  .fig:nth-child(-n+2){border-bottom:1px solid var(--hair)}
}
/* Stays 2-up down to the narrowest common phone; one column is only for the very
   narrow case, because four full-width rows cost a whole screen on the way in. */
@media(max-width:359px){
  .figs__g{grid-template-columns:1fr}
  .fig{border-right:0}
  .fig:not(:last-child){border-bottom:1px solid var(--hair)}
}
@media(prefers-reduced-motion:reduce){ .fig{opacity:1;transform:none;transition:none} }

/* ════════════════════════════════════════════════════════════════════════════
   TEXT REVEAL
   The Apple treatment on copy: a line does not simply exist when you reach it, it
   lifts in a moment after the block around it starts to clear the fold, and the lines
   under it follow one at a time.

   This one is a TRIGGER rather than a scrub, which is the opposite of everything else
   on this page and is deliberate. A scrubbed reveal ties the text's opacity to the
   wheel, so a reader who stops mid-scroll is left holding a half-faded sentence they
   cannot read. Apple scrubs objects and triggers type for exactly that reason. Script
   decides only WHEN (on the scroll event, like everything else) and hands the timing
   to a CSS transition, so the reveal always completes once it has begun.

   The delay is per item within its block, not global: the kicker leads, the headline
   follows, then each line under it. Capped, because a block of eight bullets whose
   last one waited three quarters of a second reads as broken rather than as staged.

   Nothing hides again on the way back up. A reader scrolling up is re-reading, and
   re-hiding the thing they are going back for is hostile.
   ════════════════════════════════════════════════════════════════════════════ */
.rv{opacity:0;transform:translateY(20px);will-change:opacity,transform;
  transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--rd,0s)}
.rv--in{opacity:1;transform:none}
/* Dropped once it has landed so a long page is not holding dozens of promoted layers. */
.rv--done{will-change:auto;transition:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
}

/* Penumbra is a separate brand with its own site, so the mention is a real link out. It keeps
   whatever colour its context already gave the name (cyan on the dark panels, the accent inside
   the dashboard mock) rather than inventing a third link style, and only picks up an underline
   on hover. target=_blank because it leaves this site. */
.pnk{color:inherit;text-decoration:none}
/* The rule sits on the inner <b>, not the <a>. The anchor inherits its parent's colour (muted
   grey in the dashboard mock) while the <b> carries the accent, so an underline on the anchor
   would be grey under coloured text. */
.pnk b{border-bottom:1px solid transparent;transition:border-color .2s ease}
.pnk:hover b,.pnk:focus-visible b{border-bottom-color:currentColor}
.pnk:focus-visible{outline:2px solid var(--cy-2);outline-offset:3px;border-radius:2px}

/* ════════════════════════════════════════════════════════════════════════════
   THE FORM
   One form, two paths. The interest selector is the only thing that changes what
   is asked, and the path fieldsets are `hidden` in the markup rather than styled
   away, so a reader with no JavaScript is shown everything and can still answer
   rather than being shown an unanswerable form.
   ════════════════════════════════════════════════════════════════════════════ */
.qf{max-width:760px;margin:clamp(34px,4vw,54px) auto 0;text-align:left}
.qf__hp{position:absolute;left:-9999px}
.qf__set{border:0;padding:0;margin:0 0 clamp(26px,3vw,38px)}
.qf__set legend{padding:0;font-size:12px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--cy);margin-bottom:14px}
.qf__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.qf__f{display:flex;flex-direction:column;gap:7px}
.qf__f label{font-size:14px;font-weight:600;color:var(--ink)}
.qf__f label i{font-style:normal;font-weight:400;color:var(--ink-3)}
.qf input[type=text],.qf input[type=email],.qf input[type=tel],.qf select,.qf textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--card);
  border:1px solid var(--hair);border-radius:11px;padding:12px 13px;
  transition:border-color .2s ease,box-shadow .2s ease}
.qf textarea{resize:vertical;min-height:96px}
.qf :is(input,select,textarea):focus{outline:0;border-color:var(--cy);
  box-shadow:0 0 0 3px rgba(var(--cy-rgb),.22)}

/* the two paths, as cards rather than radio dots */
.qf__pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.qf__opt{position:relative;display:block;cursor:pointer}
.qf__opt input{position:absolute;opacity:0;width:0;height:0}
.qf__opt span{display:block;background:var(--card);border:1px solid var(--hair);
  border-radius:var(--r);padding:clamp(16px,2vw,22px);font-size:14.5px;line-height:1.5;
  color:var(--ink-2);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.qf__opt span b{display:block;font-size:16.5px;font-weight:600;color:var(--ink);margin-bottom:5px}
.qf__opt input:checked + span{border-color:var(--cy);
  box-shadow:0 0 0 2px rgba(var(--cy-rgb),.34),0 16px 34px -22px var(--shadow-2)}
.qf__opt input:focus-visible + span{outline:2px solid var(--cy-2);outline-offset:3px}

.qf__err{margin:0 0 16px;font-size:14.5px;color:#b0341f}
.qf__fine{margin-top:16px;font-size:13.5px;color:var(--ink-3);text-align:center}
.qf .cta{margin-top:6px;justify-content:center;display:flex}
.qf__done{max-width:620px;margin:clamp(34px,4vw,54px) auto 0}

@media(max-width:640px){
  .qf__g,.qf__pick{grid-template-columns:1fr}
}

/* ════════════════════════════════════════════════════════════════════════════
   SELECTS, IN OUR OWN FORMAT
   A native <select>'s POPUP is drawn by the operating system, not the page: no
   amount of CSS reaches it, which is why it arrived as a grey macOS sheet with a
   blue highlight in the middle of a cyan form. So the native element stays in the
   DOM, carrying the value and the form submission, and a listbox is drawn over it.

   The native one is hidden with clip, NOT display:none, because a display:none
   control is skipped by the form and by assistive tech; and if the script never
   runs, .sel--on is never added and the native select is simply visible and usable.
   ════════════════════════════════════════════════════════════════════════════ */
.sel{position:relative}
.sel--on > select{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sel__btn{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;font:inherit;font-size:15px;text-align:left;color:var(--ink);
  background:var(--card);border:1px solid var(--hair);border-radius:11px;
  padding:12px 13px;cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease}
.sel__btn[data-empty]{color:var(--ink-3)}
.sel__btn:hover{border-color:var(--ink-3)}
.sel__btn:focus-visible,.sel--open .sel__btn{outline:0;border-color:var(--cy);
  box-shadow:0 0 0 3px rgba(var(--cy-rgb),.22)}
.sel__btn svg{width:15px;height:15px;flex:none;color:var(--ink-3);
  transition:transform .2s ease}
.sel--open .sel__btn svg{transform:rotate(180deg)}
.sel__btn:disabled{opacity:.5;cursor:not-allowed}

.sel__list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);
  margin:0;padding:6px;list-style:none;max-height:264px;overflow:auto;
  background:var(--card);border:1px solid var(--hair);border-radius:13px;
  box-shadow:0 22px 52px -20px var(--shadow-2),0 0 0 1px var(--shadow-1);
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .16s ease,transform .16s ease}
.sel--open .sel__list{opacity:1;transform:none;pointer-events:auto}
.sel--up .sel__list{top:auto;bottom:calc(100% + 6px);transform:translateY(4px)}
.sel--up.sel--open .sel__list{transform:none}
.sel__o{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px;border-radius:9px;font-size:14.5px;line-height:1.35;
  color:var(--ink-2);cursor:pointer}
.sel__o[data-on]{background:var(--bg-2);color:var(--ink)}
.sel__o[aria-selected=true]{color:var(--cy);font-weight:600}
.sel__o[aria-selected=true]::after{content:"";width:15px;height:15px;flex:none;
  background:var(--cy);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5L9.2 17.3 4 12.1'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5L9.2 17.3 4 12.1'/%3E%3C/svg%3E") center/contain no-repeat}
@media(prefers-reduced-motion:reduce){
  .sel__list{transition:none} .sel__btn svg{transition:none}
}

/* ── the legal page ──
   Long-form policy text, set for reading rather than for scanning: a narrower measure than the
   marketing pages use, generous leading, and headings that separate clauses without shouting.
   Anchor targets get scroll-margin so a deep link does not land under the sticky bar. */
.legal{text-align:left;max-width:74ch}
.legal h1{font-size:clamp(30px,4vw,46px);letter-spacing:-.03em;margin-bottom:14px}
.legal h2{font-size:clamp(20px,2.2vw,25px);font-weight:700;letter-spacing:-.022em;
  margin:clamp(38px,4.4vw,58px) 0 4px;padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--hair);scroll-margin-top:90px}
.legal h2:first-of-type{border-top:0;padding-top:0}
.legal h3{font-size:16.5px;font-weight:600;color:var(--ink);margin:26px 0 6px;scroll-margin-top:90px}
.legal p{font-size:16px;line-height:1.66;color:var(--ink-2);margin-top:10px}
.legal p:first-of-type{font-size:17.5px;color:var(--ink-3)}
.legal a{color:var(--cy);border-bottom:1px solid transparent;transition:border-color .2s ease}
.legal a:hover{border-bottom-color:currentColor}
.legal ul{margin:12px 0 0 20px} .legal li{font-size:16px;line-height:1.6;color:var(--ink-2);margin-top:7px}

/* ════════════════════════════════════════════════════════════════════════════
   RATE CHECK
   Arithmetic on numbers the reader types, shown as three labelled rows rather
   than a chart legend: each row carries its own name, its dollars and its basis
   points, so the color is decoration and never the only thing telling you which
   row is which. Cyan is the rate, amber is the per-item fee (the money side of
   the palette, and the part that usually decides it), neutral is the fixed cost.
   ════════════════════════════════════════════════════════════════════════════ */
.rc{max-width:760px;margin:0 auto;text-align:left}
.rc .qf__set{margin-bottom:clamp(20px,2.4vw,30px)}

/* prefix/suffix sit INSIDE the field rather than in the label, because a reader
   scanning for "where do the dollars go" reads the box, not the caption */
.rc__i{position:relative;display:flex;align-items:center}
.rc__i input{width:100%;font:inherit;font-size:16px;font-variant-numeric:tabular-nums;
  font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--hair);
  border-radius:11px;padding:12px 13px;transition:border-color .2s ease,box-shadow .2s ease}
.rc__i[data-pre] input{padding-left:30px}
.rc__i[data-suf] input{padding-right:48px}
.rc__i::before{content:attr(data-pre);position:absolute;left:13px;font-size:15px;
  font-weight:600;color:var(--ink-3);pointer-events:none}
.rc__i:not([data-pre])::before{content:none}
.rc__i[data-suf]::after{content:attr(data-suf);position:absolute;right:13px;font-size:13px;
  font-weight:600;color:var(--ink-3);pointer-events:none}
.rc__i input:focus{outline:0;border-color:var(--cy);
  box-shadow:0 0 0 3px rgba(var(--cy-rgb),.22)}

.rc__out{max-width:760px;margin:clamp(26px,3vw,38px) auto 0;text-align:left;
  background:var(--card);border:1px solid var(--hair);border-radius:var(--r);
  padding:clamp(22px,3vw,34px);box-shadow:0 26px 60px -40px var(--shadow-2)}

/* the headline number, Apple-sized, with the caption small under it */
.rc__hero{text-align:center;padding-bottom:clamp(20px,2.4vw,28px);
  border-bottom:1px solid var(--hair)}
.rc__big{font-family:var(--logo);font-weight:800;color:var(--ink);line-height:1;
  font-size:clamp(56px,9vw,104px);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rc__big em{font-style:normal;font-size:.3em;font-weight:800;color:var(--cy);
  margin-left:.14em;letter-spacing:0}
.rc__cap{margin:12px auto 0;max-width:46ch;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.rc__cap b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

.rc__split{margin-top:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:16px}
.rc__row{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;
  column-gap:14px;row-gap:8px}
.rc__row>span{font-size:15px;font-weight:600;color:var(--ink)}
.rc__row>b{font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.rc__row>i{font-style:normal;font-size:13.5px;color:var(--ink-3);min-width:56px;
  text-align:right;font-variant-numeric:tabular-nums}
.rc__bar{grid-column:1/-1;height:9px;border-radius:99px;background:var(--bg-2);overflow:hidden}
.rc__bar span{display:block;height:100%;border-radius:99px;width:0;
  background:var(--cy);transition:width .45s cubic-bezier(.22,.61,.36,1)}
.rc__row:nth-child(2) .rc__bar span{background:var(--am)}
.rc__row:nth-child(3) .rc__bar span{background:var(--ink-3)}

.rc__note{margin:clamp(18px,2.2vw,24px) 0 0;font-size:15.5px;line-height:1.62;color:var(--ink-2)}
.rc__note b{font-weight:600;color:var(--ink)}

.rc__be{margin-top:clamp(18px,2.2vw,24px);padding:clamp(16px,2vw,20px);border-radius:14px;
  background:var(--bg-2);font-size:15px;line-height:1.6;color:var(--ink-2)}
.rc__be b{display:block;font-size:17px;font-weight:700;color:var(--ink);margin-bottom:5px}
.rc__be b span{color:var(--am-3);font-variant-numeric:tabular-nums}

.rc__ask{max-width:640px;margin:clamp(38px,4.4vw,58px) auto 0;text-align:center}
.rc__ask h3{font-size:clamp(21px,2.4vw,27px);font-weight:700;color:var(--ink);letter-spacing:-.015em}
.rc__ask p{margin-top:12px;font-size:16px;line-height:1.66;color:var(--ink-2)}
.rc__ask .cta{margin-top:20px;display:flex;justify-content:center}

.rc__fine{max-width:640px;margin:clamp(24px,3vw,34px) auto 0;font-size:13.5px;line-height:1.6;
  color:var(--ink-3);text-align:center}

@media(max-width:560px){
  /* the label gets its own line rather than competing with two numbers for 320px */
  .rc__row{grid-template-columns:auto auto;justify-content:space-between;row-gap:6px}
  .rc__row>span{grid-column:1/-1}
  .rc__big{font-size:clamp(50px,17vw,74px)}
}

/* a compact band, not another hero: it is an aside on the way out of a page, so it gets a
   card and a line of type rather than a screen of its own */
.tease{padding-bottom:0}
.tease__b{text-align:left;display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2.4vw,34px);
  background:var(--card);border:1px solid var(--hair);border-radius:var(--r);
  padding:clamp(20px,2.4vw,28px) clamp(22px,2.8vw,32px);box-shadow:0 20px 48px -38px var(--shadow-2)}
.tease__b h3{font-size:clamp(18px,1.9vw,22px);font-weight:700;color:var(--ink);letter-spacing:-.012em}
.tease__b p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:52ch}
.tease__b .pill{flex:0 0 auto}
@media(max-width:640px){ .tease__b{flex-direction:column;align-items:flex-start} }