{"id":56,"date":"2026-05-15T14:49:47","date_gmt":"2026-05-15T14:49:47","guid":{"rendered":"https:\/\/joinprelude.app\/?page_id=56"},"modified":"2026-05-21T12:46:09","modified_gmt":"2026-05-21T12:46:09","slug":"prelude-homepage-draft-v1","status":"publish","type":"page","link":"https:\/\/joinprelude.app\/?page_id=56","title":{"rendered":"Prelude Homepage Draft V1"},"content":{"rendered":"<style id=\"prelude-draft-v1-styles\">\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap');<\/p>\n<p>html {\n  scroll-behavior: smooth;\n  scroll-snap-type: y mandatory;\n  scroll-padding-block: 42px 26px;\n}\nbody {\n  margin: 0 !important;\n  background: #fbf6ff !important;\n  overflow-x: hidden;\n  scroll-snap-type: y mandatory;\n  scroll-padding-block: 42px 26px;\n}\nbody > header, body > footer, .site-header, .site-footer, #masthead, #colophon, .wp-site-blocks > header, .wp-site-blocks > footer { display: none !important; }\n.entry-header, .page-header, .post-thumbnail, .comments-area, .wp-block-post-title { display: none !important; }\n.site, .site-main, .content-area, .entry-content, .wp-site-blocks, main, article { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }\n.entry-content > * { max-width: none !important; }<\/p>\n<p>.prelude-stage-root,\n.prelude-stage-root * { box-sizing: border-box; }\n.prelude-stage-root {\n  --purple: #7e32de;\n  --violet: #8f42f0;\n  --pink: #eb53be;\n  --orange: #ff980f;\n  --gold: #ffcf72;\n  --blue: #cfe7ff;\n  --mint: #b9eee2;\n  --prelude-wave-speed: 46s;\n  --prelude-wave-drift-x: .95vw;\n  --prelude-wave-drift-y: .75vh;\n  --prelude-wave-rotate: .72deg;\n  --prelude-wave-opacity: .94;\n  --prelude-wave-glow: .62;\n  --prelude-wave-edge-glow: .88;\n  --prelude-wave-striation: .36;\n  --prelude-wave-right: -10vw;\n  --prelude-wave-top: -31vh;\n  --prelude-wave-width: min(132vw, 2280px);\n  --prelude-wave-blur: 13px;\n  --stripe-blue: #d8efff;\n  --stripe-lavender: #b7a0ff;\n  --stripe-violet: #7c4df0;\n  --stripe-orange: #ff990f;\n  --stripe-gold: #ffd66f;\n  --stripe-coral: #ff615e;\n  --stripe-pink: #f25fb8;\n  --stripe-rose: #ff7d93;\n  --prelude-ribbon-opacity: .94;\n  --prelude-ribbon-softness: saturate(124%) brightness(1.035);\n  --ink: #171526;\n  --muted: #6e6b80;\n  --soft: rgba(255,255,255,.72);\n  position: relative;\n  left: 50%;\n  right: 50%;\n  width: 100vw;\n  margin-left: -50vw;\n  margin-right: -50vw;\n  min-height: 100vh;\n  color: var(--ink);\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  background: #fbf6ff;\n  isolation: isolate;\n}\n.prelude-stage-root a { color: inherit; text-decoration: none; }\n.prelude-bg {\n  position: fixed;\n  inset: 42px 0 26px;\n  z-index: 0;\n  pointer-events: none;\n  overflow: hidden;\n  background:\n    radial-gradient(circle at 42% 22%, rgba(255,255,255,.99) 0 24%, rgba(255,255,255,.84) 46%, transparent 70%),\n    radial-gradient(circle at 55% 34%, rgba(223,235,255,.44), rgba(246,240,255,.32) 36%, transparent 64%),\n    radial-gradient(circle at 14% 66%, rgba(255,255,255,.98), rgba(250,247,255,.72) 40%, transparent 66%),\n    linear-gradient(112deg, #fff 0%, #fbf9ff 52%, #fff8fd 100%);\n}\n.prelude-bg::before,\n.prelude-bg::after {\n  content: \"\";\n  position: absolute;\n  border-radius: 999px;\n  filter: blur(42px);\n  opacity: .44;\n  will-change: transform, opacity;\n}\n.prelude-bg::before {\n  width: min(54vw, 980px);\n  height: min(54vw, 980px);\n  right: -16vw;\n  top: -20vh;\n  background: radial-gradient(circle, rgba(255,168,37,.24), rgba(242,95,184,.13) 46%, transparent 74%);\n  animation: prelude-breathe 30s ease-in-out infinite alternate;\n}\n.prelude-bg::after {\n  width: min(48vw, 820px);\n  height: min(42vw, 720px);\n  right: -4vw;\n  bottom: -15vh;\n  background: radial-gradient(circle, rgba(138,87,255,.16), rgba(207,231,255,.19) 42%, transparent 72%);\n  animation: prelude-breathe 38s ease-in-out infinite alternate-reverse;\n}\n.prelude-wave {\n  position: absolute;\n  z-index: 3;\n  width: var(--prelude-wave-width);\n  height: calc(100vh + 430px);\n  right: var(--prelude-wave-right);\n  top: var(--prelude-wave-top);\n  transform-origin: 67% 48%;\n  opacity: var(--prelude-wave-opacity);\n  contain: layout paint;\n  will-change: transform;\n  animation: prelude-wave-drift var(--prelude-wave-speed) ease-in-out infinite alternate;\n}\n.prelude-wave-svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  shape-rendering: geometricPrecision;\n}\n.prelude-wave .wave-panel { vector-effect: non-scaling-stroke; }\n.prelude-wave .wave-glow { filter: blur(var(--prelude-wave-blur)); opacity: var(--prelude-wave-glow); }\n.prelude-wave .wave-shadow { filter: blur(22px); opacity: .18; mix-blend-mode: multiply; }\n.prelude-wave .wave-cool { opacity: .86; }\n.prelude-wave .wave-violet { opacity: .76; }\n.prelude-wave .wave-orange { opacity: .94; }\n.prelude-wave .wave-coral { opacity: .82; }\n.prelude-wave .wave-pink { opacity: .86; }\n.prelude-wave .wave-lower { opacity: .58; }\n.prelude-wave .wave-striation { opacity: var(--prelude-wave-striation); mix-blend-mode: screen; }\n.prelude-wave .wave-striation-fine { opacity: .28; mix-blend-mode: overlay; }\n.prelude-wave .wave-edge { opacity: var(--prelude-wave-edge-glow); filter: url(#preludeWaveFineGlow); }\n.prelude-wave .wave-edge-soft { opacity: .54; filter: url(#preludeWaveFineGlow); }\n.prelude-wave .wave-hotline { opacity: .92; filter: url(#preludeWaveLineGlow); }\n.prelude-wave .wave-luminous-core { opacity: .82; filter: url(#preludeWaveLineGlow); }\n.prelude-wave .wave-sweep { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .52; mix-blend-mode: screen; filter: url(#preludeWaveFineGlow); }\n.prelude-wave .wave-sweep.warm { opacity: .5; }\n.prelude-wave .wave-sweep.pink { opacity: .28; }\n.prelude-wave .ribbon-body { opacity: .78; }\n.prelude-wave .ribbon-bloom { filter: url(#preludeRibbonSoftGlow); opacity: .62; }\n.prelude-wave .ribbon-shadow { filter: url(#preludeRibbonShadow); opacity: .2; mix-blend-mode: multiply; }\n.prelude-wave .ribbon-lane {\n  fill: none;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  vector-effect: non-scaling-stroke;\n}\n.prelude-wave .ribbon-lane.cool { opacity: .58; }\n.prelude-wave .ribbon-lane.violet { opacity: .62; }\n.prelude-wave .ribbon-lane.orange { opacity: .88; }\n.prelude-wave .ribbon-lane.gold { opacity: .92; filter: url(#preludeRibbonLineGlow); }\n.prelude-wave .ribbon-lane.pink { opacity: .76; }\n.prelude-wave .ribbon-edge { filter: url(#preludeRibbonLineGlow); opacity: .86; }\n.prelude-wave .ribbon-edge.soft { opacity: .54; }\n.prelude-wave .ribbon-striae { opacity: .4; mix-blend-mode: screen; animation: prelude-ribbon-texture 31s ease-in-out infinite alternate; transform-origin: 66% 46%; }\n.prelude-wave .ribbon-micro { opacity: .27; mix-blend-mode: overlay; animation: prelude-ribbon-micro 23s ease-in-out infinite alternate; transform-origin: 68% 48%; }\n.prelude-wave .ribbon-living-a { animation: prelude-ribbon-layer-a 37s ease-in-out infinite alternate; transform-origin: 66% 44%; }\n.prelude-wave .ribbon-living-b { animation: prelude-ribbon-layer-b 43s ease-in-out infinite alternate-reverse; transform-origin: 71% 50%; }\n@keyframes prelude-wave-drift {\n  from { transform: translate3d(var(--prelude-wave-drift-x), calc(var(--prelude-wave-drift-y) * -1), 0) rotate(calc(var(--prelude-wave-rotate) * -1)) scale(1); }\n  to { transform: translate3d(calc(var(--prelude-wave-drift-x) * -1), var(--prelude-wave-drift-y), 0) rotate(var(--prelude-wave-rotate)) scale(1.008); }\n}\n@keyframes prelude-ribbon-texture {\n  from { transform: translate3d(-18px,-8px,0) rotate(-.18deg); }\n  to { transform: translate3d(20px,12px,0) rotate(.18deg); }\n}\n@keyframes prelude-ribbon-micro {\n  from { transform: translate3d(10px,-14px,0); }\n  to { transform: translate3d(-12px,16px,0); }\n}\n@keyframes prelude-ribbon-layer-a {\n  from { transform: translate3d(-10px,-6px,0) rotate(-.24deg); }\n  to { transform: translate3d(8px,10px,0) rotate(.18deg); }\n}\n@keyframes prelude-ribbon-layer-b {\n  from { transform: translate3d(8px,4px,0) rotate(.2deg); }\n  to { transform: translate3d(-9px,-8px,0) rotate(-.16deg); }\n}\n@keyframes prelude-breathe {\n  from { transform: translate3d(0,0,0) scale(.98); opacity: .34; }\n  to { transform: translate3d(-1.3vw,1.5vh,0) scale(1.06); opacity: .58; }\n}<\/p>\n<p>.prelude-bg {\n  isolation: isolate;\n  background:\n    radial-gradient(circle at 54% 22%, rgba(248,240,255,.74) 0 18%, rgba(248,240,255,.32) 42%, transparent 68%),\n    radial-gradient(circle at 82% 52%, rgba(232,247,255,.55), rgba(244,236,255,.34) 45%, transparent 72%),\n    linear-gradient(112deg, #fbf6ff 0%, #fbf6ff 50%, #f4efff 76%, #eef9ff 100%);\n}\n.prelude-bg::before {\n  inset: 0;\n  z-index: 2;\n  width: auto;\n  height: auto;\n  border-radius: 0;\n  filter: none;\n  opacity: .54;\n  animation: none;\n  background:\n    radial-gradient(ellipse at 50% 17%, rgba(251,246,255,.86) 0 20%, rgba(251,246,255,.36) 42%, transparent 68%),\n    linear-gradient(180deg, rgba(251,246,255,.34) 0%, rgba(251,246,255,.12) 28%, transparent 58%);\n}\n.prelude-bg::after {\n  z-index: 3;\n  right: 7vw;\n  top: 7vh;\n  bottom: auto;\n  width: min(52vw, 880px);\n  height: min(46vw, 760px);\n  border-radius: 999px;\n  filter: blur(50px);\n  opacity: .34;\n  animation: none;\n  background: radial-gradient(circle, rgba(139,91,255,.24), rgba(227,194,255,.18) 38%, rgba(185,238,226,.08) 62%, transparent 78%);\n}\n.prelude-ribbon-canvas {\n  position: absolute;\n  z-index: 1;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  display: block;\n  opacity: var(--prelude-ribbon-opacity);\n  filter: var(--prelude-ribbon-softness);\n  pointer-events: none;\n}\n.prelude-reduced-motion .prelude-ribbon-canvas {\n  opacity: .78;\n}\n.prelude-topbar {\n  position: fixed;\n  z-index: 20;\n  top: 2px;\n  left: 2px;\n  right: 2px;\n  height: 42px;\n  padding: 0 24px;\n  color: #fff;\n  background: linear-gradient(135deg, #853bce 0%, #b85ec9 50%, #ca72bb 100%);\n  border-radius: 17px 17px 0 0;\n  overflow: hidden;\n}\n.prelude-topbar-inner {\n  width: min(1200px, 100%);\n  height: 42px;\n  margin: 0 auto;\n  padding: 0 24px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  position: relative;\n  z-index: 2;\n}\n.prelude-brand {\n  position: static;\n  transform: none;\n  font-family: \"Playfair Display\", Georgia, serif;\n  font-size: 14px;\n  line-height: 1;\n  font-weight: 700;\n  letter-spacing: 0;\n  color: #fff;\n}\n.prelude-nav {\n  position: static;\n  display: flex;\n  align-items: center;\n  gap: 26px;\n  color: rgba(255,255,255,.8);\n  font-family: \"DM Sans\", system-ui, sans-serif;\n  font-size: 8px;\n  line-height: 1;\n  font-weight: 500;\n}\n.prelude-nav a {\n  opacity: 1;\n  transition: color .2s ease;\n}\n.prelude-nav a:hover { color: #fff; }\n.prelude-bottombar {\n  position: fixed;\n  z-index: 20;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  min-height: 26px;\n  padding: 0 max(18px, calc((100vw - 1200px) \/ 2));\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  align-items: center;\n  gap: 18px;\n  color: #6d6a7b;\n  background: rgba(255,255,255,.92);\n  border-top: 1px solid rgba(50,44,72,.08);\n  backdrop-filter: blur(18px);\n  box-shadow: 0 -12px 34px rgba(45,35,80,.08);\n}\n.prelude-bottombar .prelude-foot-brand {\n  justify-self: start;\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  font-family: \"Playfair Display\", Georgia, serif;\n  font-weight: 800;\n  font-size: 18px;\n  line-height: 1;\n  color: #8b3ee6;\n  text-shadow: 0 2px 12px rgba(126,50,222,.16);\n}\n.prelude-bottombar .prelude-foot-brand img {\n  width: 17px;\n  height: 17px;\n  display: block;\n  object-fit: contain;\n}\n.prelude-foot-links {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 30px;\n  font-size: 12px;\n  font-weight: 500;\n}\n.prelude-copy {\n  justify-self: end;\n  font-size: 11px;\n  color: #777385;\n  white-space: nowrap;\n}<\/p>\n<p>.prelude-scroll {\n  position: relative;\n  z-index: 2;\n  min-height: 100vh;\n  padding-top: 42px !important;\n  padding-bottom: 26px !important;\n}\n.prelude-scene {\n  position: relative;\n  min-height: calc(100vh - 68px);\n  scroll-snap-align: center;\n  scroll-snap-stop: always;\n  scroll-margin-block: 42px 26px;\n  display: grid;\n  place-items: center;\n  padding: clamp(42px, 6vh, 72px) clamp(20px, 4vw, 68px);\n  overflow: hidden;\n}\n.scene-inner {\n  width: min(1380px, 100%);\n  margin: 0 auto;\n  position: relative;\n  transform-origin: 50% 48%;\n  transform: translate3d(0, var(--scene-depth-y, 0px), var(--scene-depth-z, 0px)) scale(var(--scene-depth-scale, 1));\n  opacity: var(--scene-depth-opacity, 1);\n  filter: blur(var(--scene-depth-blur, 0px));\n}\n.prelude-depth-active .prelude-scroll {\n  perspective: 1180px;\n  transform-style: preserve-3d;\n}\n.prelude-depth-active .prelude-scene {\n  transform-style: preserve-3d;\n  contain: layout paint;\n}\n.prelude-depth-active .scene-inner {\n  will-change: transform, opacity, filter;\n  backface-visibility: hidden;\n}\n.prelude-depth-lite .scene-inner {\n  will-change: transform, opacity;\n}\n.prelude-depth-disabled .scene-inner {\n  transform: none !important;\n  opacity: 1 !important;\n  filter: none !important;\n}\n.scene-depth-current .scene-inner {\n  z-index: 2;\n}\n.eyebrow {\n  margin: 0 0 14px;\n  color: #7e32de;\n  font-size: 13px;\n  line-height: 1;\n  letter-spacing: .14em;\n  font-weight: 800;\n  text-transform: uppercase;\n}\n.eyebrow.mint { color: #13a8a0; }\n.serif {\n  font-family: \"Playfair Display\", Georgia, serif;\n  letter-spacing: 0;\n}\n.headline {\n  margin: 0;\n  color: #191724;\n  font-family: \"Playfair Display\", Georgia, serif;\n  font-weight: 800;\n  line-height: .96;\n  letter-spacing: 0;\n}\n.body-copy {\n  margin: 18px 0 0;\n  color: var(--muted);\n  font-size: 17px;\n  line-height: 1.65;\n}<\/p>\n<p>.hero-scene {\n  text-align: center;\n  align-items: start;\n  padding-top: 22px;\n  padding-bottom: 0;\n}\n.hero-copy {\n  width: min(980px, 94vw);\n  margin: 0 auto;\n  position: relative;\n  z-index: 3;\n}\n.hero-copy::before {\n  content: \"\";\n  position: absolute;\n  z-index: -1;\n  left: 50%;\n  top: -18px;\n  width: min(760px, 72vw);\n  height: 210px;\n  transform: translateX(-50%);\n  background: radial-gradient(ellipse at center, rgba(255,255,255,.94) 0 44%, rgba(255,255,255,.72) 62%, transparent 82%);\n  filter: blur(6px);\n  pointer-events: none;\n}\n.hero-copy .headline {\n  font-size: 42px;\n  max-width: 1060px;\n  margin-inline: auto;\n}\n.hero-copy .eyebrow {\n  margin-bottom: 10px;\n  font-size: 10.5px;\n  letter-spacing: .165em;\n}\n.hero-copy .headline span {\n  display: inline;\n  color: #8d3fe8;\n  text-shadow: 0 10px 35px rgba(126,50,222,.18);\n}\n.hero-copy .body-copy {\n  max-width: 550px;\n  margin-inline: auto;\n  margin-top: 15px;\n  font-size: 13.6px;\n  line-height: 1.52;\n  font-weight: 500;\n}\n.hero-stage {\n  position: relative;\n  z-index: 2;\n  margin-top: 6px;\n  min-height: 516px;\n  display: grid;\n  place-items: center;\n}\n.deck {\n  position: absolute;\n  width: 432px;\n  max-width: 39%;\n  will-change: transform;\n}\n.deck > img,\nimg.deck {\n  display: block;\n  width: 100%;\n  height: auto;\n}\n.deck-left {\n  left: 35px;\n  top: 15px;\n  transform: perspective(900px) rotateY(7deg) rotateZ(-1.8deg);\n  animation: float-left 7.5s ease-in-out infinite alternate;\n}\n.deck-left .deck-edge {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  pointer-events: none;\n  opacity: .98;\n  filter:\n    brightness(1.12) saturate(1.12)\n    drop-shadow(0 0 .55px rgba(255,255,248,1))\n    drop-shadow(0 0 1.35px rgba(255,231,96,.98))\n    drop-shadow(0 0 2.7px rgba(255,144,18,.56));\n  animation: deck-edge-alive-left 4.8s ease-in-out infinite alternate;\n}\n.deck-left .deck-charge {\n  position: absolute;\n  inset: 0;\n  z-index: 3;\n  pointer-events: none;\n  opacity: .84;\n  mix-blend-mode: screen;\n  filter:\n    brightness(1.86)\n    contrast(1.1)\n    saturate(1.66)\n    drop-shadow(0 0 .72px rgba(255,255,255,1))\n    drop-shadow(0 0 2.15px rgba(255,247,124,1))\n    drop-shadow(0 0 6.4px rgba(255,124,4,.76));\n  animation: deck-charge-alive-left 3.8s ease-in-out infinite alternate;\n}\n.deck-left .deck-bloom {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  pointer-events: none;\n  opacity: .72;\n  mix-blend-mode: screen;\n  filter:\n    blur(1.6px)\n    brightness(1.16)\n    saturate(1.24)\n    drop-shadow(0 0 3px rgba(255,202,54,.5))\n    drop-shadow(0 0 7px rgba(255,129,15,.2));\n  animation: deck-bloom-alive-left 5.6s ease-in-out infinite alternate;\n}\n.deck-left .deck-main {\n  position: relative;\n  z-index: 2;\n  filter:\n    drop-shadow(0 17px 22px rgba(65,35,92,.1))\n    drop-shadow(0 0 .35px rgba(255,255,246,.85));\n}\n.deck-right {\n  right: 30px;\n  top: 12px;\n  transform: perspective(900px) rotateY(-7deg) rotateZ(1.8deg);\n  animation: float-right 8s ease-in-out infinite alternate;\n}\n.deck-right .deck-edge {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  pointer-events: none;\n  opacity: .98;\n  filter:\n    brightness(1.14) saturate(1.12)\n    drop-shadow(0 0 .55px rgba(255,255,255,1))\n    drop-shadow(0 0 1.4px rgba(255,221,255,.98))\n    drop-shadow(0 0 2.85px rgba(214,80,255,.6));\n  animation: deck-edge-alive-right 5.1s ease-in-out infinite alternate;\n}\n.deck-right .deck-charge {\n  position: absolute;\n  inset: 0;\n  z-index: 3;\n  pointer-events: none;\n  opacity: .82;\n  mix-blend-mode: screen;\n  filter:\n    brightness(1.88)\n    contrast(1.1)\n    saturate(1.64)\n    drop-shadow(0 0 .72px rgba(255,255,255,1))\n    drop-shadow(0 0 2.2px rgba(255,230,255,1))\n    drop-shadow(0 0 6.5px rgba(218,62,255,.78));\n  animation: deck-charge-alive-right 4.1s ease-in-out infinite alternate;\n}\n.deck-right .deck-bloom {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  pointer-events: none;\n  opacity: .7;\n  mix-blend-mode: screen;\n  filter:\n    blur(1.7px)\n    brightness(1.18)\n    saturate(1.25)\n    drop-shadow(0 0 3.2px rgba(245,157,255,.52))\n    drop-shadow(0 0 7px rgba(170,73,255,.22));\n  animation: deck-bloom-alive-right 5.9s ease-in-out infinite alternate;\n}\n.deck-right .deck-main {\n  position: relative;\n  z-index: 2;\n  filter:\n    drop-shadow(0 17px 22px rgba(65,35,92,.1))\n    drop-shadow(0 0 .35px rgba(255,255,255,.9));\n}\n@keyframes float-left {\n  from { transform: perspective(900px) rotateY(8deg) rotateZ(-2deg) translate3d(0,0,0); }\n  to { transform: perspective(900px) rotateY(5deg) rotateZ(-1deg) translate3d(-10px,-16px,0); }\n}\n@keyframes float-right {\n  from { transform: perspective(900px) rotateY(-8deg) rotateZ(2deg) translate3d(0,0,0); }\n  to { transform: perspective(900px) rotateY(-5deg) rotateZ(1deg) translate3d(12px,-14px,0); }\n}\n@keyframes deck-edge-alive-left {\n  from {\n    opacity: .9;\n    filter:\n      brightness(1.05) saturate(1.05)\n      drop-shadow(0 0 .45px rgba(255,255,248,.94))\n      drop-shadow(0 0 1.05px rgba(255,231,96,.88))\n      drop-shadow(0 0 2.1px rgba(255,144,18,.42));\n  }\n  to {\n    opacity: 1;\n    filter:\n      brightness(1.24) saturate(1.24)\n      drop-shadow(0 0 .65px rgba(255,255,248,1))\n      drop-shadow(0 0 1.65px rgba(255,236,112,1))\n      drop-shadow(0 0 3.3px rgba(255,137,14,.68));\n  }\n}\n@keyframes deck-bloom-alive-left {\n  from { opacity: .52; transform: scale(.998); }\n  to { opacity: .86; transform: scale(1.004); }\n}\n@keyframes deck-charge-alive-left {\n  from {\n    opacity: .58;\n    filter:\n      brightness(1.54)\n      contrast(1.04)\n      saturate(1.38)\n      drop-shadow(0 0 .55px rgba(255,255,255,.94))\n      drop-shadow(0 0 1.55px rgba(255,238,96,.82))\n      drop-shadow(0 0 4.3px rgba(255,120,8,.5));\n  }\n  to {\n    opacity: 1;\n    filter:\n      brightness(2.16)\n      contrast(1.12)\n      saturate(1.86)\n      drop-shadow(0 0 .9px rgba(255,255,255,1))\n      drop-shadow(0 0 2.7px rgba(255,250,138,1))\n      drop-shadow(0 0 8px rgba(255,117,0,.86));\n  }\n}\n@keyframes deck-edge-alive-right {\n  from {\n    opacity: .9;\n    filter:\n      brightness(1.06) saturate(1.06)\n      drop-shadow(0 0 .45px rgba(255,255,255,.94))\n      drop-shadow(0 0 1.05px rgba(255,221,255,.86))\n      drop-shadow(0 0 2.1px rgba(214,80,255,.44));\n  }\n  to {\n    opacity: 1;\n    filter:\n      brightness(1.25) saturate(1.24)\n      drop-shadow(0 0 .65px rgba(255,255,255,1))\n      drop-shadow(0 0 1.75px rgba(255,231,255,1))\n      drop-shadow(0 0 3.4px rgba(214,80,255,.7));\n  }\n}\n@keyframes deck-bloom-alive-right {\n  from { opacity: .5; transform: scale(.998); }\n  to { opacity: .84; transform: scale(1.004); }\n}\n@keyframes deck-charge-alive-right {\n  from {\n    opacity: .56;\n    filter:\n      brightness(1.56)\n      contrast(1.04)\n      saturate(1.36)\n      drop-shadow(0 0 .55px rgba(255,255,255,.94))\n      drop-shadow(0 0 1.55px rgba(255,223,255,.82))\n      drop-shadow(0 0 4.4px rgba(210,69,255,.52));\n  }\n  to {\n    opacity: 1;\n    filter:\n      brightness(2.18)\n      contrast(1.12)\n      saturate(1.84)\n      drop-shadow(0 0 .9px rgba(255,255,255,1))\n      drop-shadow(0 0 2.75px rgba(255,234,255,1))\n      drop-shadow(0 0 8.1px rgba(219,62,255,.88));\n  }\n}\n.phone {\n  position: relative;\n  width: 251px;\n  height: 480px;\n  min-width: 0;\n  aspect-ratio: auto;\n  border: 0;\n  border-radius: 36px;\n  background: transparent;\n  box-shadow: none;\n  overflow: hidden;\n  filter: drop-shadow(0 25px 36px rgba(14,12,22,.22));\n}\n.phone::before {\n  content: none;\n}\n.phone::after {\n  content: \"\";\n  position: absolute;\n  z-index: 3;\n  top: 8px;\n  right: 0;\n  width: 5px;\n  height: 82px;\n  border-top-right-radius: 30px;\n  background: linear-gradient(90deg, rgba(14,13,18,.1), #101016 42%, #050507 100%);\n  pointer-events: none;\n}\n.phone video {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: fill;\n  position: static;\n  opacity: 1;\n  pointer-events: none;\n}\n.phone-video-fallback {\n  position: absolute;\n  inset: 0;\n  display: none;\n  place-items: center;\n  background: linear-gradient(180deg, rgba(247,255,250,.94), rgba(232,242,255,.92));\n  color: #8d3fe8;\n  font-family: \"Playfair Display\", Georgia, serif;\n  font-size: 32px;\n  font-weight: 800;\n}\n.hero-note {\n  position: relative;\n  z-index: 3;\n  margin: 20px auto 0;\n  color: rgba(104,99,118,.78);\n  font-size: 9.5px;\n  line-height: 1.2;\n  font-weight: 500;\n}<\/p>\n<p>.store-split {\n  width: min(350px, 90vw);\n  height: 62px;\n  margin: 18px auto 0;\n  display: grid;\n  grid-template-columns: 1fr 1px 1fr;\n  align-items: center;\n  position: relative;\n  border-radius: 24px;\n  color: #fff;\n  background:\n    radial-gradient(circle at 18% 0%, rgba(255,255,255,.18), transparent 28%),\n    linear-gradient(180deg, rgba(142,54,232,.98) 0%, rgba(88,25,151,.98) 100%);\n  border: 2px solid rgba(255,255,255,.94);\n  box-shadow:\n    0 11px 24px rgba(107,37,203,.3),\n    0 0 0 1px rgba(126,50,222,.22),\n    0 0 18px rgba(255,255,255,.58),\n    0 0 24px rgba(168,68,255,.44),\n    inset 0 1px 0 rgba(255,255,255,.36),\n    inset 0 -10px 22px rgba(48,9,98,.22);\n  overflow: hidden;\n}\n.store-split::before {\n  content: \"\";\n  position: absolute;\n  inset: 2px;\n  border-radius: 22px;\n  pointer-events: none;\n  background:\n    linear-gradient(180deg, rgba(255,255,255,.2), transparent 34%),\n    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.2), transparent 56%);\n  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13);\n}\n.store-split a,\n.store-outline {\n  min-width: 0;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 9px;\n  color: #fff;\n  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;\n}\n.store-split a {\n  position: relative;\n  z-index: 1;\n}\n.store-split a:hover { background: rgba(255,255,255,.08); }\n.store-split i {\n  position: relative;\n  z-index: 1;\n  height: 42px;\n  background: rgba(255,255,255,.34);\n  box-shadow: 0 0 10px rgba(255,255,255,.16);\n}\n.store-split svg,\n.store-outline svg {\n  width: 30px;\n  height: 30px;\n  fill: currentColor;\n  stroke: currentColor;\n  stroke-width: 1.4;\n}\n.store-split .apple-store-icon,\n.store-outline .apple-store-icon {\n  width: 24px;\n  height: 27px;\n  fill: currentColor;\n  stroke: none;\n  transform: translateY(-1px);\n}\n.store-split .google-play-icon,\n.store-outline .google-play-icon {\n  width: 30px;\n  height: 29px;\n  fill: currentColor;\n  stroke: none;\n  stroke-linejoin: round;\n  stroke-linecap: round;\n}\n.store-split .google-play-icon .gp-shape,\n.store-outline .google-play-icon .gp-shape {\n  fill: currentColor;\n  stroke: currentColor;\n  stroke-width: 1.4;\n  stroke-linejoin: round;\n}\n.store-split .google-play-icon .gp-cut,\n.store-outline .google-play-icon .gp-cut {\n  fill: none;\n  stroke: rgba(82,20,150,.74);\n  stroke-width: 1.35;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n.store-split .google-play-icon .gp-main,\n.store-outline .google-play-icon .gp-main {\n  fill: currentColor;\n  opacity: .98;\n}\n.store-split .google-play-icon .gp-top,\n.store-outline .google-play-icon .gp-top,\n.store-split .google-play-icon .gp-bottom,\n.store-outline .google-play-icon .gp-bottom {\n  fill: currentColor;\n  opacity: .78;\n}\n.store-split .google-play-icon .gp-tip,\n.store-outline .google-play-icon .gp-tip {\n  fill: currentColor;\n  opacity: .9;\n}\n.store-split span,\n.store-outline span {\n  display: grid;\n  gap: 1px;\n  text-align: left;\n}\n.store-split small,\n.store-outline small {\n  font-size: 7.8px;\n  line-height: 1;\n  font-weight: 500;\n  letter-spacing: .01em;\n  opacity: .9;\n}\n.store-split strong,\n.store-outline strong {\n  font-size: 17.8px;\n  line-height: 1;\n  font-weight: 500;\n  letter-spacing: 0;\n}<\/p>\n<p>.works-scene {\n  padding: 0 !important;\n  align-items: stretch;\n  place-items: stretch center;\n  min-height: calc(100vh - 28px);\n  background: transparent;\n}\n.works-scene .scene-inner {\n  z-index: 2;\n  width: 100%;\n  max-width: none;\n  min-height: calc(100vh - 28px);\n  display: grid;\n  grid-template-rows: clamp(492px, 53vh, 520px) minmax(350px, 1fr);\n}\n.works-top {\n  text-align: center;\n  display: block;\n  padding: clamp(68px, 7.4vh, 82px) 0 0;\n}\n.works-top .eyebrow {\n  margin-bottom: 18px;\n  font-size: 11.5px;\n  letter-spacing: .22em;\n}\n.works-top .headline {\n  font-size: clamp(43px, 2.68vw, 50px);\n  line-height: .95;\n}\n.works-top .body-copy {\n  margin-top: 17px;\n  font-size: 14.4px;\n  line-height: 1.45;\n}\n.steps {\n  margin: clamp(44px, 5.25vh, 50px) auto 0;\n  position: relative;\n  left: -22px;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  width: min(1090px, calc(100% - 88px));\n}\n.step {\n  position: relative;\n  padding: 0 clamp(30px, 3.5vw, 54px) !important;\n  display: grid;\n  justify-items: center;\n  text-align: center;\n}\n.step + .step { border-left: 0; }\n.step + .step::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 19px;\n  bottom: 20px;\n  width: 1px;\n  background: linear-gradient(to bottom, transparent, rgba(41,34,64,.12) 13%, rgba(41,34,64,.12) 87%, transparent);\n}\n.step-number {\n  position: absolute;\n  top: 23px;\n  left: calc(50% - 118px);\n  width: 30px;\n  height: 30px;\n  display: grid;\n  place-items: center;\n  border-radius: 50%;\n  color: #7e32de;\n  background: rgba(126,50,222,.1);\n  font-weight: 800;\n  font-size: 11.8px;\n}\n.icon-tile {\n  width: 76px;\n  height: 76px;\n  display: grid;\n  place-items: center;\n  border-radius: 26px;\n  background: rgba(255,255,255,.74);\n  border: 1px solid rgba(255,255,255,.8);\n  box-shadow: 0 16px 32px rgba(41,34,64,.095), inset 0 1px 0 rgba(255,255,255,.9);\n}\n.icon-tile svg {\n  width: 35px;\n  height: 35px;\n  fill: none;\n  stroke: #8839e5;\n  stroke-width: 1.9;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n.icon-tile.heart svg { stroke: url(#preludeHeartGradient); }\n.step h3,\n.why-card h3,\n.safe-card h3 {\n  margin: 27px 0 0;\n  font-family: \"Playfair Display\", Georgia, serif;\n  font-size: 21.5px;\n  line-height: 1.05;\n  letter-spacing: 0;\n}\n.step p,\n.why-card p,\n.safe-card p {\n  margin: 14px 0 0;\n  color: var(--muted);\n  font-size: 13.4px;\n  line-height: 1.62;\n}\n.step p {\n  max-width: 286px;\n}\n.tiny-rule {\n  width: 31px;\n  height: 2px;\n  border-radius: 99px;\n  margin-top: 23px;\n  background: #8d3fe8;\n}\n.why-panel {\n  position: relative;\n  margin: 0 20px;\n  padding: 44px 48px 42px;\n  border-radius: 28px 28px 0 0;\n  background:\n    radial-gradient(circle at 12% 10%, rgba(255,255,255,.94), transparent 35%),\n    linear-gradient(135deg, rgba(227,248,229,.86), rgba(236,255,248,.78) 58%, rgba(232,244,255,.58));\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);\n}\n.why-heading {\n  width: min(760px, 100%);\n  margin: 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 18px;\n}\n.why-heading img {\n  width: 54px;\n  height: 54px;\n  object-fit: contain;\n  filter: drop-shadow(0 10px 18px rgba(66,180,190,.22));\n}\n.why-heading .eyebrow {\n  margin-bottom: 10px;\n  font-size: 11px;\n  letter-spacing: .18em;\n}\n.why-heading .headline {\n  font-size: clamp(40px, 2.45vw, 46px);\n  line-height: .96;\n}\n.why-cards {\n  width: min(1076px, calc(100% - 160px));\n  margin: 24px auto 0;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 22px;\n  isolation: isolate;\n  position: relative;\n  left: -14px;\n}\n.why-card,\n.safe-card,\n.click-card,\n.score-bars,\n.download-panel {\n  background: rgba(255,255,255,.78);\n  border: 1px solid rgba(255,255,255,.72);\n  box-shadow: 0 24px 46px rgba(52,45,76,.1), inset 0 1px 0 rgba(255,255,255,.82);\n  backdrop-filter: blur(18px);\n}\n.why-card {\n  position: relative;\n  min-height: 214px;\n  padding: 22px 38px 24px !important;\n  border-radius: 24px;\n  overflow: visible;\n  box-shadow:\n    0 24px 46px rgba(52,45,76,.085),\n    inset 0 1px 0 rgba(255,255,255,.9);\n}\n.why-card::before,\n.why-card::after {\n  content: \"\";\n  position: absolute;\n  pointer-events: none;\n}\n.why-card::before {\n  left: 42px;\n  right: 42px;\n  bottom: 0;\n  height: 2px;\n  border-radius: 999px;\n  opacity: .72;\n}\n.why-card::after {\n  z-index: 0;\n  left: 58px;\n  right: 58px;\n  bottom: -9px;\n  height: 20px;\n  border-radius: 999px;\n  filter: blur(11px);\n  opacity: .84;\n}\n.why-card > * {\n  position: relative;\n  z-index: 2;\n}\n.why-card:nth-child(1)::before {\n  background: linear-gradient(90deg, rgba(121,111,255,0), rgba(133,128,255,.64), rgba(99,224,205,.42), rgba(121,111,255,0));\n}\n.why-card:nth-child(1)::after {\n  background: linear-gradient(90deg, rgba(132,118,255,.28), rgba(98,225,207,.3), rgba(189,125,255,.2));\n}\n.why-card:nth-child(2)::before {\n  background: linear-gradient(90deg, rgba(103,226,214,0), rgba(92,226,213,.58), rgba(139,111,255,.5), rgba(103,226,214,0));\n}\n.why-card:nth-child(2)::after {\n  background: linear-gradient(90deg, rgba(80,226,210,.28), rgba(125,116,255,.32), rgba(211,112,255,.2));\n}\n.why-card:nth-child(3)::before {\n  background: linear-gradient(90deg, rgba(223,111,255,0), rgba(232,101,224,.62), rgba(255,128,201,.44), rgba(223,111,255,0));\n}\n.why-card:nth-child(3)::after {\n  background: linear-gradient(90deg, rgba(203,101,255,.2), rgba(237,94,214,.36), rgba(255,135,200,.24));\n}\n.mini-icon {\n  width: 54px;\n  height: 54px;\n  display: grid;\n  place-items: center;\n  border-radius: 18px;\n  color: #8439e3;\n  background: rgba(126,50,222,.09);\n}\n.why-card h3 {\n  margin-top: 16px;\n  font-size: 22.5px;\n  line-height: 1.08;\n}\n.why-card p {\n  margin-top: 10px;\n  font-size: 14.2px;\n  line-height: 1.62;\n}\n.mini-icon svg {\n  width: 30px;\n  height: 30px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 1.9;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n.why-card:nth-child(2) .mini-icon svg {\n  width: 34px;\n  height: 34px;\n  stroke-width: 1.8;\n}\n.green-rule {\n  display: block;\n  width: 50px;\n  height: 2px;\n  border-radius: 99px;\n  margin-top: 7px;\n  background: #64dcc7;\n}<\/p>\n<p>.score-layout {\n  width: min(1158px, 100%);\n  margin-left: clamp(18px, 2.6vw, 36px);\n  display: grid;\n  grid-template-columns: minmax(390px, 430px) 292px 286px;\n  gap: 54px;\n  align-items: start;\n}\n.score-scene .scene-inner { padding-top: 34px; }\n.score-copy {\n  padding-top: 20px;\n}\n.score-copy .headline {\n  font-size: clamp(54px, 3.5vw, 58px);\n  line-height: .96;\n  white-space: nowrap;\n}\n.score-copy .body-copy {\n  max-width: 430px;\n  font-size: 17px;\n  line-height: 1.58;\n}\n.score-label {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.score-label::after {\n  content: \"\";\n  width: 54px;\n  height: 1px;\n  background: rgba(126,50,222,.22);\n}\n.score-label svg {\n  width: 14px;\n  height: 14px;\n  fill: #b8efe5;\n  stroke: #b8efe5;\n}\n.score-circle-wrap {\n  display: grid;\n  justify-items: center;\n  gap: 20px;\n  margin-top: 30px;\n}\n.score-circle {\n  --score: 92;\n  width: min(18vw, 270px);\n  min-width: 264px;\n  aspect-ratio: 1;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  position: relative;\n  background: rgba(255,255,255,.86);\n  box-shadow: 0 22px 42px rgba(126,50,222,.14), inset 0 0 38px rgba(255,255,255,.82);\n}\n.score-ring {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  transform: rotate(-75deg);\n  filter: drop-shadow(0 6px 12px rgba(126,50,222,.11));\n  shape-rendering: geometricPrecision;\n}\n.score-ring-track,\n.score-ring-progress {\n  fill: none;\n  stroke-width: 6.1;\n}\n.score-ring-track {\n  stroke: transparent;\n}\n.score-ring-progress {\n  stroke: url(#scoreRingGradient);\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  stroke-dasharray: 246.8 270.2;\n}\n.score-circle-inner {\n  position: relative;\n  z-index: 1;\n  width: 78%;\n  height: 78%;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  background: rgba(255,255,255,.94);\n}\n.score-center {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  transform: translateY(2px);\n}\n.score-number {\n  font-family: \"Playfair Display\", Georgia, serif;\n  font-size: 102px;\n  line-height: .98;\n  color: #171429;\n}\n.score-word {\n  margin-top: 10px;\n  color: #8439e3;\n  font-size: 22px;\n  line-height: 1;\n  font-weight: 800;\n}\n.score-caption {\n  max-width: 330px;\n  margin: 0;\n  text-align: center;\n  color: var(--muted);\n  font-size: 15.8px;\n  line-height: 1.55;\n}\n.score-caption strong { color: #8439e3; }\n.click-card {\n  width: 286px;\n  justify-self: start;\n  margin-top: 30px;\n  padding: 26px 28px 22px;\n  border-radius: 18px;\n}\n.click-title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  color: #8439e3;\n  font-weight: 800;\n}\n.click-title svg {\n  width: 18px;\n  height: 18px;\n  fill: #b8efe5;\n  stroke: #b8efe5;\n}\n.click-item {\n  display: grid;\n  grid-template-columns: 40px 1fr;\n  gap: 14px;\n  align-items: center;\n  padding: 18px 0;\n  border-bottom: 1px solid rgba(55,44,80,.08);\n}\n.click-item:last-of-type { border-bottom: 0; }\n.click-item .mini-icon {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n}\n.click-item .mini-icon svg {\n  width: 22px;\n  height: 22px;\n}\n.click-item h4 {\n  margin: 0 0 5px;\n  font-size: 12.8px;\n  color: #2b2936;\n}\n.click-item p {\n  margin: 0;\n  color: #706d7c;\n  font-size: 12px;\n  line-height: 1.38;\n}\n.built-note {\n  margin-top: 6px;\n  color: #1eb7aa;\n  font-size: 12px;\n  line-height: 1.2;\n  font-weight: 700;\n  white-space: nowrap;\n}\n.score-bars {\n  width: min(940px, 72vw);\n  margin: 36px auto 0;\n  padding: 20px 30px;\n  border-radius: 20px;\n  position: relative;\n  left: -24px;\n}\n.metric {\n  display: grid;\n  grid-template-columns: 220px 1fr 58px;\n  align-items: center;\n  gap: 22px;\n  min-height: 49px;\n}\n.metric-label {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  font-weight: 700;\n  font-size: 14px;\n}\n.metric-label .mini-icon {\n  width: 34px;\n  height: 34px;\n  min-width: 34px;\n  border-radius: 50%;\n}\n.metric-label .mini-icon svg {\n  width: 20px;\n  height: 20px;\n}\n.metric-track {\n  height: 8px;\n  border-radius: 99px;\n  background: rgba(126,50,222,.08);\n  overflow: hidden;\n}\n.metric-fill {\n  width: 0;\n  height: 100%;\n  border-radius: inherit;\n  background: linear-gradient(90deg, #7832dc, #c997f4);\n  transition: width 900ms cubic-bezier(.2,.72,.18,1);\n}\n.scene-active .metric-fill { width: var(--percent); }\n.metric-percent {\n  color: #8439e3;\n  font-weight: 800;\n  font-size: 19px;\n  text-align: right;\n}<\/p>\n<p>.safety-scene { align-items: stretch; padding: 56px 54px 24px; }\n.safety-scene .scene-inner {\n  width: 100%;\n  min-height: calc(100vh - 134px);\n  display: grid;\n  grid-template-rows: auto auto;\n  align-content: start;\n  gap: 16px;\n}\n.safety-top {\n  position: relative;\n  z-index: 4;\n  top: -20px;\n  width: min(760px, 100%);\n  margin-left: clamp(150px, 11.35vw, 190px);\n  padding-left: 0;\n}\n.safety-top .eyebrow {\n  margin-bottom: 14px;\n  font-size: 11.2px;\n  letter-spacing: .22em;\n}\n.safety-top .headline {\n  max-width: 700px;\n  font-size: clamp(40px, 2.58vw, 48px);\n  line-height: 1.06;\n  white-space: nowrap;\n}\n.safety-top .body-copy {\n  max-width: 410px;\n  margin-top: 14px;\n  font-size: 14.8px;\n  line-height: 1.47;\n}\n.safe-cards {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 22px;\n  width: min(674px, 100%);\n  margin-top: 18px;\n}\n.safe-card {\n  box-sizing: border-box;\n  height: 178px;\n  min-height: 0;\n  padding: 18px 18px 17px !important;\n  border-radius: 18px;\n  background: rgba(255,255,255,.96);\n  border-color: rgba(255,255,255,.9);\n  box-shadow:\n    0 13px 24px rgba(45,42,74,.105),\n    0 2px 7px rgba(36,33,58,.055),\n    inset 0 1px 0 rgba(255,255,255,.96);\n}\n.safe-card .mini-icon {\n  width: 50px;\n  height: 50px;\n  border-radius: 17px;\n  background: rgba(43,203,188,.13);\n  color: #16b8ae;\n}\n.safe-card .mini-icon svg {\n  width: 25px;\n  height: 25px;\n}\n.safe-card h3 {\n  margin-top: 12px;\n  font-family: Inter, system-ui, sans-serif;\n  font-size: 13px;\n  line-height: 1.18;\n  font-weight: 800;\n  white-space: nowrap;\n}\n.safe-card .green-rule {\n  display: block;\n  width: 100%;\n  height: 1.6px;\n  margin-top: 13px;\n  background: rgba(38,195,188,.68);\n}\n.safe-card p {\n  max-width: 100%;\n  margin-top: 10px;\n  font-size: 12.2px;\n  line-height: 1.44;\n}\n.download-panel {\n  position: relative;\n  z-index: 1;\n  min-height: 372px;\n  margin: 0;\n  width: 100%;\n  border-radius: 14px;\n  overflow: visible;\n  clip-path: inset(-42px 0 0 0 round 14px);\n  display: grid;\n  grid-template-columns: 50% 50%;\n  align-items: center;\n  background:\n    radial-gradient(circle at 78% 48%, rgba(255,144,120,.55), transparent 36%),\n    radial-gradient(circle at 88% 20%, rgba(170,232,255,.36), transparent 40%),\n    linear-gradient(125deg, #732bd8 0%, #963bdc 46%, #b15ae0 100%);\n  color: #fff;\n  box-shadow: 0 20px 44px rgba(72,35,135,.12);\n  isolation: isolate;\n}\n.download-panel::before {\n  content: \"\";\n  position: absolute;\n  z-index: 0;\n  inset: 0;\n  background:\n    repeating-linear-gradient(96deg, transparent 0 1px, rgba(255,255,255,.15) 1px 2px, transparent 2px 5px),\n    radial-gradient(ellipse at 82% 45%, rgba(255,126,146,.46), transparent 34%),\n    linear-gradient(110deg, transparent 0 42%, rgba(126,50,222,.22) 44%, rgba(240,85,205,.42) 57%, rgba(255,142,28,.42) 70%, rgba(178,239,236,.34) 92%);\n  border-radius: inherit;\n  opacity: .86;\n  pointer-events: none;\n}\n.download-phones {\n  position: relative;\n  z-index: 2;\n  height: 100%;\n  min-height: 372px;\n  overflow: visible;\n  clip-path: inset(-42px -28px 0 -28px);\n}\n.phone-pair-graphic {\n  position: absolute;\n  left: clamp(268px, 17vw, 296px);\n  top: -28px;\n  width: clamp(440px, 27.6vw, 468px);\n  height: auto;\n  display: block;\n  filter:\n    drop-shadow(0 30px 42px rgba(22,9,54,.28))\n    drop-shadow(0 0 3px rgba(255,255,255,.78))\n    drop-shadow(0 0 9px rgba(223,108,255,.58))\n    drop-shadow(0 0 18px rgba(92,232,220,.24));\n  transform: translateZ(0);\n}\n.download-copy {\n  position: relative;\n  z-index: 3;\n  padding: 48px clamp(42px, 7vw, 112px) 40px clamp(32px, 3.5vw, 56px);\n}\n.download-copy .headline {\n  color: #fff;\n  font-size: clamp(32px, 2.25vw, 38px);\n  line-height: 1;\n}\n.download-copy .body-copy {\n  color: rgba(255,255,255,.9);\n  margin-top: 12px;\n  font-size: 15.5px;\n  line-height: 1.45;\n}\n.qr-placeholder {\n  width: 100px;\n  height: 100px;\n  margin-top: 18px;\n  border-radius: 14px;\n  border: 1px solid rgba(255,255,255,.52);\n  display: grid;\n  place-items: center;\n  padding: 13px;\n  background: rgba(255,255,255,.1);\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.32);\n}\n.qr-placeholder svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n  fill: rgba(255,255,255,.92);\n}\n.store-pair {\n  margin-top: 22px;\n  display: flex;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n.store-outline {\n  width: 166px;\n  height: 60px;\n  border-radius: 11px;\n  border: 1px solid rgba(255,255,255,.52);\n  background: rgba(255,255,255,.08);\n}\n.store-outline:hover { transform: translateY(-2px); background: rgba(255,255,255,.14); }\n.store-outline strong { font-size: 16px; }<\/p>\n<p>.fade-up {\n  opacity: 0;\n  transform: translate3d(0, 28px, 0);\n  transition: opacity 760ms ease, transform 760ms cubic-bezier(.2,.7,.2,1);\n}\n.scene-active .fade-up { opacity: 1; transform: none; }\n.scene-active .delay-1 { transition-delay: 90ms; }\n.scene-active .delay-2 { transition-delay: 180ms; }\n.scene-active .delay-3 { transition-delay: 270ms; }<\/p>\n<p>@media (max-width: 1180px) {\n  .prelude-scene { padding-inline: 26px; }\n  .deck { width: 36vw; max-width: 38%; }\n  .score-layout { grid-template-columns: 1fr; text-align: center; gap: 28px; }\n  .score-copy .body-copy { margin-inline: auto; }\n  .click-card { justify-self: center; }\n  .score-bars { width: min(960px, 92vw); }\n  .safety-top { margin-left: 0; padding-left: 0; }\n  .safe-cards { width: 100%; }\n}\n@media (max-width: 900px) {\n  html,\n  body {\n    scroll-snap-type: none;\n    scroll-padding-block: 0;\n  }\n  .prelude-scroll { scroll-snap-type: none; }\n  .prelude-scene { min-height: auto; padding-top: 76px; padding-bottom: 76px; }\n  .works-scene { padding: 76px 26px !important; }\n  .hero-stage { min-height: 620px; }\n  .phone { width: 238px; }\n  .deck { width: 330px; max-width: 62%; opacity: .96; }\n  .deck-left { left: -58px; top: 52%; }\n  .deck-right { right: -68px; top: 50%; }\n  .works-scene .scene-inner { min-height: auto; display: block; }\n  .steps, .why-cards, .safe-cards { grid-template-columns: 1fr; }\n  .step { padding: 34px 22px; }\n  .step + .step { border-left: 0; border-top: 1px solid rgba(41,34,64,.12); }\n  .step-number { position: static; margin-bottom: 12px; }\n  .why-panel { margin-inline: -26px; padding-inline: 26px; border-radius: 22px 22px 0 0; }\n  .why-heading { align-items: flex-start; justify-content: flex-start; }\n  .metric { grid-template-columns: 1fr 58px; gap: 12px; }\n  .metric-track { grid-column: 1 \/ -1; grid-row: 2; }\n  .download-panel { grid-template-columns: 1fr; }\n  .download-phones { min-height: 300px; order: 2; }\n  .download-copy { order: 1; padding: 38px 28px 10px; }\n  .phone-pair-graphic { left: 50%; top: -8px; width: min(520px, 86vw); transform: translateX(-50%); }\n}\n@media (max-width: 767px) {\n  .prelude-nav { display: none; }\n}\n@media (max-width: 640px) {\n  .prelude-bg { inset: 42px 0 56px; }\n  .prelude-stage-root {\n    --prelude-ribbon-opacity: .54;\n    --prelude-ribbon-softness: saturate(112%) brightness(1.02);\n  }\n  .prelude-scroll { padding-top: 42px !important; padding-bottom: 56px !important; }\n  .prelude-bottombar {\n    min-height: 56px;\n    grid-template-columns: auto 1fr;\n    padding: 6px 14px;\n  }\n  .prelude-bottombar .prelude-foot-brand { font-size: 17px; gap: 6px; }\n  .prelude-bottombar .prelude-foot-brand img { width: 16px; height: 16px; }\n  .prelude-foot-links { gap: 10px; font-size: 11px; justify-content: end; flex-wrap: wrap; }\n  .prelude-copy { display: none; }\n  .prelude-wave {\n    --prelude-wave-blur: 12px;\n    width: 226vw;\n    height: calc(100vh + 300px);\n    right: -176vw;\n    top: -12vh;\n    opacity: .62;\n  }\n  .hero-copy .headline { font-size: clamp(38px, 11vw, 48px); }\n  .store-split { height: 62px; border-radius: 22px; }\n  .store-split svg { width: 24px; height: 24px; }\n  .store-split strong { font-size: 14px; }\n  .store-split small { font-size: 7px; }\n  .hero-stage { margin-top: 24px; min-height: 580px; }\n  .phone { min-width: 214px; border-radius: 32px; }\n  .deck { width: 280px; max-width: 76%; }\n  .deck-left { left: -108px; top: 56%; }\n  .deck-right { right: -118px; top: 58%; }\n  .headline { line-height: 1.02; }\n  .works-top .headline, .why-heading .headline, .safety-top .headline { font-size: 46px; }\n  .why-heading img { width: 48px; height: 48px; }\n  .score-circle { min-width: 224px; }\n  .score-bars { padding: 22px 18px; }\n  .safe-card { min-height: auto; }\n  .download-panel { min-height: 650px; }\n  .store-pair { gap: 12px; }\n  .store-outline { width: 155px; height: 58px; }\n  .store-outline svg { width: 24px; height: 24px; }\n  .store-outline strong { font-size: 14px; }\n}\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }\n  .scene-inner { transform: none !important; opacity: 1 !important; filter: none !important; }\n}\n<\/style>\n<div id=\"prelude-stage-root\" class=\"prelude-stage-root\">\n  <svg width=\"0\" height=\"0\" aria-hidden=\"true\" focusable=\"false\">\n    <defs>\n      <linearGradient id=\"preludeHeartGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n        <stop offset=\"0%\" stop-color=\"#8f3fec\"\/>\n        <stop offset=\"55%\" stop-color=\"#ea52bf\"\/>\n        <stop offset=\"100%\" stop-color=\"#ff9b18\"\/>\n      <\/linearGradient>\n    <\/defs>\n  <\/svg><\/p>\n<div class=\"prelude-bg\" aria-hidden=\"true\">\n    <canvas id=\"prelude-ribbon-canvas\" class=\"prelude-ribbon-canvas\"><\/canvas>\n  <\/div>\n<header class=\"prelude-topbar\" aria-label=\"Prelude navigation\">\n<div class=\"prelude-topbar-inner\">\n      <a class=\"prelude-brand\" href=\"#home\">Prelude<\/a><\/p>\n<nav class=\"prelude-nav\" aria-label=\"Primary\">\n        <a href=\"#how-it-works\">How It Works<\/a><br \/>\n        <a href=\"#why-prelude\">Why Prelude<\/a><br \/>\n        <a href=\"#safety\">Safety<\/a><br \/>\n      <\/nav>\n<\/p><\/div>\n<\/header>\n<p>  <main class=\"prelude-scroll\"><\/p>\n<section class=\"prelude-scene hero-scene\" id=\"home\" data-scene>\n<div class=\"scene-inner\">\n<div class=\"hero-copy fade-up\">\n<p class=\"eyebrow\">AI-Powered Dating<\/p>\n<h1 class=\"headline\">Let Your AI Agent <span>Find<br \/>Your Match<\/span><\/h1>\n<p class=\"body-copy\">Your AI meets theirs first, uncovering the chemistry before a single hello is exchanged.<\/p>\n<div class=\"store-split\" aria-label=\"Download Prelude\">\n      <a href=\"https:\/\/example.com\/prelude-ios\" aria-label=\"Download Prelude on the App Store\"><br \/>\n        <svg class=\"apple-store-icon\" viewBox=\"0 0 28 32\" aria-hidden=\"true\"><path d=\"M22.55 17.12c-.04-4.05 3.31-5.99 3.46-6.08-1.88-2.75-4.81-3.13-5.85-3.17-2.49-.25-4.86 1.47-6.13 1.47-1.26 0-3.21-1.43-5.27-1.39-2.71.04-5.21 1.58-6.61 4.01-2.82 4.89-.72 12.13 2.03 16.1 1.34 1.94 2.94 4.12 5.04 4.04 2.02-.08 2.78-1.31 5.23-1.31 2.44 0 3.13 1.31 5.27 1.27 2.17-.04 3.55-1.98 4.88-3.93 1.54-2.25 2.17-4.43 2.21-4.54-.05-.02-4.22-1.62-4.26-6.47ZM18.53 5.24C19.64 3.89 20.39 2.02 20.19.16c-1.6.06-3.54 1.07-4.69 2.42-1.03 1.19-1.93 3.1-1.68 4.92 1.78.14 3.6-.91 4.71-2.26Z\"\/><\/svg><br \/>\n        <span><small>GET IT ON<\/small><strong>App Store<\/strong><\/span><br \/>\n      <\/a><br \/>\n      <i aria-hidden=\"true\"><\/i><br \/>\n      <a href=\"https:\/\/example.com\/prelude-android\" aria-label=\"Get Prelude on Google Play\"><br \/>\n        <svg class=\"google-play-icon\" viewBox=\"0 0 34 32\" aria-hidden=\"true\"><path class=\"gp-shape\" d=\"M4.6 2.9 29.3 16 4.6 29.1Z\"\/><path class=\"gp-cut\" d=\"M5.9 4.5 17.8 16 5.9 27.5\"\/><path class=\"gp-cut\" d=\"M17.8 16 23.7 10.9\"\/><path class=\"gp-cut\" d=\"M17.8 16 23.7 21.1\"\/><\/svg><br \/>\n        <span><small>GET IT ON<\/small><strong>Google Play<\/strong><\/span><br \/>\n      <\/a>\n    <\/div>\n<p>    <!-- TODO: Replace placeholder App Store and Google Play URLs with final store listing URLs. -->\n        <\/div>\n<div class=\"hero-stage\">\n<div class=\"deck deck-left\">\n            <img class=\"deck-bloom\" src=\"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-homepage-draft-v1-boy-deck-edge-glow-2.png\" alt=\"\" aria-hidden=\"true\" loading=\"eager\" decoding=\"async\"><br \/>\n            <img class=\"deck-edge\" src=\"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-homepage-draft-v1-boy-deck-edge-glow-2.png\" alt=\"\" aria-hidden=\"true\" loading=\"eager\" decoding=\"async\"><br \/>\n            <img class=\"deck-main\" src=\"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-homepage-draft-v1-boy-deck-5.png\" alt=\"Prelude profile cards featuring Sam\" loading=\"eager\" decoding=\"async\"><br \/>\n            <img class=\"deck-charge\" src=\"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-homepage-draft-v1-boy-deck-edge-glow-2.png\" alt=\"\" aria-hidden=\"true\" loading=\"eager\" decoding=\"async\">\n          <\/div>\n<div class=\"phone fade-up delay-2\" aria-label=\"Prelude app demo video\">\n            <video src=\"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-homepage-draft-v1-app-demo-3.mp4\" autoplay muted loop playsinline preload=\"auto\"><\/video>\n          <\/div>\n<div class=\"deck deck-right\">\n            <img class=\"deck-bloom\" src=\"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-homepage-draft-v1-girl-deck-edge-glow-1.png\" alt=\"\" aria-hidden=\"true\" loading=\"eager\" decoding=\"async\"><br \/>\n            <img class=\"deck-edge\" src=\"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-homepage-draft-v1-girl-deck-edge-glow-1.png\" alt=\"\" aria-hidden=\"true\" loading=\"eager\" decoding=\"async\"><br \/>\n            <img class=\"deck-main\" src=\"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-homepage-draft-v1-girl-deck-5.png\" alt=\"Prelude profile cards featuring Leah\" loading=\"eager\" decoding=\"async\"><br \/>\n            <img class=\"deck-charge\" src=\"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-homepage-draft-v1-girl-deck-edge-glow-1.png\" alt=\"\" aria-hidden=\"true\" loading=\"eager\" decoding=\"async\">\n          <\/div>\n<\/p><\/div>\n<p class=\"hero-note fade-up delay-3\">Real people. Real connections. AI-powered introductions.<\/p>\n<\/p><\/div>\n<\/section>\n<section class=\"prelude-scene works-scene\" id=\"how-it-works\" data-scene>\n<div class=\"scene-inner\">\n<div class=\"works-top\">\n<div class=\"fade-up\">\n<p class=\"eyebrow\">How Prelude Works<\/p>\n<h2 class=\"headline\">A Smarter Way to Connect<\/h2>\n<p class=\"body-copy\">Three simple steps to meaningful matches&mdash;powered by AI.<\/p>\n<\/p><\/div>\n<div class=\"steps fade-up delay-1\">\n<article class=\"step\">\n              <span class=\"step-number\">01<\/span><\/p>\n<div class=\"icon-tile\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M20 21a8 8 0 0 0-16 0\"\/><circle cx=\"12\" cy=\"7\" r=\"4\"\/><\/svg><\/div>\n<h3>Create Your Profile<\/h3>\n<p>Tell us about yourself and what you&rsquo;re looking for. Your AI agent learns your personality and preferences.<\/p>\n<p>              <span class=\"tiny-rule\"><\/span><br \/>\n            <\/article>\n<article class=\"step\">\n              <span class=\"step-number\">02<\/span><\/p>\n<div class=\"icon-tile\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><rect x=\"5\" y=\"8\" width=\"14\" height=\"10\" rx=\"3\"\/><path d=\"M12 4v4M8 13h.01M16 13h.01M9 18v2M15 18v2\"\/><path d=\"M8 4h8\"\/><\/svg><\/div>\n<h3>AI Agents Connect<\/h3>\n<p>Your AI agent chats with potential matches&rsquo; agents&mdash;finding shared interests, values, and chemistry.<\/p>\n<p>              <span class=\"tiny-rule\"><\/span><br \/>\n            <\/article>\n<article class=\"step\">\n              <span class=\"step-number\">03<\/span><\/p>\n<div class=\"icon-tile heart\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M20.8 5.6a5.4 5.4 0 0 0-7.6 0L12 6.8l-1.2-1.2a5.4 5.4 0 0 0-7.6 7.6L12 22l8.8-8.8a5.4 5.4 0 0 0 0-7.6Z\"\/><\/svg><\/div>\n<h3>Meet Your Match<\/h3>\n<p>When agents find a genuine connection, you get introduced with everything you need to start a great first date.<\/p>\n<p>              <span class=\"tiny-rule\"><\/span><br \/>\n            <\/article>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"why-panel\" id=\"why-prelude\">\n<div class=\"why-heading fade-up\">\n            <img src=\"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-homepage-draft-v1-logo-accent-5.png\" alt=\"\" loading=\"lazy\" decoding=\"async\"><\/p>\n<div>\n<p class=\"eyebrow\">Why Choose Us<\/p>\n<h2 class=\"headline\">Why Prelude?<\/h2>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"why-cards fade-up delay-1\">\n<article class=\"why-card\">\n<div class=\"mini-icon\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M21 11.5a8.4 8.4 0 0 1-9 8.4 9.3 9.3 0 0 1-4.2-1L3 20l1.3-4A8 8 0 1 1 21 11.5Z\"\/><\/svg><\/div>\n<h3>Skip the Small Talk<\/h3>\n<p>              <span class=\"green-rule\"><\/span><\/p>\n<p>Your AI agent handles the awkward intros so every first message is already meaningful.<\/p>\n<\/article>\n<article class=\"why-card\">\n<div class=\"mini-icon\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 5.2a3.2 3.2 0 0 0-6.34.58 4.15 4.15 0 0 0-2.24 5.95 4.18 4.18 0 0 0 .76 6.16A3.8 3.8 0 0 0 12 17.6V5.2Z\"\/><path d=\"M12 5.2a3.2 3.2 0 0 1 6.34.58 4.15 4.15 0 0 1 2.24 5.95 4.18 4.18 0 0 1-.76 6.16A3.8 3.8 0 0 1 12 17.6V5.2Z\"\/><path d=\"M8.7 8.6c1.15.12 2.15.72 3.3 1.95M15.3 8.6c-1.15.12-2.15.72-3.3 1.95M8.2 14.1c1.35-.08 2.55.45 3.8 1.55M15.8 14.1c-1.35-.08-2.55.45-3.8 1.55\"\/><\/svg><\/div>\n<h3>Deeper Compatibility<\/h3>\n<p>              <span class=\"green-rule\"><\/span><\/p>\n<p>AI-driven matching goes beyond photos&mdash;analyzing communication style, values, and shared goals.<\/p>\n<\/article>\n<article class=\"why-card\">\n<div class=\"mini-icon\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 3 20 6v6c0 5-3.4 8-8 9-4.6-1-8-4-8-9V6l8-3Z\"\/><path d=\"m8.5 12 2.2 2.2L15.8 9\"\/><\/svg><\/div>\n<h3>Privacy First<\/h3>\n<p>              <span class=\"green-rule\"><\/span><\/p>\n<p>Your data stays yours. AI agents share only what you approve, keeping your real identity safe until you are ready.<\/p>\n<\/article><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<section class=\"prelude-scene score-scene\" id=\"match-score\" data-scene>\n<div class=\"scene-inner\">\n<div class=\"score-layout\">\n<div class=\"score-copy fade-up\">\n<p class=\"eyebrow score-label\">AI-Powered Insight <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2 14.4 9.6 22 12l-7.6 2.4L12 22l-2.4-7.6L2 12l7.6-2.4L12 2Z\"\/><\/svg><\/p>\n<h2 class=\"headline\">Your Match Score<\/h2>\n<p class=\"body-copy\">After your AI agents finish their date, you receive a detailed compatibility score &mdash; so you know exactly why you will click.<\/p>\n<\/p><\/div>\n<div class=\"score-circle-wrap fade-up delay-1\">\n<div class=\"score-circle\" style=\"--score: 92\">\n              <svg class=\"score-ring\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n                <defs>\n                  <linearGradient id=\"scoreRingGradient\" x1=\"8\" y1=\"10\" x2=\"94\" y2=\"96\" gradientUnits=\"userSpaceOnUse\">\n                    <stop offset=\"0%\" stop-color=\"#7430d8\"\/>\n                    <stop offset=\"50%\" stop-color=\"#9547ee\"\/>\n                    <stop offset=\"100%\" stop-color=\"#b57dff\"\/>\n                  <\/linearGradient>\n                <\/defs>\n                <circle class=\"score-ring-track\" cx=\"50\" cy=\"50\" r=\"43\"\/>\n                <circle class=\"score-ring-progress\" cx=\"50\" cy=\"50\" r=\"43\"\/>\n              <\/svg><\/p>\n<div class=\"score-circle-inner\">\n<div class=\"score-center\">\n<div class=\"score-number\">9.2<\/div>\n<div class=\"score-word\">MATCH<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p class=\"score-caption\">A score above <strong>8.5<\/strong> means you share strong alignment on the things that matter most.<\/p>\n<\/p><\/div>\n<aside class=\"click-card fade-up delay-2\">\n<div class=\"click-title\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2 14.4 9.6 22 12l-7.6 2.4L12 22l-2.4-7.6L2 12l7.6-2.4L12 2Z\"\/><\/svg> Why you click<\/div>\n<div class=\"click-item\">\n<div class=\"mini-icon\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M20.8 5.6a5.4 5.4 0 0 0-7.6 0L12 6.8l-1.2-1.2a5.4 5.4 0 0 0-7.6 7.6L12 22l8.8-8.8a5.4 5.4 0 0 0 0-7.6Z\"\/><\/svg><\/div>\n<div>\n<h4>Shared values<\/h4>\n<p>You prioritize the things that matter most.<\/p>\n<\/div><\/div>\n<div class=\"click-item\">\n<div class=\"mini-icon\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M21 11.5a8.4 8.4 0 0 1-9 8.4 9.3 9.3 0 0 1-4.2-1L3 20l1.3-4A8 8 0 1 1 21 11.5Z\"\/><\/svg><\/div>\n<div>\n<h4>Balanced communication<\/h4>\n<p>You both communicate with clarity and care.<\/p>\n<\/div><\/div>\n<div class=\"click-item\">\n<div class=\"mini-icon\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"m3 19 7-12 4 7 2-3 5 8H3Z\"\/><\/svg><\/div>\n<div>\n<h4>Aligned lifestyle goals<\/h4>\n<p>Your visions for the future are in sync.<\/p>\n<\/div><\/div>\n<div class=\"built-note\">Built on meaningful compatibility<\/div>\n<\/aside><\/div>\n<div class=\"score-bars fade-up delay-3\">\n<div class=\"metric\">\n<div class=\"metric-label\"><span class=\"mini-icon\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M21 11.5a8.4 8.4 0 0 1-9 8.4 9.3 9.3 0 0 1-4.2-1L3 20l1.3-4A8 8 0 1 1 21 11.5Z\"\/><\/svg><\/span>Communication Style<\/div>\n<div class=\"metric-track\">\n<div class=\"metric-fill\" style=\"--percent:94%\"><\/div>\n<\/div>\n<div class=\"metric-percent\">9.4<\/div>\n<\/p><\/div>\n<div class=\"metric\">\n<div class=\"metric-label\"><span class=\"mini-icon\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M20.8 5.6a5.4 5.4 0 0 0-7.6 0L12 6.8l-1.2-1.2a5.4 5.4 0 0 0-7.6 7.6L12 22l8.8-8.8a5.4 5.4 0 0 0 0-7.6Z\"\/><\/svg><\/span>Shared Values<\/div>\n<div class=\"metric-track\">\n<div class=\"metric-fill\" style=\"--percent:88%\"><\/div>\n<\/div>\n<div class=\"metric-percent\">8.8<\/div>\n<\/p><\/div>\n<div class=\"metric\">\n<div class=\"metric-label\"><span class=\"mini-icon\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"m3 19 7-12 4 7 2-3 5 8H3Z\"\/><\/svg><\/span>Lifestyle Goals<\/div>\n<div class=\"metric-track\">\n<div class=\"metric-fill\" style=\"--percent:91%\"><\/div>\n<\/div>\n<div class=\"metric-percent\">9.1<\/div>\n<\/p><\/div>\n<div class=\"metric\">\n<div class=\"metric-label\"><span class=\"mini-icon\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M8 10h.01M16 10h.01M8.5 14.5a5 5 0 0 0 7 0\"\/><\/svg><\/span>Humor &#038; Wit<\/div>\n<div class=\"metric-track\">\n<div class=\"metric-fill\" style=\"--percent:85%\"><\/div>\n<\/div>\n<div class=\"metric-percent\">8.5<\/div>\n<\/p><\/div>\n<div class=\"metric\">\n<div class=\"metric-label\"><span class=\"mini-icon\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 5.2a3.2 3.2 0 0 0-6.34.58 4.15 4.15 0 0 0-2.24 5.95 4.18 4.18 0 0 0 .76 6.16A3.8 3.8 0 0 0 12 17.6V5.2Z\"\/><path d=\"M12 5.2a3.2 3.2 0 0 1 6.34.58 4.15 4.15 0 0 1 2.24 5.95 4.18 4.18 0 0 1-.76 6.16A3.8 3.8 0 0 1 12 17.6V5.2Z\"\/><path d=\"M8.7 8.6c1.15.12 2.15.72 3.3 1.95M15.3 8.6c-1.15.12-2.15.72-3.3 1.95M8.2 14.1c1.35-.08 2.55.45 3.8 1.55M15.8 14.1c-1.35-.08-2.55.45-3.8 1.55\"\/><\/svg><\/span>Emotional Intelligence<\/div>\n<div class=\"metric-track\">\n<div class=\"metric-fill\" style=\"--percent:92%\"><\/div>\n<\/div>\n<div class=\"metric-percent\">9.2<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<section class=\"prelude-scene safety-scene\" id=\"safety\" data-scene>\n<div class=\"scene-inner\">\n<div class=\"safety-top fade-up\">\n<p class=\"eyebrow mint\">Safety &amp; Privacy<\/p>\n<h2 class=\"headline\">Safe by Design,<br \/>Built for Real Connections<\/h2>\n<p class=\"body-copy\">We believe meaningful connections start with trust. Prelude protects your privacy so you can focus on what matters&mdash;real conversations.<\/p>\n<div class=\"safe-cards fade-up delay-1\">\n<article class=\"safe-card\">\n<div class=\"mini-icon\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><rect x=\"4\" y=\"10\" width=\"16\" height=\"10\" rx=\"2\"\/><path d=\"M8 10V7a4 4 0 0 1 8 0v3\"\/><\/svg><\/div>\n<p>              <span class=\"green-rule\"><\/span><\/p>\n<h3>Private by Design<\/h3>\n<p>End-to-end encryption keeps your conversations private and secure&mdash;always.<\/p>\n<\/article>\n<article class=\"safe-card\">\n<div class=\"mini-icon\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><rect x=\"4\" y=\"5\" width=\"16\" height=\"15\" rx=\"2\"\/><path d=\"M8 3v4M16 3v4M4 10h16M9 14h.01M12 14h.01M15 14h.01\"\/><\/svg><\/div>\n<p>              <span class=\"green-rule\"><\/span><\/p>\n<h3>You Control What&rsquo;s Shared<\/h3>\n<p>Decide exactly what your AI agent can access or delete anytime.<\/p>\n<\/article>\n<article class=\"safe-card\">\n<div class=\"mini-icon\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 3 20 6v5c0 4.8-3.3 8.1-8 10-4.7-1.9-8-5.2-8-10V6l8-3Z\"\/><path d=\"m8.8 12 2.1 2.1 4.6-5\"\/><\/svg><\/div>\n<p>              <span class=\"green-rule\"><\/span><\/p>\n<h3>Verified Profiles<\/h3>\n<p>Real people, real intentions. We verify to keep Prelude authentic and safe.<\/p>\n<\/article><\/div>\n<\/p><\/div>\n<div class=\"download-panel fade-up delay-2\" id=\"download\">\n<div class=\"download-phones\" aria-hidden=\"true\">\n            <img class=\"phone-pair-graphic\" src=\"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-homepage-draft-v1-phone-pair.png\" alt=\"\" loading=\"lazy\" decoding=\"async\">\n          <\/div>\n<div class=\"download-copy\">\n<h2 class=\"headline\">Download Prelude<\/h2>\n<p class=\"body-copy\">Available on iOS and Android.<br \/>Scan the QR code or tap below to get started.<\/p>\n<div class=\"qr-placeholder\" aria-label=\"QR code placeholder\">\n              <svg viewBox=\"0 0 15 15\" aria-hidden=\"true\"><rect x=\"0.07\" y=\"0.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"1.07\" y=\"0.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"2.07\" y=\"0.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"3.07\" y=\"0.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"4.07\" y=\"0.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"5.16\" y=\"0.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"6.16\" y=\"0.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"10.07\" y=\"0.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"11.07\" y=\"0.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"12.07\" y=\"0.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"13.07\" y=\"0.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"14.07\" y=\"0.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"0.07\" y=\"1.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"1.16\" y=\"1.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"2.16\" y=\"1.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"3.16\" y=\"1.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"4.07\" y=\"1.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"5.16\" y=\"1.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"6.16\" y=\"1.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"8.16\" y=\"1.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"9.16\" y=\"1.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"10.07\" y=\"1.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"11.16\" y=\"1.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"12.16\" y=\"1.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"13.16\" y=\"1.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"14.07\" y=\"1.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"0.07\" y=\"2.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"1.16\" y=\"2.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"2.16\" y=\"2.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"3.16\" y=\"2.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"4.07\" y=\"2.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"5.16\" y=\"2.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"6.16\" y=\"2.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"10.07\" y=\"2.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"11.16\" y=\"2.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"12.16\" y=\"2.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"13.16\" y=\"2.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"14.07\" y=\"2.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"0.07\" y=\"3.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"1.16\" y=\"3.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"2.16\" y=\"3.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"3.16\" y=\"3.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"4.07\" y=\"3.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"5.16\" y=\"3.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"8.16\" y=\"3.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"10.07\" y=\"3.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"11.16\" y=\"3.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"12.16\" y=\"3.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"13.16\" y=\"3.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"14.07\" y=\"3.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"0.07\" y=\"4.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"1.07\" y=\"4.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"2.07\" y=\"4.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"3.07\" y=\"4.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"4.07\" y=\"4.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"5.16\" y=\"4.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"9.16\" y=\"4.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"10.07\" y=\"4.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"11.07\" y=\"4.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"12.07\" y=\"4.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"13.07\" y=\"4.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"14.07\" y=\"4.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"2.16\" y=\"5.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"5.16\" y=\"5.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"8.16\" y=\"5.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"11.16\" y=\"5.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"14.16\" y=\"5.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"0.16\" y=\"6.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"4.16\" y=\"6.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"5.16\" y=\"6.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"6.16\" y=\"6.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"10.16\" y=\"6.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"11.16\" y=\"6.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"12.16\" y=\"6.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"0.16\" y=\"8.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"4.16\" y=\"8.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"5.16\" y=\"8.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"6.16\" y=\"8.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"10.16\" y=\"8.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"11.16\" y=\"8.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"12.16\" y=\"8.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"2.16\" y=\"9.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"5.16\" y=\"9.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"8.16\" y=\"9.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"11.16\" y=\"9.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"14.16\" y=\"9.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"0.07\" y=\"10.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"1.07\" y=\"10.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"2.07\" y=\"10.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"3.07\" y=\"10.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"4.07\" y=\"10.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"5.16\" y=\"10.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"9.16\" y=\"10.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"11.16\" y=\"10.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"13.16\" y=\"10.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"0.07\" y=\"11.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"1.16\" y=\"11.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"2.16\" y=\"11.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"3.16\" y=\"11.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"4.07\" y=\"11.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"5.16\" y=\"11.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"8.16\" y=\"11.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"11.16\" y=\"11.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"14.16\" y=\"11.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"0.07\" y=\"12.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"1.16\" y=\"12.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"2.16\" y=\"12.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"3.16\" y=\"12.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"4.07\" y=\"12.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"5.16\" y=\"12.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"6.16\" y=\"12.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"10.16\" y=\"12.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"11.16\" y=\"12.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"12.16\" y=\"12.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"0.07\" y=\"13.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"1.16\" y=\"13.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"2.16\" y=\"13.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"3.16\" y=\"13.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"4.07\" y=\"13.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"5.16\" y=\"13.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"6.16\" y=\"13.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"8.16\" y=\"13.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"9.16\" y=\"13.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"10.16\" y=\"13.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"11.16\" y=\"13.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"12.16\" y=\"13.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"13.16\" y=\"13.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"14.16\" y=\"13.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"0.07\" y=\"14.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"1.07\" y=\"14.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"2.07\" y=\"14.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"3.07\" y=\"14.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"4.07\" y=\"14.07\" width=\"0.86\" height=\"0.86\" rx=\".08\"\/><rect x=\"5.16\" y=\"14.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"6.16\" y=\"14.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"10.16\" y=\"14.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"11.16\" y=\"14.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><rect x=\"12.16\" y=\"14.16\" width=\"0.6799999999999999\" height=\"0.6799999999999999\" rx=\".08\"\/><\/svg>\n            <\/div>\n<div class=\"store-pair\">\n      <a class=\"store-outline\" href=\"https:\/\/example.com\/prelude-ios\" aria-label=\"Download Prelude on the App Store\"><br \/>\n        <svg class=\"apple-store-icon\" viewBox=\"0 0 28 32\" aria-hidden=\"true\"><path d=\"M22.55 17.12c-.04-4.05 3.31-5.99 3.46-6.08-1.88-2.75-4.81-3.13-5.85-3.17-2.49-.25-4.86 1.47-6.13 1.47-1.26 0-3.21-1.43-5.27-1.39-2.71.04-5.21 1.58-6.61 4.01-2.82 4.89-.72 12.13 2.03 16.1 1.34 1.94 2.94 4.12 5.04 4.04 2.02-.08 2.78-1.31 5.23-1.31 2.44 0 3.13 1.31 5.27 1.27 2.17-.04 3.55-1.98 4.88-3.93 1.54-2.25 2.17-4.43 2.21-4.54-.05-.02-4.22-1.62-4.26-6.47ZM18.53 5.24C19.64 3.89 20.39 2.02 20.19.16c-1.6.06-3.54 1.07-4.69 2.42-1.03 1.19-1.93 3.1-1.68 4.92 1.78.14 3.6-.91 4.71-2.26Z\"\/><\/svg><span><small>Download on the<\/small><strong>App Store<\/strong><\/span><br \/>\n      <\/a><br \/>\n      <a class=\"store-outline\" href=\"https:\/\/example.com\/prelude-android\" aria-label=\"Get Prelude on Google Play\"><br \/>\n        <svg class=\"google-play-icon\" viewBox=\"0 0 36 32\" aria-hidden=\"true\"><path class=\"gp-main\" d=\"M5.3 3.1c-.7.46-1.1 1.28-1.1 2.35v21.1c0 1.08.4 1.9 1.1 2.35L19.2 16 5.3 3.1Z\"\/><path class=\"gp-top\" d=\"M19.2 16 23.5 12 7.4 2.78c-.82-.46-1.56-.44-2.1.32L19.2 16Z\"\/><path class=\"gp-tip\" d=\"M23.5 12 29.4 15.36c1.15.65 1.15 1.63 0 2.28L23.5 21 19.2 16l4.3-4Z\"\/><path class=\"gp-bottom\" d=\"M19.2 16 5.3 28.9c.54.76 1.28.78 2.1.32L23.5 21 19.2 16Z\"\/><\/svg><span><small>GET IT ON<\/small><strong>Google Play<\/strong><\/span><br \/>\n      <\/a>\n    <\/div>\n<p>    <!-- TODO: Replace placeholder App Store and Google Play URLs with final store listing URLs. -->\n          <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>  <\/main><\/p>\n<footer class=\"prelude-bottombar\" aria-label=\"Prelude footer\">\n    <a class=\"prelude-foot-brand\" href=\"#home\"><img src=\"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-homepage-draft-v1-logo-accent-5.png\" alt=\"\" loading=\"eager\" decoding=\"async\"><span>Prelude<\/span><\/a><\/p>\n<nav class=\"prelude-foot-links\" aria-label=\"Footer\">\n      <a href=\"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-footer-about-v11.html\">About<\/a><br \/>\n      <a href=\"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-footer-safety-v11.html\">Safety<\/a><br \/>\n      <a href=\"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-footer-contact-v11.html\">Contact<\/a><br \/>\n      <a href=\"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-footer-terms-v11.html\">Terms<\/a><br \/>\n      <a href=\"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-footer-privacy-v11.html\">Privacy<\/a><br \/>\n    <\/nav>\n<div class=\"prelude-copy\">(c) 2026 Prelude. All rights reserved.<\/div>\n<\/footer>\n<\/div>\n<p><script id=\"prelude-living-ribbon-script\"><\/p>\n<p>\/*!\n * Prelude living ribbon background.\n *\n * Technical starting point: adapted from Bojan Sehovac's animated canvas\n * ribbon\/wave CodePen: https:\/\/codepen.io\/bsehovac\/pen\/LQVzxJ\n * CodePen public Pens are available under the MIT license unless otherwise\n * noted: https:\/\/blog.codepen.io\/documentation\/licensing\/\n *\n * This version is bundled locally and rewritten for Prelude's approved\n * right-side ribbon composition, colours, reduced-motion fallback, resize\n * handling, and a single animation loop. No CodePen production files are\n * hotlinked.\n *\/\n(function() {\n  \"use strict\";<\/p>\n<p>  var root = document.getElementById(\"prelude-stage-root\");\n  var canvas = root && root.querySelector(\"#prelude-ribbon-canvas\");\n  if (!root || !canvas) return;<\/p>\n<p>  var ctx = canvas.getContext(\"2d\", { alpha: true });\n  if (!ctx) return;<\/p>\n<p>  var reducedMotion = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n  var raf = 0;\n  var active = false;\n  var dpr = 1;\n  var size = { w: 1, h: 1 };\n  var mobile = false;<\/p>\n<p>  var controls = {\n    \/\/ Colour, opacity, width, and speed controls for the living ribbon.\n    speed: 0.28,\n    drift: 4.2,\n    textureSpeed: 9,\n    textureOpacity: 0.56,\n    glow: 0.32,\n    ribbonWidth: 930,\n    ribbonRight: 54,\n    ribbonTop: -116\n  };<\/p>\n<p>  var bands = [\n    {\n      name: \"blue\",\n      offset: -165,\n      width: 178,\n      alpha: 0.72,\n      amp: 8,\n      phase: 0.2,\n      glow: \"rgba(172,210,255,.32)\",\n      stops: [\n        [0, \"rgba(232,245,255,.06)\"],\n        [0.22, \"rgba(204,226,255,.52)\"],\n        [0.66, \"rgba(174,164,255,.42)\"],\n        [1, \"rgba(234,246,255,.14)\"]\n      ]\n    },\n    {\n      name: \"lavender\",\n      offset: -86,\n      width: 150,\n      alpha: 0.42,\n      amp: 7,\n      phase: 1.6,\n      glow: \"rgba(160,122,255,.28)\",\n      stops: [\n        [0, \"rgba(218,208,255,.08)\"],\n        [0.28, \"rgba(188,165,255,.5)\"],\n        [0.7, \"rgba(141,90,246,.5)\"],\n        [1, \"rgba(210,198,255,.16)\"]\n      ]\n    },\n    {\n      name: \"violet\",\n      offset: -20,\n      width: 150,\n      alpha: 0.58,\n      amp: 6,\n      phase: 2.9,\n      glow: \"rgba(126,70,238,.28)\",\n      stops: [\n        [0, \"rgba(151,115,255,.1)\"],\n        [0.38, \"rgba(133,76,238,.48)\"],\n        [0.78, \"rgba(123,79,239,.42)\"],\n        [1, \"rgba(177,145,255,.16)\"]\n      ]\n    },\n    {\n      name: \"orange\",\n      offset: 48,\n      width: 144,\n      alpha: 0.9,\n      amp: 5.5,\n      phase: 4.1,\n      glow: \"rgba(255,166,29,.42)\",\n      stops: [\n        [0, \"rgba(255,222,139,.1)\"],\n        [0.3, \"rgba(255,154,18,.9)\"],\n        [0.66, \"rgba(255,118,47,.74)\"],\n        [1, \"rgba(255,199,91,.22)\"]\n      ]\n    },\n    {\n      name: \"gold\",\n      offset: 100,\n      width: 84,\n      alpha: 0.62,\n      amp: 4,\n      phase: 5.6,\n      glow: \"rgba(255,218,104,.46)\",\n      stops: [\n        [0, \"rgba(255,246,204,.18)\"],\n        [0.42, \"rgba(255,219,105,.76)\"],\n        [0.78, \"rgba(255,166,48,.4)\"],\n        [1, \"rgba(255,243,196,.16)\"]\n      ]\n    },\n    {\n      name: \"coral\",\n      offset: 132,\n      width: 96,\n      alpha: 0.34,\n      amp: 5.5,\n      phase: 6.8,\n      glow: \"rgba(255,105,104,.32)\",\n      stops: [\n        [0, \"rgba(255,145,119,.08)\"],\n        [0.34, \"rgba(255,104,85,.58)\"],\n        [0.75, \"rgba(255,122,124,.5)\"],\n        [1, \"rgba(255,188,148,.14)\"]\n      ]\n    },\n    {\n      name: \"pink\",\n      offset: 184,\n      width: 142,\n      alpha: 0.78,\n      amp: 6.5,\n      phase: 8,\n      glow: \"rgba(247,87,188,.36)\",\n      stops: [\n        [0, \"rgba(255,118,191,.08)\"],\n        [0.36, \"rgba(245,88,183,.68)\"],\n        [0.73, \"rgba(244,98,197,.58)\"],\n        [1, \"rgba(255,128,158,.18)\"]\n      ]\n    }\n  ];<\/p>\n<p>  var bandSegments = {\n    blue: makeSegments([\n      [150, -122, 220, 58, 318, 218, 470, 358],\n      [470, 358, 600, 480, 654, 640, 588, 818],\n      [588, 818, 536, 956, 614, 1060, 724, 1208]\n    ]),\n    lavender: makeSegments([\n      [246, -120, 296, 70, 386, 236, 526, 376],\n      [526, 376, 666, 516, 678, 670, 606, 838],\n      [606, 838, 556, 956, 620, 1068, 738, 1212]\n    ]),\n    violet: makeSegments([\n      [300, -116, 338, 72, 426, 236, 576, 374],\n      [576, 374, 710, 498, 716, 666, 640, 838],\n      [640, 838, 586, 960, 630, 1074, 750, 1218]\n    ]),\n    orange: makeSegments([\n      [330, -116, 350, 78, 432, 246, 576, 382],\n      [576, 382, 718, 516, 708, 682, 634, 846],\n      [634, 846, 578, 970, 628, 1078, 748, 1218]\n    ]),\n    gold: makeSegments([\n      [392, -106, 382, 82, 450, 248, 590, 384],\n      [590, 384, 724, 514, 716, 672, 646, 832],\n      [646, 832, 592, 956, 616, 1072, 728, 1210]\n    ]),\n    coral: makeSegments([\n      [420, -104, 412, 78, 472, 246, 604, 388],\n      [604, 388, 724, 518, 728, 660, 660, 826],\n      [660, 826, 604, 958, 626, 1078, 744, 1214]\n    ]),\n    pink: makeSegments([\n      [470, -94, 438, 82, 488, 246, 628, 386],\n      [628, 386, 744, 502, 748, 646, 684, 802],\n      [684, 802, 626, 944, 642, 1068, 760, 1208]\n    ])\n  };<\/p>\n<p>  var strandSegments = [\n    makeSegments([\n      [170, -120, 246, 58, 354, 216, 496, 354],\n      [496, 354, 620, 476, 656, 634, 584, 806],\n      [584, 806, 528, 942, 612, 1062, 724, 1200]\n    ]),\n    makeSegments([\n      [214, -118, 274, 60, 368, 226, 512, 366],\n      [512, 366, 642, 492, 666, 640, 598, 818],\n      [598, 818, 548, 954, 616, 1064, 730, 1206]\n    ]),\n    makeSegments([\n      [354, -112, 372, 74, 446, 246, 584, 388],\n      [584, 388, 716, 524, 702, 682, 632, 842],\n      [632, 842, 580, 964, 632, 1070, 748, 1214]\n    ]),\n    makeSegments([\n      [420, -104, 412, 78, 472, 246, 604, 388],\n      [604, 388, 724, 518, 728, 660, 660, 826],\n      [660, 826, 604, 958, 626, 1078, 744, 1214]\n    ]),\n    makeSegments([\n      [492, -88, 462, 88, 514, 250, 642, 392],\n      [642, 392, 752, 514, 752, 650, 688, 806],\n      [688, 806, 632, 946, 648, 1068, 760, 1204]\n    ])\n  ];<\/p>\n<p>  function makeSegments(rows) {\n    return rows.map(function(row) {\n      return [\n        { x: row[0], y: row[1] },\n        { x: row[2], y: row[3] },\n        { x: row[4], y: row[5] },\n        { x: row[6], y: row[7] }\n      ];\n    });\n  }<\/p>\n<p>  function clamp(value, min, max) {\n    return Math.max(min, Math.min(max, value));\n  }<\/p>\n<p>  function resize() {\n    var rect = canvas.getBoundingClientRect();\n    var nextW = Math.max(1, Math.round(rect.width || window.innerWidth || 1));\n    var nextH = Math.max(1, Math.round(rect.height || window.innerHeight || 1));\n    mobile = nextW < 720;\n    dpr = Math.min(window.devicePixelRatio || 1, mobile ? 1.25 : 1.55);\n    var pxW = Math.round(nextW * dpr);\n    var pxH = Math.round(nextH * dpr);\n    if (canvas.width !== pxW || canvas.height !== pxH) {\n      canvas.width = pxW;\n      canvas.height = pxH;\n    }\n    size.w = nextW;\n    size.h = nextH;\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n  }\n\n  function cubicPoint(p0, p1, p2, p3, t) {\n    var mt = 1 - t;\n    var mt2 = mt * mt;\n    var t2 = t * t;\n    return {\n      x: p0.x * mt2 * mt + 3 * p1.x * mt2 * t + 3 * p2.x * mt * t2 + p3.x * t2 * t,\n      y: p0.y * mt2 * mt + 3 * p1.y * mt2 * t + 3 * p2.y * mt * t2 + p3.y * t2 * t\n    };\n  }\n\n  function ribbonTransform() {\n    var w = size.w;\n    var h = size.h;\n    var ribbonWidth = mobile ? Math.min(w * 1.22, 820) : Math.min(w * 0.56, controls.ribbonWidth);\n    var ribbonHeight = h + (mobile ? 180 : 250);\n    var sx = ribbonWidth \/ 760;\n    var sy = ribbonHeight \/ 1120;\n    var tx = mobile ? w - ribbonWidth + 92 : w - controls.ribbonRight - ribbonWidth;\n    var ty = mobile ? -92 : controls.ribbonTop;\n    return { sx: sx, sy: sy, tx: tx, ty: ty };\n  }\n\n  function curvePoint(segments, t, time, phase, amp, offset) {\n    var total = segments.length;\n    var index = Math.min(total - 1, Math.max(0, Math.floor(t * total)));\n    var local = t * total - index;\n    var segment = segments[index];\n    var point = cubicPoint(segment[0], segment[1], segment[2], segment[3], local);\n    var x = point.x + (offset || 0);\n    var y = point.y;\n    var tx = ribbonTransform();\n    var depth = Math.sin((t * Math.PI) + phase * 0.07);\n    var living = Math.sin(time * controls.speed + t * 7.2 + phase) * amp * controls.drift * 0.12;\n    var micro = Math.cos(time * controls.speed * 0.72 + t * 15.2 + phase * 0.5) * amp * 0.18;\n    return {\n      x: tx.tx + x * tx.sx + living + micro + depth * (mobile ? 2 : 3.4),\n      y: tx.ty + y * tx.sy + Math.cos(time * 0.28 + t * 5.2 + phase) * (mobile ? 1.4 : 2.4)\n    };\n  }\n\n  function makeGradient(band) {\n    var gradient = ctx.createLinearGradient(size.w * 0.62, -size.h * 0.08, size.w * 1.02, size.h * 1.08);\n    band.stops.forEach(function(stop) {\n      gradient.addColorStop(stop[0], stop[1]);\n    });\n    return gradient;\n  }\n\n  function tracePath(segments, phase, amp, time, sampleCount, offset) {\n    sampleCount = sampleCount || (mobile ? 46 : 74);\n    for (var i = 0; i <= sampleCount; i += 1) {\n      var t = i \/ sampleCount;\n      var p = curvePoint(segments, t, time, phase, amp, offset);\n      if (i === 0) ctx.moveTo(p.x, p.y);\n      else ctx.lineTo(p.x, p.y);\n    }\n  }\n\n  function strokeRibbonBand(band, time, scale, alpha, blur) {\n    ctx.save();\n    ctx.globalAlpha = band.alpha * alpha;\n    ctx.lineCap = \"round\";\n    ctx.lineJoin = \"round\";\n    ctx.lineWidth = Math.max(1, band.width * scale * (mobile ? 0.66 : 1));\n    ctx.shadowBlur = blur * (mobile ? 0.55 : 1);\n    ctx.shadowColor = band.glow;\n    ctx.strokeStyle = makeGradient(band);\n    ctx.beginPath();\n    tracePath(bandSegments[band.name], band.phase, band.amp, time);\n    ctx.stroke();\n    ctx.restore();\n  }\n\n  function drawTexture(time) {\n    ctx.save();\n    ctx.lineCap = \"round\";\n    ctx.lineJoin = \"round\";\n    ctx.setLineDash([1.2, 5.4]);\n    ctx.lineDashOffset = -time * controls.textureSpeed;\n    ctx.shadowBlur = mobile ? 1.6 : 2.8;\n    ctx.shadowColor = \"rgba(255,255,255,.55)\";\n    strandSegments.forEach(function(segments, index) {\n      ctx.globalAlpha = (mobile ? 0.28 : controls.textureOpacity) * (index === 0 || index === strandSegments.length - 1 ? 0.72 : 1);\n      ctx.lineWidth = mobile ? 1.2 : 2.1;\n      ctx.strokeStyle = \"rgba(255,255,255,.62)\";\n      ctx.beginPath();\n      tracePath(segments, index * 0.52, 1.9, time, mobile ? 36 : 64);\n      ctx.stroke();\n    });\n\n    ctx.setLineDash([1, 9]);\n    ctx.lineDashOffset = time * controls.textureSpeed * 0.55;\n    strandSegments.forEach(function(segments, index) {\n      ctx.globalAlpha = mobile ? 0.12 : 0.18;\n      ctx.lineWidth = mobile ? 0.7 : 1;\n      ctx.strokeStyle = \"rgba(255,247,226,.42)\";\n      ctx.beginPath();\n      tracePath(segments, index * 0.39 + 2.1, 1.2, time, mobile ? 32 : 54, (index - 2) * 9);\n      ctx.stroke();\n    });\n    ctx.restore();\n  }\n\n  function drawEdgeLight(time) {\n    var edges = [\n      { segments: strandSegments[0], color: \"rgba(225,241,255,.22)\", width: 1.8, phase: 1.4, offset: -4 },\n      { segments: strandSegments[4], color: \"rgba(255,139,207,.27)\", width: 2, phase: 5.8, offset: 4 },\n      { segments: bandSegments.gold, color: \"rgba(255,232,147,.3)\", width: 1.45, phase: 3.9, offset: 0 }\n    ];\n    ctx.save();\n    ctx.lineCap = \"round\";\n    ctx.lineJoin = \"round\";\n    ctx.shadowBlur = 12;\n    edges.forEach(function(edge) {\n      ctx.globalAlpha = mobile ? 0.2 : 0.34;\n      ctx.lineWidth = edge.width;\n      ctx.strokeStyle = edge.color;\n      ctx.shadowColor = edge.color;\n      ctx.beginPath();\n      tracePath(edge.segments, edge.phase, 3.8, time, mobile ? 40 : 66, edge.offset || 0);\n      ctx.stroke();\n    });\n    ctx.restore();\n  }\n\n  function drawAmbientVeil(time) {\n    var w = size.w;\n    var h = size.h;\n    var warm = ctx.createRadialGradient(w * 0.82, h * 0.18, 0, w * 0.82, h * 0.18, Math.max(w, h) * 0.62);\n    warm.addColorStop(0, \"rgba(255,180,51,.12)\");\n    warm.addColorStop(0.36, \"rgba(247,88,188,.085)\");\n    warm.addColorStop(0.72, \"rgba(200,221,255,.055)\");\n    warm.addColorStop(1, \"rgba(255,255,255,0)\");\n    ctx.save();\n    ctx.globalAlpha = mobile ? 0.42 : 0.66;\n    ctx.fillStyle = warm;\n    ctx.fillRect(0, 0, w, h);\n\n    var cool = ctx.createRadialGradient(w * 0.9, h * (0.56 + Math.sin(time * 0.09) * 0.02), 0, w * 0.9, h * 0.56, Math.max(w, h) * 0.5);\n    cool.addColorStop(0, \"rgba(165,132,255,.075)\");\n    cool.addColorStop(0.48, \"rgba(206,237,255,.08)\");\n    cool.addColorStop(1, \"rgba(255,255,255,0)\");\n    ctx.fillStyle = cool;\n    ctx.fillRect(0, 0, w, h);\n    ctx.restore();\n  }\n\n  function renderFrame(now, still) {\n    var time = (now || 0) * 0.001;\n    if (still) time = 7.5;\n    resize();\n    ctx.clearRect(0, 0, size.w, size.h);\n    drawAmbientVeil(time);\n\n    ctx.save();\n    ctx.globalCompositeOperation = \"source-over\";\n    bands.forEach(function(band) {\n      strokeRibbonBand(band, time * 0.78, 1.12, controls.glow, mobile ? 16 : 28);\n    });\n    bands.forEach(function(band) {\n      strokeRibbonBand(band, time, 1, mobile ? 0.72 : 1, mobile ? 4 : 9);\n    });\n    drawTexture(time);\n    drawEdgeLight(time);\n    ctx.restore();\n  }\n\n  function stop() {\n    active = false;\n    if (raf) window.cancelAnimationFrame(raf);\n    raf = 0;\n  }\n\n  function loop(now) {\n    if (!active) return;\n    renderFrame(now, false);\n    raf = window.requestAnimationFrame(loop);\n  }\n\n  function start() {\n    stop();\n    resize();\n    if (reducedMotion &#038;&#038; reducedMotion.matches) {\n      root.classList.add(\"prelude-reduced-motion\");\n      renderFrame(0, true);\n      return;\n    }\n    root.classList.remove(\"prelude-reduced-motion\");\n    active = true;\n    raf = window.requestAnimationFrame(loop);\n  }\n\n  var resizeQueued = false;\n  function requestResize() {\n    if (resizeQueued) return;\n    resizeQueued = true;\n    window.requestAnimationFrame(function() {\n      resizeQueued = false;\n      resize();\n      renderFrame(performance.now(), reducedMotion &#038;&#038; reducedMotion.matches);\n    });\n  }\n\n  window.addEventListener(\"resize\", requestResize, { passive: true });\n  document.addEventListener(\"visibilitychange\", function() {\n    if (document.hidden) stop();\n    else start();\n  });\n  if (reducedMotion &#038;&#038; reducedMotion.addEventListener) {\n    reducedMotion.addEventListener(\"change\", start);\n  }\n\n  start();\n})();\n\n<\/script><\/p>\n<p><script id=\"prelude-draft-v1-script\">\n(function() {\n  var root = document.getElementById(\"prelude-stage-root\");\n  if (!root) return;\n  try {\n    if (!document.querySelector('meta[name=\"robots\"][content*=\"noindex\"]')) {\n      var robots = document.createElement(\"meta\");\n      robots.name = \"robots\";\n      robots.content = \"noindex,nofollow\";\n      document.head.appendChild(robots);\n    }\n  } catch (error) {}<\/p>\n<p>  var scenes = Array.prototype.slice.call(root.querySelectorAll(\"[data-scene]\"));\n  var activate = function(scene) {\n    scenes.forEach(function(item) { item.classList.toggle(\"scene-active\", item === scene); });\n  };\n  var desktopPager = window.matchMedia ? window.matchMedia(\"(min-width: 901px) and (pointer: fine)\") : { matches: false };\n  var visibleCenter = function() {\n    var topbar = root.querySelector(\".prelude-topbar\");\n    var bottombar = root.querySelector(\".prelude-bottombar\");\n    var top = topbar ? topbar.getBoundingClientRect().bottom : 0;\n    var bottom = bottombar ? bottombar.getBoundingClientRect().top : window.innerHeight;\n    return (top + bottom) \/ 2;\n  };\n  var sceneCenterScrollTop = function(scene) {\n    var rect = scene.getBoundingClientRect();\n    return Math.max(0, window.scrollY + rect.top + rect.height \/ 2 - visibleCenter());\n  };\n  var currentSceneIndex = function() {\n    var center = visibleCenter();\n    var bestIndex = 0;\n    var bestDistance = Infinity;\n    scenes.forEach(function(scene, index) {\n      var rect = scene.getBoundingClientRect();\n      var distance = Math.abs((rect.top + rect.height \/ 2) - center);\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestIndex = index;\n      }\n    });\n    return bestIndex;\n  };\n  var scrollToScene = function(index, behavior) {\n    var next = Math.max(0, Math.min(index, scenes.length - 1));\n    var target = scenes[next];\n    if (!target) return;\n    activate(target);\n    window.scrollTo({ top: sceneCenterScrollTop(target), behavior: behavior || \"smooth\" });\n  };\n  var chooseScene = function() {\n    if (!scenes.length) return;\n    var center = window.innerHeight * .48;\n    var best = scenes[0];\n    var bestDistance = Infinity;\n    scenes.forEach(function(scene) {\n      var rect = scene.getBoundingClientRect();\n      if (rect.bottom < 0 || rect.top > window.innerHeight) return;\n      var distance = Math.abs((rect.top + Math.min(rect.height, window.innerHeight) * .42) - center);\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        best = scene;\n      }\n    });\n    activate(best);\n  };\n  var sceneTicking = false;\n  var requestSceneUpdate = function() {\n    if (sceneTicking) return;\n    sceneTicking = true;\n    window.requestAnimationFrame(function() {\n      sceneTicking = false;\n      chooseScene();\n    });\n  };\n  chooseScene();\n  window.addEventListener(\"scroll\", requestSceneUpdate, { passive: true });\n  window.addEventListener(\"resize\", requestSceneUpdate);\n  window.addEventListener(\"hashchange\", function() { window.setTimeout(chooseScene, 80); });\n  window.setTimeout(chooseScene, 220);\n\n  var snapLocked = false;\n  var wheelDelta = 0;\n  var snapTimer = 0;\n  var unlockSnap = function(delay) {\n    window.clearTimeout(snapTimer);\n    snapTimer = window.setTimeout(function() {\n      snapLocked = false;\n      wheelDelta = 0;\n      requestSceneUpdate();\n    }, delay || 760);\n  };\n  var stepScene = function(direction) {\n    var current = currentSceneIndex();\n    var next = Math.max(0, Math.min(current + direction, scenes.length - 1));\n    if (next === current) {\n      wheelDelta = 0;\n      return;\n    }\n    snapLocked = true;\n    wheelDelta = 0;\n    scrollToScene(next, \"smooth\");\n    unlockSnap(820);\n  };\n  window.addEventListener(\"wheel\", function(event) {\n    if (!desktopPager.matches || event.ctrlKey || event.metaKey || Math.abs(event.deltaX) > Math.abs(event.deltaY)) return;\n    event.preventDefault();\n    if (snapLocked) return;\n    wheelDelta += event.deltaY;\n    if (Math.abs(wheelDelta) < 18) return;\n    stepScene(wheelDelta > 0 ? 1 : -1);\n  }, { passive: false });\n  window.addEventListener(\"keydown\", function(event) {\n    if (!desktopPager.matches || event.altKey || event.ctrlKey || event.metaKey) return;\n    var direction = 0;\n    if (event.key === \"PageDown\" || event.key === \"ArrowDown\" || event.key === \" \") direction = 1;\n    if (event.key === \"PageUp\" || event.key === \"ArrowUp\") direction = -1;\n    if (!direction) return;\n    event.preventDefault();\n    if (!snapLocked) stepScene(direction);\n  });<\/p>\n<p>  root.querySelectorAll('a[href^=\"#\"]').forEach(function(link) {\n    link.addEventListener(\"click\", function(event) {\n      var target = root.querySelector(link.getAttribute(\"href\"));\n      if (!target) return;\n      event.preventDefault();\n      var sceneIndex = scenes.indexOf(target);\n      if (sceneIndex >= 0) {\n        scrollToScene(sceneIndex, \"smooth\");\n        snapLocked = true;\n        unlockSnap(820);\n      } else {\n        target.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n      }\n    });\n  });<\/p>\n<p>  root.querySelectorAll(\"video\").forEach(function(video) {\n    video.muted = true;\n    video.playsInline = true;\n    var play = function() { video.play().catch(function() {}); };\n    if (video.readyState >= 1) play();\n    video.addEventListener(\"canplay\", play, { once: true });\n  });\n})();\n<\/script><\/p>\n<p><script id=\"prelude-interaction-layer-script\"><\/p>\n<p>\/*!\n * Prelude interaction layer.\n *\n * Depth movement is an original DOM\/CSS implementation inspired by the motion\n * language of Codrops \/ Tympanus \"Atmospheric Depth Gallery\":\n * https:\/\/tympanus.net\/Tutorials\/DepthGallery\/\n * No Codrops production files are hotlinked or copied here; the reference is\n * used for interaction direction only. Keep this module separate so the effect\n * can be tuned or disabled without touching the approved Prelude layouts.\n *\/\n(function() {\n  var root = document.getElementById(\"prelude-stage-root\");\n  if (!root) return;<\/p>\n<p>  var reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n  var compactViewport = window.matchMedia(\"(max-width: 900px)\");\n  var scenes = Array.prototype.slice.call(root.querySelectorAll(\"[data-scene]\"));\n  var sceneMetrics = [];\n  var scrollTarget = window.scrollY || 0;\n  var scrollCurrent = scrollTarget;\n  var depthFrame = 0;\n  var depthEnabled = false;\n  var depthLite = false;<\/p>\n<p>  function clamp(value, min, max) {\n    return Math.max(min, Math.min(max, value));\n  }<\/p>\n<p>  function measureScenes() {\n    sceneMetrics = scenes.map(function(scene) {\n      return {\n        top: scene.offsetTop,\n        height: Math.max(scene.offsetHeight, window.innerHeight * 0.72)\n      };\n    });\n  }<\/p>\n<p>  function resetDepthVars() {\n    scenes.forEach(function(scene) {\n      scene.style.removeProperty(\"--scene-depth-y\");\n      scene.style.removeProperty(\"--scene-depth-scale\");\n      scene.style.removeProperty(\"--scene-depth-opacity\");\n      scene.style.removeProperty(\"--scene-depth-blur\");\n      scene.style.removeProperty(\"--scene-depth-z\");\n      scene.classList.remove(\"scene-depth-current\");\n    });\n  }<\/p>\n<p>  function setSceneDepth(scene, delta, focused) {\n    var distance = clamp(Math.abs(delta), 0, 1.45);\n    var eased = Math.pow(distance, 1.12);\n    var y = depthLite ? clamp(delta * -18, -24, 24) : clamp(delta * -42, -72, 72);\n    var scale = depthLite ? 1 : 1 - eased * 0.052;\n    var z = depthLite ? 0 : -eased * 120;\n    var opacity = 1 - clamp((distance - (depthLite ? 0.38 : 0.52)) \/ 0.86, 0, 1) * (depthLite ? 0.2 : 0.42);\n    var blur = depthLite ? 0 : clamp((distance - 0.68) \/ 0.72, 0, 1) * 2.4;<\/p>\n<p>    scene.style.setProperty(\"--scene-depth-y\", y.toFixed(2) + \"px\");\n    scene.style.setProperty(\"--scene-depth-scale\", scale.toFixed(4));\n    scene.style.setProperty(\"--scene-depth-opacity\", opacity.toFixed(4));\n    scene.style.setProperty(\"--scene-depth-blur\", blur.toFixed(3) + \"px\");\n    scene.style.setProperty(\"--scene-depth-z\", z.toFixed(2) + \"px\");\n    scene.classList.toggle(\"scene-depth-current\", focused);\n  }<\/p>\n<p>  function renderDepth(immediate) {\n    depthFrame = 0;\n    if (!depthEnabled || !scenes.length) return;<\/p>\n<p>    scrollTarget = window.scrollY || window.pageYOffset || 0;\n    if (immediate) {\n      scrollCurrent = scrollTarget;\n    } else {\n      scrollCurrent += (scrollTarget - scrollCurrent) * 0.145;\n    }<\/p>\n<p>    var viewportCenter = scrollCurrent + window.innerHeight * 0.5;\n    var bestIndex = 0;\n    var bestDistance = Infinity;<\/p>\n<p>    scenes.forEach(function(scene, index) {\n      var metric = sceneMetrics[index];\n      if (!metric) return;\n      var center = metric.top + metric.height * 0.5;\n      var distance = Math.abs(center - viewportCenter);\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestIndex = index;\n      }\n    });\n\n    scenes.forEach(function(scene, index) {\n      var metric = sceneMetrics[index];\n      if (!metric) return;\n      var center = metric.top + metric.height * 0.5;\n      var delta = (center - viewportCenter) \/ Math.max(window.innerHeight, 1);\n      setSceneDepth(scene, delta, index === bestIndex);\n    });\n\n    if (Math.abs(scrollTarget - scrollCurrent) > 0.24) {\n      depthFrame = window.requestAnimationFrame(function() { renderDepth(false); });\n    }\n  }<\/p>\n<p>  function requestDepthRender() {\n    if (!depthEnabled || depthFrame) return;\n    depthFrame = window.requestAnimationFrame(function() { renderDepth(false); });\n  }<\/p>\n<p>  function configureDepth() {\n    depthEnabled = !reducedMotion.matches;\n    depthLite = compactViewport.matches;\n    root.classList.toggle(\"prelude-depth-active\", depthEnabled && !depthLite);\n    root.classList.toggle(\"prelude-depth-lite\", depthEnabled && depthLite);\n    root.classList.toggle(\"prelude-depth-disabled\", !depthEnabled);<\/p>\n<p>    if (!depthEnabled) {\n      if (depthFrame) window.cancelAnimationFrame(depthFrame);\n      depthFrame = 0;\n      resetDepthVars();\n      return;\n    }<\/p>\n<p>    measureScenes();\n    renderDepth(true);\n  }<\/p>\n<p>  window.addEventListener(\"scroll\", requestDepthRender, { passive: true });\n  window.addEventListener(\"resize\", function() {\n    window.requestAnimationFrame(configureDepth);\n  }, { passive: true });\n  if (reducedMotion.addEventListener) reducedMotion.addEventListener(\"change\", configureDepth);\n  if (compactViewport.addEventListener) compactViewport.addEventListener(\"change\", configureDepth);\n  window.setTimeout(configureDepth, 80);\n  window.setTimeout(configureDepth, 500);\n  window.__preludeInteractions = {\n    refresh: configureDepth,\n    resetDepth: resetDepthVars\n  };\n})();<\/p>\n<p><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Prelude How It Works Why Prelude Safety AI-Powered Dating Let Your AI Agent FindYour Match Your AI meets theirs first, uncovering the chemistry before a single hello is exchanged. GET IT ONApp Store GET IT ONGoogle Play Real people. Real connections. AI-powered introductions. How Prelude Works A Smarter Way to Connect Three simple steps to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-56","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Prelude Homepage Draft V1 - joinprelude.app<\/title>\n<meta name=\"robots\" content=\"noindex, nofollow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Prelude Homepage Draft V1 - joinprelude.app\" \/>\n<meta property=\"og:description\" content=\"Prelude How It Works Why Prelude Safety AI-Powered Dating Let Your AI Agent FindYour Match Your AI meets theirs first, uncovering the chemistry before a single hello is exchanged. GET IT ONApp Store GET IT ONGoogle Play Real people. Real connections. AI-powered introductions. How Prelude Works A Smarter Way to Connect Three simple steps to [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/joinprelude.app\/?page_id=56\" \/>\n<meta property=\"og:site_name\" content=\"joinprelude.app\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-21T12:46:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-homepage-draft-v1-boy-deck-edge-glow-2.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/joinprelude.app\/?page_id=56\",\"url\":\"https:\/\/joinprelude.app\/?page_id=56\",\"name\":\"Prelude Homepage Draft V1 - joinprelude.app\",\"isPartOf\":{\"@id\":\"https:\/\/joinprelude.app\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/joinprelude.app\/?page_id=56#primaryimage\"},\"image\":{\"@id\":\"https:\/\/joinprelude.app\/?page_id=56#primaryimage\"},\"thumbnailUrl\":\"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-homepage-draft-v1-boy-deck-edge-glow-2.png\",\"datePublished\":\"2026-05-15T14:49:47+00:00\",\"dateModified\":\"2026-05-21T12:46:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/joinprelude.app\/?page_id=56#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/joinprelude.app\/?page_id=56\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/joinprelude.app\/?page_id=56#primaryimage\",\"url\":\"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-homepage-draft-v1-boy-deck-edge-glow-2.png\",\"contentUrl\":\"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-homepage-draft-v1-boy-deck-edge-glow-2.png\",\"width\":984,\"height\":1117},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/joinprelude.app\/?page_id=56#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/joinprelude.app\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Prelude Homepage Draft V1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/joinprelude.app\/#website\",\"url\":\"https:\/\/joinprelude.app\/\",\"name\":\"joinprelude.app\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/joinprelude.app\/?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":"Prelude Homepage Draft V1 - joinprelude.app","robots":{"index":"noindex","follow":"nofollow"},"og_locale":"en_US","og_type":"article","og_title":"Prelude Homepage Draft V1 - joinprelude.app","og_description":"Prelude How It Works Why Prelude Safety AI-Powered Dating Let Your AI Agent FindYour Match Your AI meets theirs first, uncovering the chemistry before a single hello is exchanged. GET IT ONApp Store GET IT ONGoogle Play Real people. Real connections. AI-powered introductions. How Prelude Works A Smarter Way to Connect Three simple steps to [&hellip;]","og_url":"https:\/\/joinprelude.app\/?page_id=56","og_site_name":"joinprelude.app","article_modified_time":"2026-05-21T12:46:09+00:00","og_image":[{"url":"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-homepage-draft-v1-boy-deck-edge-glow-2.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/joinprelude.app\/?page_id=56","url":"https:\/\/joinprelude.app\/?page_id=56","name":"Prelude Homepage Draft V1 - joinprelude.app","isPartOf":{"@id":"https:\/\/joinprelude.app\/#website"},"primaryImageOfPage":{"@id":"https:\/\/joinprelude.app\/?page_id=56#primaryimage"},"image":{"@id":"https:\/\/joinprelude.app\/?page_id=56#primaryimage"},"thumbnailUrl":"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-homepage-draft-v1-boy-deck-edge-glow-2.png","datePublished":"2026-05-15T14:49:47+00:00","dateModified":"2026-05-21T12:46:09+00:00","breadcrumb":{"@id":"https:\/\/joinprelude.app\/?page_id=56#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/joinprelude.app\/?page_id=56"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/joinprelude.app\/?page_id=56#primaryimage","url":"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-homepage-draft-v1-boy-deck-edge-glow-2.png","contentUrl":"https:\/\/joinprelude.app\/wp-content\/uploads\/2026\/05\/prelude-homepage-draft-v1-boy-deck-edge-glow-2.png","width":984,"height":1117},{"@type":"BreadcrumbList","@id":"https:\/\/joinprelude.app\/?page_id=56#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/joinprelude.app\/"},{"@type":"ListItem","position":2,"name":"Prelude Homepage Draft V1"}]},{"@type":"WebSite","@id":"https:\/\/joinprelude.app\/#website","url":"https:\/\/joinprelude.app\/","name":"joinprelude.app","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/joinprelude.app\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"brizy_media":[],"_links":{"self":[{"href":"https:\/\/joinprelude.app\/index.php?rest_route=\/wp\/v2\/pages\/56","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/joinprelude.app\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/joinprelude.app\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/joinprelude.app\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/joinprelude.app\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=56"}],"version-history":[{"count":5,"href":"https:\/\/joinprelude.app\/index.php?rest_route=\/wp\/v2\/pages\/56\/revisions"}],"predecessor-version":[{"id":289,"href":"https:\/\/joinprelude.app\/index.php?rest_route=\/wp\/v2\/pages\/56\/revisions\/289"}],"wp:attachment":[{"href":"https:\/\/joinprelude.app\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}