/* Shadow Rack - website. Black, white and the logo's red; console metaphors (LEDs, LCDs, scribble strips).
   Alive but readable: plain sentences in Inter, headings in Jost, the motion kept quiet enough to read through. */
:root {
  --bg: #060607;
  --bg2: #0c0c0e;
  --surface: #111114;
  --surface2: #18181c;
  --border: #24242a;
  --borderHi: #3a3a42;
  --text: #f4f4f4;
  --dim: #b2b2ba;
  --faint: #6f6f78;
  --red: #c8242c;
  --redLit: #ff3b40;
  --green: #36d15c;
  --yellow: #e9d23c;
  --cyan: #22c3e6;
  --head: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--red); color: #fff; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); }
.label { font: 600 12px/1 var(--head); letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }

/* ------------------------------------------------------------------ atmosphere (quiet) */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(0, 0); } }
.cursor { position: fixed; left: 0; top: 0; width: 380px; height: 380px; margin: -190px 0 0 -190px; z-index: 1; pointer-events: none; background: radial-gradient(circle, rgba(200, 36, 44, .09), rgba(200, 36, 44, 0) 62%); transform: translate3d(-999px, -999px, 0); }
@media (hover: none) { .cursor { display: none; } }

/* ------------------------------------------------------------------ intro (once per visit, short) */
#loader { position: fixed; inset: 0; z-index: 200; background: #000; display: grid; place-items: center; overflow: hidden; }
#loader .slashes { position: absolute; inset: 0; }
#loader .slashes i { position: absolute; top: -20%; width: 2px; height: 140%; background: var(--red); transform: rotate(28deg) scaleY(0); transform-origin: top; opacity: .8; }
#loader img { width: min(340px, 64vw); opacity: 0; filter: blur(10px); }
.no-js #loader, .loaded #loader { display: none; }

/* ------------------------------------------------------------------ nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 80; border-bottom: 1px solid transparent; transition: background .35s, border-color .35s; }
.nav .wrap { display: flex; align-items: center; gap: 26px; height: 68px; }
.nav.solid { background: rgba(6, 6, 7, .82); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-color: var(--border); }
.nav .brand img { height: 32px; width: auto; }
.nav .links { display: flex; gap: 24px; margin-left: auto; }
.nav .links a { position: relative; padding: 6px 0; font: 500 15px var(--sans); color: var(--dim); transition: color .2s; }
.nav .links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--redLit); transition: right .3s ease; }
.nav .links a:hover, .nav .links a.on { color: var(--text); }
.nav .links a:hover::after, .nav .links a.on::after { right: 0; }
.nav .lang { display: flex; margin-left: 22px; margin-right: 14px; border-radius: 7px; border: 1px solid var(--border); overflow: hidden; }
.nav .lang a { padding: 5px 9px; font: 600 12px var(--sans); letter-spacing: .06em; color: var(--faint); transition: color .2s, background .2s; }
.nav .lang a:hover { color: var(--text); }
.nav .lang a.on { color: var(--text); background: #1d1d22; }
.nav .burger { display: none; width: 40px; height: 40px; margin-left: auto; position: relative; }
.nav .burger i { position: absolute; left: 9px; right: 9px; height: 2px; background: var(--text); transition: transform .25s, top .25s; }
.nav .burger i:nth-child(1) { top: 15px; } .nav .burger i:nth-child(2) { top: 23px; }
.nav.open .burger i:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav.open .burger i:nth-child(2) { top: 19px; transform: rotate(-45deg); }

/* ------------------------------------------------------------------ buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 8px; font: 600 15px var(--sans); white-space: nowrap;
  background: linear-gradient(#222227, #17171a); border: 1px solid var(--borderHi); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; overflow: hidden; isolation: isolate; transition: transform .2s, border-color .2s, box-shadow .2s, background .2s; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.12), transparent 70%); opacity: 0; transition: opacity .3s; }
.btn:hover::before { opacity: 1; }
.btn:hover { transform: translateY(-1px); border-color: #55555e; }
.btn .led { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; }
.btn.primary { background: linear-gradient(#d22a32, #ac1d24); border-color: #f0464c; color: #fff; box-shadow: 0 10px 30px rgba(200, 36, 44, .28), 0 1px 0 rgba(255,255,255,.22) inset; }
.btn.primary:hover { box-shadow: 0 14px 40px rgba(255, 59, 64, .38), 0 1px 0 rgba(255,255,255,.22) inset; }
.btn.small { height: 38px; padding: 0 16px; font-size: 14px; }
.btn .arrow { transition: transform .25s; }
.btn:hover .arrow { transform: translateX(3px); }
.key { height: 32px; padding: 0 12px; border-radius: 5px; background: linear-gradient(#2a2a30, #1b1b1f); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); font: 700 11px var(--head); letter-spacing: .12em; color: var(--dim); }
.key.on { color: #000; background: var(--yellow); }
.key.mute.on { background: var(--redLit); }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; padding: 150px 0 0; overflow: hidden; }
#signal { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .75; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 35%; background: linear-gradient(transparent, var(--bg)); z-index: 1; pointer-events: none; }
.hero-inner { position: relative; z-index: 3; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 8px 15px; border: 1px solid var(--border); border-radius: 100px; background: rgba(17,17,20,.7); font-size: 14px; color: var(--dim); }
.eyebrow .led { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: blink 2.4s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.hero h1 { margin: 0 auto; font: 700 clamp(42px, 7.2vw, 104px)/.98 var(--head); letter-spacing: -.03em; }
.hero h1 .line { display: block; overflow: hidden; padding: .03em 0 .18em; margin-bottom: -.13em; }
.hero h1 .line > span { display: inline-block; }
.hero h1 .soft { color: #8e8e98; }
.hero h1 .red { color: var(--redLit); }
.hero .lead { max-width: 700px; margin: 28px auto 0; font-size: clamp(17px, 1.55vw, 20px); color: var(--dim); }
.hero .lead b { color: var(--text); font-weight: 600; }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.specs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 22px; font-size: 14px; color: var(--faint); }
.specs span::before { content: "✓"; color: var(--green); margin-right: 7px; }
.hero-shot { position: relative; z-index: 2; margin: 70px auto 0; width: min(1400px, 95vw); perspective: 2000px; }
.shot-3d { position: relative; transform-origin: 50% 0; will-change: transform; }
.hero-shot .shot-3d { transform: rotateX(18deg) scale(.94); }
.hero-shot .reflection { position: absolute; left: 8%; right: 8%; bottom: -60px; height: 140px; background: radial-gradient(ellipse at center, rgba(255, 59, 64, .18), transparent 70%); filter: blur(30px); z-index: -1; }

/* the app's window */
.screen { position: relative; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 110px rgba(0,0,0,.75); }
.screen .chrome { height: 26px; display: flex; align-items: center; gap: 7px; padding: 0 12px; background: #1b1b1e; border-bottom: 1px solid #000; }
.screen .chrome i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.screen .chrome i:nth-child(2) { background: #febc2e; } .screen .chrome i:nth-child(3) { background: #28c840; }
.screen .chrome span { margin: 0 auto; font: 500 12px var(--sans); color: var(--faint); transform: translateX(-26px); }
.screen .pic { position: relative; }
.screen canvas.meters { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.screen .glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.05), transparent 38%); }
.shot { border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 24px 60px rgba(0,0,0,.55); }
/* a picture under the mouse lifts a little, a light sweeping across it */
.enlarge { transition: transform .6s cubic-bezier(.2, .75, .2, 1), box-shadow .6s; }
.screen.enlarge::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.09) 50%, transparent 65%); background-size: 250% 100%; background-position: 130% 0; }
.enlarge.lift { transform: translateY(-6px) scale(1.06); box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 60px 130px rgba(0,0,0,.85); }
.screen.enlarge.lift::after { background-position: -30% 0; transition: background-position 1.1s ease; }

/* ------------------------------------------------------------------ marquee (slow, small) */
.marquee { position: relative; z-index: 2; padding: 56px 0 30px; overflow: hidden; }
.marquee .track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.marquee .track span { font: 600 clamp(22px, 2.6vw, 34px)/1 var(--head); padding-right: 34px; white-space: nowrap; color: #3d3d45; }
.marquee .track span b { color: var(--red); padding-left: 34px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ products overview */
.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-top: 40px; }
.product { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; isolation: isolate; transition: border-color .25s, transform .25s; }
.product::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.05), transparent 60%); }
.product:hover { border-color: var(--borderHi); transform: translateY(-3px); }
.product:hover::before { opacity: 1; }
.product img { height: 46px; width: auto; align-self: flex-start; margin: -4px 0 16px -4px; }
.product h3 { margin: 0 0 8px; font: 600 22px/1.25 var(--head); }
.product p { margin: 0 0 16px; color: var(--dim); font-size: 16px; }
.product ul { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 7px; flex: 1; }
.product li { position: relative; padding-left: 24px; font-size: 15px; color: var(--dim); }
.product li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.product .foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--border); }
.product .price { font: 700 26px var(--head); }
.product .price small { font: 500 13px var(--sans); color: var(--faint); margin-left: 6px; }
.product .more { font-weight: 600; font-size: 15px; transition: color .2s; }
.product .more:hover { color: var(--redLit); }
.product.fx { border-top: 3px solid var(--red); }
.product.iem { border-top: 3px solid var(--cyan); }
.product.wing { border-top: 3px solid var(--yellow); }

/* ------------------------------------------------------------------ chapters */
.chapter { position: relative; padding: clamp(100px, 12vw, 160px) 0 0; }
/* where a product starts: its logo, what it is, its price - so nobody takes the three for one */
.prod-banner { --c: var(--red); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 28px; padding: 18px 0; margin-bottom: clamp(36px, 4.5vw, 56px);
  border-top: 1px solid color-mix(in srgb, var(--c) 55%, transparent); border-bottom: 1px solid var(--border); }
.prod-banner.iem { --c: var(--cyan); } .prod-banner.wing { --c: var(--yellow); }
.prod-banner img { height: 52px; width: auto; }
.pb-text { display: grid; gap: 2px; }
.pb-kind { font: 600 11.5px var(--head); letter-spacing: .2em; text-transform: uppercase; color: var(--c); }
.pb-text b { font: 600 clamp(20px, 2vw, 24px)/1.2 var(--head); }
.pb-line { color: var(--dim); font-size: 15px; }
.pb-price { display: grid; justify-items: end; font: 600 22px/1 var(--head); color: var(--text); }
.pb-price small { font: 500 12.5px var(--sans); color: var(--faint); margin-top: 6px; }
@media (max-width: 760px) {
  .prod-banner { grid-template-columns: minmax(0, 1fr) auto; }
  .prod-banner img { grid-column: 1 / -1; height: 40px; }
}
.chapter-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 36px; align-items: end; margin-bottom: clamp(44px, 6vw, 80px); }
.chapter-num { --c: var(--red); grid-row: span 3; padding-bottom: .06em; font: 700 clamp(80px, 11vw, 170px)/.8 var(--head); letter-spacing: -.05em; color: transparent; background: linear-gradient(180deg, var(--c), rgba(0,0,0,0) 92%); -webkit-background-clip: text; background-clip: text; opacity: .55; }
.chapter-head .label { color: var(--redLit); }
.chapter-head h2 { margin: 6px 0 0; font: 700 clamp(32px, 4.4vw, 56px)/1.08 var(--head); letter-spacing: -.02em; }
.chapter-head h2 em { font-style: normal; color: #8e8e98; }
.chapter-head p { max-width: 680px; margin: 14px 0 0; font-size: clamp(17px, 1.45vw, 19px); color: var(--dim); }
#iem .chapter-num { --c: var(--cyan); } #iem .chapter-head .label { color: var(--cyan); }
#wing .chapter-num { --c: var(--yellow); } #wing .chapter-head .label { color: var(--yellow); }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 2px 2px .08em; margin: -2px -2px -.08em; }
.split .w > span { display: inline-block; }

/* ------------------------------------------------------------------ the FX story (sticky picture, readable steps) */
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 5vw, 72px); margin-bottom: clamp(60px, 8vw, 100px); }
.story .steps { padding: 4vh 0 22vh; }
.story .step { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; opacity: .4; transition: opacity .45s; }
.story .step.on { opacity: 1; }
.step .tag { display: inline-flex; align-items: center; gap: 10px; font: 600 12px var(--mono); color: var(--faint); letter-spacing: .12em; margin-bottom: 14px; }
.step .tag i { width: 24px; height: 2px; background: var(--red); }
.step h3 { margin: 0 0 14px; font: 600 clamp(26px, 2.6vw, 36px)/1.15 var(--head); letter-spacing: -.01em; }
.step p { margin: 0; color: var(--dim); max-width: 480px; }
.ticks { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 28px; font-size: 16px; }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.story .stage-col { position: relative; }
.story .sticky { position: sticky; top: 14vh; height: 72vh; display: grid; place-items: center; }
.vis { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(24px); transition: opacity .55s, transform .7s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.vis.on { opacity: 1; transform: none; pointer-events: auto; }
.vis > * { width: 100%; }
.vis.mixer .pan { height: 100%; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 30px 90px rgba(0,0,0,.7); }
.vis.mixer .pan .screen { width: 200%; border-radius: 0; box-shadow: none; animation: pan 30s ease-in-out infinite alternate; }
@keyframes pan { 0% { transform: translate(0, 0); } 100% { transform: translate(-50%, -8%); } }
.vis.chain img { width: auto; height: 100%; max-height: 72vh; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 30px 90px rgba(0,0,0,.7); }
.vis.chain { justify-items: center; }
.vis.running img { border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 30px 90px rgba(0,0,0,.7); }

/* demo widgets */
.widget { border-radius: 12px; background: #0c0c0f; border: 1px solid var(--border); padding: 18px; box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.widget .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font: 600 12px var(--head); letter-spacing: .16em; color: var(--faint); }
.widget .head b { font-family: var(--mono); letter-spacing: .02em; }
.fade-demo { display: grid; gap: 14px; }
.fade-demo .head b { color: var(--redLit); }
.fade-demo .good .head b { color: var(--green); }
.fade-demo canvas { width: 100%; height: 100px; display: block; }
.crash { font-family: var(--mono); }
.crash .state { display: flex; align-items: center; gap: 8px; color: var(--green); }
.crash .state i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.crash .slot { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px; margin-bottom: 7px; border-radius: 7px; background: #18181b; border: 1px solid #26262b; font: 600 15px var(--sans); transition: background .3s, border-color .3s, opacity .3s; }
.crash .slot .n { font: 700 12px var(--mono); color: var(--faint); width: 12px; }
.crash .slot .bar { width: 3px; align-self: stretch; margin: 11px 0; background: var(--green); border-radius: 2px; }
.crash .slot .chip { margin-left: auto; font: 700 10px var(--head); letter-spacing: .12em; padding: 5px 8px; border-radius: 4px; opacity: 0; }
.crash .slot.bad { background: #2a1012; border-color: var(--redLit); }
.crash .slot.bad .bar { background: var(--redLit); }
.crash .slot.bad .chip { opacity: 1; background: var(--redLit); color: #000; }
.crash .slot.off { opacity: .55; } .crash .slot.off .bar { background: var(--faint); }
.crash .slot.off .chip { opacity: 1; background: #333; color: var(--text); }
.crash .wave { height: 60px; margin-top: 12px; border-radius: 7px; background: #050506; border: 1px solid #1d1d21; overflow: hidden; }
.crash .wave canvas { width: 100%; height: 100%; display: block; }
.crash .log { margin-top: 12px; min-height: 84px; font: 500 13px/1.6 var(--mono); color: var(--dim); }
.crash .log b { color: var(--text); }
.crash .log .r { color: var(--redLit); } .crash .log .g { color: var(--green); } .crash .log .y { color: var(--yellow); } .crash .log .t { color: var(--faint); }

/* ------------------------------------------------------------------ "everything in ..." lists */
.all { padding: clamp(26px, 3.5vw, 40px); border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.all h3 { margin: 0 0 26px; font: 600 23px var(--head); }
.all .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.all .item { display: grid; grid-template-columns: 34px 1fr; gap: 0 12px; }
.all .item svg { grid-row: span 2; width: 26px; height: 26px; margin-top: 2px; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke: #ff6a6e; }
.all .item b { font-weight: 600; font-size: 15.5px; line-height: 1.4; }
.all .item span { font-size: 14.5px; color: var(--dim); line-height: 1.5; }
#iem .all .item svg { stroke: var(--cyan); } #wing .all .item svg { stroke: var(--yellow); }

/* a feature: picture and words side by side */
.feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4.5vw, 64px); align-items: center; margin-bottom: clamp(70px, 8vw, 110px); }
.feature.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.feature.flip .media { order: 2; }
.feature h3 { margin: 0 0 12px; font: 600 clamp(24px, 2.5vw, 32px)/1.2 var(--head); }
.feature p { margin: 0; color: var(--dim); }
.media.center { display: grid; justify-items: center; }
.feature.stack { grid-template-columns: minmax(0, 1fr); gap: 34px; }
.feature.stack .media { display: grid; gap: 22px; justify-items: center; }
.feature.stack .media .hud { width: 340px; }
.feature.stack > div:last-child { max-width: 720px; }

/* ------------------------------------------------------------------ IEM demo */
.iem-demo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 4vw, 60px); align-items: center; margin-bottom: clamp(60px, 8vw, 100px); padding: clamp(20px, 3vw, 36px); border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.how { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-bottom: 10px; font-size: 15px; color: var(--dim); }
.how b { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 7px; border-radius: 50%; background: var(--cyan); color: #000; font: 700 12px var(--sans); }
.space { position: relative; aspect-ratio: 1; width: 100%; max-width: 640px; margin: 0 auto; }
.space canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: #18181c; border: 1px solid var(--borderHi); box-shadow: 0 12px 30px rgba(0,0,0,.6); transition: transform .25s, opacity .35s; }
.play:hover { transform: translate(-50%, -50%) scale(1.04); }
@keyframes ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }
.play svg { width: 30px; height: 30px; margin: 0 auto 6px; fill: var(--text); }
.play span { display: block; font: 600 11px/1.45 var(--head); letter-spacing: .14em; color: var(--dim); }
.play span b { color: var(--text); }
.playing .play { opacity: 0; pointer-events: none; }
.seg { display: inline-flex; padding: 3px; border-radius: 8px; background: #050506; border: 1px solid var(--border); }
.seg button { height: 34px; padding: 0 14px; border-radius: 6px; font: 600 12px var(--head); letter-spacing: .14em; color: var(--faint); transition: color .2s, background .2s; }
.seg button.on { color: var(--text); background: #232328; box-shadow: inset 0 -2px 0 var(--redLit); }
.knob-row { display: inline-flex; align-items: center; gap: 10px; padding: 0 12px; height: 42px; border-radius: 8px; background: #050506; border: 1px solid var(--border); }
.knob-row input { width: 110px; accent-color: var(--cyan); }
.knob-row .mono { font-size: 12px; width: 36px; }
.iem-controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-top: 16px; }
.pick { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 6px 0 4px; border-radius: 8px; background: #050506; border: 1px solid var(--border); }
.pick .chip { height: 32px; min-width: 92px; padding: 0 12px; border-radius: 5px; display: grid; place-items: center; color: #000; font: 600 14px var(--head); }
.pick input { width: 100px; accent-color: var(--text); }
.pick .mono { font-size: 12px; width: 36px; text-align: right; }
#stopBand { height: 42px; padding: 0 16px; }
.phone-col { display: grid; justify-items: center; gap: 14px; }
.phone { position: relative; width: 290px; height: 600px; border-radius: 46px; padding: 11px; background: linear-gradient(145deg, #2c2c31, #0e0e10 40%, #1d1d21); box-shadow: 0 0 0 1px #3c3c44, 0 40px 90px rgba(0,0,0,.7), 0 0 80px rgba(34,195,230,.08); }
.phone::before { content: ""; position: absolute; top: 21px; left: 50%; width: 86px; height: 24px; margin-left: -43px; background: #000; border-radius: 20px; z-index: 2; }
.phone iframe { width: 100%; height: 100%; border: 0; border-radius: 36px; background: #08080a; }
.phone-col p { max-width: 290px; margin: 0; text-align: center; font-size: 14.5px; color: var(--dim); }
.phone-col p b { color: var(--text); }

/* ------------------------------------------------------------------ Wing demo */
.follow { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #0c0c0f; margin-bottom: clamp(60px, 8vw, 100px); }
.follow .eq { padding: 20px; border-right: 1px solid var(--border); }
.follow .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font: 600 12px var(--head); letter-spacing: .16em; color: var(--faint); }
.follow .head b { color: var(--text); font-family: var(--mono); letter-spacing: .02em; }
.follow .eq canvas { width: 100%; height: 330px; display: block; cursor: pointer; border-radius: 8px; background: #050506; touch-action: none; }
.follow .desk { padding: 20px; background: linear-gradient(#141417, #0e0e10); }
.follow .note { margin: 16px 0 0; font-size: 15px; color: var(--dim); }
.follow .note b { color: var(--text); }
.wing-knobs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wknob { display: grid; justify-items: center; gap: 10px; }
.wknob .lcd { width: 100%; height: 44px; border-radius: 4px; background: #050506; box-shadow: 0 0 0 1px #2a2a30; display: grid; place-items: center; text-align: center; font: 700 11px/1.25 var(--mono); padding: 0 4px; }
.wknob .lcd span { display: block; color: var(--yellow); }
.wknob .lcd.flash { animation: flash .5s; }
@keyframes flash { 0% { background: #3a3510; } 100% { background: #050506; } }
.wknob .dial { position: relative; width: 70px; height: 70px; border-radius: 50%; cursor: ns-resize; touch-action: none; background: radial-gradient(circle at 50% 30%, #3a3a42, #121215 70%); box-shadow: 0 6px 14px rgba(0,0,0,.7), 0 0 0 1px #000; }
.wknob .dial svg { position: absolute; inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); }
.wknob .dial .cap { position: absolute; inset: 12px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #2d2d33, #18181b); transition: transform .06s; }
.wknob .dial .cap i { position: absolute; left: 50%; top: 5px; width: 3px; height: 13px; margin-left: -1.5px; border-radius: 2px; background: #fff; }
.wing-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.wing-buttons button { height: 36px; border-radius: 5px; background: linear-gradient(#2a2a30, #1b1b1f); border: 1px solid #000; font: 700 10.5px var(--head); letter-spacing: .12em; color: var(--dim); }
.wing-buttons button:hover, .wing-buttons button.lit { color: #fff; box-shadow: 0 0 0 1px var(--yellow); }
.knobhud { margin-top: 18px; padding: 12px 16px 14px; border-radius: 10px; border: 2px solid var(--redLit); background: #18181b; }
.knobhud .k { font: 600 11px var(--head); letter-spacing: .14em; color: var(--faint); }
.knobhud .row { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 10px; }
.knobhud .name { font: 600 22px var(--head); text-transform: uppercase; }
.knobhud .v { font: 700 22px var(--mono); color: var(--redLit); }
.knobhud .bar { height: 6px; border-radius: 3px; background: #2a2a2f; overflow: hidden; }
.knobhud .bar i { display: block; height: 100%; width: 50%; background: var(--redLit); }
.safety { display: inline-flex; align-items: center; margin-top: 18px; border-radius: 8px; background: #050506; box-shadow: 0 0 0 1px #2a2a30; cursor: pointer; user-select: none; }
.safety span { padding: 10px 13px; font: 700 11px var(--head); letter-spacing: .14em; color: var(--faint); transition: color .25s; }
.safety .led { width: 8px; height: 8px; border-radius: 50%; padding: 0; margin: 0 2px 0 13px; background: var(--green); box-shadow: 0 0 8px var(--green); transition: background .25s, box-shadow .25s; }
.safety.direct .led { background: var(--redLit); box-shadow: 0 0 8px var(--redLit); }
.safety .through { color: var(--text); } .safety.direct .through { color: var(--faint); } .safety.direct .direct { color: var(--redLit); }

/* ------------------------------------------------------------------ IEM facts, numbers */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: clamp(60px, 8vw, 100px); background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.facts > div { padding: 26px 24px; background: var(--bg); }
.facts .big { font: 700 38px/1 var(--head); letter-spacing: -.02em; margin-bottom: 10px; }
.facts .big small { font-size: 16px; color: var(--faint); margin-left: 4px; }
.facts p { margin: 0; font-size: 15px; color: var(--dim); }
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; padding: clamp(60px, 8vw, 100px) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.numbers .n { font: 700 clamp(48px, 6vw, 84px)/.95 var(--head); letter-spacing: -.03em; }
.numbers .n small { font-size: .32em; color: var(--faint); letter-spacing: 0; margin-left: 6px; }
.numbers p { margin: 12px 0 0; color: var(--dim); font-size: 15px; max-width: 250px; }

/* ------------------------------------------------------------------ pricing: what do you do? */
.whofor { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 18px; }
.wf-list { display: grid; gap: 8px; align-content: start; }
.wf-list button { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); text-align: left; transition: border-color .2s, background .2s, transform .2s; }
.wf-list button:hover { border-color: var(--borderHi); }
.wf-list button svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--faint); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.wf-list button b { display: block; font: 600 16.5px/1.3 var(--head); color: var(--dim); transition: color .2s; }
.wf-list button small { font-size: 13.5px; color: var(--faint); }
.wf-ask { font: 600 11px var(--head); letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin: 0 0 4px 2px; }
.wf-list button { --c: var(--red); position: relative; padding-right: 50px; }
.wf-list button.iem { --c: var(--cyan); } .wf-list button.wing { --c: var(--yellow); }
.wf-list .tick { position: absolute; right: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 6px; border: 1.5px solid #4a4a52; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.wf-list button.on { background: color-mix(in srgb, var(--c) 7%, #141418); border-color: var(--c); box-shadow: 0 0 0 1px var(--c); }
.wf-list button.on b { color: #fff; } .wf-list button.on svg { stroke: var(--c); }
.wf-list button.on .tick { background: var(--c); border-color: var(--c); }
.wf-list button.on .tick::after { content: "✓"; font: 800 13px/1 var(--sans); color: #000; }

.wf-stage { display: flex; flex-direction: column; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.wf-head { padding: 18px 24px 4px; font: 600 11.5px var(--head); letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.wf-items { list-style: none; margin: 0; padding: 8px 24px 14px; flex: 1; }
.wf-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 16px; max-height: 0; opacity: 0; overflow: hidden; border-top: 1px solid transparent;
  transition: max-height .4s ease, opacity .3s, padding .4s, border-color .3s; }
.wf-item.on { max-height: 110px; opacity: 1; padding: 14px 0; border-top-color: var(--border); }
.wf-items .wf-item.on:first-of-type, .wf-items .wf-item:not(.on) + .wf-item.on { border-top-color: transparent; }
.wf-item img { width: 96px; height: auto; }
.wf-item b { display: block; font: 600 17px var(--head); }
.wf-item small { font-size: 14px; color: var(--dim); }
.wf-price { font: 700 19px var(--head); }
.wf-item.in-bundle .wf-price { color: var(--faint); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.35); font-weight: 600; }
.wf-result { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 28px; border-top: 1px solid var(--border); background: rgba(0,0,0,.25); }
.wf-result.in .wf-get, .wf-result.in .wf-sum { animation: sayin .35s; }
.wf-get { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.wf-need { font-size: 15px; color: var(--dim); }
.wf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wf-chips i { font-style: normal; color: var(--faint); font-weight: 600; }
.wf-note { flex-basis: 100%; font-size: 13.5px; color: var(--faint); }
.wf-note:empty { display: none; }
.wf-sum { font: 700 34px var(--head); }
.wf-buy { flex: none; display: grid; grid-template-columns: auto auto; align-items: center; justify-items: end; gap: 6px 16px; }
.wf-get { flex: 1 1 auto; min-width: 0; }
.wf-sum { white-space: nowrap; }
.wf-buy .wf-cart { height: 46px; }
.wf-buy .wf-cart[disabled] { opacity: .4; pointer-events: none; }
.wf-trial { grid-column: 1 / -1; font-size: 13.5px; color: var(--dim); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--borderHi); }
.wf-trial:hover { color: var(--text); }
.shop-notice { position: fixed; left: 50%; bottom: 24px; z-index: 100; max-width: min(560px, calc(100% - 32px)); padding: 14px 18px; border-radius: 10px; background: #222228; border: 1px solid var(--borderHi); box-shadow: 0 20px 50px rgba(0,0,0,.6); font-size: 15px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.shop-notice.on { opacity: 1; transform: translate(-50%, 0); }
.pchip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 6px; font: 600 14px var(--sans); white-space: nowrap; border: 1px solid; }
.pchip.fx { color: #ff6a6e; border-color: rgba(255, 59, 64, .45); background: rgba(255, 59, 64, .1); }
.pchip.iem { color: var(--cyan); border-color: rgba(34, 195, 230, .45); background: rgba(34, 195, 230, .08); }
.pchip.wing { color: var(--yellow); border-color: rgba(233, 210, 60, .45); background: rgba(233, 210, 60, .08); }
.pchip.all { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); }
.whofor-note { margin: 16px 0 0; text-align: center; font-size: 14.5px; color: var(--dim); }
@media (max-width: 1100px) {
  .whofor { grid-template-columns: minmax(0, 1fr); }
  .wf-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wf-ask { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .wf-list { grid-template-columns: minmax(0, 1fr); }
  .wf-list button { padding: 12px; gap: 10px; }
  .wf-list button svg { display: none; }
  .wf-items { padding: 6px 16px 10px; }
  .wf-item { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; }
  .wf-item img { width: 64px; }
  .wf-result { padding: 16px; flex-direction: column; align-items: stretch; }
  .wf-buy { grid-template-columns: auto 1fr; justify-items: stretch; }
  .wf-trial { text-align: center; }
}

/* ------------------------------------------------------------------ pricing */
.pricing { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); transition: transform .25s, border-color .25s; }
.plan:hover { transform: translateY(-3px); border-color: var(--borderHi); }
.plan img { height: 40px; width: auto; align-self: flex-start; margin: -4px 0 14px -4px; }
.plan h3 { margin: 0 0 4px; font: 600 20px var(--head); }
.plan .for { margin: 0 0 18px; font-size: 14.5px; color: var(--dim); min-height: 46px; }
.plan .amount { font: 700 46px/1 var(--head); letter-spacing: -.02em; }
.plan .amount small { font: 500 14px var(--sans); color: var(--faint); letter-spacing: 0; margin-left: 6px; }
.plan .sub { margin: 8px 0 18px; font-size: 13px; color: var(--faint); }
.plan ul { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 8px; flex: 1; }
.plan li { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--dim); }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.plan.best { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 24px 70px rgba(200, 36, 44, .16); }
.plan .badge { position: absolute; top: -12px; left: 24px; padding: 4px 10px; border-radius: 5px; background: var(--red); color: #fff; font: 700 11px var(--head); letter-spacing: .12em; }
.terms { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; margin-top: 30px; color: var(--dim); font-size: 15px; }
.terms span::before { content: "✓"; color: var(--green); font-weight: 700; margin-right: 8px; }
.note { margin-top: 12px; text-align: center; font-size: 13.5px; color: var(--faint); }

/* ------------------------------------------------------------------ FAQ */
.faq { max-width: 880px; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 600 19px/1.35 var(--head); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--borderHi); position: relative; transition: transform .3s, background .25s, border-color .25s; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--text); }
.faq summary i::after { transform: rotate(90deg); transition: transform .3s; }
.faq details[open] summary i { transform: rotate(180deg); background: var(--red); border-color: var(--red); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq .a { padding: 0 50px 22px 0; color: var(--dim); }
.faq .a p { margin: 0 0 10px; }

/* ------------------------------------------------------------------ final + footer */
.final { position: relative; margin-top: clamp(100px, 12vw, 160px); padding: clamp(80px, 10vw, 130px) 0; text-align: center; overflow: hidden; border-top: 1px solid var(--border); }
.final h2 { margin: 0; font: 700 clamp(36px, 6vw, 80px)/1.02 var(--head); letter-spacing: -.03em; }
.final h2 .red { color: var(--redLit); }
.final p { margin: 18px auto 0; max-width: 560px; color: var(--dim); font-size: 18px; }
.final .rays { position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(118deg, transparent 0 46px, rgba(200, 36, 44, .12) 46px 48px); mask-image: radial-gradient(ellipse at center, #000 10%, transparent 65%); -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 65%); animation: rays 18s linear infinite; }
@keyframes rays { to { background-position: 400px 0; } }
footer { border-top: 1px solid var(--border); padding: 56px 0 30px; background: linear-gradient(#08080a, #050506); }
footer .top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 44px; }
footer .about img { height: 52px; width: auto; margin: -6px 0 14px -6px; }
footer .about p { margin: 0 0 20px; max-width: 340px; color: var(--dim); font-size: 14.5px; line-height: 1.6; }
footer nav { display: flex; flex-direction: column; gap: 10px; }
footer h5 { margin: 6px 0 6px; font: 600 12px var(--head); letter-spacing: .16em; color: var(--faint); text-transform: uppercase; }
footer nav a { color: var(--dim); font-size: 15px; transition: color .2s; width: fit-content; }
footer nav a:hover { color: var(--text); }
footer .bottom { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; padding-top: 22px; border-top: 1px solid var(--border); color: var(--faint); font-size: 12.5px; }
footer .bottom .marks { flex: 1; min-width: 260px; text-align: right; }

/* ------------------------------------------------------------------ text pages */
.doc { max-width: 820px; margin: 0 auto; padding: 130px var(--gutter) 90px; }
.doc h1 { margin: 10px 0 26px; font: 700 clamp(36px, 5vw, 54px)/1.05 var(--head); }
.doc h2 { margin: 44px 0 12px; font: 600 23px var(--head); }
.doc p, .doc li { color: var(--dim); }
.doc a { color: var(--text); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.doc pre { white-space: pre-wrap; font: 12.5px/1.6 var(--mono); color: var(--dim); background: #0b0b0d; border: 1px solid var(--border); border-radius: 10px; padding: 20px; max-height: 420px; overflow: auto; }
.doc .todo { padding: 16px 18px; border-radius: 10px; border: 1px dashed var(--yellow); color: var(--yellow); font: 500 14px var(--mono); }

/* reveal (set by JS) */
.reveal { opacity: 0; transform: translateY(26px); }

/* ------------------------------------------------------------------ smaller screens */
@media (max-width: 1100px) {
  .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .all .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .nav .links { position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 6px var(--gutter) 18px; background: rgba(6,6,7,.97); border-bottom: 1px solid var(--border); display: none; }
  .nav.open .links { display: flex; }
  .nav .links a { padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 16px; }
  .nav .burger { display: block; }
  .nav .btn.small { display: none; }
  .hero { padding-top: 120px; }
  .products { grid-template-columns: minmax(0, 1fr); }
  .chapter-head { grid-template-columns: minmax(0, 1fr); }
  .chapter-num { grid-row: auto; }
  .story { grid-template-columns: minmax(0, 1fr); }
  .story .stage-col { display: none; }
  .story .steps { padding: 0; }
  .story .step { min-height: 0; padding: 30px 0; opacity: 1; }
  .vis.inline { position: relative; inset: auto; margin-top: 26px; opacity: 1; transform: none; }
  .vis.inline.mixer .pan { height: 300px; }
  .vis.inline.chain img { max-height: 70vh; }
  .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); }
  .feature.flip .media { order: 0; }
  .iem-demo, .follow { grid-template-columns: minmax(0, 1fr); }
  .follow .eq { border-right: 0; border-bottom: 1px solid var(--border); }
  .follow .eq canvas { height: 240px; }
  .numbers { grid-template-columns: 1fr 1fr; }
  footer .top { grid-template-columns: 1fr 1fr; }
  footer .about { grid-column: 1 / -1; }
  footer .bottom .marks { text-align: left; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero h1 { font-size: clamp(36px, 10.5vw, 56px); }
  .pricing, .all .grid, .facts, .numbers { grid-template-columns: minmax(0, 1fr); }
  .wing-knobs, .wing-buttons { gap: 6px; }
  .wknob .dial { width: 56px; height: 56px; }
  .wknob .lcd { font-size: 9.5px; }
  .pick { flex-wrap: wrap; height: auto; padding: 6px; justify-content: center; }
  .phone { width: 262px; height: 540px; }
  .play { width: 110px; height: 110px; }
  .knobhud .name, .knobhud .v { font-size: 18px; }
  footer .top { grid-template-columns: 1fr; }
  .faq .a { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .grain { display: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ tours (the app clicked through) */
.tour { margin-bottom: clamp(60px, 8vw, 100px); }
.tour[hidden] { display: none; }
.tour-screen { position: relative; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 110px rgba(0,0,0,.75); }
.tour-screen .chrome { height: 26px; display: flex; align-items: center; gap: 7px; padding: 0 12px; background: #1b1b1e; border-bottom: 1px solid #000; }
.tour-screen .chrome i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.tour-screen .chrome i:nth-child(2) { background: #febc2e; } .tour-screen .chrome i:nth-child(3) { background: #28c840; }
.tour-screen .chrome span { margin: 0 auto; font: 500 12px var(--sans); color: var(--faint); transform: translateX(-26px); }
.tour-view { position: relative; overflow: hidden; aspect-ratio: 1920 / 1080; background: #0b0b0d; }
.tour-view .cam { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 1.25s cubic-bezier(.65, 0, .25, 1); will-change: transform; }
.tour-view .cam img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .45s ease; }
.tour-view .cam img.on { opacity: 1; }
.tour-view .cam img.flip { transition: none; z-index: 1; }
.tour-view .pointer { position: absolute; left: 0; top: 0; z-index: 3; width: 26px; height: 26px; margin: -3px 0 0 -5px; transition-property: transform; transition-timing-function: cubic-bezier(.45, 0, .2, 1); pointer-events: none; }
.tour-view .pointer svg { width: 26px; height: 26px; fill: #fff; stroke: #000; stroke-width: 1.3; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); transition: transform .12s; transform-origin: 6px 4px; }
.tour-view .pointer.down svg { transform: scale(.82); }
.tour-view .pointer .kbd { position: absolute; left: 26px; top: 20px; padding: 2px 6px; border-radius: 4px; background: #fff; color: #000; font: 700 12px var(--sans); opacity: 0; transition: opacity .15s; }
.tour-view .pointer.cmd .kbd { opacity: 1; }
.tour-view .ripple { position: absolute; left: 0; top: 0; z-index: 2; box-sizing: border-box; width: 54px; height: 54px; margin: -27px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); opacity: 0; pointer-events: none; }
.tour-view .ripple.go { animation: tour-ripple .55s ease-out; }
@keyframes tour-ripple { 0% { opacity: .9; scale: .3; } 100% { opacity: 0; scale: 1.25; } }
.tour-view .carry { position: absolute; left: 0; top: 0; z-index: 2; width: 26px; height: 26px; margin: -13px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 6px 18px rgba(0,0,0,.6); opacity: 0; transition-property: transform, opacity; transition-timing-function: cubic-bezier(.45, 0, .2, 1); pointer-events: none; }
.tour-view .carry.on { opacity: 1; }
.tour-say { position: absolute; left: 50%; bottom: 18px; z-index: 4; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 10px 18px 10px 10px; border-radius: 100px; background: rgba(12, 12, 14, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 14px 40px rgba(0,0,0,.6); }
.tour-say b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; font: 700 13px var(--sans); }
.tour-say span { font: 500 15.5px/1.35 var(--sans); color: var(--text); transition: opacity .18s; }
.tour-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.tour-dots button { width: 9px; height: 9px; border-radius: 50%; background: #2c2c33; transition: background .25s, width .25s; }
.tour-dots button.on { width: 26px; border-radius: 5px; background: var(--redLit); }
.tour-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; }
.tour-tabs button { height: 40px; padding: 0 18px; border-radius: 100px; border: 1px solid var(--border); background: var(--surface); font: 600 14.5px var(--sans); color: var(--dim); transition: color .2s, border-color .2s, background .2s; }
.tour-tabs button.on { color: #fff; border-color: var(--red); background: rgba(200, 36, 44, .15); }
.tour-head { text-align: center; margin: 0 auto 22px; max-width: 700px; }
.tour-head h3 { margin: 0 0 8px; font: 600 clamp(24px, 2.6vw, 32px)/1.2 var(--head); }
.tour-head p { margin: 0; color: var(--dim); }
@media (max-width: 600px) {
  .tour-say { position: static; transform: none; margin: 0; max-width: none; border-radius: 0; border: 0; border-top: 1px solid var(--border); background: #111114; padding: 10px 12px; gap: 10px; box-shadow: none; }
  .tour-say span { font-size: 12.5px; }
  .tour-say b { width: 22px; height: 22px; font-size: 11px; }
  .tour-view .pointer, .tour-view .pointer svg { width: 18px; height: 18px; }
}
.play.loading { opacity: .6; pointer-events: none; }
.demo-credit { margin: 14px auto 0; max-width: 640px; text-align: center; font-size: 12.5px; color: var(--faint); }
.demo-credit a { color: var(--dim); text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------------ pictures that lie down as they come in */
.tilt { perspective: 2000px; }
.tilt .shot-3d { transform-origin: 50% 0; }
.tilt-caption { max-width: 820px; margin: 34px auto clamp(60px, 8vw, 100px); text-align: center; }
.tilt-caption h3 { margin: 0 0 10px; font: 600 clamp(24px, 2.6vw, 32px)/1.2 var(--head); }
.tilt-caption p { margin: 0 auto 16px; max-width: 640px; color: var(--dim); }
.tilt-caption .ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin-top: 12px; }
.pic.cycle img { transition: opacity .9s ease; }
.pic.cycle img + img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.pic.cycle img:not(.on) { opacity: 0; }

/* ------------------------------------------------------------------ the demo's controls: one strip, like the app's */
.mixbar { display: flex; align-items: stretch; flex-wrap: nowrap; max-width: 1100px; margin: 22px auto 0; border-radius: 12px; overflow: hidden;
  background: linear-gradient(#17171b, #101013); border: 1px solid var(--border); box-shadow: 0 18px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04); }
.mb-play { flex: none; align-self: stretch; min-height: 56px; width: 64px; display: grid; place-items: center; background: linear-gradient(#d22a32, #ab1d24); border-right: 1px solid #000; transition: filter .2s; }
.mb-play:hover { filter: brightness(1.12); }
.mb-play svg { width: 22px; height: 22px; fill: #fff; }
.mb-play .i-pause, .mb-play.on .i-play { display: none; }
.mb-play.on .i-pause { display: block; }
.mb-sec { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-right: 1px solid #000; box-shadow: 1px 0 0 rgba(255,255,255,.04); }
.mb-sec:last-child { border-right: 0; box-shadow: none; }
.mb-sec.grow { flex: 1 1 auto; min-width: 0; }
.mixbar .seg button { padding: 0 12px; }
@media (max-width: 960px) { .mixbar { flex-wrap: wrap; } .mb-sec.grow { flex-basis: 100%; border-top: 1px solid #000; } }
.mb-label { font: 600 10.5px var(--head); letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.mb-val { min-width: 42px; font: 700 12.5px var(--mono); color: var(--text); text-align: right; }
.mixbar .seg { border: 0; background: #08080a; }
.mixbar .chip { height: 32px; min-width: 104px; padding: 0 12px; border-radius: 5px; display: grid; place-items: center; color: #000; font: 600 14px var(--head); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.mixbar .key { height: 32px; }
/* faders: a groove filled with the source's colour, a console cap */
.fader { -webkit-appearance: none; appearance: none; flex: 1; min-width: 90px; height: 32px; margin: 0; background: transparent; cursor: pointer; --c: #f4f4f4; --p: 50%; }
.fader.room { flex: none; width: 104px; --c: var(--cyan); }
.fader::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--c) var(--p), #2a2a30 var(--p)); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.fader::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--c) var(--p), #2a2a30 var(--p)); }
.fader::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 26px; margin-top: -10px; border-radius: 3px; border: 1px solid #000;
  background: linear-gradient(90deg, #3a3a42, #23232a 45%, #f4f4f4 46%, #f4f4f4 54%, #23232a 55%, #3a3a42); box-shadow: 0 3px 8px rgba(0,0,0,.6); }
.fader::-moz-range-thumb { width: 14px; height: 26px; border-radius: 3px; border: 1px solid #000; background: linear-gradient(90deg, #3a3a42, #23232a 45%, #f4f4f4 46%, #f4f4f4 54%, #23232a 55%, #3a3a42); }
@media (max-width: 700px) {
  .mixbar { flex-direction: column; }
  .mb-play { width: auto; height: 48px; border-right: 0; border-bottom: 1px solid #000; }
  .mb-sec { border-right: 0; border-bottom: 1px solid #000; justify-content: space-between; }
  .mb-sec.grow { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------- Wing: any interface vs the add-on */
.vs { border-radius: 16px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; margin-bottom: clamp(70px, 8vw, 110px); }
.vs-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.35fr); }
.vs-row > div { padding: 14px 20px; font-size: 15px; line-height: 1.45; border-top: 1px solid var(--border); }
.vs-row .what { font: 600 13px var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding-top: 16px; }
.vs-row .any { color: var(--dim); border-left: 1px solid var(--border); }
.vs-row .plus { color: var(--text); border-left: 1px solid rgba(233, 210, 60, .25); background: rgba(233, 210, 60, .045); }
.vs-top > div { border-top: 0; padding-top: 20px; padding-bottom: 16px; }
.vs-top b { display: block; font: 600 18px var(--head); }
.vs-top .plus b { color: var(--yellow); }
.vs-top span { font-size: 13px; color: var(--faint); }

/* ---------------------------------------------------------------- Wing: the custom controls */
.cc { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); border-radius: 16px; border: 1px solid var(--border); background: #0c0c0f; margin-bottom: 18px; user-select: none; -webkit-user-select: none; }
.cc-desk { padding: 18px; border-radius: 16px 0 0 16px; border-right: 1px solid #000; background: #0a0a0c; display: grid; gap: 12px; align-content: start; }
/* the console's surface: dark grey, printed labels */
.cc-surface { position: relative; padding: 18px 20px 20px; border-radius: 10px; background: linear-gradient(180deg, #34363b, #2b2d31 60%, #27292d); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.5); }
.cc-print { font: 700 10.5px var(--sans); letter-spacing: .08em; color: #e4e6ea; }
/* the WING's custom controls: VIEW, the display with its four LEDs, the page number, PRESETS UP / DOWN, knobs, keys */
.cc-wing { display: grid; grid-template-columns: 58px repeat(4, minmax(0, 1fr)); column-gap: 14px; row-gap: 0; align-items: center; }
.cc-viewkey { grid-column: 1; grid-row: 1; align-self: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #111; background: radial-gradient(circle at 50% 35%, #e9edf3, #b9c0ca 70%); box-shadow: 0 3px 0 #111, inset 0 1px 0 #fff; font: 700 9.5px var(--sans); color: #1e2a3a; letter-spacing: .04em; cursor: default; }
.cc-display { grid-column: 2 / 6; grid-row: 1; }
.cc-leds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 0 10px 8px; }
.cc-leds i { display: block; height: 5px; border-radius: 1px; background: #55585e; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); transition: background .3s, box-shadow .3s; }
.cc-leds i.on { box-shadow: 0 0 10px currentColor; }
.cc-lcd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 3px; border-radius: 3px; background: linear-gradient(#3d5fd8, #2f4fc4); box-shadow: 0 0 0 2px #0c0d10, 0 0 0 4px #1b1c20, inset 0 0 18px rgba(0,0,30,.55); }
.cc-lcd .cell { display: grid; grid-template-rows: auto auto auto auto; min-width: 0; padding: 5px 6px 6px; text-align: center; border-left: 1.5px solid rgba(235,240,255,.85); }
.cc-lcd .cell:first-child { border-left: 0; }
.cc-lcd .kn, .cc-lcd .kv, .cc-lcd .bn { font: 700 11.5px/1.3 var(--mono); color: #f2f5ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 6px rgba(255,255,255,.25); }
.cc-lcd .kn, .cc-lcd .kv { min-height: 1.3em; }
.cc-lcd .kv { opacity: .85; margin-bottom: 6px; }
.cc-lcd .bn.up { border-top: 1.5px solid rgba(235,240,255,.85); margin: 0 -6px; padding: 4px 6px 0; }
.cc-lcd .bn { min-height: 1.45em; }
.cc-lcd .bn.inv { background: #f2f5ff; color: #2f4fc4; text-shadow: none; border-radius: 1px; }
.cc-lcd .bn.up.inv { background: linear-gradient(transparent 4px, #f2f5ff 4px); }
.cc-lcd .bn.off { color: rgba(242,245,255,.35); text-shadow: none; }
.cc-seg { grid-column: 1; grid-row: 2 / 4; justify-self: center; width: 40px; height: 46px; border-radius: 4px; background: #0b0b0d; box-shadow: inset 0 0 0 1px #000, 0 0 0 2px #1c1d21; display: grid; place-items: center; }
.cc-seg span { font: 700 34px/1 "DSEG7 Classic", var(--mono); color: #ff5a3c; text-shadow: 0 0 10px rgba(255,90,60,.7); transform: skewX(-6deg); }
.cc-title { grid-column: 2 / 6; grid-row: 2; text-align: center; padding: 18px 0 8px; }
.cc-knobs { grid-column: 2 / 6; grid-row: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; padding-bottom: 18px; }
.cc-knobs .dial { position: relative; width: 56px; height: 56px; border-radius: 50%; cursor: ns-resize; touch-action: none;
  background: radial-gradient(circle at 50% 40%, #2a2b2e, #0d0d0f 72%); box-shadow: 0 10px 16px rgba(0,0,0,.65), 0 0 0 1px #000, inset 0 -3px 6px rgba(0,0,0,.6), inset 0 2px 2px rgba(255,255,255,.08); }
.cc-knobs .dial.off { cursor: default; }
.cc-knobs .dial .cap { position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #222326, #101012 75%); transition: transform .08s; }
.cc-knobs .dial .cap i { position: absolute; left: 50%; top: 2px; width: 2px; height: 8px; margin-left: -1px; border-radius: 1px; background: #8a8d93; }
.cc-presets { grid-column: 1; grid-row: 4; text-align: center; padding-bottom: 6px; font-size: 9.5px; }
.cc-pagekey { grid-column: 1; justify-self: center; width: 46px; height: 34px; border-radius: 5px; border: 1px solid #111; background: linear-gradient(#e9edf3, #b9c0ca); box-shadow: 0 3px 0 #111, inset 0 1px 0 #fff; font: 700 9.5px var(--sans); color: #1e2a3a; }
.cc-pagekey[data-d="1"] { grid-row: 5; } .cc-pagekey[data-d="-1"] { grid-row: 6; margin-top: 12px; }
.cc-keys { grid-column: 2 / 6; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; }
.cc-keys-up { grid-row: 5; } .cc-keys-dn { grid-row: 6; margin-top: 12px; }
.cc-keys .key { width: 40px; height: 34px; border-radius: 5px; border: 1px solid #111; background: linear-gradient(#cfd6e2, #a9b2c1); box-shadow: 0 3px 0 #111, inset 0 1px 0 rgba(255,255,255,.7); transition: background .12s, box-shadow .12s; }
.cc-keys .key:hover { filter: brightness(1.06); }
.cc-keys .key.lit { background: linear-gradient(color-mix(in srgb, var(--c) 55%, #fff), var(--c)); box-shadow: 0 3px 0 #111, 0 0 18px -2px var(--c), inset 0 1px 0 rgba(255,255,255,.6); }
.cc-legend { display: flex; gap: 6px; justify-content: center; }
.cc-legend button { padding: 4px 10px; border-radius: 5px; background: none; border: 1px solid transparent; font: 600 11px var(--mono); color: var(--faint); }
.cc-legend button.on { color: var(--text); border-color: var(--border); background: #141417; }
.cc-desk .hit { animation: hit .3s; }
@keyframes hit { 0% { filter: brightness(1.4); transform: translateY(2px); } 100% { filter: none; transform: none; } }
/* the channels: scribble strips with their colour, SEL keys */
.cc-strips { padding-top: 12px; }
.cc-sel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.cc-sel button { display: grid; gap: 8px; justify-items: center; background: none; border: 0; padding: 0; }
.cc-sel .scr { display: block; width: 100%; padding: 6px 4px 5px; border-radius: 3px; background: #050506; box-shadow: 0 0 0 1px #000, 0 0 0 3px #17181b, inset 0 4px 0 var(--c); font: 700 12px/1.25 var(--mono); color: #e8edf3; text-align: center; white-space: nowrap; overflow: hidden; }
.cc-sel .scr small { display: block; font-size: 9.5px; color: #8f97a3; margin-top: 2px; }
.cc-sel .key { display: block; width: 56px; height: 24px; border-radius: 5px; background: linear-gradient(#36373c, #27282c); border: 1px solid #0c0c0e; box-shadow: 0 3px 0 #0c0c0e, inset 0 1px 0 rgba(255,255,255,.08); }
.cc-sel button.on .key { background: linear-gradient(#f4f4f6, #cfd2d8); box-shadow: 0 3px 0 #0c0c0e, 0 0 14px -2px rgba(255,255,255,.8); }
.cc-sel button::after { content: "SEL"; font: 600 9.5px var(--sans); letter-spacing: .2em; color: #8d9098; margin-top: -4px; }

.cc-app { position: relative; padding: 20px 22px 22px; min-width: 0; }
.cc-app-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 600 12px var(--head); letter-spacing: .18em; color: var(--faint); margin-bottom: 14px; }
.cc-flags { display: flex; gap: 6px; }
.cc-flags span { padding: 3px 7px; border-radius: 4px; background: #1b1b1f; font: 700 10px var(--mono); letter-spacing: .04em; color: var(--dim); transition: background .1s, color .1s; }
.cc-flags .lit { background: rgba(233, 210, 60, .16); color: var(--yellow); }
.cc-flags .red { background: rgba(255, 59, 64, .2); color: var(--redLit); }
.cc-ch { display: flex; align-items: center; gap: 10px; font: 600 22px var(--head); }
.cc-ch i { width: 12px; height: 26px; border-radius: 3px; }
.cc-ch em { margin-left: auto; font: 700 10px var(--mono); font-style: normal; color: var(--redLit); padding: 3px 7px; border-radius: 4px; background: rgba(255, 59, 64, .15); }
.cc-detail { margin: 4px 0 16px; font: 500 12.5px var(--mono); color: var(--faint); min-height: 1.4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-label { font: 600 10.5px var(--head); letter-spacing: .18em; color: var(--faint); margin: 0 0 6px; }
.cc-chain, .cc-sends { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 4px; }
.cc-chain li { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 5px; background: #141417; border: 1px solid transparent; font-size: 14px; transition: background .2s, border-color .2s, opacity .2s; }
.cc-chain li .n { font: 600 11px var(--mono); color: var(--faint); width: 12px; }
.cc-chain li b { font-weight: 600; }
.cc-chain li.on { border-color: var(--redLit); background: #1d1416; }
.cc-chain li.byp b { opacity: .45; text-decoration: line-through; text-decoration-color: rgba(255,255,255,.35); }
.cc-chain li em { font: 700 9.5px var(--mono); font-style: normal; color: var(--redLit); padding: 2px 5px; border-radius: 3px; background: rgba(255, 59, 64, .14); }
.cc-chain li em:first-of-type { margin-left: auto; }
.cc-chain li em.w { color: var(--cyan); background: rgba(34, 195, 230, .12); }
.cc-chain .empty, .cc-sends .empty { color: var(--faint); font-size: 13.5px; background: none; height: auto; padding: 4px 0; }
.cc-sends li { display: grid; grid-template-columns: 92px 1fr 62px; align-items: center; gap: 10px; font-size: 13.5px; }
.cc-sends li .bar { height: 6px; border-radius: 3px; background: #2a2a30; overflow: hidden; }
.cc-sends li .bar i { display: block; height: 100%; transition: width .08s; }
.cc-sends li .v { font: 700 12px var(--mono); text-align: right; }
.cc-sends li.off { opacity: .4; }
.cc-app .knobhud { margin-top: 0; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.cc-app .knobhud.on { opacity: 1; transform: none; transition: opacity .1s, transform .1s; }
.cc-toast { position: absolute; left: 22px; right: 22px; bottom: 22px; padding: 10px 14px; border-radius: 8px; background: #26262c; border: 1px solid #34343c; font-size: 14px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; pointer-events: none; }
.cc-toast.on { opacity: 1; transform: none; }
.cc-say { grid-column: 1 / -1; margin: 0; padding: 14px 22px; border-top: 1px solid var(--border); font-size: 15.5px; color: var(--text); min-height: 52px; }
.cc-say.in { animation: sayin .4s; }
@keyframes sayin { from { opacity: 0; transform: translateY(4px); } }
.cc-finger { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%; pointer-events: none; z-index: 3; opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,.15) 60%, transparent 70%); border: 2px solid rgba(255,255,255,.8);
  transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .3s; }
.cc-finger.on { opacity: 1; }
.cc-finger.press { width: 28px; height: 28px; left: -14px; top: -14px; background: rgba(255,255,255,.7); }
.cc-pagesinfo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: clamp(70px, 8vw, 110px); }
.cc-pagesinfo > div { padding: 18px 20px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.cc-pagesinfo b { font: 700 15px var(--head); letter-spacing: .12em; color: var(--yellow); }
.cc-pagesinfo p { margin: 6px 0 0; font-size: 14.5px; color: var(--dim); line-height: 1.5; }

/* ---------------------------------------------------------------- Wing: safety + limiter */
.fs, .lim { border-radius: 16px; border: 1px solid var(--border); background: #0c0c0f; padding: 22px; }
.fs-head, .lim-head { display: flex; justify-content: space-between; gap: 10px; font: 600 11.5px var(--head); letter-spacing: .18em; color: var(--faint); margin-bottom: 14px; }
.fs-clock { font: 700 13px var(--mono); letter-spacing: 0; color: var(--text); }
.fs .safety { margin: 0 0 18px; }
.fs-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; counter-reset: s; }
.fs-steps li { position: relative; padding: 10px 14px 10px 44px; border-radius: 8px; background: #141417; border: 1px solid transparent; opacity: .45; transition: opacity .3s, border-color .3s, background .3s; counter-increment: s; }
.fs-steps li::before { content: counter(s); position: absolute; left: 14px; top: 11px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #26262c; font: 700 11px var(--mono); }
.fs-steps li b { display: block; font-weight: 600; font-size: 15px; }
.fs-steps li span { font-size: 13.5px; color: var(--dim); }
.fs-steps li.on { opacity: 1; border-color: var(--redLit); background: #1d1416; }
.fs-steps li.on::before { background: var(--redLit); }
.fs-steps li.done { opacity: .85; }
.fs-steps li.done::before { content: "✓"; background: var(--green); color: #041; }
.fs-go[disabled] { opacity: .45; pointer-events: none; }
.lim-head .where { color: var(--dim); letter-spacing: .14em; }
.lim-box { padding: 18px 20px 20px; border-radius: 10px; border: 1px solid #2a2a30; background: #0f0f12; }
.lim-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.lim-row .k, .lim-grhead { font: 600 11px var(--head); letter-spacing: .16em; color: var(--faint); }
.lim-row .lvl { font: 700 16px var(--mono); min-width: 110px; }
.lim-row .clipat { margin-left: auto; font: 700 11px var(--head); letter-spacing: .14em; color: var(--redLit); }
.lim-row .ceil { font: 700 16px var(--mono); color: var(--redLit); }
.lim-meter { position: relative; height: 18px; border-radius: 3px; background: #050506; box-shadow: 0 0 0 1px #2a2a30; cursor: ew-resize; touch-action: none; overflow: visible; }
.lim-meter .fill { position: absolute; left: 2px; top: 3px; bottom: 3px; width: 0; border-radius: 1px; background: linear-gradient(90deg, var(--green), #8bd84a 55%, var(--yellow) 80%, #ff8a3d); background-size: 100vw 100%; }
.lim-meter .peak { position: absolute; top: 3px; bottom: 3px; width: 2px; margin-left: -1px; background: #ddd; }
.lim-meter .mark { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; background: var(--redLit); border-radius: 1px; box-shadow: 0 0 8px var(--redLit); }
.lim-meter .mark::before { content: ""; position: absolute; left: -5px; top: -2px; border: 6.5px solid transparent; border-top-color: var(--redLit); }
.lim-scale { display: flex; justify-content: space-between; margin: 6px 0 0; padding-left: 16.7%; font: 500 10.5px var(--mono); color: var(--faint); }
.lim-gr .lim-scale { padding-left: 0; }
.lim-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; margin-top: 16px; align-items: start; }
.lim-state { padding: 12px 14px; border-radius: 8px; border: 1px solid #2a2a30; background: #18181c; transition: border-color .15s, background .15s; }
.lim-state b { display: block; font: 700 16px var(--head); letter-spacing: .12em; color: var(--dim); }
.lim-state span { font: 600 12.5px var(--mono); color: var(--faint); }
.lim-state.limiting { border-color: var(--redLit); background: rgba(255, 59, 64, .12); }
.lim-state.limiting b, .lim-state.limiting span { color: var(--redLit); }
.lim-state.off b { color: var(--faint); }
.lim-grhead { display: flex; justify-content: space-between; margin-bottom: 6px; }
.lim .gr { height: 14px; border-radius: 3px; background: #050506; box-shadow: 0 0 0 1px #2a2a30; overflow: hidden; display: flex; justify-content: flex-end; }
.lim .gr i { display: block; height: 100%; width: 0; background: var(--redLit); }
.lim-keys { display: grid; grid-template-columns: 90px 1fr; gap: 12px; margin-top: 16px; }
.lim-keys button { height: 40px; border-radius: 7px; background: #1d1d22; border: 1px solid #2c2c33; font: 700 11.5px var(--head); letter-spacing: .14em; color: var(--dim); }
.lim-keys button.on.lit { color: var(--green); border-color: var(--green); background: rgba(54, 209, 92, .1); }
.lim-keys .set:hover { color: #fff; }

@media (max-width: 960px) {
  .cc { grid-template-columns: minmax(0, 1fr); }
  .cc-desk { border-radius: 16px 16px 0 0; border-right: 0; border-bottom: 1px solid #000; }
  .cc-app { min-height: 430px; }
  .cc-pagesinfo { grid-template-columns: minmax(0, 1fr); }
  .vs-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vs-row .what { grid-column: 1 / -1; padding-bottom: 0; }
  .vs-row .what + div { border-top: 0; border-left: 0; }
  .vs-row .what ~ div { border-top: 0; }
  .vs-top > div:first-child { display: none; }
  .vs-top .any { border-left: 0; }
}
@media (max-width: 560px) {
  .cc-desk, .cc-app { padding: 16px 14px; }
  .cc-desk { padding: 10px; }
  .cc-surface { padding: 12px 10px 14px; }
  .cc-sel { gap: 6px; }
  .cc-wing { grid-template-columns: 46px repeat(4, minmax(0, 1fr)); column-gap: 8px; }
  .cc-viewkey { width: 38px; height: 38px; font-size: 8px; }
  .cc-pagekey { width: 40px; font-size: 8.5px; }
  .cc-knobs .dial { width: 44px; height: 44px; }
  .cc-keys .key { width: 34px; height: 30px; }
  .cc-lcd .cell { padding: 4px 3px 5px; }
  .cc-lcd .bn.up { margin: 0 -3px; padding: 3px 3px 0; }
  .cc-lcd .kn, .cc-lcd .kv, .cc-lcd .bn { font-size: 8.5px; }
  .cc-leds { gap: 8px; padding: 0 4px 6px; }
  .cc-sel .scr { font-size: 10px; }
  .cc-sel .key { width: 44px; }
  .cc-sel .scr { font-size: 10px; }
  .lim-bottom { grid-template-columns: minmax(0, 1fr); }
  .lim-row { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------- what the WING Extension adds inside another product */
.ext-seg { position: relative; margin: clamp(30px, 4vw, 50px) 0 clamp(70px, 8vw, 110px); padding: clamp(26px, 3.5vw, 44px) clamp(18px, 3vw, 40px) 4px; border-radius: 20px;
  border: 1px solid rgba(233, 210, 60, .35); background: linear-gradient(180deg, rgba(233, 210, 60, .06), rgba(233, 210, 60, .015) 30%, transparent); }
.ext-seg .feature:last-child, .ext-seg > :last-child { margin-bottom: clamp(30px, 4vw, 50px); }
.ext-note { max-width: 760px; }
.ext-note h3 { margin: 0 0 12px; font: 600 clamp(24px, 2.5vw, 32px)/1.2 var(--head); }
.ext-note p { margin: 0; color: var(--dim); }
.ext-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.ext-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 6px; background: rgba(233, 210, 60, .14); border: 1px solid rgba(233, 210, 60, .5); color: var(--yellow); font: 700 11.5px var(--head); letter-spacing: .16em; text-transform: uppercase; }
.ext-badge::before { content: "+"; font-size: 14px; }
.ext-head h3 { margin: 14px 0 8px; font: 700 clamp(26px, 3vw, 38px)/1.15 var(--head); }
.ext-head p { margin: 0; color: var(--dim); font-size: clamp(16px, 1.3vw, 18px); }