/* Marc IV Audio — shared finishing touches (v9).
   Loaded after each page's own styles. Layout is unchanged; these are small refinements. */

:root{color-scheme:dark;accent-color:#E2A23B;}
::selection{background:rgba(226,162,59,.35);color:#EDE7DB;}
h1,h2,h3{text-wrap:balance;}
p,li{text-wrap:pretty;}
a:focus-visible,button:focus-visible,summary:focus-visible,[role="button"]:focus-visible,[role="slider"]:focus-visible{
  outline:2px solid #E2A23B;outline-offset:3px;
}
/* links get slightly rounded corners on the ring; buttons keep their own shape (round buttons stay round) */
a:focus-visible{border-radius:3px;}
nav a,.cta,button.submit,.channel .pick{transition:color .2s ease,background-color .2s ease,border-color .2s ease;}

/* ---------- Logo glass sweep: a band of light crosses the logo, lighting each part in its own colour ---------- */
.logo-glint{position:relative;display:inline-block;line-height:0;vertical-align:top;}
.logo-glint img{display:block;}
.logo-glint .glint,
.logo-glint .glint::after{
  position:absolute;inset:0;pointer-events:none;
  background:url(/logo.svg) center/100% 100% no-repeat;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:300% 100%;mask-size:300% 100%;
  -webkit-mask-position:87.5% 0;mask-position:87.5% 0;
  animation:logo-glint 8s cubic-bezier(.45,0,.25,1) 1.2s infinite;
}
/* soft body of the glass reflection: a little brighter and wider (11 Oct), with extra saturation so
   the colours get richer rather than washing out to white */
.logo-glint .glint{
  filter:brightness(1.38) saturate(1.3);
  -webkit-mask-image:linear-gradient(110deg,transparent 37%,#000 50%,transparent 63%);
          mask-image:linear-gradient(110deg,transparent 37%,#000 50%,transparent 63%);
}
/* thin bright edge inside it, like light catching the edge of glass */
.logo-glint .glint::after{
  content:"";
  filter:brightness(1.3) saturate(1.25);
  -webkit-mask-image:linear-gradient(110deg,transparent 48.6%,#000 50%,transparent 51.4%);
          mask-image:linear-gradient(110deg,transparent 48.6%,#000 50%,transparent 51.4%);
  animation-delay:inherit;
}
footer .logo-glint .glint{animation-delay:4.2s;}
@keyframes logo-glint{
  0%{-webkit-mask-position:87.5% 0;mask-position:87.5% 0;}
  20%{-webkit-mask-position:12.5% 0;mask-position:12.5% 0;}
  100%{-webkit-mask-position:12.5% 0;mask-position:12.5% 0;}
}

/* ---------- Pricing faders: same caps as the mixer in the hero ---------- */
.channel .fader{height:4px;background:#262626;margin:18px 0 22px;}
.channel .fader::after{
  top:-6px;width:30px;height:16px;border-radius:4px;transform:translateX(-50%);
  background:linear-gradient(#0C0C0C,#0C0C0C) center/calc(100% - 8px) 2px no-repeat,linear-gradient(#D6C29E,#A8915F);
  box-shadow:0 2px 6px rgba(0,0,0,.6);
}
.channel.basic .fader::after{left:12%;}
.channel.mid .fader::after{left:50%;background:linear-gradient(#0C0C0C,#0C0C0C) center/calc(100% - 8px) 2px no-repeat,linear-gradient(#F2BC62,#E2A23B);}
.channel.pro .fader::after{left:88%;}
.channel.mid{box-shadow:0 0 0 1px rgba(226,162,59,.25),0 18px 48px -24px rgba(226,162,59,.35);}
.channel .price{font-variant-numeric:lining-nums;}

/* ---------- FAQ: answers open smoothly where the browser supports it ---------- */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords;}
  .faq details::details-content{
    block-size:0;overflow:clip;
    transition:block-size .3s ease,content-visibility .3s allow-discrete;
  }
  .faq details[open]::details-content{block-size:auto;}
}

@media (prefers-reduced-motion: reduce){
  .logo-glint .glint{animation:none;display:none;}
  .faq details::details-content{transition:none;}
  nav a,.cta,button.submit,.channel .pick{transition:none;}
}