/* A crossfader recessed into the page, without a panel or outer border. */
.audience-selector { padding-top: 22px; }
.hardware-dj {
  --position: 0;
  --fader-ease: cubic-bezier(.22,1,.36,1);
  display: grid; grid-template-columns: minmax(0,1fr) clamp(150px,22vw,230px) minmax(0,1fr); grid-template-rows: auto auto; align-items: start; gap: 6px 24px;
  width: 100%; margin: 0 auto; padding: 0; border: 0; border-radius: 0;
  background: transparent; font: inherit; text-align: left; touch-action: pan-y; user-select: none;
}
.hardware-dj:focus-visible { outline: 1px dashed #ffb00099; outline-offset: 6px; border-radius: 5px; }
.fader-label { position: relative; display: grid; grid-template-rows: subgrid; grid-row: 1 / 3; align-self: stretch; color: #d1cbc0; opacity: .62; transition: opacity .4s,color .4s; min-width: 0; }
.fader-offer { display: contents; }
.fader-offer-title { grid-row: 1; align-self: center; }
.offer-details { display: grid; grid-row: 2; grid-template-rows: 0fr; align-self: start; min-width: 0; opacity: 0; visibility: hidden; transform: translateY(5px); transition: grid-template-rows .35s,opacity .3s,transform .35s,visibility 0s .35s; }
.offer-details[aria-hidden=false] { grid-template-rows: 1fr; opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s,.08s,.08s,0s; }
.offer-title-compact { display: none; }
.fader-label .fader-offer-title { display: block; font-size: clamp(22px,2.3vw,32px); line-height: 1.12; font-weight: 600; letter-spacing: -.04em; text-wrap: balance; }
.offer-features { display: flex; flex-direction: column; min-height: 0; overflow: hidden; gap: 5px; color: #e2ded6; text-align: left; }
.offer-feature { display: grid; grid-template-columns: 12px minmax(0,1fr); column-gap: 7px; font-size: 15px; line-height: 1.45; }
.offer-feature:before { content: '+'; color: var(--accent); font-size: 18px; font-weight: 600; line-height: 1.2; }
.position-new { grid-column: 1; text-align: left; }
.position-existing { grid-column: 3; }
.position-new .mode-light { right: -14px; }
.position-existing .mode-light { left: -14px; }
.mode-light { position: absolute; top: 44px; width: 6px; height: 6px; border-radius: 50%; background: #756b57; transition: background .25s,box-shadow .25s; }
body:not([data-audience=existing]) .position-new,body[data-audience=existing] .position-existing { opacity: 1; color: #f1f3f5; }
body:not([data-audience=existing]) .position-new .mode-light,body[data-audience=existing] .position-existing .mode-light { background: #ffb000; box-shadow: 0 0 10px #ffb00088; }
.fader-rail { grid-column: 2; grid-row: 1; align-self: center; display: block; position: relative; width: 100%; height: 94px; cursor: pointer; }
.hardware-dj { --left-light: 1; --right-light: .12; }
.hardware-dj[aria-checked=true] { --left-light: .12; --right-light: 1; }
.dj-scale { position: absolute; inset: 10px 24px; pointer-events: none; }
.dj-tick { --distance: max(calc(var(--position) - var(--tick)),calc(var(--tick) - var(--position))); --strength: calc(1 - var(--distance)); position: absolute; top: 0; bottom: 0; left: calc(var(--tick) * 100%); width: 1px; }
.dj-tick:before,.dj-tick:after { content: ''; position: absolute; left: 0; width: 1px; height: calc(2px + var(--strength) * 10px); opacity: calc(.1 + var(--strength) * .9); background: #dfb55f; transition: height .48s var(--fader-ease),opacity .48s var(--fader-ease); }
.dj-tick:before { top: 0; }
.dj-tick:after { bottom: 0; }
.hardware-dj.is-dragging .dj-tick:before,.hardware-dj.is-dragging .dj-tick:after { transition: none; }
.dj-track { position: absolute; top: 43px; left: 15px; right: 15px; height: 8px; border-radius: 5px; background: #090909; box-shadow: inset 0 2px 4px #000,0 1px 0 #ffffff0e,0 -1px 0 #0005; }
.dj-track:before,.dj-track:after { content: ''; position: absolute; top: 3px; width: 50%; height: 2px; background: #c7963a; box-shadow: 0 0 8px #ffb00033; transition: opacity .4s; }
.dj-track:before { left: 0; opacity: var(--left-light); }
.dj-track:after { right: 0; opacity: var(--right-light); }
.dj-progress { position: absolute; top: 46px; left: calc(24px + var(--position) * (50% - 24px)); width: calc(50% - 24px); height: 2px; border-radius: 2px; background: #edb64c; opacity: .6; box-shadow: 0 0 7px #ffb00033; transition: left .48s var(--fader-ease),opacity .25s; }
.dj-cap { position: absolute; top: 21px; left: calc(var(--position) * (100% - 48px)); width: 48px; height: 52px; border-radius: 4px; cursor: grab; transform: translateY(0); background: linear-gradient(90deg,#333532 0%,#8d908c 5%,#f4f2e9 12%,#c4c3ba 21%,#e5e3da 47%,#b2b1a9 78%,#81847e 91%,#323630 97%); box-shadow: 0 2px 1px #f8f6e84d inset,0 -3px 2px #0008 inset,0 7px 9px #0008,1px 1px 0 #ffffff2e; transition: left .48s var(--fader-ease),transform .25s var(--fader-ease),box-shadow .25s; }
.dj-cap:before { content: ''; position: absolute; inset: 4px 4px; border-radius: 2px; background: repeating-linear-gradient(0deg,#ffffff0c 0 1px,#00000008 1px 2px); pointer-events: none; }
.dj-cap:after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg,transparent 15%,#fff8 40%,transparent 65%); background-size: 250% 100%; background-position: 80% 0; opacity: .35; transition: background-position .5s var(--fader-ease),opacity .25s; }
.cap-grip { position: absolute; inset: 7px 5px; background: linear-gradient(90deg,transparent 0 5px,#44463d77 5px 6px,transparent 6px calc(100% - 6px),#44463d77 calc(100% - 6px) calc(100% - 5px),transparent calc(100% - 5px)); }
.cap-light { position: absolute; left: 22px; top: 0; bottom: 0; width: 3px; z-index: 1; background: #ffb000; box-shadow: -1px 0 #6e4e19,1px 0 #ffe6a666; transition: box-shadow .25s; }
.audience-selector+.hero { padding-top: 48px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.format-card.format-selected { outline: 1px solid #bd8b2f; outline-offset: 4px; }
@media(hover:none) {
  body[data-audience=existing] .position-new.is-touch-pressed,
  body:not([data-audience=existing]) .position-existing.is-touch-pressed { opacity: .65; }
}
@media(hover:hover) {
  body[data-audience=existing] .position-new:hover,
  body:not([data-audience=existing]) .position-existing:hover { opacity: .65; }
  .hardware-dj:hover .dj-cap { transform: translateY(-3px); box-shadow: 0 2px 1px #fff8 inset,0 -3px 2px #0008 inset,0 11px 13px #000a,0 0 18px #ffb0000d; }
  .hardware-dj:hover .dj-cap:after { background-position: 15% 0; opacity: .7; }
  .hardware-dj:hover .cap-light { box-shadow: -1px 0 #79561a,1px 0 #fff0ba,0 0 9px #ffb00077; }
  .hardware-dj:hover .dj-progress { opacity: 1; }
}
.hardware-dj.is-dragging .dj-cap { transition: transform .15s,box-shadow .15s; transform: translateY(-4px) scale(1.04); cursor: grabbing; box-shadow: 0 2px 1px #fff8 inset,0 -3px 2px #0008 inset,0 13px 16px #000b; }
.hardware-dj.is-dragging .dj-progress { transition: none; }
.hardware-dj.is-dragging .dj-scale { opacity: 1; }
@media(max-width:850px) {
  .offer-feature { font-size: 14px; }
}
@media(max-width:640px) {
  .audience-selector { padding-top: 19px; }
  .hardware-dj { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto 72px auto; gap: 8px 14px; }
  .fader-label { display: contents; opacity: 1; }
  .fader-label .fader-offer-title { color: #b2aba0; transition: color .4s; }
  body:not([data-audience=existing]) .position-new .fader-offer-title,
  body[data-audience=existing] .position-existing .fader-offer-title { color: #f1f3f5; }
  .position-new .fader-offer-title { grid-row: 1; grid-column: 1; }
  .position-existing .fader-offer-title { grid-row: 1; grid-column: 2; }
  .offer-details { grid-row: 3; grid-column: 1/-1; }
  body[data-audience=existing] .position-new.is-touch-pressed .fader-offer-title,
  body:not([data-audience=existing]) .position-existing.is-touch-pressed .fader-offer-title { color: #d7d0c4; }
  .offer-title-full { display: none; }
  .offer-title-compact { display: inline; }
  .fader-label .fader-offer-title { font-size: clamp(19px,4.8vw,25px); line-height: 1.15; }
  .offer-feature { font-size: 14px; }
  .offer-feature { grid-template-columns: 10px minmax(0,1fr); column-gap: 6px; }
  .offer-feature:before { font-size: 18px; }
  .position-new { grid-column: 1; text-align: left; }
  .position-existing { grid-column: 2; text-align: left; }
  .mode-light { display: none; }
  .fader-rail { grid-column: 1/-1; grid-row: 2; width: min(300px,100%); justify-self: center; height: 72px; }
  .dj-scale { inset-block: 5px; }
  .dj-track { top: 32px; }
  .dj-progress { top: 35px; }
  .dj-cap { top: 10px; }
  .audience-selector+.hero { padding-top: 44px; }
}
@media(prefers-reduced-motion:reduce) {
  .hardware-dj *, .hardware-dj *:before, .hardware-dj *:after { transition: none !important; animation: none !important; }
}