/* ---------------------------------------------------------------------------
   Vallaren plug-in pages — shared stylesheet.

   ONE file for all twenty plug-in pages. Each page keeps its own content and
   links this; converting a page is swapping its <style> block for a <link> to
   here, plus the standard header and footer. Retheming all twenty later is
   then one edit to this file rather than twenty.

   The class names are the ones the original DreamLab pages already used, so
   nothing in the page bodies has to be renamed.

   Palette, type and geometry follow the Vallaren site: squared corners, 1px
   #262b2f rules, Barlow Condensed for display, Barlow for body, JetBrains Mono
   for eyebrows and technical labels.
   --------------------------------------------------------------------------- */

:root {
  --bg-0: #0a0b0c;   /* page */
  --bg-1: #0d1013;   /* alternating section */
  --bg-2: #101315;   /* figure well */
  --panel: #121517;  /* card */
  --panel-hi: #16191c;
  --panel-row: #181c1f;

  --line: #262b2f;
  --line-soft: #1c2023;
  --line-hi: #3a4045;

  --ink-0: #f2f5f6;
  --ink-1: #cfd5d8;
  --ink-2: #9fa8ae;
  --ink-3: #8b949a;
  --ink-4: #6d767c;
  --ink-5: #5d666c;

  --accent: #f0a020;
  --accent-hot: #ffc45c;
  --accent-soft: rgba(240, 160, 32, .1);

  /* Functional colour coding, matching the manual's diagrams so a control
     group reads the same in both places. */
  --blue: #4aa8d8;
  --teal: #35c46a;
  --red: #d4372c;
  /* Accent hues the individual plug-in pages reference by name. Each original
     page carried its own private palette; these are the Vallaren equivalents,
     so a control group reads the same here as in the manual's diagrams. Every
     name any page uses must exist — an unresolved var() silently falls back to
     the browser default. */
  --amber: #e8b04a;
  --orange: #e0913c;
  --magenta: #e0619e;
  --fm: #4d8cff;
  --input: #5aa8e0;
  --read-short: #3a9eff;
  --read-lra: #f0b13c;
  /* Squared corners are the house style, so this resolves to nothing rather
     than being left undefined. */
  --radius-m: 0;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --purple: #9b7bd4;

  --section-py: 84px;
  --grid-gap: 1px;

  /* Per-plug-in accent hues, recovered from the original pages. Each is used by
     one page's diagrams; kept as authored so the motifs read as before. */
  --send: #5b9eff;            /* audio-over-network topology */
  --recv: #4ad8c9;
  --ptp: #f0a23c;
  --violet: #9a6ae0;          /* binaural-panner modes */
  --fm-soft: rgba(255, 138, 61, .14);   /* ddm-s1 engine cards */
  --sub: #c8d4e8;
  --sub-soft: rgba(200, 212, 232, .14);
  --wave: #5a9fff;            /* drum-trigger detection legend */
  --trig: #ff6b4e;
  --band-low: #e05a8e;        /* multiband four-band stripe */
  --band-lmid: #5aa8e0;
  --band-hmid: #4fd36b;
  --band-high: #ffb347;
  --stage-gate: #f0a23c;      /* noise-reducer stages */
  --stage-spectral: #4dd6b6;
  --shape-neutral: #4dd8e8;   /* sound-morph shape stripe */
  --shape-vowel: #b96dff;
  --shape-comb: #ffc54c;
  --shape-peak: #ff5fa2;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg-0);
  color: var(--ink-1);
  font-family: 'Barlow', -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hot); }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* ---- display type -------------------------------------------------------- */

h1, h2, h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  color: var(--ink-0);
  letter-spacing: .02em;
  text-wrap: pretty;
}
h1 { margin: 0 0 22px; font-size: 62px; line-height: 1.02; }
h2 { margin: 0 0 16px; font-size: 38px; line-height: 1.06; }
h3 { margin: 0 0 10px; font-size: 24px; letter-spacing: .04em; }

/* The source pages use <em> inside headings for the emphasised half of a
   line. Amber rather than italic — italic condensed reads as a mistake. */
h1 em, h2 em, h3 em { font-style: normal; color: var(--accent); }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

.section-head { margin-bottom: 34px; }
.section-head .num,
.num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

section { padding: var(--section-py) 0; border-bottom: 1px solid var(--line-soft); }
section:nth-of-type(even) { background: var(--bg-1); }

/* ---- page header (site chrome) ------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(14, 16, 18, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.topbar-inner {
  display: flex; align-items: center; gap: 20px;
  padding: 10px 32px;
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; color: inherit; }
.brand:hover { color: inherit; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--accent); color: var(--bg-0);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px;
  flex: none;
}
.brand-name {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 22px; letter-spacing: .12em; color: var(--ink-0); white-space: nowrap;
}
.brand-name .thin {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 15px; letter-spacing: .08em; color: var(--accent);
}

.topnav {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  min-width: 0; margin-left: auto; justify-content: flex-end;
}
.topnav a {
  font-family: 'Barlow Condensed', sans-serif; font-size: 14px; letter-spacing: .1em;
  color: var(--ink-3); padding: 7px 9px; border: 1px solid transparent;
  white-space: nowrap; flex: none;
}
.topnav a:hover { color: var(--ink-0); border-color: var(--line-hi); background: #1a1d20; }
.topnav a.active { color: var(--accent); border-color: var(--line-hi); }

.cta {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 14px; letter-spacing: .12em;
  padding: 8px 16px; min-height: 40px;
  border: 1px solid var(--line-hi); background: none; color: var(--ink-1);
  cursor: pointer; white-space: nowrap; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.cta:hover { border-color: var(--accent); color: var(--accent); }
.cta.primary { background: var(--accent); border-color: var(--accent); color: var(--bg-0); }
.cta.primary:hover { background: var(--accent-hot); border-color: var(--accent-hot); color: var(--bg-0); }
.cta.big { font-size: 16px; padding: 13px 26px; min-height: 48px; letter-spacing: .14em; }

.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; flex: none;
  background: none; border: 1px solid var(--line-hi); color: var(--ink-1);
  cursor: pointer; padding: 10px;
}
.nav-toggle svg { width: 100%; height: 100%; display: block; }
.nav-toggle .icon-x { display: none; }
.topbar.is-open .nav-toggle .icon-bars { display: none; }
.topbar.is-open .nav-toggle .icon-x { display: block; }

/* ---- hero ---------------------------------------------------------------- */

.hero {
  padding: 72px 0 84px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(900px 420px at 78% -20%, #14262f 0%, transparent 64%),
    var(--bg-0);
}
.hero h1 { max-width: 21ch; }
.hero-sub {
  max-width: 68ch; font-size: 17px; line-height: 1.7; color: var(--ink-2);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-4);
}
.eyebrow-dot, .live-dot, .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none;
}

.engine-chip {
  display: inline-flex; flex-wrap: wrap; align-items: stretch;
  border: 1px solid var(--line); background: var(--panel);
  margin-bottom: 26px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase;
}

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  margin-top: 30px;
}
.hero-meta-item {
  background: var(--panel); padding: 14px 20px; flex: 1 1 160px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4);
}
.hero-meta-item .v, .hero-meta-item .val {
  display: block; margin-top: 6px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 19px; letter-spacing: .04em; text-transform: none; color: var(--ink-0);
}

/* ---- screenshot well ----------------------------------------------------- */

.showcase {
  margin-top: 40px; border: 1px solid var(--line); background: var(--bg-2);
  padding: 8px;
}
.showcase img { display: block; width: 100%; height: auto; }
.showcase-caption {
  display: flex; align-items: center; gap: 9px;
  padding: 0 4px 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-5);
}

.diagram {
  border: 1px solid var(--line); background: var(--bg-2); padding: 22px;
  margin: 0 0 26px;
}
.diagram img, .diagram svg { display: block; width: 100%; height: auto; }
.diagram-cap {
  padding: 13px 20px 0; margin-top: 18px; border-top: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-5);
}
.dg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ---- panels and cards --------------------------------------------------- */

.panel {
  background: var(--panel); border: 1px solid var(--line); padding: 24px;
}
.panel.plain { border-top-width: 2px; }
.panel .sub {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-5);
  margin: -4px 0 16px;
}
.panel ul { margin: 0; padding: 0; list-style: none; }
.panel li {
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 14px; line-height: 1.55; color: var(--ink-2);
}
.panel li:last-child { border-bottom: none; padding-bottom: 0; }
.panel li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px; align-items: baseline;
}
.panel li .k, .panel li .name {
  color: var(--ink-0); font-weight: 600;
  font-family: 'Barlow Condensed', sans-serif; font-size: 18px; letter-spacing: .03em;
}
.panel li .name small {
  display: block; margin-top: 3px;
  font-family: 'Barlow', sans-serif; font-weight: 400; font-size: 13px;
  line-height: 1.5; letter-spacing: 0; color: var(--ink-4);
}
.panel li .val {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .06em; white-space: nowrap; text-align: right;
}
.panel li .lbl, .panel li .tag {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}

.controls-grid,
.glance-grid,
.engines,
.formats {
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.controls-grid > *, .glance-grid > *, .engines > *, .formats > * { border: none; }

.glance-grid, .engines { background: var(--panel); }
.glance-cell, .engine-card {
  background: var(--panel); padding: 22px;
  outline: 1px solid var(--line);
}
.glance-cell .lbl, .engine-card .lbl {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 9px;
}
.glance-cell .val, .glance-cell .v {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 26px; letter-spacing: .03em; color: var(--ink-0);
}

/* ---- numbered features -------------------------------------------------- */

.feature {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 24px;
  padding: 26px 0; border-bottom: 1px solid var(--line-soft);
}
.feature:last-of-type { border-bottom: none; }
.feature-mark {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .1em; color: var(--accent);
  border-top: 2px solid var(--accent); padding-top: 10px;
}
.feature p { color: var(--ink-2); max-width: 80ch; }
.feature p em { font-style: normal; color: var(--ink-0); }
.feature-tag {
  display: inline-block; margin-top: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-5);
  border: 1px solid var(--line); padding: 6px 11px;
}

/* ---- presets and chips -------------------------------------------------- */

.presets { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.preset-chip, .format-chip {
  background: var(--panel); padding: 15px 20px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
  font-size: 14px; color: var(--ink-2);
}
.preset-chip .name, .format-chip .name {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 19px; letter-spacing: .05em; color: var(--ink-0);
  flex: 0 0 auto; min-width: 190px;
}
.preset-chip .tag, .format-chip .tag {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}

/* ---- pull-out band ------------------------------------------------------ */

.hardware {
  background: var(--bg-1); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hardware-head { margin: 0 auto; text-align: center; }
.hardware-head p { color: var(--ink-2); margin-left: auto; margin-right: auto; }
.hw-eyebrow {
  display: inline-block; margin-bottom: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
}

/* ---- mailing list ------------------------------------------------------- */

.mailing { background: var(--panel); border: 1px solid var(--line); }
.mailing-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 32px; padding: 34px;
}
.mailing-copy { flex: 1 1 320px; }
.mailing-copy h2 { font-size: 30px; margin-bottom: 8px; }
.mailing-copy p { color: var(--ink-3); font-size: 14px; margin: 0; }
.mailing-form { flex: 1 1 300px; }
.form-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mailing input[type="email"], .mailing input[type="text"] {
  flex: 1 1 200px; min-width: 0; min-height: 48px;
  background: var(--bg-0); border: 1px solid var(--line-hi); color: var(--ink-0);
  padding: 13px 15px; font-family: 'Barlow', sans-serif; font-size: 15px;
}
.mailing input::placeholder { color: var(--ink-5); }
.mailing input:focus { outline: none; border-color: var(--accent); }
.mailing button, .mailing button[type="submit"] {
  flex: none; min-height: 48px; padding: 13px 22px; cursor: pointer;
  background: var(--accent); border: 1px solid var(--accent); color: var(--bg-0);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 15px; letter-spacing: .14em; text-transform: uppercase;
}
.mailing button:hover { background: var(--accent-hot); border-color: var(--accent-hot); }
.mailing button:disabled { opacity: .6; cursor: default; }
.mailing-legal, .mailing-msg {
  margin-top: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  line-height: 1.7; color: var(--ink-5);
}
.mailing-msg.success { color: var(--teal); }
.mailing-msg.error { color: var(--red); }

/* ---- cross-sell grid ---------------------------------------------------- */

.plugins-grid {
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.plugin-card {
  background: var(--panel); padding: 20px; display: block; color: inherit;
  border-top: 2px solid transparent;
}
.plugin-card:hover { background: var(--panel-row); color: inherit; border-top-color: var(--accent); }
.plugin-card.current { background: var(--panel-hi); border-top-color: var(--accent); }
.plugin-card-tag, .plugin-card .tag {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 9px;
}
.plugin-card .name {
  display: block;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 21px; letter-spacing: .04em; color: var(--ink-0); margin-bottom: 7px;
}
.plugin-card p { font-size: 13px; line-height: 1.55; color: var(--ink-3); margin: 0; }
.plugin-card-stripe { display: none; }

/* ---- footer ------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--line); background: var(--bg-0);
  padding: 0; border-bottom: none;
}
footer .wrap { padding: 40px 32px; }
footer a { color: var(--ink-3); margin-left: 18px; font-size: 14px; }
footer a:hover { color: var(--accent); }
.legal {
  border-top: 1px solid var(--line-soft);
}
.legal p {
  max-width: 900px; margin: 0;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  line-height: 1.7; color: var(--ink-5);
}

/* ---- responsive --------------------------------------------------------- */

@media (max-width: 1080px) {
  :root { --section-py: 56px; }
  .wrap { padding: 0 20px; }
  h1 { font-size: 40px; }
  h2 { font-size: 29px; }
  h3 { font-size: 21px; }
  .hero { padding: 44px 0 56px; }
  .hero-sub { font-size: 16px; }

  .nav-toggle { display: block; }
  .topbar-inner { flex-wrap: wrap; }
  .topnav {
    display: none; order: 3; width: 100%;
    /* nowrap matters: the base rule wraps, and a bounded max-height on a
       column flex container turns that wrap into a second column. */
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0;
    /* Bleed matches THIS query's .wrap padding (20px), not the 32px base —
       mismatched, the open menu sits 12px off the left edge and stops short
       on the right. */
    margin: 10px -20px 0; padding: 0 20px 10px;
    max-height: 60vh; overflow-y: auto; overflow-x: hidden;
  }
  .topbar.is-open .topnav { display: flex; }
  .topnav a { padding: 13px 4px; border-bottom: 1px solid var(--line-soft); border-left: none; }
  .topbar .cta { order: 2; }

  .feature { grid-template-columns: 1fr; gap: 12px; }
  .feature-mark { border-top: none; padding-top: 0; }
  .mailing-inner { padding: 24px; }
  footer .wrap { padding: 28px 20px; }
  footer a { margin: 0 18px 0 0; }
}

@media print {
  .topbar, .nav-toggle, .mailing, .cta { display: none !important; }
  body { background: #fff; color: #000; }
}

/* =========================================================================
   PER-PAGE MODULES
   -------------------------------------------------------------------------
   Recovered from each page's original private stylesheet. Converting the set
   to one shared file kept only the classes SAT 456 happened to use, so every
   page-specific module below — engine maps, algorithm grids, network
   topology, spec tables, workflow steps — was rendering completely unstyled.

   Kept as authored, with two edits: font-family declarations dropped so the
   Vallaren families apply, and border-radius forced to 0 for the squared
   house style. Colours come through var(), so they now resolve to Vallaren's
   palette rather than each page's private one.
   ========================================================================= */

/* ---- sat-456 ----------------------------------------------------------- */
/* At-a-glance */
  .glance {
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }

/* ---- audio-over-network ------------------------------------------------ */
.hero-inner { position: relative; z-index: 1; }
.hero-head { max-width: 1000px; margin-bottom: 56px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-shot {
    position: relative; border-radius: 0;
    overflow: hidden; border: 1px solid var(--line);
    background: var(--bg-1);
    box-shadow: 0 40px 100px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(91,158,255,0.06);
  }
.hero-shot img { display: block; width: 100%; height: auto; }
.section-head p.lead {
    font-size: 17px; color: var(--ink-1); line-height: 1.6;
    max-width: 70ch; margin: 24px 0 0 0;
    grid-column: 2;
  }
@media (max-width: 720px) {
  .section-head p.lead { grid-column: 1; }
}
/* Modes grid */
  .modes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) {
  .modes-grid { grid-template-columns: 1fr; }
}
.mode-card {
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 0; padding: 32px;
    position: relative; overflow: hidden;
  }
.mode-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  }
.mode-card.off::before { background: var(--ink-3); }
.mode-card.send::before { background: var(--send); }
.mode-card.recv::before { background: var(--recv); }
.mode-card .tag {
    font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
    margin-bottom: 14px;
  }
.mode-card.off .tag  { color: var(--ink-2); }
.mode-card.send .tag { color: var(--send); }
.mode-card.recv .tag { color: var(--recv); }
.mode-card h4 { font-weight: 300;
    font-size: 24px; margin: 0 0 14px 0; letter-spacing: -0.01em;
  }
.mode-card p { font-size: 14.5px; line-height: 1.6; color: var(--ink-1); margin: 0; text-wrap: pretty; }
.mode-card p strong { color: var(--ink-0); font-weight: 500; }
.preset {
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 0; padding: 24px;
    position: relative;
  }
.preset .pk { font-size: 10px;
    letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3);
    margin-bottom: 12px;
  }
.preset h5 { font-weight: 600; font-size: 16px;
    margin: 0 0 10px 0; color: var(--ink-0); letter-spacing: 0.01em;
  }
.preset p { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.preset .bar { display: flex; gap: 4px; margin-top: 16px; }
.preset .bar i {
    height: 4px; border-radius: 0; flex: 1;
    background: var(--line-hi);
  }
.preset .bar i.on { background: var(--accent); }
/* Topology diagram */
  .topology-section { background: var(--bg-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.topo-wrap {
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 0; padding: 48px 32px;
  }
.topo-wrap svg { display: block; width: 100%; height: auto; }
.topo-legend {
    display: flex; flex-wrap: wrap; gap: 24px; margin-top: 28px;
    font-size: 11px; letter-spacing: 1.2px; color: var(--ink-2);
    text-transform: uppercase;
  }
.topo-legend .swatch { display: inline-flex; align-items: center; gap: 8px; }
.topo-legend .dot { width: 10px; height: 2px; border-radius: 0; }
.topo-legend .dot.send { background: var(--send); }
.topo-legend .dot.recv { background: var(--recv); }
.topo-legend .dot.ptp  { background: var(--ptp); }
/* Multicast benefit row under the diagram */
  .multicast-points {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    margin-top: 24px;
  }
@media (max-width: 820px) {
  .multicast-points { grid-template-columns: 1fr; }
}
.multicast-points .mp {
    background: var(--bg-1); border: 1px solid var(--line);
    border-radius: 0; padding: 24px 26px;
  }
.multicast-points .mp-k {
    font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--ink-2); margin-bottom: 12px;
  }
.multicast-points .mp-v { font-weight: 300;
    font-size: 30px; letter-spacing: -0.02em; color: var(--accent); line-height: 1;
    margin-bottom: 14px;
  }
.multicast-points .mp-v small { font-size: 14px; color: var(--ink-2); margin-left: 2px; letter-spacing: 0; }
.multicast-points .mp p { font-size: 13.5px; line-height: 1.6; color: var(--ink-1); margin: 0; text-wrap: pretty; }
/* Venue showcase */
  .venue-section { background: var(--bg-0); }
.venue-diagram {
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 0; padding: 40px 32px 32px;
  }
.venue-diagram svg { display: block; width: 100%; height: auto; }
.venue-note {
    margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: 22px;
    font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-2);
  }
.venue-note .vk { display: inline-flex; align-items: center; gap: 8px; }
.venue-note .vk .d { width: 10px; height: 10px; border-radius: 0; }
.venue-zones {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    margin-top: 40px;
  }
@media (max-width: 1000px) {
  .venue-zones { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .venue-zones { grid-template-columns: 1fr; }
}
.vzone {
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 0; padding: 20px;
    position: relative; overflow: hidden;
  }
.vzone::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--zc, var(--accent));
  }
.vzone .vz-feed { font-size: 10px;
    letter-spacing: 1.4px; text-transform: uppercase; color: var(--zc, var(--accent));
    margin-bottom: 10px; display: flex; align-items: center; gap: 7px;
  }
.vzone .vz-feed .d { width: 7px; height: 7px; border-radius: 0; background: var(--zc, var(--accent)); box-shadow: 0 0 8px var(--zc, var(--accent)); }
.vzone h5 { font-weight: 600; font-size: 15px; margin: 0 0 6px 0; color: var(--ink-0); }
.vzone p { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.integrator-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    margin-top: 40px;
  }
@media (max-width: 900px) {
  .integrator-row { grid-template-columns: 1fr; }
}
.ipoint {
    padding: 24px 0 0 0; border-top: 1px solid var(--line);
  }
.ipoint h4 { font-weight: 600; font-size: 16px;
    margin: 0 0 10px 0; color: var(--ink-0);
    display: flex; gap: 11px; align-items: baseline;
  }
.ipoint h4 .ix { font-size: 11px; color: var(--accent); }
.ipoint p { font-size: 14px; line-height: 1.6; color: var(--ink-1); margin: 0; text-wrap: pretty; }
.ipoint p code { font-size: 12.5px; background: var(--bg-2); padding: 1px 6px; border-radius: 0; color: var(--accent); border: 1px solid var(--line); }
/* Use case grid */
  .use-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 960px) {
  .use-grid { grid-template-columns: 1fr; }
}
.use-card {
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 0; padding: 28px;
  }
.use-card .tag {
    font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--accent); margin-bottom: 14px;
  }
.use-card h4 { font-weight: 400; font-size: 18px; margin: 0 0 12px 0; color: var(--ink-0); }
.use-card p { font-size: 14.5px; line-height: 1.6; color: var(--ink-1); margin: 0; text-wrap: pretty; }
/* Benefits — two-column reasoned list */
  .benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; }
@media (max-width: 820px) {
  .benefits { grid-template-columns: 1fr; }
}
.benefit { padding: 26px 0; border-top: 1px solid var(--line); }
.benefit h4 { font-weight: 600; font-size: 16.5px;
    margin: 0 0 10px 0; color: var(--ink-0); display: flex; gap: 12px; align-items: baseline;
  }
.benefit h4 .bn { font-size: 11px; font-weight: 500;
    color: var(--accent); letter-spacing: 0.5px;
  }
.benefit p { font-size: 14.5px; line-height: 1.65; color: var(--ink-1); margin: 0; text-wrap: pretty; }
.benefit p code { font-size: 12.5px;
    background: var(--bg-2); padding: 1px 6px; border-radius: 0;
    color: var(--accent); border: 1px solid var(--line);
  }
/* At a glance */
  .glance { background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Specs table */
  .specs-table { width: 100%; border-collapse: collapse; font-size: 14.5px; max-width: 960px; }
.specs-table tr { border-top: 1px solid var(--line); }
.specs-table tr:first-child { border-top: 0; }
.specs-table td { padding: 16px 8px; vertical-align: top; }
.specs-table td:first-child {
    width: 32%;
    font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-2);
  }
.specs-table td:last-child { color: var(--ink-0); }
.specs-table td:last-child strong { color: var(--accent); font-weight: 500; }
.specs-table td code { font-size: 12.5px;
    background: var(--bg-2); padding: 2px 6px; border-radius: 0;
    color: var(--accent); border: 1px solid var(--line);
  }
/* Open-source callout */
  .oss {
    margin-top: 56px;
    background: var(--bg-2); border: 1px solid var(--line);
    border-left: 2px solid var(--accent);
    border-radius: 0; padding: 28px 32px;
  }
.oss .ttl {
    font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--accent); margin-bottom: 10px;
  }
.oss p { font-size: 15px; line-height: 1.65; color: var(--ink-1); margin: 0; max-width: 70ch; text-wrap: pretty; }
.oss p strong { color: var(--ink-0); font-weight: 500; }

/* ---- binaural-panner --------------------------------------------------- */
/* Orbit ring eyebrow — riffs on the head-view radar */
  .orbit {
    display: inline-flex; align-items: center; gap: 14px;
    margin-bottom: 28px;
    font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase;
    color: var(--ink-2);
  }
.orbit-ring {
    width: 22px; height: 22px; border-radius: 0;
    border: 1px solid var(--line-hi); position: relative;
  }
.orbit-ring::after {
    content: ""; position: absolute;
    width: 6px; height: 6px; border-radius: 0;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    top: -3px; left: 50%; transform: translateX(-50%);
  }
/* Modes split card */
  .modes {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    margin-top: 24px;
  }
@media (max-width: 820px) {
  .modes { grid-template-columns: 1fr; }
}
.mode-card {
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 0; padding: 32px;
    position: relative; overflow: hidden;
  }
.mode-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  }
.mode-card.hp::before { background: var(--accent); }
.mode-card.sp::before { background: var(--violet); }
.mode-card .tag {
    font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
    margin-bottom: 14px;
  }
.mode-card.hp .tag { color: var(--accent); }
.mode-card.sp .tag { color: var(--violet); }
.mode-card h4 { font-weight: 300;
    font-size: 26px; margin: 0 0 14px 0; letter-spacing: -0.01em;
  }
.mode-card p {
    font-size: 15px; line-height: 1.6; color: var(--ink-1);
    margin: 0 0 18px 0; text-wrap: pretty;
  }
.spread-chips {
    display: flex; gap: 8px; margin-top: 16px;
  }
.spread-chip {
    padding: 6px 12px; border-radius: 0;
    background: rgba(154,106,224,0.1); border: 1px solid var(--line);
    font-size: 11px; color: var(--ink-1);
  }
.spread-chip strong { color: var(--violet); font-weight: 500; }
.eng-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;
  }
@media (max-width: 960px) {
  .eng-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .eng-grid { grid-template-columns: 1fr; }
}
.eng-card {
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 0; padding: 28px;
  }
.eng-card .tag {
    font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--accent); margin-bottom: 14px;
  }
.eng-card h4 {
    font-size: 18px; font-weight: 500;
    margin: 0 0 12px 0; color: var(--ink-0);
  }
.eng-card p {
    font-size: 14.5px; line-height: 1.6;
    color: var(--ink-1); margin: 0;
  }
/* At-a-glance */
  .glance {
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
/* Unbounded display-face adjustments */
  h1 em, h2 em, h3 em, h4 em, .hero-sub em, .section-head h2 em,
  .hero h1 em, .mode-card h4 em, .panel h3 em, .mailing-copy h2 em,
  .plugin-card h4 em, .video-label em, .audio-examples-head h3 em,
  .glance-cell .big em, .hub-header h1 em {
    font-style: normal !important;
    color: var(--accent) !important;
    font-weight: inherit !important;
  }

/* ---- duophase ----------------------------------------------------------- */
/* At-a-glance */
  .glance {
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }

/* ---- convolution-reverb ------------------------------------------------ */
.engine-chip > span { padding: 9px 18px; display: inline-flex; align-items: center; gap: 10px; }
.engine-chip .dot { width: 7px; height: 7px; border-radius: 0; flex: none; }
.engine-chip .conv { color: var(--accent); border-right: 1px solid var(--line); }
.engine-chip .alg { color: var(--purple); border-right: 1px solid var(--line); }
.engine-chip .par { color: var(--magenta); }
.engine-chip .conv .dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.engine-chip .alg .dot { background: var(--purple); box-shadow: 0 0 8px var(--purple); }
.engine-chip .par .dot { background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }
.engine-card.conv::before { background: var(--accent); }
.engine-card.alg::before { background: var(--purple); }
.engine-card.conv .tag { color: var(--accent); }
.engine-card.alg .tag { color: var(--purple); }
.engine-card.conv li::before { background: var(--accent); }
.engine-card.alg li::before { background: var(--purple); }
/* Warmth chain — spec of tools that warm tracks */
  .warmth {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    margin-top: 24px;
  }
@media (max-width: 960px) {
  .warmth { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .warmth { grid-template-columns: 1fr; }
}
.warmth-card {
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 0; padding: 24px;
  }
.warmth-card .tag {
    font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--accent); margin-bottom: 10px;
  }
.warmth-card h5 {
    font-size: 16px; font-weight: 500;
    margin: 0 0 10px 0; color: var(--ink-0);
  }
.warmth-card p {
    font-size: 13.5px; line-height: 1.55; color: var(--ink-1); margin: 0;
  }
/* At-a-glance */
  .glance {
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
.preset-chip.alg .dot { background: var(--purple); }
.preset-chip.util .dot { background: var(--ink-2); }
.preset-chip.shimmer .dot { background: var(--orange); }
.preset-chip.classic .dot { background: var(--magenta); }
/* Engine map — HTML flow diagram */
  .enginemap-grid {
    display: grid; grid-template-columns: minmax(0,1.05fr) 34px minmax(0,1fr);
    align-items: stretch; margin-top: 28px;
  }
@media (max-width: 820px) {
  .enginemap-grid { grid-template-columns: 1fr; gap: 0; }
}
.em-panel, .em-chain {
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 0; padding: 24px;
  }
.em-chain { display: flex; flex-direction: column; justify-content: center; }
.em-head {
    font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--ink-2); margin-bottom: 18px;
  }
.em-group { margin-bottom: 15px; }
.em-group:last-child { margin-bottom: 0; }
.em-group-lbl {
    font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 9px;
  }
.em-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.em-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 11px; border-radius: 0;
    background: var(--bg-0); border: 1px solid var(--line);
    font-size: 11px; letter-spacing: 0.3px; color: var(--ink-1);
  }
.em-chip .d { width: 6px; height: 6px; border-radius: 0; flex: none; }
.em-connector { display: grid; place-items: center; color: var(--ink-3); }
.em-connector svg { width: 26px; height: 26px; }
@media (max-width: 820px) {
  .em-connector { padding: 10px 0; }
  .em-connector svg { transform: rotate(90deg); }
}
.em-chain-head {
    font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--ink-2); margin-bottom: 16px;
  }
.em-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.em-stage {
    padding: 9px 13px; border-radius: 0;
    background: var(--bg-0); border: 1px solid var(--line-hi);
    font-size: 13px; color: var(--ink-0); white-space: nowrap;
  }
.em-stage.io { color: var(--ink-2); border-style: dashed; }
.em-arrow { color: var(--ink-3); flex: none; display: grid; place-items: center; }
.em-note { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin-top: 18px; max-width: 70ch; }
.em-note b { color: var(--ink-1); font-weight: 500; }
.hardware-shot { position: relative; }
.hardware-shot img {
    display: block; width: 100%; max-width: 1120px; height: auto; margin: 0 auto;
    -webkit-mask-image: radial-gradient(125% 135% at 50% 40%, #000 62%, transparent 100%);
            mask-image: radial-gradient(125% 135% at 50% 40%, #000 62%, transparent 100%);
  }

/* ---- ddm-s1 ------------------------------------------------------------ */
.hero-grid {
    position: relative;
    padding: 110px 0 60px;
  }
.hero-grid::before {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 60% 50% at 25% 15%, var(--accent-soft), transparent 70%),
      radial-gradient(ellipse 45% 40% at 90% 85%, var(--fm-soft), transparent 70%);
    pointer-events: none;
  }
/* Engineering grid background */
  .hero-grid::after {
    content: ""; position: absolute; inset: 0;
    background-image:
      linear-gradient(to right, rgba(46, 60, 90, 0.18) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(46, 60, 90, 0.18) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 30%, transparent 80%);
    pointer-events: none;
  }
.hero-inner { position: relative; z-index: 1; }
/* Brand stripe / data ribbon */
  .data-ribbon {
    display: inline-flex; align-items: center; gap: 0;
    margin-bottom: 36px;
    border: 1px solid var(--line); border-radius: 0;
    background: rgba(10, 14, 24, 0.55);
    backdrop-filter: blur(8px);
    overflow: hidden;
    font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
  }
.data-ribbon > span {
    padding: 8px 14px;
    border-right: 1px solid var(--line);
    color: var(--ink-2);
  }
.data-ribbon > span:last-child { border-right: 0; }
.data-ribbon > span.live {
    color: var(--accent);
    display: inline-flex; align-items: center; gap: 8px;
  }
.data-ribbon .pulse {
    width: 6px; height: 6px; border-radius: 0;
    background: var(--accent); box-shadow: 0 0 10px var(--accent);
    animation: pulse 1.6s ease-in-out infinite;
  }
.hero h1 .silver {
    background: linear-gradient(180deg, #ffffff 0%, #b9c5dd 50%, #6f7d97 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 300;
  }
.hero h1 .accent {
    color: var(--accent);
    font-style: italic; font-weight: 300;
  }
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
/* ============ SHOWCASE — plugin shot ============ */
  .showcase-wrap { position: relative; margin-top: 72px; }
/* corner readouts on the plugin shot */
  .showcase-readout {
    position: absolute; bottom: 22px; right: 22px;
    display: flex; gap: 22px;
    padding: 14px 18px;
    background: rgba(6, 8, 16, 0.78); backdrop-filter: blur(10px);
    border: 1px solid var(--line-hi); border-radius: 0; font-size: 11px;
  }
.showcase-readout .row { display: flex; flex-direction: column; gap: 2px; }
.showcase-readout .row .lbl { color: var(--ink-2); letter-spacing: 1.4px; text-transform: uppercase; font-size: 9.5px; }
.showcase-readout .row .val { color: var(--accent); letter-spacing: 0.04em; }
.demo-card.fm       { --c: var(--fm);     --c-soft: var(--fm-soft); }
.demo-tag .badge {
    width: 6px; height: 6px; border-radius: 0;
    background: var(--c); box-shadow: 0 0 10px var(--c);
  }
.section-head p.lead {
    font-size: 17px; color: var(--ink-1); line-height: 1.6;
    max-width: 70ch; margin: 24px 0 0 0;
  }
/* ============ ARCHITECTURE DIAGRAM ============ */
  .arch-section { background: linear-gradient(180deg, var(--bg-0), var(--bg-1) 50%, var(--bg-0)); }
.arch-board {
    border: 1px solid var(--line); border-radius: 0;
    background: var(--bg-1);
    padding: 48px;
    position: relative; overflow: hidden;
  }
.arch-board::before {
    content: ""; position: absolute; inset: 0;
    background-image:
      linear-gradient(to right, rgba(46, 60, 90, 0.12) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(46, 60, 90, 0.12) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
  }
.arch-svg-wrap { position: relative; width: 100%; }
.arch-svg { display: block; width: 100%; height: auto; }
.arch-legend {
    position: relative; z-index: 1;
    display: flex; gap: 24px; flex-wrap: wrap;
    margin-top: 28px;
    font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--ink-2);
  }
.arch-legend .swatch { display: inline-flex; align-items: center; gap: 8px; }
.arch-legend .dot { width: 10px; height: 10px; border-radius: 0; }
.arch-legend .dot.sub { background: var(--sub); box-shadow: 0 0 10px rgba(200,212,232,0.4); }
.arch-legend .dot.fm  { background: var(--fm);  box-shadow: 0 0 10px rgba(255,138,61,0.5); }
.arch-legend .dot.fx  { background: var(--accent); box-shadow: 0 0 10px var(--accent-soft); }
/* ============ FM ALGORITHMS ============ */
  .alg-section { background: var(--bg-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.alg-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
@media (max-width: 900px) {
  .alg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .alg-grid { grid-template-columns: 1fr; }
}
.alg-card {
    border: 1px solid var(--line); border-radius: 0;
    background: var(--bg-0);
    padding: 24px;
    transition: border-color 180ms, transform 220ms;
    position: relative;
  }
.alg-card:hover { border-color: var(--fm); transform: translateY(-2px); }
.alg-card .alg-num {
    font-size: 10px; letter-spacing: 1.6px;
    color: var(--ink-2);
  }
.alg-card .alg-name { font-weight: 300;
    font-size: 22px; color: var(--ink-0);
    letter-spacing: -0.015em;
    margin: 4px 0 16px;
  }
.alg-card .alg-svg {
    display: block; width: 100%; height: 110px;
    margin-bottom: 14px;
  }
.alg-card .alg-desc {
    font-size: 13px; color: var(--ink-1); line-height: 1.55;
    text-wrap: pretty; margin: 0;
  }
/* ============ ENGINE SPLIT — Sub vs FM ============ */
  .split-section { padding-top: var(--section-py); padding-bottom: var(--section-py); }
.split-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
@media (max-width: 900px) {
  .split-grid { grid-template-columns: 1fr; }
}
.engine-card, .demo-card { --c: var(--accent); --c-soft: var(--accent-soft); }
.engine-card.sub, .demo-card.sub { --c: var(--sub); --c-soft: var(--sub-soft); }
.demo-card.hybrid { --c: var(--accent); --c-soft: var(--accent-soft); }
.demo-card.percussion { --c: var(--fm); --c-soft: var(--fm-soft); }
.engine-card.fm   { --c-soft: var(--fm-soft);  --c: var(--fm);  }
.engine-tag {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--c); margin-bottom: 16px;
  }
.engine-tag .badge {
    width: 10px; height: 10px; border-radius: 0;
    background: var(--c); box-shadow: 0 0 12px var(--c);
  }
.engine-card .engine-sub {
    position: relative;
    font-size: 15px; color: var(--ink-1); line-height: 1.6;
    margin: 0 0 28px; text-wrap: pretty;
  }
.engine-card ul.spec-list {
    position: relative;
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px;
  }
.engine-card ul.spec-list li {
    display: flex; flex-direction: column; gap: 3px;
    padding-top: 10px; border-top: 1px solid var(--line);
  }
.engine-card ul.spec-list .k {
    font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--ink-2);
  }
.engine-card ul.spec-list .v {
    font-size: 13.5px; color: var(--ink-0); font-weight: 500;
  }
/* mini scope/ratio chart in each card */
  .engine-vis {
    position: relative;
    height: 70px; margin: 22px 0 28px;
    border: 1px solid var(--line); border-radius: 0;
    background: rgba(0,0,0,0.25);
    overflow: hidden;
  }
.engine-vis svg { display: block; width: 100%; height: 100%; }
/* ============ FEATURES ============ */
  .features-section { background: var(--bg-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.preset .p-tag.fm  { color: var(--fm);  border: 1px solid rgba(255,138,61,0.35); }
.preset .p-tag.fx  { color: var(--accent); border: 1px solid var(--accent-soft); }
/* ============ STUDIO IMAGE ============ */
  .studio-section {
    padding: var(--section-py) 0;
    position: relative;
    background: var(--bg-1);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
.studio-grid {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px;
    align-items: center;
  }
@media (max-width: 1000px) {
  .studio-grid { grid-template-columns: 1fr; gap: 36px; }
}
.studio-img-wrap {
    position: relative;
    border: 1px solid var(--line-hi);
    border-radius: 0;
    overflow: hidden;
    background: var(--bg-0);
    box-shadow:
      0 30px 80px -30px rgba(0,0,0,0.7),
      0 0 0 1px rgba(255,138,61,0.08);
  }
.studio-img-wrap img {
    width: 100%; height: auto; display: block;
  }
.studio-img-chip {
    position: absolute; top: 14px; left: 14px;
    font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--ink-0);
    background: rgba(6,8,16,0.78);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,138,61,0.45);
    padding: 6px 10px; border-radius: 0;
    z-index: 2;
    display: inline-flex; align-items: center; gap: 8px;
  }
.studio-img-chip::before {
    content: ""; width: 6px; height: 6px; border-radius: 0;
    background: var(--fm); box-shadow: 0 0 8px var(--fm);
  }
.studio-eyebrow {
    font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase;
    color: var(--fm); margin-bottom: 22px;
    display: inline-flex; align-items: center; gap: 10px;
  }
.studio-eyebrow::before {
    content: ""; width: 24px; height: 1px; background: var(--fm);
    display: inline-block;
  }
.studio-content h2 { font-weight: 200;
    font-size: clamp(32px, 4.2vw, 52px); line-height: 1.05;
    letter-spacing: -0.02em; margin: 0 0 22px;
    color: var(--ink-0);
    text-wrap: balance;
  }
.studio-content h2 em {
    font-style: italic; color: var(--fm); font-weight: 300;
  }
.studio-content p {
    font-size: 16px; line-height: 1.6; color: var(--ink-1);
    max-width: 52ch; margin: 0 0 22px;
  }
.studio-stats {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 14px; margin-top: 28px;
  }
.studio-stat {
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 14px 16px;
    background: var(--panel);
  }
.studio-stat .k {
    font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--ink-2); display: block; margin-bottom: 6px;
  }
.studio-stat .v { font-weight: 300;
    font-size: 22px; color: var(--ink-0); letter-spacing: -0.01em;
  }
.studio-stat .v small { font-size: 12px; color: var(--ink-2);
    margin-left: 6px; font-weight: 400;
  }
/* ============ SPECS TABLE ============ */
  .specs-section { background: var(--bg-0); }
.specs-table {
    width: 100%; border-collapse: collapse;
    font-size: 14px;
  }
.specs-table tr { border-top: 1px solid var(--line); }
.specs-table tr:first-child { border-top: 0; }
.specs-table td {
    padding: 16px 8px;
    vertical-align: top;
  }
.specs-table td:first-child {
    width: 32%;
    font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase;
    color: var(--ink-2);
  }
.specs-table td:last-child { color: var(--ink-0); }
.specs-table td:last-child strong { color: var(--accent); font-weight: 500; }
/* ============ FOOTER CTA ============ */
  .footer-cta {
    text-align: center;
    padding: 120px 0;
    border-top: 1px solid var(--line);
    background:
      radial-gradient(ellipse 50% 60% at 50% 50%, var(--accent-soft), transparent 70%),
      var(--bg-0);
  }
.footer-cta h2 { font-weight: 200;
    font-size: clamp(36px, 5vw, 64px); line-height: 1.05;
    letter-spacing: -0.03em; margin: 0 0 32px;
    text-wrap: balance;
  }
.footer-cta h2 em {
    font-style: italic; color: var(--accent); font-weight: 300;
  }
.footer-cta .row { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.footer-bottom {
    padding: 32px 0;
    border-top: 1px solid var(--line); font-size: 11px;
    color: var(--ink-2); letter-spacing: 0.04em;
    display: flex; justify-content: space-between; align-items: center;
  }
.footer-bottom a { color: var(--ink-2); text-decoration: none; }
.footer-bottom a:hover { color: var(--accent); }
.blk { fill: #141b2a; stroke: #2e3c5a; stroke-width: 1; rx:8; ry:8; }
.blk-sub { fill: #141b2a; stroke: #c8d4e8; stroke-width: 1; opacity: 0.95; }
.blk-fm  { fill: #141b2a; stroke: #ff8a3d; stroke-width: 1; opacity: 0.95; }
.blk-fx  { fill: #141b2a; stroke: #4d8cff; stroke-width: 1; opacity: 0.95; }
.lbl-tiny { fill: #6e7a92; font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; }
.lbl-engine { font-size: 11px; font-weight: 400; letter-spacing: 1.4px; text-transform: uppercase; }
.ln { fill: none; stroke-width: 1.4; }
.ln-sub { stroke: #c8d4e8; opacity: 0.7; }
.ln-fm  { stroke: #ff8a3d; opacity: 0.7; }
.ln-mix { stroke: #4d8cff; opacity: 0.85; stroke-width: 1.6; }
.photo-break {
    position: relative;
    background: #0a0608;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
  }
.photo-break-inner {
    position: relative;
    min-height: 640px;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    align-items: stretch;
  }
@media (max-width: 980px) {
  .photo-break-inner { grid-template-columns: 1fr; min-height: 0; }
}
.photo-break-img {
    position: relative;
    overflow: hidden;
    background: #000;
  }
.photo-break-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: saturate(0.95) contrast(1.02);
  }
.photo-break-img::after {
    /* warm gradient bleed into the right side / bottom */
    content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(90deg, transparent 60%, rgba(10,6,8,0.55) 100%),
      linear-gradient(180deg, transparent 70%, rgba(10,6,8,0.5) 100%);
    pointer-events: none;
  }
@media (max-width: 980px) {
  .photo-break-img { aspect-ratio: 3/2; }
  .photo-break-img::after {
      background: linear-gradient(180deg, transparent 55%, rgba(10,6,8,0.85) 100%);
    }
}
.photo-break-chip {
    position: absolute; top: 24px; left: 24px;
    font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase;
    color: var(--ink-0);
    background: rgba(6,8,16,0.72);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,138,61,0.4);
    padding: 7px 11px; border-radius: 0;
    display: inline-flex; align-items: center; gap: 8px;
    z-index: 2;
  }
.photo-break-chip::before {
    content: ""; width: 6px; height: 6px; border-radius: 0;
    background: var(--fm); box-shadow: 0 0 10px var(--fm);
  }
.photo-break-content {
    position: relative;
    padding: 80px 64px 80px 56px;
    display: flex; flex-direction: column; justify-content: center;
    background:
      linear-gradient(90deg, rgba(10,6,8,0.7) 0%, #0a0608 30%);
    z-index: 1;
  }
@media (max-width: 980px) {
  .photo-break-content { padding: 56px 28px; background: #0a0608; }
}
.photo-break-eyebrow {
    font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase;
    color: var(--fm); margin-bottom: 22px;
    display: inline-flex; align-items: center; gap: 10px;
  }
.photo-break-eyebrow::before {
    content: ""; width: 24px; height: 1px; background: var(--fm);
    display: inline-block;
  }
.photo-break-quote { font-weight: 200;
    font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12;
    letter-spacing: -0.018em;
    color: var(--ink-0);
    margin: 0 0 28px;
    text-wrap: balance;
  }
.photo-break-quote em {
    font-style: italic; color: var(--fm); font-weight: 300;
  }
.photo-break-attr {
    font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--ink-2);
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 32px;
  }
.photo-break-attr .dash { width: 18px; height: 1px; background: var(--ink-3); }
.photo-break-stats {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--line);
    padding-top: 24px;
  }
.photo-break-stats .stat {
    padding-right: 16px;
  }
.photo-break-stats .stat + .stat { border-left: 1px solid var(--line); padding-left: 18px; }
.photo-break-stats .k {
    font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 6px;
  }
.photo-break-stats .v { font-weight: 300;
    font-size: 18px; color: var(--ink-0); letter-spacing: -0.01em;
  }
.rack-section { background: var(--bg-1); border-top: 1px solid var(--line); padding: var(--section-py) 0; }

/* ---- dimension-chorus -------------------------------------------------- */
.hero-inner { position: relative; z-index: 1; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-shot {
    margin-top: 64px; position: relative; border-radius: 0; overflow: hidden;
    border: 1px solid var(--line); background: var(--bg-1);
    box-shadow: 0 40px 100px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(79,216,194,0.05);
    max-width: 720px; margin-left: auto; margin-right: auto;
  }
.hero-shot img { display: block; width: 100%; height: auto; }
.section-head p.lead { font-size: 17px; color: var(--ink-1); line-height: 1.6; max-width: 70ch; margin: 24px 0 0 0; grid-column: 2; }
@media (max-width: 720px) {
  .section-head p.lead { grid-column: 1; }
}
.engine-card.chorus::before { background: var(--teal); }
.engine-card.harm::before { background: var(--amber); }
.engine-card.chorus .tag { color: var(--teal); }
.engine-card.harm .tag { color: var(--amber); }
.engine-card.chorus li .val { color: var(--teal); }
.engine-card.harm li .val { color: var(--amber); }
/* Modes ribbon */
  .modes-ribbon { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 56px; }
@media (max-width: 820px) {
  .modes-ribbon { grid-template-columns: repeat(2, 1fr); }
}
.mode { background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; padding: 22px; position: relative; overflow: hidden; }
.mode::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--teal); opacity: var(--o, 0.4); }
.mode .idx { font-size: 10px; letter-spacing: 1.6px; color: var(--ink-3); margin-bottom: 10px; }
.mode .name { font-weight: 600; font-size: 15px; color: var(--ink-0); margin-bottom: 6px; }
.mode p { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin: 0; }
.preset { background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; padding: 24px; }
.preset .pk { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.preset h5 { font-weight: 600; font-size: 16px; margin: 0 0 10px 0; color: var(--ink-0); }
.preset p { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 0; }
/* At a glance */
  .glance { background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---- drum-trigger ------------------------------------------------------ */
.hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background-image: url(../img/plugins/pages/drum-trigger-bg.jpg);
    background-size: cover; background-position: center;
    opacity: 0.35;
    mask-image: linear-gradient(90deg, transparent 0%, black 30%, black 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 30%, black 100%);
  }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 2; }
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-shot {
    position: relative; border-radius: 0;
    overflow: hidden; border: 1px solid var(--line);
    background: var(--bg-1);
    box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,107,78,0.06);
  }
.hero-shot img { display: block; width: 100%; height: auto; }
.section-head p.lead {
    font-size: 17px; color: var(--ink-1); line-height: 1.6;
    max-width: 70ch; margin: 24px 0 0 0;
    grid-column: 2;
  }
@media (max-width: 720px) {
  .section-head p.lead { grid-column: 1; }
}
/* Workflow */
  .workflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
@media (max-width: 900px) {
  .workflow-grid { grid-template-columns: 1fr; }
}
.step-card {
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 0; padding: 32px;
    position: relative; overflow: hidden;
  }
.step-card::before {
    counter-increment: step;
    content: "0" counter(step);
    position: absolute; top: 24px; right: 28px;
    font-size: 11px; letter-spacing: 1.6px;
    color: var(--accent);
  }
.step-card .tag {
    font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--accent); margin-bottom: 14px;
  }
.step-card h4 { font-weight: 300;
    font-size: 26px; margin: 0 0 14px 0; letter-spacing: -0.01em;
  }
.step-card p { font-size: 14.5px; line-height: 1.6; color: var(--ink-1); margin: 0; text-wrap: pretty; }
.step-card p strong { color: var(--ink-0); font-weight: 500; }
/* Detection diagram */
  .detect-section { background: var(--bg-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.detect-wrap {
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 0; padding: 36px 32px;
  }
.detect-wrap svg { display: block; width: 100%; height: auto; }
.detect-legend {
    display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px;
    font-size: 11px; letter-spacing: 1.2px; color: var(--ink-2);
    text-transform: uppercase;
  }
.detect-legend .swatch { display: inline-flex; align-items: center; gap: 8px; }
.detect-legend .dot { width: 14px; height: 2px; border-radius: 0; }
.detect-legend .dot.wave { background: var(--wave); }
.detect-legend .dot.trig { background: var(--trig); }
.detect-legend .dot.thr  { background: var(--ink-3); }
.control-panel {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 0; padding: 32px;
    position: relative; overflow: hidden;
  }
.control-panel::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--accent); opacity: 0.85;
  }
.control-panel h3 { font-weight: 300;
    font-size: 24px; margin: 0 0 6px 0;
  }
.control-panel .sub {
    font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--ink-2); margin-bottom: 22px;
  }
.control-panel ul { list-style: none; margin: 0; padding: 0; }
.control-panel li {
    display: grid; grid-template-columns: 1fr auto; gap: 20px;
    padding: 14px 0; border-top: 1px solid var(--line);
    font-size: 14.5px; align-items: baseline;
  }
.control-panel li:first-child { border-top: none; padding-top: 4px; }
.control-panel li .name { color: var(--ink-0); font-weight: 500; }
.control-panel li .name small {
    display: block; color: var(--ink-2); font-weight: 400;
    font-size: 13px; margin-top: 3px;
  }
.control-panel li .val {
    font-size: 12px; color: var(--accent);
    letter-spacing: 0.4px; white-space: nowrap;
  }
/* At a glance */
  .glance { background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Footer CTA */
  .footer-cta {
    text-align: center; padding: 100px 0;
    background:
      radial-gradient(ellipse 60% 80% at 50% 50%, var(--accent-soft), transparent 70%),
      var(--bg-0);
    border-top: 1px solid var(--line);
  }
.footer-cta h2 { font-weight: 200;
    font-size: clamp(34px, 4.8vw, 56px); line-height: 1.05;
    letter-spacing: -0.02em; margin: 0 0 32px;
  }
.footer-cta h2 em { font-style: italic; color: var(--accent); font-weight: 300; }
.footer-cta .row { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.pair-section {
    background:
      radial-gradient(ellipse 60% 70% at 80% 30%, rgba(255,138,61,0.10), transparent 70%),
      radial-gradient(ellipse 50% 60% at 15% 80%, rgba(255,107,78,0.08), transparent 70%),
      var(--bg-0);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
.pair-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
  }
@media (max-width: 1000px) {
  .pair-grid { grid-template-columns: 1fr; gap: 40px; }
}
.pair-card {
    background: linear-gradient(180deg, var(--panel) 0%, var(--bg-1) 100%);
    border: 1px solid var(--line);
    border-left: 2px solid #ff8a3d;
    border-radius: 0;
    padding: 36px 36px 32px;
  }
.pair-card .ddm-tag {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase;
    color: #ff8a3d; margin-bottom: 16px;
  }
.pair-card .ddm-tag::before {
    content: ""; width: 6px; height: 6px; border-radius: 0;
    background: #ff8a3d; box-shadow: 0 0 8px #ff8a3d;
  }
.pair-card h3 { font-weight: 300;
    font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15;
    letter-spacing: -0.01em; margin: 0 0 16px 0;
    text-wrap: balance;
  }
.pair-card h3 em { font-style: italic; color: #ff8a3d; font-weight: 300; }
.pair-card p { font-size: 15.5px; line-height: 1.65; color: var(--ink-1); margin: 0 0 14px 0; text-wrap: pretty; }
.pair-card p strong { color: var(--ink-0); font-weight: 500; }
.pair-card .pair-cta {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px;
    padding: 10px 18px; border-radius: 0;
    border: 1px solid #ff8a3d; background: rgba(255,138,61,0.08);
    color: #ff8a3d; font-size: 13px; font-weight: 500; text-decoration: none;
    transition: all 180ms ease;
  }
.pair-card .pair-cta:hover { background: #ff8a3d; color: #1a0e06; }
.pair-diagram {
    background: var(--bg-1); border: 1px solid var(--line);
    border-radius: 0; padding: 32px;
  }
.pair-diagram svg { display: block; width: 100%; height: auto; }
.pair-diagram .caption {
    margin-top: 16px;
    font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--ink-2); text-align: center;
  }

/* ---- impulse-lab ------------------------------------------------------- */
/* At-a-glance */
  .glance {
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }

/* ---- juan-oh-six ------------------------------------------------------- */
/* At-a-glance */
  .glance {
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
.hardware-shot { position: relative; }
.hardware-shot img {
    display: block; width: 100%; max-width: 1120px; height: auto; margin: 0 auto;
    -webkit-mask-image: radial-gradient(125% 135% at 50% 40%, #000 62%, transparent 100%);
            mask-image: radial-gradient(125% 135% at 50% 40%, #000 62%, transparent 100%);
  }

/* ---- lufs-master ------------------------------------------------------- */
.hero-inner { position: relative; z-index: 1; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-shot {
    margin-top: 64px; position: relative; border-radius: 0; overflow: hidden;
    border: 1px solid var(--line); background: var(--bg-1);
    box-shadow: 0 40px 100px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(63,217,138,0.05);
  }
.hero-shot img { display: block; width: 100%; height: auto; }
.section-head p.lead { font-size: 17px; color: var(--ink-1); line-height: 1.6; max-width: 70ch; margin: 24px 0 0 0; grid-column: 2; }
@media (max-width: 720px) {
  .section-head p.lead { grid-column: 1; }
}
/* Readings grid — the four loudness numbers */
  .readings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) {
  .readings { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .readings { grid-template-columns: 1fr; }
}
.reading { background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; padding: 26px 24px; position: relative; overflow: hidden; }
.reading::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--rc, var(--accent)); }
.reading .rk { font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; }
.reading .rv { font-weight: 300; font-size: 34px; letter-spacing: -0.02em; color: var(--rc, var(--accent)); line-height: 1; margin-bottom: 14px; }
.reading .rv small { font-size: 14px; color: var(--ink-2); margin-left: 3px; letter-spacing: 0; }
.reading p { font-size: 13.5px; line-height: 1.55; color: var(--ink-1); margin: 0; text-wrap: pretty; }
/* Workflow steps */
  .workflow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) {
  .workflow { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .workflow { grid-template-columns: 1fr; }
}
.step { background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; padding: 26px 24px; }
.step .sn { font-weight: 300; font-size: 30px; color: var(--accent); letter-spacing: -0.02em; margin-bottom: 16px; line-height: 1; }
.step h5 { font-weight: 600; font-size: 15px; color: var(--ink-0); margin: 0 0 8px 0; }
.step p { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 0; }
/* Targets table */
  .targets-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.targets-table thead td { font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-2); padding: 0 8px 14px 8px; }
.targets-table tbody tr { border-top: 1px solid var(--line); }
.targets-table td { padding: 16px 8px; vertical-align: middle; }
.targets-table td:first-child { color: var(--ink-0); font-weight: 500; }
.targets-table td.lufs { color: var(--accent); white-space: nowrap; }
.targets-table td.tp { color: var(--ink-1); white-space: nowrap; }
.targets-table .tag-pill { display: inline-block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; border-radius: 0; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--line); }
.targets-note { margin-top: 28px; padding: 24px 28px; background: var(--bg-2); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: 0; }
.targets-note p { font-size: 14.5px; line-height: 1.65; color: var(--ink-1); margin: 0; text-wrap: pretty; }
.targets-note strong { color: var(--ink-0); font-weight: 500; }
/* Audience grid */
  .audience { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) {
  .audience { grid-template-columns: 1fr; }
}
.aud { background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; padding: 28px; }
.aud .tag { font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.aud h4 { font-weight: 400; font-size: 18px; margin: 0 0 12px 0; color: var(--ink-0); }
.aud p { font-size: 14.5px; line-height: 1.6; color: var(--ink-1); margin: 0; text-wrap: pretty; }
/* At a glance */
  .glance { background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---- multiband --------------------------------------------------------- */
/* Band color stripe — recurring motif */
  .band-stripe {
    display: flex; height: 3px; width: 80px; margin-bottom: 32px;
    border-radius: 0; overflow: hidden;
  }
.band-stripe span { flex: 1; }
.band-stripe span:nth-child(1) { background: var(--band-low); }
.band-stripe span:nth-child(2) { background: var(--band-lmid); }
.band-stripe span:nth-child(3) { background: var(--band-hmid); }
.band-stripe span:nth-child(4) { background: var(--band-high); }
/* ===== Feature list ===== */
  .features {
    display: block;
  }
/* ===== Engineering notes ===== */
  .eng-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;
  }
@media (max-width: 960px) {
  .eng-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .eng-grid { grid-template-columns: 1fr; }
}
.eng-card {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 28px;
  }
.eng-card .tag {
    font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--accent); margin-bottom: 16px;
  }
.eng-card h4 {
    font-size: 18px; font-weight: 500;
    margin: 0 0 12px 0; color: var(--ink-0);
  }
.eng-card p {
    font-size: 14.5px; line-height: 1.6;
    color: var(--ink-1); margin: 0;
    text-wrap: pretty;
  }
/* ===== At-a-glance ===== */
  .glance {
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
.sp-block { margin-top: 44px; }
.sp-card {
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 0; padding: 26px 28px 24px;
  }
.sp-card + .sp-card { margin-top: 20px; }
.sp-card-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
  }
.sp-card-head h3 { font-weight: 500; font-size: 18px;
    margin: 0; color: var(--ink-0); letter-spacing: -0.005em;
  }
.sp-card-head .tag { font-size: 10.5px;
    letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent);
  }
.sp-card p.note {
    font-size: 13.5px; color: var(--ink-2); line-height: 1.6;
    margin: 18px 0 0 0; text-wrap: pretty; max-width: 760px;
  }
.sp-card p.note span.k { color: var(--ink-1); font-size: 12.5px; }
/* Pipeline */
  .sp-pipe { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 5px; }
.sp-box { font-size: 11px;
    letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink-1);
    background: var(--bg-1); border: 1px solid var(--line);
    border-radius: 0; padding: 9px 12px; white-space: nowrap;
  }
.sp-box.io { color: #1a1406; background: var(--accent); border-color: var(--accent); font-weight: 600; }
.sp-box.opt { border-style: dashed; color: var(--ink-2); }
.sp-box.lim { color: var(--accent); border-color: var(--accent-hot); background: var(--accent-soft); }
.sp-arrow { color: var(--ink-3); font-size: 14px; line-height: 1; }
.sp-split {
    display: inline-flex; flex-direction: column; gap: 3px;
    border: 1px solid var(--line-hi); border-radius: 0; padding: 7px; background: var(--bg-1);
  }
.sp-split .row { display: flex; align-items: center; gap: 7px; }
.sp-split .sw { width: 22px; height: 8px; border-radius: 0; flex: none; }
.sp-split .lab { font-size: 9.5px; letter-spacing: 0.4px; color: var(--ink-2); text-transform: uppercase; }
/* Per-band detail */
  .sp-band-detail { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; }
@media (max-width: 760px) {
  .sp-band-detail { grid-template-columns: 1fr; gap: 18px; }
}
.sp-key { display: flex; flex-direction: column; gap: 9px; }
.sp-key .row { display: flex; align-items: center; gap: 10px; }
.sp-key .dot { width: 11px; height: 11px; border-radius: 0; flex: none; }
.sp-key .nm { font-size: 11px; letter-spacing: 0.4px; color: var(--ink-1); text-transform: uppercase; }
.sp-chain {
    border-left: 2px solid var(--line-hi); padding-left: 22px;
    background: linear-gradient(90deg, rgba(224,90,142,0.05), rgba(90,168,224,0.05) 32%, rgba(79,211,107,0.05) 64%, rgba(255,179,71,0.06));
    border-radius: 0; padding: 16px 18px 16px 22px;
  }
/* Two-up diagram grid */
  .sp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
@media (max-width: 820px) {
  .sp-duo { grid-template-columns: 1fr; }
}
.sp-card svg { display: block; width: 100%; height: auto; }
.sp-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; }
.sp-legend .item { display: flex; align-items: center; gap: 7px; font-size: 10.5px; letter-spacing: 0.3px; color: var(--ink-2); text-transform: uppercase; }
.sp-legend .ln { width: 18px; height: 0; border-top-width: 2.5px; border-top-style: solid; }

/* ---- muse-eq ----------------------------------------------------------- */
/* Orbit ring eyebrow — riffs on the head-view radar */
  .orbit {
    display: inline-flex; align-items: center; gap: 14px;
    margin-bottom: 28px;
    font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase;
    color: var(--ink-2);
  }
.orbit-ring {
    width: 22px; height: 22px; border-radius: 0;
    border: 1px solid var(--line-hi); position: relative;
  }
.orbit-ring::after {
    content: ""; position: absolute;
    width: 6px; height: 6px; border-radius: 0;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    top: -3px; left: 50%; transform: translateX(-50%);
  }
.eng-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;
  }
@media (max-width: 960px) {
  .eng-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .eng-grid { grid-template-columns: 1fr; }
}
.eng-card {
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 0; padding: 28px;
  }
.eng-card .tag {
    font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--accent); margin-bottom: 14px;
  }
.eng-card h4 {
    font-size: 18px; font-weight: 500;
    margin: 0 0 12px 0; color: var(--ink-0);
  }
.eng-card p {
    font-size: 14.5px; line-height: 1.6;
    color: var(--ink-1); margin: 0;
  }
/* At-a-glance */
  .glance {
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
/* Muse EQ layout additions */
  .voicings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 8px;
  }
@media (max-width: 900px) {
  .voicings-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .voicings-grid { grid-template-columns: 1fr; }
}
.voicing-card {
    padding: 22px 22px 20px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--bg-1);
    transition: border-color 180ms, background 180ms;
  }
.voicing-card:hover {
    border-color: var(--line-hi);
    background: var(--bg-2);
  }
.vc-tag {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--accent);
    padding: 4px 9px;
    border: 1px solid var(--accent-soft);
    border-radius: 0;
    margin-bottom: 14px;
    font-weight: 500;
  }
.voicing-card h4 {
    margin: 0 0 8px 0;
    font-weight: 400;
    font-size: 28px;
    letter-spacing: -0.01em;
    color: var(--ink-0);
    font-style: italic;
  }
.voicing-card p {
    margin: 0;
    font-size: 13.5px;
    color: var(--ink-1);
    line-height: 1.55;
    text-wrap: pretty;
  }
.voicing-card.clean .vc-tag {
    color: var(--ink-1);
    border-color: var(--line-hi);
  }
.voicing-card.clean h4 {
    color: var(--ink-1);
    font-style: normal;
    font-size: 22px;
    letter-spacing: 0.04em;
  }
.controls-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
@media (max-width: 900px) {
  .controls-split { grid-template-columns: 1fr; }
}

/* ---- noise-reducer ----------------------------------------------------- */
/* Diagram blocks */
  .diagram-card {
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 0; overflow: hidden;
    margin-bottom: 28px;
  }
.diagram-card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 28px; border-bottom: 1px solid var(--line);
    background: var(--bg-1);
  }
.diagram-card-head .lhs {
    display: flex; align-items: center; gap: 14px;
  }
.diagram-card-head .num {
    font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--ink-2);
  }
.diagram-card-head .ttl {
    font-size: 15px; font-weight: 500; color: var(--ink-0);
  }
.diagram-card-head .rhs {
    font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--ink-2);
  }
.diagram-body { padding: 36px 28px; }
.diagram-body svg { display: block; width: 100%; height: auto; }
.diagram-caption {
    margin-top: 20px;
    font-size: 11px; letter-spacing: 1.2px;
    color: var(--ink-2); line-height: 1.7;
  }
.diagram-caption span.k { color: var(--accent); }
.diagram-caption span.g { color: var(--stage-gate); }
/* Two-stage layout */
  .stages {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    margin-top: 24px;
  }
@media (max-width: 900px) {
  .stages { grid-template-columns: 1fr; }
}
.stage-card {
    background: var(--bg-2); border: 1px solid var(--line);
    border-radius: 0; padding: 32px;
    position: relative; overflow: hidden;
  }
.stage-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  }
.stage-card.gate::before { background: var(--stage-gate); }
.stage-card.spectral::before { background: var(--stage-spectral); }
.stage-card .stage-tag {
    font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
    margin-bottom: 14px;
  }
.stage-card.gate .stage-tag { color: var(--stage-gate); }
.stage-card.spectral .stage-tag { color: var(--stage-spectral); }
.stage-card h4 { font-weight: 300;
    font-size: 28px; margin: 0 0 14px 0;
    letter-spacing: -0.01em;
  }
.stage-card p {
    font-size: 15px; line-height: 1.6; color: var(--ink-1);
    margin: 0 0 20px 0; text-wrap: pretty;
  }
.stage-card ul {
    list-style: none; margin: 0; padding: 0;
  }
.stage-card li {
    display: grid; grid-template-columns: 18px 1fr;
    gap: 12px; padding: 10px 0;
    font-size: 14px; color: var(--ink-1); line-height: 1.55;
    border-top: 1px solid var(--line);
  }
.stage-card li:first-child { border-top: none; }
.stage-card li .bullet {
    color: var(--ink-3); font-size: 10.5px;
    padding-top: 2px;
  }
.stage-card.gate li .bullet { color: var(--stage-gate); }
.stage-card.spectral li .bullet { color: var(--stage-spectral); }
.stage-card li strong {
    color: var(--ink-0); font-weight: 500;
  }
/* Step list (algorithm) */
  .steps {
    margin-top: 28px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--line); border: 1px solid var(--line);
    border-radius: 0; overflow: hidden;
  }
@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; }
}
.step {
    background: var(--bg-1); padding: 28px;
  }
.step .step-num {
    font-size: 11px; letter-spacing: 1.8px;
    color: var(--accent); margin-bottom: 12px;
  }
.step h5 {
    font-size: 17px; font-weight: 500; margin: 0 0 8px 0;
    color: var(--ink-0); letter-spacing: -0.005em;
  }
.step p {
    font-size: 14px; color: var(--ink-1); line-height: 1.6;
    margin: 0; text-wrap: pretty;
  }
.controls-split {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  }
@media (max-width: 900px) {
  .controls-split { grid-template-columns: 1fr; }
}
/* Use cases */
  .use-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line);
    border-radius: 0; overflow: hidden;
  }
@media (max-width: 720px) {
  .use-grid { grid-template-columns: 1fr; }
}
.use-cell {
    background: var(--bg-1); padding: 28px;
  }
.use-cell .tag {
    font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--accent); margin-bottom: 12px;
  }
.use-cell h5 {
    font-size: 17px; font-weight: 500; margin: 0 0 8px 0;
    color: var(--ink-0);
  }
.use-cell p {
    font-size: 14px; color: var(--ink-1); line-height: 1.6;
    margin: 0; text-wrap: pretty;
  }
/* At a glance */
  .glance {
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
/* SVG diagram styles */
  .grid-line { stroke: var(--line); stroke-width: 1; }
.grid-line.minor { stroke: var(--line); stroke-opacity: 0.4; }
.axis-label {
    font-size: 10px; fill: var(--ink-2);
    letter-spacing: 0.6px;
  }
.label-strong { font-size: 12px; font-weight: 500;
    fill: var(--ink-0);
  }
.label-mono { font-size: 10.5px;
    fill: var(--ink-1); letter-spacing: 0.6px;
  }
.annotation { font-size: 10px;
    fill: var(--ink-2); letter-spacing: 1.2px; text-transform: uppercase;
  }

/* ---- pitch-corrector --------------------------------------------------- */
.hero-inner { position: relative; z-index: 1; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-shot {
    margin-top: 64px; position: relative; border-radius: 0; overflow: hidden;
    border: 1px solid var(--line); background: var(--bg-1);
    box-shadow: 0 40px 100px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(31,201,154,0.05);
    max-width: 920px; margin-left: auto; margin-right: auto;
  }
.hero-shot img { display: block; width: 100%; height: auto; }
.section-head p.lead { font-size: 17px; color: var(--ink-1); line-height: 1.6; max-width: 70ch; margin: 24px 0 0 0; grid-column: 2; }
@media (max-width: 720px) {
  .section-head p.lead { grid-column: 1; }
}
/* Spectrum dual-line: natural <-> hard tune */
  .spectrum-band { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) {
  .spectrum-band { grid-template-columns: 1fr; }
}
.sb-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; padding: 32px; position: relative; overflow: hidden; }
.sb-card .tag { font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.sb-card h3 { font-weight: 300; font-size: 26px; margin: 0 0 14px 0; letter-spacing: -0.01em; }
.sb-card p { font-size: 14.5px; line-height: 1.6; color: var(--ink-1); margin: 0; text-wrap: pretty; }
.sb-card .curve { margin-top: 22px; border-radius: 0; overflow: hidden; border: 1px solid var(--line); background: var(--bg-1); }
.sb-card .curve svg { display: block; width: 100%; height: auto; }
/* Harmony / signal-flow */
  .harmony-flow { background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; padding: 36px 32px 28px; }
.harmony-flow svg { display: block; width: 100%; height: auto; }
.flow-legend { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-2); }
.flow-legend .lk { display: inline-flex; align-items: center; gap: 8px; }
.flow-legend .d { width: 10px; height: 10px; border-radius: 0; }
.flow-note { margin-top: 22px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); max-width: 84ch; text-wrap: pretty; }
.flow-note strong { color: var(--accent); font-weight: 500; }
.voicing-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
@media (max-width: 860px) {
  .voicing-row { grid-template-columns: 1fr; }
}
.diagram-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; padding: 28px 28px 24px; }
.diagram-card .tag { font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.diagram-card h3 { font-weight: 300; font-size: 23px; margin: 0 0 10px; letter-spacing: -0.01em; }
.diagram-card p { font-size: 14px; line-height: 1.6; color: var(--ink-1); margin: 0 0 20px; text-wrap: pretty; }
.diagram-card svg { display: block; width: 100%; height: auto; }
.preset { background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; padding: 22px; }
.preset .pk { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.preset h5 { font-weight: 600; font-size: 15px; margin: 0 0 8px 0; color: var(--ink-0); }
.preset p { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 0; }
/* At a glance */
  .glance { background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---- sound-morph ------------------------------------------------------- */
/* Shape stripe — recurring motif, one swatch per anchor */
  .shape-stripe {
    display: flex; height: 3px; width: 100px; margin-bottom: 32px;
    border-radius: 0; overflow: hidden;
  }
.shape-stripe span { flex: 1; }
.shape-stripe span:nth-child(1) { background: var(--shape-neutral); }
.shape-stripe span:nth-child(2) { background: var(--shape-vowel); }
.shape-stripe span:nth-child(3) { background: var(--shape-comb); }
.shape-stripe span:nth-child(4) { background: var(--shape-peak); }
/* ===== Shape ribbon — a feature in itself; row of 5 anchor cards ===== */
  .shape-ribbon {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
    margin-bottom: 64px;
  }
@media (max-width: 820px) {
  .shape-ribbon { grid-template-columns: repeat(2, 1fr); }
}
.shape-card {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 20px;
    position: relative;
    overflow: hidden;
  }
.shape-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--swatch, var(--accent));
    box-shadow: 0 0 18px var(--swatch, var(--accent));
  }
.shape-card.n  { --swatch: var(--ink-1); }
.shape-card.va { --swatch: var(--shape-neutral); }
.shape-card.ve { --swatch: var(--shape-vowel); }
.shape-card.c  { --swatch: var(--shape-comb); }
.shape-card.p  { --swatch: var(--shape-peak); }
.shape-card .idx {
    font-size: 10px; letter-spacing: 1.6px;
    color: var(--ink-3);
    margin-bottom: 10px;
  }
.shape-card .name {
    font-weight: 500; font-size: 14.5px;
    color: var(--ink-0);
    margin-bottom: 6px; letter-spacing: 0.02em;
  }
.shape-card .desc {
    font-size: 12.5px; color: var(--ink-2);
    line-height: 1.5; margin: 0;
  }
/* ===== Feature list ===== */
  .features { display: block; }
/* ===== Engineering ===== */
  .eng-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;
  }
@media (max-width: 960px) {
  .eng-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .eng-grid { grid-template-columns: 1fr; }
}
.eng-card {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 28px;
  }
.eng-card .tag {
    font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--accent); margin-bottom: 16px;
  }
.eng-card h4 {
    font-size: 18px; font-weight: 500;
    margin: 0 0 12px 0; color: var(--ink-0);
  }
.eng-card p {
    font-size: 14.5px; line-height: 1.6;
    color: var(--ink-1); margin: 0;
    text-wrap: pretty;
  }
/* ===== At-a-glance ===== */
  .glance {
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
/* ===== Presets / recipes block (Sound Morph only) ===== */
  .recipes {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  }
@media (max-width: 720px) {
  .recipes { grid-template-columns: 1fr; }
}
.recipe {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 26px 28px;
    position: relative;
  }
.recipe .recipe-tag {
    font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--accent); margin-bottom: 10px;
  }
.recipe h4 {
    font-weight: 300; font-size: 22px;
    margin: 0 0 14px 0; letter-spacing: -0.01em;
    color: var(--ink-0);
  }
.recipe p { font-size: 14.5px; color: var(--ink-1); line-height: 1.6; margin: 0 0 14px 0; }
.recipe-knobs {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
.recipe-knob {
    font-size: 11px; letter-spacing: 0.6px;
    color: var(--ink-0);
    background: var(--bg-1);
    border: 1px solid var(--line);
    padding: 5px 9px; border-radius: 0;
  }
.recipe-knob b {
    color: var(--accent); font-weight: 500;
    margin-left: 6px;
  }