.co{
  --page:#0b1120; --surface:#0f1c2e; --raise:#16263a; --canvas-d:#0a101d;
  --fg:#f1f5f9; --fg-3:#b6c5d5; --fg-2:#a3b4c8; --muted:#93a3b8;
  --line:rgba(139,157,180,.16); --line-2:rgba(139,157,180,.3);
  --teal:#6baea2; --teal-200:#b5ddd4; --teal-300:#84c2b6; --teal-ink2:#163a35;
  --blue:#71a3ec; --blue-200:#b9d3f9; --blue-300:#97bdf4; --blue-ink2:#162e50;
  --on-accent:#0b1120; --danger:#e5484d;
  --paper:#f1ece2; --paper-2:#5d5a52; --paper-ink:#17191e; --paper-accent:#2f6f64;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ui:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --spring:cubic-bezier(.32,.72,0,1); --spring-t:584ms;
  color-scheme:dark;
}
.co *{box-sizing:border-box}
.co{color:var(--fg);font-family:var(--ui);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;background:var(--page)}
.co :focus-visible{outline:2px solid var(--fg-3);outline-offset:3px}
.co h1,.co h2,.co h3{text-wrap:balance}
.co a{color:inherit;text-decoration:none}
.co button{font:inherit;color:inherit}
.co .site{container-type:inline-size;position:relative;background:var(--page);--out:max(32px,calc((100cqi - 1240px)/2 + 32px))}
@container (max-width:720px){ .co .hero,.co .voices,.co .duo{--out:16px} }
.co .wrap{max-width:1240px;margin:0 auto;padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}
@container (max-width:720px){ .co .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))} }
/* named site-header like the landings' bars, so this one turns into theirs (site.css) */
.co .chdr{view-transition-name:site-header;position:sticky;top:0;z-index:30;padding-top:env(safe-area-inset-top,0px);background:rgba(11,17,32,.94);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.co .chdr .cap{max-width:1240px;margin:0 auto;height:52px;display:flex;align-items:center;gap:36px;padding:0 32px}
.co .chdr .wm{height:22px;width:auto;display:block;view-transition-name:site-logo}
.co .chdr .prods{display:flex;gap:28px;view-transition-name:site-products}
.co .chdr nav{display:flex;gap:28px;font-size:14px;color:var(--fg-3)}
.co .chdr nav a{transition:color 200ms}
.co .chdr nav a:hover{color:var(--fg)}
.co .chdr nav .n:hover{color:var(--teal-200)}
.co .chdr nav .d:hover{color:var(--blue-200)}
.co .chdr .r{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:14px;color:var(--fg-3)}
@container (max-width:720px){ .co .chdr .cap{height:48px;padding:0 16px;gap:20px} .co .chdr nav,.co .chdr .prods{gap:18px} .co .chdr nav .x{display:none} .co .chdr .wm{height:19px} }
.co .mel{--ink:var(--paper-ink);--bar:rgba(241,245,249,.34);--lyd:rgba(236,231,220,.5);--onN:var(--paper-accent);--onD:#fff;--onL:#fff;
  position:relative;overflow:hidden;background:var(--mbg);transition:background-color var(--spring-t) var(--spring)}
.co .mel[data-mode="n"]{--mbg:var(--paper)}
.co .mel[data-mode="d"]{--mbg:var(--canvas-d)}
.co .mel.clear{--mbg:transparent!important}
.co .mel > *{position:absolute;left:0;top:0}
/* notation is the engraved score (company.js, static/score); it fades out under the piano roll */
.co .mel .sib{line-height:0;transition:opacity 420ms}
.co .mel .sib svg{display:block;width:100%;height:auto;overflow:hidden}
.co .mel .sib .s-g{fill:var(--ink);transition:fill 160ms}
.co .mel .sib :is(polyline,path:not([id])){stroke:var(--ink)}
.co .mel .sib .ctx{opacity:.38}
.co .mel .sib .s-nh.on,.co .mel .sib .s-ly.on{fill:var(--onN)}
.co .mel[data-mode="d"] .sib{opacity:0}
.co .mel .hd{translate:var(--x) var(--y);width:var(--w);height:var(--h);border-radius:var(--r);rotate:var(--rot);background:var(--fill);border:var(--bw) solid var(--edge);
  transition:translate var(--spring-t) var(--spring),width var(--spring-t) var(--spring),height var(--spring-t) var(--spring),border-radius var(--spring-t) var(--spring),rotate var(--spring-t) var(--spring),background-color 300ms,border-color 300ms;transition-delay:var(--dl)}
.co .mel[data-mode="n"] .hd{--x:var(--nx);--y:var(--ny);--w:var(--nw);--h:var(--nh2);--r:50%;--rot:0deg;--fill:transparent;--edge:transparent;--bw:0px}
.co .mel[data-mode="d"] .hd{--x:var(--dx);--y:var(--dy);--w:var(--dw);--h:var(--dh2);--r:4px;--rot:0deg;--fill:var(--bar);--edge:transparent;--bw:0px}
.co .mel[data-mode="d"] .hd.sg{--fill:rgba(241,245,249,.74)}
.co .mel[data-mode="d"] .hd.on{--fill:var(--onD)}
/* the stagger is for the change of world; a note lights the moment the playhead reaches it */
.co .mel .hd{transition-delay:var(--dl),var(--dl),var(--dl),var(--dl),var(--dl),0s,0s}
.co .mel .ly{font-family:var(--display);font-weight:500;white-space:nowrap;line-height:1;translate:var(--x) var(--y);transition:translate var(--spring-t) var(--spring),color 300ms;transition-delay:var(--dl)}
.co .mel .ly > span{display:inline-block;transform:translateX(var(--sh));transition:transform var(--spring-t) var(--spring)}
.co .mel[data-mode="n"] .ly{--x:var(--nx);--y:var(--ny);--sh:-50%;color:transparent}
.co .mel[data-mode="d"] .ly{--x:var(--dx);--y:var(--dy);--sh:0%;color:var(--lyd)}
.co .mel[data-mode="d"] .ly.sg{color:#ece7dc}
.co .mel[data-mode="d"] .ly.on{color:var(--onL)}
.co .mel .ph{width:1.5px;opacity:0;transition:opacity 200ms}
.co .mel.playing .ph{opacity:1}
.co .mel[data-mode="n"] .ph{background:var(--onN);top:var(--nt);height:var(--nh)}
.co .mel[data-mode="d"] .ph{background:var(--danger);top:var(--dt);height:var(--dh)}
.co .hero{position:relative;margin-top:-53px;padding:132px 0 76px;display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--paper);color:var(--paper-ink);transition:background-color 900ms var(--spring),color 900ms var(--spring);overflow:hidden}
.co .hero[data-mode="d"]{background:var(--canvas-d);color:var(--fg)}
.co .hero > *{position:relative}
.co .hero h1{font-family:var(--display);font-weight:700;letter-spacing:-2.5px;line-height:.92;margin:0;font-size:clamp(56px,8.6cqi,118px)}
.co .hero h1 em{font-weight:600;color:var(--paper-accent);transition:color 900ms var(--spring)}
.co .hero[data-mode="d"] h1 em{color:var(--blue-300)}
.co .hero h1 .br{display:none}
.co .hero .lede{text-wrap:balance;font-size:20px;line-height:1.45;margin:22px 16px 0;max-width:40ch;color:var(--paper-2);transition:color 900ms var(--spring)}
.co .hero[data-mode="d"] .lede{color:var(--fg-3)}
.co .hero .m{align-self:stretch;margin:28px var(--out) 0;height:clamp(220px,26vh,250px)}
.co .hero .lpw{margin-top:30px}
@container (max-width:720px){ .co .hero{padding:104px 0 56px} .co .hero h1 .br{display:block} .co .hero h1{letter-spacing:-1.5px} .co .hero .lede{font-size:17px} .co .hero .m{height:230px;margin-top:20px} }
.co .hero .m{cursor:pointer}
.co .lp{--hb:var(--paper);--acc:var(--paper-accent);display:inline-flex;align-items:center;gap:14px;padding:4px 10px 4px 4px;border:0;border-radius:999px;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left}
.co .hero[data-mode="d"] .lp{--hb:var(--canvas-d);--acc:var(--blue-300)}
.co .lp .ic{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;transition:background-color 300ms,color 300ms}
.co .lp .ic svg{position:absolute;inset:0;rotate:-90deg;fill:none;overflow:visible}
.co .lp .ic circle{stroke:currentColor;stroke-width:1.5;opacity:.24;transition:opacity 300ms}
.co .lp .ic .pr{stroke:var(--acc);stroke-width:2.5;opacity:1;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--k,0) * 100);stroke-linecap:round;transition:stroke 900ms var(--spring)}
.co .lp:not(.on) .ic .pr{stroke-dashoffset:100;transition:stroke-dashoffset 600ms var(--spring),stroke 900ms var(--spring)}
.co .lp .ic::before{content:"";border-left:13px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.co .lp.on .ic::before{border:0;width:12px;height:14px;margin:0;background:linear-gradient(90deg,currentColor 0 33%,transparent 33% 67%,currentColor 67%)}
.co .lp:hover .ic{background:var(--paper-ink);color:var(--paper)}
.co .hero[data-mode="d"] .lp:hover .ic{background:var(--fg);color:var(--canvas-d)}
.co .lp:hover .ic circle{opacity:0}
.co .lp:hover .ic .pr{opacity:1}
.co .lp .fs{display:flex;flex:none}
.co .lp .fs img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 22%;display:block;box-shadow:0 0 0 2.5px var(--hb);transition:box-shadow 900ms var(--spring),translate 500ms var(--spring)}
.co .lp .fs img + img{margin-left:-10px}
.co .lp:hover .fs img{translate:calc(var(--i) * 4px) 0}
.co .lp .tx{display:grid;line-height:1.15}
.co .lp .tx b{font-family:var(--display);font-size:22px;font-weight:600}
.co .lp .tx small{font-size:13px;opacity:.66;margin-top:1px}
@container (max-width:720px){ .co .lp{gap:12px} .co .lp .ic{width:48px;height:48px} .co .lp .fs img{width:32px;height:32px} .co .lp .tx b{font-size:20px} }
.co .voices{padding-block:128px 120px;text-align:center}
.co .voices .wrap{display:grid;justify-items:center}
.co .voices h2{font-family:var(--display);font-weight:500;font-size:clamp(38px,4.6cqi,60px);line-height:1.02;letter-spacing:-.022em;margin:0}
.co .voices .eth{margin:36px 0 0;max-width:30ch;font-family:var(--display);font-size:clamp(24px,2.3cqi,30px);font-weight:500;line-height:1.2;color:var(--fg-3);text-wrap:balance}
.co .voices .meet{margin-top:32px;height:52px;padding:0 24px;border-radius:12px;border:1px solid var(--line-2);display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15.5px;transition:border-color 200ms,background-color 200ms}
.co .voices .meet:hover{border-color:var(--fg-2);background:rgba(241,245,249,.04)}
.co .voices .meet svg{width:16px;height:16px;transition:transform 400ms var(--spring)}
.co .voices .meet:hover svg{transform:translateX(4px)}
@container (max-width:720px){ .co .voices{padding-block:88px 80px} }
.co .duo{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(6,auto);--cw:calc(50cqi - var(--out) - 56px)}
.co .half{grid-row:span 6;display:grid;grid-template-rows:subgrid;row-gap:0;padding-block:84px 88px;position:relative;isolation:isolate;overflow:hidden;color:var(--on-accent);
}
.co .half.n{background:var(--teal);--ink2:var(--teal-ink2);--world:var(--paper);padding-left:var(--out);padding-right:calc(100% - var(--cw) - var(--out))}
.co .half.d{background:var(--blue);--ink2:var(--blue-ink2);--world:var(--canvas-d);padding-right:var(--out);padding-left:calc(100% - var(--cw) - var(--out))}
.co .half .who{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;padding-bottom:20px;border-bottom:1px solid color-mix(in srgb,currentColor 35%,transparent)}
.co .half .who img{width:40px;height:40px;border-radius:10px;display:block}
.co .half .who small{margin-left:auto;font-size:13px;font-weight:500;color:var(--ink2)}
.co .half .viz{margin-top:28px}
/* the VST window is narrower so both windows are as tall: 70.8% = (1000/640 × 470/520)⁻¹ */
.co .half.n .win{width:70.8%}
.co .half h2{font-family:var(--display);font-weight:500;font-size:clamp(40px,4.6cqi,66px);line-height:1;letter-spacing:-.025em;margin:36px 0 0}
.co .half p{margin:12px 0 0;font-size:16.5px;color:var(--ink2);max-width:34ch;transition:color 500ms}
.co .half .act{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:30px;padding-top:22px;border-top:1px solid color-mix(in srgb,currentColor 35%,transparent);flex-wrap:wrap}
.co .half .act small{font-size:14px;color:var(--ink2);line-height:1.35;max-width:24ch;transition:color 500ms}
.co .half .btn{height:52px;padding:0 24px;border-radius:10px;background:var(--on-accent);color:var(--fg);font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:10px;
  transition:background-color 500ms var(--spring),color 500ms var(--spring),padding 500ms var(--spring)}
.co .half .btn svg{width:16px;height:16px;transition:transform 500ms var(--spring)}
.co .half:hover .btn svg{transform:translateX(4px)}
@container (max-width:900px){ .co .duo{grid-template-columns:1fr;grid-template-rows:none} .co .half{grid-row:auto;grid-template-rows:none;padding:64px 16px 68px!important} .co .half.n .win{width:100%} }
.co .win{border-radius:12px;overflow:hidden;background:#0a101d;border:1px solid rgba(11,17,32,.35);box-shadow:0 28px 56px -28px rgba(11,17,32,.6)}
.co .win .bar{height:30px;display:flex;align-items:center;gap:7px;padding:0 12px;background:#131c2c;border-bottom:1px solid rgba(139,157,180,.14);font-size:12px;color:var(--fg-2);position:relative}
.co .win .bar i{width:10px;height:10px;border-radius:50%;background:#2a3548}
.co .win .bar span{position:absolute;left:0;right:0;text-align:center;pointer-events:none}
.co .scr{position:relative;background:#0b1120}
.co .scr.vst{aspect-ratio:520/470}
.co .scr.daw{aspect-ratio:1000/640}
.co .scr img,.co .scr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.co .scr.vst img{opacity:0;transition:opacity 220ms ease-in}
.co .scr.vst img.on{opacity:1;transition:opacity 260ms ease-out 200ms}
/* ---------- pricing: /plans' own cards (partials/plan_cards.html, static/css/plans.css), so the home sells what /plans
   sells. Only the section and its heading are styled here. ---------- */
.co .pricing{padding-block:120px 16px}
.co .pricing h2{font-family:var(--display);font-weight:500;font-size:clamp(38px,4.6cqi,60px);line-height:1.02;letter-spacing:-.022em;margin:0}
.co .pricing h2{position:relative;z-index:2}
@container (max-width:900px){ .co .pricing{padding-block:88px 8px} }
.cx-io .co .rv{opacity:0;transform:translateY(22px);transition:opacity 800ms var(--spring),transform 900ms var(--spring);transition-delay:var(--d,0ms)}
.cx-io .co .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:0ms!important;animation:none!important} .cx-io .co .rv{opacity:1;transform:none} }
.content-container:has(> .co){max-width:none;padding:0}
.co .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* a half is a door: under the pointer its plugin window comes forward (and gives on press) and the button turns to paper */
.co .half .win{transition:opacity 800ms var(--spring),transform 700ms var(--spring),box-shadow 700ms var(--spring)}
.co .half:hover .win{transform:translateY(-10px) scale(1.02);box-shadow:0 48px 80px -36px rgba(11,17,32,.7)}
.co .half:active .win{transform:scale(.99)}
.co .half:hover .btn{background:var(--paper);color:var(--on-accent);padding:0 32px}
/* "sung." is written in by the hero's playhead, and rewritten in the other world's colour each time the melody turns from
   score to piano roll (the same pen as the pricing cards; company.js, titlePen) */
.co .hero{--wph:var(--paper-accent)}
.co .hero[data-mode="d"]{--wph:var(--danger)}
.co .hero h1 em,.co .hero[data-mode] h1 em{position:relative;display:inline-block;transition:none;color:var(--wc,transparent)}
/* the copy has empty alt text, or Chrome reads the title as "Your music, sung. sung." (the first line is for browsers
   without the alt syntax) */
.co .hero h1 em::after{content:attr(data-t);content:attr(data-t) / "";position:absolute;left:0;top:0;color:var(--wn);clip-path:inset(-30% 100% -40% -5%)}
.co .hero h1 em::before{content:"";position:absolute;top:.08em;bottom:-.04em;left:0;width:2px;background:var(--wph);opacity:0;z-index:1}
.co .hero h1 em.wr::after{clip-path:inset(-30% -5% -40% -5%);transition:clip-path 1100ms linear}
.co .hero h1 em.wr::before{animation:co-wph 1100ms linear both}
@keyframes co-wph{0%{left:0;opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@media (prefers-reduced-motion:reduce){ .co .hero h1 em{--wc:var(--paper-accent)} .co .hero[data-mode="d"] h1 em{--wc:var(--blue-300)} }

/* the half under the pointer takes two thirds of the page and pushes the other aside; each keeps its content at its outer
   edge, so the pushed one is covered rather than squeezed. overflow:clip, not hidden: Chrome won't let an "unsafe end"
   item overflow the start edge of a scroll container */
@container (min-width:901px){
  .co .duo{grid-template-columns:1fr 1fr;transition:grid-template-columns 800ms var(--spring)}
  .co .duo:has(.half.n:hover){grid-template-columns:1.34fr .66fr}
  .co .duo:has(.half.d:hover){grid-template-columns:.66fr 1.34fr}
  .co .half{grid-template-columns:minmax(0,1fr);overflow:clip;min-width:0}
  .co .half > *,.co .half > p{width:var(--cw);max-width:none}
  .co .half.n{padding-right:0}
  .co .half.n > *{justify-self:start}
  .co .half.d{padding-left:0}
  .co .half.d > *{justify-self:unsafe end}
  .co .half > *{transition:opacity 600ms var(--spring),translate 800ms var(--spring)}
  /* the paragraph's own colour transition would otherwise drop these, and it would jump while the rest slides */
  .co .half > p{transition:opacity 600ms var(--spring),translate 800ms var(--spring),color 500ms}
  .co .duo:has(.half.n:hover) .half.d > *,.co .duo:has(.half.d:hover) .half.n > *{opacity:.35}
  .co .duo:has(.half.n:hover) .half.n > *{translate:clamp(0px,8cqi,120px) 0}
  .co .duo:has(.half.d:hover) .half.d > *{translate:calc(-1 * clamp(0px,8cqi,120px)) 0}
}

/* every host in one slow strip under the hero, 72px between hairlines (Stripe's customer strip) */
.co .hstrip{overflow:hidden;border-bottom:1px solid var(--line);background:var(--page);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.co .hstrip .trk{display:flex;width:max-content;animation:co-mq 55s linear infinite}
.co .hstrip ul{display:flex;gap:56px;margin:0;padding:22px 28px;list-style:none}
.co .hstrip li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--fg-3);white-space:nowrap}
.co .hstrip img{width:28px;height:28px;border-radius:7px;display:block}
.co .hstrip li small{font-size:12px;color:var(--muted);margin-left:-4px}
/* each product's hosts open with its name and whether it can be used today, in the product's colour */
.co .hstrip li.lab{gap:12px;padding-left:28px;border-left:1px solid var(--line-2);font-size:14px}
.co .hstrip li.lab b{font-weight:600;color:var(--fg)}
.co .hstrip li.lab span{font-weight:600}
.co .hstrip li.lab.n span{color:var(--teal-300)}
.co .hstrip li.lab.d span{color:var(--blue-300)}
@keyframes co-mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .co .hstrip .trk{animation:none} }
/* a section's title and its line as one sentence, the second half muted (Stripe's section intros) */
.co h2 .t2{color:var(--muted)}
.co .pricing h2,.co .voices h2{font-size:clamp(30px,3.3cqi,46px);line-height:1.08;letter-spacing:-.018em;max-width:30ch}
.co .voices h2{margin-inline:auto}

/* ---------- the way into a demo from the hero: the melody's link and the line under play, each following the world ---------- */
.co .hero .mw{align-self:stretch;position:relative;margin:40px var(--out) 0}
.co .hero .mw > .m{margin:0}
@container (max-width:720px){ .co .hero .mw{margin-top:20px} }
.co .hero :is(.door,.try) svg{width:15px;height:15px;flex:none;transition:transform 400ms var(--spring)}
.co .hero :is(.door,.try):hover svg{transform:translateX(4px)}
/* the melody's link shows under the pointer, and once by itself after the first silent pass; without a pointer to
   hover with, it stays */
.co .hero .door{display:inline-flex;position:absolute;right:0;bottom:6px;align-items:center;gap:8px;font-size:14.5px;font-weight:600;
  color:var(--paper-ink);opacity:0;translate:0 6px;transition:opacity 400ms var(--spring),translate 500ms var(--spring),color 900ms var(--spring)}
.co .hero[data-mode="d"] .door{color:var(--fg)}
.co .hero .mw:hover .door,.co .hero .door.hint,.co .hero .door:focus-visible{opacity:1;translate:0 0}
.co .hero .mw:hover .door span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (hover:none){ .co .hero .door{opacity:1;translate:0 0} }
.co .hero .try{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:14.5px;font-weight:600;color:inherit;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.co .hero .try.wr span{animation:co-try-wr 700ms linear both}
@keyframes co-try-wr{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% 0 -20% 0)}}