:root {
  color-scheme: light;
  --plum: #32104e;
  --purple: #602084;
  --pink: #fb4a9e;
  --pink-light: #ffafd4;
  --tangerine: #ff822c;
  --cream: #fff6e6;
  --butter: #ffca46;
  --turquoise: #78dcd5;
  --ink: #301347;
  --body-font: "Trebuchet MS", Arial, sans-serif;
  --display-font: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--plum); font-family: var(--body-font); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .6; }
:focus-visible { outline: 4px solid var(--butter); outline-offset: 4px; }
.skip-link { position: fixed; top: -100px; left: 12px; z-index: 999; padding: 12px 18px; background: white; border-radius: 10px; }
.skip-link:focus { top: 12px; }
.wrap { max-width: 1380px; width: calc(100% - 96px); margin-inline: auto; }
.page-shell { overflow: hidden; }
.ribbon { background: var(--butter); color: var(--plum); height: 35px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; font-weight: 900; font-size: 10px; letter-spacing: .18em; }
.ribbon-inner { width: 100%; min-width: 900px; display: flex; justify-content: space-evenly; align-items: center; gap: 27px; }
.ribbon-star { color: #ed428d; font-size: 20px; }
.site-header { min-height: 105px; display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; z-index: 5; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; transform: rotate(-2deg); }
.brand-icon { height: 39px; width: 39px; border-radius: 12px; background: var(--butter); display: grid; place-items: center; box-shadow: 4px 4px 0 #df438e; transform: rotate(10deg); }
.brand-icon-inner { transform: rotate(-10deg); font-size: 29px; line-height: 1; color: #451065; }
.brand-name, .footer-brand { font-family: var(--display-font); font-size: clamp(27px, 3vw, 35px); line-height: 1; color: white; font-weight: 1000; letter-spacing: -.09em; }
.brand-name span:first-child, .footer-brand span:first-child { color: var(--butter); }
.brand-dot { color: var(--pink)!important; }
.header-link { padding: 12px 18px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; text-decoration: none; font-size: 12px; font-weight: 900; color: #fff7f0; letter-spacing: .035em; background: rgba(255,255,255,.06); transition: background .2s, transform .2s; }
.header-link:hover { background: rgba(255,255,255,.15); transform: translateY(-2px); }
.header-link span { margin-left: 10px; color: var(--butter); }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); align-items: center; gap: clamp(20px, 4vw, 74px); padding-block: 52px 125px; min-height: min(775px, 90vh); }
.hero::before { content: ""; position: absolute; width: 700px; height: 700px; background: radial-gradient(circle, rgba(233,55,139,.23) 0%, transparent 65%); left: -320px; top: -150px; pointer-events: none; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 22px; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; background: #f9c5de; border: 2px solid #fbedf1; border-radius: 99px; color: #55205c; padding: 10px 17px; font-weight: 900; letter-spacing: .115em; font-size: 11px; box-shadow: 6px 6px 0 #612e68; transform: rotate(-2deg); }
.eyebrow-dot { width: 10px; height: 10px; border-radius: 50%; background: #f75995; box-shadow: 0 0 0 4px #f5a4d2; }
.hero h1 { margin: 35px 0 12px; font-family: var(--display-font); font-size: clamp(58px, 6.6vw, 102px); font-weight: 1000; line-height: .99; letter-spacing: -.085em; color: white; text-wrap: balance; }
.amazing { position: relative; z-index: 0; display: inline-block; color: var(--butter); letter-spacing: -.092em; }
.amazing::after { content: ""; position: absolute; z-index: -1; left: 0; right: 2%; bottom: 3px; height: 12px; background: var(--pink); border-radius: 90% 20% 85% 20%; transform: rotate(-2deg); }
.period { color: #ff5d9b; }
.coming-soon { display: inline-flex; align-items: center; gap: 14px; background: var(--pink); color: white; font-weight: 1000; letter-spacing: .18em; font-size: clamp(12px, 1.4vw, 16px); border-radius: 6px; padding: 10px 14px; transform: rotate(-1.5deg); box-shadow: 4px 5px 0 #f896bf; margin-top: 22px; }
.coming-stars { color: var(--butter); letter-spacing: -.08em; }
.hero-description { margin: 31px 0 25px; max-width: 510px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; color: #f8e6fa; }
.hero-description strong { color: white; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.button { border: 0; min-height: 53px; padding: 16px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 15px; text-decoration: none; font-weight: 900; font-size: 14px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button span { font-size: 20px; line-height: .8; }
.button:hover { transform: translateY(-3px); }
.button-primary { color: var(--plum); background: var(--butter); box-shadow: 5px 5px 0 #d75794; }
.button-primary:hover { box-shadow: 7px 8px 0 #d75794; }
.button-ghost { background: rgba(255,255,255,.06); border: 1.5px solid #ffffff66; color: white; }
.button-ghost:hover { background: rgba(255,255,255,.15); }
.share-status { min-height: 0; color: var(--butter); font-size: 12px; margin: 9px 0; }
.share-status:empty { display: none; }
.tiny-footnote { display: flex; align-items: center; gap: 8px; margin-top: 25px; color: #eec5e5; font-weight: 600; font-size: 12px; }
.tiny-footnote span { color: var(--butter); }
.hero-art { align-self: center; position: relative; isolation: isolate; padding: 35px 10px 20px; }
.art-blob { position: absolute; z-index: -2; filter: saturate(1.08); }
.art-blob-orange { inset: -5% -10% 4% 3%; background: linear-gradient(155deg, #ffb12f 0%, #fd7b30 47%, #f54a8c 92%); border-radius: 46% 54% 32% 68% / 32% 42% 58% 68%; transform: rotate(-6deg); }
.art-blob-pink { width: 50%; height: 50%; left: -6%; top: -4%; border-radius: 36% 64% 72% 28% / 44% 44% 56% 56%; background: #fb539e; transform: rotate(8deg); }
.art-blob-teal { width: 48%; height: 35%; right: -9%; bottom: -6%; border-radius: 58% 42% 52% 48% / 52% 67% 33% 48%; background: #72dfd4; transform: rotate(-18deg); }
.art-stars { position: absolute; color: var(--butter); text-shadow: 4px 4px 0 var(--plum); pointer-events: none; }
.art-stars-one { left: -8%; bottom: 12%; font-size: 66px; transform: rotate(-12deg); }
.art-stars-two { right: -6%; top: 3%; font-size: 75px; transform: rotate(17deg); color: #f451b1; }
.image-frame { overflow: hidden; position: relative; height: clamp(370px, 37vw, 550px); width: 100%; max-width: 690px; border: 9px solid #fff3d7; border-radius: 26px; background: #f597a0; box-shadow: 0 26px 0 -12px rgba(33,4,49,.35), 0 25px 65px #17072680; transform: rotate(3.2deg); }
.image-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; transform: scale(1.05); }
.image-overlay { position: absolute; inset: auto 0 0; padding: 50px 15px 15px; background: linear-gradient(transparent, #26093fc7 88%); display: flex; justify-content: space-between; align-items: end; gap: 10px; }
.frame-label { font-size: 11px; font-weight: 900; letter-spacing: .12em; background: var(--butter); border-radius: 6px; padding: 10px; white-space: nowrap; }
.frame-button { border: 1px solid #fff8; background: #fff; border-radius: 10px; color: var(--ink); font-weight: 900; padding: 11px 13px; font-size: 12px; }
.frame-button:hover { background: #ffe0f2; }
.sticker { position: absolute; display: grid; place-items: center; text-align: center; line-height: 1; z-index: 4; color: var(--plum); font-family: var(--display-font); font-weight: 1000; }
.sticker-one { width: 115px; height: 115px; top: -15px; right: -38px; background: var(--butter); font-size: 23px; border-radius: 50%; transform: rotate(18deg); box-shadow: 5px 6px 0 #ea559a; }
.sticker-two { width: 101px; height: 102px; bottom: -24px; left: -36px; color: white; font-size: 18px; background: #ed4498; clip-path: polygon(50% 0%,62% 14%,82% 7%,85% 25%,100% 40%,90% 56%,97% 78%,76% 83%,61% 100%,43% 89%,22% 95%,18% 75%,0% 62%,12% 44%,7% 22%,30% 18%); transform: rotate(-12deg); }
.squiggle { background: var(--plum); line-height: 0; height: 45px; margin-top: -45px; position: relative; }
.squiggle svg { height: 45px; width: 100%; }
.what-section { position: relative; background: var(--cream); padding: 78px 0 86px; }
.section-intro { text-align: center; max-width: 660px; margin: 0 auto 35px; }
.mini-label { font-size: 12px; color: #a52e76; font-weight: 1000; letter-spacing: .15em; }
.section-intro h2, .signup-section h2 { font-family: var(--display-font); color: var(--ink); font-size: clamp(40px, 5vw, 64px); line-height: 1.09; letter-spacing: -.065em; margin: 14px 0 11px; }
.underlined { position: relative; white-space: nowrap; }
.underlined::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 8px; background: #ff8ca7; border-radius: 99px; z-index: 0; opacity: .8; }
.section-intro p { margin: 0 auto; color: #795d7c; font-size: 16px; line-height: 1.55; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 21px; }
.feature-card { min-height: 347px; border: 2px solid #412047; border-radius: 27px; padding: 29px 29px 26px; box-shadow: 7px 7px 0 var(--plum); transition: transform .2s ease; }
.feature-card:hover { transform: translateY(-4px) rotate(-.5deg); }
.feature-yellow { background: #fdea90; }
.feature-pink { background: #ffc5dc; }
.feature-teal { background: #a8e9e1; }
.card-art { height: 130px; position: relative; }
.icon-discover .planet { position: absolute; display: grid; place-items: center; width: 105px; height: 105px; left: 38%; top: 8px; border-radius: 50%; color: #ffca46; background: linear-gradient(135deg,#ee51ac 0%, #7b32ad 100%); box-shadow: inset -10px -8px 0 #592477; font-size: 45px; transform: rotate(25deg); }
.icon-discover .orbit { position: absolute; top: 19px; left: 16%; transform: rotate(-12deg); font-size: 58px; color: #fb7248; }
.mix-circle { position: absolute; width: 83px; height: 83px; border-radius: 50%; border: 12px solid white; box-shadow: 5px 5px 0 #4d2664; }
.mix-one { left: 18%; top: 17px; background: #fe82a1; border-color: #e8448f; }
.mix-two { left: 43%; top: 8px; background: #fff078; border-color: #e7a736; }
.mix-three { left: 33%; top: 40px; background: #77ddd6; border-color: #3baca9; }
.icon-gift .box-bottom { position: absolute; width: 106px; height: 83px; background: #e94d96; left: 34%; top: 43px; border: 5px solid var(--plum); transform: rotate(-9deg); border-radius: 7px; }
.icon-gift .box-top { position: absolute; width: 130px; height: 24px; background: #fbba40; left: 30%; top: 30px; border: 5px solid var(--plum); transform: rotate(-9deg); border-radius: 6px; }
.icon-gift .bow { position: absolute; color: #fff8de; left: 46%; top: 7px; font-size: 54px; transform: rotate(18deg); }
.feature-number { font-size: 10px; font-weight: 900; letter-spacing: .17em; color: #7a356a; }
.feature-card h3 { font-family: var(--display-font); font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.055em; line-height: 1.06; margin: 10px 0 12px; }
.feature-card p { max-width: 330px; margin: 0; color: #533b58; font-size: 15px; line-height: 1.5; }
.launch-note { display: flex; justify-content: space-between; align-items: center; gap: 22px; margin-top: 65px; padding: 25px 30px; border: 2px dashed #b85c9c; background: #fffdf6; border-radius: 17px; color: #6d4d72; font-size: 15px; }
.launch-note strong { color: var(--ink); }
.note-spark { font-size: 23px; color: var(--pink); margin-right: 7px; }
.note-badge { background: var(--plum); color: white; border-radius: 99px; padding: 12px 19px; font-size: 11px; font-weight: 900; white-space: nowrap; letter-spacing: .10em; }
.signup-section { background: #f7bfd9; padding: 68px 0; }
.signup-section[hidden] { display: none; }
.signup-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; align-items: center; }
.signup-section h2 { margin-block: 8px; }
.signup-section h2 span { color: #9d147c; }
.signup-section p { max-width: 470px; line-height: 1.5; }
.signup-form label { display: block; font-size: 14px; font-weight: 900; margin-bottom: 8px; }
.signup-fields { display: flex; gap: 8px; }
.signup-fields input { min-width: 0; flex: 1; padding: 15px; border: 2px solid var(--plum); border-radius: 9px; background: white; }
.signup-fields button { background: var(--plum); color: white; border: 0; border-radius: 9px; padding: 15px 20px; font-weight: 900; }
.signup-status { min-height: 1.5rem; font-size: 13px; }
.site-footer { background: #301046; padding: 42px 0 45px; color: white; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.footer-brand { font-size: 32px; }
.footer-inner p { margin: 10px 0 0; font-size: 13px; color: #dfb9d9; }
.footer-right { display: flex; gap: 25px; flex-wrap: wrap; color: #dfb9d9; font-size: 10px; letter-spacing: .14em; font-weight: 800; }
.footer-right span span { color: var(--butter); }
.preview-dialog { width: min(1100px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 19px; color: var(--ink); background: var(--cream); border: 4px solid white; border-radius: 16px; box-shadow: 0 25px 90px #16051f; }
.preview-dialog::backdrop { background: #13051ec7; backdrop-filter: blur(8px); }
.dialog-topline { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.preview-dialog h2 { margin: 0; font-family: var(--display-font); letter-spacing: -.04em; font-size: clamp(20px, 3vw, 30px); }
.preview-dialog p { margin: 6px 0 14px; font-size: 13px; color: #725874; }
.preview-dialog img { display: block; width: 100%; height: auto; border-radius: 7px; }
#dialog-close { height: 37px; width: 37px; line-height: .7; font-size: 28px; font-weight: 900; border-radius: 50%; border: 0; background: var(--plum); color: white; }
@media (max-width: 1100px) {
  .wrap { width: calc(100% - 60px); }
  .hero { gap: 20px; padding-block: 40px 104px; }
  .hero h1 { font-size: clamp(58px, 6.8vw, 78px); }
  .image-frame { height: 440px; }
  .sticker-one { right: -10px; }
  .sticker-two { left: -20px; }
}
@media (max-width: 820px) {
  .wrap { width: calc(100% - 44px); }
  .site-header { min-height: 88px; }
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 35px; padding-top: 39px; padding-bottom: 85px; min-height: 0; }
  .hero-copy { max-width: 720px; }
  .hero h1 { font-size: clamp(64px, 10vw, 96px); }
  .hero-description { max-width: 660px; }
  .hero-art { width: min(100% - 40px, 630px); margin: 0 auto; padding: 30px 4px 24px; }
  .image-frame { max-width: none; height: clamp(350px, 60vw, 530px); }
  .feature-grid { gap: 16px; }
  .feature-card { padding: 21px; min-height: 365px; }
  .feature-card h3 { font-size: 25px; }
}
@media (max-width: 640px) {
  .ribbon { height: 30px; }
  .wrap { width: calc(100% - 34px); }
  .site-header { min-height: 80px; }
  .brand-icon { width: 30px; height: 30px; border-radius: 9px; }
  .brand-icon-inner { font-size: 23px; }
  .brand-name { font-size: 27px; }
  .header-link { padding: 10px 12px; font-size: 10px; }
  .header-link span { margin-left: 4px; }
  .hero { padding: 26px 0 64px; gap: 31px; }
  .eyebrow { font-size: 9px; padding: 8px 12px; letter-spacing: .08em; }
  .hero h1 { font-size: clamp(52px, 12.3vw, 76px); margin-top: 25px; }
  .coming-soon { margin-top: 17px; padding: 9px 11px; letter-spacing: .09em; gap: 8px; font-size: 12px; }
  .hero-description { font-size: 16px; margin: 25px 0 21px; }
  .hero-actions { align-items: stretch; }
  .button { font-size: 13px; min-height: 50px; padding: 13px 16px; }
  .hero-art { width: calc(100% - 22px); }
  .image-frame { height: clamp(280px, 79vw, 445px); border-width: 7px; border-radius: 18px; }
  .frame-label { font-size: 8px; letter-spacing: .06em; padding: 9px 7px; }
  .frame-button { font-size: 10px; padding: 10px; }
  .sticker-one { width: 70px; height: 70px; font-size: 14px; top: -5px; right: -23px; }
  .sticker-two { width: 75px; height: 75px; font-size: 13px; bottom: -14px; left: -25px; }
  .art-stars-one { font-size: 43px; }
  .art-stars-two { font-size: 49px; }
  .squiggle { margin-top: -25px; height: 26px; }
  .squiggle svg { height: 26px; }
  .what-section { padding: 60px 0 66px; }
  .section-intro h2 { font-size: 42px; }
  .section-intro p { font-size: 15px; }
  .feature-grid { grid-template-columns: 1fr; gap: 18px; }
  .feature-card { min-height: 0; padding: 22px 26px 25px; }
  .card-art { height: 120px; }
  .feature-card h3 { max-width: 340px; font-size: 29px; }
  .launch-note { margin-top: 41px; flex-wrap: wrap; padding: 21px; font-size: 14px; }
  .signup-inner { grid-template-columns: 1fr; gap: 10px; }
  .signup-fields { flex-direction: column; }
  .site-footer { padding: 40px 0; }
  .footer-inner { align-items: flex-start; flex-direction: column; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto!important; animation: none!important; transition: none!important; }
}


/* --- Version 2: HTMX-powered reveals + Animate.css motion --- */
/* Keep the page useful even when external scripts cannot load. */
.frame-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.feature-more { display: inline-flex; align-items: center; gap: 11px; margin-top: 23px; padding: 11px 14px; border: 2px solid #432347; background: #fff9ec; border-radius: 999px; font-size: 12px; font-weight: 900; text-decoration: none; box-shadow: 3px 3px 0 #432347; transition: transform .2s, box-shadow .2s; }
.feature-more:hover { transform: translateY(-2px); box-shadow: 5px 5px 0 #432347; }
.feature-more span { font-size: 16px; }
.spotlight-wrap { margin-top: 45px; }
.spotlight-heading { min-height: 28px; display: flex; align-items: center; gap: 14px; margin-bottom: 13px; color: #a52e76; font-size: 11px; font-weight: 1000; letter-spacing: .15em; }
.feature-spotlight { border: 2px solid #432347; border-radius: 25px; background: #fffdf7; box-shadow: 8px 8px 0 #5e2670; outline-offset: 4px; overflow: hidden; }
.spotlight-content { min-height: 210px; padding: clamp(22px, 5vw, 37px); display: grid; grid-template-columns: 1fr minmax(100px, 190px); align-items: center; gap: 16px; }
.spotlight-kicker { display: block; color: #a52e76; font-weight: 900; font-size: 11px; letter-spacing: .15em; margin-bottom: 9px; }
.spotlight-content h3 { font: 1000 clamp(25px, 3.5vw, 38px)/1.08 var(--display-font); letter-spacing: -.055em; margin: 0 0 9px; }
.spotlight-content p { color: #745b73; line-height: 1.5; font-size: 15px; margin: 0; max-width: 730px; }
.spotlight-illustration { display: grid; place-items: center; font-size: clamp(60px, 8vw, 115px); line-height: 1; color: #ed4b9e; text-shadow: 7px 8px 0 #ffcf44; transform: rotate(-15deg); }
.spotlight-violet { background: #efe0fe; }
.spotlight-rose { background: #ffdfec; }
.spotlight-mint { background: #d1f8f2; }
.spotlight-violet .spotlight-illustration { color: #7226b0; }
.spotlight-rose .spotlight-illustration { color: #f45a91; }
.spotlight-mint .spotlight-illustration { color: #24a99a; }
.feature-spotlight .animate__animated { --animate-duration: .62s; }
/* htmx's class-based lifecycle provides swap feedback without an animation framework. */
.htmx-indicator { opacity: 0; visibility: hidden; transition: opacity .18s; }
.htmx-request.htmx-indicator, .htmx-request .htmx-indicator { opacity: 1; visibility: visible; }
.loading-note { font-weight: 800; font-size: 12px; letter-spacing: normal; color: #92396a; }
.preview-dialog { overscroll-behavior: contain; }
.preview-dialog img { max-width: 100%; height: auto; }
.dialog-close { height: 37px; width: 37px; line-height: .7; font-size: 28px; font-weight: 900; border-radius: 50%; border: 0; background: var(--plum); color: white; }
.preview-slot a { color: #6b2f96; font-weight: 900; }
.preview-slot .animate__animated { --animate-duration: .55s; }
.preview-caption { margin: 9px 0 15px; color: #725874; font-size: 13px; }
.signup-status .htmx-indicator { display: inline-block; margin-right: 10px; }
.signup-status { display: block; }
.noscript-notice { padding: 15px; background: #fff6e6; text-align: center; }
.noscript-notice a { font-weight: 900; }
.sr-only { position: absolute; height: 1px; width: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hero h1.animate__animated { --animate-duration: .85s; --animate-delay: .08s; }
.eyebrow.animate__animated { --animate-duration: .65s; }
.coming-soon.animate__animated { --animate-duration: .72s; --animate-delay: .5s; }
.hero-art.animate__animated { --animate-duration: 1s; --animate-delay: .14s; }
/* Animate.css itself supports reduced motion, and this covers our custom transitions. */
@media (prefers-reduced-motion: reduce) {
  .animate__animated, .animate__animated::before, .animate__animated::after { animation-duration: .01ms !important; animation-delay: 0ms !important; }
}
@media (max-width: 640px) {
  .spotlight-content { grid-template-columns: 1fr; gap: 0; }
  .spotlight-illustration { display: none; }
  .spotlight-heading { flex-wrap: wrap; }
  .feature-more { margin-top: 20px; }
}