/* BeatBed marketplace home (from design/proposals/marketplace/home-c-dark). Flat, dark, no gradients. */
.hero-c{text-align:center}
.hero-c[data-hero=boxed],.hero-c[data-hero=none]{padding-top:clamp(26px,3.4vw,44px)}
.hero-c .h1{font-size:clamp(32px,4.2vw,52px);letter-spacing:-.05em;line-height:1.04}
.hero-c .h1 em{font-style:normal;color:var(--brand)}
.hero-c .lede{margin:12px auto 0;font-size:17px;color:var(--muted);max-width:680px;text-wrap:balance}   /* one line on desktop; even lines when it wraps on phones */
.hero-c .hs{max-width:860px;margin:22px auto 0;text-align:left}
.hero-c .hs-bar select{font-size:14px;padding:0 10px}
/* hero video slot (Higgsfield loop). Flat: the video is dimmed with one solid overlay, no gradient.
   full = edge to edge under the header (default) · boxed = rounded card inside the page width · none = text only */
.hero-stage{position:relative}
.hero-media{display:none}
.hv-pause,.hv-tag{display:none}
[data-hero=full] .hero-stage,[data-hero=boxed] .hero-stage{display:grid;place-items:center;min-height:clamp(400px,42vw,540px);padding:clamp(36px,5vw,72px) 0;overflow:hidden;background:#111}
[data-hero=full] .hero-stage{border-bottom:1px solid var(--line)}
[data-hero=boxed] .hero-stage{width:calc(100% - 2*clamp(16px,4vw,40px));max-width:calc(1240px - 2*clamp(16px,4vw,40px));margin:0 auto;min-height:clamp(380px,40vw,500px);border-radius:24px;border:1px solid var(--line)}
[data-hero=full] .hero-media,[data-hero=boxed] .hero-media{display:block;position:absolute;inset:0;--edge:14px}
[data-hero=full] .hero-media{--edge:max(16px,calc((100% - 1240px)/2 + clamp(16px,4vw,40px)))}   /* controls line up with the page content */
[data-hero=full] .hero-media::after,[data-hero=boxed] .hero-media::after{content:"";position:absolute;inset:0;background:rgba(13,13,13,.58)}
.hero-copy{position:relative;z-index:2}
[data-hero=full] .lede,[data-hero=boxed] .lede{color:#d6d6d6}
[data-hero=full] .hv-pause,[data-hero=boxed] .hv-pause{display:grid}
[data-hero=full] .hv-tag,[data-hero=boxed] .hv-tag{display:inline-flex}
.hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hv[hidden]{display:none}
.hv-pause{position:absolute;z-index:3;right:var(--edge);bottom:12px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(13,13,13,.7);color:#fff;place-items:center;cursor:pointer}
.hv-pause:hover{border-color:#fff}
.hv-pause svg{width:16px;height:16px}
.hv-pause .pl{display:none}
.hv-pause[aria-pressed=true] .pl{display:block}.hv-pause[aria-pressed=true] .pa{display:none}
.hv-tag{position:absolute;z-index:3;left:var(--edge);bottom:14px;align-items:center;height:26px;padding:0 10px;border-radius:99px;border:1px dashed rgba(255,255,255,.4);color:#cfcfcf;font-size:12px;font-weight:600;background:rgba(13,13,13,.7)}
/* placeholder until a real loop is dropped in (hero.mp4): slow flat equalizer, one red accent group */
.hv-ph{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:clamp(4px,.6vw,8px);padding:0 2%}
.hv-ph i{flex:1;max-width:22px;height:70%;border-radius:6px 6px 0 0;background:#2c2c2c;transform-origin:bottom;animation:eq 3.2s ease-in-out infinite alternate}
.hv-ph i.r{background:var(--brand)}
.hv-ph.paused i{animation-play-state:paused}
@keyframes eq{0%{transform:scaleY(.18)}100%{transform:scaleY(1)}}
@media(max-width:560px){[data-hero=full] .hero-stage,[data-hero=boxed] .hero-stage{min-height:0;padding:32px 0 68px}[data-hero=boxed] .hero-stage{border-radius:18px}}
@media(prefers-reduced-motion:reduce){.hv-ph i{animation:none;transform:scaleY(.6)}}
/* one search bar at a time: the header search stays hidden while the hero search is on screen */
.hp .hsearch2{transition:opacity .2s,visibility .2s}
.hp.hero-search-on .hsearch2{opacity:0;visibility:hidden}
.sec-first{padding-top:var(--section)}
.tabs-row .typeseg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs-row .typeseg::-webkit-scrollbar{display:none}

/* sign-up band */
.joinband{margin-top:var(--section);background:#111;border-block:1px solid var(--line);padding:0 0 var(--section)}
.divline{display:flex;align-items:center;gap:16px;padding:22px 0 20px}
.divline::before,.divline::after{content:"";flex:1;height:1px;background:var(--line-strong)}
.divline span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.joinband h2{text-align:center;font-size:clamp(24px,2.8vw,34px);letter-spacing:-.04em;margin-bottom:22px}
.cards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));   /* Producers and Artists get equal halves (owner, 2026-10-20) */ gap:16px;align-items:stretch}
.jcard{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px 24px;display:flex;flex-direction:column;gap:14px}
.jcard h3{font-size:22px;letter-spacing:-.035em}
.jcard .lead2{color:var(--muted);font-size:15px;margin-top:-6px}
.pts{display:grid;gap:10px}
.pts li{display:flex;align-items:center;gap:10px;font-size:15px;line-height:1.35;flex-wrap:wrap}
.pts li>[data-i]{color:var(--ok);flex:none}.pts li>[data-i] svg.i{width:18px;height:18px}
.pts li .tx2{flex:1;min-width:0}
/* phones: check | text | tags stacked on the right, so a second tag never squeezes the text or lands under it */
@media(max-width:560px){.pts li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;row-gap:4px}.pts li .tag{grid-column:3;justify-self:end}.pts li:has(.tag+.tag)>:not(.tag){grid-row:1 / span 2}}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:99px;border:1px solid var(--line-strong);font-size:11.5px;font-weight:600;color:var(--ink);white-space:nowrap;flex:none}
.tag.soon{border-style:dashed;color:var(--muted)}
.note2{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.note2 b{color:var(--ink);font-weight:600}
.jact{display:flex;gap:var(--gap);margin-top:auto;align-items:center}
/* a pair of actions shares one row on every screen; on phones each takes half */
@media(max-width:560px){.jact .btn{flex:1 1 0;min-width:0;min-height:48px;padding:0 10px;font-size:14px}}
.lib{margin-top:4px}
/* artists card: a working mini Library, built like the real Library page (library-dark): Purchased / Saved / History tabs,
   rows with cover + play, title, license tag · producer · date, and the same Download menu (files for that license,
   License agreement, Upgrade license, View order). It responds to its own width like the real page does to the screen:
   wide box = Upgrade · Download · View order; narrower = Download with everything in its menu; narrowest = round icon. */
.lwin{container-type:inline-size;border:1px solid var(--line);border-radius:16px;background:var(--bg)}
.lw-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px 0;border-bottom:1px solid var(--line)}
.lw-top b{font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;padding-bottom:8px}
.lw-tabs{display:flex;gap:2px}
.lw-tabs button{position:relative;border:0;background:none;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;height:34px;padding:0 9px;cursor:pointer;white-space:nowrap}
.lw-tabs button[aria-selected=true]{color:var(--ink)}
.lw-tabs button[aria-selected=true]::after{content:"";position:absolute;left:9px;right:9px;bottom:-1px;height:2px;border-radius:2px;background:var(--ink)}
.lw-tabs button small{font-size:11px;color:var(--muted);font-weight:500;margin-left:3px}
.lw-rows{display:grid;padding:2px 0 6px;min-height:248px;align-content:start}
.lw-row{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 10px}
.lw-row+.lw-row{border-top:1px solid var(--line)}
.lw-row:hover,.lw-row.is-playing{background:var(--surface-2)}
.lw-row .th{width:40px;height:40px;border-radius:8px;display:grid;place-items:center}
.lw-row .th::before,.lw-row .th::after{display:none}
.lw-row .th .play{width:28px;height:28px;position:relative;z-index:2}
.lw-row .th .play svg.i{width:12px;height:12px}
.lw-row h4{font-size:13.5px;font-weight:600;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw-row h4 a{text-decoration:none}
.lw-row .l2{font-size:12px;line-height:20px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw-row .l2 a{color:inherit;text-decoration:none}.lw-row .l2 a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.lw-row .lic{display:inline-flex;align-items:center;height:20px;padding:0 7px;margin-right:5px;border-radius:99px;border:1px solid var(--line-strong);font-size:11px;font-weight:600;color:var(--ink);vertical-align:1px}
.lw-acts .upg{border:0;background:none;color:var(--muted);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0 4px;white-space:nowrap}
.lw-acts .upg:hover{color:var(--ink)}
.lw-acts{display:flex;align-items:center;gap:6px}
.lw-acts .upg{font-size:12.5px;min-height:32px}
.lw-acts .btn-sm{min-height:32px;height:32px;padding:0 12px;font-size:12.5px;gap:6px}
.lw-acts .btn-sm svg.i{width:14px;height:14px}
.lw-acts .dl{position:relative}
.lw-acts .heart{width:32px;height:32px;border-radius:50%;border:0;background:none;color:var(--brand);display:grid;place-items:center;cursor:pointer}
.lw-acts .heart[aria-pressed=false]{color:var(--muted)}
.lw-acts .heart svg{width:16px;height:16px}
.lw-acts .when{font-size:12px;color:var(--muted);white-space:nowrap}
.lw-acts .pbtn{transform:scale(.9);transform-origin:right center}
/* Download menu: same look as the Library's */
.lw-menu{position:absolute;z-index:6;right:0;top:calc(100% + 6px);width:224px;background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;padding:5px;box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}
.lw-menu[hidden]{display:none}
.lw-menu button,.lw-menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:34px;padding:0 9px;border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;font-size:12.5px;text-align:left;text-decoration:none;cursor:pointer}
.lw-menu button:hover,.lw-menu a:hover,.lw-menu button:focus-visible,.lw-menu a:focus-visible{background:var(--surface-3);outline:0}
.lw-menu small{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
.lw-menu .msep{height:1px;background:var(--line);margin:4px 0}
.lw-menu .m-only{display:none}
.lw-foot{display:flex;justify-content:center;padding:8px 0 10px;border-top:1px solid var(--line)}
.lw-foot a{font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:32px}
.lw-foot a:hover{color:var(--ink)}
.lw-foot svg.i{width:14px;height:14px}
/* narrower box: Upgrade and View order move into the Download menu (like the Library on phones) */
@container (max-width:619px){
  .lw-acts .upg,.lw-acts .vo{display:none}
  .lw-menu .m-only{display:flex}
  .lw-menu .msep.m-only{display:block}
}
/* narrowest: Download becomes a round icon; the History time hides */
@container (max-width:380px){
  .lw-acts .dl .btn-sm{width:32px;padding:0;justify-content:center}
  .lw-acts .dl .dlt{display:none}
  .lw-acts .when{display:none}
  .lw-tabs button{padding:0 7px}
  .lw-tabs button small{display:none}
  .lw-menu{width:min(224px,calc(100cqw - 20px))}
}
/* tiny phones: the tabs need the whole bar */
@container (max-width:330px){.lw-top b{display:none}.lw-top{justify-content:flex-start;padding-left:4px}}
.viz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.viz figure{margin:0;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}
.viz figcaption{font-size:12.5px;color:var(--muted);margin-top:8px}
/* storefront being branded: a little store screen that cycles through 4 sample producers' real store themes
   (name, background, text, button color, font and their own beat covers), all changing together, so it reads as
   "one store, styled 4 ways" instead of loose color swatches. Themes live in STORE_THEMES in the script. */
.ms-screen{--st-bg:#17110a;--st-ink:#fbeecb;--st-btn:#f0c869;--st-btnink:#17110a;border-radius:10px;padding:9px 10px 11px;background:var(--st-bg);color:var(--st-ink);transition:background-color .5s,color .5s}
.ms-bar{display:flex;gap:5px;align-items:center;margin-bottom:10px}
.ms-bar i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.35}
.ms-bar span{margin-left:6px;height:8px;width:46%;border-radius:4px;background:currentColor;opacity:.15}
.ms-body{display:grid;gap:8px;transition:opacity .25s}
.ms-body.swap{opacity:0}
.ms-body b{font-size:15px;letter-spacing:-.03em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-covers{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ms-covers .art{border-radius:7px}
.ms-btn{justify-self:start;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:6px 12px;border-radius:99px;font-size:12px;font-weight:700;background:var(--st-btn);color:var(--st-btnink);transition:background-color .5s,color .5s}
.ms-who{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
/* email journey (thank-you -> follow-up) */
.mm-row{display:grid;gap:8px;position:relative}
.mm{padding:9px 10px;border:1px solid #3a3a3a;border-radius:10px;background:var(--surface);animation:hi 8s steps(1) infinite}
.mm:nth-child(2){animation-delay:-4s}
.mm b{display:block;font-size:13.5px}
.mm small{font-size:12px;color:var(--muted)}
.mm-arrow{display:flex;justify-content:center;color:var(--muted);margin:-2px 0}
.mm-arrow svg.i{transform:rotate(90deg);width:16px;height:16px}
@keyframes hi{0%{border-color:#f4f4f2}50%{border-color:#3a3a3a}}

/* featured producers strip */
.fp-ctl{display:flex;align-items:center;gap:var(--gap)}
.fp-arw{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.fp-arw:hover{border-color:var(--ink)}
.fp-arw svg.i{width:17px;height:17px}
/* a real scroller: it glides on its own, and the moment someone touches, swipes or scrolls it, it stops and they're in control */
.fp-view{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;padding:4px 0}
.fp-view::-webkit-scrollbar{display:none}
.fp-track{display:flex;gap:18px;width:max-content}
.fp{display:grid;gap:9px;width:124px;text-decoration:none;color:var(--ink);flex:none}
.fp .pic{width:100%;aspect-ratio:1;border-radius:18px;background:var(--av);color:var(--avi);display:grid;place-items:center;font-weight:700;font-size:34px;letter-spacing:-.03em}
.fp b{font-size:14px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp:hover .pic{outline:2px solid var(--line-strong);outline-offset:3px}
.fp:focus-visible{outline:none}.fp:focus-visible .pic{outline:2px solid #fff;outline-offset:3px}
@media(max-width:560px){.fp{width:96px}.fp .pic{font-size:28px;border-radius:16px}.fp-track{gap:14px}.fp-arw{display:none}}   /* phones swipe */
@media(max-width:960px){.cards2{grid-template-columns:minmax(0,1fr)}}   /* minmax(0,…): a long line can't push the card past the screen */
@media(max-width:560px){.viz{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.jcard{padding:18px}.pl-head{display:block}.pl-head .more{display:none}}
@media(max-width:560px){.hero-c .hs-bar select{flex:1 1 28%;min-width:0}.hero-c .hs-bar input{flex:1;min-width:60%}}
/* phones: the three filter buttons show their whole word (Genre / Mood / BPM) and the placeholder fits on one line */
@media(max-width:560px){.hero-c .hs-bar .bbsel{flex:1 1 28%;min-width:0}.hero-c .hs-bar .bbsel-btn{width:100%;padding:0 8px 0 12px;gap:2px}.hero-c .hs-bar .bbsel-btn .chev{width:14px;height:14px}.hero-c .hs-bar .bbsel-btn>span{overflow:visible;text-overflow:clip}}
@media(prefers-reduced-motion:reduce){.ms-screen,.ms-btn,.ms-body{transition:none}.mm{animation:none}}