/* =========================================================
   ROWEN — stylesheet
   Organized in sections; search the ALL-CAPS section markers
   to jump around. Design tokens live in :root at the top —
   change brand colors/fonts there and they cascade everywhere.
   ========================================================= */

:root{
  --black:#08080a;
  --black-2:#0e0e11;
  --card:#111114;
  --card-2:#16161a;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.18);
  --white:#f4f4f2;
  --dim:#9a9aa0;
  --dimmer:#7a7a82; /* bumped from original #55555c for WCAG AA contrast on small print (footer, labels) */
  --accent:#ff2b83;
  --accent-dim:rgba(255,43,131,.35);
  --good:#3ddc84;
  --bad:#ff6161;
  --ease:cubic-bezier(.22,1,.36,1);
  --radius:14px;
  --header-h:78px;
  /* Layered depth for cards — a tight contact shadow plus a soft ambient
     one, so surfaces read as sitting slightly above the background instead
     of flat rectangles. Hover swaps to a taller, softer shadow to sell the
     translateY(-4px) lift already used across card components. */
  --shadow-card:0 1px 2px rgba(0,0,0,.5), 0 14px 32px -18px rgba(0,0,0,.7);
  --shadow-card-hover:0 1px 2px rgba(0,0,0,.5), 0 28px 48px -18px rgba(0,0,0,.75);
}

/* Locally-hosted fonts for the Lyric Graphic tool's platform-style fonts
   (Spotify / Apple Music). Self-hosted rather than a Google Fonts link
   since these aren't on Google Fonts. */
@font-face{
  font-family:'Spotify Mix';
  src:url('../fonts/SpotifyMix-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Spotify Mix';
  src:url('../fonts/SpotifyMix-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Spotify Mix';
  src:url('../fonts/SpotifyMix-Black.woff2') format('woff2');
  font-weight:900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'SF Pro Display';
  src:url('../fonts/SFPRODISPLAYREGULAR.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'SF Pro Display';
  src:url('../fonts/SFPRODISPLAYMEDIUM.woff') format('woff');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'SF Pro Display';
  src:url('../fonts/SFPRODISPLAYBOLD.woff') format('woff');
  font-weight:700;font-style:normal;font-display:swap;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}
body{
  background:var(--black);
  color:var(--white);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
  cursor:none;
}
@media (hover:none), (max-width:860px), (prefers-reduced-motion: reduce){
  body{cursor:auto;}
}
::selection{background:var(--white);color:var(--black);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font:inherit;}
.mono{font-family:'JetBrains Mono',monospace;}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em;font-weight:500;}

/* ---------- accessibility helpers ---------- */
.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;
}
.skip-link{
  position:fixed;top:-60px;left:16px;z-index:999;background:var(--white);color:var(--black);
  padding:12px 20px;border-radius:8px;font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:14px;transition:top .25s var(--ease);
}
.skip-link:focus{top:16px;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
/* programmatic route-change focus (screen-reader only, not a visual affordance) */
.sr-route-focus:focus{outline:none;}
a:focus-visible,button:focus-visible,.card:focus-visible,.dot-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.btn:focus-visible{outline-offset:5px;}

/* ---------- utility ---------- */
/* Several components below (.btn, .coming-soon, .beats-grid, etc.) set an
   explicit `display` value, which — per normal CSS cascade rules — silently
   overrides the browser's built-in `[hidden]{display:none}` rule any time
   JS toggles the `hidden` attribute/property on one of them. This single
   !important rule guarantees `hidden` always actually hides the element,
   regardless of what any other class declares. */
[hidden]{display:none !important;}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
@media (max-width:560px){ .wrap{padding:0 20px;} }
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;box-shadow:0 0 14px 3px var(--accent-dim);animation:pulse 2.4s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){ .eyebrow::before{animation:none;} }
.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:16px 30px;border-radius:100px;font-family:'Space Grotesk',sans-serif;
  font-size:14px;letter-spacing:.03em;font-weight:500;cursor:pointer;
  border:1px solid var(--line-strong);background:transparent;color:var(--white);
  overflow:hidden;transition:border-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
  z-index:1;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(0,0,0,.6);}
.btn span{position:relative;z-index:2;}
.btn::before{
  content:'';position:absolute;inset:0;background:var(--white);
  transform:translateY(101%);transition:transform .45s var(--ease);z-index:1;
}
.btn:hover{color:var(--black);}
.btn:hover::before{transform:translateY(0);}
.btn.solid{background:var(--white);color:var(--black);box-shadow:0 0 0 0 var(--accent-dim);transition:border-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease);}
.btn.solid::before{background:var(--black);}
.btn.solid:hover{color:var(--white);box-shadow:0 0 30px 4px var(--accent-dim);}
.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--white);box-shadow:0 0 0 0 var(--accent-dim);transition:border-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease);}
.btn.accent::before{background:var(--white);}
.btn.accent:hover{color:var(--black);box-shadow:0 0 30px 4px var(--accent-dim);}
.btn .arrow{transition:transform .4s var(--ease);position:relative;z-index:2;}
.btn:hover .arrow{transform:translate(3px,-3px);}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
.btn:disabled:hover,.btn[aria-disabled="true"]:hover{color:var(--white);box-shadow:none;transform:none;}
.btn:disabled:hover::before,.btn[aria-disabled="true"]:hover::before{transform:translateY(101%);}
.btn.small{padding:11px 20px;font-size:13px;}
.btn.ghost{border-color:var(--line);}

.spinner{
  width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
  border-top-color:currentColor;animation:spin .7s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- preloader (opening animation) ---------- */
#preloader{
  position:fixed;inset:0;z-index:500;background:var(--black);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .7s var(--ease),visibility .7s var(--ease);
}
#preloader.hide{opacity:0;visibility:hidden;pointer-events:none;}
.preloader-mark{width:96px;opacity:0;transform:scale(.6) rotate(-10deg);animation:preloader-in 1s cubic-bezier(.22,1,.36,1) forwards;}
.preloader-mark img{width:100%;display:block;filter:drop-shadow(0 0 40px rgba(255,43,131,.3));}
.preloader-word{margin-top:22px;opacity:0;transform:translateY(8px);animation:preloader-word-in .7s var(--ease) .55s forwards;}
.preloader-word img{height:20px;width:auto;display:block;}
.preloader-bar{width:120px;height:2px;background:var(--line);margin-top:26px;border-radius:2px;overflow:hidden;opacity:0;animation:preloader-bar-in .4s var(--ease) .5s forwards;}
.preloader-bar span{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--white));animation:preloader-fill 1.1s cubic-bezier(.22,1,.36,1) .6s forwards;}
@keyframes preloader-in{
  0%{opacity:0;transform:scale(.6) rotate(-10deg);}
  55%{opacity:1;transform:scale(1.08) rotate(3deg);}
  100%{opacity:1;transform:scale(1) rotate(0deg);}
}
@keyframes preloader-word-in{to{opacity:1;transform:translateY(0);}}
@keyframes preloader-bar-in{to{opacity:1;}}
@keyframes preloader-fill{to{width:100%;}}
@media (prefers-reduced-motion: reduce){
  .preloader-mark,.preloader-word,.preloader-bar,.preloader-bar span{animation:none !important;opacity:1 !important;transform:none !important;width:100% !important;}
}

/* ---------- custom cursor ---------- */
#cursor-dot,#cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%);}
#cursor-dot{width:6px;height:6px;background:var(--white);}
#cursor-ring{width:34px;height:34px;border:1px solid rgba(244,244,242,.5);transition:width .25s var(--ease),height .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);}
#cursor-ring.grow{width:64px;height:64px;background:rgba(244,244,242,.08);border-color:rgba(244,244,242,.8);}
@media (hover:none), (max-width:860px), (prefers-reduced-motion: reduce){
  #cursor-dot,#cursor-ring{display:none;}
}

/* ---------- background fx ---------- */
#bg-image{
  position:absolute;top:0;left:0;right:0;height:100svh;z-index:0;pointer-events:none;
  background:url('../brand/bg-texture.webp') no-repeat center top/cover;
  opacity:.55;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
}
#bg-canvas{position:fixed;inset:0;z-index:0;opacity:.55;pointer-events:none;}
@media (prefers-reduced-motion: reduce){ #bg-canvas{display:none;} }
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,transparent 40%,var(--black) 100%);}

/* ---------- nav ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px 0;transition:background .4s var(--ease),border-color .4s var(--ease),padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
header.scrolled{background:rgba(8,8,10,.75);backdrop-filter:blur(14px);border-color:var(--line);padding:16px 0;}
nav{display:flex;align-items:center;justify-content:space-between;}
.logo{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;}
.logo .dot{width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 10px 2px var(--accent-dim);animation:pulse 2.4s ease-in-out infinite;}
.logo img{height:24px;width:auto;display:block;filter:drop-shadow(0 0 10px rgba(244,244,242,.08));}
.foot-brand .logo img{height:28px;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(1.6);}}
.nav-links{display:flex;gap:26px;font-size:14px;color:var(--dim);}
.nav-links a{position:relative;padding:4px 0;transition:color .3s;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--white);transition:width .35s var(--ease);}
.nav-links a:hover{color:var(--white);}
.nav-links a:hover::after{width:100%;}
.nav-links a.active{color:var(--white);}
.nav-links a.active::after{width:100%;background:var(--accent);}

/* "Graphic Design" / "Music" dropdowns — hover (or keyboard focus) reveals
   a small panel of that category's pages, grouping Cover Art/Thumbnails/
   Ads/PFPs under Design and Beats/VSTs under Music. */
.nav-dropdown{position:relative;display:flex;align-items:center;}
.nav-dropdown-trigger{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  background:none;border:0;padding:4px 0;margin:0;font:inherit;color:inherit;cursor:pointer;
  transition:color .3s;
}
.nav-dropdown-trigger::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--white);transition:width .35s var(--ease);}
.nav-dropdown-trigger:hover,.nav-dropdown-trigger.active{color:var(--white);}
.nav-dropdown-trigger:hover::after,.nav-dropdown-trigger.active::after{width:100%;}
.nav-dropdown-trigger.active::after{background:var(--accent);}
.nav-caret{font-size:9px;color:var(--dimmer);transition:transform .3s var(--ease);}
.nav-dropdown:hover .nav-caret,.nav-dropdown:focus-within .nav-caret{transform:rotate(180deg);}
.nav-dropdown-panel{
  --nav-dropdown-gap:14px;
  position:absolute;top:100%;left:50%;margin-top:var(--nav-dropdown-gap);min-width:170px;padding:10px;
  background:var(--black-2);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:2px;
  opacity:0;pointer-events:none;transform:translate(-50%,4px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
/* The panel floats --nav-dropdown-gap below its trigger, and that gap belongs to
   neither element. Hovering the panel itself was never the problem (it's a DOM
   child, so .nav-dropdown:hover still matches) — the problem was *reaching* it:
   moving the pointer down from "Graphic Design"/"Music" crossed a strip where
   nothing was hovered, so the panel started fading out before a link could be
   clicked. This invisible bridge spans exactly that gap, so the pointer never
   leaves the dropdown on the way in.

   It deliberately has no styling of its own — it only needs to be hoverable.
   pointer-events is inherited from the panel, so while the panel is closed the
   strip is inert and can't swallow clicks on whatever is underneath it; it only
   becomes interactive once the panel is already open. It's position:absolute so
   it isn't laid out as a flex item of the panel. */
.nav-dropdown-panel::before{
  content:'';position:absolute;
  left:0;right:0;top:calc(-1 * var(--nav-dropdown-gap));height:var(--nav-dropdown-gap);
}
.nav-dropdown:hover .nav-dropdown-panel,.nav-dropdown:focus-within .nav-dropdown-panel{
  opacity:1;pointer-events:auto;transform:translate(-50%,0);
}
.nav-dropdown-panel a{padding:9px 12px;border-radius:8px;font-size:13.5px;white-space:nowrap;}
.nav-dropdown-panel a::after{content:none !important;}
.nav-dropdown-panel a:hover,.nav-dropdown-panel a.active{background:rgba(255,255,255,.06);color:var(--white);}
@media (prefers-reduced-motion: reduce){ .nav-dropdown-panel,.nav-caret{transition:none;} }
.nav-cta{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;}
.nav-social{display:flex;align-items:center;gap:12px;padding-right:16px;border-right:1px solid var(--line);flex:0 0 auto;}
.nav-social a{color:var(--dim);display:flex;transition:color .3s var(--ease),transform .3s var(--ease);}
.nav-social a:hover{color:var(--white);transform:translateY(-1px);}
.nav-social-discord{color:var(--accent) !important;}
.nav-social-discord:hover{color:var(--accent) !important;filter:brightness(1.25);}

.burger{
  display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0;
  padding:10px;margin:-10px;color:var(--white);
}
.burger span{width:22px;height:1px;background:var(--white);transition:transform .3s var(--ease),opacity .3s var(--ease);}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* mobile nav drawer */
#mobileNav{
  position:fixed;inset:0;z-index:150;display:none;
}
#mobileNav.open{display:block;}
.mobile-nav-bg{position:absolute;inset:0;background:rgba(6,6,7,.72);backdrop-filter:blur(6px);}
.mobile-nav-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(320px,84vw);
  background:var(--black-2);border-left:1px solid var(--line);
  padding:100px 30px 30px;display:flex;flex-direction:column;gap:4px;
  transform:translateX(100%);transition:transform .4s var(--ease);
  overflow-y:auto;
}
#mobileNav.open .mobile-nav-panel{transform:translateX(0);}
.mobile-nav-panel a{
  font-family:'Space Grotesk',sans-serif;font-size:22px;padding:14px 0;
  border-bottom:1px solid var(--line);color:var(--dim);transition:color .25s;
}
.mobile-nav-panel a.active,.mobile-nav-panel a:hover{color:var(--white);}

/* "Graphic Design" / "Music" accordion groups — tap to expand, reusing the
   FAQ's plus/minus icon and max-height animation for a consistent feel. */
.mobile-nav-group{border-bottom:1px solid var(--line);}
.mobile-nav-group-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:none;border:0;padding:14px 0;margin:0;cursor:pointer;text-align:left;
  font-family:'Space Grotesk',sans-serif;font-size:22px;color:var(--dim);transition:color .25s;
}
.mobile-nav-group-toggle:hover,.mobile-nav-group-toggle.active{color:var(--white);}
.mobile-nav-group-toggle .faq-icon{flex:0 0 auto;width:16px;height:16px;position:relative;transition:transform .35s var(--ease);}
.mobile-nav-group-toggle .faq-icon::before,.mobile-nav-group-toggle .faq-icon::after{content:'';position:absolute;background:currentColor;top:50%;left:50%;}
.mobile-nav-group-toggle .faq-icon::before{width:12px;height:1.5px;transform:translate(-50%,-50%);}
.mobile-nav-group-toggle .faq-icon::after{width:1.5px;height:12px;transform:translate(-50%,-50%);transition:transform .3s var(--ease);}
.mobile-nav-group[data-open="true"] .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(0);}
.mobile-nav-subpanel{
  max-height:0;overflow:hidden;display:flex;flex-direction:column;padding-left:8px;
  transition:max-height .4s var(--ease);
}
.mobile-nav-group[data-open="true"] .mobile-nav-subpanel{padding-bottom:8px;}
.mobile-nav-subpanel a{font-size:17px;padding:9px 0;border-bottom:0;}
@media (prefers-reduced-motion: reduce){ .mobile-nav-subpanel{transition:none;} }
.mobile-nav-panel .btn{margin-top:22px;justify-content:center;}
.mobile-nav-social{display:flex;gap:14px;margin-top:26px;}
@media (max-width:640px){
  .nav-social{gap:10px;padding-right:12px;}
  .nav-social svg{width:15px;height:15px;}
}
@media (max-width:1040px){
  .nav-links{display:none;}
  .nav-cta .btn.small-hide-mobile{display:none;}
  .burger{display:flex;}
}

/* ---------- scroll progress + side dots ---------- */
#scrollProgress{position:fixed;top:0;left:0;height:2.5px;width:0%;
  background:linear-gradient(90deg,var(--accent),var(--white));
  z-index:200;transition:width .1s linear;}
@media (prefers-reduced-motion: reduce){ #scrollProgress{transition:none;} }
.side-dots{
  position:fixed;right:26px;top:50%;transform:translateY(-50%);
  z-index:90;display:flex;flex-direction:column;align-items:center;gap:20px;
}
.side-dots::before{
  content:'';position:absolute;left:50%;top:-30px;bottom:-30px;width:1px;
  background:var(--line);transform:translateX(-50%);z-index:-1;
}
.dot-link{
  position:relative;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--line-strong);background:var(--black);
  transition:all .35s var(--ease);display:block;
}
.dot-link:hover{border-color:var(--white);transform:scale(1.3);}
.dot-link.active{background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 12px 2px var(--accent-dim);transform:scale(1.35);}
.dot-tip{
  position:absolute;right:22px;top:50%;transform:translateY(-50%) translateX(4px);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;
  color:var(--dim);white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.dot-link:hover .dot-tip,.dot-link.active .dot-tip,.dot-link:focus-visible .dot-tip{opacity:1;transform:translateY(-50%) translateX(0);}
.dot-link.active .dot-tip{color:var(--white);}
.dot-add{
  width:20px;height:20px;border-radius:50%;background:var(--accent);border-color:var(--accent);
  display:flex;align-items:center;justify-content:center;color:var(--white);
}
.dot-add::before{content:'+';font-size:14px;line-height:1;font-weight:600;}
.dot-add:hover{border-color:var(--accent);transform:scale(1.12);box-shadow:0 0 14px 3px var(--accent-dim);}

/* "Graphic Design" / "Music" dots — a single dot standing in for a group
   of pages; hovering (or focusing) it reveals a small flyout list of that
   category's pages instead of navigating directly. */
.dot-group{position:relative;}
/* A plain single-page dot (Home, Reviews, Order, Free Tools) and a
   group-trigger dot (Graphic Design, Music) used to look identical at
   rest — nothing hinted that two of the six dots opened a submenu
   instead of navigating directly, so a first-time visitor had no reason
   to hover them over the others. A soft ring around just the group
   triggers gives that a visible cue without adding any text — stays
   inside the same minimal dot language the rest of this nav uses. */
.dot-group-trigger{appearance:none;padding:0;cursor:pointer;box-shadow:0 0 0 3px rgba(255,255,255,.12);}
.dot-group-trigger:hover,.dot-group-trigger.active,.dot-group-trigger:focus-visible{box-shadow:0 0 0 3px rgba(255,43,131,.22);}
.dot-flyout{
  position:absolute;right:22px;top:50%;transform:translateY(-50%) translateX(6px);
  background:var(--black-2);border:1px solid var(--line);border-radius:12px;
  padding:8px;min-width:150px;display:flex;flex-direction:column;gap:2px;
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.dot-group:hover .dot-flyout,.dot-group:focus-within .dot-flyout{
  opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0);
}
.dot-flyout-label{
  display:block;padding:6px 10px 8px;margin-bottom:4px;border-bottom:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dimmer);white-space:nowrap;
}
.dot-flyout a{
  padding:8px 10px;border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.06em;color:var(--dim);white-space:nowrap;transition:background .2s,color .2s;
}
.dot-flyout a:hover,.dot-flyout a.active{background:rgba(255,255,255,.06);color:var(--white);}
@media (prefers-reduced-motion: reduce){ .dot-flyout{transition:none;} }
@media (max-width:960px){
  .side-dots{display:none;}
}

/* ---------- page routing ---------- */
.page{display:none;}
.page.active{display:block;animation:page-in .6s var(--ease);}
@keyframes page-in{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){ .page.active{animation:none;} }

/* ---------- sub-page hero ---------- */
.page-hero{padding-top:150px;padding-bottom:56px;position:relative;z-index:2;}
.page-hero h1{font-size:clamp(38px,5.6vw,64px);line-height:1.03;margin:16px 0 16px;max-width:680px;}
.page-hero-sub{color:var(--dim);font-size:16px;line-height:1.6;max-width:460px;margin-bottom:30px;}

/* ---------- filter tabs (portfolio sub-nav) ---------- */
.filter-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;}
.filter-tab{
  font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.05em;
  padding:9px 18px;border-radius:100px;border:1px solid var(--line);color:var(--dim);
  transition:all .3s var(--ease);
}
.filter-tab:hover{color:var(--white);border-color:var(--line-strong);}
.filter-tab.active{background:var(--white);color:var(--black);border-color:var(--white);}

/* ---------- services grid (home) ---------- */
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:44px;}
@media (max-width:700px){.service-grid{grid-template-columns:1fr;}}

/* ---------- labeled tool groups (Free Tools hub) ---------- */
.tools-group-head{padding-top:52px;margin-top:52px;border-top:1px solid var(--line);}
.tools-group-head:first-of-type{padding-top:0;margin-top:44px;border-top:none;}
.tools-group-head h2{font-size:22px;margin:0 0 6px;}
.tools-group-head p{color:var(--dim);font-size:14px;line-height:1.5;margin:0;max-width:440px;}
.tools-group .service-grid{margin-top:22px;}
.service-card{
  display:block;position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:var(--card);padding:30px 28px;
  box-shadow:var(--shadow-card);
  transition:border-color .35s var(--ease),transform .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
.service-card:hover,.service-card:focus-visible{border-color:var(--line-strong);transform:translateY(-4px);background:#131316;box-shadow:var(--shadow-card-hover);}
.service-card .service-icon{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);color:var(--white);margin-bottom:22px;
  transition:border-color .35s var(--ease),color .35s var(--ease);
}
.service-card:hover .service-icon{border-color:var(--accent);color:var(--accent);}
.service-card h3{font-size:21px;font-weight:500;margin-bottom:8px;}
.service-card p{color:var(--dim);font-size:14px;line-height:1.6;max-width:320px;}
.service-card .service-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:20px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);transition:color .3s,gap .3s;
}
.service-card:hover .service-link{color:var(--accent);gap:10px;}
.service-card .service-preview{
  position:absolute;top:0;right:0;width:120px;height:100%;display:grid;
  grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;opacity:.5;
  -webkit-mask-image:linear-gradient(to left,#000,transparent);mask-image:linear-gradient(to left,#000,transparent);
}
.service-card .service-preview img{width:100%;height:100%;object-fit:cover;}
@media (max-width:860px){.service-card .service-preview{display:none;}}
.service-card-highlight{border-color:rgba(255,43,131,.35);background:linear-gradient(160deg,rgba(255,43,131,.08),var(--card));}
.service-card-highlight:hover{border-color:var(--accent);}
.service-card-highlight .service-icon{border-color:var(--accent);color:var(--accent);}
.service-card-highlight .service-link{color:var(--accent);}

/* ---------- two lanes (design vs music) ---------- */
.lane-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px;}
@media (max-width:700px){.lane-grid{grid-template-columns:1fr;}}
/* Three-lane variant — the homepage hero's "Start here" wayfinding tiles
   (Graphic Design / Beats & VSTs / Free Tools), giving a first-time
   visitor the whole shape of the site in one glance instead of making
   them discover it by scrolling or opening nav dropdowns. Same .lane-card
   styling as the two-lane version above, just a third column. */
.lane-grid-3{grid-template-columns:repeat(3,1fr);margin-top:20px;}
@media (max-width:860px){.lane-grid-3{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.lane-grid-3{grid-template-columns:1fr;}}
.lane-grid-3 .lane-card{padding:28px 24px;}
.lane-grid-3 .lane-card h3{font-size:19px;margin:8px 0 6px;}
.lane-grid-3 .lane-card p{font-size:13.5px;max-width:none;}
.lane-card{
  display:block;border-radius:18px;border:1px solid var(--line);background:var(--card);
  padding:36px 32px;box-shadow:var(--shadow-card);
  transition:border-color .35s var(--ease),transform .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
.lane-card:hover,.lane-card:focus-visible{border-color:var(--line-strong);transform:translateY(-4px);background:#131316;box-shadow:var(--shadow-card-hover);}
.lane-card-icon{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);color:var(--white);margin-bottom:20px;
  transition:border-color .35s var(--ease),color .35s var(--ease);
}
.lane-card:hover .lane-card-icon{border-color:var(--accent);color:var(--accent);}
.lane-card h3{font-size:24px;font-weight:500;margin:10px 0 8px;line-height:1.25;}
.lane-card p{color:var(--dim);font-size:14.5px;line-height:1.6;max-width:340px;}
.lane-card .service-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:22px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);transition:color .3s,gap .3s;
}
.lane-card:hover .service-link{color:var(--accent);gap:10px;}

/* ---------- pricing ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px;}
@media (max-width:960px){.pricing-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.pricing-grid{grid-template-columns:1fr;}}
.price-card{
  border:1px solid var(--line);border-radius:16px;background:var(--card);padding:28px 24px;
  display:flex;flex-direction:column;box-shadow:var(--shadow-card);
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.price-card:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:var(--shadow-card-hover);}
.price-card h3{font-size:18px;margin-bottom:6px;}
.price-card .price-badge{display:inline-flex;}
.price-card ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:9px;flex:1;}
.price-card li{font-size:12.5px;color:var(--dim);line-height:1.5;display:flex;gap:8px;}
.price-card li::before{content:'—';color:var(--dimmer);flex:0 0 auto;}
.price-card .btn{margin-top:20px;justify-content:center;width:100%;}
.quote-factors{
  margin-top:22px;border:1px solid var(--line);border-radius:16px;padding:26px 28px;background:var(--card);
  box-shadow:var(--shadow-card);
}
.quote-factors h3{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);font-weight:500;margin-bottom:16px;
}
.quote-factors ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 28px;}
.quote-factors li{font-size:13.5px;color:var(--dim);line-height:1.5;display:flex;gap:8px;}
.quote-factors li::before{content:'—';color:var(--dimmer);flex:0 0 auto;}
@media (max-width:640px){.quote-factors ul{grid-template-columns:1fr;}}
.pricing-note{
  margin-top:20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:18px 24px;border:1px solid var(--accent-dim);border-radius:14px;background:rgba(255,43,131,.06);
  font-size:13.5px;color:var(--dim);
}
.pricing-note b{color:var(--white);}

/* ---------- coming soon panel ---------- */
.coming-soon{
  margin-top:44px;border:1px dashed var(--line-strong);border-radius:16px;
  padding:64px 40px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;
  position:relative;z-index:0;overflow:hidden;
}
.coming-soon::before{
  content:'';position:absolute;z-index:-1;top:0;left:50%;width:340px;height:200px;
  transform:translate(-50%,-55%);pointer-events:none;
  background:radial-gradient(circle,rgba(255,43,131,.10),transparent 70%);
}
.coming-soon .service-icon{
  width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);color:var(--dim);
}
.coming-soon h3{font-size:20px;font-weight:500;}
.coming-soon p{color:var(--dim);font-size:14.5px;max-width:400px;line-height:1.6;}

/* ---------- VST product teaser ---------- */
.vst-teaser{
  margin-top:44px;border:1px solid var(--line);border-radius:16px;background:var(--card);
  padding:36px 32px;box-shadow:var(--shadow-card);
}
.vst-teaser-top{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap;}
.vst-teaser-top .service-icon{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);color:var(--white);flex:0 0 auto;
}
.vst-teaser-badge{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent-dim);background:rgba(255,43,131,.06);
  border-radius:100px;padding:5px 14px;
}
.vst-teaser h3{font-size:24px;font-weight:500;margin-bottom:10px;}
.vst-teaser-desc{color:var(--dim);font-size:15px;line-height:1.7;max-width:560px;margin-bottom:20px;}
.vst-teaser-desc b{color:var(--white);font-weight:500;}
.vst-feature-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:24px;max-width:520px;}
.vst-feature-list li{font-size:13.5px;color:var(--dim);line-height:1.5;display:flex;gap:8px;}
.vst-feature-list li::before{content:'—';color:var(--dimmer);flex:0 0 auto;}

/* ---------- VST product catalog (real products, once vsts[] is non-empty) ---------- */
.vst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;}
@media (max-width:960px){.vst-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.vst-grid{grid-template-columns:1fr;}}
.vst-card{
  border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-card);
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.vst-card:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:var(--shadow-card-hover);}
.vst-card-cover{
  width:100%;aspect-ratio:16/10;overflow:hidden;background:#131316;position:relative;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--dimmer);
}
.vst-card-cover img{width:100%;height:100%;object-fit:cover;}
.vst-card-cover--empty{background:radial-gradient(120% 140% at 50% 15%,rgba(255,43,131,.12),transparent 60%),#131316;}
.vst-card-badge{
  position:absolute;top:12px;left:12px;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--black);background:var(--white);
  border-radius:100px;padding:4px 11px;
}
.vst-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1;}
.vst-card-title{font-size:17px;cursor:pointer;}
.vst-card-title:hover{color:var(--accent);}
.vst-card-tagline{color:var(--dim);font-size:13px;line-height:1.55;flex:1;}
.vst-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;}
.vst-card-price{font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--white);}

/* ---------- VST product detail modal ---------- */
.vst-gallery-main{
  width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#131316;
  display:flex;align-items:center;justify-content:center;
}
.vst-gallery-main img{width:100%;height:100%;object-fit:cover;}
.vst-gallery-main.is-empty{color:var(--dimmer);background:radial-gradient(120% 140% at 50% 15%,rgba(255,43,131,.12),transparent 60%),#131316;}
.vst-gallery-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.vst-gallery-thumbs button{
  width:64px;height:44px;border-radius:8px;overflow:hidden;border:1px solid var(--line);
  padding:0;cursor:pointer;background:#131316;flex:0 0 auto;transition:border-color .25s var(--ease);
}
.vst-gallery-thumbs button.active,.vst-gallery-thumbs button:hover{border-color:var(--white);}
.vst-gallery-thumbs img{width:100%;height:100%;object-fit:cover;display:block;}
.vst-detail-price{font-family:'JetBrains Mono',monospace;font-size:20px;color:var(--white);margin:16px 0 4px;}
.vst-detail-desc{color:var(--dim);font-size:14.5px;line-height:1.7;margin-bottom:16px;}
.vst-detail-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px;}
.qty-stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:100px;overflow:hidden;}
.qty-stepper button{width:34px;height:34px;background:none;border:0;color:var(--white);cursor:pointer;font-size:16px;line-height:1;}
.qty-stepper button:hover{background:rgba(255,255,255,.08);}
.qty-stepper span{min-width:28px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:13px;}

/* ---------- cart icon + drawer ---------- */
.cart-trigger{
  position:relative;display:flex;align-items:center;justify-content:center;color:var(--dim);
  background:none;border:0;cursor:pointer;padding:4px;transition:color .3s var(--ease);
}
.cart-trigger:hover{color:var(--white);}

.nav-add-btn{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:36px;height:36px;border-radius:100px;
  background:var(--accent);color:var(--white);
  box-shadow:0 0 0 0 var(--accent-dim);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s var(--ease);
}
.nav-add-btn:hover{transform:translateY(-1px) scale(1.06);box-shadow:0 0 20px 3px var(--accent-dim);filter:brightness(1.08);}
.nav-add-btn:active{transform:scale(.94);}
.cart-badge{
  position:absolute;top:-6px;right:-8px;min-width:16px;height:16px;padding:0 4px;border-radius:100px;
  background:var(--accent);color:var(--white);font-size:10px;font-weight:600;line-height:16px;text-align:center;
}
.cart-badge:empty,.cart-badge[data-count="0"]{display:none;}

#cartDrawer{position:fixed;inset:0;z-index:250;display:none;}
#cartDrawer.open{display:block;}
.cart-drawer-bg{position:absolute;inset:0;background:rgba(6,6,7,.72);backdrop-filter:blur(6px);}
.cart-drawer-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(400px,90vw);
  background:var(--black-2);border-left:1px solid var(--line);
  padding:30px 26px;display:flex;flex-direction:column;gap:18px;
  transform:translateX(100%);transition:transform .4s var(--ease);overflow-y:auto;
}
#cartDrawer.open .cart-drawer-panel{transform:translateX(0);}
@media (prefers-reduced-motion: reduce){ .cart-drawer-panel{transition:none;} }
.cart-drawer-head{display:flex;align-items:center;justify-content:space-between;}
.cart-drawer-head h3{font-size:18px;}
.cart-drawer-close{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--white);flex:0 0 auto;
}
.cart-drawer-close:hover{background:rgba(255,255,255,.12);}
.cart-drawer-empty{color:var(--dim);font-size:14px;text-align:center;padding:40px 0;}
.cart-drawer-items{display:flex;flex-direction:column;gap:14px;flex:1;}
.cart-item{display:flex;gap:12px;align-items:center;}
.cart-item-cover{width:52px;height:52px;border-radius:8px;overflow:hidden;background:#131316;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--dimmer);}
.cart-item-cover img{width:100%;height:100%;object-fit:cover;}
.cart-item-cover--empty{background:radial-gradient(120% 140% at 50% 15%,rgba(255,43,131,.12),transparent 60%),#131316;}
.cart-item-cover--empty svg{width:18px;height:18px;}
.cart-item-info{flex:1;min-width:0;}
.cart-item-name{font-size:13.5px;color:var(--white);}
.cart-item-price{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);margin-top:2px;}
.cart-item-remove{background:none;border:0;color:var(--dimmer);cursor:pointer;font-size:13px;padding:4px;flex:0 0 auto;}
.cart-item-remove:hover{color:var(--accent);}
.cart-item .qty-stepper button{width:28px;height:28px;font-size:14px;}
.cart-drawer-foot{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:14px;}
.cart-subtotal{display:flex;align-items:center;justify-content:space-between;font-size:14.5px;}
.cart-subtotal b{font-family:'JetBrains Mono',monospace;font-size:17px;font-weight:500;}
.cart-error{color:var(--accent);font-size:13px;}

/* ---------- beats catalog ---------- */
.beats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;}
@media (max-width:960px){.beats-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.beats-grid{grid-template-columns:1fr;}}
.beat-card{
  border:1px solid var(--line);border-radius:16px;background:var(--card);padding:22px;
  display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-card);
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.beat-card:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:var(--shadow-card-hover);}
.beat-cover{
  width:100%;aspect-ratio:1;border-radius:10px;overflow:hidden;
  background:#131316;display:flex;align-items:center;justify-content:center;color:var(--dimmer);
}
.beat-cover img{width:100%;height:100%;object-fit:cover;}
.beat-title{font-size:16px;}
.beat-producer{font-size:11.5px;color:var(--dimmer);margin-top:-6px;}
.beat-producer a{color:var(--dim);text-decoration:underline;text-underline-offset:2px;transition:color .2s;}
.beat-producer a:hover{color:var(--white);}
.beat-meta{display:flex;gap:8px;flex-wrap:wrap;}
.beat-tag{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--dimmer);border:1px solid var(--line);border-radius:100px;padding:3px 10px;
}
.beat-player{display:flex;align-items:center;gap:12px;}
.beat-play-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;
  color:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.beat-play-btn:hover{background:var(--white);color:var(--black);}
.beat-progress{flex:1;height:4px;border-radius:100px;background:var(--line);cursor:pointer;position:relative;}
.beat-progress-fill{height:100%;width:0%;background:var(--accent);border-radius:100px;}
.beat-preview-note{font-size:10.5px;color:var(--dimmer);margin-top:-6px;}
.beat-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
}
.beat-price{font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--white);}
.beat-price-unavailable{color:var(--dimmer);font-size:13px;}
.beat-buy{padding:9px 18px;font-size:12.5px;}
.beat-buy-wrap{display:flex;gap:8px;align-items:center;}
.beat-buy .spinner{margin:0;}

/* ---------- beat filter/sort bar ----------
   All four controls (search/key/detune/sort) used to sit in an
   always-open row — condensed down to one "Filters" button that
   opens an anchored dropdown panel, same pattern as a typical
   filter menu: toggle button with an active-count badge, panel
   positioned absolutely below it so it doesn't push the grid down,
   closes on outside click / Escape / picking a page link. */
/* position:relative + an explicit z-index here (not just on the panel
   itself) matters more than it looks: .reveal applies a transform, and
   any transform — even translateY(0) at rest — creates a new CSS
   stacking context on this element. Without a z-index of its own, that
   whole stacking context (this bar AND the open dropdown panel inside
   it, which visually overflows past this element's own box) paints as
   one unit at this element's position in the DOM, and #beatsGrid right
   after it in the markup — plain block content, no stacking context —
   paints on top of it regardless of the panel's own z-index:20. Giving
   this element z-index:5 makes it stack above the grid the normal way. */
.beat-filter-bar{margin-top:36px;position:relative;z-index:5;}
.beat-filter-dropdown{position:relative;display:inline-block;}
.beat-filter-toggle{
  display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
  border-radius:100px;padding:11px 18px;color:var(--white);font-size:13.5px;cursor:pointer;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.beat-filter-toggle:hover{border-color:var(--line-strong);}
.beat-filter-toggle[aria-expanded="true"]{border-color:var(--accent);background:rgba(255,43,131,.08);}
.beat-filter-count{
  min-width:18px;height:18px;padding:0 5px;border-radius:100px;background:var(--accent);color:var(--white);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;line-height:18px;text-align:center;
}
.beat-filter-panel{
  position:absolute;top:calc(100% + 10px);left:0;z-index:20;width:min(340px,88vw);
  background:var(--card);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow-card-hover);display:flex;flex-direction:column;gap:14px;
}
.beat-filter-field{margin-bottom:0;}
.beat-filter-field label{font-size:11px;}
.beat-filter-field input,.beat-filter-field select{margin-bottom:0;}
.beat-filter-clear{
  align-self:flex-start;background:none;border:0;color:var(--dim);font-size:12.5px;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:0;
}
.beat-filter-clear:hover{color:var(--white);}
.beat-filter-empty{color:var(--dimmer);font-size:13.5px;margin-top:32px;text-align:center;}

/* ---------- producer credit (clickable), buyers, placements ---------- */
.beat-producer-link{
  background:none;border:none;padding:0;font:inherit;color:var(--dim);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;transition:color .2s;
}
.beat-producer-link:hover{color:var(--white);}
.beat-buyers,.beat-placements{font-size:11.5px;color:var(--dimmer);line-height:1.6;}
.beat-buyers-label,.beat-placements-label{color:var(--dim);margin-right:4px;}
.beat-buyer-tag{color:var(--dimmer);}
.beat-buyer-more{color:var(--dim);}
.beat-placements-list{list-style:none;margin-top:2px;display:flex;flex-direction:column;gap:2px;}
.beat-placements-list a{color:var(--dim);text-decoration:underline;text-underline-offset:2px;transition:color .2s;}
.beat-placements-list a:hover{color:var(--white);}
.beat-report-link{
  background:none;border:none;padding:0;font:inherit;font-size:11px;color:var(--dimmer);
  text-align:left;text-decoration:underline;text-underline-offset:2px;cursor:pointer;transition:color .2s;
}
.beat-report-link:hover{color:var(--accent);}

/* ---------- producer profile modal ---------- */
.producer-modal-photo{width:64px;height:64px;border-radius:50%;overflow:hidden;background:#131316;margin-bottom:14px;}
.producer-modal-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.producer-modal-links{display:flex;flex-direction:column;gap:6px;margin:14px 0;}
.producer-modal-links a{color:var(--dim);font-size:13px;text-decoration:underline;text-underline-offset:2px;transition:color .2s;}
.producer-modal-links a:hover{color:var(--white);}
.producer-modal-beats{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);}
.producer-modal-beats-list{display:flex;flex-direction:column;gap:4px;}
.producer-modal-beat-item{
  background:none;border:none;padding:8px 0;font:inherit;font-size:13.5px;color:var(--dim);
  text-align:left;cursor:pointer;border-bottom:1px solid var(--line);transition:color .2s;
}
.producer-modal-beat-item:hover{color:var(--white);}
.producer-modal-beat-item:last-child{border-bottom:none;}

/* ---------- pages footer cta ---------- */
.page-cta-band{
  border-top:1px solid var(--line);margin-top:80px;padding-top:70px;text-align:center;position:relative;
}
.page-cta-band h2{font-size:clamp(28px,4.6vw,48px);line-height:1.05;}
.page-cta-band .btn{margin-top:30px;}
.page-cta-band p{margin-top:18px;}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  position:relative;z-index:2;padding-top:120px;padding-bottom:60px;
}
.hero-top-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.discord-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.04em;
  padding:8px 16px;border-radius:100px;color:var(--accent);
  border:1px solid var(--accent-dim);background:rgba(255,43,131,.06);
  transition:all .3s var(--ease);
}
.discord-badge:hover{background:rgba(255,43,131,.16);border-color:var(--accent);transform:translateY(-1px);}
.hero-inner{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;}
.hero-mark{display:flex;align-items:flex-end;justify-content:flex-end;padding-bottom:6px;}
.hero-mark img{width:clamp(120px,15vw,220px);height:auto;opacity:.9;filter:drop-shadow(0 0 46px rgba(255,43,131,.16));animation:hero-mark-float 6s ease-in-out infinite;}
@keyframes hero-mark-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@media (prefers-reduced-motion: reduce){ .hero-mark img{animation:none;} }
@media (max-width:860px){.hero-mark{display:none;}}
.hero h1{
  font-size:clamp(46px,7.4vw,108px);line-height:.98;font-weight:500;
  letter-spacing:-.035em;text-wrap:balance;
}
.hero h1 .outline{-webkit-text-stroke:1px var(--white);color:transparent;}
.hero-sub{max-width:420px;color:var(--dim);font-size:16px;line-height:1.6;padding-bottom:10px;}
.hero-meta{display:flex;justify-content:space-between;align-items:flex-end;margin-top:56px;flex-wrap:wrap;gap:28px;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;}

/* hero selected-work strip */
.hero-strip{margin-top:54px;}
.hero-strip-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px;flex-wrap:wrap;}
.hero-strip-head span{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer);}
.hero-strip-head a{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);transition:color .3s;}
.hero-strip-head a:hover{color:var(--white);}
.hero-strip-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:14px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;}
.hero-strip-track::-webkit-scrollbar{display:none;}
.hero-strip-track .card{aspect-ratio:1/1;}
@media (max-width:640px){ .hero-strip-track{grid-auto-columns:minmax(120px,42%);} }

/* marquee */
.marquee-wrap{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:20px 0;overflow:hidden;position:relative;z-index:2;background:var(--black-2);
}
.marquee{display:flex;white-space:nowrap;animation:scroll 26s linear infinite;width:max-content;}
@media (prefers-reduced-motion: reduce){ .marquee{animation:none;} }
.marquee span{
  font-family:'Space Grotesk',sans-serif;font-size:15px;letter-spacing:.02em;
  color:var(--dimmer);padding:0 28px;display:flex;align-items:center;gap:28px;
}
.marquee span b{color:var(--white);font-weight:500;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- section shell ---------- */
section{position:relative;z-index:2;}
.section-pad{padding:140px 0;}
@media (max-width:560px){ .section-pad{padding:90px 0;} }
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:64px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(32px,4.2vw,54px);}
.section-head p{color:var(--dim);max-width:360px;font-size:15px;line-height:1.6;}
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.in-view{opacity:1;transform:translateY(0);}
.reveal-stagger > *{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal-stagger.in-view > *{opacity:1;transform:translateY(0);}
.reveal-stagger.in-view > *:nth-child(1){transition-delay:.03s;}
.reveal-stagger.in-view > *:nth-child(2){transition-delay:.09s;}
.reveal-stagger.in-view > *:nth-child(3){transition-delay:.15s;}
.reveal-stagger.in-view > *:nth-child(4){transition-delay:.21s;}
.reveal-stagger.in-view > *:nth-child(5){transition-delay:.27s;}
.reveal-stagger.in-view > *:nth-child(6){transition-delay:.33s;}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-stagger > *{opacity:1 !important;transform:none !important;transition:none !important;}
}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid{grid-template-columns:1fr;}}
.grid-16-9.grid{grid-template-columns:repeat(2,1fr);}
@media (max-width:700px){.grid-16-9.grid{grid-template-columns:1fr;}}
.grid-16-9 .card{aspect-ratio:16/9;}
.grid-empty{grid-column:1/-1;}

.card{
  position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1/1;
  border:1px solid var(--line);cursor:pointer;background:var(--card);
  box-shadow:var(--shadow-card);
  transition:transform .3s .5s,border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.card:hover,.card:focus-visible{border-color:var(--line-strong);box-shadow:var(--shadow-card-hover);}
.art{position:absolute;inset:0;transition:transform .7s var(--ease);background:var(--card);}
.art img{width:100%;height:100%;object-fit:cover;display:block;}
.art canvas.wm-canvas{width:100%;height:100%;display:block;}
.card:hover .art,.card:focus-visible .art{transform:scale(1.06);}
@media (prefers-reduced-motion: reduce){ .card:hover .art{transform:none;} }
.card-info{
  position:absolute;left:0;right:0;bottom:0;padding:20px;z-index:2;
  transform:translateY(8px);opacity:.92;transition:transform .4s var(--ease);
}
.card:hover .card-info,.card:focus-visible .card-info{transform:translateY(0);}
.card-info .g{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);}
.card-info h4{font-size:17px;margin-top:4px;font-weight:500;}
.card-expand{
  position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(244,244,242,.35);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.7);transition:all .35s var(--ease);z-index:2;background:rgba(8,8,10,.4);backdrop-filter:blur(6px);
}
.card:hover .card-expand,.card:focus-visible .card-expand{opacity:1;transform:scale(1);}

/* ---------- process ---------- */
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
@media (max-width:1080px){.process{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.process{grid-template-columns:1fr;}}
.step{background:var(--black);padding:32px 26px;position:relative;transition:background .35s var(--ease);}
.step:hover{background:var(--card);}
.step .num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);}
.step h3{margin-top:16px;font-size:18px;font-weight:500;}
.step p{margin-top:10px;font-size:13.5px;color:var(--dim);line-height:1.55;}
.price-line{
  margin-top:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  padding:20px 28px;border:1px solid var(--line);border-radius:14px;background:var(--black-2);
  box-shadow:var(--shadow-card);
}
.price-line span:first-child{color:var(--dim);font-size:14px;}
.price-badge{
  font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.04em;
  padding:9px 18px;border-radius:100px;background:var(--accent);color:#1a0410;font-weight:500;
}
.price-badge b{font-weight:700;}

/* ---------- reviews ---------- */
/* Note: named .review-* (not .testimonial-*) to match the merged "Reviews"
   feature — deliberately distinct from the unrelated .review-summary class
   used by the order form's wizard review step, to avoid confusion. */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px;}
@media (max-width:900px){.review-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.review-grid{grid-template-columns:1fr;}}
.review-card{
  border:1px solid var(--line);border-radius:16px;background:var(--card);padding:28px 26px;
  display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow-card);
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.review-card:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:var(--shadow-card-hover);}
.review-quote{font-size:15px;line-height:1.65;color:var(--white);}
.review-quote::before{content:'“';color:var(--accent);}
.review-quote::after{content:'”';color:var(--accent);}
.review-who{display:flex;align-items:center;gap:10px;}
.review-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--black-2);border:1px solid var(--line);flex:0 0 auto;}
.review-avatar-fallback{width:38px;height:38px;border-radius:50%;background:var(--black-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-size:13px;color:var(--dim);flex:0 0 auto;}
.review-name{font-size:13.5px;font-weight:500;}
.review-role{font-size:12px;color:var(--dimmer);}

/* Prominent aggregate rating banner — homepage teaser + Reviews page */
.reviews-rating-banner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 32px;padding:22px 26px;border:1px solid var(--line);border-radius:16px;background:var(--card);}
.reviews-rating-banner .rating-number{font-family:'Space Grotesk',sans-serif;font-size:32px;font-weight:600;color:var(--white);line-height:1;}
.reviews-rating-banner .rating-detail{font-size:13.5px;color:var(--dim);}
.reviews-see-all{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px;}

/* Star display — two stacked rows of glyphs; the top row is clipped via
   width:calc(rating/5*100%) to the rating percentage, so one implementation
   handles both whole ratings (a single review) and fractional averages
   (e.g. 4.9). Purely decorative — always paired with a numeric/text
   equivalent for accessibility (role="img" + aria-label here, plus a
   visible number alongside it in the rating banner). */
.star-rating{
  position:relative;
  display:inline-block;
  /* Without this, a flex-column parent with the default align-items:stretch
     (e.g. .review-card) stretches this element to the full width of the
     card instead of letting it size to its own 5-glyph content — which
     silently breaks the whole "clip the filled row to rating/5 width"
     technique below: 80% of a 300px card is still way wider than the
     5 actual star glyphs, so the pink fill overflows past all 5 of them
     and even a 4-star (or lower) rating renders as a full 5 stars. An
     explicit width keeps this element self-sized regardless of what kind
     of parent it ends up inside (flex column, flex row, or neither). */
  width:fit-content;
  font-size:var(--star-size,18px);
  line-height:1;
  letter-spacing:3px;
  color:var(--line-strong);
  white-space:nowrap;
}
.star-rating .star-row{white-space:nowrap;}
.star-rating .star-row-filled{
  position:absolute;
  top:0;left:0;
  overflow:hidden;
  width:calc(var(--rating,0) / 5 * 100%);
  color:var(--accent);
}

/* Star rating input (Reviews page submission form) — reversed radio+label
   order with flex row-reverse displays them left-to-right as stars 1-5,
   while the sibling-combinator :checked/:hover rules light up every star
   up to the chosen one, all without JS. */
.star-input{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px;margin-top:2px;}
.star-input input{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;}
.star-input label{font-size:28px;line-height:1;color:var(--line-strong);cursor:pointer;transition:color .15s;}
.star-input input:checked ~ label,
.star-input label:hover ~ label,
.star-input label:hover{color:var(--accent);}
.star-input input:focus-visible + label{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

/* ---------- FAQ ---------- */
.faq-list{margin-top:44px;border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);transition:background .3s var(--ease);}
.faq-item:hover{background:rgba(255,255,255,.025);}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:none;border:0;color:var(--white);text-align:left;padding:24px 4px;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:500;
  transition:color .3s var(--ease),padding-left .3s var(--ease);
}
.faq-q:hover{color:var(--accent);padding-left:10px;}
.faq-q .faq-icon{flex:0 0 auto;width:20px;height:20px;position:relative;transition:transform .35s var(--ease);}
.faq-q .faq-icon::before,.faq-q .faq-icon::after{content:'';position:absolute;background:currentColor;top:50%;left:50%;}
.faq-q .faq-icon::before{width:14px;height:1.5px;transform:translate(-50%,-50%);}
.faq-q .faq-icon::after{width:1.5px;height:14px;transform:translate(-50%,-50%);transition:transform .3s var(--ease);}
.faq-item[data-open="true"] .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(0);}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .4s var(--ease),padding .4s var(--ease);
  color:var(--dim);font-size:14.5px;line-height:1.7;
}
.faq-item[data-open="true"] .faq-a{padding-bottom:26px;}
.faq-a p{max-width:640px;}
@media (prefers-reduced-motion: reduce){ .faq-a{transition:none;} }

/* ---------- order ---------- */
.order-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;}
@media (max-width:960px){.order-grid{grid-template-columns:1fr;}}
.order-side h2{font-size:clamp(30px,3.6vw,44px);margin-bottom:18px;}
.order-side p{color:var(--dim);line-height:1.7;font-size:15px;max-width:420px;}
.order-list{margin-top:36px;display:flex;flex-direction:column;gap:16px;}
.order-list li{display:flex;gap:14px;align-items:flex-start;font-size:14px;color:var(--dim);}
.order-list li .ck{width:18px;height:18px;border:1px solid var(--line-strong);border-radius:5px;flex:0 0 auto;margin-top:2px;position:relative;}
.order-list li .ck::after{content:'';position:absolute;left:5px;top:2px;width:4px;height:8px;border-right:1px solid var(--white);border-bottom:1px solid var(--white);transform:rotate(45deg);}
.pay-row{display:flex;align-items:center;gap:10px;margin-top:32px;flex-wrap:wrap;}
.pay-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dimmer);}
.pay-pill{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.04em;
  padding:8px 16px;border-radius:100px;border:1px solid var(--line);color:var(--dim);
  transition:all .3s var(--ease);
}
.pay-pill:hover{color:var(--black);background:var(--white);border-color:var(--white);}
.pay-pill-cashapp{color:#00D632;border-color:rgba(0,214,50,.35);background:rgba(0,214,50,.06);}
.pay-pill-cashapp:hover{color:var(--black);background:#00D632;border-color:#00D632;}
.pay-pill-venmo{color:#3D95CE;border-color:rgba(61,149,206,.35);background:rgba(61,149,206,.06);}
.pay-pill-venmo:hover{color:var(--black);background:#3D95CE;border-color:#3D95CE;}
.pay-pill-stripe{color:#8b8cff;border-color:rgba(99,91,255,.35);background:rgba(99,91,255,.08);}
.pay-pill-stripe:hover{color:var(--black);background:#635BFF;border-color:#635BFF;}
.pay-note{margin-top:12px;font-size:12.5px;color:var(--dimmer);line-height:1.5;max-width:340px;}

form{display:flex;flex-direction:column;gap:18px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:560px){.row2{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}
.field label .req{color:var(--accent);}
.field-hint{font-size:11.5px;color:var(--dimmer);margin-top:-2px;}
.field input,.field select,.field textarea{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;color:var(--white);font-family:'Inter',sans-serif;font-size:14.5px;
  transition:border-color .3s,background .3s;outline:none;
}
.field textarea{resize:vertical;min-height:96px;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--line-strong);background:#131316;}
.field input::placeholder,.field textarea::placeholder{color:var(--dimmer);}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--bad);}
.field-error{font-size:12px;color:var(--bad);display:none;align-items:center;gap:6px;}
.field.has-error .field-error{display:flex;}
.field-checkbox{flex-direction:row;align-items:flex-start;gap:10px;}
.field-checkbox input[type="checkbox"]{
  width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--accent);background:var(--card);
}
.field-checkbox label{text-transform:none;font-family:'Inter',sans-serif;font-size:13.5px;color:var(--dim);letter-spacing:0;}
.field-checkbox label button{color:var(--accent);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;font:inherit;}
.license-checks{display:flex;flex-wrap:wrap;gap:10px 22px;}
.license-check{display:flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-size:13.5px;color:var(--dim);cursor:pointer;}
.license-check input[type="checkbox"]{width:18px;height:18px;flex:0 0 auto;accent-color:var(--accent);background:var(--card);}
/* honeypot — visually hidden, still in DOM/tab order excluded, screen readers skip via aria-hidden */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.file-drop{
  border:1px dashed var(--line-strong);border-radius:10px;padding:26px;text-align:center;
  color:var(--dim);font-size:13px;cursor:pointer;transition:border-color .3s,background .3s;
  overflow-wrap:anywhere;word-break:break-word;
}
.file-drop:hover,.file-drop.drag{border-color:var(--white);background:var(--card);color:var(--white);}
.file-drop input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}
.file-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.file-chip{
  display:flex;align-items:center;gap:8px;max-width:100%;
  background:var(--card);border:1px solid var(--line);border-radius:100px;
  padding:6px 8px 6px 14px;font-size:12.5px;color:var(--dim);font-family:'Inter',sans-serif;
  animation:chip-in .35s var(--ease);
}
.file-chip.file-chip-error{border-color:var(--bad);color:var(--bad);}
.file-chip .chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;}
.file-chip .chip-remove{
  flex:0 0 auto;width:18px;height:18px;border-radius:50%;
  background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--dim);font-size:13px;line-height:1;transition:background .2s,color .2s;border:0;
}
.file-chip .chip-remove:hover{background:var(--accent);color:var(--white);}
@keyframes chip-in{from{opacity:0;transform:translateY(4px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
@media (prefers-reduced-motion: reduce){ .file-chip{animation:none;} }
.form-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-top:6px;}
.form-note{font-size:12.5px;color:var(--dimmer);max-width:280px;}
.form-note a{color:var(--accent);border-bottom:1px solid transparent;transition:border-color .3s;}
.form-note a:hover{border-color:var(--accent);}
.form-status{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--dim);min-height:16px;}
.form-status.is-error{color:var(--bad);}
.form-status.is-success{color:var(--good);}

/* ---------- order form: one-question-at-a-time wizard ---------- */
.form-progress-wrap{margin-bottom:2px;}
.form-progress-bar{height:3px;background:var(--line);border-radius:100px;overflow:hidden;}
.form-progress-fill{height:100%;width:11%;background:var(--accent);border-radius:100px;transition:width .4s var(--ease);}
.form-step-count{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dimmer);margin:0;}
.form-steps{position:relative;}
.form-step{display:none;flex-direction:column;gap:18px;animation:step-in .35s var(--ease);}
.form-step.active{display:flex;}
.form-step-heading{font-size:clamp(19px,2.2vw,24px);line-height:1.25;margin:0;}
@keyframes step-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){ .form-step{animation:none;} }
.form-nav{display:flex;align-items:center;gap:14px;margin-top:4px;}
.review-summary{display:grid;grid-template-columns:minmax(130px,170px) 1fr;gap:12px 20px;margin-bottom:8px;}
.review-summary dt{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dimmer);}
.review-summary dd{margin:0;font-size:14px;color:var(--white);line-height:1.55;word-break:break-word;white-space:pre-wrap;}
@media (max-width:560px){
  .review-summary{grid-template-columns:1fr;gap:4px;}
  .review-summary dt{margin-top:10px;}
}

/* ---------- contact cta ---------- */
.cta-band{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:110px 0;text-align:center;position:relative;overflow:hidden;
}
.cta-band h2{font-size:clamp(34px,6vw,80px);line-height:1.02;}
.cta-band .btn{margin-top:38px;}
.cta-glow{position:absolute;top:50%;left:50%;width:600px;height:600px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(244,244,242,.08),transparent 70%);pointer-events:none;}
.discord-link{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--dim);border-bottom:1px solid transparent;transition:all .3s var(--ease);}
.discord-link:hover{color:var(--white);border-color:var(--white);}

/* ---------- contact section (business-facing) ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.contact-card{
  border:1px solid var(--line);border-radius:16px;background:var(--card);padding:28px 26px;
  box-shadow:var(--shadow-card);transition:border-color .3s,transform .3s,box-shadow .3s var(--ease);
}
.contact-card:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:var(--shadow-card-hover);}
.contact-card:hover .service-icon{border-color:var(--accent);color:var(--accent);}
.contact-card .service-icon{margin-bottom:18px;}
.contact-card h3{font-size:17px;margin-bottom:8px;}
.contact-card p{color:var(--dim);font-size:13.5px;line-height:1.6;margin-bottom:16px;}

/* ---------- footer ---------- */
footer{padding:70px 0 40px;position:relative;z-index:2;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.015) 40%);}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:50px;border-bottom:1px solid var(--line);}
.foot-brand .logo{margin-bottom:14px;}
.foot-brand p{color:var(--dim);font-size:14px;max-width:280px;line-height:1.6;}
.foot-cols{display:flex;gap:70px;flex-wrap:wrap;}
.foot-col h5{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dimmer);margin-bottom:16px;}
.foot-col a,.foot-col button{display:block;color:var(--dim);font-size:14px;margin-bottom:10px;transition:color .3s;background:none;border:0;text-align:left;cursor:pointer;padding:0;font-family:'Inter',sans-serif;}
.foot-col a:hover,.foot-col button:hover{color:var(--white);}
.social-row{display:flex;gap:12px;}
.social-btn{
  display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line-strong);color:var(--dim);
  transition:all .3s var(--ease);
}
.social-btn:hover{color:var(--black);background:var(--white);border-color:var(--white);transform:translateY(-3px);}
.social-btn-discord{color:var(--accent);border-color:var(--accent-dim);background:rgba(255,43,131,.06);}
.social-btn-discord:hover{color:var(--black);background:var(--accent);border-color:var(--accent);}
.social-hint{margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--dimmer);}
.foot-bottom{display:flex;justify-content:space-between;padding-top:26px;color:var(--dimmer);font-size:12.5px;flex-wrap:wrap;gap:10px;}

/* ---------- lightbox / modal (shared: project detail, payment, policy) ---------- */
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:40px;}
.lightbox.open{display:flex;}
@media (max-width:560px){ .lightbox{padding:16px;} }
.lightbox-bg{position:absolute;inset:0;background:rgba(6,6,7,.9);backdrop-filter:blur(10px);}
.lightbox-content{position:relative;z-index:2;max-width:680px;width:100%;max-height:88vh;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;transform:scale(.94);opacity:0;transition:all .4s var(--ease),max-width .3s var(--ease);}
.lightbox.open .lightbox-content{transform:scale(1);opacity:1;}
@media (prefers-reduced-motion: reduce){ .lightbox-content{transition:opacity .2s;} }
.lightbox-content.wide{max-width:1000px;}
.lightbox-content.narrow{max-width:520px;}
.lightbox-content.doc{max-width:720px;}
.lightbox-art{aspect-ratio:1/1;position:relative;flex:0 1 auto;min-height:0;max-height:70vh;}
.lightbox-art.wide{aspect-ratio:16/9;}
.lightbox-art .art img{object-fit:contain;background:var(--black-2);}
.lightbox-scroll{overflow-y:auto;}
.lightbox-body{padding:26px 28px 30px;flex:0 0 auto;}
.lightbox-body .g{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);letter-spacing:.08em;}
.lightbox-body h3{font-size:24px;margin:8px 0 14px;}
.lightbox-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(8,8,10,.6);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;color:var(--white);}
.lightbox-close:hover{background:rgba(255,255,255,.12);}

/* project detail modal meta rows */
.detail-meta{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin:18px 0;}
@media (max-width:480px){.detail-meta{grid-template-columns:1fr;}}
.detail-meta div span{display:block;}
.detail-meta .dm-label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dimmer);margin-bottom:4px;}
.detail-meta .dm-value{font-size:14px;color:var(--white);}
.detail-desc{color:var(--dim);font-size:14px;line-height:1.65;margin-bottom:6px;}
.detail-tag{display:inline-flex;padding:5px 12px;border-radius:100px;border:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);margin:2px 6px 2px 0;}

/* before/after compare */
.compare{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:0;}
.compare.wide{aspect-ratio:16/9;}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--black-2);}
.compare canvas.wm-canvas{position:absolute;inset:0;width:100%;height:100%;background:var(--black-2);}
.compare .compare-after{clip-path:inset(0 0 0 50%);}
.compare-handle{
  position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--white);cursor:ew-resize;
  transform:translateX(-1px);
}
.compare-handle::after{
  content:'↔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;background:var(--white);color:var(--black);
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.compare-label{position:absolute;top:12px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:rgba(8,8,10,.65);padding:5px 10px;border-radius:6px;}
.compare-label.before{left:12px;}
.compare-label.after{right:12px;}
input[type="range"].compare-slider{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;appearance:none;
}

/* "how payment works" step (inside the order form wizard) */
.payment-step-text{font-size:14px;line-height:1.6;color:var(--dim);margin-bottom:18px;}
.payment-step-methods{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.pay-pill-applepay{color:var(--white);border-color:var(--line-strong);background:rgba(255,255,255,.06);cursor:default;}
.payment-step-note{font-size:12.5px;line-height:1.55;color:var(--dimmer);margin-bottom:18px;}

/* policy / legal modal */
.policy-modal-content .lightbox-body{padding:34px 34px 36px;}
.policy-body h4{font-size:15px;margin:22px 0 8px;color:var(--white);}
.policy-body h4:first-child{margin-top:0;}
.policy-body p,.policy-body li{font-size:13.5px;line-height:1.7;color:var(--dim);}
.policy-body ul{padding-left:20px;margin-top:6px;}
.policy-body li{margin-bottom:4px;}

/* toast */
#toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(calc(100% + 40px));background:var(--white);color:var(--black);
  padding:14px 22px;border-radius:100px;font-size:13.5px;font-family:'Space Grotesk',sans-serif;font-weight:500;
  z-index:300;opacity:0;pointer-events:none;transition:transform .5s var(--ease),opacity .5s var(--ease);
  max-width:min(90vw,420px);text-align:center;}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto;}
#toast.is-error{background:var(--bad);color:var(--white);}
@media (prefers-reduced-motion: reduce){ #toast{transition:opacity .3s;} }

@media (max-width:560px){
  .hero{padding-top:100px;}
}

/* ---------- free web tools (bpm/key finder, cover mockup) ---------- */
.tool-card{
  max-width:560px;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:32px;box-shadow:var(--shadow-card);
}
.tool-card .file-drop{margin-bottom:0;}
.tool-card .field-hint{display:block;margin-top:10px;}
.tool-result{margin-top:26px;padding-top:26px;border-top:1px solid var(--line);text-align:center;}
.tool-result-value{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(48px,9vw,72px);
  line-height:1;color:var(--white);display:flex;align-items:baseline;justify-content:center;gap:10px;
}
.tool-result-value-text{font-size:clamp(32px,6vw,44px);}
.tool-result-unit{font-family:'JetBrains Mono',monospace;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}
.tool-result-note{color:var(--dim);font-size:13.5px;margin:10px 0 18px;}
.tool-adjust{margin-bottom:18px;}
.tool-adjust-label{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dimmer);margin-bottom:10px;}
.tool-adjust-btns{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;}
.tool-adjust-btns .btn{padding:8px 16px;font-size:12.5px;}
.tool-divider{
  display:flex;align-items:center;gap:14px;margin:28px 0 20px;
  color:var(--dimmer);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
}
.tool-divider::before,.tool-divider::after{content:'';flex:1;height:1px;background:var(--line);}
.tap-tempo{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.tap-tempo-readout{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:28px;color:var(--white);
  display:flex;align-items:baseline;gap:8px;
}
.tap-tempo-readout .tool-result-unit{font-size:12px;}
@media (max-width:560px){
  .tool-card{padding:24px 20px;}
}

/* ---------- cover mockup generator ---------- */
.mockup-fields{display:flex;gap:16px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line);}
.mockup-fields .field{flex:1;}
.mockup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px;align-items:start;}
.mockup-item{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;
  text-align:center;box-shadow:var(--shadow-card);
}
.mockup-canvas-wrap{margin-bottom:14px;display:flex;align-items:center;justify-content:center;}
.mockup-canvas-wrap canvas{width:100%;height:auto;display:block;border-radius:8px;}
@media (max-width:900px){.mockup-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){
  .mockup-grid{grid-template-columns:1fr;}
  .mockup-fields{flex-direction:column;gap:18px;}
}

/* ---------- audio visualizer ---------- */
.viz-card{max-width:860px;}
.viz-stage{margin-top:22px;}
.viz-canvas{width:100%;aspect-ratio:16/9;display:block;border-radius:12px;background:#0b0b0d;}
.viz-transport{display:flex;align-items:center;gap:14px;margin-top:16px;}
.viz-playbtn{
  flex:none;width:44px;height:44px;border-radius:50%;background:var(--white);color:var(--black);
  border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:box-shadow .3s var(--ease),transform .2s var(--ease);
}
.viz-playbtn:hover{box-shadow:0 0 24px 3px var(--accent-dim);}
.viz-playbtn:active{transform:scale(.94);}
.viz-playbtn svg{display:block;}
.viz-playbtn .viz-icon-play{margin-left:2px;}
.viz-playbtn .viz-icon-pause{display:none;}
.viz-playbtn.is-playing .viz-icon-play{display:none;}
.viz-playbtn.is-playing .viz-icon-pause{display:block;}
.viz-seek{
  flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;
  background:rgba(255,255,255,.15);outline:none;cursor:pointer;
}
.viz-seek::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--white);cursor:pointer;box-shadow:0 0 0 3px rgba(255,255,255,.12);
}
.viz-seek::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--white);border:0;cursor:pointer;
  box-shadow:0 0 0 3px rgba(255,255,255,.12);
}
.viz-time{
  flex:none;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--dim);
  min-width:82px;text-align:right;
}
.viz-downloadbtn{
  flex:none;display:flex;align-items:center;gap:7px;padding:9px 16px;border-radius:100px;
  border:1px solid var(--line);background:transparent;color:var(--dim);
  font-family:'Inter',sans-serif;font-size:12.5px;cursor:pointer;white-space:nowrap;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.viz-downloadbtn:hover{color:var(--white);border-color:var(--line-strong);}
.viz-downloadbtn svg{display:block;flex:none;}
.viz-downloadbtn:disabled{opacity:.4;cursor:not-allowed;}
.viz-downloadbtn:disabled:hover{color:var(--dim);border-color:var(--line);}
.viz-downloadbtn.is-recording{
  background:#ff3b3b;border-color:#ff3b3b;color:var(--white);
  animation:vizRecPulse 1.3s ease-in-out infinite;
}
@keyframes vizRecPulse{0%,100%{opacity:1;}50%{opacity:.62;}}
.viz-playbtn:disabled,.viz-seek:disabled{opacity:.4;cursor:not-allowed;}
.viz-download-hint{display:block;margin-top:10px;}
.viz-toggle-row{display:flex;gap:8px;flex-wrap:wrap;}
.viz-toggle{
  padding:9px 16px;border-radius:100px;border:1px solid var(--line);background:transparent;
  color:var(--dim);font-family:'Inter',sans-serif;font-size:12.5px;cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.viz-toggle:hover{color:var(--white);border-color:var(--line-strong);}
.viz-toggle.active{background:var(--white);color:var(--black);border-color:var(--white);}
.viz-bgimage-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.viz-bgimage-upload{
  display:flex;align-items:center;gap:7px;padding:9px 16px;border-radius:100px;
  border:1px solid var(--line);background:transparent;color:var(--dim);
  font-family:'Inter',sans-serif;font-size:12.5px;cursor:pointer;white-space:nowrap;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.viz-bgimage-upload:hover{color:var(--white);border-color:var(--line-strong);}
.viz-bgimage-thumb{
  width:32px;height:32px;border-radius:8px;background-size:cover;background-position:center;
  box-shadow:0 0 0 1px var(--line);flex:none;
}
.viz-bgimage-remove{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:transparent;
  color:var(--dim);cursor:pointer;font-size:12px;line-height:1;flex:none;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.viz-bgimage-remove:hover{color:var(--white);border-color:var(--line-strong);}
.viz-trackinfo-fields{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
.viz-text-input{
  flex:1;min-width:160px;background:transparent;border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;color:var(--white);font-family:'Inter',sans-serif;font-size:13px;outline:none;
  transition:border-color .25s var(--ease);
}
.viz-text-input:focus{border-color:var(--line-strong);}
.viz-text-input::placeholder{color:var(--dimmer);}
.viz-controls{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:20px;}
.viz-control-row{display:flex;gap:28px;flex-wrap:wrap;}
.viz-control-row .viz-control-group{flex:1;min-width:200px;}
.viz-control-label{
  display:flex;align-items:center;justify-content:space-between;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:10px;
}
.viz-control-value{color:var(--dim);font-size:10.5px;letter-spacing:0;text-transform:none;}
.viz-tabs{display:flex;flex-wrap:wrap;gap:8px;}
.viz-tab{
  padding:9px 18px;border-radius:100px;border:1px solid var(--line);background:transparent;
  color:var(--dim);font-family:'Inter',sans-serif;font-size:13px;cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.viz-tab:hover{color:var(--white);border-color:var(--line-strong);}
.viz-tab.active{background:var(--white);color:var(--black);border-color:var(--white);}
.viz-swatches{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.viz-swatch{
  width:28px;height:28px;border-radius:50%;background:var(--sw,#000);
  border:2px solid transparent;box-shadow:0 0 0 1px var(--line);cursor:pointer;
  padding:0;display:flex;align-items:center;justify-content:center;position:relative;
  transition:box-shadow .25s var(--ease),transform .2s var(--ease);
}
.viz-swatch:hover{transform:scale(1.08);}
.viz-swatch.active{box-shadow:0 0 0 2px var(--black),0 0 0 4px var(--white);}
.viz-swatch-custom{background:conic-gradient(from 0deg,#ff2b83,#ffcf5c,#3ddc84,#5ac8fa,#c9a6ff,#ff2b83);overflow:hidden;}
.viz-swatch-custom input[type="color"]{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0;
}
.viz-slider{
  width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;
  background:rgba(255,255,255,.15);outline:none;cursor:pointer;
}
.viz-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--accent);cursor:pointer;box-shadow:0 0 0 3px var(--accent-dim);
}
.viz-slider::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;background:var(--accent);border:0;cursor:pointer;
  box-shadow:0 0 0 3px var(--accent-dim);
}
@media (max-width:640px){
  .viz-transport{flex-wrap:wrap;}
  .viz-time{margin-left:58px;}
  .viz-downloadbtn{width:100%;justify-content:center;margin-top:4px;}
}

/* ---------- waveform image exporter ---------- */
.wave-actions{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:16px;}
.wave-actions .viz-downloadbtn{margin-left:auto;}
@media (max-width:640px){
  .wave-actions{flex-direction:column;align-items:stretch;}
  .wave-actions .viz-downloadbtn{margin-left:0;width:100%;justify-content:center;}
}

/* ---------- audio trimmer ---------- */
.trim-stage{margin-top:22px;}
.trim-track{
  position:relative;width:100%;aspect-ratio:16/5;border-radius:12px;overflow:hidden;
  background:#0b0b0d;touch-action:none;cursor:crosshair;
}
.trim-canvas{width:100%;height:100%;display:block;}
.trim-selection{
  position:absolute;top:0;bottom:0;background:rgba(255,43,131,.14);
  border-left:1px solid var(--accent);border-right:1px solid var(--accent);pointer-events:none;
}
.trim-playhead{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);pointer-events:none;}
.trim-handle{position:absolute;top:0;bottom:0;width:14px;margin-left:-7px;background:transparent;border:none;cursor:ew-resize;padding:0;}
.trim-handle::before{
  content:'';position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;
  background:var(--accent);border-radius:2px;
}
.trim-handle::after{
  content:'';position:absolute;top:50%;left:50%;width:14px;height:26px;margin:-13px 0 0 -7px;
  border-radius:6px;background:var(--accent);opacity:0;transition:opacity .2s var(--ease);
}
.trim-handle:hover::after,.trim-handle:focus-visible::after{opacity:.18;}
.trim-transport{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap;}
.trim-time{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--dim);letter-spacing:.02em;white-space:nowrap;}
.trim-fields{display:flex;gap:16px;margin-top:18px;flex-wrap:wrap;}
.trim-fields .field{flex:1;min-width:120px;}
.trim-duration-readout{
  display:block;font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--white);
  border:1px solid var(--line);border-radius:10px;padding:11px 14px;background:var(--card);
}
.trim-export-row{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:8px;flex-wrap:wrap;}
.trim-export-row .field-hint{margin:0;flex:1;min-width:160px;}
@media (max-width:640px){
  .trim-track{aspect-ratio:4/3;}
  .trim-export-row{flex-direction:column;align-items:stretch;}
  .trim-export-row .viz-downloadbtn{width:100%;justify-content:center;}
}

/* ---------- mp3 tag editor ---------- */
.tag-editor{margin-top:22px;}
.tag-preview-row{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-bottom:26px;padding-bottom:26px;border-bottom:1px solid var(--line);}
.tag-cover-upload{display:flex;flex-direction:column;align-items:center;gap:10px;}
.tag-cover-thumb{
  width:96px;height:96px;border-radius:10px;background-color:var(--card);border:1px solid var(--line);
  background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;
  color:var(--dimmer);font-size:11px;text-align:center;padding:6px;flex-shrink:0;
}
.tag-cover-btns{display:flex;gap:8px;}
.tag-preview-card{
  flex:1;min-width:220px;display:flex;align-items:center;gap:14px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:14px 18px;
}
.tag-preview-cover{width:52px;height:52px;border-radius:8px;background-color:#1a1a1d;background-size:cover;background-position:center;flex-shrink:0;}
.tag-preview-title{font-weight:600;font-size:15px;color:var(--white);}
.tag-preview-artist{font-size:12.5px;color:var(--dim);margin-top:2px;}
.tag-fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.tag-field-wide{grid-column:1/-1;}
.tag-bpm-row{display:flex;gap:8px;}
.tag-bpm-row input{flex:1;}
.tag-export-row{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-top:26px;padding-top:26px;border-top:1px solid var(--line);}
.tag-export-row .field{flex:1;min-width:160px;}
.tag-export-row .field-hint{margin:0;flex:2;min-width:160px;}
@media (max-width:640px){
  .tag-fields-grid{grid-template-columns:1fr;}
  .tag-preview-row{flex-direction:column;align-items:stretch;text-align:center;}
  .tag-export-row{flex-direction:column;align-items:stretch;}
  .tag-export-row .viz-downloadbtn{width:100%;justify-content:center;}
}

/* ---------- audio merger ---------- */
.merge-tracklist{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.merge-track-row{
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
}
.merge-track-index{
  flex:none;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.08);
  color:var(--dim);font-family:'JetBrains Mono',monospace;font-size:11px;
  display:flex;align-items:center;justify-content:center;
}
.merge-track-reorder{display:flex;flex-direction:column;gap:2px;flex:none;}
.merge-track-reorder button{
  width:22px;height:18px;border-radius:5px;border:1px solid var(--line);background:transparent;
  color:var(--dim);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.merge-track-reorder button:hover{color:var(--white);border-color:var(--line-strong);}
.merge-track-reorder button:disabled{opacity:.3;cursor:not-allowed;}
.merge-track-main{flex:1;min-width:160px;display:flex;flex-direction:column;gap:4px;}
.merge-track-name{
  background:transparent;border:0;border-bottom:1px solid transparent;color:var(--white);
  font-family:'Inter',sans-serif;font-size:13.5px;padding:2px 0;outline:none;width:100%;
  transition:border-color .2s var(--ease);
}
.merge-track-name:hover,.merge-track-name:focus{border-color:var(--line-strong);}
.merge-track-duration{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dimmer);}
.merge-track-controls{display:flex;gap:16px;flex-wrap:wrap;align-items:center;flex:2;min-width:260px;}
.merge-track-slidergroup{flex:1;min-width:96px;}
.merge-track-slidergroup .viz-control-label{margin-bottom:6px;font-size:9.5px;}
.merge-track-mute{
  flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;
  color:var(--dim);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.merge-track-mute:hover{color:var(--white);border-color:var(--line-strong);}
.merge-track-mute.active{background:#ff3b3b;border-color:#ff3b3b;color:var(--white);}
.merge-track-remove{
  flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:transparent;
  color:var(--dim);cursor:pointer;font-size:13px;line-height:1;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.merge-track-remove:hover{color:var(--white);border-color:#ff3b3b;}
.merge-empty{
  border:1px dashed var(--line);border-radius:12px;padding:26px 18px;text-align:center;
  color:var(--dimmer);font-size:12.5px;margin-top:18px;
}
.merge-timeline-wrap{margin-top:22px;}
.merge-timeline{
  position:relative;width:100%;aspect-ratio:16/5;border-radius:12px;background:#0b0b0d;overflow:hidden;
}
.merge-timeline-canvas{width:100%;height:100%;display:block;}
.merge-transport{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap;}
.merge-time{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--dim);letter-spacing:.02em;white-space:nowrap;}
.merge-status{font-size:11.5px;color:var(--dimmer);}
.merge-export-row{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:8px;flex-wrap:wrap;}
.merge-export-row .field-hint{margin:0;flex:1;min-width:160px;}
@media (max-width:640px){
  .merge-track-row{flex-direction:column;align-items:stretch;}
  .merge-track-controls{min-width:0;}
  .merge-export-row{flex-direction:column;align-items:stretch;}
  .merge-export-row .viz-downloadbtn{width:100%;justify-content:center;}
}

/* =========================================================
   BEAT UPLOAD — single-screen multi-track submission form
   (Beats page). All classes prefixed "beatup-" to avoid any
   collision with generic .field/.track/.chip/.switch usage
   elsewhere on the site.
   ========================================================= */
.beatup-upload-row{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px;}
.beatup-cover{
  position:relative;width:180px;height:180px;flex:0 0 180px;border-radius:var(--radius);
  background:linear-gradient(155deg,#ff2b83 0%,#9a1f5e 45%,var(--card-2) 100%);
  cursor:pointer;overflow:hidden;box-shadow:0 20px 40px -20px rgba(0,0,0,.7);border:1px solid var(--line);
  background-size:cover;background-position:center;
}
.beatup-cover .beatup-cover-overlay{
  position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:16px;
  background:linear-gradient(to top,rgba(0,0,0,.5),transparent 55%);opacity:0;transition:opacity .15s ease;
}
.beatup-cover:hover .beatup-cover-overlay{opacity:1;}
.beatup-cover .beatup-cover-overlay span{font-size:12.5px;font-weight:500;color:#fff;}
.beatup-cover input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}

.beatup-review-notice{
  display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--accent);
  border:1px solid var(--accent-dim);background:rgba(255,43,131,.06);border-radius:10px;
  padding:11px 14px;margin:18px 0 22px;
}
.beatup-review-notice svg{flex:0 0 auto;}
/* Longer callouts (e.g. the Get Paid page) wrap to multiple lines — top-align
   the icon instead of the default vertical-center so it doesn't look adrift
   next to a multi-line block of text. */
.beatup-review-notice.notice-wrap{align-items:flex-start;}
.beatup-review-notice.notice-wrap svg{margin-top:1px;}

/* Simple Q&A card grid — used on the "Get Paid" page. Same bordered-card
   language as .review-card/.order-side elsewhere on the site. */
.qa-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
@media (max-width:720px){.qa-grid{grid-template-columns:1fr;}}
.qa-card{
  border:1px solid var(--line);border-radius:14px;background:var(--card);
  padding:22px 24px;box-shadow:var(--shadow-card);
}
.qa-card h3{font-size:15.5px;font-weight:500;}
.qa-card p{margin-top:8px;font-size:13.5px;color:var(--dim);line-height:1.6;}

/* Age-track toggle (Stripe Setup page) — same pill-tab look as .filter-tab
   but rendered as real <button>s and wired independently, since this is a
   same-page content switch rather than page-hash navigation. */
.age-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;}
.age-tab{
  font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.05em;
  padding:9px 18px;border-radius:100px;border:1px solid var(--line);color:var(--dim);
  background:transparent;cursor:pointer;transition:all .3s var(--ease);
}
.age-tab:hover{color:var(--white);border-color:var(--line-strong);}
.age-tab.active{background:var(--white);color:var(--black);border-color:var(--white);}

/* Vertical numbered tutorial steps (Stripe Setup page) — unlike .process/.step
   (fixed 5-column grid) this stacks any number of steps in a single column,
   which fits a longer, more detailed walkthrough better than a wide grid. */
.tutorial-steps{margin-top:36px;display:flex;flex-direction:column;gap:0;max-width:640px;}
.tutorial-step{
  display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);
}
.tutorial-step:last-child{border-bottom:none;}
.tutorial-step .num{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);
}
.tutorial-step h3{font-size:15.5px;font-weight:500;margin-bottom:6px;}
.tutorial-step p{font-size:13.5px;color:var(--dim);line-height:1.65;}
.tutorial-step p+p{margin-top:8px;}

.beatup-meta-col{flex:1 1 320px;min-width:260px;}
.beatup-track-count{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--accent);margin:2px 0 16px;}
.beatup-remembered{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12px;color:var(--dimmer);margin:-10px 0 16px;
}
.beatup-remembered button{
  background:none;border:0;padding:0;color:var(--dim);font-size:12px;text-decoration:underline;cursor:pointer;font-family:inherit;
}
.beatup-remembered button:hover{color:var(--white);}
.beatup-discord-avatar-img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--card);}

.beatup-about-toggle{
  display:flex;align-items:center;gap:8px;background:none;border:1px dashed var(--line-strong);color:var(--dim);
  font-size:13px;font-family:'Inter',sans-serif;cursor:pointer;padding:10px 14px;border-radius:10px;width:100%;
  text-align:left;margin-bottom:16px;
}
.beatup-about-toggle:hover{border-color:var(--accent-dim);color:var(--white);}
.beatup-about-toggle svg{width:13px;height:13px;transition:transform .15s ease;flex:0 0 auto;}
.beatup-about-toggle.open svg{transform:rotate(90deg);}
.beatup-about-panel{
  display:none;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;margin:-6px 0 16px;
}
.beatup-about-panel.open{display:block;}

.beatup-dropzone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border:1.5px dashed var(--line-strong);border-radius:var(--radius);min-height:180px;padding:26px;
  cursor:pointer;transition:border-color .15s ease,background .15s ease;margin-bottom:20px;
}
.beatup-dropzone.drag{border-color:var(--accent);background:rgba(255,43,131,.05);}
.beatup-dropzone .beatup-cloud{width:30px;height:30px;color:var(--dim);margin-bottom:10px;}
.beatup-dropzone p{margin:0 0 6px;font-size:14px;color:var(--dim);}
.beatup-dropzone-sub{display:block;font-size:11.5px;color:var(--dimmer);margin-bottom:14px;}
.beatup-add-btn{
  display:inline-flex;align-items:center;gap:7px;background:var(--card-2);border:1px solid var(--line);
  color:var(--white);font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:9px;
}
.beatup-dropzone:hover .beatup-add-btn{border-color:var(--accent-dim);}
.beatup-dropzone input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}

.beatup-tracks{display:flex;flex-direction:column;gap:10px;}
.beatup-track{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.beatup-track.expanded{border-color:var(--accent-dim);}
.beatup-track.invalid{border-color:var(--bad);}
.beatup-track-row{display:flex;align-items:center;gap:12px;padding:12px 14px;}
.beatup-track-icon{
  width:32px;height:32px;border-radius:8px;flex:0 0 auto;
  background:linear-gradient(155deg,#ff2b83,#3a0f26);display:flex;align-items:center;justify-content:center;
}
.beatup-track-icon svg{width:14px;height:14px;color:rgba(255,255,255,.9);}
.beatup-track-info{flex:1 1 auto;min-width:0;}
.beatup-track-name{font-size:14px;font-weight:500;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.beatup-track-sub{font-size:11.5px;color:var(--dimmer);margin-top:2px;}
.beatup-track-sub.incomplete{color:var(--bad);}
.beatup-track-price-input{flex:0 0 auto;width:74px;text-align:right;padding:7px 9px;font-size:13px;}
.beatup-track-price-input:disabled{opacity:.4;cursor:not-allowed;}
.beatup-track-notforsale{flex:0 0 auto;font-size:12px;color:var(--dimmer);min-width:78px;text-align:right;}

.beatup-switch{position:relative;width:36px;height:20px;flex:0 0 auto;cursor:pointer;}
.beatup-switch input{opacity:0;width:0;height:0;}
.beatup-switch .beatup-switch-track{position:absolute;inset:0;background:#2a2a2e;border-radius:999px;transition:background .15s ease;}
.beatup-switch .beatup-knob{position:absolute;top:3px;left:3px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .15s ease;}
.beatup-switch input:checked + .beatup-switch-track{background:var(--accent);}
.beatup-switch input:checked + .beatup-switch-track .beatup-knob{transform:translateX(16px);}
.beatup-switch input:disabled + .beatup-switch-track{opacity:.4;cursor:not-allowed;}

.beatup-track-expand-btn,.beatup-track-remove-btn{
  background:none;border:none;color:var(--dimmer);cursor:pointer;padding:6px;border-radius:6px;
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
}
.beatup-track-expand-btn svg{width:15px;height:15px;transition:transform .15s ease;}
.beatup-track.expanded .beatup-track-expand-btn svg{transform:rotate(180deg);}
.beatup-track-expand-btn:hover{color:var(--white);background:var(--card-2);}
.beatup-track-expand-btn:disabled{opacity:.3;cursor:not-allowed;}
.beatup-track-remove-btn:hover{color:var(--bad);background:rgba(255,97,97,.08);}
.beatup-track-remove-btn svg{width:15px;height:15px;}

.beatup-track-detail{display:none;border-top:1px solid var(--line);padding:18px 16px 20px;background:var(--card-2);}
.beatup-track.expanded .beatup-track-detail{display:block;}
.beatup-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}

.beatup-chip-group{display:flex;flex-wrap:wrap;gap:8px;}
.beatup-chip{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);font-size:12.5px;color:var(--dim);
  cursor:pointer;user-select:none;transition:all .12s ease;
}
.beatup-chip:hover{border-color:var(--accent-dim);}
.beatup-chip.selected{background:rgba(255,43,131,.12);border-color:var(--accent);color:var(--white);}

.beatup-cover-override{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim);cursor:pointer;margin-top:26px;}
.beatup-cover-override input{width:15px;height:15px;accent-color:var(--accent);}

.beatup-empty-hint{font-size:12px;color:var(--dimmer);margin-top:12px;text-align:center;}
.beatup-submit-block{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);}
.beatup-submit-block .btn{width:100%;justify-content:center;}
.beatup-submit-block .btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none;}

@media (max-width:620px){
  .beatup-upload-row{flex-direction:column;}
  .beatup-cover{width:100%;height:auto;aspect-ratio:1/1;flex-basis:auto;}
  .beatup-row3{grid-template-columns:1fr;}
}