/* VON — LED light sheets banner with a working copy of the RC03RF remote */
.led-stage { position: relative; isolation: isolate; height: clamp(660px, 100svh, 1040px); background: #0B0908; color: var(--on-dark); overflow: hidden; }
.ls-scene { position: absolute; inset: 0; z-index: -1; }
.ls-scene img, .ls-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ls-scene img { object-fit: cover; object-position: 60% 45%; }
.ls-scene canvas { opacity: 0; transition: opacity .9s var(--ease); }
.led-stage.gl .ls-scene canvas { opacity: 1; }
.ls-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 6, 5, .9) 0%, rgba(8, 6, 5, .66) 26%, rgba(8, 6, 5, .12) 46%, rgba(8, 6, 5, 0) 58%),
              linear-gradient(180deg, rgba(8, 6, 5, .55) 0%, rgba(8, 6, 5, 0) 18%, rgba(8, 6, 5, 0) 84%, rgba(8, 6, 5, .55) 100%); }
.ls-grid { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 31rem) auto; grid-template-rows: auto auto; justify-content: start; align-content: center; column-gap: clamp(28px, 4.4vw, 84px); row-gap: 34px; padding-top: 72px; padding-bottom: 72px; }
.ls-copy { grid-area: 1 / 1; align-self: end; }
.ls-cta { grid-area: 2 / 1; align-self: start; }
.ls-side { grid-area: 1 / 2 / 3 / 3; align-self: center; }
.ls-copy { display: flex; flex-direction: column; gap: 26px; }
.ls-h { font-size: clamp(50px, 6.2vw, 104px); line-height: .95; letter-spacing: -.02em; }
.ls-h .ln { display: block; }
.ls-p { color: var(--on-dark-muted); max-width: 29rem; }
.ls-cta .btn-solid { background: var(--on-dark); color: var(--ink); }
.ls-cta .btn-solid:hover { background: var(--white); }
.ls-side { display: flex; align-items: center; gap: 30px; }
.ls-info { display: flex; flex-direction: column; gap: 16px; width: 15.5rem; padding: 22px 24px 20px; border-radius: 16px; background: rgba(12, 10, 9, .62); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); box-shadow: inset 0 0 0 1px rgba(238, 232, 222, .08), 0 24px 60px -24px rgba(0, 0, 0, .7); }
.ls-hint { margin: 0; font-size: 14px; line-height: 1.55; color: var(--on-dark-muted); letter-spacing: .02em; }
.ls-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.ls-legend li { display: flex; align-items: center; gap: 11px; color: var(--on-dark-muted); transition: color .3s; }
.ls-legend li b { font-weight: 500; width: 1.1em; color: var(--on-dark); }
.ls-legend .sw { width: 22px; height: 6px; border-radius: 3px; background: var(--c, #333); box-shadow: 0 0 10px var(--c, transparent); opacity: .25; transition: opacity .35s, background-color .35s, box-shadow .35s; }
.ls-legend li.on .sw { opacity: 1; }
.ls-legend li.sel { color: var(--on-dark); }
.ls-status { margin: 0; min-height: 1.5em; font-size: 14px; color: var(--brass-hi); letter-spacing: .02em; }
.ls-credit { position: absolute; right: var(--gutter); bottom: 22px; font-size: 13px; color: var(--on-dark-muted); opacity: .8; }

/* ---------- the remote ---------- */
.rc { --rw: clamp(132px, 9.6vw, 158px); position: relative; flex: none; width: var(--rw); height: calc(var(--rw) * 2.72); border-radius: calc(var(--rw) * .17);
  padding: calc(var(--rw) * .1) calc(var(--rw) * .085) 0; display: flex; flex-direction: column; align-items: center; gap: calc(var(--rw) * .085);
  background: linear-gradient(100deg, #e9e9e5 0%, #fbfbf9 14%, #f7f7f4 70%, #e7e7e2 100%);
  box-shadow: 0 46px 70px -30px rgba(0, 0, 0, .95), 0 18px 26px -14px rgba(0, 0, 0, .7), inset 0 1px 0 #fff, inset 0 -4px 8px rgba(0, 0, 0, .10), inset 0 0 0 1px rgba(255, 255, 255, .5);
  transform: rotate(-4deg); touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.rc button { -webkit-tap-highlight-color: transparent; font-family: var(--f-sans); cursor: pointer; }
.rc button:focus-visible, .rc-wheel:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; }
.rc-led { position: absolute; top: calc(var(--rw) * .045); left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #c9c9c4; }
.rc-led.blink { animation: rc-blink .28s ease-out; }
@keyframes rc-blink { 0% { background: #ff5a3c; box-shadow: 0 0 8px 2px rgba(255, 90, 60, .8); } 100% { background: #c9c9c4; box-shadow: none; } }
.rc-power { display: flex; width: 100%; height: calc(var(--rw) * .15); border-radius: 999px; overflow: hidden;
  background: linear-gradient(#fdfdfc, #efefec); box-shadow: 0 2px 3px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .07), inset 0 1px 0 #fff; }
.rc-power button { flex: 1; border: 0; background: transparent; color: #8e8e89; font-size: calc(var(--rw) * .085); font-weight: 600; letter-spacing: .04em; }
.rc-power button + button { box-shadow: inset 1px 0 0 rgba(0, 0, 0, .05); }
.rc-power button:active, .rc-k:active, .rc-zone button:active { background: rgba(0, 0, 0, .06); }
.rc-wheel { position: relative; width: 92%; aspect-ratio: 1; border-radius: 50%; cursor: pointer; touch-action: none;
  background: conic-gradient(from 0deg, hsl(90 95% 52%), hsl(45 100% 52%) 45deg, hsl(0 100% 56%) 90deg, hsl(315 95% 58%) 135deg, hsl(270 90% 58%) 180deg, hsl(225 95% 56%) 225deg, hsl(180 95% 48%) 270deg, hsl(135 90% 48%) 315deg, hsl(90 95% 52%) 360deg);
  box-shadow: 0 0 0 calc(var(--rw) * .018) #f4f4f1, 0 0 0 calc(var(--rw) * .026) rgba(0, 0, 0, .07), inset 0 0 calc(var(--rw) * .05) rgba(0, 0, 0, .18); }
.rc-wheel::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .55) 0 30%, rgba(255, 255, 255, 0) 62%); }
.rc-hub { position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; transform: translate(-50%, -50%); border-radius: 50%; background: #fbfbf9; box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 2px rgba(0, 0, 0, .06); }
.rc-hub::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%); border-radius: 50%; background: #b7b7b2; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.rc-mark { position: absolute; left: 50%; top: 50%; width: 14%; height: 14%; margin: -7%; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 2px 5px rgba(0, 0, 0, .4); background: var(--mc, transparent);
  transform: rotate(var(--a, 0deg)) translateY(calc(var(--rw) * -.29)) rotate(calc(var(--a, 0deg) * -1)); transition: transform .12s linear, opacity .3s; }
.rc-wheel.white .rc-mark { opacity: 0; }
.rc-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--rw) * .062) calc(var(--rw) * .07); width: 100%; }
.rc-k { height: calc(var(--rw) * .145); border: 0; border-radius: calc(var(--rw) * .04); padding: 0; display: grid; place-items: center; color: #8b8b86;
  font-size: calc(var(--rw) * .072); font-weight: 600; background: linear-gradient(#fdfdfc, #ececea); box-shadow: 0 2px 3px rgba(0, 0, 0, .17), 0 0 0 1px rgba(0, 0, 0, .07), inset 0 1px 0 #fff; }
.rc-k svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 1.5; }
.rc-k.act { color: #4a4a46; box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .1), inset 0 1px 2px rgba(0, 0, 0, .12); }
.rc-zones { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--rw) * .05); width: 100%; margin-top: calc(var(--rw) * .02); }
.rc-zone { position: relative; height: calc(var(--rw) * .5); border-radius: 999px; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(#fdfdfc, #ececea); box-shadow: 0 2px 3px rgba(0, 0, 0, .17), 0 0 0 1px rgba(0, 0, 0, .07), inset 0 1px 0 #fff; }
.rc-zone button { flex: 1; border: 0; background: transparent; display: grid; place-items: center; color: #9a9a95; padding: 0; }
.rc-zone .z-on::before { content: ""; width: 2px; height: calc(var(--rw) * .075); border-radius: 2px; background: currentColor; }
.rc-zone .z-off::before { content: ""; width: calc(var(--rw) * .05); height: calc(var(--rw) * .05); border-radius: 50%; border: 2px solid currentColor; }
.rc-zone span { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: calc(var(--rw) * .062); color: #a3a39e; pointer-events: none; }
.rc-zone.sel span { color: var(--brass); font-weight: 600; }

@media (max-width: 760px) {
  .led-stage { height: auto; display: flex; flex-direction: column; padding: 64px 0 40px; }
  .ls-grid { display: contents; }
  .ls-copy { order: 1; padding: 0 var(--gutter); gap: 18px; }
  .ls-h { font-size: clamp(44px, 12vw, 64px); }
  .ls-scene { order: 2; position: relative; inset: auto; z-index: 0; margin-top: 26px; aspect-ratio: 1300 / 1350; }
  .ls-scene img { object-position: 50% 50%; }
  .ls-shade { background: linear-gradient(180deg, #0B0908 0%, rgba(11, 9, 8, 0) 14%, rgba(11, 9, 8, 0) 80%, #0B0908 100%); }
  .ls-side { order: 3; padding: 0 var(--gutter); margin-top: -64px; align-items: flex-end; gap: 22px; position: relative; z-index: 1; }
  .rc { --rw: 136px; transform: rotate(-3deg); }
  .ls-info { width: auto; flex: 1; padding: 0 0 6px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 0; }
  .ls-cta { order: 4; padding: 28px var(--gutter) 0; }
  .ls-cta .btn { flex: 1 1 auto; }
  .ls-credit { position: static; order: 5; padding: 18px var(--gutter) 0; font-size: 12px; }
}
/* desktop and tablet: copy and zone legend on the left, the remote on the right, so the lit stone stays clear */
@media (min-width: 761px) {
  .ls-grid { grid-template-columns: minmax(0, 40rem) 1fr auto; grid-template-rows: 1fr auto auto auto 1fr; row-gap: 0; padding-top: 96px; padding-bottom: 48px; }
  .ls-copy { grid-area: 2 / 1; align-self: auto; }
  .ls-cta { grid-area: 3 / 1; align-self: auto; margin-top: 34px; }
  .ls-side { display: contents; }
  .rc { --rw: clamp(136px, 10.2vw, 170px); grid-area: 1 / 3 / 6 / 4; align-self: center; }
  .ls-info { grid-area: 4 / 1; margin-top: 44px; width: auto; max-width: 28rem; padding: 22px 0 0; gap: 14px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 0; border-top: 1px solid rgba(238, 232, 222, .14); }
  .ls-legend { display: grid; grid-template-columns: repeat(2, max-content); gap: 9px 34px; }
}
@media (min-width: 761px) and (max-height: 820px) {
  .ls-h { font-size: clamp(46px, min(6.2vw, 10.5svh), 104px); }
  .ls-copy { gap: 18px; }
  .ls-cta { margin-top: 24px; }
  .ls-info { margin-top: 26px; padding-top: 18px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .rc-led.blink { animation: none; } .ls-scene canvas { transition: none; } }