{"id":2,"date":"2026-04-15T13:24:30","date_gmt":"2026-04-15T13:24:30","guid":{"rendered":"https:\/\/blacksky.cash\/?page_id=2"},"modified":"2026-07-30T14:33:56","modified_gmt":"2026-07-30T14:33:56","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/blacksky.cash\/","title":{"rendered":"Home"},"content":{"rendered":"\n<div id=\"text-hero-block_7de98eaabde45c15d89064e868e16e2a\" class=\"text-hero alignfull vh-100 has-black-background-color\">\n  <div class=\"d-flex flex-column h-100-dynamic justify-content-between\">\n    <h2 class=\"has-xx-large-font-size line-height-0p9 has-white-color w-md-75 p-1p5 p-md-3\" style=\"z-index:3;mix-blend-mode:exclusion;\">Shared money, built on shared trust<\/h2>\n    <div class=\"d-flex flex-column gap-1p5 has-white-color w-md-75 p-1p5 p-md-3\" style=\"z-index:1;\">\n      <h3>Send money to friends, launch community fundraisers, and manage group funds with the people you trust, all from where your network already lives.<\/h3>\n      <a href=\"\/\" class=\"cta d-flex align-items-baseline text-decoration-none white-space-nowrap border-1 has-translucent-white-15-background-color border-radius-0p5 px-1 py-0p5 w-fit-content\"><b>Get Started<\/b><\/a>\n    <\/div>\n    <div class=\"light-pane p-absolute has-white-background-color w-100 h-100\" style=\"z-index:2;\">\n      <video muted autoplay loop style=\"position:fixed;height:100%;width:100%;z-index:999;object-fit:cover;mix-blend-mode:difference;filter:invert();\">\n        <source src=\"https:\/\/blacksky.cash\/wp-content\/themes\/blacksky-cash\/videos\/murmuration-edit.mp4\" type=\"video\/mp4\">\n        Your browser does not support the video tag.\n      <\/video>\n    <\/div>\n    <img decoding=\"async\" style=\"z-index:999;\" class=\"p-absolute bottom-0 right-0 w-100 w-md-50\" src=\"https:\/\/blacksky.cash\/wp-content\/uploads\/2026\/04\/hand-holding-phone.png\" alt=\"\">\n  <\/div>\n<\/div>\n\n<script>\n  window.addEventListener('DOMContentLoaded', () => {\n    \/\/ JS for 'Text Hero' block\n    var textHeros = gsap.utils.toArray('.text-hero')\n    textHeros.forEach(textHero => {\n        \/\/ Create scoped array of 'animated-box' elements\n        var currentModule = gsap.utils.selector(textHero);\n        var lightPane = currentModule('.light-pane')[0];\n        var phoneImg = currentModule('img')[0];\n        var cta = currentModule('.cta')[0];\n        \/\/ Set initial phone image transform\n        gsap.set(phoneImg, {\n            y: '100%',\n        });\n        \/\/ Create timeline; pin for 400vh\n        let textHeroTl = gsap.timeline({\n            scrollTrigger: {\n                trigger: textHero,\n                pin: true,\n                pinSpacing: true,\n                anticipatePin: true,\n                scrub: true,\n                start: \"top top\",\n                end: \"+=3000\",\n                toggleActions: \"play none play reverse\",\n                onUpdate: () => {\n                    \/\/ Reveal the CTA once the light-pane has scrolled fully out of view\n                    cta && cta.classList.toggle('visible', lightPane.getBoundingClientRect().bottom <= 0);\n                },\n            },\n        });\n        textHeroTl.to(lightPane, {\n            y: '-100%',\n            duration: \"1.5\",\n            ease: \"power3.inOut\",\n        }, \"0\");\n        textHeroTl.to(phoneImg, {\n            y: '0%',\n            duration: \"0.75\",\n            ease: \"power3.inOut\",\n        }, \"+=0.125\");\n        \/\/ Ghost item to provide a bit of scroll after phone animates in\n        textHeroTl.to({}, { duration: 1 }); \n    });\n});\n<\/script>\n\n\n<div id=\"user-showcase-block_604b3c9076acfe4d1a286a39cf07e552\" class=\"user-showcase alignfull vh-100 has-white-color\" style=\"background-color:#6d6df6;position:relative;\">\n  <div class=\"progress-bar has-translucent-purple-10-background-color\" style=\"position:absolute;top:0;left:0;width:100%;height:5px;overflow:visible;z-index:1001;pointer-events:none;\">\n    <div class=\"progress-fill\" style=\"position:absolute;top:0;left:0;width:100%;height:5px;\"><\/div>\n  <\/div>\n  <div class=\"alignwide p-relative h-100-dynamic d-flex align-items-center justify-content-center\">\n    <div class=\"text-cta z-999 z-md-0 w-md-75 border-radius-0p5 p-md-3 d-flex flex-column align-items-center justify-content-center text-center gap-1p5 gap-md-3 w-fit-content h-fit-content\">\n      <h2>Built for the apps and communities\u2028shaping the open social web and beyond<\/h2>\n      <a href=\"\/\" class=\"cta d-flex align-items-baseline text-decoration-none white-space-nowrap border-1 has-translucent-white-15-background-color has-white-color border-radius-0p5 px-1 py-0p5 w-fit-content\"><b>Join the Waitlist<\/b><\/a>\n    <\/div>\n          <a class=\"logo-link d-flex p-absolute\" href=\"\"><img decoding=\"async\" class=\"p-1p5 p-md-3 has-translucent-white-15-background-color border-radius-0p5\" src=\"https:\/\/blacksky.cash\/wp-content\/uploads\/2026\/04\/wired-white.png\" alt=\"\"><\/a>\n          <a class=\"logo-link d-flex p-absolute\" href=\"\"><img decoding=\"async\" class=\"p-1p5 p-md-3 has-translucent-white-15-background-color border-radius-0p5\" src=\"https:\/\/blacksky.cash\/wp-content\/uploads\/2026\/04\/we_distribute-white.png\" alt=\"\"><\/a>\n          <a class=\"logo-link d-flex p-absolute\" href=\"\"><img decoding=\"async\" class=\"p-1p5 p-md-3 has-translucent-white-15-background-color border-radius-0p5\" src=\"https:\/\/blacksky.cash\/wp-content\/uploads\/2026\/04\/npq-white.png\" alt=\"\"><\/a>\n          <a class=\"logo-link d-flex p-absolute\" href=\"\"><img decoding=\"async\" class=\"p-1p5 p-md-3 has-translucent-white-15-background-color border-radius-0p5\" src=\"https:\/\/blacksky.cash\/wp-content\/uploads\/2026\/04\/new_public-white.png\" alt=\"\"><\/a>\n          <a class=\"logo-link d-flex p-absolute\" href=\"\"><img decoding=\"async\" class=\"p-1p5 p-md-3 has-translucent-white-15-background-color border-radius-0p5\" src=\"https:\/\/blacksky.cash\/wp-content\/uploads\/2026\/04\/hyfin-white-1.png\" alt=\"\"><\/a>\n      <\/div>\n<\/div>\n\n<script>\n  window.addEventListener('DOMContentLoaded', () => {\n    const showcase = document.getElementById('user-showcase-block_604b3c9076acfe4d1a286a39cf07e552');\n    if (!showcase) return;\n\n    const container = showcase.querySelector('.p-relative');\n    const logoLinks = Array.from(container.querySelectorAll('.logo-link'));\n    const N  = logoLinks.length;\n    if (!N) return;\n\n    const W  = container.offsetWidth;\n    const H  = container.offsetHeight;\n    const cx = W \/ 2;\n    const cy = H \/ 2;\n    const GAP = 20; \/\/ minimum px gap between logo bounding boxes\n\n    \/\/ Random phase so the angular layout differs on every page load.\n    const phase  = Math.random() * (2 * Math.PI \/ N);\n    const placed = []; \/\/ { x, y, lw, lh }\n\n    logoLinks.forEach((logo, i) => {\n      const lw = logo.offsetWidth  || 240;\n      const lh = logo.offsetHeight || 80;\n\n      \/\/ Assign each logo its own angular sector.\n      const angle = phase + (2 * Math.PI * i \/ N);\n      const cosA  = Math.cos(angle);\n      const sinA  = Math.sin(angle);\n\n      \/\/ rMin: radius at which the ray from center exits the forbidden 50x50% zone.\n      const fhW  = 0.25 * W;\n      const fhH  = 0.25 * H;\n      const rMin = Math.abs(cosA) < 1e-9\n        ? fhH \/ Math.abs(sinA)\n        : Math.abs(sinA) < 1e-9\n          ? fhW \/ Math.abs(cosA)\n          : Math.min(fhW \/ Math.abs(cosA), fhH \/ Math.abs(sinA));\n\n      \/\/ rMax: radius at which the logo edge would touch the container boundary.\n      const rMax = Math.min(\n        Math.abs(cosA) < 1e-9 ? Infinity : (cx - lw \/ 2) \/ Math.abs(cosA),\n        Math.abs(sinA) < 1e-9 ? Infinity : (cy - lh \/ 2) \/ Math.abs(sinA)\n      );\n\n      \/\/ Try up to 50 random radii; take the first that clears all placed logos.\n      let x = cx + Math.min(rMin, rMax) * cosA;\n      let y = cy + Math.min(rMin, rMax) * sinA;\n\n      for (let t = 0; t < 50; t++) {\n        const r  = rMin + Math.random() * Math.max(0, rMax - rMin);\n        const tx = cx + r * cosA;\n        const ty = cy + r * sinA;\n        if (placed.every(p =>\n          Math.abs(tx - p.x) >= (lw + p.lw) \/ 2 + GAP ||\n          Math.abs(ty - p.y) >= (lh + p.lh) \/ 2 + GAP\n        )) { x = tx; y = ty; break; }\n      }\n\n      placed.push({ x, y, lw, lh });\n      gsap.set(logo, {\n        left:     x,\n        top:      y,\n        xPercent: -50,\n        yPercent: -50,\n        opacity:  0,\n        scale:    0.75,\n      });\n    });\n\n    function floatLogo(logo) {\n      const angle = Math.random() * 2 * Math.PI;\n      const dist  = Math.random() * 200;\n      gsap.to(logo, {\n        x:          dist * Math.cos(angle),\n        y:          dist * Math.sin(angle),\n        duration:   5 + Math.random() * 5,\n        ease:       'sine.inOut',\n        onComplete: () => floatLogo(logo),\n      });\n    }\n\n    const progressFill = showcase.querySelector('.progress-fill');\n    if (progressFill) gsap.set(progressFill, { opacity: 0 });\n\n    const cta = showcase.querySelector('.cta');\n    let ctaTimeout = null;\n    function scheduleCtaVisible() {\n      clearTimeout(ctaTimeout);\n      ctaTimeout = setTimeout(() => cta && cta.classList.add('visible'), 250);\n    }\n    function cancelCtaVisible() {\n      clearTimeout(ctaTimeout);\n      cta && cta.classList.remove('visible');\n    }\n\n    const showcaseTl = gsap.timeline({\n      scrollTrigger: {\n        trigger:             showcase,\n        pin:                 true,\n        pinSpacing:          true,\n        scrub:               false,\n        start:               \"top top\",\n        end:                 \"+=1000\",\n        invalidateOnRefresh: true,\n        onEnter:      () => { progressFill && gsap.to(progressFill, { opacity: 1, duration: 0.2, ease: 'power2.out' }); scheduleCtaVisible(); },\n        onLeave:      () => progressFill && gsap.to(progressFill, { opacity: 0, duration: 0.2, ease: 'power2.in' }),\n        onEnterBack:  () => { progressFill && gsap.to(progressFill, { opacity: 1, duration: 0.2, ease: 'power2.out' }); scheduleCtaVisible(); },\n        onLeaveBack:  () => { progressFill && gsap.to(progressFill, { opacity: 0, duration: 0.2, ease: 'power2.in' }); cancelCtaVisible(); },\n        onUpdate: (self) => {\n          if (!progressFill) return;\n          const p = self.progress * 100;\n          progressFill.style.background = `linear-gradient(to right, var(--wp--preset--color--translucent-white-60) ${p}%, var(--wp--preset--color--translucent-white-15) ${p}%)`;\n        },\n      },\n      onComplete: () => logoLinks.forEach(logo => floatLogo(logo)),\n    });\n\n    showcaseTl.to(logoLinks, {\n      opacity:  1,\n      scale:    1,\n      duration: 0.4,\n      stagger:  0.08,\n      ease:     \"power2.out\",\n    });\n  });\n<\/script>\n\n\n<div id=\"interface-scroll-block_6f09ad4e0fae720e56970c2edfcf0d17\" class=\"interface-scroll alignfull interface-scroll-outer\">\n    <div class=\"splash-view has-black-background-color has-white-color\" style=\"position:relative;\">\n    <div class=\"splash-gradient-overlay\" style=\"position:absolute;inset:0;opacity:0;pointer-events:none;background:radial-gradient(64.76% 64.76% at 50% 50%, #049735 0%, transparent 100%);\"><\/div>\n    <div class=\"splash-inner d-flex flex-column align-items-center justify-content-center h-100\">\n      <div class=\"alignwide px-1p5 px-md-3\">\n        <h2 class=\"text-center splash-headline\">Three ways to move money together<\/h2>\n      <\/div>\n    <\/div>\n  <\/div>\n    <div class=\"d-none d-md-flex toc gap-1 p-absolute top-0 p-4 w-100 justify-content-center\" style=\"z-index:999;\">\n          <a data-view=\"1\" class=\"toc-item has-translucent-white-90-background-color p-0p5 border-radius-0p5 line-height-0p9 text-decoration-none\" style=\"position:relative;overflow:hidden;\"><span class=\"toc-fill has-translucent-purple-25-background-color\" style=\"position:absolute;top:0;left:0;height:100%;width:0%;pointer-events:none;\"><\/span><b style=\"position:relative;\">Peer-to-Peer Payments<\/b><\/a>\n          <a data-view=\"2\" class=\"toc-item has-translucent-white-90-background-color p-0p5 border-radius-0p5 line-height-0p9 text-decoration-none\" style=\"position:relative;overflow:hidden;\"><span class=\"toc-fill has-translucent-purple-25-background-color\" style=\"position:absolute;top:0;left:0;height:100%;width:0%;pointer-events:none;\"><\/span><b style=\"position:relative;\">Fundraisers<\/b><\/a>\n          <a data-view=\"3\" class=\"toc-item has-translucent-white-90-background-color p-0p5 border-radius-0p5 line-height-0p9 text-decoration-none\" style=\"position:relative;overflow:hidden;\"><span class=\"toc-fill has-translucent-purple-25-background-color\" style=\"position:absolute;top:0;left:0;height:100%;width:0%;pointer-events:none;\"><\/span><b style=\"position:relative;\">Group Accounts<\/b><\/a>\n      <\/div>\n        <div class=\"view view-1 has-black-color\" style=\"background:radial-gradient(64.76% 64.76% at 50% 50%, #049735 0%, rgba(255, 255, 255, 1) 100%);\" data-gradient=\"radial-gradient(64.76% 64.76% at 50% 50%, #049735 0%, rgba(255, 255, 255, 1) 100%)\" data-color=\"dark\">\n      <div class=\"view-inner d-flex flex-column d-md-grid grid flex-md-column align-items-center p-1p5 p-md-3\">\n        <div class=\"title-col grid-col-12 grid-md-col-4\">\n          <h2 class=\"text-center text-md-left pt-1p5 mt-md-0\">Keep payments between friends.<\/h2>\n        <\/div>\n        <div class=\"image-col grid-col-12 grid-md-col-4 d-flex align-items-center justify-content-center\">\n          <img decoding=\"async\" class=\"w-auto vh-65\" src=\"https:\/\/blacksky.cash\/wp-content\/uploads\/2026\/04\/interface-p2p-payments.png\" alt=\"\">\n        <\/div>\n        <div class=\"text-col grid-col-12 grid-md-col-4\">\n          <p class=\"has-large-font-size line-height-1p1\">Send and receive money as easily as sending a DM using your ATProto username, without lurkers in your payment activity.<\/p>\n                      <div class=\"list mt-md-3\">\n                              <hr>\n                <p class=\"has-small-font-size\">Private peer-to-peer transfers<\/p>\n                              <hr>\n                <p class=\"has-small-font-size\">Fast, secure payments<\/p>\n                              <hr>\n                <p class=\"has-small-font-size\">Find friends and send $ all in one app<\/p>\n                          <\/div>\n                  <\/div>\n      <\/div>\n    <\/div>\n      <div class=\"view view-2 has-white-color\" style=\"background:radial-gradient(64.76% 64.76% at 50% 50%, #574295 0%, rgba(0, 0, 0, 1) 100%);\" data-gradient=\"radial-gradient(64.76% 64.76% at 50% 50%, #574295 0%, rgba(0, 0, 0, 1) 100%)\" data-color=\"light\">\n      <div class=\"view-inner d-flex flex-column d-md-grid grid flex-md-column align-items-center p-1p5 p-md-3\">\n        <div class=\"title-col grid-col-12 grid-md-col-4\">\n          <h2 class=\"text-center text-md-left pt-1p5 mt-md-0\">Launch fundraisers that go viral.<\/h2>\n        <\/div>\n        <div class=\"image-col grid-col-12 grid-md-col-4 d-flex align-items-center justify-content-center\">\n          <img decoding=\"async\" class=\"w-auto vh-65\" src=\"https:\/\/blacksky.cash\/wp-content\/uploads\/2026\/04\/interface-fundraisers.png\" alt=\"\">\n        <\/div>\n        <div class=\"text-col grid-col-12 grid-md-col-4\">\n          <p class=\"has-large-font-size line-height-1p1\">Create a fundraiser in minutes and publish it directly into your feed with credibility from your social app boosting your chances of getting support.<\/p>\n                      <div class=\"list mt-md-3\">\n                              <hr>\n                <p class=\"has-small-font-size\">Personal and community fundraising<\/p>\n                              <hr>\n                <p class=\"has-small-font-size\">Social-integrated sharing which boosts recognition<\/p>\n                              <hr>\n                <p class=\"has-small-font-size\">Designed for mutual aid, creators, and causes<\/p>\n                          <\/div>\n                  <\/div>\n      <\/div>\n    <\/div>\n      <div class=\"view view-3 has-black-color\" style=\"background:radial-gradient(64.76% 64.76% at 50% 50%, #6D6DF6 0%, rgba(255, 255, 255, 1) 100%);\" data-gradient=\"radial-gradient(64.76% 64.76% at 50% 50%, #6D6DF6 0%, rgba(255, 255, 255, 1) 100%)\" data-color=\"dark\">\n      <div class=\"view-inner d-flex flex-column d-md-grid grid flex-md-column align-items-center p-1p5 p-md-3\">\n        <div class=\"title-col grid-col-12 grid-md-col-4\">\n          <h2 class=\"text-center text-md-left pt-1p5 mt-md-0\">Cash for the group chat.<\/h2>\n        <\/div>\n        <div class=\"image-col grid-col-12 grid-md-col-4 d-flex align-items-center justify-content-center\">\n          <img decoding=\"async\" class=\"w-auto vh-65\" src=\"https:\/\/blacksky.cash\/wp-content\/uploads\/2026\/04\/interface-group-accounts.png\" alt=\"\">\n        <\/div>\n        <div class=\"text-col grid-col-12 grid-md-col-4\">\n          <p class=\"has-large-font-size line-height-1p1\">Create shared payment accounts with your collaborators. Propose how money should be used and make decisions together transparently.<\/p>\n                      <div class=\"list mt-md-3\">\n                              <hr>\n                <p class=\"has-small-font-size\">Shared balances<\/p>\n                              <hr>\n                <p class=\"has-small-font-size\">Proposals and approvals<\/p>\n                              <hr>\n                <p class=\"has-small-font-size\">Voting workflows<\/p>\n                              <hr>\n                <p class=\"has-small-font-size\">Transparent activity history<\/p>\n                          <\/div>\n                  <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n\n<script>\n  window.addEventListener('DOMContentLoaded', () => {\n    gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);\n\n    gsap.utils.toArray('.interface-scroll').forEach(container => {\n      const views = gsap.utils.toArray('.view', container);\n      if (!views.length) return;\n\n      const splash = container.querySelector('.splash-view');\n      const splashInner = container.querySelector('.splash-inner');\n      const splashOverlay = container.querySelector('.splash-gradient-overlay');\n      if (!splash) return;\n\n      const n = views.length;\n      const totalSlots = n + 1; \/\/ splash + n views\n      const inners = views.map(v => v.querySelector('.view-inner'));\n      const tocItems = Array.from(container.querySelectorAll('.toc a'));\n\n      function updateTocFills(slotFloat) {\n        tocItems.forEach((item, i) => {\n          const fill = item.querySelector('.toc-fill');\n          if (!fill) return;\n          const itemSlot = i + 1;\n          let pct;\n          if (slotFloat >= itemSlot + 1) {\n            pct = 100;\n          } else if (slotFloat > itemSlot) {\n            pct = (slotFloat - itemSlot) * 100;\n          } else {\n            pct = 0;\n          }\n          fill.style.width = pct + '%';\n        });\n      }\n\n      gsap.set(container, { height: '100vh', overflow: 'hidden' });\n      gsap.set(views, { position: 'absolute', inset: 0, height: '100vh', zIndex: 0, opacity: 1 });\n      gsap.set(views[0], { zIndex: 1 });\n      gsap.set(splash, { position: 'absolute', inset: 0, height: '100vh', zIndex: n + 1, opacity: 1 });\n\n      \/\/ All view inners start hidden; splash inner starts visible\n      gsap.set(inners, { opacity: 0, y: 40 });\n      gsap.set(inners[0], { opacity: 1, y: 0 });\n      gsap.set(splashInner, { opacity: 1, y: 0 });\n\n      \/\/ No toc tab active while splash is showing\n\n      const slotHeight = window.innerHeight * 2;\n\n      let lastSlot = 0; \/\/ 0 = splash, 1..n = views[0]..views[n-1]\n      let isScrollingTo = false;\n      let scrollFromSlot = -1;\n\n      const st = ScrollTrigger.create({\n        trigger: container,\n        start: 'top top',\n        end: `+=${slotHeight * totalSlots}`,\n        pin: true,\n        onUpdate: (self) => {\n          const slotFloat = self.progress * totalSlots;\n          const slot = Math.min(Math.floor(slotFloat), n);\n          updateTocFills(slotFloat);\n          if (splashOverlay) splashOverlay.style.opacity = Math.min(1, Math.max(0, slotFloat));\n          if (slot === lastSlot) return;\n\n          const direction = slot > lastSlot ? 1 : -1;\n          const prevSlot = lastSlot;\n          lastSlot = slot;\n\n          if (isScrollingTo) return;\n\n          const prevViewIndex = prevSlot - 1; \/\/ -1 when prevSlot was splash\n          const activeViewIndex = slot - 1;   \/\/ -1 when slot is splash\n\n          gsap.killTweensOf([splash, splashInner, ...views, ...inners.filter(Boolean)]);\n\n          \/\/ Update toc active state (activeViewIndex -1 means no tab active)\n          tocItems.forEach((item, i) => item.classList.toggle('active', i === activeViewIndex));\n\n          \/\/ Snap ALL elements to a known pre-transition state immediately after\n          \/\/ killing tweens. This prevents a killed onComplete from leaving the\n          \/\/ incoming view uninitialised (the freeze bug on fast scrolling).\n\n          \/\/ Splash\n          if (prevSlot === 0) {\n            gsap.set(splash, { opacity: 1, zIndex: n + 1 });\n            gsap.set(splashInner, { opacity: 1, y: 0 });\n          } else if (slot === 0) {\n            gsap.set(splash, { opacity: 0, zIndex: n + 1 });\n            gsap.set(splashInner, { opacity: 0, y: -40 });\n          } else {\n            gsap.set(splash, { opacity: 0, zIndex: 0 });\n          }\n\n          \/\/ Views \u2014 only the two transitioning views are ever visible; everything\n          \/\/ else stays at opacity:0 to prevent semi-transparent gradients from\n          \/\/ bleeding through and causing a ghost overlay.\n          views.forEach((view, i) => {\n            if (i === prevViewIndex) {\n              gsap.set(view, { opacity: 1, zIndex: i + 1 });\n            } else if (i === activeViewIndex) {\n              \/\/ Forward: incoming starts invisible; Backward: already visible\n              gsap.set(view, { opacity: direction > 0 ? 0 : 1, zIndex: i + 1 });\n            } else {\n              gsap.set(view, { opacity: 0, zIndex: 0 });\n            }\n          });\n\n          \/\/ Inners \u2014 same principle\n          inners.forEach((inner, i) => {\n            if (!inner) return;\n            if (i === prevViewIndex) {\n              gsap.set(inner, { opacity: 1, y: 0 });\n            } else if (i === activeViewIndex) {\n              gsap.set(inner, { opacity: 0, y: direction > 0 ? 40 : -40 });\n            } else {\n              gsap.set(inner, { opacity: 0, y: 40 });\n            }\n          });\n\n          \/\/ Animate \u2014 all incoming tweens start immediately (no onComplete dependency)\n          if (direction > 0) {\n            if (prevSlot === 0) {\n              \/\/ Splash exits\n              gsap.to(splashInner, { opacity: 0, y: -40, duration: 0.25, ease: 'power2.in' });\n              gsap.to(splash, { opacity: 0, duration: 0.35, ease: 'power2.out', delay: 0.1, onComplete: () => gsap.set(splash, { zIndex: 0 }) });\n            } else if (inners[prevViewIndex]) {\n              gsap.to(inners[prevViewIndex], { opacity: 0, y: -40, duration: 0.25, ease: 'power2.in' });\n            }\n            \/\/ Incoming view and inner animate in (parallel, slight delay after outgoing starts)\n            gsap.to(views[activeViewIndex], { opacity: 1, duration: 0.45, ease: 'power2.out', delay: 0.2 });\n            if (inners[activeViewIndex]) gsap.to(inners[activeViewIndex], { opacity: 1, y: 0, duration: 0.55, ease: 'power2.out', delay: 0.2 });\n          } else {\n            if (slot === 0) {\n              \/\/ Any view \u2192 splash (backward)\n              gsap.to(splash, { opacity: 1, duration: 0.35, ease: 'power2.inOut' });\n              gsap.to(views[prevViewIndex], { opacity: 0, duration: 0.35, ease: 'power2.inOut', onComplete: () => gsap.set(views[prevViewIndex], { zIndex: 0 }) });\n              if (inners[prevViewIndex]) gsap.to(inners[prevViewIndex], { opacity: 0, y: 40, duration: 0.25, ease: 'power2.in' });\n              if (splashInner) gsap.to(splashInner, { opacity: 1, y: 0, duration: 0.55, ease: 'power2.out', delay: 0.25 });\n            } else {\n              \/\/ View \u2192 previous view (backward)\n              gsap.to(views[prevViewIndex], { opacity: 0, duration: 0.35, ease: 'power2.inOut', onComplete: () => gsap.set(views[prevViewIndex], { zIndex: 0 }) });\n              if (inners[prevViewIndex]) gsap.to(inners[prevViewIndex], { opacity: 0, y: 40, duration: 0.25, ease: 'power2.in' });\n              if (inners[activeViewIndex]) gsap.to(inners[activeViewIndex], { opacity: 1, y: 0, duration: 0.55, ease: 'power2.out', delay: 0.25 });\n            }\n          }\n        }\n      });\n\n      \/\/ TOC click: scroll to the target view, suppressing intermediate transitions\n      tocItems.forEach((item, i) => {\n        item.addEventListener('click', (e) => {\n          e.preventDefault();\n          const targetSlot = i + 1;\n          if (targetSlot === lastSlot) return;\n\n          isScrollingTo = true;\n          scrollFromSlot = lastSlot;\n\n          tocItems.forEach((t, j) => t.classList.toggle('active', j === i));\n\n          gsap.to(window, {\n            scrollTo: st.start + (i + 1) * slotHeight,\n            duration: 0.6,\n            ease: 'power2.out',\n            onComplete: () => {\n              isScrollingTo = false;\n              const enterY = targetSlot > scrollFromSlot ? 40 : -40;\n\n              gsap.killTweensOf([splash, splashInner, ...views, ...inners.filter(Boolean)]);\n\n              \/\/ Splash always hidden when arriving at a view via TOC click\n              gsap.set(splash, { opacity: 0, zIndex: 0 });\n\n              \/\/ Only the target view visible; everything else hidden\n              views.forEach((v, j) => gsap.set(v, { opacity: 0, zIndex: j === i ? i + 1 : 0 }));\n              inners.forEach((inner, j) => { if (inner) gsap.set(inner, { opacity: 0, y: j === i ? enterY : 40 }); });\n\n              gsap.to(views[i], { opacity: 1, duration: 0.45, ease: 'power2.out' });\n              if (inners[i]) gsap.to(inners[i], { opacity: 1, y: 0, duration: 0.55, ease: 'power2.out' });\n              lastSlot = targetSlot;\n              updateTocFills(targetSlot);\n            }\n          });\n        });\n      });\n    });\n  });\n<\/script>\n\n\n\n<div id=\"post-to-payment-block_31b43e4076feb518401d7a889a271e43\" class=\"post-to-payment alignfull\" style=\"background:black;color:white;\">\n  <div class=\"p2p-outer\">\n    <div class=\"p2p-inner alignfull py-1p5 py-md-3\" style=\"position:sticky;top:0;height:calc(100dvh - var(--header-height));overflow:hidden;\">\n      <div class=\"progress-bar has-translucent-purple-10-background-color\" style=\"position:absolute;top:0;left:0;width:100%;height:5px;overflow:visible;z-index:1001;pointer-events:none;\">\n        <div class=\"progress-fill\" style=\"position:absolute;top:0;left:0;width:100%;height:5px;\"><\/div>\n      <\/div>\n      <div class=\"px-1p5 px-md-3 d-grid grid h-100\">\n        <div class=\"d-flex flex-column gap-1p5 grid-col-12 grid-lg-col-5\">\n          <h2 class=\"em-alt\"><p>From post to payment <em>in seconds<\/em>.<\/p>\n<\/h2>\n          <a href=\"\/\" class=\"cta d-flex align-items-baseline text-decoration-none white-space-nowrap border-1 has-translucent-white-15-background-color border-radius-0p5 px-1 py-0p5 w-fit-content\"><b>Sign-up Today<\/b><\/a>\n        <\/div>\n        <div class=\"grid-col-12 grid-lg-col-7 d-grid grid\">\n          <div class=\"animated-box grid-col-12 grid-md-col-6 d-flex flex-column justify-content-between p-1 p-md-2 has-translucent-white-15-background-color border-radius-0p5\">\n            <div>\n              <?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg id=\"Layer_2\" data-name=\"Layer 2\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 36 36\">\n  <defs>\n    <style>\n      .star-path {\n        fill: #73E083;\n      }\n    <\/style>\n  <\/defs>\n  <g id=\"Layer_1-2\" data-name=\"Layer 1\">\n    <path class=\"star-path\" d=\"M19.18,3.67c-.44.44-.82.92-1.18,1.4-.36-.48-.74-.96-1.18-1.4C12.48-.67,6.02-1.24,2.39,2.39s-3.06,10.09,1.28,14.43c.44.44.92.82,1.4,1.18-.48.36-.96.74-1.4,1.18-4.34,4.34-4.91,10.8-1.28,14.43s10.09,3.06,14.43-1.28c.44-.44.82-.92,1.18-1.4.36.48.74.96,1.18,1.4,4.34,4.34,10.8,4.91,14.43,1.28,3.63-3.63,3.06-10.09-1.28-14.43-.44-.44-.92-.82-1.4-1.18.48-.36.96-.74,1.4-1.18,4.34-4.34,4.91-10.8,1.28-14.43-3.63-3.63-10.09-3.06-14.43,1.28ZM30.59,8.32l-5.33,5.33c-2.4,2.4-2.4,6.29,0,8.7l5.33,5.33-2.91,2.91-5.33-5.33c-2.4-2.4-6.29-2.4-8.7,0l-5.33,5.33-2.91-2.91,5.33-5.33c2.4-2.4,2.4-6.29,0-8.7l-5.33-5.33,2.91-2.91,5.33,5.33c2.4,2.4,6.29,2.4,8.7,0l5.33-5.33,2.91,2.91Z\"\/>\n  <\/g>\n<\/svg>            <\/div>\n            <div>\n              Create\/connect your AT Protocol identity            <\/div>\n          <\/div>\n          <div class=\"animated-box grid-col-12 grid-md-col-6 d-flex flex-column justify-content-between p-1 p-md-2 has-translucent-white-15-background-color border-radius-0p5\">\n            <div>\n              <?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg id=\"Layer_2\" data-name=\"Layer 2\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 36 36\">\n  <defs>\n    <style>\n      .star-path {\n        fill: #73E083;\n      }\n    <\/style>\n  <\/defs>\n  <g id=\"Layer_1-2\" data-name=\"Layer 1\">\n    <path class=\"star-path\" d=\"M19.18,3.67c-.44.44-.82.92-1.18,1.4-.36-.48-.74-.96-1.18-1.4C12.48-.67,6.02-1.24,2.39,2.39s-3.06,10.09,1.28,14.43c.44.44.92.82,1.4,1.18-.48.36-.96.74-1.4,1.18-4.34,4.34-4.91,10.8-1.28,14.43s10.09,3.06,14.43-1.28c.44-.44.82-.92,1.18-1.4.36.48.74.96,1.18,1.4,4.34,4.34,10.8,4.91,14.43,1.28,3.63-3.63,3.06-10.09-1.28-14.43-.44-.44-.92-.82-1.4-1.18.48-.36.96-.74,1.4-1.18,4.34-4.34,4.91-10.8,1.28-14.43-3.63-3.63-10.09-3.06-14.43,1.28ZM30.59,8.32l-5.33,5.33c-2.4,2.4-2.4,6.29,0,8.7l5.33,5.33-2.91,2.91-5.33-5.33c-2.4-2.4-6.29-2.4-8.7,0l-5.33,5.33-2.91-2.91,5.33-5.33c2.4-2.4,2.4-6.29,0-8.7l-5.33-5.33,2.91-2.91,5.33,5.33c2.4,2.4,6.29,2.4,8.7,0l5.33-5.33,2.91,2.91Z\"\/>\n  <\/g>\n<\/svg>              <?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg id=\"Layer_2\" data-name=\"Layer 2\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 36 36\">\n  <defs>\n    <style>\n      .star-path {\n        fill: #73E083;\n      }\n    <\/style>\n  <\/defs>\n  <g id=\"Layer_1-2\" data-name=\"Layer 1\">\n    <path class=\"star-path\" d=\"M19.18,3.67c-.44.44-.82.92-1.18,1.4-.36-.48-.74-.96-1.18-1.4C12.48-.67,6.02-1.24,2.39,2.39s-3.06,10.09,1.28,14.43c.44.44.92.82,1.4,1.18-.48.36-.96.74-1.4,1.18-4.34,4.34-4.91,10.8-1.28,14.43s10.09,3.06,14.43-1.28c.44-.44.82-.92,1.18-1.4.36.48.74.96,1.18,1.4,4.34,4.34,10.8,4.91,14.43,1.28,3.63-3.63,3.06-10.09-1.28-14.43-.44-.44-.92-.82-1.4-1.18.48-.36.96-.74,1.4-1.18,4.34-4.34,4.91-10.8,1.28-14.43-3.63-3.63-10.09-3.06-14.43,1.28ZM30.59,8.32l-5.33,5.33c-2.4,2.4-2.4,6.29,0,8.7l5.33,5.33-2.91,2.91-5.33-5.33c-2.4-2.4-6.29-2.4-8.7,0l-5.33,5.33-2.91-2.91,5.33-5.33c2.4-2.4,2.4-6.29,0-8.7l-5.33-5.33,2.91-2.91,5.33,5.33c2.4,2.4,6.29,2.4,8.7,0l5.33-5.33,2.91,2.91Z\"\/>\n  <\/g>\n<\/svg>            <\/div>\n            <div>\n              Connect with friends online            <\/div>\n          <\/div>\n          <div class=\"animated-box grid-col-12 grid-md-col-6 d-flex flex-column justify-content-between p-1 p-md-2 has-translucent-white-15-background-color border-radius-0p5\">\n            <div>\n              <?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg id=\"Layer_2\" data-name=\"Layer 2\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 36 36\">\n  <defs>\n    <style>\n      .star-path {\n        fill: #73E083;\n      }\n    <\/style>\n  <\/defs>\n  <g id=\"Layer_1-2\" data-name=\"Layer 1\">\n    <path class=\"star-path\" d=\"M19.18,3.67c-.44.44-.82.92-1.18,1.4-.36-.48-.74-.96-1.18-1.4C12.48-.67,6.02-1.24,2.39,2.39s-3.06,10.09,1.28,14.43c.44.44.92.82,1.4,1.18-.48.36-.96.74-1.4,1.18-4.34,4.34-4.91,10.8-1.28,14.43s10.09,3.06,14.43-1.28c.44-.44.82-.92,1.18-1.4.36.48.74.96,1.18,1.4,4.34,4.34,10.8,4.91,14.43,1.28,3.63-3.63,3.06-10.09-1.28-14.43-.44-.44-.92-.82-1.4-1.18.48-.36.96-.74,1.4-1.18,4.34-4.34,4.91-10.8,1.28-14.43-3.63-3.63-10.09-3.06-14.43,1.28ZM30.59,8.32l-5.33,5.33c-2.4,2.4-2.4,6.29,0,8.7l5.33,5.33-2.91,2.91-5.33-5.33c-2.4-2.4-6.29-2.4-8.7,0l-5.33,5.33-2.91-2.91,5.33-5.33c2.4-2.4,2.4-6.29,0-8.7l-5.33-5.33,2.91-2.91,5.33,5.33c2.4,2.4,6.29,2.4,8.7,0l5.33-5.33,2.91,2.91Z\"\/>\n  <\/g>\n<\/svg>              <?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg id=\"Layer_2\" data-name=\"Layer 2\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 36 36\">\n  <defs>\n    <style>\n      .star-path {\n        fill: #73E083;\n      }\n    <\/style>\n  <\/defs>\n  <g id=\"Layer_1-2\" data-name=\"Layer 1\">\n    <path class=\"star-path\" d=\"M19.18,3.67c-.44.44-.82.92-1.18,1.4-.36-.48-.74-.96-1.18-1.4C12.48-.67,6.02-1.24,2.39,2.39s-3.06,10.09,1.28,14.43c.44.44.92.82,1.4,1.18-.48.36-.96.74-1.4,1.18-4.34,4.34-4.91,10.8-1.28,14.43s10.09,3.06,14.43-1.28c.44-.44.82-.92,1.18-1.4.36.48.74.96,1.18,1.4,4.34,4.34,10.8,4.91,14.43,1.28,3.63-3.63,3.06-10.09-1.28-14.43-.44-.44-.92-.82-1.4-1.18.48-.36.96-.74,1.4-1.18,4.34-4.34,4.91-10.8,1.28-14.43-3.63-3.63-10.09-3.06-14.43,1.28ZM30.59,8.32l-5.33,5.33c-2.4,2.4-2.4,6.29,0,8.7l5.33,5.33-2.91,2.91-5.33-5.33c-2.4-2.4-6.29-2.4-8.7,0l-5.33,5.33-2.91-2.91,5.33-5.33c2.4-2.4,2.4-6.29,0-8.7l-5.33-5.33,2.91-2.91,5.33,5.33c2.4,2.4,6.29,2.4,8.7,0l5.33-5.33,2.91,2.91Z\"\/>\n  <\/g>\n<\/svg>              <?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg id=\"Layer_2\" data-name=\"Layer 2\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 36 36\">\n  <defs>\n    <style>\n      .star-path {\n        fill: #73E083;\n      }\n    <\/style>\n  <\/defs>\n  <g id=\"Layer_1-2\" data-name=\"Layer 1\">\n    <path class=\"star-path\" d=\"M19.18,3.67c-.44.44-.82.92-1.18,1.4-.36-.48-.74-.96-1.18-1.4C12.48-.67,6.02-1.24,2.39,2.39s-3.06,10.09,1.28,14.43c.44.44.92.82,1.4,1.18-.48.36-.96.74-1.4,1.18-4.34,4.34-4.91,10.8-1.28,14.43s10.09,3.06,14.43-1.28c.44-.44.82-.92,1.18-1.4.36.48.74.96,1.18,1.4,4.34,4.34,10.8,4.91,14.43,1.28,3.63-3.63,3.06-10.09-1.28-14.43-.44-.44-.92-.82-1.4-1.18.48-.36.96-.74,1.4-1.18,4.34-4.34,4.91-10.8,1.28-14.43-3.63-3.63-10.09-3.06-14.43,1.28ZM30.59,8.32l-5.33,5.33c-2.4,2.4-2.4,6.29,0,8.7l5.33,5.33-2.91,2.91-5.33-5.33c-2.4-2.4-6.29-2.4-8.7,0l-5.33,5.33-2.91-2.91,5.33-5.33c2.4-2.4,2.4-6.29,0-8.7l-5.33-5.33,2.91-2.91,5.33,5.33c2.4,2.4,6.29,2.4,8.7,0l5.33-5.33,2.91,2.91Z\"\/>\n  <\/g>\n<\/svg>            <\/div>\n            <div>\n              Send funds, launch a fundraiser, or open a group account            <\/div>\n          <\/div>\n          <div class=\"animated-box grid-col-12 grid-md-col-6 d-flex flex-column justify-content-between p-1 p-md-2 has-translucent-white-15-background-color border-radius-0p5\">\n            <div>\n              <?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg id=\"Layer_2\" data-name=\"Layer 2\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 36 36\">\n  <defs>\n    <style>\n      .star-path {\n        fill: #73E083;\n      }\n    <\/style>\n  <\/defs>\n  <g id=\"Layer_1-2\" data-name=\"Layer 1\">\n    <path class=\"star-path\" d=\"M19.18,3.67c-.44.44-.82.92-1.18,1.4-.36-.48-.74-.96-1.18-1.4C12.48-.67,6.02-1.24,2.39,2.39s-3.06,10.09,1.28,14.43c.44.44.92.82,1.4,1.18-.48.36-.96.74-1.4,1.18-4.34,4.34-4.91,10.8-1.28,14.43s10.09,3.06,14.43-1.28c.44-.44.82-.92,1.18-1.4.36.48.74.96,1.18,1.4,4.34,4.34,10.8,4.91,14.43,1.28,3.63-3.63,3.06-10.09-1.28-14.43-.44-.44-.92-.82-1.4-1.18.48-.36.96-.74,1.4-1.18,4.34-4.34,4.91-10.8,1.28-14.43-3.63-3.63-10.09-3.06-14.43,1.28ZM30.59,8.32l-5.33,5.33c-2.4,2.4-2.4,6.29,0,8.7l5.33,5.33-2.91,2.91-5.33-5.33c-2.4-2.4-6.29-2.4-8.7,0l-5.33,5.33-2.91-2.91,5.33-5.33c2.4-2.4,2.4-6.29,0-8.7l-5.33-5.33,2.91-2.91,5.33,5.33c2.4,2.4,6.29,2.4,8.7,0l5.33-5.33,2.91,2.91Z\"\/>\n  <\/g>\n<\/svg>              <?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg id=\"Layer_2\" data-name=\"Layer 2\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 36 36\">\n  <defs>\n    <style>\n      .star-path {\n        fill: #73E083;\n      }\n    <\/style>\n  <\/defs>\n  <g id=\"Layer_1-2\" data-name=\"Layer 1\">\n    <path class=\"star-path\" d=\"M19.18,3.67c-.44.44-.82.92-1.18,1.4-.36-.48-.74-.96-1.18-1.4C12.48-.67,6.02-1.24,2.39,2.39s-3.06,10.09,1.28,14.43c.44.44.92.82,1.4,1.18-.48.36-.96.74-1.4,1.18-4.34,4.34-4.91,10.8-1.28,14.43s10.09,3.06,14.43-1.28c.44-.44.82-.92,1.18-1.4.36.48.74.96,1.18,1.4,4.34,4.34,10.8,4.91,14.43,1.28,3.63-3.63,3.06-10.09-1.28-14.43-.44-.44-.92-.82-1.4-1.18.48-.36.96-.74,1.4-1.18,4.34-4.34,4.91-10.8,1.28-14.43-3.63-3.63-10.09-3.06-14.43,1.28ZM30.59,8.32l-5.33,5.33c-2.4,2.4-2.4,6.29,0,8.7l5.33,5.33-2.91,2.91-5.33-5.33c-2.4-2.4-6.29-2.4-8.7,0l-5.33,5.33-2.91-2.91,5.33-5.33c2.4-2.4,2.4-6.29,0-8.7l-5.33-5.33,2.91-2.91,5.33,5.33c2.4,2.4,6.29,2.4,8.7,0l5.33-5.33,2.91,2.91Z\"\/>\n  <\/g>\n<\/svg>              <?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg id=\"Layer_2\" data-name=\"Layer 2\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 36 36\">\n  <defs>\n    <style>\n      .star-path {\n        fill: #73E083;\n      }\n    <\/style>\n  <\/defs>\n  <g id=\"Layer_1-2\" data-name=\"Layer 1\">\n    <path class=\"star-path\" d=\"M19.18,3.67c-.44.44-.82.92-1.18,1.4-.36-.48-.74-.96-1.18-1.4C12.48-.67,6.02-1.24,2.39,2.39s-3.06,10.09,1.28,14.43c.44.44.92.82,1.4,1.18-.48.36-.96.74-1.4,1.18-4.34,4.34-4.91,10.8-1.28,14.43s10.09,3.06,14.43-1.28c.44-.44.82-.92,1.18-1.4.36.48.74.96,1.18,1.4,4.34,4.34,10.8,4.91,14.43,1.28,3.63-3.63,3.06-10.09-1.28-14.43-.44-.44-.92-.82-1.4-1.18.48-.36.96-.74,1.4-1.18,4.34-4.34,4.91-10.8,1.28-14.43-3.63-3.63-10.09-3.06-14.43,1.28ZM30.59,8.32l-5.33,5.33c-2.4,2.4-2.4,6.29,0,8.7l5.33,5.33-2.91,2.91-5.33-5.33c-2.4-2.4-6.29-2.4-8.7,0l-5.33,5.33-2.91-2.91,5.33-5.33c2.4-2.4,2.4-6.29,0-8.7l-5.33-5.33,2.91-2.91,5.33,5.33c2.4,2.4,6.29,2.4,8.7,0l5.33-5.33,2.91,2.91Z\"\/>\n  <\/g>\n<\/svg>              <?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg id=\"Layer_2\" data-name=\"Layer 2\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 36 36\">\n  <defs>\n    <style>\n      .star-path {\n        fill: #73E083;\n      }\n    <\/style>\n  <\/defs>\n  <g id=\"Layer_1-2\" data-name=\"Layer 1\">\n    <path class=\"star-path\" d=\"M19.18,3.67c-.44.44-.82.92-1.18,1.4-.36-.48-.74-.96-1.18-1.4C12.48-.67,6.02-1.24,2.39,2.39s-3.06,10.09,1.28,14.43c.44.44.92.82,1.4,1.18-.48.36-.96.74-1.4,1.18-4.34,4.34-4.91,10.8-1.28,14.43s10.09,3.06,14.43-1.28c.44-.44.82-.92,1.18-1.4.36.48.74.96,1.18,1.4,4.34,4.34,10.8,4.91,14.43,1.28,3.63-3.63,3.06-10.09-1.28-14.43-.44-.44-.92-.82-1.4-1.18.48-.36.96-.74,1.4-1.18,4.34-4.34,4.91-10.8,1.28-14.43-3.63-3.63-10.09-3.06-14.43,1.28ZM30.59,8.32l-5.33,5.33c-2.4,2.4-2.4,6.29,0,8.7l5.33,5.33-2.91,2.91-5.33-5.33c-2.4-2.4-6.29-2.4-8.7,0l-5.33,5.33-2.91-2.91,5.33-5.33c2.4-2.4,2.4-6.29,0-8.7l-5.33-5.33,2.91-2.91,5.33,5.33c2.4,2.4,6.29,2.4,8.7,0l5.33-5.33,2.91,2.91Z\"\/>\n  <\/g>\n<\/svg>            <\/div>\n            <div>\n              Share fundraisers and payment links directly to your social app            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  window.addEventListener('DOMContentLoaded', () => {\n    gsap.registerPlugin(ScrollTrigger);\n\n    gsap.utils.toArray('.post-to-payment').forEach(p2p => {\n      const outer = p2p.querySelector('.p2p-outer');\n      const h2 = p2p.querySelector('h2');\n      const cta = p2p.querySelector('.cta');\n      const boxes = Array.from(p2p.querySelectorAll('.animated-box'));\n      const elements = [h2, cta, ...boxes];\n      const N = elements.length;\n      if (!outer || !N) return;\n\n      const slotHeight = window.innerHeight;\n      outer.style.height = `${slotHeight * N}px`;\n\n      gsap.set(elements, { opacity: 0, y: 20 });\n\n      const progressFill = p2p.querySelector('.progress-fill');\n      if (progressFill) gsap.set(progressFill, { opacity: 0 });\n\n      let ctaTimeout = null;\n      function scheduleCtaVisible() {\n        clearTimeout(ctaTimeout);\n        ctaTimeout = setTimeout(() => cta && cta.classList.add('visible'), 250);\n      }\n      function cancelCtaVisible() {\n        clearTimeout(ctaTimeout);\n        cta && cta.classList.remove('visible');\n      }\n\n      const tl = gsap.timeline({ paused: true });\n      tl.to(elements, {\n        opacity: 1,\n        y:       0,\n        duration: 0.5,\n        ease:    'power2.out',\n        stagger: {\n          each: 0.15,\n          onComplete() {\n            if (this.targets()[0] === cta) scheduleCtaVisible();\n          },\n        },\n      });\n\n      ScrollTrigger.create({\n        trigger:     outer,\n        start:       'top top',\n        end:         'bottom bottom',\n        onEnter:     () => { tl.play(); progressFill && gsap.to(progressFill, { opacity: 1, duration: 0.2, ease: 'power2.out' }); },\n        onLeave:     () => progressFill && gsap.to(progressFill, { opacity: 0, duration: 0.2, ease: 'power2.in' }),\n        onEnterBack: () => { tl.play(); progressFill && gsap.to(progressFill, { opacity: 1, duration: 0.2, ease: 'power2.out' }); },\n        onLeaveBack: () => {\n          tl.reverse();\n          cancelCtaVisible();\n          progressFill && gsap.to(progressFill, { opacity: 0, duration: 0.2, ease: 'power2.in' });\n        },\n        onUpdate: (self) => {\n          if (!progressFill) return;\n          const p = self.progress * 100;\n          progressFill.style.background = `linear-gradient(to right, var(--wp--preset--color--translucent-white-60) ${p}%, var(--wp--preset--color--translucent-white-15) ${p}%)`;\n        },\n      });\n    });\n  });\n<\/script>\n\n\n\n<div id=\"built-for-block-block_3cc498efc57e6a3ac5897ce10c0ba249\" class=\"built-for-block alignfull\" style=\"background:#DADADA;\">\n  <div class=\"progress-bar has-translucent-purple-10-background-color\" style=\"position:sticky;top:0;height:5px;overflow:visible;z-index:1001;pointer-events:none;\">\n    <div class=\"progress-fill\" style=\"position:absolute;top:0;height:5px;\"><\/div>\n  <\/div>\n  <div class=\"lead-in d-flex flex-column flex-md-row justify-content-md-between gap-1p5 p-sticky top-0 w-100 vh-100 p-1p5 p-md-3\" style=\"z-index:998;\">\n    <h2 class=\"w-lg-50 mt-1 mt-md-0\">Built for how people already organize online<\/h2>\n    <a href=\"\/\" class=\"cta d-flex align-items-baseline text-decoration-none white-space-nowrap border-1 has-translucent-white-15-background-color border-radius-0p5 px-1 py-0p5 w-fit-content h-fit-content\"><b>Get Started<\/b><\/a>\n  <\/div> \n  <div class=\"built-for-outer\">\n    <div class=\"built-for-inner\">\n              <div class=\"use-case d-flex flex-column w-100 h-100\">\n          <div class=\"d-flex flex-column p-relative h-66 h-sm-75 mt-auto\">\n            <div class=\"p-absolute top-0 left-0 w-100 h-100\" style=\"z-index:998;background:linear-gradient(180deg, rgba(98, 98, 231, 0.00) 0%, #6262E7 75%);\"><\/div>\n            <img decoding=\"async\" class=\"primary-image w-100 h-100 p-absolute\" style=\"object-fit:cover;\" src=\"https:\/\/blacksky.cash\/wp-content\/uploads\/2026\/04\/payments-between-friends.webp\" alt=\"\">\n            <img decoding=\"async\" style=\"backdrop-filter:blur(10px);border-radius:15px;\" class=\"secondary-image p-relative w-75 w-sm-50 w-md-25 mx-auto\" src=\"https:\/\/blacksky.cash\/wp-content\/uploads\/2026\/04\/payments-between-friends-overlay.webp\">\n            <div class=\"d-flex flex-column flex-lg-row justify-content-lg-between align-items-lg-center p-relative has-white-color px-1p5 px-md-3 pt-1p5 pt-md-3 mt-auto\" style=\"z-index:998;padding-bottom: var(--header-height);\">\n              <h2 class=\"mb-2 mb-md-3\">Payments Between Friends<\/h2>\n              <p class=\"mb-3\">Trips, rent, shared expenses<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n              <div class=\"use-case d-flex flex-column w-100 h-100\">\n          <div class=\"d-flex flex-column p-relative h-66 h-sm-75 mt-auto\">\n            <div class=\"p-absolute top-0 left-0 w-100 h-100\" style=\"z-index:998;background:linear-gradient(180deg, rgba(98, 98, 231, 0.00) 0%, #6262E7 75%);\"><\/div>\n            <img decoding=\"async\" class=\"primary-image w-100 h-100 p-absolute\" style=\"object-fit:cover;\" src=\"https:\/\/blacksky.cash\/wp-content\/uploads\/2026\/04\/mutual-aid-relief.webp\" alt=\"\">\n            <img decoding=\"async\" style=\"backdrop-filter:blur(10px);border-radius:15px;\" class=\"secondary-image p-relative w-75 w-sm-50 w-md-25 mx-auto\" src=\"https:\/\/blacksky.cash\/wp-content\/uploads\/2026\/04\/mutual-aid-relief-overlay.webp\">\n            <div class=\"d-flex flex-column flex-lg-row justify-content-lg-between align-items-lg-center p-relative has-white-color px-1p5 px-md-3 pt-1p5 pt-md-3 mt-auto\" style=\"z-index:998;padding-bottom: var(--header-height);\">\n              <h2 class=\"mb-2 mb-md-3\">Mutual Aid & Relief<\/h2>\n              <p class=\"mb-3\">Emergency support, fundraising<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n              <div class=\"use-case d-flex flex-column w-100 h-100\">\n          <div class=\"d-flex flex-column p-relative h-66 h-sm-75 mt-auto\">\n            <div class=\"p-absolute top-0 left-0 w-100 h-100\" style=\"z-index:998;background:linear-gradient(180deg, rgba(98, 98, 231, 0.00) 0%, #6262E7 75%);\"><\/div>\n            <img decoding=\"async\" class=\"primary-image w-100 h-100 p-absolute\" style=\"object-fit:cover;\" src=\"https:\/\/blacksky.cash\/wp-content\/uploads\/2026\/04\/creators-collectives.webp\" alt=\"\">\n            <img decoding=\"async\" style=\"backdrop-filter:blur(10px);border-radius:15px;\" class=\"secondary-image p-relative w-75 w-sm-50 w-md-25 mx-auto\" src=\"https:\/\/blacksky.cash\/wp-content\/uploads\/2026\/04\/creators-collectives-overlay.webp\">\n            <div class=\"d-flex flex-column flex-lg-row justify-content-lg-between align-items-lg-center p-relative has-white-color px-1p5 px-md-3 pt-1p5 pt-md-3 mt-auto\" style=\"z-index:998;padding-bottom: var(--header-height);\">\n              <h2 class=\"mb-2 mb-md-3\">Creators & Collectives<\/h2>\n              <p class=\"mb-3\">Third thing here<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n          <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  window.addEventListener('DOMContentLoaded', () => {\n    let mm = gsap.matchMedia();\n    gsap.registerPlugin(ScrollTrigger);\n    gsap.utils.toArray('.built-for-block').forEach(block => {\n      \/\/ Set up initial animation for the title\/header section\n      gsap.utils.toArray('.lead-in', block).forEach(leadIn => {\n        const leadInText = gsap.utils.toArray('h2', leadIn);\n        gsap.set(leadInText, {\n          transformOrigin: 'top left',\n        });\n        mm.add(\"(min-width: 782px)\", () => {\n          gsap.to(leadInText, {\n            scrollTrigger: {\n              trigger: leadInText,\n              start: 'top 100%',\n              end: 'bottom top',\n              scrub: true,\n              toggleActions: 'play none none reverse', \/\/ Reverts color when scrolling back up\n            },\n            scale: '0.5625',\n            duration: 0.75,\n            ease: 'power2.inOut',\n          });\n        });\n      });\n\n      const cta = block.querySelector('.cta');\n      if (cta) {\n        ScrollTrigger.create({\n          trigger:     block,\n          start:       'top top',\n          end:         'bottom bottom',\n          onEnter:     () => cta.classList.add('visible'),\n          onEnterBack: () => cta.classList.add('visible'),\n          onLeave:     () => cta.classList.remove('visible'),\n          onLeaveBack: () => cta.classList.remove('visible'),\n        });\n      }\n    });\n    gsap.utils.toArray('.built-for-inner').forEach(container => {\n      \/\/ Get the use cases, make sure they exist\n      const uses = gsap.utils.toArray('.use-case', container);\n      if (!uses.length) return;\n      const n = uses.length;\n      const progressFill = container.closest('.built-for-block').querySelector('.progress-fill');\n      const segW = 100 \/ n;\n      gsap.set(progressFill, { width: `${segW}%`, left: '0%', opacity: 0 });\n      const outer = container.parentElement;\n      \/\/ CSS sticky: outer is tall, container sticks within it\n      gsap.set(outer, {\n        height: `${n * 250}vh`,\n      });\n      gsap.set(container, {\n        position: 'sticky',\n        top: 0,\n        height: '100vh',\n        overflow: 'hidden',\n      });\n      \/\/ Stack use-cases; first visible, rest hidden\n      gsap.set(uses, {\n        position: 'absolute',\n        inset: 0,\n        opacity: 0,\n      });\n      gsap.set(uses[0], {\n        opacity: 1\n      });\n      let lastActive = 0;\n      ScrollTrigger.create({\n        trigger: outer,\n        start: 'top top',\n        end: 'bottom bottom',\n        onEnter: () => gsap.to(progressFill, { opacity: 1, duration: 0.2, ease: 'power2.out' }),\n        onLeave: () => gsap.to(progressFill, { opacity: 0, duration: 0.2, ease: 'power2.in' }),\n        onEnterBack: () => gsap.to(progressFill, { opacity: 1, duration: 0.2, ease: 'power2.out' }),\n        onLeaveBack: () => gsap.to(progressFill, { opacity: 0, duration: 0.2, ease: 'power2.in' }),\n        onUpdate: (self) => {\n          const rawProgress = self.progress * n;\n          const activeIndex = Math.min(Math.floor(rawProgress), n - 1);\n          const slotProgress = activeIndex < n - 1\n            ? rawProgress - activeIndex\n            : Math.min(rawProgress - (n - 1), 1);\n          progressFill.style.background = `linear-gradient(to right, var(--wp--preset--color--purple) ${slotProgress * 100}%, var(--wp--preset--color--translucent-purple-50) ${slotProgress * 100}%)`;\n\n          if (activeIndex === lastActive) return;\n          gsap.to(uses[lastActive], {\n            opacity: 0,\n            duration: 0.2,\n            ease: 'power2.inOut',\n          });\n          gsap.to(uses[activeIndex], {\n            opacity: 1,\n            duration: 0.2,\n            ease: 'power2.inOut',\n          });\n          gsap.to(progressFill, { left: `${activeIndex * segW}%`, duration: 0.2, ease: 'power2.out' });\n          lastActive = activeIndex;\n        }\n      });\n    });\n  });\n<\/script>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Home - Blacksky Cash<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blacksky.cash\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home - Blacksky Cash\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blacksky.cash\/\" \/>\n<meta property=\"og:site_name\" content=\"Blacksky Cash\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-30T14:33:56+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blacksky.cash\\\/\",\"url\":\"https:\\\/\\\/blacksky.cash\\\/\",\"name\":\"Home - Blacksky Cash\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blacksky.cash\\\/#website\"},\"datePublished\":\"2026-04-15T13:24:30+00:00\",\"dateModified\":\"2026-07-30T14:33:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blacksky.cash\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blacksky.cash\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blacksky.cash\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blacksky.cash\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blacksky.cash\\\/#website\",\"url\":\"https:\\\/\\\/blacksky.cash\\\/\",\"name\":\"Blacksky Cash\",\"description\":\"Shared money, built on shared trust\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blacksky.cash\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Home - Blacksky Cash","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blacksky.cash\/","og_locale":"en_US","og_type":"article","og_title":"Home - Blacksky Cash","og_url":"https:\/\/blacksky.cash\/","og_site_name":"Blacksky Cash","article_modified_time":"2026-07-30T14:33:56+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blacksky.cash\/","url":"https:\/\/blacksky.cash\/","name":"Home - Blacksky Cash","isPartOf":{"@id":"https:\/\/blacksky.cash\/#website"},"datePublished":"2026-04-15T13:24:30+00:00","dateModified":"2026-07-30T14:33:56+00:00","breadcrumb":{"@id":"https:\/\/blacksky.cash\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blacksky.cash\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blacksky.cash\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blacksky.cash\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/blacksky.cash\/#website","url":"https:\/\/blacksky.cash\/","name":"Blacksky Cash","description":"Shared money, built on shared trust","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blacksky.cash\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/blacksky.cash\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blacksky.cash\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blacksky.cash\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blacksky.cash\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blacksky.cash\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":55,"href":"https:\/\/blacksky.cash\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":154,"href":"https:\/\/blacksky.cash\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/154"}],"wp:attachment":[{"href":"https:\/\/blacksky.cash\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}