:root {
  --navy: #101018;
  --navy-2: #191923;
  --purple: #aa8aff;
  --purple-dim: #a98cff;
  --orange: #aa8aff;
  --lav: #aaa6b5;
  --card: #191923;
  --darktxt: #e8e9f0;
  --graytxt: #a8a3b2;
  --line-dark: #3a364d;
  --line-light: #302e40;
  --serif: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: #fff; color: var(--darktxt); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 4px; }
svg { display: block; max-width: 100%; }
.wrap { width: 100%; padding: 0 32px; }
.eyebrow { margin: 0 0 14px; color: var(--orange); font-size: 12.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.eyebrow.on-light { color: var(--purple-dim); }

.nav { position: sticky; top: 0; z-index: 40; background: rgba(21,17,43,.96); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(6px); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font: 700 20px var(--serif); letter-spacing: .5px; text-decoration: none; white-space: nowrap; }
.mark { width: 26px; height: 26px; flex: none; }
.nav-links, .nav-actions { display: flex; align-items: center; gap: 24px; }
.nav-links { color: var(--lav); font-size: 14px; }
.nav-links a, .nav-login { text-decoration: none; }
.nav-links a:hover, .nav-login:hover { color: #fff; }
.nav-actions { gap: 16px; white-space: nowrap; }
.nav-login { color: var(--lav); font-size: 14px; font-weight: 700; }
.nav-cta { padding: 9px 18px; border-radius: 7px; background: var(--orange); color: var(--navy); font-size: 14px; font-weight: 700; text-decoration: none; }
.nav-cta:hover { background: #ffc077; }

.hero { padding: 96px 0 80px; overflow: hidden; background: radial-gradient(ellipse 640px 520px at 82% -8%, #241d45 0%, transparent 60%), var(--navy); color: #fff; }
.hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { margin: 0 0 20px; font: 700 clamp(34px, 4vw, 48px)/1.12 var(--serif); letter-spacing: .2px; }
.lede { max-width: 52ch; margin: 0 0 32px; color: var(--lav); font-size: 18px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.cta-row.centered { justify-content: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border: 1px solid transparent; border-radius: 8px; font-size: 15px; font-weight: 700; text-decoration: none; transition: transform .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--orange); color: var(--navy); }
.btn-primary:hover { background: #ffc077; }
.btn-ghost { border-color: rgba(255,255,255,.35); color: #fff; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.hero-note { margin: 22px 0 0; color: var(--lav); font-size: 13px; opacity: .8; }

.problem, .showcase { padding: 100px 0; }
.problem { background: #fff; }
.showcase { background: var(--navy); color: #fff; }
.sec-head { max-width: 640px; margin-bottom: 52px; }
.sec-head h2 { margin: 0 0 14px; font: 700 32px/1.2 var(--serif); }
.sec-head p:last-child { margin: 0; color: var(--graytxt); font-size: 16.5px; }
.showcase .sec-head p:last-child { color: var(--lav); }
.problem-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.p-card { padding: 28px 26px; border-radius: 14px; background: var(--card); }
.p-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 50%; background: var(--purple); color: #fff; font-size: 25px; line-height: 1; }
.p-card h3 { margin: 0 0 10px; font: 700 18px var(--serif); }
.p-card p { margin: 0; color: var(--graytxt); font-size: 14.5px; }

.diff-mock { overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: var(--navy-2); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.diff-tabs { align-items: center; background: #1d1c29; border-bottom: 1px solid #302e40; display: flex; justify-content: space-between; min-height: 43px; padding: 0 18px; }
.diff-tab { align-self: stretch; align-items: center; border-bottom: 2px solid #855cf5; color: #eee9f8; display: inline-flex; font-size: 12px; font-weight: 700; }
.diff-tab-context { color: #898596; font-size: 11px; }
.diff-legend { align-items: center; background: #191923; border-bottom: 1px solid #2a2939; color: #aaa6b5; display: flex; flex-wrap: wrap; font-size: 10px; gap: 16px; min-height: 34px; padding: 6px 18px; }
.diff-legend span { align-items: center; display: inline-flex; gap: 6px; }
.diff-legend i { border-radius: 2px; display: inline-block; height: 9px; width: 9px; }
.legend-unchanged { background: #8050bf; }
.legend-removed { background: #a54759; }
.legend-added { background: #2d8c69; }
.arrangement-scroll { overflow-x: auto; scrollbar-color: #625187 #171722; scrollbar-width: thin; }
.arrangement-board { min-width: 850px; }
.arrangement-ruler { background: #1b1a27; border-bottom: 1px solid #2a2939; color: #777385; display: flex; font-size: 10px; justify-content: space-between; padding: 7px 88px 7px 350px; }
.arrangement-row { display: grid; grid-template-columns: 185px 160px minmax(0, 1fr) 68px; min-height: 59px; }
.arrangement-track, .arrangement-effects, .arrangement-mix { align-items: center; background: #1d1c29; border-bottom: 1px solid #2a2939; color: #c1bccc; display: flex; font-size: 11px; min-width: 0; overflow: hidden; padding: 0 12px; text-overflow: ellipsis; white-space: nowrap; }
.arrangement-track { gap: 10px; }
.track-icon { color: #b491ff; flex: 0 0 auto; font-size: 21px; }
.arrangement-effects { background: #252137; color: #c8b8fa; font-size: 10px; }
.arrangement-effects.empty { background: #1d1c29; }
.arrangement-lane { background-color: #171722; background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(12.5% - 1px), #242330 calc(12.5% - 1px), #242330 12.5%); border-bottom: 1px solid #2a2939; min-width: 0; position: relative; }
.arrangement-mix { color: #777293; font-size: 9px; justify-content: center; padding: 0 6px; }
.arrangement-clip { background: #8050bf; border-radius: 4px; color: #f5f0ff; display: block; height: 44px; overflow: hidden; padding: 6px 9px; position: absolute; text-overflow: ellipsis; top: 7px; white-space: nowrap; }
.arrangement-clip strong, .arrangement-clip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arrangement-clip strong { font-size: 10px; }
.arrangement-clip small { font-size: 9px; margin-top: 3px; opacity: .86; }
.arrangement-clip.clip-removed { background: #a54759; }
.arrangement-clip.clip-added { background: #2d8c69; }
.clip-brass-a { left: 22%; width: 14%; }
.clip-brass-b { left: 36%; width: 14%; }
.clip-brass-c { left: 57%; width: 18%; }
.clip-chords { left: 49%; width: 10%; }
.clip-chords-new { left: 64%; width: 16%; }
.clip-bass-old { left: 52%; width: 13%; }
.clip-bass-a { left: 70%; width: 10%; }
.clip-bass-b { left: 90%; width: 10%; }
.arrangement-footer { align-items: center; background: #1d1c29; color: #9994a4; display: flex; font-size: 11px; justify-content: space-between; min-height: 38px; padding: 0 16px; }
.arrangement-footer strong { color: #ddd7e8; }
.proof { padding: 76px 0; border-block: 1px solid var(--line-light); background: #fff; }
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 36px; }
.stat strong { color: var(--purple); font: 700 29px var(--serif); }
.stat p { max-width: 32ch; margin: 10px 0 0; color: var(--graytxt); font-size: 14px; }
.daw { padding: 64px 0; background: var(--card); }
.ctaband { padding: 96px 0; background: var(--navy); color: #fff; text-align: center; }
.ctaband h2 { margin: 0 0 16px; font: 700 34px var(--serif); }
.ctaband p { max-width: 52ch; margin: 0 auto 32px; color: var(--lav); font-size: 16.5px; }
.investors { padding: 64px 0; background: #fff; }
.inv-panel { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 40px; padding: 40px 44px; border: 1.5px solid var(--purple); border-radius: 16px; }
.inv-panel h2 { margin: 0 0 10px; font: 700 24px var(--serif); }
.inv-panel p:last-child { max-width: 46ch; margin: 0; color: var(--graytxt); font-size: 14.5px; }
.inv-cta { display: flex; justify-content: center; }
footer { padding: 48px 0 32px; background: var(--navy); color: var(--lav); font-size: 13px; }
.foot-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.foot-brand { color: #fff; font: 700 16px var(--serif); }
.foot-tag { margin: 4px 0 0; opacity: .7; }
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-links a { text-decoration: none; opacity: .8; }
.foot-links a:hover { opacity: 1; }

@media (max-width: 1050px) {
  .nav-links { gap: 14px; }
  .hero-inner { gap: 30px; }
}
@media (max-width: 940px) {
  .hero-inner { grid-template-columns: 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 760px) {
  .wrap { padding-inline: 22px; }
  .problem, .showcase { padding: 72px 0; }
  .problem-grid, .proof-grid, .inv-panel { grid-template-columns: 1fr; }
  .inv-panel { gap: 22px; padding: 30px; }
  .inv-cta { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .wrap { padding-inline: 18px; }
  .nav-inner { min-height: 64px; gap: 8px; }
  .brand { gap: 6px; font-size: 16px; }
  .mark { width: 22px; height: 22px; }
  .nav-actions { gap: 8px; }
  .nav-login { font-size: 13px; }
  .nav-cta { padding: 8px 10px; font-size: 12px; }
  .hero { padding: 70px 0 64px; }
  .hero h1 { font-size: 34px; }
  .hero h1 br { display: none; }
  .lede { font-size: 16px; }
  .cta-row .btn { width: 100%; }
  .sec-head h2 { font-size: 28px; }
  .diff-tab-context { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }

/* Keep the public page in the same visual system as the Everhit workspace. */
body { background: var(--navy); }
a:focus-visible { outline-color: #aa8aff; }
.eyebrow, .eyebrow.on-light { color: #a98cff; font-size: 11px; letter-spacing: 1.4px; }

.nav { background: rgba(24, 23, 37, .96); border-bottom-color: #2b293a; backdrop-filter: blur(14px); }
.nav-inner { min-height: 64px; }
.brand { color: #f0ecf8; font: 700 19px var(--sans); gap: 9px; letter-spacing: normal; }
.mark { background: none; border-radius: 0; color: #aa8aff; height: 24px; padding: 0; width: 24px; }
.nav-links { color: #aaa6b5; font-size: 13px; }
.nav-login { color: #c6c0d1; font-size: 13px; }
.nav-cta { background: #7448ec; border: 1px solid #906cff; border-radius: 5px; color: #fff; font-size: 12px; }
.nav-cta:hover { background: #8660f3; }

.hero { background: radial-gradient(ellipse 600px 420px at 84% 13%, rgba(93, 61, 177, .16), transparent 72%), var(--navy); border-bottom: 1px solid #292837; padding: 92px 0 96px; }
.hero-inner { gap: clamp(32px, 5vw, 80px); }
.hero h1 { max-width: 690px; font-size: clamp(36px, 4vw, 56px); letter-spacing: -1.8px; line-height: 1.08; }
.lede { color: #aaa6b5; font-size: 16px; line-height: 1.7; }
.hero-note { color: #8f8a9d; }
.btn { border-radius: 5px; font-size: 13px; min-height: 43px; padding: 10px 18px; }
.btn-primary { background: #7448ec; border-color: #906cff; color: #fff; }
.btn-primary:hover { background: #8660f3; }
.btn-ghost { border-color: #4a455c; color: #ddd7e8; }
.btn-ghost:hover { border-color: #8b68f4; background: #242235; }

.diff-mock { background: #191923; border-color: #333142; border-radius: 7px; box-shadow: 0 24px 70px rgba(0, 0, 0, .2); }

.problem, .showcase { background: #101018; border-bottom: 1px solid #292837; padding: 88px 0; }
.sec-head { margin-bottom: 36px; }
.sec-head h2 { color: #eeeaf5; font-size: clamp(27px, 3vw, 36px); letter-spacing: -.8px; }
.sec-head p:last-child, .showcase .sec-head p:last-child { color: #a8a3b2; font-size: 15px; }
.problem-grid { gap: 16px; }
.p-card { background: #191923; border: 1px solid #302e40; border-radius: 6px; padding: 24px; }
.p-icon { background: #2b2740; border: 1px solid #463b65; border-radius: 5px; color: #aa8aff; font-size: 21px; }
.p-card h3 { color: #e8e4ee; font-size: 16px; }
.p-card p { color: #a8a3b2; font-size: 13px; line-height: 1.6; }

.diff-mock { box-shadow: none; }

.proof { background: #14131d; border-color: #292837; padding: 56px 0; }
.stat { border-left: 2px solid #6843e7; padding-left: 18px; }
.stat strong { color: #e8e4ee; font-size: 19px; }
.stat p { color: #a8a3b2; font-size: 13px; margin-top: 5px; }
.daw { background: #101018; border-bottom: 1px solid #292837; padding: 48px 0; }
.ctaband { background: radial-gradient(ellipse 500px 220px at 50% 50%, rgba(101, 61, 211, .18), transparent 80%), #14131d; border-bottom: 1px solid #292837; padding: 88px 0; }
.ctaband h2 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -.7px; }
.ctaband p { color: #aaa6b5; font-size: 15px; }
.investors { background: #101018; }
.inv-panel { background: #191923; border: 1px solid #393348; border-radius: 6px; }
.inv-panel h2 { color: #e8e4ee; font-size: 23px; }
.inv-panel p:last-child { color: #a8a3b2; font-size: 13px; }
footer { background: #181725; border-top: 1px solid #2b293a; color: #aaa6b5; }
.foot-brand { font: 750 16px var(--sans); }

/* Artist-first introduction and illustrative project gallery. */
.hero { padding: 92px 0 82px; }
.hero-inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(30px, 5vw, 76px); }
.hero h1 { font-size: clamp(39px, 4.35vw, 64px); letter-spacing: -2.3px; max-width: 12ch; }
.hero h1 span { color: #c5afff; }
.hero .lede { font-size: 17px; max-width: 49ch; }
.hero .btn-primary { gap: 12px; }
.hero-record { background: #191923; border: 1px solid #393448; border-radius: 14px; box-shadow: 0 28px 80px rgba(0, 0, 0, .33); overflow: hidden; transform: rotate(2deg); }
.hero-record-art { background: linear-gradient(180deg, rgba(11, 9, 24, .1) 20%, rgba(11, 9, 24, .88) 100%), url('/default-project-cover.png') center / cover; display: flex; flex-direction: column; height: clamp(350px, 35vw, 490px); justify-content: space-between; padding: 22px 26px 28px; }
.record-label { align-self: flex-start; background: rgba(14, 12, 27, .6); border: 1px solid rgba(255, 255, 255, .22); border-radius: 30px; color: #eee9fa; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; padding: 8px 12px; }
.record-label span { color: #c4aaff; padding-inline: 5px; }
.hero-record-copy { display: grid; gap: 5px; }
.hero-record-copy > span { color: #dbcfff; font-size: 10px; font-weight: 750; letter-spacing: 2px; }
.hero-record-copy strong { color: #fff; font-size: clamp(39px, 4vw, 59px); letter-spacing: -2px; line-height: .98; }
.hero-record-copy small { color: #d1c5e8; font-size: 12px; margin-top: 6px; }
.hero-record-bottom { align-items: center; display: flex; gap: 10px; min-height: 67px; padding: 10px 16px; }
.hero-record-avatar, .release-avatar { align-items: center; background: #463063; border-radius: 50%; color: #e3d5ff; display: inline-flex; flex: 0 0 auto; font-size: 15px; font-weight: 750; height: 34px; justify-content: center; width: 34px; }
.hero-record-meta { display: grid; gap: 2px; min-width: 0; }
.hero-record-meta strong { color: #eeeaf5; font-size: 12px; }
.hero-record-meta small { color: #9d97ac; font-size: 10px; }
.hero-record-versions { background: #342744; border: 1px solid #58426d; border-radius: 20px; color: #d0b9ff; font-size: 11px; font-weight: 750; margin-left: auto; padding: 5px 9px; white-space: nowrap; }

.project-gallery { background: radial-gradient(ellipse 70% 60% at 50% 15%, rgba(97, 62, 178, .12), transparent 70%), #14131d; border-bottom: 1px solid #292837; overflow: hidden; padding: 84px 0 72px; }
.gallery-heading { align-items: end; display: flex; gap: 24px; justify-content: space-between; margin-bottom: 32px; }
.gallery-heading h2 { color: #f0ecf8; font-size: clamp(28px, 3vw, 40px); letter-spacing: -1px; line-height: 1.13; margin: 0 0 11px; }
.gallery-heading p:last-child { color: #aaa6b5; font-size: 15px; margin: 0; max-width: 51ch; }
.gallery-disclaimer { border: 1px solid #514569; border-radius: 20px; color: #b5a2dc; flex: 0 0 auto; font-size: 10px; padding: 5px 10px; }
.project-rail { mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent); overflow-x: auto; scrollbar-width: none; }
.project-rail::-webkit-scrollbar { display: none; }
.project-rail-track { animation: project-drift 48s linear infinite; display: flex; gap: 18px; padding: 4px 0 8px; width: max-content; }
.project-rail:hover .project-rail-track, .project-rail:focus-within .project-rail-track { animation-play-state: paused; }
.project-rail-set { display: flex; gap: 18px; }
.release-card { background: #191923; border: 1px solid #363345; border-radius: 12px; flex: 0 0 300px; overflow: hidden; width: 300px; }
.release-card > header { align-items: center; display: flex; gap: 9px; height: 57px; padding: 0 14px; }
.release-card > header > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; }
.release-card > header strong { color: #f1ecfa; font-size: 12px; }
.release-card > header small { color: #8e89a0; font-size: 10px; }
.release-more { color: #aba3c1; font-size: 20px; letter-spacing: 2px; margin-left: auto; margin-top: -10px; }
.avatar-theo { background: #314e60; color: #b9e6e8; }
.avatar-lena { background: #60475d; color: #f5c5df; }
.avatar-ari { background: #5a3b37; color: #ffd1ac; }
.release-artwork { background-position: center; background-size: cover; display: flex; flex-direction: column; height: 275px; justify-content: space-between; overflow: hidden; padding: 14px 17px 17px; position: relative; }
.artwork-midnight { background-image: linear-gradient(180deg, rgba(6, 5, 18, .03), rgba(8, 6, 20, .9)), url('/default-project-cover.png'); }
.artwork-afterhours { background-image: radial-gradient(circle at 62% 34%, transparent 0 18%, rgba(119, 203, 217, .33) 18.2% 18.6%, transparent 18.9% 26%, rgba(119, 203, 217, .14) 26.2% 26.5%, transparent 26.8%), radial-gradient(circle at 57% 35%, #116477 0, #17314b 33%, #0c1528 70%), linear-gradient(#102b44, #080e1b); }
.artwork-bluehour { background-image: radial-gradient(circle at 62% 37%, #cda0d7 0, #7d6eb6 13%, transparent 33%), linear-gradient(155deg, #314870 3%, #365c8a 36%, #241d4d 78%, #101525 100%); }
.artwork-velvet { background-image: radial-gradient(ellipse at 50% 32%, rgba(255, 188, 144, .76), transparent 23%), repeating-radial-gradient(circle at 48% 30%, rgba(225, 141, 154, .12) 0 2px, transparent 3px 15px), linear-gradient(140deg, #6d425d 0%, #352449 55%, #150e25 100%); }
.release-artwork::before { background: linear-gradient(180deg, transparent 36%, rgba(8, 7, 19, .88)); content: ''; inset: 0; position: absolute; }
.release-visibility, .release-copy { position: relative; z-index: 1; }
.release-visibility { align-self: flex-start; backdrop-filter: blur(5px); background: rgba(14, 72, 53, .75); border: 1px solid rgba(101, 228, 165, .5); border-radius: 20px; color: #dbffe7; font-size: 10px; padding: 5px 9px; }
.artwork-bluehour .release-visibility { background: rgba(29, 27, 42, .76); border-color: rgba(218, 209, 245, .4); color: #f1eaff; }
.release-copy > span { color: #d9caff; font-size: 9px; font-weight: 750; letter-spacing: 1.3px; }
.release-copy h3 { color: #fff; font-size: 27px; letter-spacing: -.7px; line-height: 1.05; margin: 5px 0; }
.release-copy p { color: #e0dce9; font-size: 12px; margin: 0; }
.release-card > footer { align-items: center; color: #aaa4b7; display: flex; font-size: 10px; gap: 11px; height: 47px; padding: 0 14px; white-space: nowrap; }
.release-version { background: #372745; border: 1px solid #604371; border-radius: 18px; color: #d4bfff; font-size: 10px; font-weight: 750; margin-left: auto; padding: 3px 7px; }
.gallery-note { color: #8e899b; font-size: 12px; margin: 20px 18px 0; text-align: center; }
.live-openings { background: #14131d; border-bottom: 1px solid #292837; padding: 70px 0; }
.live-openings[hidden] { display: none; }
.live-openings-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.live-opening-card { background: #191923; border: 1px solid #363345; border-radius: 12px; overflow: hidden; }
.live-opening-cover { aspect-ratio: 16 / 10; display: block; object-fit: cover; width: 100%; }
.mock-cover { background-color: #201d34; position: relative; }
.mock-cover::after { background: linear-gradient(180deg, transparent 25%, rgba(8, 7, 19, .35)); content: ''; inset: 0; position: absolute; }
.mock-cover-1 { background-image: radial-gradient(circle at 68% 35%, #e682aa 0 7%, transparent 24%), linear-gradient(140deg, #513978, #171b3f 68%, #10101d); }
.mock-cover-2 { background-image: radial-gradient(circle at 30% 35%, rgba(126, 237, 219, .75), transparent 21%), linear-gradient(155deg, #175f67, #24234f 58%, #171323); }
.mock-cover-3 { background-image: repeating-linear-gradient(120deg, transparent 0 18px, rgba(255, 210, 106, .13) 19px 21px), linear-gradient(140deg, #5f2f50, #342950 55%, #15162a); }
.mock-cover-4 { background-image: radial-gradient(ellipse at 55% 42%, rgba(176, 143, 255, .7), transparent 22%), radial-gradient(circle at 25% 70%, #285a63, transparent 35%), linear-gradient(145deg, #19243b, #261735); }
.mock-cover-5 { background-image: radial-gradient(circle at 72% 22%, #f3d887 0 2%, transparent 3%), radial-gradient(circle at 38% 38%, #b8a5ff 0 1%, transparent 2%), linear-gradient(155deg, #152950, #251d47 58%, #0d1224); }
.mock-cover-6 { background-image: repeating-radial-gradient(ellipse at 52% 100%, transparent 0 18px, rgba(231, 198, 255, .18) 20px 22px), linear-gradient(150deg, #48355d, #24203f 65%, #131424); }
.mock-cover-7 { background-image: radial-gradient(ellipse at 25% 40%, rgba(252, 151, 115, .75), transparent 25%), linear-gradient(135deg, #713e52, #3b284e 56%, #171529); }
.mock-cover-8 { background-image: linear-gradient(115deg, transparent 42%, rgba(132, 230, 218, .34) 43% 45%, transparent 46%), linear-gradient(145deg, #174255, #25234f 62%, #121326); }
.mock-cover-9 { background-image: radial-gradient(circle at 48% 42%, rgba(255, 186, 125, .8), transparent 19%), repeating-radial-gradient(circle at 48% 42%, transparent 0 22px, rgba(235, 155, 187, .14) 24px 26px), linear-gradient(145deg, #623b59, #251d3e); }
.mock-cover-10 { background-image: linear-gradient(25deg, transparent 38%, rgba(147, 126, 230, .45) 39% 44%, transparent 45%), linear-gradient(155deg, #1d4b5c, #242442 60%, #141322); }
.live-opening-card > div { display: grid; gap: 7px; padding: 15px 17px 18px; }
.live-opening-card h3 { color: #f1ecfa; font-size: 17px; margin: 0; overflow-wrap: anywhere; }
.live-opening-card span { color: #aaa6b5; font-size: 12px; }
.live-opening-card a { color: #c6aaff; font-size: 12px; font-weight: 700; margin-top: 5px; text-decoration: none; }
.live-opening-card a:hover { text-decoration: underline; }
@keyframes project-drift { to { transform: translateX(calc(-50% - 9px)); } }

@media (max-width: 940px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero h1 { max-width: 15ch; }
  .hero-record { max-width: 570px; transform: none; }
}
@media (max-width: 760px) {
  .project-gallery { padding: 68px 0 62px; }
  .gallery-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .release-card { flex-basis: 270px; width: 270px; }
  .release-artwork { height: 250px; }
  .release-card > footer { gap: 7px; font-size: 9px; }
}
@media (max-width: 520px) {
  .hero { padding-top: 62px; }
  .hero h1 { font-size: clamp(36px, 10vw, 46px); letter-spacing: -1.6px; }
  .hero-record-art { height: 370px; }
  .hero-record-copy strong { font-size: 47px; }
  .project-rail { mask-image: none; }
}
@media (prefers-reduced-motion: reduce) {
  .project-rail-track { animation: none; }
  .project-rail-set[aria-hidden='true'] { display: none; }
}

/* A horizontally swiped tour of the real workspace concepts. */
.feature-tour { margin-top: 60px; }
.feature-tour-heading { align-items: end; display: flex; gap: 20px; justify-content: space-between; margin-bottom: 20px; }
.feature-tour-heading h3 { color: #f1edf8; font-size: clamp(24px, 2.7vw, 34px); letter-spacing: -.7px; line-height: 1.2; margin: 0; }
.feature-tour-heading > p { color: #9690a3; font-size: 12px; margin: 0 0 4px; }
.tour-carousel { min-width: 0; }
.tour-carousel-viewport { border-radius: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x pan-y; }
.tour-carousel-viewport::-webkit-scrollbar { display: none; }
.tour-carousel-viewport:focus-visible { outline: 2px solid #a98cff; outline-offset: 4px; }
.tour-carousel-track { align-items: stretch; display: flex; }
.tour-item { background: #1c1b29; border: 1px solid #544270; border-radius: 10px; flex: 0 0 100%; min-width: 0; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
.tour-item-heading { align-items: center; border-bottom: 1px solid #343143; display: grid; gap: 14px; grid-template-columns: 38px minmax(0, 1fr); min-height: 76px; padding: 12px 22px; }
.tour-number { color: #9a7bec; font-size: 12px; font-weight: 800; }
.tour-summary { display: grid; gap: 2px; }
.tour-summary strong { color: #efebf6; font-size: 15px; }
.tour-summary small { color: #9993a6; font-size: 11px; }
.tour-panel { align-items: center; display: grid; gap: 28px; grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); padding: 26px 28px 30px; }
.tour-panel > p { color: #b9b2c4; font-size: 14px; line-height: 1.65; margin: 0; max-width: 38ch; }
.tour-carousel-controls { align-items: center; display: grid; gap: 13px; grid-template-columns: 42px minmax(0, 1fr) auto 42px; margin-top: 16px; }
.tour-arrow { align-items: center; background: #211e2e; border: 1px solid #514768; border-radius: 50%; color: #d7c5ff; display: inline-flex; font-size: 18px; height: 42px; justify-content: center; padding: 0; transition: background .18s ease, border-color .18s ease, transform .18s ease; width: 42px; }
.tour-arrow:hover:not(:disabled) { background: #312843; border-color: #9a7bec; transform: translateY(-1px); }
.tour-arrow:disabled { cursor: default; opacity: .35; }
.tour-arrow:focus-visible, .tour-dot:focus-visible { outline: 2px solid #b99cff; outline-offset: 3px; }
.tour-dots { align-items: center; display: flex; gap: 8px; justify-content: center; }
.tour-dot { background: #4a4359; border: 0; border-radius: 10px; height: 7px; padding: 0; transition: background .18s ease, width .18s ease; width: 7px; }
.tour-dot.is-current { background: #aa84ff; width: 24px; }
.tour-position { color: #9993a6; font-size: 11px; font-variant-numeric: tabular-nums; }
.tour-shot { background: #11111b; border: 1px solid #3a354a; border-radius: 7px; box-shadow: 0 14px 34px rgba(0, 0, 0, .18); color: #e9e5f2; min-height: 215px; overflow: hidden; }
.shot-topbar { align-items: center; background: #242232; border-bottom: 1px solid #3a354a; display: flex; gap: 9px; min-height: 39px; padding: 0 13px; }
.shot-topbar strong { font-size: 11px; }
.shot-topbar > span:last-child { color: #9791a7; font-size: 10px; margin-left: auto; }
.shot-icon { color: #b290ff; font-size: 15px; }
.shot-chat { display: grid; gap: 11px; padding: 14px; }
.shot-message { align-items: start; display: flex; gap: 8px; }
.shot-message > div { background: #242230; border: 1px solid #39354a; border-radius: 10px 10px 10px 2px; max-width: 80%; padding: 8px 10px; }
.shot-message.self { justify-content: flex-end; }
.shot-message.self > div { background: #33284f; border-color: #665196; border-radius: 10px 10px 2px 10px; }
.shot-message small, .shot-comment small { color: #ab95e9; display: block; font-size: 9px; }
.shot-message p, .shot-comment p { color: #eee9f7; font-size: 10px; line-height: 1.45; margin: 4px 0 0; }
.shot-avatar { align-items: center; background: #4c3867; border-radius: 50%; color: #eadbff; display: inline-flex; flex: 0 0 auto; font-size: 9px; font-weight: 800; height: 23px; justify-content: center; width: 23px; }
.shot-pin { border: 1px solid #795fba; border-radius: 4px; color: #d7c2ff; display: inline-block; font-size: 9px; margin-top: 7px; padding: 4px 6px; }
.shot-input { border-top: 1px solid #343143; color: #787286; font-size: 10px; margin: 2px 14px 12px; padding: 8px 0 0; }
.shot-input span { color: #ad8cf8; float: right; }
.shot-task { align-items: start; border-bottom: 1px solid #2c2a38; display: flex; gap: 11px; padding: 16px; }
.shot-task:last-child { border-bottom: 0; }
.task-check { border: 1px solid #9b7ae5; border-radius: 4px; flex: 0 0 auto; height: 15px; margin-top: 2px; width: 15px; }
.shot-task > div { display: grid; gap: 4px; }
.shot-task strong, .shot-person strong { font-size: 11px; }
.shot-task small, .shot-person small { color: #90899c; font-size: 10px; }
.task-tag { background: #312a45; border-radius: 4px; color: #c9b4fc; font-size: 9px; justify-self: start; margin-top: 3px; padding: 3px 6px; }
.shot-mini-track { align-items: stretch; display: grid; grid-template-columns: 110px minmax(0, 1fr); min-height: 58px; }
.shot-mini-track > span { align-items: center; background: #242232; border-bottom: 1px solid #383448; color: #c9c2d4; display: flex; font-size: 10px; padding: 0 10px; }
.shot-mini-track > div { background: repeating-linear-gradient(90deg, #1a1926 0 19%, #2c293a 19.2% 19.4%, #1a1926 19.6% 20%); border-bottom: 1px solid #383448; padding: 10px 10%; }
.mini-clip { background: #8050bf; border-radius: 3px; color: #f5efff; display: inline-block; font-size: 10px; min-width: 50%; padding: 8px; position: relative; }
.mini-clip i { background: #e5c6ff; border: 2px solid #251b37; border-radius: 50%; height: 10px; position: absolute; right: 4px; top: -4px; width: 10px; }
.shot-comment { background: #2a233c; border: 1px solid #5b447a; border-radius: 6px; margin: 12px 16px; padding: 11px 13px; width: min(75%, 280px); }
.shot-comment > span { border-top: 1px solid #554668; color: #8f849e; display: block; font-size: 9px; margin-top: 11px; padding-top: 8px; }
.shot-versions { padding: 14px 22px; }
.shot-versions > div { border-left: 2px solid #46375d; display: grid; gap: 3px; padding: 0 0 18px 20px; position: relative; }
.shot-versions > div:last-child { border-left-color: transparent; padding-bottom: 0; }
.version-dot { background: #8660c5; border: 2px solid #1a1626; border-radius: 50%; height: 11px; left: -6px; position: absolute; top: 1px; width: 11px; }
.version-dot.latest { background: #b292ff; box-shadow: 0 0 0 3px #3b3153; }
.shot-versions strong { font-size: 11px; }
.shot-versions small { color: #958ea2; font-size: 9px; }
.shot-person { align-items: center; border-bottom: 1px solid #2c2a38; display: flex; gap: 10px; padding: 11px 15px; }
.shot-person:last-child { border-bottom: 0; }
.shot-person > div { display: grid; gap: 1px; }
.shot-person > span:last-child { color: #b89eeb; font-size: 9px; margin-left: auto; }
.shot-visibility { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 17px; }
.shot-visibility > div { background: #222131; border: 1px solid #3f3a50; border-radius: 6px; display: grid; gap: 6px; min-height: 154px; padding: 13px; }
.visibility-icon { color: #ac8af5; font-size: 21px; line-height: 1; }
.shot-visibility strong { font-size: 11px; }
.shot-visibility small { color: #9790a4; font-size: 9px; }
.visibility-pill { align-self: end; border-radius: 20px; font-size: 9px; justify-self: start; padding: 3px 7px; }
.visibility-pill.public { background: #173e32; color: #9ee8b8; }
.visibility-pill.private { background: #352d45; color: #d3c5e5; }

/* Studio direction: current Ableton bridge, clearly marked future goals. */
.daw { background: #101018; padding: 88px 0; }
.studio-heading { margin-bottom: 27px; max-width: 690px; }
.studio-heading h2 { color: #f1edf8; font-size: clamp(29px, 3vw, 40px); letter-spacing: -.9px; line-height: 1.14; margin: 0 0 11px; }
.studio-heading > p:last-child { color: #aaa4b5; font-size: 15px; line-height: 1.6; margin: 0; }
.studio-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.studio-card { background: #191923; border: 1px solid #353143; border-radius: 9px; min-height: 286px; overflow: hidden; padding: 23px; position: relative; }
.studio-card::before { background: radial-gradient(circle at center, rgba(128, 88, 224, .14), transparent 68%); content: ''; height: 190px; position: absolute; right: -65px; top: -65px; width: 190px; }
.studio-logo { align-items: center; border: 1px solid #53436d; border-radius: 13px; color: #d3baff; display: flex; height: 66px; justify-content: center; margin-bottom: 20px; position: relative; width: 66px; }
.studio-logo svg { height: 50px; width: 50px; }
.ableton-logo { background: #272038; color: #dbc7ff; }
.logic-logo { background: radial-gradient(circle at 67% 31%, #9f96d5, #3e4a75 42%, #272941 73%); color: #eee9ff; }
.protools-logo { background: linear-gradient(135deg, #4c326b, #2c234a); color: #dbc7ff; }
.studio-status { border-radius: 20px; display: inline-block; font-size: 10px; font-weight: 700; padding: 4px 8px; }
.studio-status.available { background: #173e32; color: #a3eebf; }
.studio-status.planned { background: #352e44; color: #c6b7dc; }
.studio-card > a { color: #c5afff; display: inline-block; font-size: 12px; font-weight: 750; margin-top: 14px; text-decoration: none; }
.studio-card > a:hover { color: #e2d9ff; text-decoration: underline; }
.studio-card h3 { color: #f2edf8; font-size: 20px; margin: 12px 0 6px; }
.studio-card p { color: #a9a3b6; font-size: 13px; line-height: 1.6; margin: 0; max-width: 34ch; }
.studio-note { color: #80798d; font-size: 11px; margin: 18px 0 0; }

@media (max-width: 800px) {
  .tour-panel { grid-template-columns: 1fr; gap: 16px; }
  .tour-panel > p { max-width: 60ch; }
  .studio-grid { grid-template-columns: 1fr; }
  .studio-card { min-height: 0; }
}
@media (max-width: 520px) {
  .feature-tour { margin-top: 48px; }
  .feature-tour-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .tour-item-heading { gap: 10px; grid-template-columns: 28px minmax(0, 1fr); padding: 11px 14px; }
  .tour-summary strong { font-size: 13px; }
  .tour-summary small { font-size: 10px; }
  .tour-panel { padding: 18px 14px 20px; }
  .tour-carousel-controls { grid-template-columns: 38px minmax(0, 1fr) auto 38px; gap: 9px; }
  .tour-arrow { height: 38px; width: 38px; }
  .shot-visibility { grid-template-columns: 1fr 1fr; gap: 7px; padding: 10px; }
  .shot-visibility > div { padding: 9px; }
  .daw { padding: 68px 0; }
}
@media (prefers-reduced-motion: reduce) { .tour-carousel-viewport { scroll-behavior: auto; }.tour-arrow, .tour-dot { transition: none; } }