/* Organic forms carry the headline, product stage and feature content. */
:root { --lime:#c9f657; --lavender:#bba5f5; --cream:#f4f0de; --green:var(--lime); --bg:#141414; }
body { overflow-wrap:break-word; }
main { overflow:clip; }
h1,h2,h3 { text-wrap:balance; }
.header { position:relative; z-index:5; }
.hero { position:relative; isolation:isolate; gap:60px; padding-block:64px 80px; min-height:720px; }
.hero-copy { position:relative; z-index:2; }
.hero-copy .eyebrow { color:var(--lavender); letter-spacing:1.8px; }
.hero-copy h1 { font-size:clamp(84px,8.5vw,122px); line-height:1.05; letter-spacing:-7px; margin-bottom:32px; }
.hero-copy h1 span { display:inline-block; position:relative; isolation:isolate; color:#171c13; padding:0 22px 9px 10px; margin-top:12px; margin-left:-10px; }
.hero-copy h1 span::before { content:''; position:absolute; z-index:-1; inset:-3px -11px 0 -9px; background:var(--lime); border-radius:39% 17% 36% 21% / 30% 40% 35% 35%; transform:rotate(-4deg); }
.intro { color:#c6c4bf; max-width:410px; }
.button { background:var(--lime); }.button:hover { background:#dcfa92; }
.app-showcase { height:555px; isolation:isolate; }
.showcase-surface { position:absolute; inset:-10px -50px -8px -15px; z-index:-1; pointer-events:none; }
.surface-core { position:absolute; inset:50px 12px 28px 15px; background:var(--lavender); border-radius:44% 57% 38% 52% / 38% 41% 61% 56%; transform:rotate(9deg); }
.surface-loop { position:absolute; inset:8px -9px -10px -12px; border:32px solid var(--lime); border-radius:48% 38% 49% 42% / 52% 43% 44% 45%; transform:rotate(-15deg); }
.surface-core::after { content:''; position:absolute; width:58%; height:57%; right:-8%; bottom:-14%; background:var(--bg); border-radius:46% 52% 42% 55%; transform:rotate(-17deg); }
.screen-playing { width:228px; top:0; transform:translateX(-50%) rotate(-5deg); }
.screen-home { width:170px; left:-16px; top:118px; transform:rotate(-14deg); }
.screen-library { width:170px; right:-20px; top:94px; transform:rotate(14deg); }
.screen-preview img { border-color:#30312b; box-shadow:0 24px 40px #14141466; }
.screen-preview figcaption { color:var(--cream); }.screen-playing figcaption { padding-top:20px; }
.benefit-strip { position:relative; isolation:isolate; background:var(--lavender); border:0; }
.benefit-strip::before { content:''; position:absolute; z-index:-1; inset:-10px -3% 0; background:inherit; border-radius:50% 45% 0 0 / 20px 24px 0 0; }
.benefit-strip .wrap { padding-block:28px; gap:20px; }
.benefit-strip span { color:#29212e; font-weight:800; font-size:14px; }
.features { display:block; padding-block:110px 100px; }
.section-intro { margin-bottom:50px; }
.section-intro h2 { font-size:clamp(48px,5.8vw,80px); letter-spacing:-3.5px; max-width:800px; }
.section-intro p { max-width:460px; margin-top:24px; }
.feature-list { display:grid; grid-template-columns:1fr 1.08fr; gap:26px 42px; align-items:start; }
.feature-list article { position:relative; isolation:isolate; padding:48px; border:0; min-height:360px; }
.feature-list article:first-child { padding-top:48px; }.feature-list article:last-child { padding-bottom:48px; }
.feature-list article::before { content:''; position:absolute; z-index:-1; inset:0; transition:transform .4s ease,border-radius .4s ease; }
.feature-list h3 { font-size:clamp(32px,3.1vw,45px); line-height:1.06; letter-spacing:-1.8px; max-width:330px; }
.feature-list p { font-size:16px; line-height:1.75; max-width:330px; margin:22px 0 0; }
.feature-play { color:#1b2414; padding-bottom:112px!important; }
.feature-play::before { background:var(--lime); border-radius:40px 140px 44px 90px; transform:rotate(-2deg); }
.feature-play p,.feature-lyrics p,.feature-social p { color:#30302b; }
.sound-ribbon { display:flex; align-items:center; gap:8px; height:64px; position:absolute; left:48px; right:55px; bottom:25px; }
.sound-ribbon i { background:#1b2414; height:35px; flex:1; border-radius:100px; transform:rotate(-12deg); }
.sound-ribbon i,.lyric-rhythm i { transition:transform .35s ease; }
.feature-play:hover .sound-ribbon i { transform:rotate(0) scaleY(1.12); }
.feature-lyrics:hover .lyric-rhythm i { transform:translateX(6px); }
.sound-ribbon i:nth-child(2n) { height:60px; }.sound-ribbon i:nth-child(3n) { height:46px; }
.feature-lyrics { margin-top:80px; color:#211c2c; padding-bottom:105px!important; }
.feature-lyrics::before { background:var(--lavender); border-radius:115px 34px 120px 38px; transform:rotate(2deg); }
.lyric-rhythm { position:absolute; bottom:28px; left:48px; right:70px; display:grid; gap:9px; }
.lyric-rhythm i { height:11px; background:#332c40; border-radius:50% 18% 40% 20% / 70%; }
.lyric-rhythm i:nth-child(2) { width:80%; background:#53406d; }.lyric-rhythm i:nth-child(3) { width:54%; background:#715c91; }
.feature-collection { margin-top:-65px; color:var(--cream); min-height:330px!important; padding:68px 52px!important; }
.feature-collection::before { border:2px solid var(--lime); border-radius:47% 42% 42% 36% / 26% 39% 27% 33%; background:#1d2118; }
.feature-collection p { color:#c6cdc0; }
.feature-social { color:#26271d; min-height:320px!important; }
.feature-social::before { background:var(--cream); border-radius:42px 90px 48px 120px; transform:rotate(-2deg); }
.feature-social::after { content:''; position:absolute; z-index:-1; width:74px; height:56px; right:48px; bottom:-18px; background:var(--cream); border-radius:0 0 100% 0; transform:skewX(-16deg); }
.feature-list article:hover::before { transform:rotate(0); }
.about { position:relative; background:#1e201b; padding-block:95px; border-radius:80px 0 80px 0; }
.about-grid { gap:90px; }
.about-logo { background:var(--bg); border-radius:31% 49% 40% 47%; padding:18px; box-sizing:content-box; width:80px; height:80px; }
.about h2 { font-size:clamp(40px,4.1vw,56px); }
.downloads { position:relative; isolation:isolate; margin-block:100px 70px; padding:70px 58px; gap:66px; border-radius:100px 38px 105px 42px; background:var(--lime); color:#1a2115; align-items:center; }
.downloads::before { content:''; position:absolute; z-index:-1; width:51%; height:86%; left:-4%; top:5%; background:var(--lavender); border-radius:40% 47% 31% 42% / 32% 46% 40% 31%; transform:rotate(-8deg); }
.download-heading { position:relative; padding-left:10px; }
.download-heading .eyebrow { color:#352842; }
.download-heading h2 { font-size:clamp(42px,4.7vw,64px); line-height:1.06; letter-spacing:-3px; }
.download-heading h2 span { color:#211a29; }
.download-heading > p:last-child { color:#393041; max-width:290px; margin-bottom:0; }
.download-card { position:relative; border:0; color:var(--text); background:#1c2019; border-radius:30px 30px 70px 30px; padding:34px; }
.download-card p,.download-card .release-link,.desktop-note span,.install ol { color:#c6c4bf; }
.download-card .button { color:#172014!important; }
.faq { border-top:0; padding-block:35px 95px; }
.support { position:relative; isolation:isolate; background:transparent; color:var(--cream); border:0; margin-bottom:70px; padding:60px 50px; gap:55px; }
.support::before { content:''; position:absolute; z-index:-1; inset:0; border:2px solid var(--lavender); border-radius:80px 30px 75px 30px; }
.support h2 { font-size:clamp(34px,3.8vw,52px); letter-spacing:-2.4px; line-height:1.1; max-width:660px; }
.support > div { flex-shrink:0; max-width:290px; }.support p { color:#c6c4bf; }
.support .outline-button { background:var(--lavender); color:#211a29; border:0; }.support .outline-button:hover { background:#cebdf8; }
.footer { padding-top:28px; }
@keyframes hero-arrive { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@media (prefers-reduced-motion:no-preference) {
  .hero-copy { animation:hero-arrive .7s both; }.app-showcase { animation:hero-arrive .8s .12s both; }
  .motion-ready .reveal { opacity:0; transform:translateY(32px); transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1); }
  .motion-ready .reveal.is-visible { opacity:1; transform:translateY(0); }
}
@media (max-width:1050px) and (min-width:761px) {
  .hero { gap:32px; min-height:630px; padding-block:48px 60px; }.hero-copy h1 { font-size:82px; letter-spacing:-5px; }
  .hero-copy h1 span { padding-right:12px; }.app-showcase { height:480px; }
  .screen-playing { width:186px; top:0; }.screen-home,.screen-library { width:138px; top:90px; }
  .screen-home { left:-8px; }.screen-library { right:-8px; }.showcase-surface { inset:0 -18px 0 -10px; }.surface-loop { border-width:24px; }
  .feature-list { gap:26px; }.feature-list article { padding:36px; }.feature-list article:first-child { padding-top:36px; }
  .feature-list h3 { font-size:34px; }.feature-collection { padding:55px 36px!important; }
  .sound-ribbon,.lyric-rhythm { left:36px; right:40px; }.downloads { padding:54px 40px; gap:40px; }
  .download-heading h2 { font-size:46px; letter-spacing:-2px; }.download-card { padding:28px; }
  .support { padding:50px 40px; gap:30px; }.support > div { max-width:230px; }
}
@media (max-width:760px) {
  .hero { gap:32px; padding-block:46px 40px; min-height:0; }
  .hero-copy h1 { font-size:clamp(65px,15.6vw,95px); letter-spacing:-4px; margin-bottom:30px; }
  .hero-copy h1 span { padding:0 12px 6px 8px; margin-top:8px; margin-left:0; }.hero-copy h1 span::before { inset:-1px -5px 0 -7px; }
  .intro { font-size:16px; max-width:390px; }.app-showcase { height:auto; }
  .showcase-surface { inset:8px -8px 40px -8px; }.surface-core { inset:28px 4px 25px 4px; }
  .surface-core::after { width:45%; height:45%; bottom:-10%; right:0; }.surface-loop { inset:8px 0 5px; border-width:18px; }
  .showcase-stage { padding:20px 24px 15px; }.screen-playing,.screen-home,.screen-library { top:auto; left:auto; right:auto; transform:none; width:auto; }
  .screen-preview { flex-basis:min(218px,80%); }.screen-playing figcaption { padding-top:14px; }
  .showcase-hint { color:#c6c4bf; margin-top:16px; }.benefit-strip .wrap { padding-block:26px; gap:18px; }.benefit-strip span { font-size:12px; }
  .features { padding-block:70px 64px; }.section-intro { margin-bottom:35px; }.section-intro h2 { font-size:clamp(40px,9.5vw,62px); letter-spacing:-2px; }
  .feature-list { grid-template-columns:1fr; gap:26px; }
  .feature-list article,.feature-list article:first-child { padding:38px 30px; border:0; min-height:310px; margin:0; }
  .feature-list h3 { font-size:36px; letter-spacing:-1.7px; max-width:300px; }.feature-list p { font-size:15px; margin-top:18px; }
  .feature-play::before { border-radius:30px 100px 36px 70px; }.feature-lyrics::before { border-radius:90px 30px 90px 30px; }
  .feature-collection { padding:48px 30px!important; min-height:285px!important; }.feature-social { min-height:285px!important; }
  .sound-ribbon,.lyric-rhythm { left:30px; right:38px; }.sound-ribbon { gap:6px; bottom:24px; }
  .feature-social::after { width:58px; height:44px; right:35px; bottom:-15px; }
  .about { border-radius:50px 0 50px 0; padding-block:65px; }.about-grid { gap:34px; }.about h2 { font-size:38px; }
  .about-logo { width:62px; height:62px; padding:14px; }
  .downloads { margin-block:65px 54px; padding:44px 24px 26px; gap:36px; border-radius:62px 24px 65px 24px; }
  .downloads::before { width:110%; height:310px; left:-5%; top:-4px; border-radius:34% 40% 38% 26%; transform:rotate(-3deg); }
  .download-heading { padding:0 6px; }.download-heading .eyebrow { margin-bottom:22px; }
  .download-heading h2 { font-size:clamp(36px,8.7vw,49px); letter-spacing:-2px; }
  .download-heading > p:last-child { font-size:15px; max-width:270px; margin-top:18px; }
  .download-card { padding:28px 22px; border-radius:24px 24px 44px 24px; }.platform h3 { font-size:20px; }
  .faq { padding-block:22px 56px; }.support { padding:38px 30px; margin-bottom:55px; gap:28px; }
  .support h2 { font-size:34px; letter-spacing:-1.8px; }.support > div { max-width:100%; }.support::before { border-radius:55px 24px 55px 24px; }
  .footer { padding-top:28px; }
}
@media (max-width:370px) {
  .hero-copy h1 { font-size:62px; }.feature-list article,.feature-list article:first-child { padding-inline:26px; }
  .feature-list h3 { font-size:32px; }.feature-collection { padding-inline:26px!important; }
  .downloads { padding-inline:18px; }.download-card { padding:26px 18px; }
  .platform { align-items:flex-start; }.platform h3 { font-size:18px; }.support { padding:35px 26px; }.support h2 { font-size:30px; }
}