/* Rattle Can Collective - shared styles for index.html and beats.html
   Layout: a black wall under aerosol overspray. The NILS block is a white sticker (like the
   logo's center) holding a live recreation of the plugin's EQ page; the beat store is a
   searchable list with pad-style play buttons; a cart drawer slides in from the right;
   DamonDaze's Spotify player sits at the top of every page. */
:root{
  --black:#000000;
  --grey-900:#141414;
  --grey-800:#1e1e1e;
  --grey-700:#2c2c2c;
  --grey-600:#3b3b3b;
  --grey-500:#a9a49e;
  --grey-300:#d8d4ce;
  --white:#ffffff;
  --paper:#f3f1ee;
  --red:#8e0f19;
  --red-hot:#c4141d;
  --red-glow:rgba(196,20,29,.55);
  --font-display:'Anton',Impact,'Arial Narrow Bold','Franklin Gothic Medium',sans-serif;
  --font-body:'Barlow','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-cond:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --font-clean:'Outfit','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --gutter-l:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --topbar-h:64px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--topbar-h) + 8px)}
body{margin:0;position:relative;background:var(--black);color:var(--paper);font-family:var(--font-body);font-size:17px;line-height:1.6;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--black);z-index:70}
body.drawer-open,body.lightbox-open{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:400;line-height:1;text-wrap:balance;letter-spacing:.01em}
h2{font-size:clamp(36px,5vw,56px)}
h3{font-size:26px}
p{margin:0}
:focus-visible{outline:3px solid var(--red-hot);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--red);color:#fff;padding:10px 14px;z-index:100;border-radius:4px}
.skip:focus{left:12px}
.splat-page{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
main,.site-footer,.player{position:relative;z-index:1}

.wrap{max-width:1180px;margin-inline:auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
@media (min-width:720px){:root{--gutter-l:max(32px,env(safe-area-inset-left,0px));--gutter-r:max(32px,env(safe-area-inset-right,0px))}}

section{padding-block:clamp(56px,9vw,120px)}
.section-head{display:grid;gap:14px;max-width:62ch;margin-bottom:clamp(28px,4vw,44px)}
.section-head h2::after{content:"";display:block;width:54px;height:6px;margin-top:14px;background:var(--red-hot);border-radius:3px 2px 3px 1px;transform:rotate(-1.5deg)}
.section-head .btn-row{margin-top:4px}
.lede{font-size:19px;color:#e6e2dc}
.muted{color:var(--grey-300)}
/* text that sits straight on the sprayed wall gets a soft dark halo so it reads over the mist */
.hero-copy,.section-head,.about,.foot,.store-count,.contact .lede{text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.75)}
.fine{font-size:13.5px;line-height:1.5}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font:600 16px/1 var(--font-body);padding:14px 22px;border-radius:4px;text-decoration:none;border:2px solid transparent;cursor:pointer;background:transparent;transition:background-color .15s,border-color .15s,transform .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red);color:#fff;border-color:var(--red)}
.btn-red:hover{background:var(--red-hot);border-color:var(--red-hot)}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{border-color:#fff}
.btn-dark{background:#000;color:#fff;border-color:#000}
.btn-dark:hover{background:#2c2c2c;border-color:#2c2c2c}
/* outlined black, for a second button on the light NILS card ("Add to cart") */
.btn-line-dark{border-color:#1a1a1a;color:#1a1a1a}
.btn-line-dark:hover{background:#1a1a1a;color:#fff}
.btn-line-dark.in-cart{background:#1a1a1a;color:#fff}
.btn-lg{padding:18px 28px;font-size:18px}
.btn-sm{padding:9px 14px;font-size:14px}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn svg{width:16px;height:16px;fill:currentColor}

/* Sticker tag (clean, modern face) */
.tag-marker{position:absolute;top:18px;left:18px;z-index:2;font:600 13px/1 var(--font-clean);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--red);padding:9px 14px;border-radius:3px;transform:rotate(-2deg);box-shadow:0 3px 10px rgba(0,0,0,.35)}

/* Top bar */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:rgba(0,0,0,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--grey-800)}
.topbar-inner{display:flex;align-items:center;gap:14px;min-height:var(--topbar-h)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand img:first-child{width:40px;height:40px}
.brand .wordmark{height:22px;width:auto}
.nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav a{text-decoration:none;font-weight:600;font-size:15px;color:var(--grey-300);padding:10px 12px;border-radius:4px}
.nav a:hover{color:#fff;background:var(--grey-900)}
.nav a.nav-beats{border:2px solid var(--grey-700);padding:8px 12px;color:#fff}
.nav a.nav-beats:hover{border-color:var(--red-hot);background:transparent}
.listen{display:inline-flex;align-items:center;gap:9px;font:600 14px/1 var(--font-body);padding:10px 14px;border:2px solid var(--grey-700);border-radius:4px;background:transparent;cursor:pointer;color:#fff}
.listen:hover{border-color:var(--red-hot)}
.led{width:9px;height:9px;border-radius:50%;background:var(--grey-600);flex:0 0 auto;transition:background-color .2s}
.led.on{background:var(--red-hot);box-shadow:0 0 8px var(--red-glow);animation:ledpulse 1.1s ease-in-out infinite alternate}
@keyframes ledpulse{from{opacity:1}to{opacity:.35}}
.cartbtn{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--font-body);padding:10px 14px;border:2px solid var(--red);border-radius:4px;background:var(--red);cursor:pointer;color:#fff}
.cartbtn:hover{background:var(--red-hot);border-color:var(--red-hot)}
.cartbtn svg{width:16px;height:16px;fill:currentColor}
.cartbtn .count{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#fff;color:#000;font-size:12px;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.cartbtn .count[hidden]{display:none}
.menu-btn{display:none;font:600 15px/1 var(--font-body);padding:10px 14px;border:2px solid var(--grey-700);border-radius:4px;background:transparent;cursor:pointer}
@media (max-width:1160px){
  .menu-btn{display:inline-flex}
  .topbar-inner .cartbtn{margin-left:auto}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:#000;border-bottom:1px solid var(--grey-800);padding:8px var(--gutter-l) 12px var(--gutter-l);margin-left:0}
  .nav.open{display:flex}
  .nav a{padding:14px 8px;font-size:17px;border-bottom:1px solid var(--grey-900)}
  .nav a.nav-beats{border:0;border-bottom:1px solid var(--grey-900)}
  .listen{margin-top:10px;justify-content:center;padding:14px}
}

/* RCC Radio, directly under the header: a native player with the song list */
.player{padding-block:0;background:#0b0b0b;border-bottom:1px solid var(--grey-800)}
.player .wrap{padding-block:12px 14px}
.radio{display:grid;grid-template-columns:96px minmax(0,1fr) 300px;gap:16px 20px;align-items:center;background:#121212;border:1px solid #262626;border-radius:12px;padding:14px 16px}
@media (max-width:900px){.radio{grid-template-columns:64px minmax(0,1fr)}.r-list{grid-column:1/-1}}
.r-art{width:96px;height:96px;border-radius:8px;background:#000;object-fit:cover}
@media (max-width:900px){.r-art{width:64px;height:64px}}
.r-main{min-width:0;display:grid;gap:6px}
.r-eyebrow{display:flex;align-items:center;gap:8px;font:600 12px/1 var(--font-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--grey-500)}
.r-state{color:var(--red-hot)}
.r-title{font:600 20px/1.2 var(--font-body);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-seek{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--font-cond);color:var(--grey-500);font-variant-numeric:tabular-nums}
.r-seek input{flex:1;min-width:0;accent-color:var(--red-hot);height:4px;cursor:pointer}
.r-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.r-btn{width:36px;height:36px;border-radius:50%;border:1px solid #3a3a3a;background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer}
.r-btn:hover{border-color:var(--red-hot)}
.r-btn svg{width:16px;height:16px;fill:currentColor}
.r-btn .ico-muted{display:none}
.r-btn.muted .ico-vol{display:none}
.r-btn.muted .ico-muted{display:block}
.r-play{width:48px;height:48px;border-radius:50%;border:0;background:var(--red);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .15s}
.r-play:hover{background:var(--red-hot)}
.r-play svg{width:20px;height:20px;fill:#fff}
.r-play .ico-pause{display:none}
.player.playing .r-play .ico-play{display:none}
.player.playing .r-play .ico-pause{display:block}
.r-links{margin-left:auto;display:flex;gap:8px}
@media (max-width:560px){.r-links{flex-basis:100%;margin-left:0;flex-wrap:wrap}.r-links .btn{flex:1 1 auto}}
@media (max-width:480px){.radio,.player.collapsed .radio{grid-template-columns:minmax(0,1fr);padding:12px}.r-art{display:none}.r-eyebrow{display:block;line-height:1.4}.r-eyebrow .led{display:inline-block;vertical-align:-1px;margin-right:7px}.r-state{margin-left:6px}}
@media (max-width:400px){.brand .wordmark{display:none}.topbar-inner{gap:10px}.cartbtn,.menu-btn{padding:9px 11px}.r-links .btn{font-size:13px;padding-inline:10px}}
.r-note{font-size:13px;color:var(--grey-500);line-height:1.4}
.r-note:empty{display:none}
.r-list{list-style:none;margin:0;padding:0;max-height:150px;overflow-y:auto;border-left:1px solid #262626;padding-left:14px;display:grid;gap:2px;align-content:start}
@media (max-width:900px){.r-list{border-left:0;padding-left:0;border-top:1px solid #262626;padding-top:10px;max-height:132px}}
.r-list button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;border-radius:4px;padding:6px 8px;color:var(--grey-300);font:500 14px/1.25 var(--font-body);cursor:pointer;min-width:0}
.r-list button:hover{background:#1c1c1c;color:#fff}
.r-list button.now{color:#fff;background:#1c1c1c}
.r-list .r-n{flex:0 0 18px;font:600 12px/1 var(--font-cond);color:var(--grey-500);text-align:right}
.r-list button.now .r-n::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red-hot);box-shadow:0 0 8px var(--red-glow)}
.r-list .r-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-list .r-a{margin-left:auto;font-size:12px;color:var(--grey-500);white-space:nowrap}
.player.collapsed .r-list{display:none}
.player.collapsed .radio{grid-template-columns:96px minmax(0,1fr)}
@media (max-width:900px){.player.collapsed .radio{grid-template-columns:64px minmax(0,1fr)}}
.now-pill{position:fixed;right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));z-index:64;display:inline-flex;align-items:center;gap:10px;font:600 14px/1 var(--font-body);padding:10px 12px 10px 14px;border:1px solid #3a3a3a;border-radius:999px;background:#121212;color:#fff;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.6);max-width:calc(100vw - 24px)}
.now-pill[hidden]{display:none}
.now-pill:hover{border-color:var(--red-hot)}
.now-pill .pill-btn{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--red)}
.now-pill .pill-btn svg{width:12px;height:12px;fill:#fff}
.now-pill .ico-pause{display:none}
.now-pill.playing .ico-pause{display:block}
.now-pill.playing .ico-play{display:none}

/* Hero */
.hero{position:relative;overflow:hidden;padding-block:clamp(40px,7vw,84px) clamp(56px,8vw,110px)}
.hero::after{content:"";position:absolute;right:-8%;top:50%;width:min(62vw,680px);aspect-ratio:1;transform:translateY(-50%);background:url(rcc-logo-grey.png) center/contain no-repeat;opacity:.1;pointer-events:none;-webkit-mask-image:radial-gradient(circle at center,#000 45%,transparent 72%);mask-image:radial-gradient(circle at center,#000 45%,transparent 72%)}
.hero-inner{position:relative;z-index:1;display:grid;gap:26px;justify-items:center;text-align:center}
.mark-stack{container-type:inline-size;position:relative;width:min(92vw,900px)}
.mark-inner{--emb:clamp(28px,7.4cqw,76px);position:relative;padding-top:calc(var(--emb) * .58);display:grid;justify-items:center}
.embrace{position:absolute;left:50%;top:0;transform:translateX(-50%);font:400 var(--emb)/1 var(--font-display);letter-spacing:.07em;text-transform:uppercase;color:#000;-webkit-text-stroke:calc(var(--emb) * .022) #fff;paint-order:stroke fill;white-space:nowrap;z-index:0}
.embrace::after{content:attr(data-text);position:absolute;left:0;top:0;transform:translate(0,.16em);color:#9a9793;-webkit-text-stroke-width:0;filter:blur(calc(var(--emb) * .14));opacity:.6;z-index:-1}
.hero-mark{position:relative;z-index:1;width:100%;filter:drop-shadow(0 14px 18px rgba(0,0,0,.75))}
.hero-copy{display:grid;gap:14px;max-width:66ch;margin-top:6px}
.hero-lede{font-size:clamp(17px,2.1vw,21px);color:var(--paper)}
.hero-pitch{font-size:clamp(16px,1.9vw,19px);color:var(--paper);text-wrap:pretty}
.hero-pitch strong{font-weight:700;color:#fff}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* NILS sticker panel */
.nils{padding-top:0}
.sticker{position:relative;background:var(--white);color:#000;border-radius:16px;padding:clamp(28px,5vw,60px);overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.sticker .spray{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.nils-grid{position:relative;z-index:1;display:grid;gap:40px;align-items:center}
@media (min-width:960px){.nils-grid{grid-template-columns:1.05fr .95fr;gap:52px}}
.nils-name{font-size:clamp(84px,14vw,150px);line-height:.88;letter-spacing:.02em;margin-top:44px}
.nils-tagline{font:500 21px/1.3 var(--font-clean);letter-spacing:.01em;color:var(--red);margin-top:10px}
.nils-copy p.body{margin-top:22px;max-width:56ch;font-size:17.5px;line-height:1.6;color:#1a1a1a}
.spec{margin:26px 0 0;display:grid;gap:0;border-top:1px solid rgba(0,0,0,.14)}
.spec > div{display:grid;grid-template-columns:118px 1fr;gap:16px;padding:11px 0;border-bottom:1px solid rgba(0,0,0,.14)}
.spec dt{font:600 15px/1.4 var(--font-cond);color:#454240;margin:0;padding-top:1px}
.spec dd{margin:0;font-size:16px;line-height:1.45}
.buy-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 22px;margin-top:30px}
.price{display:grid;line-height:1}
.buy-btns{display:flex;flex-wrap:wrap;gap:10px}
.price-num{font:56px/1 var(--font-display);letter-spacing:.01em}
.price-note{font-size:13.5px;color:#454240;margin-top:4px}
.nils-copy .fine{margin-top:18px;color:#454240;max-width:56ch}

/* The NILS EQ page, recreated: dark window chrome, live analyzer, 8 bands */
.nils-shot{container-type:inline-size;min-width:0}
.nui{background:#14171c;border:1px solid #2a2f36;border-radius:8px;box-shadow:0 28px 60px rgba(0,0,0,.5);color:#9a9fa6;font-family:var(--font-cond);overflow:hidden;user-select:none}
.nui-head{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#1a1e23;border-bottom:1px solid #0f1116;overflow:hidden}
.nui-logo{font:600 17px/1 var(--font-body);color:#dbb476;border:1px solid #ae9161;border-radius:4px;padding:5px 9px;letter-spacing:.06em;background:#20242a}
.nui-tag{font:500 9.5px/1 var(--font-cond);letter-spacing:.08em;color:#9a9fa6;white-space:nowrap}
.nui-tabs{display:flex;gap:2px;margin-left:auto}
.nui-tabs span{font:500 11px/1 var(--font-cond);letter-spacing:.06em;color:#a3a8af;padding:6px 7px;border-radius:4px}
.nui-tabs span.on{background:#564f45;color:#e4e6ea}
.nui-pill{display:inline-flex;align-items:center;gap:5px;font:500 10px/1 var(--font-cond);letter-spacing:.05em;color:#d7d9dd;background:#2c3938;border:1px solid #425d52;border-radius:999px;padding:5px 8px;white-space:nowrap}
.nui-pill i{width:6px;height:6px;border-radius:50%;background:#82c69e;box-shadow:0 0 5px #82c69e}
.nui-graph{position:relative;margin:8px;border:1px solid #2a2f36;border-radius:4px;background:#16191e;overflow:hidden}
.nui-graph canvas{display:block;width:100%;height:auto}
.nui-bands{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;margin:0 8px 8px;padding:6px;background:#1e2227;border:1px solid #2a2f36;border-radius:4px}
.nui-band{display:grid;gap:3px;min-width:0}
.nui-band .bh{display:flex;align-items:center;gap:4px;font:600 9px/1.2 var(--font-cond);letter-spacing:.05em;color:#e4e6ea;white-space:nowrap;overflow:hidden}
.nui-band .bh i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.nui-band .bh small{color:#9a9fa6;font-weight:500;margin-left:auto;font-size:8px}
.nui-band .bn{font:600 8.5px/1.1 var(--font-cond);letter-spacing:.04em;color:#e4e6ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nui-band .f{font:500 8.5px/1 var(--font-cond);color:#d7d9dd;background:#0f1116;border-radius:3px;padding:4px 2px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nui-band .dyn{font:500 8.5px/1 var(--font-cond);color:#e4e6ea;border-radius:3px;padding:4px 2px;text-align:center;white-space:nowrap;overflow:hidden}
.nui-band .static{font:500 8.5px/1 var(--font-cond);color:#9a9fa6;padding:4px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nui-foot{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;border-top:1px solid #0f1116;font:500 9.5px/1 var(--font-cond);letter-spacing:.03em;color:#8a8f96;white-space:nowrap;overflow:hidden}
.nui-foot span:first-child{overflow:hidden;text-overflow:ellipsis}
@container (max-width:700px){.nui-tag{display:none}}
@container (max-width:460px){.nui-tabs .hs,.nui-pill.hs{display:none}}
@container (max-width:380px){.nui-head .nui-pill + .nui-pill{display:none}.nui-tabs span:not(.on){display:none}}
@container (max-width:360px){.nui-tabs span{padding:6px 5px;font-size:10px}.nui-band .bh small{display:none}.nui-band .f,.nui-band .dyn,.nui-band .static{font-size:8px}}

/* NILS at work: three more live pages in miniature */
.live{position:relative;z-index:1;margin-top:clamp(28px,4vw,44px);padding-top:clamp(22px,3vw,30px);border-top:1px solid rgba(0,0,0,.14)}
.live-grid{display:grid;gap:14px}
@media (min-width:900px){.live-grid{grid-template-columns:repeat(3,1fr)}}
.live-grid > .nui{container-type:inline-size;min-width:0}
.nui.mini .nui-head{padding:6px 8px;gap:8px}
.nui.mini .nui-logo{font-size:13px;padding:4px 7px}
.nui.mini .nui-tabs span{font-size:9.5px;padding:5px 5px}
.nui.mini .nui-pill{font-size:9px;padding:4px 7px}
.nui-canvas{margin:6px;border:1px solid #2a2f36;border-radius:4px;background:#16191e;overflow:hidden}
.nui-canvas canvas{display:block;width:100%;height:auto}
.nui.mini .nui-foot{font-size:9.5px;white-space:normal;line-height:1.35;color:#9a9fa6}
.nui-pill.amber{background:#3a3326;border-color:#6b5a3a}
.nui-pill.amber i{background:#dbb476;box-shadow:0 0 5px #dbb476}
.nui-pill.blink i{animation:ledpulse .8s ease-in-out infinite alternate}

/* Screenshot gallery */
.gallery{position:relative;z-index:1;margin-top:clamp(28px,4vw,44px);padding-top:clamp(22px,3vw,30px);border-top:1px solid rgba(0,0,0,.14)}
.gallery-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:14px}
.gallery-head h3{font-size:28px}
.gallery-head p{font-size:14.5px;color:#454240}
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;list-style:none;margin:0;padding:0}
@media (min-width:720px){.shots{grid-template-columns:repeat(3,1fr)}}
.shot{display:grid;gap:7px;background:transparent;border:0;padding:0;cursor:pointer;text-align:left;min-width:0;width:100%}
.shot img{width:100%;border-radius:6px;border:1px solid rgba(0,0,0,.25);box-shadow:0 8px 20px rgba(0,0,0,.25);transition:transform .15s}
.shot:hover img{transform:translateY(-2px)}
.shot span{font:600 13px/1.35 var(--font-body);color:#1a1a1a}
.lightbox{position:fixed;inset:0;z-index:96;background:rgba(0,0,0,.94);display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:max(16px,env(safe-area-inset-top,0px)) var(--gutter-r) max(16px,env(safe-area-inset-bottom,0px)) var(--gutter-l)}
.lightbox.open{display:flex}
.lightbox img{max-width:min(96vw,1600px);max-height:74vh;width:auto;height:auto;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.8)}
.lightbox figcaption{color:var(--grey-300);font-size:15px;text-align:center;max-width:70ch}
.lb-ctl{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.lb-ctl[hidden]{display:none}
.lb-close{position:absolute;top:max(14px,env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px))}

/* Banners */
.has-banner{padding-top:0}
.banner{position:relative;background:#000}
.banner img{width:100%;max-height:560px;object-fit:cover;object-position:center}
.banner-collective,.banner-contact{width:min(calc(100% - var(--gutter-l) - var(--gutter-r)),calc(1180px - var(--gutter-l) - var(--gutter-r)));margin-inline:auto;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.banner-collective img{max-height:380px}
.banner-contact img{max-height:460px;object-position:center 42%}
.banner-short img{max-height:300px;object-position:center 36%}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,0) 60%,#000 100%)}
.banner + .wrap{margin-top:clamp(28px,4vw,48px)}

/* Beat store */
.legend{display:grid;gap:12px;margin-bottom:26px}
@media (min-width:640px){.legend{grid-template-columns:1fr 1fr}}
.legend div{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:start;padding:14px 16px;background:var(--grey-900);border:1px solid var(--grey-800);border-radius:8px}
.legend .lic-price{font:30px/1 var(--font-display);color:#fff;grid-row:span 2}
.legend strong{font-size:16px;color:#fff}
.legend span{font-size:14px;color:var(--grey-300);line-height:1.4}
.store-tools{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-bottom:16px}
.search{flex:1 1 240px;max-width:360px;background:var(--grey-900);border:1px solid var(--grey-700);color:#fff;padding:11px 14px;border-radius:4px;font:500 15px/1.2 var(--font-body)}
.search::placeholder{color:var(--grey-500)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:600 13.5px/1 var(--font-body);padding:9px 12px;border:1px solid var(--grey-700);border-radius:4px;background:#000;cursor:pointer;color:var(--grey-300)}
.chip:hover{border-color:var(--grey-500);color:#fff}
.chip[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.store-count{font:600 14px/1 var(--font-cond);letter-spacing:.03em;color:var(--grey-500);margin-left:auto}
.beat-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.store-more{display:flex;justify-content:center;margin-top:18px}.store-more:empty{display:none}.store-more .dim{opacity:.6;font-weight:500;margin-left:4px}
.beat{position:relative;display:grid;grid-template-columns:auto 1fr;gap:12px 16px;align-items:center;padding:14px 16px;background:var(--grey-900);border:1px solid var(--grey-800);border-radius:8px;overflow:hidden;transition:border-color .15s,background-color .15s}
.beat:hover{background:var(--grey-800);border-color:var(--grey-700)}
.beat.playing{border-color:var(--red-hot);box-shadow:0 0 0 1px var(--red-hot),0 0 26px var(--red-glow)}
.beat.in-cart{border-color:#5a2a2e}
.beat.sold{opacity:.55}
@media (min-width:900px){.beat{grid-template-columns:auto 1fr auto auto}}
.play{flex:0 0 auto;width:48px;height:48px;border-radius:8px;border:1px solid #4a4a4a;background:linear-gradient(180deg,#3a3a3a,#262626);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 10px rgba(0,0,0,.5);transition:background-color .15s,transform .12s}
.play:hover{border-color:#6a6a6a}
.play svg{width:18px;height:18px;fill:#fff}
.play .ico-pause{display:none}
.beat.playing .play{background:var(--red);border-color:var(--red-hot);box-shadow:0 0 16px var(--red-glow)}
.beat.playing .play .ico-play{display:none}
.beat.playing .play .ico-pause{display:block}
.beat-info{min-width:0;display:grid;gap:3px}
.beat-title{font-size:24px;color:#fff;line-height:1.05;text-wrap:pretty}
.beat-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font:600 13.5px/1.3 var(--font-cond);letter-spacing:.03em;color:var(--grey-300)}
.beat-meta .cat{color:#fff}
.beat-tags{font-size:13.5px;color:var(--grey-500);line-height:1.35}
.lic{display:inline-flex;border:1px solid var(--grey-700);border-radius:4px;overflow:hidden}
.lic button{font:600 13.5px/1 var(--font-body);padding:10px 12px;border:0;background:transparent;color:var(--grey-300);cursor:pointer;white-space:nowrap}
.lic button + button{border-left:1px solid var(--grey-700)}
.lic button[aria-pressed="true"]{background:var(--red);color:#fff}
.lic button:hover{color:#fff}
.add{min-width:118px}
.add.in-cart{background:transparent;border-color:var(--grey-500);color:#fff}
.add.in-cart:hover{border-color:#fff}
.beat-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;grid-column:1/-1}
@media (min-width:900px){.beat-actions{display:contents}}
.progress{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--red-hot);transition:width .25s linear}
.beat.playing .progress{box-shadow:0 0 8px var(--red-glow)}
.sold-tag{font:600 13px/1 var(--font-cond);letter-spacing:.05em;color:var(--grey-300);padding:8px 10px;border:1px solid var(--grey-600);border-radius:4px}
.list-empty{padding:40px 20px;text-align:center;color:var(--grey-500);border:1px dashed var(--grey-700);border-radius:8px}
.list-empty a{color:#fff}

/* Cart drawer */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:85;opacity:0;pointer-events:none;transition:opacity .2s}
.backdrop.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:#121212;border-left:1px solid #2a2a2a;z-index:90;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px);box-shadow:-20px 0 60px rgba(0,0,0,.6)}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid #2a2a2a}
.drawer-head h2{font-size:30px}
.drawer-head .close{margin-left:auto;font:600 14px/1 var(--font-body);padding:9px 12px;border:1px solid #3a3a3a;border-radius:4px;background:transparent;cursor:pointer;color:#fff}
.drawer-body{flex:1;overflow-y:auto;padding:18px;display:grid;gap:18px;align-content:start}
.cart-items{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cart-item{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;padding:12px 14px;background:var(--grey-900);border:1px solid var(--grey-800);border-radius:6px}
.cart-item .ci-title{font:20px/1.05 var(--font-display);color:#fff}
.cart-item .ci-cat{font:600 13px/1 var(--font-cond);letter-spacing:.03em;color:var(--grey-500);margin-top:3px}
.cart-item .ci-price{font:600 16px/1 var(--font-body);color:#fff;font-variant-numeric:tabular-nums;text-align:right}
.cart-item .ci-controls{grid-column:1/-1;display:flex;align-items:center;gap:10px;justify-content:space-between}
.cart-item select{background:#000;color:#fff;border:1px solid var(--grey-700);border-radius:4px;padding:8px 10px;font:600 14px/1 var(--font-body)}
.cart-item .remove{font:600 13.5px/1 var(--font-body);background:transparent;border:0;color:var(--grey-300);cursor:pointer;text-decoration:underline;padding:6px 0}
.cart-item .remove:hover{color:#fff}
.cart-item .ci-note{font:500 13.5px/1.3 var(--font-body);color:var(--grey-300)}
.cart-empty{padding:30px 16px;text-align:center;color:var(--grey-500);border:1px dashed var(--grey-700);border-radius:6px}
.total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:6px;border-top:1px solid #2a2a2a}
.total span:first-child{color:var(--grey-300);font-weight:600}
.total .amt{font:40px/1 var(--font-display);color:#fff;font-variant-numeric:tabular-nums}
.field{display:grid;gap:6px}
.field label{font:600 14px/1.3 var(--font-body);color:var(--grey-300)}
.field input{background:#000;color:#fff;border:1px solid var(--grey-700);border-radius:4px;padding:11px 12px;font:500 16px/1.2 var(--font-body)}
.field input::placeholder{color:var(--grey-500)}
.checkout{display:grid;gap:12px;padding:16px;background:var(--grey-900);border:1px solid var(--grey-800);border-radius:8px}
.checkout h3{font-size:24px;color:#fff}
.checkout p{font-size:14.5px;color:var(--grey-300);line-height:1.5}
.step{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start}
.step .n{width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;font:600 14px/28px var(--font-body);text-align:center}
.step .box{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;background:#000;border:1px solid var(--grey-700);border-radius:4px;padding:10px 12px;font:600 15px/1.35 var(--font-cond);letter-spacing:.02em;color:#fff;word-break:break-word}
.step .box.big{font:36px/1 var(--font-display);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.drawer-foot{padding:14px 18px;border-top:1px solid #2a2a2a;display:grid;gap:10px}
.clear{font:600 13.5px/1 var(--font-body);background:transparent;border:0;color:var(--grey-500);cursor:pointer;text-decoration:underline;padding:6px;justify-self:center}
.clear:hover{color:#fff}

/* Collective */
.collective-grid{display:grid;gap:36px}
@media (min-width:900px){.collective-grid{grid-template-columns:1.2fr .8fr;gap:56px;align-items:start}}
.about{display:grid;gap:16px;max-width:60ch}
.about p{color:#e6e2dc;font-size:17.5px}
.about .muted{font-size:15.5px}
.artist-card{position:relative;background:var(--grey-900);border:1px solid var(--grey-800);border-radius:12px;padding:56px 26px 26px;display:grid;gap:14px}
.artist-card h3{font-size:44px;color:#fff}
.artist-card p{color:var(--grey-300)}

/* Contact */
.contact .wrap{display:grid;gap:18px;max-width:1180px}
.email-box{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:var(--grey-900);border:1px solid var(--grey-800);border-radius:8px;padding:12px 12px 12px 18px;width:fit-content;max-width:100%}
.email-box .addr{font:600 18px/1.2 var(--font-cond);letter-spacing:.02em;color:#fff;user-select:all;word-break:break-all}
.socials{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.socials a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:15px;color:var(--grey-300);padding:10px 16px;border:1px solid var(--grey-700);border-radius:999px;background:#000}
.socials a:hover{color:#fff;border-color:var(--grey-500)}
.socials svg{width:18px;height:18px;fill:currentColor}

/* Footer */
.site-footer{padding-block:40px calc(70px + env(safe-area-inset-bottom,0px));color:var(--grey-300);font-size:14px}
.foot{display:grid;gap:20px;align-items:center}
@media (min-width:700px){.foot{grid-template-columns:auto 1fr auto}}
.foot img{width:72px;height:72px}
.foot-links{display:flex;flex-wrap:wrap;gap:14px}
.foot-links a{text-decoration:none;color:var(--grey-300)}
.foot-links a:hover{color:#fff}
.godaddy{display:inline-flex;align-items:center;gap:8px;color:var(--grey-300)}
.godaddy svg{width:16px;height:16px;fill:currentColor}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(10px);background:#fff;color:#000;font-weight:600;font-size:14px;padding:10px 14px;border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:97;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}
/* long button labels wrap on small phones instead of widening the page */
@media (max-width:480px){.btn-row .btn{white-space:normal;text-align:center;line-height:1.25}}

/* =====================================================================
   v2 (Oct 2026): store navigation, preview bar, sharing, phone polish
   ===================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* search, filters and sort stay in reach while you scroll the beats */
.store-tools{position:sticky;top:calc(var(--topbar-h) + env(safe-area-inset-top,0px));z-index:30;padding:10px 12px;margin:0 -12px 16px;background:rgba(8,8,8,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #1f1f1f;border-radius:10px}
.sort-wrap{display:inline-flex}
.sort{appearance:none;-webkit-appearance:none;background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23d8d4ce' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center/11px 8px;border:1px solid var(--grey-700);color:#fff;font:600 13.5px/1 var(--font-body);padding:9px 30px 9px 11px;border-radius:4px;cursor:pointer}
.sort:hover,.sort:focus{border-color:var(--grey-500)}
.store-count{margin-left:auto}
.linkish{background:none;border:0;padding:0;color:#fff;text-decoration:underline;font:inherit;cursor:pointer}
/* rows: share button, a flash when a shared link opens a beat */
.share{width:38px;height:38px;flex:0 0 auto;border-radius:4px;border:1px solid var(--grey-700);background:transparent;color:var(--grey-300);display:grid;place-items:center;cursor:pointer}
.share svg{width:17px;height:17px;fill:currentColor}
.share:hover{color:#fff;border-color:var(--grey-500)}
@media (min-width:900px){.beat{grid-template-columns:auto 1fr auto auto auto}}
.beat.flash{border-color:var(--red-hot);box-shadow:0 0 0 2px var(--red-hot),0 0 28px var(--red-glow);animation:beatflash 1.3s ease-in-out 2}
@keyframes beatflash{50%{box-shadow:0 0 0 2px var(--red-hot),0 0 6px var(--red-glow)}}
.cartbtn.bump{animation:cartbump .45s ease}
@keyframes cartbump{30%{transform:scale(1.12)}60%{transform:scale(.97)}}
/* phones: one line of actions per beat, chips scroll sideways */
@media (max-width:700px){
  .store-tools{gap:8px 8px;padding:8px 10px;margin:0 -6px 12px}
  .search{flex:1 1 0;max-width:none;min-width:0}
  .chips{order:3;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;padding:8px 11px}
  .store-count{order:4;flex:1 1 100%;margin:0;font-size:12px;text-align:right}
  .beat{padding:12px;gap:10px 12px}
  .beat-actions{flex-wrap:nowrap;gap:8px}
  .beat-actions .add{flex:1 1 auto;min-width:0;padding-inline:10px}
  .beat-title{font-size:22px}
}
.add .as{display:none}
@media (max-width:480px){
  .beat{padding:10px 10px 11px;gap:8px 10px}
  .beat .play{width:44px;height:44px}
  .beat-title{font-size:21px}
  .lic button{padding:9px 8px;font-size:12.5px}
  .beat-actions .add{padding:9px 10px;font-size:13px}
  .beat-actions .add .al{display:none}.beat-actions .add .as{display:inline}
  .beat-actions .share{width:36px;height:36px}
}
@media (max-width:360px){.beat-actions .share{display:none}}
/* the "now previewing" bar */
.pbar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(12,12,12,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid #2c2c2c;box-shadow:0 -12px 34px rgba(0,0,0,.55);padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));transform:translateY(115%);transition:transform .25s ease;visibility:hidden}
.pbar.show{transform:none;visibility:visible}
.pbar-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:auto minmax(150px,240px) minmax(80px,1fr) auto;grid-template-areas:"play info seek acts";align-items:center;gap:10px 18px}
.pbar-play{grid-area:play;width:48px;height:48px;border-radius:50%;border:0;background:var(--red);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 16px var(--red-glow)}
.pbar-play svg{width:18px;height:18px;fill:#fff}
.pbar-play .ico-pause{display:none}.pbar.playing .pbar-play .ico-play{display:none}.pbar.playing .pbar-play .ico-pause{display:block}
.pbar-info{grid-area:info;min-width:0}
.pbar-kick{font:600 11.5px/1 var(--font-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--red-hot)}
.pbar-time{color:var(--grey-500);letter-spacing:.04em;margin-left:6px}
.pbar-title{font:24px/1.1 var(--font-display);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.pbar-meta{font:600 12.5px/1.2 var(--font-cond);letter-spacing:.03em;color:var(--grey-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar-seek{grid-area:seek;width:100%;min-width:0;accent-color:var(--red-hot);height:4px;cursor:pointer}
.pbar-acts{grid-area:acts;display:flex;align-items:center;gap:8px}
.pbar-acts .add{min-width:118px}
.pbar-btn{width:38px;height:38px;border-radius:50%;border:1px solid #3a3a3a;background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;font:400 24px/1 var(--font-body)}
.pbar-btn svg{width:15px;height:15px;fill:currentColor}
.pbar-btn:hover{border-color:var(--red-hot)}
body.has-pbar{padding-bottom:84px}
body.has-pbar .now-pill{display:none}
body.has-pbar .toast{bottom:calc(98px + env(safe-area-inset-bottom,0px))}
@media (max-width:1100px){.pbar-in{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"play info acts" "seek seek seek";gap:8px 14px}}
@media (max-width:700px){
  .pbar{padding-top:8px}
  .pbar-in{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"play info next x" "seek seek seek seek" "acts acts acts acts";gap:6px 10px}
  .pbar-play{width:42px;height:42px}
  .pbar-title{font-size:20px}
  .pbar-acts{display:contents}
  .pbar-acts .lic{grid-area:acts;justify-self:start}
  .pbar-lic{grid-area:acts;display:flex;align-items:center;gap:8px;min-width:0}
  .pbar-acts .add{grid-area:acts;justify-self:end;min-width:0}
  .pbar-acts .share{display:none}
  .pbar-acts [data-pbar="next"]{grid-area:next}
  .pbar-acts .pbar-x{grid-area:x}
  body.has-pbar{padding-bottom:150px}
  body.has-pbar .toast{bottom:calc(160px + env(safe-area-inset-bottom,0px))}
}
/* back to top */
.to-top{position:fixed;right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));z-index:63;width:44px;height:44px;border-radius:50%;border:1px solid #3a3a3a;background:#121212;color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.6);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .2s}
.to-top svg{width:20px;height:20px;fill:currentColor}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:var(--red-hot)}
/* stacks above the radio's corner button, or above the preview bar, whichever is showing */
.now-pill:not([hidden]) ~ .to-top{bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + 60px)}
body.has-pbar .to-top,body.has-pbar .now-pill ~ .to-top{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
@media (max-width:700px){body.has-pbar .to-top,body.has-pbar .now-pill ~ .to-top{bottom:calc(162px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:reduce){.beat.flash,.cartbtn.bump{animation:none}.pbar,.to-top{transition:none}}
/* the NILS video, above the EQ panel */
.promo{margin:0 0 22px}
/* side by side: the video starts level with the NILS heading, at the top of the section */
@media (min-width:960px){.nils-shot{align-self:start;padding-top:44px}}
.promo-frame{position:relative;aspect-ratio:16/9;background:#0b0b0b;border:1px solid #2a2f36;border-radius:8px;overflow:hidden;box-shadow:0 28px 60px rgba(0,0,0,.5)}
.promo video{display:block;width:100%;height:100%;object-fit:contain;background:#0b0b0b}
.promo-play{position:absolute;inset:0;display:grid;place-items:center;width:100%;border:0;padding:0;margin:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.6));color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
.promo-play[hidden]{display:none}
.promo-btn{display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:var(--red);box-shadow:0 0 0 7px rgba(255,255,255,.16),0 0 40px var(--red-glow);transition:transform .2s ease,background .2s ease}
.promo-btn svg{width:32px;height:32px;fill:#fff;margin-left:4px}
.promo-play:hover .promo-btn,.promo-play:focus-visible .promo-btn{transform:scale(1.07);background:var(--red-hot)}
.promo-play:focus-visible{outline:3px solid var(--red-hot);outline-offset:-3px}
.promo-chip{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:9px;max-width:calc(100% - 24px);font:600 13px/1 var(--font-cond);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.74);padding:8px 10px;border-radius:4px}
.promo-len{color:#c9c4bd;letter-spacing:.04em}
@media (max-width:480px){.promo-btn{width:62px;height:62px}.promo-btn svg{width:26px;height:26px}.promo-chip{left:8px;bottom:8px;font-size:12px;padding:7px 8px}}
/* hero: a quiet link that starts the video */
.hero-watch{display:inline-flex;align-items:center;gap:10px;color:#fff;font:600 16px/1.2 var(--font-body);text-decoration:none;padding:8px 2px}
.hero-watch .hw-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--red-hot);flex:0 0 auto;transition:background .2s}
.hero-watch .hw-ico svg{width:14px;height:14px;fill:#fff;margin-left:2px}
.hero-watch:hover .hw-ico,.hero-watch:focus-visible .hw-ico{background:var(--red)}
.hero-watch:hover{text-decoration:underline;text-underline-offset:4px}
@media (prefers-reduced-motion:reduce){.promo-btn,.hero-watch .hw-ico{transition:none}}
/* top picks: a row of featured beats above the list */
.featured{margin:0 0 18px}
.featured[hidden]{display:none}
.feat-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 10px}
.feat-head h3{font-size:28px;color:#fff;text-transform:uppercase}
.feat-head p{margin:0;color:var(--grey-300);font-size:15px}
.feat-row{list-style:none;margin:0;padding:2px 2px 8px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
.feat{position:relative;scroll-snap-align:start;border:1px solid var(--grey-800);border-radius:10px;background:linear-gradient(165deg,#1d1d1d,#0c0c0c);overflow:hidden;transition:border-color .15s,transform .15s}
.feat:hover{border-color:#444;transform:translateY(-2px)}
.feat.playing{border-color:var(--red-hot);box-shadow:0 0 0 1px var(--red-hot),0 0 22px var(--red-glow)}
.feat-play{display:flex;flex-direction:column;align-items:flex-start;gap:7px;width:100%;height:100%;padding:12px 12px 15px;border:0;margin:0;background:none;color:#fff;text-align:left;cursor:pointer;font:inherit}
.feat-play:focus-visible{outline:3px solid var(--red-hot);outline-offset:-3px;border-radius:10px}
.feat-top{display:flex;width:100%;align-items:center;justify-content:space-between;margin-bottom:4px}
.feat-no{font:600 13px/1 var(--font-cond);letter-spacing:.12em;color:var(--red-hot)}
.feat-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--red);box-shadow:0 0 14px var(--red-glow);transition:transform .15s}
.feat-play:hover .feat-ico{transform:scale(1.08)}
.feat-ico svg{width:14px;height:14px;fill:#fff}
.feat-ico .ico-pause{display:none}
.feat.playing .feat-ico .ico-play{display:none}
.feat.playing .feat-ico .ico-pause{display:block}
.feat-title{font:400 22px/1.05 var(--font-display);letter-spacing:.01em;color:#fff;text-wrap:balance}
.feat-meta{font:600 12.5px/1.2 var(--font-cond);letter-spacing:.04em;color:var(--grey-300)}
.feat-meta b{color:#fff;font-weight:600}
.feat-bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--red-hot);transition:width .25s linear}
@media (max-width:700px){.feat-row{grid-auto-columns:146px;margin-right:-6px}.feat-head h3{font-size:24px}.feat-head p{font-size:14px}}

/* NILS before/after, under the EQ panel */
.ab{margin-top:22px;background:#14171c;border:1px solid #2a2f36;border-radius:8px;box-shadow:0 28px 60px rgba(0,0,0,.5);color:#c9ced6;padding:16px 16px 14px}
.ab[hidden]{display:none}
.ab-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:12px}
.ab-kick{font:600 13px/1 var(--font-cond);letter-spacing:.14em;text-transform:uppercase;color:#ff4d57}
.ab-song{font:500 13.5px/1.3 var(--font-body);color:#9a9fa6}
.ab-main{display:flex;align-items:center;gap:14px}
.ab-play{flex:0 0 auto;width:56px;height:56px;border-radius:50%;border:0;background:var(--red);display:grid;place-items:center;cursor:pointer;box-shadow:0 0 18px var(--red-glow);transition:transform .15s,background-color .15s}
.ab-play:hover{background:var(--red-hot);transform:scale(1.05)}
.ab-play svg{width:20px;height:20px;fill:#fff}
.ab-play .ico-pause{display:none}
.ab.playing .ab-play .ico-play,.ab.loading .ab-play .ico-play{display:none}
.ab.playing .ab-play .ico-pause,.ab.loading .ab-play .ico-pause{display:block}
.ab.loading .ab-play{animation:abload 1s ease-in-out infinite}
@keyframes abload{50%{opacity:.55}}
.ab-switch{flex:1;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#0b0d10;border:1px solid #2a2f36;border-radius:999px}
.ab-switch button{border:0;border-radius:999px;padding:12px 8px;font:600 15px/1 var(--font-body);color:#9a9fa6;background:transparent;cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s}
.ab-switch button:hover{color:#fff}
.ab-switch button[aria-pressed="true"]{background:#e9e6e1;color:#000}
.ab-switch button[data-ab="nils"][aria-pressed="true"]{background:var(--red-hot);color:#fff}
.ab.playing:not(.flipped) [data-ab="nils"]{animation:abhint 1.4s ease-in-out infinite}
@keyframes abhint{50%{box-shadow:inset 0 0 0 2px var(--red-hot);color:#fff}}
.ab-seek{display:block;width:100%;margin:14px 0 8px;accent-color:var(--red-hot);cursor:pointer}
.ab-foot{display:flex;gap:12px;align-items:baseline;font:500 12.5px/1.4 var(--font-body);color:#8a9099}
.ab-time{flex:0 0 auto;font:600 13px/1 var(--font-cond);font-variant-numeric:tabular-nums;color:#c9ced6}
@media (max-width:420px){.ab{padding:14px 12px 12px}.ab-main{gap:10px}.ab-play{width:50px;height:50px}.ab-switch button{font-size:14px;padding:11px 6px}}
@media (prefers-reduced-motion:reduce){.ab.playing:not(.flipped) [data-ab="nils"],.ab.loading .ab-play{animation:none}.feat,.feat-ico{transition:none}}

/* footer: icon links to YouTube, Instagram, Spotify */
.foot-socials{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.foot-socials[hidden]{display:none}
.foot-socials a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--grey-700);color:var(--grey-300);background:#000}
.foot-socials a:hover,.foot-socials a:focus-visible{color:#fff;border-color:var(--red-hot)}
.foot-socials svg{width:18px;height:18px;fill:currentColor}
/* Licenses & FAQ */
.legend-more{grid-column:1/-1;justify-self:start;color:#fff;font-weight:600;font-size:15px;text-underline-offset:4px;text-decoration-color:var(--red-hot)}
.legend-more:hover{color:var(--red-hot)}
.licenses .section-head{margin-bottom:clamp(22px,3vw,34px)}
.lic-table{border:1px solid var(--grey-800);border-radius:10px;overflow:hidden;background:rgba(14,14,14,.94)}
.lic-table[hidden]{display:none}
.lic-row{display:grid;grid-template-columns:minmax(150px,.75fr) 1fr 1fr;border-top:1px solid var(--grey-800)}
.lic-row:first-child{border-top:0}
.lic-row > *{padding:13px 18px}
.lic-head{background:#0a0a0a}
.lic-head .lic-cell{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding-block:16px}
.lic-name{font:400 28px/1 var(--font-display);color:#fff;text-transform:uppercase;letter-spacing:.01em}
.lic-cost{font:600 17px/1 var(--font-cond);letter-spacing:.04em;color:var(--red-hot)}
.lic-what{font:600 13.5px/1.35 var(--font-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--grey-300);align-self:start;padding-top:16px}
.lic-cell{color:#f3f1ee;font-size:15.5px;line-height:1.45}
.lic-exclusive{background:linear-gradient(90deg,rgba(196,20,29,.09),rgba(196,20,29,.03))}
.lic-cell .lbl{display:none}
.lic-cell .dash{color:var(--grey-500)}
.lic-note{margin:12px 2px 0;color:var(--grey-300);font-size:14.5px;max-width:70ch}
.lic-note[hidden]{display:none}
@media (max-width:700px){
  .lic-row{grid-template-columns:1fr 1fr}
  .lic-row > *{padding:10px 12px}
  .lic-what{grid-column:1/-1;padding-bottom:2px;padding-top:12px;color:#fff}
  .lic-head .lic-what{display:none}
  .lic-head .lic-cell{padding-block:14px}
  .lic-name{font-size:24px}
  .lic-cell{font-size:14.5px;padding-top:4px}
  .lic-row:not(.lic-head) .lic-cell .lbl{display:block;font:600 11px/1.2 var(--font-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--red-hot);margin-bottom:3px}
}
.faq{margin-top:clamp(30px,4vw,48px);display:grid;gap:10px;max-width:880px}
.faq h3{font-size:clamp(26px,3vw,34px);color:#fff;margin-bottom:6px}
.faq details{background:rgba(20,20,20,.94);border:1px solid var(--grey-800);border-radius:8px;transition:border-color .15s}
.faq details[open]{border-color:#3a3a3a}
.faq summary{list-style:none;cursor:pointer;padding:16px 52px 16px 18px;font:600 17px/1.35 var(--font-body);color:#fff;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font:400 28px/1 var(--font-body);color:var(--red-hot)}
.faq details[open] summary::after{content:"\2013"}
.faq summary:focus-visible{outline:3px solid var(--red-hot);outline-offset:-3px;border-radius:8px}
.faq-a{padding:0 18px 17px;color:#d8d4ce;font-size:16px;line-height:1.6}
.faq-a a,.faq-more a{color:#fff;text-underline-offset:3px;text-decoration-color:var(--red-hot)}
.faq-more{margin:8px 2px 0;color:var(--grey-300);font-size:15px}
.cart-terms{color:#fff;text-underline-offset:3px;text-decoration-color:var(--red-hot);white-space:nowrap}
/* menu labels never wrap; at 1160px and below the menu folds into the Menu button instead */
.nav a,.nav .listen{white-space:nowrap}
/* The Collective: text and the DamonDaze card on the left, the reel player on the right (phones: text, reels, card) */
.collective-grid.has-reels{grid-template-areas:"about" "reels" "artist"}
.collective-grid.has-reels .about{grid-area:about}
.collective-grid.has-reels .artist-card{grid-area:artist}
.collective-grid.has-reels .reels{grid-area:reels}
@media (min-width:900px){.collective-grid.has-reels{grid-template-areas:"about reels" "artist reels"}}
.reels{margin:0;justify-self:center;width:min(100%,360px)}
@media (max-width:700px){.reels{width:min(84%,300px)}}
.reels[hidden]{display:none}
.reels-frame{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#050505;border:1px solid #262626;box-shadow:0 28px 60px rgba(0,0,0,.6)}
.reel-video{display:block;width:100%;height:100%;object-fit:cover;background:#050505;cursor:pointer}
.reel-bar{position:absolute;left:10px;right:10px;top:10px;height:3px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden;pointer-events:none}
.reel-bar i{display:block;height:100%;width:0;background:#fff}
.reel-kick{position:absolute;left:12px;top:22px;font:600 12px/1 var(--font-cond);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);pointer-events:none}
.reel-next{position:absolute;right:10px;top:20px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;cursor:pointer}
.reel-next svg{width:15px;height:15px;fill:currentColor}
.reel-next:hover{background:rgba(0,0,0,.8)}
.reel-sound{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;padding:10px 14px 10px 11px;border-radius:999px;border:0;background:rgba(0,0,0,.66);color:#fff;font:600 14px/1 var(--font-body);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.reel-sound svg{width:20px;height:20px;fill:currentColor}
.reel-sound .ico-on{display:none}
.reels.sound-on .reel-sound{background:var(--red-hot)}
.reels.sound-on .reel-sound .ico-on{display:block}
.reels.sound-on .reel-sound .ico-off{display:none}
.reel-sound:focus-visible,.reel-next:focus-visible,.reel-start:focus-visible{outline:3px solid #fff;outline-offset:2px}
.reel-start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:999px;border:0;background:var(--red);color:#fff;font:600 16px/1 var(--font-body);cursor:pointer;box-shadow:0 0 24px var(--red-glow)}
.reel-start svg{width:14px;height:14px;fill:#fff}
.reel-start[hidden]{display:none}
.reels figcaption{margin-top:10px;font-size:14px;color:var(--grey-300);text-align:center}

/* The Collective: release covers and the Spotify code on the DamonDaze card */
.card-extras{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 22px;margin-top:6px}
.releases{display:grid;gap:10px;flex:1 1 300px;min-width:0}
.releases[hidden]{display:none}
.rel-kick{font:600 12px/1 var(--font-cond);letter-spacing:.16em;text-transform:uppercase;color:var(--grey-500)}
.rel-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:380px}
.rel{display:grid;gap:8px;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:zoom-in;text-decoration:none;font:inherit}
a.rel{cursor:pointer}
.rel img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:6px;border:1px solid var(--grey-700);box-shadow:0 10px 24px rgba(0,0,0,.5);transition:transform .15s,border-color .15s}
.rel:hover img{transform:translateY(-2px);border-color:var(--red-hot)}
.rel span{font:600 14px/1.3 var(--font-body);color:#fff}
.rel:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:6px}
.sp-code{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .sp-code{display:flex;flex-direction:column;align-items:center;gap:8px;width:172px;padding:12px 12px 10px;border:1px solid var(--grey-800);border-radius:10px;background:#0b0b0b;text-decoration:none;flex:none}
  .sp-code img{display:block;width:148px;height:148px;border-radius:4px;background:#fff}
  .sp-code span{font-size:12.5px;line-height:1.35;color:var(--grey-300);text-align:center}
  .sp-code:hover{border-color:var(--grey-600)}
}

/* The Collective: picture wall under the reels, tap for the lightbox */
.pics{margin-top:clamp(48px,7vw,84px)}
.pics[hidden]{display:none}
.pics-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:18px;text-shadow:0 1px 2px rgba(0,0,0,.9)}
.pics-head h3{font-size:clamp(30px,4vw,42px);color:#fff}
.pics-head p{margin:0;color:var(--grey-300);font-size:15px}
.pics-grid{list-style:none;margin:0;padding:0;columns:2;column-gap:10px}
@media (min-width:700px){.pics-grid{columns:3;column-gap:14px}}
.pics-grid li{break-inside:avoid;margin:0 0 10px}
@media (min-width:700px){.pics-grid li{margin-bottom:14px}}
.pic{position:relative;display:block;width:100%;padding:0;border:0;border-radius:8px;overflow:hidden;background:#050505;cursor:zoom-in;box-shadow:0 14px 34px rgba(0,0,0,.55)}
.pic img{display:block;width:100%;height:auto;transition:transform .4s ease}
.pic:hover img{transform:scale(1.035)}
.pic::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.08);border-radius:8px;pointer-events:none;transition:border-color .2s}
.pic:hover::after{border-color:var(--red-hot)}
.pic span{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;font:600 13.5px/1.3 var(--font-body);color:#fff;text-align:left;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.85));opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:none}
.pic:hover span,.pic:focus-visible span{opacity:1;transform:none}
@media (hover:none){.pic span{opacity:1;transform:none;font-size:12.5px;padding:22px 10px 8px}}
.pic:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.pic img,.rel img{transition:none}.pic:hover img{transform:none}}

/* ---- Oct 27 review: layout polish ---- */
/* NILS on one column (phones, tablets): the video sits right under the intro and right above the
   EQ panel, the before/after follows, then the price and buttons, then the spec list */
@media (max-width:959px){
  .nils-grid{display:flex;flex-direction:column;align-items:stretch;gap:0;container-type:inline-size}
  .nils-copy,.nils-shot{display:contents}
  .nils-name{order:1}
  .nils-tagline{order:2}
  .nils-copy p.body{order:3}
  .nils-shot .promo{order:4;margin:28px 0 0}
  .nils-shot .nui{order:5;margin-top:16px}
  .nils-shot .ab{order:6;margin-top:16px}
  .buy-row{order:7}
  .nils-copy .fine{order:8}
  .spec{order:9}
}
/* NILS spec list on phones: label above the text, so the text gets the full width */
@media (max-width:600px){
  .spec > div{grid-template-columns:1fr;gap:2px;padding:10px 0}
  .spec dt{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#6b6763}
}
/* Contact on wide screens: words on the left, the email box and links on the right */
@media (min-width:900px){
  .contact .wrap{grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(40px,6vw,90px);align-items:center}
  .contact .section-head{grid-column:1;grid-row:1/span 2;margin-bottom:0}
  .contact .email-box{grid-column:2;grid-row:1;align-self:end}
  .contact .socials{grid-column:2;grid-row:2;align-self:start;margin-top:0}
}
/* the Collective banner on phones: taller, cropped to the lettering so it can be read */
@media (max-width:600px){.banner-collective img{height:calc((100vw - 32px) * .3);max-height:none;object-fit:cover;object-position:right center}}
/* the radio pill on phones: just the light and the play/pause button, so it covers less of the page */
@media (max-width:600px){
  .now-pill{gap:8px;padding:7px 7px 7px 12px}
  .now-pill > span:not(.led):not(.pill-btn){display:none}
  .now-pill .pill-btn{width:32px;height:32px}
}
@media (max-width:480px){.player .radio,.player.collapsed .radio{grid-template-columns:minmax(0,1fr)}}
/* NILS price on phones: the two buttons share one row under the price */
@media (max-width:600px){.buy-row .price{flex-basis:100%}.buy-row .buy-btns{flex-basis:100%}.buy-row .btn{flex:1 1 140px;justify-content:center;text-align:center}}

/* =====================================================================
   v3 (Oct 27 evening): motion and engagement
   ===================================================================== */
/* the RCC logo between the top of the page and the beat store, about half the page wide */
.rcc-divider{display:flex;justify-content:center;margin:0 auto clamp(30px,5vw,64px)}
.rcc-divider picture{display:block;width:57vw;max-width:1140px}   /* the circle is ~88% of the image, so it shows at about half the page width */
.rcc-divider img{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.7)) drop-shadow(0 0 60px rgba(196,20,29,.18))}
.rcc-divider.rv{opacity:0;transform:none;transition:opacity .9s ease}   /* the logo grows in place; the full-width row itself never scales (that would push the page sideways) */
.rcc-divider.rv picture{transform:scale(1.06);filter:blur(6px);transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .9s ease}
.rcc-divider.rv.in{opacity:1}
.rcc-divider.rv.in picture{transform:none;filter:none}

/* the top section: a dim, slow loop from the stage videos behind the title */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-video{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease;mix-blend-mode:screen;filter:brightness(.85) contrast(1.08);
  -webkit-mask-image:radial-gradient(ellipse 80% 75% at 50% 48%,#000 35%,rgba(0,0,0,.55) 62%,transparent 92%);mask-image:radial-gradient(ellipse 80% 75% at 50% 48%,#000 35%,rgba(0,0,0,.55) 62%,transparent 92%)}
.hero-video.on{opacity:.34}
.hero-video.still{opacity:.24}
@media (max-width:700px){.hero-video.on{opacity:.3}}
/* the title sprays on the first time a visitor arrives */
.spray-in .hero-mark{-webkit-mask-image:linear-gradient(100deg,#000 44%,rgba(0,0,0,.45) 50%,transparent 57%);mask-image:linear-gradient(100deg,#000 44%,rgba(0,0,0,.45) 50%,transparent 57%);-webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:rccSpray 1.5s cubic-bezier(.35,.6,.2,1) .25s both}
@keyframes rccSpray{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
.spray-in .embrace{animation:rccDrop .9s cubic-bezier(.2,.7,.2,1) .05s both}
@keyframes rccDrop{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%)}}
.spray-in .hero-copy,.spray-in .hero-cta{animation:rccUp .8s cubic-bezier(.2,.7,.2,1) .9s both}
@keyframes rccUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* sections ease in as they scroll into view */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease var(--rv-d,0s),transform .8s cubic-bezier(.2,.7,.2,1) var(--rv-d,0s)}
.rv.in{opacity:1;transform:none}
/* the red line under each heading paints itself on, and a drip runs off it */
.section-head.rv h2::after{transform:rotate(-1.5deg) scaleX(0);transform-origin:left center;transition:transform .7s cubic-bezier(.3,.7,.2,1) .35s}
.section-head.rv.in h2::after{transform:rotate(-1.5deg) scaleX(1)}
.section-head.rv h2{position:relative}
.section-head.rv h2::before{content:"";position:absolute;left:41px;top:calc(100% - 2px);width:5px;height:0;border-radius:1px 1px 5px 5px;background:var(--red-hot);transition:height 1.1s cubic-bezier(.5,0,.4,1) 1s}
.section-head.rv.in h2::before{height:17px}
@media print{.rv{opacity:1!important;transform:none!important;filter:none!important}}

/* waveforms: grey bars, filling red as the beat plays; tap anywhere on one to jump there */
.wave{position:relative;display:block;height:34px;cursor:pointer;min-width:0;-webkit-tap-highlight-color:transparent}
.wave svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wave .w-base{fill:#4a4846;transition:fill .2s}
.wave .w-fill{fill:var(--red-hot);clip-path:inset(0 calc(100% - var(--p, 0%)) 0 0);filter:drop-shadow(0 0 4px rgba(196,20,29,.45))}
.wave:hover .w-base,.beat:hover .wave .w-base{fill:#6d6a66}
.beat.playing .wave .w-base{fill:#5a5856}
/* phones and tablets: the wave sits on the line under the title, beside the catalog number and BPM, so rows stay compact */
.beat-info.has-wave{grid-template-columns:auto minmax(25%,1fr);column-gap:14px;align-items:center}
.beat-info.has-wave > *{grid-column:1/-1}
.beat-info.has-wave > .beat-meta{grid-column:1;grid-row:2;flex-wrap:nowrap;white-space:nowrap}
.beat-info.has-wave > .wave{grid-column:2;grid-row:2;height:22px}
@media (min-width:900px){
  .beat-info.has-wave{grid-template-columns:minmax(150px,max-content) minmax(120px,1fr);column-gap:22px;align-items:center}
  .beat-info.has-wave > :not(.wave){grid-column:1;grid-row:auto}
  .beat-info.has-wave > .beat-meta{flex-wrap:wrap;white-space:normal}
  .beat-info.has-wave > .wave{grid-column:2;grid-row:1/span 3;height:36px}
}
.beat.has-wave .progress{display:none}
.feat .wave{height:22px;margin:-4px 12px 12px}
.feat.has-wave .feat-bar{display:none}
.feat .wave .w-base{fill:#3d3b39}

/* Surprise me: plays a random beat */
.surprise{display:inline-flex;align-items:center;gap:7px;background:#000;border:1px solid var(--red);color:#fff;padding:8px 12px 8px 10px}
.surprise svg{width:17px;height:17px;fill:var(--red-hot)}
.surprise:hover{border-color:var(--red-hot);box-shadow:0 0 14px var(--red-glow)}
.surprise.spin svg{animation:rccSpin .5s ease}
@keyframes rccSpin{from{transform:rotate(-180deg) scale(.6)}to{transform:none}}
@media (max-width:700px){.surprise{padding:8px 10px}.surprise span{display:none}}

/* sound bars that bounce while music plays (radio and the preview bar) */
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:13px;width:19px;margin-left:8px;vertical-align:-1px}
.eq i{flex:1;height:100%;background:var(--red-hot);border-radius:1px;transform:scaleY(.22);transform-origin:bottom;opacity:.45;transition:transform .3s,opacity .3s}
.player.playing .r-eyebrow .eq i,.pbar.playing .eq i{opacity:1;animation:rccEq .9s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-duration:.62s!important;animation-delay:-.2s!important}
.eq i:nth-child(3){animation-duration:1.05s!important;animation-delay:-.5s!important}
.eq i:nth-child(4){animation-duration:.75s!important;animation-delay:-.35s!important}
.eq i:nth-child(5){animation-duration:.88s!important;animation-delay:-.6s!important}
@keyframes rccEq{0%{transform:scaleY(.18)}35%{transform:scaleY(.95)}60%{transform:scaleY(.45)}100%{transform:scaleY(.8)}}
.pbar-kick .eq{margin:0 7px 0 0;height:11px;width:16px}
@media (max-width:480px){.r-eyebrow .eq{display:inline-flex;margin-left:6px}}

@media (prefers-reduced-motion:reduce){
  .rv,.rcc-divider.rv,.rcc-divider.rv picture{opacity:1;transform:none;filter:none;transition:none}
  .spray-in .hero-mark,.spray-in .embrace,.spray-in .hero-copy,.spray-in .hero-cta{animation:none;-webkit-mask-image:none;mask-image:none}
  .player.playing .r-eyebrow .eq i,.pbar.playing .eq i{animation:none;transform:scaleY(.6)}
  .hero-video{transition:none}
}
.feat.has-wave{display:flex;flex-direction:column}
.feat.has-wave .feat-play{flex:1 1 auto;height:auto}

/* the reel player sits in a black frame (video and caption together) */
.reels{width:min(100%,392px);background:#000;padding:16px 16px 14px;border-radius:22px;border:1px solid #232323;box-shadow:0 30px 70px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.03)}
.reels .reels-frame{border-color:#1a1a1a;box-shadow:none}
.reels figcaption{margin-top:12px;padding:0 4px}
@media (max-width:700px){.reels{width:min(90%,330px);padding:12px 12px 11px;border-radius:18px}}

/* NILS 2.6.1: one installer per system (the visitor's own is marked and comes first) */
.dl{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px 12px;margin-top:18px}
.dl-kick{order:-2;flex-basis:100%;margin-bottom:4px;font:600 12px/1 var(--font-cond);letter-spacing:.14em;text-transform:uppercase;color:#6b6763}
.dl-btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:12px 18px 12px 14px;border-radius:10px;background:#000;color:#fff;text-decoration:none;border:2px solid #000;min-width:228px;transition:background-color .15s,border-color .15s,transform .15s}
.dl-btn:hover{background:#262626;border-color:#262626}
.dl-btn:active{transform:translateY(1px)}
.dl-btn:focus-visible{outline:3px solid var(--red-hot);outline-offset:3px}
.dl-btn svg{flex:none;width:22px;height:22px;fill:currentColor}
.dl-btn > span{display:grid;gap:3px;text-align:left}
.dl-btn b{font:700 16px/1.1 var(--font-body)}
.dl-btn small{font:500 12.5px/1.2 var(--font-body);color:#bdb7b0}
.dl-btn.mine{order:-1;border-color:var(--red-hot);box-shadow:0 0 0 3px rgba(196,20,29,.18)}
.dl-btn.mine svg{color:var(--red-hot)}
.dl-btn.mine::after{content:"Your system";position:absolute;top:-9px;right:12px;padding:2px 7px;border-radius:4px;background:var(--red-hot);color:#fff;font:700 10px/1.3 var(--font-cond);letter-spacing:.08em;text-transform:uppercase}
@media (max-width:600px){.dl-btn{flex:1 1 100%;min-width:0}}
@media (max-width:959px){.nils-copy .dl{order:7}}

/* the newest screenshot across the whole row, with its label */
.shots li.wide{grid-column:1/-1}
.shot{position:relative}
.shot-badge{position:absolute;top:-10px;left:14px;z-index:1;padding:4px 9px;border-radius:5px;background:var(--red-hot);color:#fff;font:700 12px/1.2 var(--font-cond);font-style:normal;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 4px 12px rgba(0,0,0,.3)}


/* =====================================================================
   Mixing & mastering (between NILS and the beat store): the heading, the 15-second video
   (the same player as the NILS video), the three services and the email box.
   Phones: heading, video, services. Wide screens: words on the left, the video on the right.
   ===================================================================== */
.mix-grid{display:grid;gap:24px;grid-template-areas:"head" "video" "body"}
.mix-grid > .section-head{grid-area:head;margin-bottom:0}
.mix-video{grid-area:video;margin:0;min-width:0}
.mix-body{grid-area:body;display:grid;gap:18px;min-width:0}
@media (min-width:960px){
  .mix-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-areas:"head video" "body video";column-gap:52px;row-gap:26px;align-items:start}
  .mix-video{align-self:center}
}
.svc{border:1px solid var(--grey-800);border-radius:10px;overflow:hidden;background:rgba(14,14,14,.94)}
.svc-row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:4px 18px;align-items:baseline;padding:14px 18px;border-top:1px solid var(--grey-800)}
.svc-row:first-child{border-top:0}
.svc-name{font:400 26px/1 var(--font-display);text-transform:uppercase;letter-spacing:.01em;color:#fff}
.svc-what{color:#f3f1ee;font-size:15.5px;line-height:1.45}
.svc-cost{display:block;margin-bottom:8px;font:600 17px/1 var(--font-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--red-hot)}
.mix-price{color:#e6e2dc;font-size:16px;line-height:1.55;max-width:62ch;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.75)}
.mix-mail{margin-top:2px}
@media (max-width:520px){.svc-row{grid-template-columns:1fr;padding:12px 14px}.svc-name{font-size:23px}}

/* the cart's Stripe checkout: the promise in white, the links under it, a lock on the Pay button */
.checkout-stripe .promise{color:#f3f1ee}
.checkout-stripe .promise strong{color:#fff}
.checkout .cart-links{font-size:14px}
#payBtn svg{width:18px;height:18px;fill:currentColor}
#payBtn.busy,[data-nils-buy].busy{opacity:.75;cursor:progress}
.nils-copy .fine a{color:#000;font-weight:600;text-underline-offset:3px;text-decoration-color:var(--red-hot)}
.lic-note a{color:#fff;text-underline-offset:3px;text-decoration-color:var(--red-hot)}

/* ---------- NILS free trial: the email box behind the download buttons (assets/trial.js) ---------- */
.trial-modal{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.74);overflow-y:auto}
.trial-modal[hidden]{display:none}
body.trial-open{overflow:hidden}
.trial-card{position:relative;width:min(440px,100%);background:var(--white);color:#000;border-radius:14px;padding:30px 24px 22px;box-shadow:0 30px 70px rgba(0,0,0,.6);display:grid;gap:12px;outline:none}
.trial-kick{font:700 13px/1 var(--font-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.trial-card h2{font-size:clamp(36px,8vw,48px);color:#000}
.trial-sub,.trial-done p{margin:0;color:#262626;font-size:16px;line-height:1.45}
.trial-form{display:grid;gap:10px;margin:2px 0 0}
.trial-form label{font:600 14px/1 var(--font-body);color:#222}
.trial-form input[type=email]{width:100%;box-sizing:border-box;padding:13px 14px;border:2px solid #cfcac3;border-radius:6px;font:500 17px/1.2 var(--font-body);color:#000;background:#fff;color-scheme:light}
.trial-form input[type=email]:focus{outline:none;border-color:var(--red)}
.trial-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.trial-go{width:100%}
.trial-go[disabled]{opacity:.6;cursor:wait}
.trial-msg{margin:0;min-height:1.3em;font-size:15px;color:#222}
.trial-msg.err{color:#b3121b;font-weight:600}
.trial-os{margin:0;font-size:15px;color:#333;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.trial-os button{font:600 14px/1 var(--font-body);padding:9px 14px;border-radius:4px;border:2px solid #000;background:#fff;color:#000;cursor:pointer}
.trial-os button:hover{background:#000;color:#fff}
.trial-fine,.trial-small{margin:0;font-size:13px;color:#555;line-height:1.45}
.trial-done .trial-small{font-size:14px;color:#555}
.trial-fine a,.trial-done a{color:inherit}
.trial-done{display:grid;gap:10px}
.trial-x{position:absolute;top:6px;right:8px;width:44px;height:44px;border:0;background:transparent;font-size:30px;line-height:1;cursor:pointer;color:#000;border-radius:50%}
.trial-x:hover{background:#eee}
.trial-ok{justify-self:start}

/* ---------- the NILS page (nils.html) ---------- */
.np-hero{position:relative;padding-block:clamp(40px,7vw,96px) clamp(36px,6vw,80px);background:radial-gradient(120% 90% at 85% 10%,rgba(142,15,25,.45),transparent 60%),radial-gradient(80% 70% at 0% 100%,rgba(142,15,25,.22),transparent 60%)}
.np-hero-grid{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:960px){.np-hero-grid{grid-template-columns:1.05fr 1fr}}
.np-kick{display:inline-block;font:700 14px/1 var(--font-cond);letter-spacing:.16em;text-transform:uppercase;color:var(--grey-300);border-left:4px solid var(--red-hot);padding:4px 0 4px 10px}
.np-hero h1{margin:18px 0 0;font-family:var(--font-display);font-weight:400;font-size:clamp(48px,8.4vw,96px);line-height:.92;letter-spacing:.01em;text-wrap:balance}
.np-hero h1 span{display:block;color:var(--red-hot)}
.np-lede{margin:20px 0 0;max-width:52ch;font-size:clamp(17px,2vw,20px);line-height:1.55;color:#e6e2dc}
.np-lede b{color:#fff}
.np-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.np-trust{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font:600 15px/1.2 var(--font-body);color:var(--grey-300)}
.np-trust li::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--red-hot);vertical-align:1px}
.np-hero-shot{position:relative;display:block;border-radius:14px;overflow:hidden;border:1px solid var(--grey-700);box-shadow:0 30px 70px rgba(0,0,0,.6);text-decoration:none;color:#fff}
.np-hero-shot img{display:block;width:100%;height:auto;transition:transform .3s}
.np-hero-shot:hover img{transform:scale(1.02)}
.np-play{position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;background:var(--red);display:grid;place-items:center;box-shadow:0 0 0 8px rgba(196,20,29,.25)}
.np-play svg{width:34px;height:34px;fill:#fff;margin-left:4px}
.np-shot-cap{position:absolute;left:14px;bottom:12px;font:600 15px/1 var(--font-body);background:rgba(0,0,0,.72);padding:8px 12px;border-radius:4px}
.np-steps{padding-top:clamp(48px,7vw,96px)}
.np-step-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
@media (min-width:860px){.np-step-list{grid-template-columns:repeat(3,1fr)}}
.np-step-list li{position:relative;background:var(--grey-900);border:1px solid var(--grey-800);border-radius:12px;padding:26px 22px 22px}
.np-num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--red);font:400 24px/1 var(--font-display);color:#fff}
.np-step-list h3{margin-top:16px;font-size:30px}
.np-step-list p{margin:10px 0 0;color:#d8d4ce;line-height:1.55}
.np-after{margin:22px 0 0;max-width:70ch;color:var(--grey-500)}
.np-faq{padding-top:0}
.np-faq .faq{margin-top:0}
.np-faq .faq h3{font-size:clamp(32px,4.4vw,46px);margin-bottom:8px}
.np-final{padding-top:0}
.np-final-inner{text-align:center;display:grid;justify-items:center;gap:6px;padding-block:clamp(36px,6vw,64px);border-top:1px solid var(--grey-800)}
.np-final h2{font-size:clamp(38px,6vw,64px)}
.np-final p{margin:6px 0 0;font-size:18px;color:#e6e2dc}
.np-final .np-cta{justify-content:center}
/* the standalone licenses page (licenses.html) */
.lic-page-head h1{font-family:var(--font-display);font-weight:400;font-size:clamp(44px,7vw,80px);line-height:.95;margin:0}
.lic-docs{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.lic-docs a{display:inline-flex;flex-direction:column;gap:4px;padding:14px 18px;border:1px solid var(--grey-700);border-radius:8px;background:var(--grey-900);color:#fff;text-decoration:none;min-width:240px}
.lic-docs a:hover{border-color:var(--red-hot)}
.lic-docs b{font:600 16px/1.2 var(--font-body)}
.lic-docs small{color:var(--grey-500);font-size:14px}
.lic-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}