/* /products/lk — page-specific styles. Mirrors the design handoff
 * (imaginando-3-0/project/Imaginando LK.html inline <style> +
 * product-sections.css). LK is the FREE, mobile-only Ableton Live
 * controller — Download section instead of Pricing, fully CSS-rendered
 * (no raster assets).
 *
 * PALETTE CONVENTION (see grfx.css / bam.css):
 *   - All CHROME uses the global lime --accent (buttons, headings, nav,
 *     text accents, hovers, CTA cards) — matching every shipped product
 *     page even when the handoff used another colour.
 *   - The handoff's warm orange (--lk) + the Live-style clip palette
 *     (--clip-1..5) are SCOPED to the app-mockup visuals only: the hero
 *     `.lk-app`, the six `.vis-*` mode diagrams, and the `.anatomy-shot`
 *     pins. These read as "the app's own accent", distinct from site
 *     chrome.
 *   To go full-handoff-orange instead, swap the `var(--accent)` chrome
 *     uses below for `var(--lk)`.
 *
 * Shared template-section chrome (.product-nav, .hero-meta, .sec-head
 * override, .req-grid, .help-grid, .dl-grid/.dl-card, .tpl-trailer,
 * .tpl-press/.pcard, .tut-grid, .test-grid) is duplicated here from the
 * product template / sibling product pages — hoist into style.css on a
 * cross-product consolidation commit.
 */

:root {
  /* LK signal-orange + Ableton-style clip palette — visuals only. */
  --lk: #ff7a3d;
  --lk-2: #ffb38a;
  --lk-deep: #7a2a0c;
  --clip-1: #ff7a3d; /* orange */
  --clip-2: #ffd23d; /* yellow */
  --clip-3: #7fe57a; /* green */
  --clip-4: #5cc0ff; /* blue */
  --clip-5: #c89dff; /* lavender */
}

/* ============================================================
 * HERO
 * ============================================================ */
/* ============================================================
 * HERO — visual only. Chrome is shared (`.phero-*` in public/style.css,
 * via +productHero — refs #444). A wider text column (1.05fr / 1fr), its
 * larger display h1 and wider copy; the visual is the app screenshot (was
 * the decorative clip-launch grid — `.clip*` CSS below is now unused). The
 * background glow uses the global `--accent` like every other product page
 * (this file's own PALETTE CONVENTION above) — it previously used `--lk`,
 * the one glow that didn't follow the "chrome uses --accent, --lk is
 * scoped to app-mockup visuals only" rule.
 * ============================================================ */
.phero-bg {
  background:
    radial-gradient(ellipse 70% 60% at 75% 30%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 50% at 15% 80%, color-mix(in oklab, var(--accent) 8%, transparent), transparent 60%);
}
.phero-grid { grid-template-columns: 1.05fr 1fr; }
.phero h1 { font-size: clamp(72px, 12vw, 200px); letter-spacing: -0.045em; }
.phero h2 { max-width: 22ch; }
.phero .lede { max-width: 52ch; }
@media (max-width: 1100px) {
  .phero-grid { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .hero-img-col { margin-top: 0; }
}

/* ============================================================
 * HERO LK APP VISUAL — orange + clip palette (the app's own accent)
 * ============================================================ */
.lk-app {
  position: relative;
  aspect-ratio: 5/4;
  border-radius: 18px;
  border: 0.5px solid var(--line-strong);
  overflow: hidden;
  background: linear-gradient(180deg, #16161c 0%, #0a0a0c 100%);
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lk-app .lk-top { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
.lk-app .lk-top .left { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; color: var(--fg); }
.lk-app .lk-top .left .lksq { width: 16px; height: 16px; border-radius: 4px; background: var(--lk); box-shadow: 0 0 10px color-mix(in oklab, var(--lk) 70%, transparent); }
.lk-app .lk-top .right { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--fg-faint); }
.lk-app .lk-top .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lk); box-shadow: 0 0 8px var(--lk); animation: lk-pulse 1.6s ease-in-out infinite; }
.lk-app .lk-top .bpm { color: var(--fg); font-family: var(--display); font-weight: 500; font-size: 13px; }
.lk-app .lk-top .bpm em { color: var(--lk); font-style: normal; }

.lk-app .lk-tabs { display: flex; gap: 4px; padding: 0 4px; }
.lk-app .lk-tabs .tab { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); padding: 5px 10px; border-radius: 6px; border: 0.5px solid var(--line); }
.lk-app .lk-tabs .tab.on { color: var(--accent-ink); background: var(--lk); border-color: var(--lk); }

.lk-grid-wrap { flex: 1; display: grid; grid-template-columns: 1fr 88px; gap: 8px; min-height: 0; }
.lk-grid { display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 1fr; gap: 4px; background: #08080a; border-radius: 8px; padding: 6px; border: 0.5px solid var(--line); }
.clip { position: relative; border-radius: 4px; background: #1a1a20; display: grid; place-items: center; overflow: hidden; border: 0.5px solid rgba(255,255,255,.05); }
.clip[data-color="1"] { background: var(--clip-1); border-color: transparent; }
.clip[data-color="2"] { background: var(--clip-2); border-color: transparent; }
.clip[data-color="3"] { background: var(--clip-3); border-color: transparent; }
.clip[data-color="4"] { background: var(--clip-4); border-color: transparent; }
.clip[data-color="5"] { background: var(--clip-5); border-color: transparent; }
.clip[data-stop="1"] { background: #1a1a20; border: 0.5px solid rgba(255,255,255,.18); color: var(--fg-dim); }
.clip[data-stop="1"]::after { content: ""; width: 8px; height: 8px; background: var(--fg-dim); border-radius: 1px; }
.clip[data-empty="1"] { background: transparent; border: 0.5px dashed rgba(255,255,255,.08); }
.clip.playing::before { content: ""; position: absolute; inset: 0; border: 1.5px solid #fff; border-radius: 4px; animation: lk-clipBlink 1s ease-in-out infinite; pointer-events: none; }
.clip.playing::after { content: "▶"; position: absolute; top: 2px; left: 3px; font-size: 7px; color: rgba(0,0,0,.7); }
@keyframes lk-clipBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.clip.queued { animation: lk-clipQueue 0.6s ease-in-out infinite; }
@keyframes lk-clipQueue { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.4); } }

.lk-tracks { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 0 6px; }
.lk-tracks .th { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); text-align: center; padding: 3px 0; border-radius: 3px; background: rgba(255,255,255,.04); }
.lk-tracks .th.armed { color: var(--lk); background: color-mix(in oklab, var(--lk) 14%, transparent); }

.lk-scenes { display: flex; flex-direction: column; gap: 4px; background: #08080a; border-radius: 8px; padding: 6px; border: 0.5px solid var(--line); }
.lk-scenes .scene { flex: 1; border-radius: 4px; background: #1a1a20; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; color: var(--fg-dim); border: 0.5px solid rgba(255,255,255,.05); }
.lk-scenes .scene .nm { color: var(--fg); }
.lk-scenes .scene.on { background: var(--lk); color: var(--accent-ink); border-color: transparent; }
.lk-scenes .scene.on .nm { color: var(--accent-ink); }
.lk-scenes .scene .play { font-size: 9px; }

.lk-bottom { display: grid; grid-template-columns: 1fr 92px; gap: 8px; }
.lk-mixer { background: #08080a; border-radius: 8px; padding: 8px; border: 0.5px solid var(--line); display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.lk-mixer .ch { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.lk-mixer .ch .knob { width: 18px; height: 18px; border-radius: 50%; background: #16161c; border: 1px solid rgba(255,255,255,.2); position: relative; }
.lk-mixer .ch .knob::after { content: ""; position: absolute; top: 1px; left: 50%; width: 1.5px; height: 6px; background: var(--lk); transform-origin: 50% 7px; transform: translateX(-50%); }
.lk-mixer .ch .knob[data-rot="-1"]::after { transform: translateX(-50%) rotate(-110deg); }
.lk-mixer .ch .knob[data-rot="-2"]::after { transform: translateX(-50%) rotate(-60deg); }
.lk-mixer .ch .knob[data-rot="0"]::after { transform: translateX(-50%) rotate(0deg); }
.lk-mixer .ch .knob[data-rot="1"]::after { transform: translateX(-50%) rotate(50deg); }
.lk-mixer .ch .knob[data-rot="2"]::after { transform: translateX(-50%) rotate(100deg); }
.lk-mixer .ch .meter { width: 6px; height: 30px; border-radius: 1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.04)); border: 0.5px solid rgba(255,255,255,.08); position: relative; overflow: hidden; }
.lk-mixer .ch .meter .lvl { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, var(--lk), color-mix(in oklab, var(--lk) 60%, var(--clip-3))); border-radius: 1px; animation: lk-meter 1.4s ease-in-out infinite; }
.lk-mixer .ch:nth-child(1) .lvl { height: 62%; animation-delay: 0.1s; }
.lk-mixer .ch:nth-child(2) .lvl { height: 42%; animation-delay: 0.3s; }
.lk-mixer .ch:nth-child(3) .lvl { height: 78%; animation-delay: 0s; }
.lk-mixer .ch:nth-child(4) .lvl { height: 24%; animation-delay: 0.4s; }
.lk-mixer .ch:nth-child(5) .lvl { height: 55%; animation-delay: 0.2s; }
.lk-mixer .ch:nth-child(6) .lvl { height: 36%; animation-delay: 0.5s; }
.lk-mixer .ch:nth-child(7) .lvl { height: 48%; animation-delay: 0.15s; }
.lk-mixer .ch:nth-child(8) .lvl { height: 18%; animation-delay: 0.35s; }
@keyframes lk-meter { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(0.7); } }
.lk-mixer .ch .lbl { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.04em; color: var(--fg-faint); }

.lk-trans { background: var(--lk); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; justify-content: space-between; color: var(--accent-ink); }
.lk-trans .play { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: 0.06em; display: flex; align-items: center; gap: 6px; }
.lk-trans .play .pi { width: 0; height: 0; border-left: 8px solid var(--accent-ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.lk-trans .meta { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; display: flex; justify-content: space-between; }
.lk-trans .meta b { font-family: var(--display); font-weight: 500; font-size: 11px; letter-spacing: 0.04em; }

.lk-app .pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  background: rgba(0,0,0,.7);
  border: 0.5px solid var(--line-strong);
  padding: 3px 8px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  z-index: 5;
  white-space: nowrap;
}
.lk-app .pin .pdot { width: 5px; height: 5px; border-radius: 50%; background: var(--lk); box-shadow: 0 0 6px var(--lk); }
.lk-app .pin.p1 { top: 54px; right: 14px; transform: translateY(-50%); }
.lk-app .pin.p2 { bottom: 78px; left: 14px; }

/* ============================================================
 * SECTION shell + product-detail sec-head scale override
 * ============================================================ */
.sec-head { margin-bottom: 48px; flex-wrap: wrap; }
.sec-head h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 8px 0 0;
  max-width: none;
  text-wrap: balance;
}
.sec-head h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.sec-head .meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: right;
  max-width: 30ch;
  display: block;
}

/* ============================================================
 * OVERVIEW — the `.ov-*` block is now shared in public/style.css
 * (Product "Overview" section). LK keeps ONE override below: its
 * pillars light up in `--accent` on hover (the shared default is the
 * subtler `--line-strong`). This sheet loads after style.css, so it
 * wins the cascade.
 * ============================================================ */
.ov-pillar:hover { border-color: var(--accent); }

/* ============================================================
 * MODES — six cards + per-module visuals
 * ============================================================ */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1000px) { .modes { grid-template-columns: 1fr; } }
.mode { position: relative; border: 0.5px solid var(--line); border-radius: 18px; background: var(--card, #0e0e12); padding: 0; display: flex; flex-direction: column; overflow: hidden; transition: border-color 0.25s ease, transform 0.25s ease; }
.mode:hover { border-color: var(--accent); transform: translateY(-2px); }
.mode.featured { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 9%, var(--card, #0e0e12)), var(--card, #0e0e12)); border-color: color-mix(in oklab, var(--accent) 30%, var(--line)); }
.mode .mvis { aspect-ratio: 5/4; position: relative; background: #08080a; border-bottom: 0.5px solid var(--line); overflow: hidden; }
.mode .mvis .ovr { position: absolute; top: 14px; left: 14px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg); background: rgba(0,0,0,.6); border: 0.5px solid var(--line); padding: 3px 8px; border-radius: 999px; z-index: 2; }
.mode .mtxt { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.mode .mtxt .ix { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); }
.mode .mtxt h3 { font-family: var(--display); font-weight: 500; font-size: 28px; letter-spacing: -0.02em; line-height: 1.05; margin: 0; text-wrap: balance; }
.mode .mtxt h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.mode .mtxt p { margin: 0; color: var(--fg-dim); font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.mode .mtxt .specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mode .mtxt .specs span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; border: 0.5px solid var(--line); padding: 4px 8px; border-radius: 999px; color: var(--fg-dim); }

/* Mode visuals — orange + clip palette */
.vis-session { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 1fr); gap: 3px; padding: 14px; }
.vis-session .c { border-radius: 3px; background: #1a1a20; border: 0.5px solid rgba(255,255,255,.04); }

.vis-mixer { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 14px; }
.vis-mixer .strip { background: #11111a; border: 0.5px solid var(--line); border-radius: 5px; display: flex; flex-direction: column; align-items: center; padding: 6px 4px; gap: 5px; }
.vis-mixer .strip .knob { width: 14px; height: 14px; border-radius: 50%; background: #0a0a0c; border: 1px solid rgba(255,255,255,.18); position: relative; }
.vis-mixer .strip .knob::after { content: ""; position: absolute; top: 1px; left: 50%; width: 1.5px; height: 5px; background: var(--lk); transform-origin: 50% 6px; transform: translateX(-50%) rotate(var(--r, 0deg)); }
.vis-mixer .strip .fader { flex: 1; width: 5px; border-radius: 3px; background: #08080a; border: 0.5px solid rgba(255,255,255,.1); position: relative; margin-top: 2px; }
.vis-mixer .strip .fader .cap { position: absolute; left: -3px; right: -3px; height: 6px; background: var(--lk); border-radius: 1px; top: var(--y, 40%); box-shadow: 0 0 6px color-mix(in oklab, var(--lk) 60%, transparent); }

.vis-pads { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 6px; padding: 18px; }
.vis-pads .pad { border-radius: 8px; background: #1a1a20; border: 1px solid rgba(255,255,255,.06); position: relative; overflow: hidden; }
.vis-pads .pad.lit { background: var(--lk); box-shadow: 0 0 16px color-mix(in oklab, var(--lk) 50%, transparent), inset 0 0 0 1px rgba(0,0,0,.3); }
.vis-pads .pad.lit2 { background: var(--clip-2); box-shadow: 0 0 12px color-mix(in oklab, var(--clip-2) 50%, transparent); }
.vis-pads .pad.lit3 { background: var(--clip-3); box-shadow: 0 0 10px color-mix(in oklab, var(--clip-3) 50%, transparent); }
.vis-pads .pad.lit4 { background: var(--clip-4); box-shadow: 0 0 10px color-mix(in oklab, var(--clip-4) 50%, transparent); }

.vis-xy { position: absolute; inset: 0; padding: 16px; }
.vis-xy .field { position: relative; width: 100%; height: 100%; border-radius: 10px; border: 0.5px solid var(--line); overflow: hidden; background: #0b0b10; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 13px 13px; }
.vis-xy .ch { position: absolute; background: color-mix(in oklab, var(--lk) 55%, transparent); }
.vis-xy .ch.h { left: 0; right: 0; height: 1px; }
.vis-xy .ch.v { top: 0; bottom: 0; width: 1px; }
.vis-xy .dot { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: var(--lk); box-shadow: 0 0 26px color-mix(in oklab, var(--lk) 70%, transparent); transform: translate(-50%, -50%); }
.vis-xy .dot::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: rgba(0,0,0,.32); }

.vis-keys { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 22px 16px; }
.vis-keys .kb { position: relative; width: 100%; height: 74%; }
.vis-keys .wk { position: absolute; bottom: 0; top: 0; border: 0.5px solid #07070a; border-radius: 0 0 4px 4px; background: linear-gradient(180deg, #e9e5db, #cbc6b9); }
.vis-keys .wk.lit { background: linear-gradient(180deg, var(--lk), color-mix(in oklab, var(--lk) 65%, #000)); box-shadow: 0 0 18px color-mix(in oklab, var(--lk) 55%, transparent); }
.vis-keys .wk.lit2 { background: linear-gradient(180deg, var(--clip-2), color-mix(in oklab, var(--clip-2) 65%, #000)); }
.vis-keys .bk { position: absolute; top: 0; height: 62%; border-radius: 0 0 3px 3px; background: linear-gradient(180deg, #1a1a20, #050506); border: 0.5px solid #000; z-index: 2; }
.vis-keys .chip { position: absolute; top: -4px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; color: var(--accent-ink); background: var(--lk); padding: 2px 7px; border-radius: 999px; z-index: 5; transform: translateX(-50%); white-space: nowrap; }

/* ============================================================
 * ANATOMY — per-module deep dives (divider + alternating rows)
 * One <.mod-row> per module: copy column + visual column, flipped
 * left/right on odd rows via `.rev`. On mobile every row stacks with
 * the visual on top. Matrix hosts the rich `.lk-app` mockup; the other
 * five host the `.vis-*` CSS diagrams (both are position:absolute).
 * ============================================================ */
.mod-lede { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--fg-faint); margin: -22px 0 0; max-width: 62ch; }

.mod-list { display: flex; flex-direction: column; gap: 112px; margin-top: 56px; }
.mod-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: center; }
/* Reversed rows put the shot first (order:-1); swap the tracks too so the shot
   still lands in the WIDE column — otherwise the image-left rows render small. */
.mod-row.rev { grid-template-columns: 1.4fr 1fr; }
.mod-row.rev .mod-shot { order: -1; }
@media (max-width: 1000px) {
  .mod-list { gap: 72px; margin-top: 40px; }
  .mod-row,
  .mod-row.rev { grid-template-columns: 1fr; gap: 28px; }
  .mod-row.rev .mod-shot { order: 0; } /* reset the desktop flip: copy leads on every row when stacked */
}

.mod-copy { max-width: none; }
.mod-copy .ix { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 12px; }
.mod-copy h3 { font-family: var(--display); font-weight: 500; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 16px; text-wrap: balance; }
.mod-copy h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.mod-copy p { margin: 0 0 14px; color: var(--fg-dim); font-size: 15px; line-height: 1.55; text-wrap: pretty; max-width: 46ch; }
.mod-copy .legend { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; padding-top: 18px; border-top: 0.5px dashed var(--line); }
.mod-copy .legend .row { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; }
.mod-copy .legend .num { font-family: var(--display); font-weight: 500; font-size: 14px; letter-spacing: -0.005em; color: var(--accent); width: 28px; height: 28px; display: grid; place-items: center; border: 0.5px solid color-mix(in oklab, var(--accent) 35%, var(--line)); border-radius: 7px; background: color-mix(in oklab, var(--accent) 8%, transparent); line-height: 1; }
.mod-copy .legend .body { display: flex; flex-direction: column; gap: 2px; }
.mod-copy .legend h5 { font-family: var(--display); font-weight: 500; font-size: 14px; letter-spacing: -0.005em; margin: 0; line-height: 1.3; }
.mod-copy .legend p { margin: 0; color: var(--fg-dim); font-size: 13px; line-height: 1.45; max-width: 42ch; }

.mod-shot { position: relative; aspect-ratio: 5/4; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #16161c, #0a0a0c); border: 0.5px solid var(--line); }
/* Hosted visuals fill the shot; the clip-grid's own frame is dropped. */
.mod-shot .lk-app { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 14px; box-shadow: none; }
/* Real module screenshot (opt-in via `image`): the container drops its fixed
   5/4 ratio and follows the image's own proportions, so nothing is cropped. */
.mode .mvis:has(.mod-img),
.mod-shot:has(.mod-img) { aspect-ratio: auto; }
.mode .mvis .mod-img,
.mod-shot .mod-img { display: block; width: 100%; height: auto; }

/* ============================================================
 * COMPATIBILITY MATRIX
 * ============================================================ */
.compat { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
@media (max-width: 900px) { .compat { grid-template-columns: repeat(2, 1fr); } }
.compat-card { position: relative; border: 0.5px solid var(--line); border-radius: 14px; background: var(--card, #0e0e12); padding: 24px; overflow: hidden; display: flex; flex-direction: column; gap: 14px; min-height: 200px; transition: border-color 0.25s ease, transform 0.25s ease; }
.compat-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.compat-card .ix { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); display: flex; justify-content: space-between; }
.compat-card .ix .ok { color: var(--accent); }
.compat-card h4 { font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; line-height: 1.1; margin: 0; text-wrap: balance; }
.compat-card h4 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.compat-card .compat-kind { color: var(--fg-faint); font-size: 12.5px; font-family: var(--mono); letter-spacing: 0.04em; margin: -4px 0 0; }
.compat-card p { margin: 0; color: var(--fg-dim); font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }
.compat-card .pf { display: flex; gap: 6px; margin-top: auto; flex-wrap: wrap; padding-top: 14px; border-top: 0.5px dashed var(--line); }
.compat-card .pf span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--fg-dim); padding: 3px 8px; border: 0.5px solid var(--line); border-radius: 999px; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }
.span-8 { grid-column: span 8; }
@media (max-width: 900px) { .span-6, .span-4, .span-3, .span-8 { grid-column: span 2; } }

/* ============================================================
 * REQUIREMENTS
 * ============================================================ */
.req-grid { gap: 0; background: var(--card, #0e0e12); }
.req-grid .req:nth-child(4n) { border-right: 0; }
.req-grid .req:nth-last-child(-n+4) { border-bottom: 0; }
@media (max-width: 900px) {
  .req-grid .req:nth-child(odd) { border-right: 0.5px solid var(--line); }
}

/* ============================================================
 * DOWNLOAD — LK override (base .dl-* live in style.css, #445).
 * LK's cards are <div>s with a real inner <a> download button (not
 * whole-card links), so the button keeps a pointer cursor + its 13px
 * label; the one-column breakpoint is 1000px.
 * ============================================================ */
@media (max-width: 1000px) { .dl-grid { grid-template-columns: 1fr; } }
.dl-card .download-btn { font-size: 13px; cursor: pointer; }

/* HELP — .help-grid / .hcard are now shared, see /style.css. (LK renders
 * cards without icons; the shared .hcard .icon rules are simply unused here.) */

/* Light-theme card reskin for the ported components */
:root[data-theme="light"] .tpl-press,
:root[data-theme="light"] .tut-grid .tut { background: var(--card) !important; }

/* Reduced-motion: still the design intent — kill the looping visuals. */
@media (prefers-reduced-motion: reduce) {
  .lk-app .lk-top .dot,
  .clip.playing::before,
  .clip.queued,
  .lk-mixer .ch .lvl { animation: none !important; }
}