/* MAKIINA award round, design 09: live 3D.
   Loaded after site.css on the four English pages only. The room stays black, cream text, red for buying.
   New here: a display scale, the live stage (rendered poster first, real time model over it),
   its controls, figure strips, the kit list and the buy bar. */

:root {
  --fs-h1: clamp(38px, 4.4vw, 66px);
  --fs-h2: clamp(28px, 2.7vw, 42px);
  --fs-fig: clamp(26px, 2.2vw, 34px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.h1 { font-family: var(--disp); font-weight: 600; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.035em; color: var(--cream); text-wrap: balance; }
.h2 { font-family: var(--disp); font-weight: 600; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.03em; color: var(--cream); text-wrap: balance; }
.lede-l { font-weight: 300; font-size: clamp(17px, 1.25vw, 20px); line-height: 1.55; color: var(--c75); }
.red { color: var(--red); }

/* ---------- the live stage ---------- */
.live { position: relative; }
.live-stage { position: absolute; inset: 0; overflow: hidden; }
.live-poster, .live-poster img { position: absolute; inset: 0; width: 100%; height: 100%; }
.live-poster img { object-fit: contain; transition: opacity 700ms var(--ease); }
.live-poster.cover img { object-fit: cover; }
.live-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 700ms var(--ease); outline: none; }
.live.is-live .live-canvas { opacity: 1; }
.live.is-live .live-poster img { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .live-poster img, .live-canvas { transition: none; } }

/* a quiet pulse on the hint while the model loads, then the hint itself */
.live-hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 10px; white-space: nowrap; pointer-events: none;
  font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase;
  color: var(--c45); opacity: 0; transition: opacity 500ms ease-out;
}
.live-hint::before {
  content: ""; width: 22px; height: 12px; border: 1px solid var(--c45); border-radius: 8px;
  background: radial-gradient(circle at 30% 50%, var(--c75) 0 2px, transparent 2.5px);
}
.live.is-live .live-hint { opacity: 1; }
.live.is-touched .live-hint { opacity: 0; }
.live-loading .live-stage::after {
  content: ""; position: absolute; left: 50%; bottom: 22px; width: 64px; height: 1px; margin-left: -32px;
  background: linear-gradient(90deg, transparent, var(--c60), transparent); background-size: 200% 100%;
  animation: live-load 1.1s linear infinite;
}
@keyframes live-load { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* controls: hidden until the model is live, so a page without script shows none of them */
/* they keep their place from the start, so nothing moves when they appear */
.live-ctl { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; visibility: hidden; opacity: 0; transition: opacity 400ms ease-out; }
.live.is-live .live-ctl, .has-live .live-ctl { visibility: visible; opacity: 1; }
.live-ctl .lab { font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--c45); }
.chipbtn {
  font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; line-height: 1;
  color: var(--c75); background: transparent; border: 1px solid var(--hair); border-radius: 980px; padding: 10px 14px; cursor: pointer;
  transition: color 150ms ease-out, border-color 150ms ease-out, background-color 150ms ease-out; white-space: nowrap;
}
.chipbtn:hover { color: var(--cream); border-color: var(--hair-strong); }
.chipbtn[aria-pressed="true"], .chipbtn.is-on { color: var(--black); background: var(--cream); border-color: var(--cream); }
.chipbtn:focus-visible, .rng:focus-visible { outline: 1px solid var(--cream); outline-offset: 3px; }

.rng { -webkit-appearance: none; appearance: none; flex: 1 1 140px; min-width: 120px; height: 28px; background: transparent; cursor: pointer; margin: 0; touch-action: pan-y; }
.rng::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, var(--cream) 0 var(--fill, 0%), var(--hair-strong) var(--fill, 0%) 100%); }
.rng::-moz-range-track { height: 1px; background: var(--hair-strong); }
.rng::-moz-range-progress { height: 1px; background: var(--cream); }
.rng::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--cream); border: 0; box-shadow: 0 0 0 6px rgba(244,241,233,0.10); transition: box-shadow 150ms ease-out; }
.rng::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--cream); border: 0; box-shadow: 0 0 0 6px rgba(244,241,233,0.10); }
.rng:hover::-webkit-slider-thumb, .rng:active::-webkit-slider-thumb { box-shadow: 0 0 0 9px rgba(244,241,233,0.16); }

/* callouts: a plain list of facts without script, labels on the parts when the model is open */
.live-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; display: none; }
.live.is-live .live-lines { display: block; }
.live-lines path { stroke: rgba(244,241,233,0.38); stroke-width: 1; fill: none; opacity: 0; transition: opacity 300ms ease-out; vector-effect: non-scaling-stroke; }
.live-callouts { list-style: none; margin: 0; padding: 0; }
.live-callouts li b { display: block; font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--c90); line-height: 1.4; }
.live-callouts li span { display: block; font-size: 13px; line-height: 1.4; color: var(--c60); margin-top: 3px; }
.live.is-live .live-callouts li { position: absolute; z-index: 3; left: 0; top: 0; max-width: 170px; opacity: 0; pointer-events: none; transition: opacity 300ms ease-out; will-change: transform, left, top; }
.live:not(.is-live) .live-callouts.static { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 24px; }
.live:not(.is-live) .live-callouts:not(.static) { display: none; }

.live-tip {
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 120ms ease-out;
  font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: var(--cream); background: rgba(10,10,10,0.78); border: 1px solid var(--hair); border-radius: 8px; padding: 7px 10px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.live-go { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; display: none; background: rgba(10,10,10,0.6); }
.live.wants-tap .live-go { display: inline-flex; }
.live.is-live .live-go, .live.live-failed .live-go { display: none; }

/* ---------- hero with a live stage behind the copy ---------- */
.hero9 {
  position: relative; display: grid; grid-template-columns: minmax(420px, 38vw) 1fr; align-items: stretch;
  min-height: calc(100vh - var(--nav-h)); min-height: min(calc(100svh - var(--nav-h)), 940px);
  border-bottom: 1px solid var(--hair-soft); overflow: hidden;
}
.hero9-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 56px 0 72px var(--pad); pointer-events: none; }
.hero9-copy > * { pointer-events: auto; }
.hero9-copy .eyebrow { margin-bottom: 22px; }
.hero9-copy .lede-l { margin-top: 22px; max-width: 470px; }
.hero9 .live { position: relative; min-height: 420px; }
.hero9--wide .live { position: absolute; inset: 0; }
.hero9--wide .hero9-copy::before {
  content: ""; position: absolute; z-index: -1; inset: 0 -30% 0 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0) 100%);
}
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }
.cta .price { font-family: var(--disp); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; color: var(--cream); line-height: 1; }
.cta .price small { display: block; font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--c45); margin-bottom: 8px; }
.cta .btns { margin-top: 0; }
.ships { margin-top: 18px; color: var(--c45); }

/* figures: the facts a buyer scans first */
.figs { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 18px 44px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--hair); }
.fig b { display: block; font-family: var(--disp); font-weight: 600; font-size: var(--fs-fig); letter-spacing: -0.03em; line-height: 1; color: var(--cream); white-space: nowrap; }
.fig span { display: block; margin-top: 8px; font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--c45); line-height: 1.4; }

/* ---------- a section with a live stage and its panel ---------- */
.lab9 { position: relative; border-top: 1px solid var(--hair); }
.lab9-head { max-width: 1120px; margin: 0 auto; padding: 110px var(--pad) 0; }
.lab9-head .lede-l { max-width: 620px; margin-top: 18px; }
.lab9-body { position: relative; display: grid; grid-template-columns: 1fr minmax(300px, 360px); gap: 0; max-width: 1440px; margin: 0 auto; padding: 0 var(--pad) 96px; }
.lab9-body .live { min-height: min(68vh, 640px); }
.lab9-panel { align-self: center; padding: 24px 0 24px 40px; border-left: 1px solid var(--hair-soft); }
.lab9--full .lab9-body { grid-template-columns: 1fr; }
.lab9--full .live { min-height: min(70vh, 660px); }
.lab9-bar { max-width: 760px; margin: 0 auto; padding: 0 var(--pad) 0; }
.lab9-bar .live-ctl { justify-content: center; }

.jrow { display: grid; grid-template-columns: 96px 1fr 44px; align-items: center; gap: 12px; padding: 5px 0; }
.jrow label { font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c60); white-space: nowrap; }
.jrow output { font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.04em; color: var(--c45); text-align: right; }
.jrow .rng { min-width: 0; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.panel-k { font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--c45); margin: 0 0 12px; }

/* ---------- film: the real robot at work ---------- */
.film { position: relative; max-width: 1440px; margin: 0 auto; }
.film video, .film img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #050505; }
.film-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 16px var(--pad) 0; color: var(--c45); }

/* ---------- the kit: what is in the box ---------- */
.kit { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.kit > div { padding: 22px 22px 24px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.kit b { display: block; font-weight: 400; color: var(--c90); }
.kit span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--c60); }
.kit i { display: block; font-style: normal; font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--track); color: var(--c45); margin-bottom: 14px; }

/* buy cards: the dual arm card leads */
.card.lead { border-color: var(--hair-strong); background: rgba(244,241,233,0.06); }
/* buy cards: the product name is the card's title, in the display face between the label and the price sizes */
.card .card-title { margin: 0; font-family: var(--disp); font-weight: 600; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; color: var(--cream); }
.card .card-title + .display { margin-top: 10px; }
@media (max-width: 760px) { .card .card-title { font-size: 22px; } }
/* buy cards: the product picture runs edge to edge across the top of its card */
.card .card-img { display: block; margin: -36px -32px 28px; overflow: hidden; border-radius: 15px 15px 0 0; }
.card .card-img, .card .card-img img { aspect-ratio: 3 / 2; }
.card img.card-img, .card .card-img img { display: block; width: calc(100% + 64px); max-width: none; height: auto; object-fit: cover; }
.card picture.card-img img { width: 100%; }
@media (max-width: 760px) {
  .card .card-img { margin: -28px -22px 24px; }
  .card img.card-img { width: calc(100% + 44px); }
}
.card .per { font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--c45); margin: -14px 0 22px; }

/* ---------- buy bar: price and BUY always within reach ---------- */
.buybar {
  position: fixed; z-index: 45; right: 22px; bottom: 20px; transform: translateY(160%);
  display: flex; align-items: center; gap: 18px; padding: 8px 8px 8px 22px;
  background: rgba(14,14,14,0.78); border: 1px solid var(--hair); border-radius: 980px;
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  transition: transform 380ms var(--ease); white-space: nowrap;
}
.buybar.is-on { transform: none; }
.buybar .n { font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--c60); }
.buybar .p { font-family: var(--disp); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: var(--cream); }
@media (prefers-reduced-motion: reduce) { .buybar { transition: none; } }

/* small things */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.sec-head { max-width: 1120px; margin: 0 auto; }
.stat-inline { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 26px; }
.pill { font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c75); border: 1px solid var(--hair); border-radius: 980px; padding: 8px 12px; line-height: 1; white-space: nowrap; }

@media (max-width: 1100px) {
  .hero9 { grid-template-columns: minmax(340px, 46vw) 1fr; }
  .figs { gap: 16px 30px; }
  .lab9-body { grid-template-columns: 1fr minmax(260px, 320px); }
  .lab9-panel { padding-left: 28px; }
}

@media (max-width: 760px) {
  :root { --fs-h1: clamp(34px, 9.6vw, 44px); --fs-h2: clamp(26px, 7.4vw, 34px); }
  .hero9, .hero9--wide { display: block; min-height: 0; }
  .hero9 .live, .hero9--wide .live { position: relative; inset: auto; height: min(52svh, 108vw); min-height: 300px; }
  .hero9--wide .hero9-copy::before { display: none; }
  .hero9-copy { padding: 8px var(--pad) 48px; }
  .hero9-copy .eyebrow { margin-bottom: 14px; }
  .hero9-copy .lede-l { margin-top: 16px; }
  .cta { margin-top: 24px; }
  .cta .btns { width: 100%; }
  .cta .btns .btn { flex: 1 1 0; }
  .figs { grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-top: 30px; padding-top: 22px; }
  .lab9-head { padding-top: 72px; }
  .lab9-body { display: block; padding: 0 0 64px; }
  .lab9-body .live, .lab9--full .live { height: min(62svh, 120vw); min-height: 340px; }
  .lab9-panel { border-left: 0; padding: 8px var(--pad) 0; }
  .jrow { grid-template-columns: 84px 1fr 40px; padding: 3px 0; }
  .two { grid-template-columns: 1fr; gap: 32px; }
  .buybar { left: 12px; right: 12px; bottom: 12px; transform: translateY(160%); justify-content: space-between; }
  .buybar.is-on { transform: none; }
  .live.is-live .live-callouts li { max-width: 118px; }
  .live-callouts li span { font-size: 12px; }
  .kit { grid-template-columns: 1fr 1fr; }
  .kit > div { padding: 16px 14px 18px; }
  .live-hint { bottom: 10px; }
}

/* ---------- home: second fold, at a glance band, controls over the stage ---------- */
.hero9--rev { grid-template-columns: 1fr minmax(420px, 38vw); }
.hero9--rev .hero9-copy { padding: 56px var(--pad) 72px 0; }
.band9 { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--hair-soft); }
.band9 > div { padding: 30px var(--pad) 32px; border-left: 1px solid var(--hair-soft); }
.band9 > div:first-child { border-left: 0; }
.band9 b { display: block; font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--c90); }
.band9 span { display: block; margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--c60); max-width: 250px; }
.live-ctl--over { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); width: min(440px, 80%); z-index: 3; flex-wrap: nowrap; }
@media (max-width: 1100px) {
  .hero9--rev { grid-template-columns: 1fr minmax(340px, 46vw); }
  .band9 > div { padding: 24px var(--pad) 26px; }
}
@media (max-width: 760px) {
  .hero9--rev .hero9-copy { padding: 8px var(--pad) 48px; }
  .band9 { grid-template-columns: 1fr 1fr; }
  .band9 > div { padding: 20px var(--pad) 22px; }
  .band9 > div:nth-child(odd) { border-left: 0; }
  .band9 > div:nth-child(n+3) { border-top: 1px solid var(--hair-soft); }
  .live-ctl--over { bottom: 34px; width: 86%; }
}

/* ---------- dual arm page ---------- */
.sec9 { padding: 110px 0 96px; border-top: 1px solid var(--hair); }
.sec9 .sec-head { padding: 0 var(--pad) 44px; }
.lab9-head.two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; }
.lab9-head.two .lede-l { max-width: 520px; }
/* the panel is dim until the model is live; without script it is not shown at all (noscript style) */
.lab9-panel { opacity: 0.35; pointer-events: none; transition: opacity 400ms ease-out; }
.has-live .lab9-panel { opacity: 1; pointer-events: auto; }
.reach9 { position: absolute; left: 0; right: 0; top: 26px; z-index: 3; text-align: center; pointer-events: none; opacity: 0; transition: opacity 400ms ease-out; }
.reach9 span { font-family: var(--mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.22em; color: var(--c90); }
.reach9 svg { position: absolute; inset: 0; }
.live[data-posed="reach"] .reach9 { opacity: 1; }
.live-dim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 400ms ease-out; }
.live[data-posed="reach"] .live-dim.on { opacity: 1; }
.live-dim path { stroke: rgba(244,241,233,0.8); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.live-dim text { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.22em; fill: rgba(244,241,233,0.92); }
@media (max-width: 760px) {
  .sec9 { padding: 72px 0 64px; }
  .sec9 .sec-head { padding-bottom: 28px; }
  .lab9-head.two { grid-template-columns: 1fr; gap: 28px; }
  .film video { aspect-ratio: 16 / 10; }
}

/* posters rendered with the same camera as the live view: same width, centred, so the swap does not move */
.live-poster.fitw img { inset: auto; left: 0; top: 50%; width: 100%; height: auto; transform: translateY(-50%); object-fit: fill; }
@media (max-width: 760px) {
  /* phone: picture first, then the name, then price and BUY before the long copy */
  .hero9, .hero9--wide { display: flex; flex-direction: column; }
  .hero9 .live { order: -1; height: min(40svh, 96vw); min-height: 270px; }
  .hero9-copy .cta { order: 2; }
  .hero9-copy .ships { order: 2; }
  .hero9-copy .lede-l { order: 3; margin-top: 26px; }
  .hero9-copy .figs { order: 4; }
}

/* ---------- actuator page ---------- */
.figs-4 { grid-template-columns: repeat(4, auto); gap: 18px 30px; }
.turns { text-align: center; margin-top: 22px; padding-bottom: 96px; color: var(--c60); min-height: 1.4em; white-space: pre-wrap; font-variant-numeric: tabular-nums; }
@media (max-width: 1300px) { .figs-4 { grid-template-columns: repeat(2, auto); gap: 20px 44px; } }
@media (max-width: 760px) { .turns { padding-bottom: 64px; } .figs-4 { gap: 20px 24px; } }

/* the stage melts into the room at its foot and sides instead of ending on an edge */
.live-stage {
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 99%), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 80%, transparent 99%), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect;
}
@media (max-width: 760px) {
  .live-callouts li b { font-size: 10px; letter-spacing: 0.14em; }
  .live.is-live .live-callouts li { max-width: 104px; }
  .live-callouts li span { font-size: 11px; line-height: 1.35; margin-top: 2px; }
  .lab9--full .live { height: min(70svh, 150vw); }
}
.live-poster.fith img { inset: auto; top: 0; left: 50%; height: 100%; width: auto; max-width: none; transform: translateX(-50%); object-fit: fill; }

/* ---------- about: what leaves the factory ---------- */
.about-h1 { max-width: 760px; font-weight: 500; }
.place-copy .eyebrow { color: var(--c60); }
.made { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 12px; }
.made-card { display: flex; flex-direction: column; border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; background: var(--lift); transition: border-color 200ms ease-out; }
.made-card:hover { border-color: var(--hair-strong); }
.made-card picture { display: block; aspect-ratio: 16 / 10; background: #000; overflow: hidden; }
.made-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; transition: transform 600ms var(--ease); }
.made-card:hover img { transform: scale(1.03); }
.made-copy { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.made-copy .label { color: var(--c45); margin-bottom: 12px; }
.made-copy .statement { font-size: 17px; line-height: 1.55; color: var(--c75); flex: 1; }
.made-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.made-foot .display { font-size: 24px; }
@media (max-width: 760px) { .made { grid-template-columns: 1fr; } .made-copy { padding: 20px 20px 22px; } }
@media (prefers-reduced-motion: reduce) { .made-card img { transition: none; } }
@media (max-width: 760px) { #lab .lab9-body .live { height: min(46svh, 96vw); min-height: 300px; } }

/* a poster rendered for a wide stage, shown in a tall one: the live camera then fits the unit by width */
.live-stage { container-type: size; }
@container (max-aspect-ratio: 20/21) {
  .live-poster.fith img { top: 50%; left: 50%; width: 125%; height: auto; transform: translate(-50%, -50%); }
}
/* no WebGL, or the context was lost: the poster stays, the controls that need the model go */
.live.live-failed + .lab9-panel { display: none; }
.live-canvas:focus-visible { outline: 1px solid var(--hair-strong); outline-offset: -6px; }
/* the reach figure names itself until the live dimension takes over */
.reach-cap { position: absolute; left: 0; right: 0; top: 22px; text-align: center; letter-spacing: 0.22em; color: var(--c90); z-index: 2; pointer-events: none; }
.live.is-live .reach-cap { display: none; }

/* ==================== ROUND 2 ==================== */

/* ---------- type: nothing a buyer reads is under 12 px, table values and body text are 16 px ---------- */
:root { --fs-label: 12px; --fs-chrome: 13px; --fs-body: 16px; --fs-lede: 18px; --sec: 104px; }
.nav-a, .nav-lang > summary { font-size: 12px; }
.row .v, .bul > div, .feat > div { font-size: 16px; line-height: 1.5; }
.row { grid-template-columns: 240px 1fr; padding: 16px 0; }
.note { font-size: 13px; line-height: 1.55; }
.foot-biz { font-size: 13px; }
.live-callouts li b { font-size: 12px; }
.live-callouts li span { font-size: 14px; color: var(--c75); }
.live.is-live .live-callouts li { max-width: 190px; }
.jrow label, .jrow output, .live-ctl .lab, .chipbtn, .live-hint, .live-tip, .panel-k, .fig span, .band9 b, .buybar .n { font-size: 12px; }
.band9 span { font-size: 15px; }
.cta .price small { font-size: 12px; }
.chip { font-size: 12px; }
.legend { font-size: 12px; }

/* ---------- stages that fill their section ---------- */
.lab9--wide .lab9-head { padding-top: 88px; }
.lab9-head.two { align-items: end; gap: 56px; }
.lab9-head.two > p.lede-l { margin-top: 0; }
.lab9--wide .lab9-body { display: block; padding: 28px var(--pad) 0; }
#lab .lab9-body .live { aspect-ratio: 2.5; min-height: 0; height: auto; max-height: none; }
#actuation .lab9-body .live, #inside .lab9-body .live { height: clamp(420px, 60vh, 580px); min-height: 0; }
.lab9-deck { max-width: 1120px; margin: 0 auto; padding: 22px var(--pad) 80px; }
.lab9-deck.lab9-panel { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 28px 64px; align-items: start; border-left: 0; }
.lab9-deck .presets { margin-bottom: 16px; }
.jgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 48px; }
.jrow { grid-template-columns: 104px 1fr 48px; }
.lab9-deck--bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding-top: 18px; }
.lab9-deck--bar .live-ctl { flex: 1 1 420px; max-width: 640px; flex-wrap: nowrap; }
.turns { padding-bottom: 0; margin: 0; text-align: left; font-size: 12px; }

/* ---------- copy beside a picture: teleoperation, end effector, SDK ---------- */
.duo9-sec { border-top: 1px solid var(--hair); }
.duo9 { display: grid; grid-template-columns: minmax(380px, 5fr) 7fr; gap: 72px; align-items: center; max-width: 1344px; margin: 0 auto; padding: 96px var(--pad); }
.duo9--rev { grid-template-columns: 7fr minmax(380px, 5fr); }
.duo9-copy .lede-l { margin-top: 18px; max-width: 520px; }
.feat-1 { grid-template-columns: 1fr; margin-top: 32px; max-width: 520px; }
.duo9-media img { width: 100%; }
.duo9-media--wide { margin-left: calc(-1 * var(--pad)); }
.melt-head9 { --my: linear-gradient(to bottom, #000 82%, transparent); --mx: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.melt-grip9 { --mx: linear-gradient(to right, #000 82%, transparent); --my: linear-gradient(to bottom, transparent, #000 8%, #000 88%, transparent); }
.duo9-media--sdk .sdk-stage { margin: 0 auto; }
.band9h { display: grid; grid-template-columns: minmax(300px, 1fr) 2fr; gap: 28px 64px; align-items: center; max-width: 1344px; margin: 0 auto; padding: 36px var(--pad) 40px; border-top: 1px solid var(--hair-soft); }
.band9h .eyebrow { margin-bottom: 10px; }
.band9h .lede { font-size: 16px; }
.band9h .chips { margin-top: 0; justify-content: flex-end; }

/* ---------- specifications ---------- */
.specs9 { display: grid; grid-template-columns: minmax(320px, 4fr) 8fr; gap: 72px; max-width: 1344px; margin: 0 auto; padding: 96px var(--pad); align-items: start; }
.specs9-head { position: sticky; top: calc(var(--nav-h) + 40px); }
.figs-2 { grid-template-columns: 1fr 1fr; gap: 26px 32px; }
.specs9 .row .k { color: var(--c60); }

@media (max-width: 1100px) {
  .duo9, .duo9--rev, .specs9 { gap: 44px; }
  .lab9-deck.lab9-panel { grid-template-columns: 1fr; }
  .band9h { grid-template-columns: 1fr; }
  .band9h .chips { justify-content: flex-start; }
}
@media (max-width: 760px) {
  :root { --sec: 72px; }
  .lab9--wide .lab9-head { padding-top: 64px; }
  .lab9-head.two { gap: 18px; }
  .lab9--wide .lab9-body { padding: 16px 0 0; }
  #lab .lab9-body .live { aspect-ratio: 1.3; }
  #actuation .lab9-body .live, #inside .lab9-body .live { height: min(70svh, 150vw); }
  .lab9-deck { padding: 16px var(--pad) 56px; }
  .jgrid { grid-template-columns: 1fr; }
  .jrow { grid-template-columns: 100px 1fr 44px; padding: 4px 0; }
  .lab9-deck--bar .live-ctl { flex-wrap: wrap; }
  .duo9, .duo9--rev, .specs9 { grid-template-columns: 1fr; gap: 28px; padding: 64px var(--pad); }
  .duo9--rev .duo9-media { order: -1; }
  .duo9 .duo9-media { order: -1; }
  .duo9-media--wide { margin-left: 0; }
  .duo9-media--sdk { margin: 0 -12px; }
  .specs9-head { position: static; }
  .row, .specsec .row { grid-template-columns: 1fr; gap: 4px; }
  .live-callouts li b { font-size: 12px; letter-spacing: 0.1em; }
  .live-callouts li span { font-size: 12px; }
  .live.is-live .live-callouts li { max-width: 112px; }
  .band9h { padding: 28px var(--pad) 32px; }
}

/* ==================== ROUND 3 ==================== */

/* tablets: the specs table under its heading, full width, as on the current site (side by side there was no room for the values) */
@media (min-width: 761px) and (max-width: 900px) {
  .specs9 { grid-template-columns: 1fr; }
  .specs9-head { position: static; }
}

/* ==================== ROUND 4 (release) ==================== */

/* ---------- actuator hero: the NOIR film behind the copy; it plays once and ends on its still ---------- */
.hero9--film .film9 { position: absolute; inset: 0; overflow: hidden; background: #000; }
.film9 img, .film9 video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%; }
.film9 video { display: none; }
.film9.is-film video { display: block; z-index: 1; background: #000; transition: opacity 450ms ease-out; }
.film9.is-lit video { opacity: 0; }
@media (max-width: 760px) {
  .hero9--film .film9 { position: relative; inset: auto; order: -1; height: min(40svh, 96vw); min-height: 270px; }
  .film9 img, .film9 video { object-position: 50% 40%; }
  /* the phone film's last frame sits 6 of its 720 px left of the phone still: moved onto the still, so the
     cross fade at its end does not shift the unit (the edges of both are black) */
  .film9 video { transform: translateX(0.8333%); }
}

/* ---------- size: two true scale views with dimension lines drawn on the pictures ---------- */
.dims9 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1216px; margin: 0 auto; padding: 56px var(--pad) 24px; }
.dim9 { position: relative; margin: 0; }
.dim9 img { display: block; width: 100%; height: auto; }
.dim9-ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dim9-ov path { vector-effect: non-scaling-stroke; fill: none; stroke: rgba(244,241,233,0.7); stroke-width: 1; }
.dim9-ov .dim9-l { stroke: var(--cream); }
.dim9-ov .dim9-w { stroke: rgba(244,241,233,0.4); stroke-dasharray: 2 3; }
.dim9-tag {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap; padding: 2px 6px; background: #000;
  font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.35; color: var(--cream);
}
.dim9-tag--v { transform: translate(-50%, -50%) rotate(-90deg); }
.dim9 img[src*="side-1200"] { clip-path: inset(0 0 3% 0); }
.dim9 figcaption { position: absolute; left: 0; right: 0; bottom: 3%; text-align: center; color: var(--c45); }
@media (prefers-reduced-motion: no-preference) {
  .dim9.dim9-anim .dim9-l { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--ease); transition-delay: calc(var(--i, 0) * 110ms + 150ms); }
  .dim9.dim9-anim .dim9-f { opacity: 0; transition: opacity 500ms ease-out; transition-delay: calc(var(--i, 0) * 110ms + 450ms); }
  .dim9.dim9-anim.is-in .dim9-l { stroke-dashoffset: 0; }
  .dim9.dim9-anim.is-in .dim9-f { opacity: 1; }
}
@media (max-width: 760px) {
  .dims9 { grid-template-columns: 1fr; gap: 8px; padding: 32px 0 8px; }
}

/* without script the exploded stages show the exploded render of the joint, inside the stage */
.live .live-noscript { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; background: #000; }
/* the reach bracket and its label are placed by the live view; before that (poster, reduced motion, no script) they stay hidden */
.live:not(.is-live) .live-dim { visibility: hidden; }