.show-control-page .product-hero__main { min-height: 830px; }
.show-control-page .product-hero__copy { padding-top: 38px; }
.show-control-page .breadcrumb { margin-bottom: 54px; }
.breadcrumb {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  transition: color 180ms ease;
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--accent);
}
.breadcrumb__sep {
  color: rgba(255, 255, 255, 0.3);
}
.breadcrumb [aria-current='page'] {
  color: var(--accent);
}
.show-control-page .product-hero h1 { max-width: none; white-space: nowrap; }
.show-control-page .product-hero__lede { line-height: 1.35; }
.show-control-page .product-hero__image { right: -4%; bottom: 40px; width: 110%; }
.show-control-page .product-hero__image img {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
}
.show-control-page .technical-specs--actions-only { margin-top: 28px; }
.show-control-page .spec-panel { justify-content: flex-start; }
.sc-location-heading { padding-top: 72px; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }

/* Full-bleed studio detail, directly below the at-a-glance specifications. */
.sc-front-back {
  position: relative;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  overflow: hidden;
  background: #070807;
}
.sc-front-back img { display: block; width: 100%; height: auto; }
.sc-front-back figcaption {
  position: absolute;
  left: 5%;
  bottom: 24px;
  color: #a3aaa6;
  font: 10px var(--font-technical);
  text-transform: uppercase;
  letter-spacing: .14em;
}
@media (max-width: 760px) {
  .sc-front-back figcaption { position: static; padding: 12px 6% 18px; font-size: 9px; }
}

/* Screen anatomy: the top view is masked down to just the display, then the
   surrounding space carries callouts pointing at each information slot — six
   across the top, three in the centre, three in the lower third, one at the
   bottom — for a clean, evenly distributed annotation of what each field is. */
/* Screen anatomy: the callout container is the whole card panel and the screen
   render sits as a centred band, so the fourteen field labels can be dragged
   anywhere in the card — above, below and beside the display. */
.sc-story--screen { align-items: center; }

.sc-story--screen .sc-story__media {
  position: relative;
  aspect-ratio: 1000 / 820;
  overflow: hidden;
  background: radial-gradient(circle at 50% 47%, #171717, #050505 72%);
}

.sc-story--screen .sc-story__media img.sc-screen__view {
  position: absolute;
  left: 16%;
  top: 24%;
  width: 68%;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

.sc-screen__leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sc-screen__leaders line { stroke: rgba(var(--accent-rgb), 0.7); stroke-width: 2; }
.sc-screen__leaders polyline { stroke: rgba(var(--accent-rgb), 0.7); stroke-width: 2; fill: none; }
.sc-screen__leaders circle { fill: var(--accent); }

.sc-screen__labels { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }

.sc-screen__label {
  position: absolute;
  left: var(--x, 0);
  top: var(--y);
  width: max-content;
  transform: translate(var(--tx, -50%), -50%);
  color: var(--accent);
  font-family: var(--font-technical);
  font-size: clamp(0.56rem, 1.05vw, 0.76rem);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.2;
  white-space: pre-line;
  text-align: center;
}
.sc-location-heading h2 { max-width: none; }
.sc-location-intro { max-width: 68ch; margin: 22px 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }

/* Machine anatomy: the front-facing device render with eight callouts — screen,
   jog wheel, performance lock and the five transport buttons. The callout
   container is the whole card panel, not the picture box — the device sits as a
   centred band with free space above, below and to each side, so callout text
   can be dragged anywhere in the card, including lower. */
.sc-story--machine { align-items: center; }

.sc-story--machine .sc-story__media {
  position: relative;
  aspect-ratio: 1000 / 900;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, #171717, #050505 72%);
}

.sc-story--machine .sc-machine__device {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88%;
  height: auto;
  transform: translate(-50%, -50%);
}

.sc-machine__leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sc-machine__leaders line { stroke: rgba(var(--accent-rgb), 0.7); stroke-width: 2; }
.sc-machine__leaders polyline { stroke: rgba(var(--accent-rgb), 0.7); stroke-width: 2; fill: none; }
.sc-machine__leaders circle { fill: var(--accent); }

.sc-machine__labels { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }

.sc-machine__label {
  position: absolute;
  left: var(--x, 0);
  top: var(--y);
  width: max-content;
  transform: translate(var(--tx, -50%), -50%);
  color: var(--accent);
  font-family: var(--font-technical);
  font-size: clamp(0.56rem, 1.05vw, 0.76rem);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.2;
  white-space: pre-line;
  text-align: center;
}

/* Rear view: the same treatment over the back-facing photo, zoomed so the
   connector panel reads large. */
.sc-story--back .sc-story__media {
  position: relative;
  aspect-ratio: 1800 / 1500;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, #171717, #050505 72%);
}

.sc-story--back .sc-machine__device {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130%;
  height: auto;
  transform: translate(-50%, -50%);
}

.sc-story {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  min-height: 620px;
  margin: 42px 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: linear-gradient(115deg, #0a0a0a, #121212);
}
.sc-story__media { display: grid; min-width: 0; place-items: center; background: #050505; }
.sc-story__media img { width: 100%; height: 100%; object-fit: cover; }
.sc-story__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(48px, 6vw, 90px); }
.sc-story__copy h2,
.sc-programmable h2 { margin: 0; font-size: clamp(2.7rem, 4.8vw, 5rem); line-height: 0.94; letter-spacing: -0.055em; }
.sc-story__copy .eyebrow { margin-bottom: 22px; }
.sc-story__copy > p:last-of-type { margin: 28px 0 0; color: var(--muted); line-height: 1.7; }
.sc-story__copy ul { margin: 30px 0 0; padding: 0; list-style: none; }
.sc-story__copy li { padding: 13px 0; border-top: 1px solid var(--border); color: rgba(255, 255, 255, 0.82); }
.sc-story__copy li::before { margin-right: 12px; color: var(--accent); content: "\2192"; }
.sc-story--software,
.sc-story--midi { grid-template-columns: minmax(360px, 0.85fr) minmax(0, 1.15fr); }

.sc-software-map,
.sc-midi-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
  padding: clamp(42px, 6vw, 90px);
  background-color: #070707;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
}
.sc-software-map span,
.sc-software-map em,
.sc-midi-flow span,
.sc-midi-flow em { padding: 20px 24px; border: 1px solid var(--border); border-radius: 12px; background: #0a0a0a; font-style: normal; font-weight: 700; }
.sc-software-map em,
.sc-midi-flow em { border-color: var(--accent); color: var(--accent); }
.sc-software-map b,
.sc-software-map strong,
.sc-midi-flow strong { color: var(--accent); font-family: var(--font-technical); }

.sc-programmable {
  margin: 42px 0;
  padding: clamp(58px, 7vw, 96px);
  border: 1px solid var(--border);
  border-radius: 24px;
  background: linear-gradient(transparent, transparent), #0b0b0b;
}
.sc-programmable__heading { display: grid; grid-template-columns: 1.1fr 0.7fr; gap: 24px 70px; align-items: end; }
.sc-programmable__heading .eyebrow { grid-column: 1 / -1; }
.sc-programmable__heading > p:last-child { margin: 0; color: var(--muted); line-height: 1.7; }
.sc-mode-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 52px; border: 1px solid var(--border); background: var(--border); }
.sc-mode-flow article { min-height: 220px; padding: 30px; background: #090909; }
.sc-mode-flow span { color: var(--accent); font-family: var(--font-technical); font-size: 0.7rem; }
.sc-mode-flow h3 { margin: 48px 0 10px; }
.sc-mode-flow p { margin: 0; color: var(--muted); line-height: 1.55; }

@media (max-width: 980px) {
  .show-control-page .product-hero h1 { font-size: clamp(4rem, 11vw, 6.5rem); }

  /* Not enough width for pointer callouts: show the masked screen, then list
     the fields as a readable two-column legend below it. */
  .sc-story--screen .sc-story__media { aspect-ratio: auto; }
  .sc-story--screen .sc-story__media img.sc-screen__view { position: relative; left: auto; top: auto; width: 100%; }
  .sc-screen__leaders { display: none; }
  .sc-screen__labels {
    position: static;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
    margin: 22px 0 0;
  }
  .sc-screen__label { position: static; left: auto; top: auto; transform: none; }
  .sc-story,
  .sc-story--software,
  .sc-story--midi { grid-template-columns: 1fr; }
  .sc-story--screen .sc-story__copy,
  .sc-story--stage .sc-story__copy { order: -1; }
  .sc-programmable__heading { grid-template-columns: 1fr; }
  .sc-programmable__heading > * { grid-column: 1; }
}

@media (max-width: 700px) {
  .show-control-page .product-hero h1 { max-width: 7ch; white-space: normal; }
  .show-control-page .product-hero__image { right: 0; bottom: 0; width: 100%; }
  .sc-location-carousel .band-use-case__visual img { height: auto; }

  /* Machine diagrams: fall back to a stacked device + two-column legend. */
  .sc-machine { aspect-ratio: auto; }
  .sc-story--machine .sc-story__media { aspect-ratio: auto; }
  .sc-machine__device { position: relative; inset: auto; width: 100%; transform: none; }
  .sc-machine__leaders { display: none; }
  .sc-machine__labels {
    position: static;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
    margin: 22px 0 0;
  }
  .sc-machine__label { position: static; left: auto; top: auto; transform: none; }
  .sc-story,
  .sc-programmable { border-radius: 16px; }
  .sc-story__copy,
  .sc-programmable { padding: 42px 24px; }
  .sc-mode-flow { grid-template-columns: 1fr; }
}