/* MAKIINA award round, design 08 "noir": light reveals the machine.
   A black room and one moving light. This sheet sits on top of site.css and is loaded only by the
   four English pages in scope (home, dual arm system, actuator, about). Every class starts with nz-. */

:root {
  --bar-h: 58px;
  --nz-h1: clamp(40px, 5.1vw, 92px);
  --nz-h2: clamp(30px, 3.6vw, 60px);
  --nz-num: clamp(38px, 4.6vw, 76px);
  --nz-body: clamp(17px, 1.05vw + 6px, 20px);
  --nz-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --nz-glow: 0 0 10px 1px rgba(244,241,233,0.42), 0 0 46px 6px rgba(244,241,233,0.14);
}

body.nz { padding-bottom: var(--bar-h); }
/* the cookie bar from ga.js sits above the buy bar */
body.nz .consent { bottom: calc(var(--bar-h) + 14px); }

/* ---------- type ---------- */
.nz-h1, .nz-h2 { font-family: var(--disp); font-weight: 600; color: var(--cream); text-wrap: balance; margin: 0; }
.nz-h1 { font-size: var(--nz-h1); line-height: 0.98; letter-spacing: -0.04em; }
.nz-h2 { font-size: var(--nz-h2); line-height: 1.03; letter-spacing: -0.035em; }
.nz-sub { font-weight: 300; font-size: var(--nz-body); line-height: 1.5; color: var(--c75); max-width: 36ch; margin-top: 22px; text-wrap: pretty; }
.nz-copy { font-weight: 300; font-size: var(--nz-body); line-height: 1.55; color: var(--c75); max-width: 46ch; text-wrap: pretty; }
.nz-eyebrow { color: var(--c60); margin-bottom: 20px; }
.nz-price { font-family: var(--disp); font-weight: 600; letter-spacing: -0.02em; color: var(--cream); }
body.nz .price-line { font-size: 12px; color: var(--c75); }
body.nz .btn { min-height: 46px; }
body.nz .btn-sm { min-height: 38px; }
body.nz .btn-red { box-shadow: 0 0 0 0 rgba(230,51,42,0); transition: background-color 150ms ease-out, border-color 150ms ease-out, box-shadow 300ms ease-out; }
body.nz .btn-red:hover { box-shadow: 0 0 34px 0 rgba(230,51,42,0.45); }
body.nz a:focus-visible, body.nz .btn:focus-visible { outline: 1px solid var(--cream); outline-offset: 4px; }

/* light crossing the type: dim letters are lit from the left as the block enters the view.
   Scroll driven, no script. Without support the type is simply lit. */
.nz-lit { color: var(--cream); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .nz-lit {
      background-image: linear-gradient(100deg, var(--cream) 0%, var(--cream) 44%, rgba(244,241,233,0.26) 56%, rgba(244,241,233,0.26) 100%);
      background-size: 320% 100%; background-repeat: no-repeat; background-position: 100% 0;
      -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
      animation: nz-lit linear both; animation-timeline: view(); animation-range: entry 5% cover 27%;
    }
  }
}
@keyframes nz-lit { to { background-position: 0% 0; } }

/* ---------- the line of light: the hero's light bar, reused as the rule between sections ---------- */
.nz-line {
  display: block; height: 1px; width: 100%; border: 0; margin: 0;
  background: linear-gradient(90deg, rgba(244,241,233,0) 0%, rgba(244,241,233,0.92) 14%, rgba(244,241,233,0.92) 86%, rgba(244,241,233,0) 100%);
  box-shadow: var(--nz-glow); transform-origin: 0 50%;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .nz-line { animation: nz-draw linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  }
}
@keyframes nz-draw { from { transform: scaleX(0); opacity: 0.2; } to { transform: scaleX(1); opacity: 1; } }

/* ---------- stage: a render that starts dark and is revealed by its film ---------- */
.nz-stage { position: relative; overflow: hidden; background: #000; }
.nz-stage .nz-still, .nz-stage .nz-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--nz-pos, 50% 50%); }
/* renders framed for the hero keep their subject at 63 percent of the width: in a column the crop follows it */
.nz-stage--off { --nz-pos: 76% 50%; }
.nz-stage .nz-film { display: none; }
/* with script and motion allowed the film lies over the still and is black until it plays. The still is in
   place from the first paint (it is the largest paint of the page); when the film ends it fades away and the
   sharper still remains. No film (blocked autoplay, a slow line): the black cover simply lifts. */
.nz-motion .nz-stage[data-film] .nz-film { display: block; z-index: 1; background: #000; transition: opacity 450ms ease-out; }
.nz-motion .nz-stage[data-film].is-lit .nz-film { opacity: 0; }
.nz-motion .nz-stage[data-film].is-fallback .nz-film { opacity: 0; transition: opacity 1500ms var(--nz-ease); }
/* the phone actuator film sits 6 of its 720 px left of its still (measured on the last frame): moved onto the
   still, so the unit does not shift when the film hands over. Same query as the script's choice of the phone film. */
@media (max-width: 900px), (max-aspect-ratio: 5/4) { .nz-motion .nz-stage[data-film="view"] .nz-film { transform: translateX(0.8333%); } }
/* films below the fold wait on their own first frame (the poster), so the start is seamless; a film that cannot
   play lifts after 2.6 s and the finished still remains */

/* ---------- hero ---------- */
.nz-hero {
  position: relative; display: flex; align-items: center; overflow: clip;
  margin-top: calc(-1 * var(--nav-h));
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--nav-h) + 32px) var(--pad) calc(var(--bar-h) + 40px);
}
.nz-hero > .nz-stage { position: absolute; inset: var(--nav-h) 0 0 0; }
.nz-hero > .nz-stage { --nz-pos: 63% 50%; }
.nz-hero-copy { position: relative; z-index: 2; width: min(34vw, 560px); }
.nz-hero-copy .nz-h1 { max-width: 6.2em; }
.nz-hero-copy .price-line { margin-top: 30px; }
.nz-hero-copy .btns { margin-top: 18px; }
/* a soft fall off behind the copy, so the type never fights the light bar */
.nz-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.28) 26%, rgba(0,0,0,0) 44%);
}
.nz-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0), #000);
}

/* ---------- facts: the numbers a buyer looks for, large ---------- */
.nz-facts { position: relative; padding: 0 var(--pad); }
.nz-facts-grid { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); }
.nz-fact { padding: 54px 28px 58px 0; }
.nz-fact + .nz-fact { padding-left: 28px; border-left: 1px solid var(--hair); }
.nz-fact .nz-num { font-family: var(--disp); font-weight: 600; font-size: var(--nz-num); line-height: 1; letter-spacing: -0.04em; color: var(--cream); white-space: nowrap; }
.nz-fact .nz-num small { font-size: 0.42em; letter-spacing: -0.01em; font-weight: 500; margin-left: 0.18em; color: var(--c75); }
.nz-fact .label { color: var(--c60); margin-top: 14px; max-width: 22ch; }

/* ---------- fold: one render, one statement ---------- */
.nz-fold { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; min-height: min(100svh, 900px); }
.nz-fold--rev { grid-template-columns: 1fr 1.25fr; }
.nz-fold--rev .nz-fold-media { order: 2; }
.nz-fold-media { position: relative; align-self: stretch; min-height: 420px; }
.nz-fold-media > .nz-stage { position: absolute; inset: 0; }
.nz-fold-copy { position: relative; z-index: 2; padding: 72px var(--pad); }
.nz-fold-copy .nz-h2 { max-width: 12em; }
.nz-fold-copy .nz-copy { margin-top: 22px; }
.nz-pair { display: flex; gap: 40px; margin-top: 34px; }
.nz-pair .nz-num { font-family: var(--disp); font-weight: 600; font-size: clamp(30px, 2.6vw, 44px); letter-spacing: -0.035em; line-height: 1; }
.nz-pair .label { color: var(--c60); margin-top: 8px; }
.nz-fold-copy .price-line { margin-top: 34px; }
.nz-fold-copy .price-line .nz-price { font-size: 22px; letter-spacing: -0.02em; text-transform: none; font-family: var(--disp); }

/* ---------- the permanent buy bar ---------- */
.nz-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; height: var(--bar-h);
  display: flex; align-items: center; gap: 18px; padding: 0 var(--pad);
  background: rgba(6,6,6,0.72); border-top: 1px solid var(--hair);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  transition: transform 320ms var(--nz-ease);
}
.nz-bar::before { /* the light line rides on the bar's top edge */
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, rgba(244,241,233,0) 0%, rgba(244,241,233,0.55) 30%, rgba(244,241,233,0.55) 70%, rgba(244,241,233,0) 100%);
}
.nz-bar.is-off { transform: translateY(110%); }
html.bag-lock .nz-bar { transform: translateY(110%); }
.nz-bar-name { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); white-space: nowrap; }
.nz-bar-meta { font-size: 13px; color: var(--c60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nz-bar-gap { flex: 1; min-width: 0; }
.nz-bar-item { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.nz-bar-item + .nz-bar-item { padding-left: 18px; border-left: 1px solid var(--hair); }
.nz-bar-k { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c60); }
.nz-bar-price { font-family: var(--disp); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; color: var(--cream); }
.nz-bar .btn { padding: 10px 22px; min-height: 36px; }

/* ---------- company band on the home page ---------- */
body.nz .place-copy .statement { font-size: clamp(22px, 1.9vw, 32px); line-height: 1.3; letter-spacing: -0.015em; color: var(--cream); max-width: 22em; }

/* ---------- scrub: a pinned stage, the scroll moves the light ---------- */
.nz-scrub { position: relative; }
.nz-pin { position: relative; }
.nz-pin .nz-canvas { display: none; }
.nz-pin .nz-poster { display: block; width: 100%; height: auto; }
.nz-steps { position: relative; z-index: 2; display: grid; gap: 40px; padding: 48px var(--pad) 72px; max-width: 1120px; margin: 0 auto; }
.nz-step .nz-h2 { max-width: 12em; }
.nz-step .nz-copy { margin-top: 16px; }
/* with script and motion: the section gets length, the stage sticks, the canvas shows the light */
.nz-motion .nz-scrub.is-live { height: var(--nz-len, 300vh); }
.nz-motion .nz-scrub.is-live .nz-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.nz-motion .nz-scrub.is-live .nz-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--nz-pos, 50% 50%); }
.nz-motion .nz-scrub.is-live .nz-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--nz-pos, 50% 50%); opacity: 0; }
.nz-motion .nz-scrub.is-live .nz-steps { position: absolute; inset: 0; max-width: none; padding: 0; display: block; pointer-events: none; }
.nz-motion .nz-scrub.is-live .nz-step {
  position: absolute; left: var(--pad); bottom: calc(var(--bar-h) + 56px); max-width: min(520px, 42vw);
  opacity: 0; transform: translateY(14px); transition: opacity 380ms ease-out, transform 480ms var(--nz-ease); pointer-events: none;
}
.nz-motion .nz-scrub.is-live .nz-step.on { opacity: 1; transform: none; pointer-events: auto; }
.nz-motion .nz-scrub.is-live .nz-step--r { left: auto; right: var(--pad); }
.nz-motion .nz-scrub.is-live .nz-step--top { bottom: auto; top: calc(var(--nav-h) + 56px); }
.nz-prog { display: none; }
.nz-motion .nz-scrub.is-live .nz-prog {
  display: block; position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--bar-h) + 22px); height: 1px; background: var(--hair); z-index: 3;
}
.nz-motion .nz-scrub.is-live .nz-prog i { display: block; height: 1px; width: 100%; background: var(--cream); box-shadow: var(--nz-glow); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nz-hero-copy { width: min(38vw, 440px); }
  .nz-fact { padding-right: 18px; }
  .nz-fact + .nz-fact { padding-left: 18px; }
}

/* stacked layout: phones, and any window too narrow or too square for copy beside the render */
@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  .nz-hero { display: block; min-height: 0; padding: var(--nav-h) 0 0; }
  .nz-hero > .nz-stage { position: relative; inset: auto; aspect-ratio: 1 / 1; max-height: 74svh; margin: 0 auto; }
  .nz-hero > .nz-stage, .nz-stage--off { --nz-pos: 50% 50%; }
  .nz-hero::before { display: none; }
  .nz-hero::after { display: none; }
  .nz-hero-copy { width: auto; padding: 0 var(--pad) 48px; margin-top: -34px; }
  .nz-hero-copy .nz-h1 { max-width: none; }
  .nz-facts-grid { grid-template-columns: 1fr 1fr; }
  .nz-fact { padding: 30px 14px 30px 0; border-top: 1px solid var(--hair); }
  .nz-fact + .nz-fact { padding-left: 0; border-left: 0; }
  .nz-fact:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--hair); }
  .nz-fact:nth-child(-n+2) { border-top: 0; }
  .nz-fold, .nz-fold--rev { grid-template-columns: 1fr; min-height: 0; }
  .nz-fold--rev .nz-fold-media { order: 0; }
  /* not stretched to the row: Safari lets a stretch win over aspect-ratio, and the row has no height of its own
     (the stage inside is absolutely placed), so on iPhone the media collapsed to nothing */
  .nz-fold-media { min-height: 0; aspect-ratio: 1 / 1; max-height: 70svh; align-self: start; }
  .nz-fold-copy { padding: 8px var(--pad) 72px; }
  .nz-motion .nz-scrub.is-live .nz-step { left: var(--pad); right: var(--pad); max-width: none; bottom: calc(var(--bar-h) + 44px); }
  .nz-motion .nz-scrub.is-live .nz-step--top { top: auto; bottom: calc(var(--bar-h) + 44px); }
}

@media (max-width: 760px) {
  :root { --bar-h: 56px; --nz-h1: clamp(38px, 10.6vw, 52px); --nz-h2: clamp(30px, 8.2vw, 40px); --nz-num: clamp(34px, 10vw, 46px); --nz-body: 17px; }
  .nz-bar { gap: 12px; }
  .nz-bar-meta { display: none; }
  .nz-bar-item--2nd { display: none; }
  .nz-bar-name { font-size: 11px; letter-spacing: 0.14em; }
  .nz-bar .btn { padding: 10px 20px; }
  .nz-pair { gap: 28px; }
  .nz-hero-copy .btns .btn { flex: 1 1 0; }
}

/* ======================= dual arm page ======================= */
.nz-hero--product .nz-h1 { font-size: clamp(36px, 3.9vw, 68px); letter-spacing: -0.035em; line-height: 1.0; max-width: 11em; }
.nz-ship { margin-top: 18px; color: var(--c60); font-size: 13px; }
.nz-facts-note { margin: 0; padding: 14px 0 34px; border-top: 1px solid var(--hair); }

/* proof: real footage in a dark frame, under the statement of origin */
.nz-real { padding: 110px var(--pad) 120px; }
.nz-real-head { max-width: 1120px; margin: 0 auto 54px; }
.nz-real-head .nz-h2 { max-width: 14em; }
.nz-screen { position: relative; max-width: 1120px; margin: 0 auto; }
.nz-screen video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #050505; border-radius: 6px; box-shadow: 0 0 0 1px var(--hair), 0 40px 120px -40px rgba(244,241,233,0.16); }
.nz-screen figcaption { margin-top: 16px; color: var(--c60); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .nz-screen video { animation: nz-wake linear both; animation-timeline: view(); animation-range: entry 5% cover 32%; }
  }
}
@keyframes nz-wake { from { filter: brightness(0.25); } to { filter: none; } }

/* wide sections: a 16:9 stage edge to edge, copy in two columns */
.nz-wide { position: relative; }
.nz-stage--wide { aspect-ratio: 16 / 9; max-height: 100svh; width: 100%; }
.nz-two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 72px; max-width: 1216px; margin: 0 auto; padding: 64px var(--pad) 120px; align-items: start; }
.nz-two--top { padding: 110px var(--pad) 56px; align-items: end; }
.nz-two .nz-copy { margin-top: 20px; }
.nz-two--top .nz-copy { margin-top: 0; max-width: 52ch; }
.nz-two .btns { margin-top: 32px; }
.nz-feat { grid-template-columns: 1fr; gap: 0; margin-top: 0; max-width: none; }
.nz-feat > div { padding: 15px 0; font-size: 16px; }
.nz-feat > div:first-child { border-top: 1px solid var(--hair); }
.nz-copy--center { margin: 22px auto 0; }
body.nz .sdk .nz-h2 { margin: 0 auto; max-width: 14em; }
body.nz .chips { margin-top: 30px; }

/* part names on the exploded joint: they arrive once the light has passed */
.nz-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.nz-label { position: absolute; transform: translate(-50%, 0); padding-top: 34px; text-align: center; white-space: nowrap;
  font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream); }
.nz-label::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 26px; background: linear-gradient(to bottom, rgba(244,241,233,0), rgba(244,241,233,0.7)); }
.nz-label--up { transform: translate(-50%, -100%); padding: 0 0 34px; }
.nz-label--up::before { top: auto; bottom: 0; background: linear-gradient(to top, rgba(244,241,233,0), rgba(244,241,233,0.7)); }
.nz-motion .nz-stage[data-film] .nz-label { opacity: 0; transition: opacity 600ms ease-out; }
.nz-motion .nz-stage[data-film].is-lit .nz-label, .nz-motion .nz-stage[data-film].is-fallback .nz-label { opacity: 1; transition-delay: calc(var(--i, 0) * 110ms + 200ms); }

/* specs and buy */
.nz-specs .nz-line { margin-bottom: 64px; }
.nz-specs-k { margin-bottom: 26px; }
body.nz .spec .row { padding: 17px 0; }
body.nz .spec .row .v { font-size: 16px; }
.nz-buy { position: relative; }
.nz-buy > .nz-line { position: absolute; top: 0; left: 0; }
.nz-card-key { border-color: rgba(244,241,233,0.3); box-shadow: 0 0 80px -30px rgba(244,241,233,0.22); }
body.nz .card .display { font-size: clamp(36px, 3vw, 48px); }
body.nz .bul > div { font-size: 16px; }
.nz-bar-item--phone { display: none; }

@media (max-width: 1100px) {
  .nz-facts-grid { --n: 3; }
  .nz-facts[style*="--n: 5"] .nz-facts-grid { grid-template-columns: repeat(3, 1fr); }
  .nz-facts[style*="--n: 5"] .nz-fact:nth-child(4) { padding-left: 0; border-left: 0; }
  .nz-facts[style*="--n: 5"] .nz-fact:nth-child(n+4) { border-top: 1px solid var(--hair); }
  .nz-two { gap: 40px 40px; }
  .nz-bar-meta { display: none; }
}
@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  .nz-facts[style*="--n: 5"] .nz-facts-grid { grid-template-columns: 1fr 1fr; }
  .nz-facts[style*="--n: 5"] .nz-fact:nth-child(4) { padding-left: 18px; border-left: 1px solid var(--hair); }
  .nz-facts[style*="--n: 5"] .nz-fact:nth-child(5) { grid-column: 1 / -1; }
  .nz-facts-note { margin-top: 0; border-top: 0; }
  .nz-real { padding: 72px var(--pad) 80px; }
  .nz-real-head { margin-bottom: 36px; }
  .nz-screen { margin: 0 calc(-1 * var(--pad)); }
  .nz-screen video { border-radius: 0; }
  .nz-screen figcaption { padding: 0 var(--pad); }
  .nz-stage--wide { aspect-ratio: 4 / 3; }
  .nz-two, .nz-two--top { grid-template-columns: 1fr; gap: 36px; padding: 44px var(--pad) 80px; }
  .nz-two--top { padding: 80px var(--pad) 40px; }
  .nz-label { font-size: 9px; letter-spacing: 0.1em; padding-top: 22px; }
  .nz-label::before { height: 16px; }
  .nz-label--up { padding: 0 0 22px; }
}
@media (max-width: 760px) {
  .nz-bar-item--phone { display: flex; margin-left: auto; }
  .nz-bar:has(.nz-bar-item--phone) .nz-bar-gap { display: none; }
  .nz-specs .nz-line { margin-bottom: 44px; }
}

/* ======================= actuator page ======================= */
.nz-hero--act .nz-h1 { font-size: clamp(36px, 4.3vw, 76px); max-width: 7.2em; }
.nz-hero--act .nz-hero-copy { width: min(36vw, 560px); }
.nz-hero--act .sub { margin-top: 18px; color: var(--c60); }
.nz-hero--act .nz-sub { margin-top: 16px; }
.nz-stats { margin-top: 28px; padding-top: 24px; gap: 20px 28px; }
.nz-stats .nz-num { font-family: var(--disp); font-weight: 600; font-size: clamp(24px, 2.1vw, 34px); letter-spacing: -0.035em; line-height: 1; color: var(--cream); }
.nz-stats .label { margin-top: 8px; color: var(--c60); }
.price-line .nz-price { font-family: var(--disp); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; text-transform: none; color: var(--cream); }
.nz-made .nz-h2 { margin: 0 auto; max-width: 15em; }
body.nz .specsec .sec-k { color: var(--c75); }
body.nz .chart { max-width: 760px; }
body.nz .legend { color: var(--c75); }

/* ======================= about page ======================= */
.nz-h1--about { font-size: clamp(36px, 4.4vw, 76px); max-width: 12em; }
.nz-place-hero .place-copy { padding-bottom: 12px; }
.nz-about-band { position: relative; }
.nz-about-band > .nz-line { position: absolute; top: 0; left: 0; }
body.nz .band .statement { font-size: clamp(21px, 1.8vw, 30px); line-height: 1.4; }
.nz-made-here { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.nz-prod { position: relative; display: block; background: #000; overflow: hidden; }
.nz-prod img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; opacity: 0.78; transition: opacity 500ms ease-out, transform 900ms var(--nz-ease); }
.nz-prod:hover img { opacity: 1; transform: scale(1.025); }
.nz-prod-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px var(--pad); background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.78) 46%); }
.nz-prod-name { font-family: var(--disp); font-weight: 600; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.15; letter-spacing: -0.025em; max-width: 18em; }
.nz-prod-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.nz-prod-foot .nz-price { font-family: var(--disp); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; }
.nz-prod-foot .label { color: var(--c75); display: inline-flex; align-items: baseline; gap: 10px; }
.nz-careers .nz-line { margin-bottom: 64px; }

@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  .nz-hero--act .nz-hero-copy { width: auto; }
  .nz-hero--act .nz-h1 { max-width: none; }
  .nz-made-here { grid-template-columns: 1fr; }
  .nz-prod-copy { padding: 28px var(--pad); }
}

/* stage shapes on the stacked layout */
@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  .nz-hero--product > .nz-stage { aspect-ratio: 4 / 3; }
  .nz-stage--wide.nz-stage--full { aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
  .nz-labels { display: none; }
}

/* contrast: spec labels and small print a step brighter than the base sheet */
body.nz .row .k, body.nz .specsec .row .k { color: var(--c60); }
body.nz .note { color: var(--c60); }
body.nz .eyebrow { color: var(--c60); }
@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  .nz-hero-copy { margin-top: -10px; }
}

/* scrub on the stacked layout: the whole frame stays visible above the caption */
@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  .nz-motion .nz-scrub.is-live .nz-canvas { object-fit: contain; object-position: 50% 42%; transform: scale(1.14); }
  .nz-motion .nz-scrub.is-live { height: var(--nz-len-m, 260vh); }
}

/* buy bar wording by width */
.nz-bar .nz-p { display: none; }
@media (max-width: 760px) {
  .nz-bar { padding: 0 14px 0 var(--pad); }
  .nz-bar .nz-d { display: none; }
  .nz-bar .nz-p { display: inline; }
  .nz-bar-item { gap: 10px; }
  .nz-bar-item + .nz-bar-item { padding-left: 0; border-left: 0; }
  .nz-bar-price { font-size: 18px; }
  .nz-bar .btn { padding: 10px 18px; }
}
@media (max-width: 380px) {
  .nz-bar-name { display: none; }
}
.nz-label b { display: inline-block; font-weight: 500; padding: 5px 9px; border-radius: 3px; background: rgba(0,0,0,0.62); box-shadow: 0 0 0 1px rgba(244,241,233,0.16); }

/* wide windows: the whole 16:9 frame of the hero stays in view between the header and the buy bar,
   and the light bar fades out at both ends instead of stopping at the edge of the film */
@media (min-aspect-ratio: 16/10) and (min-width: 901px) {
  .nz-hero > .nz-stage { bottom: var(--bar-h); }
  .nz-hero > .nz-stage .nz-still, .nz-hero > .nz-stage .nz-film {
    object-fit: contain; object-position: 72% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
  }
  .nz-hero::after { display: none; }
}
@media (min-width: 901px) and (min-aspect-ratio: 5/4) {
  .nz-motion .nz-scrub.is-live .nz-canvas { transform: translateY(-7%); }
}

/* ======================= second round: type floor, lower sections, bar ======================= */
/* nothing under 12 px for labels, 16 px for running text and table values */
body.nz { --fs-label: 12px; --fs-chrome: 12px; --fs-body: 16px; }
body.nz .note { font-size: 13px; line-height: 1.55; }
body.nz .foot-biz { font-size: 13px; }
.nz-bar-k { font-size: 12px; }
.nz-bar-name { font-size: 12px; }
.nz-bar-meta { font-size: 14px; }
.nz-ship { font-size: 14px; }
body.nz .specsec .row .v, body.nz .spec .row .v { font-size: 16px; }
body.nz .lede { font-size: 17px; color: var(--c75); }
body.nz .chip { color: var(--c90); }
@media (max-width: 760px) {
  .nz-bar-name { font-size: 12px; letter-spacing: 0.12em; }
  /* the chart scales with its width: larger user units keep its labels at 12 px on a phone */
  body.nz .chart svg text { font-size: 22px; letter-spacing: 1.2px; }
}
.nz-label { font-size: 12px; }

/* the buy bar is a solid edge of the window, nothing shows through it */
.nz-bar { background: rgba(5,5,5,0.96); }

/* SDK: copy and real code on the left, the console on the right */
.nz-sdk { position: relative; padding: 120px var(--pad) 130px; }
.nz-sdk > .nz-line { position: absolute; top: 0; left: 0; }
.nz-sdk-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.2fr); gap: 64px; align-items: center; max-width: 1400px; margin: 0 auto; }
.nz-sdk-copy .nz-h2 { font-size: clamp(28px, 3vw, 50px); max-width: 12em; }
.nz-sdk-copy .nz-copy { margin-top: 20px; }
.nz-sdk .sdk-stage { margin: 0; max-width: none; }
.nz-code {
  margin: 30px 0 0; padding: 22px 24px; overflow-x: auto; border-radius: 10px;
  background: rgba(244,241,233,0.035); box-shadow: 0 0 0 1px var(--hair), inset 0 1px 0 rgba(244,241,233,0.10);
  font-family: var(--mono); font-weight: 500; font-size: 13.5px; line-height: 1.75; color: var(--c90); tab-size: 4;
}
.nz-code code { font: inherit; white-space: pre; }
.nz-code .c-k { color: var(--c60); }
.nz-code .c-n, .nz-code .c-s { color: #f0b9a0; }

/* specs: heading stays beside the sheet */
.nz-sheet { position: relative; padding: 120px var(--pad) 130px; }
.nz-sheet > .nz-line { position: absolute; top: 0; left: 0; }
.nz-sheet-grid { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.5fr); gap: 72px; max-width: 1320px; margin: 0 auto; align-items: start; }
.nz-sheet-head { position: sticky; top: calc(var(--nav-h) + 40px); }
.nz-sheet-head .nz-h2 { font-size: clamp(28px, 3vw, 50px); max-width: 9em; }
.nz-sheet-head .note { margin-top: 22px; max-width: 30ch; }
.nz-spec .row { grid-template-columns: 230px 1fr; padding: 19px 0; }
body.nz .nz-spec .row .v { font-size: 18px; line-height: 1.45; color: var(--cream); font-weight: 400; }
.nz-specs-h { margin: 0 0 56px; max-width: 12em; }

/* buy: picture, price, what is in the box, one button */
.nz-buy2 { position: relative; padding: 120px var(--pad) 110px; text-align: center; }
.nz-buy2 > .nz-line { position: absolute; top: 0; left: 0; }
.nz-buy-head { margin: 0 auto 56px; }
.nz-buy-head .nz-h2 { margin: 0 auto; max-width: 14em; }
.nz-cards { max-width: 1040px; gap: 28px; align-items: stretch; }
.nz-cards.cards-1 { max-width: 500px; }
.nz-card { padding: 0; overflow: hidden; background: #050505; }
.nz-card-pic { position: relative; aspect-ratio: 16 / 10; background: #000; border-bottom: 1px solid var(--hair); overflow: hidden; }
.nz-card-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--nz-ease); }
.nz-card:hover .nz-card-pic img { transform: scale(1.03); }
.nz-card-body { display: flex; flex-direction: column; flex: 1; padding: 30px 32px 34px; }
body.nz .nz-card .display { font-size: clamp(40px, 3.4vw, 56px); margin: 12px 0 24px; }
.nz-card .btn { margin-top: 32px; width: 100%; min-height: 52px; }
.nz-buy-note { margin-top: 30px; }
.nz-buy2 .buy-contact { margin-top: 28px; }
.nz-buy2 .wm-buy { margin: 72px auto 0; opacity: 0.9; }
.nz-buy .nz-cards { text-align: left; }

@media (max-width: 1100px) {
  .nz-sdk-grid { gap: 40px; }
  .nz-sheet-grid { gap: 40px; }
}
@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  .nz-sdk { padding: 80px var(--pad) 90px; }
  .nz-sdk-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .nz-sdk .sdk-stage { margin: 0 calc(8px - var(--pad)); }
  .nz-code { font-size: 12.5px; padding: 18px 16px; }
  .nz-sheet { padding: 80px var(--pad) 90px; }
  .nz-sheet-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .nz-sheet-head { position: static; }
  .nz-sheet-head .btns { display: none; }
  .nz-spec .row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  body.nz .nz-spec .row .v { font-size: 17px; }
  .nz-buy2 { padding: 80px var(--pad) 80px; }
  .nz-buy-head { margin-bottom: 36px; }
  .nz-card-body { padding: 24px 22px 28px; }
  .nz-specs-h { margin-bottom: 36px; }
}

/* second round, composition: no screen that is mostly empty */
.nz-sdk { padding: 110px var(--pad) 96px; }
.nz-sheet { padding: 104px var(--pad) 104px; }
.nz-two--top { padding-bottom: 28px; }
.nz-stage--head { aspect-ratio: 2.3 / 1; }
.nz-card-pic img { object-position: var(--nz-pos, 50% 50%); }
@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  .nz-stage--head { aspect-ratio: 4 / 3; }
  /* the pinned reach stage on a phone: the large number on top, the arm in the middle, the progress line below */
  .nz-motion .nz-scrub.is-live .nz-canvas { object-position: 50% 60%; transform: scale(1.16); }
  .nz-motion .nz-scrub.is-live .nz-step, .nz-motion .nz-scrub.is-live .nz-step--top { top: calc(var(--nav-h) + 30px); bottom: auto; }
  .nz-motion .nz-scrub.is-live .nz-step .nz-h2 { font-size: clamp(44px, 13.5vw, 62px); letter-spacing: -0.045em; }
  .nz-motion .nz-scrub.is-live .nz-step .nz-copy { font-size: 18px; max-width: 24ch; }
  .nz-motion .nz-scrub.is-live .nz-prog { bottom: calc(var(--bar-h) + 40px); }
}

/* actuator buy card: picture beside the details on a wide window */
.nz-cards--wide.cards-1 { max-width: 920px; }
.nz-cards--wide .nz-card { flex-direction: row; }
.nz-cards--wide .nz-card-pic { flex: 0 0 46%; aspect-ratio: auto; min-height: 420px; border-bottom: 0; border-right: 1px solid var(--hair); }
.nz-cards--wide .nz-card-body { text-align: left; padding: 40px 40px 42px; }
.nz-ship-line { margin: 30px 0 0; }
body.nz .specsec { padding: 38px 0; }
.nz-act-specs { padding-top: 96px; }
@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  .nz-cards--wide .nz-card { flex-direction: column; }
  .nz-cards--wide .nz-card-pic { flex: none; aspect-ratio: 16 / 10; min-height: 0; border-right: 0; border-bottom: 1px solid var(--hair); }
  .nz-cards--wide .nz-card-body { padding: 24px 22px 28px; }
}

/* the light bar never crosses the headline: on the side by side layout the film and still fade out towards the copy */
@media (min-width: 901px) and (min-aspect-ratio: 5/4) {
  .nz-hero > .nz-stage .nz-still, .nz-hero > .nz-stage .nz-film {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.07) 26%, #000 36%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.07) 26%, #000 36%, #000 90%, transparent 100%);
  }
  .nz-hero::before { display: none; }
}
@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  /* about page tiles on a phone: the copy sits under the picture, never on it */
  .nz-prod img { aspect-ratio: 4 / 3; opacity: 1; }
  .nz-prod-copy { position: static; background: none; padding: 18px var(--pad) 32px; }
}

/* ======================= third round ======================= */

/* --- hero: both arms and the head always fully in the first view ---
   Side by side layout: the whole 16:9 frame is always shown (contain), between the header and the buy bar,
   its foot fades into the floor before it reaches the bar, its left end fades out before the headline. */
@media (min-width: 901px) and (min-aspect-ratio: 5/4) {
  .nz-hero > .nz-stage { top: calc(var(--nav-h) + 6px); bottom: calc(var(--bar-h) + 14px); }
  .nz-hero > .nz-stage .nz-still, .nz-hero > .nz-stage .nz-film {
    object-fit: contain; object-position: 100% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.07) 26%, #000 36%, #000 92%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.07) 26%, #000 36%, #000 92%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .nz-hero::after { display: none; }
}
@media (min-aspect-ratio: 16/10) and (min-width: 901px) {
  .nz-hero > .nz-stage .nz-still, .nz-hero > .nz-stage .nz-film { object-position: 72% 50%; }
}
/* stacked layout: a 4:3 picture that holds both arms with room on both sides */
@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  .nz-hero > .nz-stage { aspect-ratio: 4 / 3; max-height: none; }
  .nz-hero--act > .nz-stage { aspect-ratio: 1 / 1; max-height: 74svh; }
}

/* --- a picture and its text on the same screen --- */
/* show: a 16:9 frame that always fits between the header and the buy bar, with its text laid over the free part */
.nz-show { position: relative; }
.nz-show > .nz-line, .nz-fold > .nz-line { position: absolute; top: 0; left: 0; z-index: 3; }
.nz-show-box {
  position: relative; margin: 0 auto; container-type: inline-size;
  width: min(100%, calc((100vh - var(--nav-h) - var(--bar-h)) * 16 / 9));
  width: min(100%, calc((100svh - var(--nav-h) - var(--bar-h)) * 16 / 9));
  aspect-ratio: 16 / 9;
}
.nz-show-frame { position: absolute; inset: 0; }
.nz-over { position: absolute; z-index: 4; left: 57%; right: 3.5%; top: 56%; }
.nz-over .nz-h2 { font-size: clamp(24px, 3cqw, 46px); max-width: 13em; }
.nz-over .nz-copy { margin-top: 1.3cqw; font-size: clamp(16px, 1.35cqw, 20px); max-width: 38ch; }
.nz-featrow { display: flex; align-items: center; gap: 48px; max-width: 1320px; margin: 0 auto; padding: 30px var(--pad) 84px; }
.nz-feat--3 { flex: 1; grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
.nz-feat--3 > div:nth-child(-n+3) { border-top: 1px solid var(--hair); }
.nz-feat--3 > div:first-child { border-top: 1px solid var(--hair); }
.nz-feat--tight { margin-top: 26px; }
.nz-feat--tight > div { padding: 12px 0; }

/* part names: leader lines scale with the frame */
.nz-show .nz-label--up { padding: 0 0 calc(var(--lead, 2.2cqw) + 0.7cqw); }
.nz-show .nz-label--up::before { height: var(--lead, 2.2cqw); }
@container (max-width: 1180px) { .nz-labels { display: none; } }

/* fold that fits: never taller than the space between the header and the buy bar */
.nz-fold--fit { min-height: min(calc(100vh - var(--nav-h) - var(--bar-h)), 780px); min-height: min(calc(100svh - var(--nav-h) - var(--bar-h)), 780px); }
.nz-fold--fit .nz-fold-copy { padding-top: 40px; padding-bottom: 40px; }
.nz-fold--fit .nz-fold-copy .nz-copy { max-width: 50ch; }

/* a slim band between two folds */
.nz-band { border-top: 1px solid var(--hair); padding: 44px var(--pad) 48px; }
.nz-band-in { display: grid; grid-template-columns: minmax(260px, 0.8fr) 1.6fr; gap: 48px; align-items: center; max-width: 1320px; margin: 0 auto; }
.nz-band .chips { margin-top: 0; }

@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  .nz-show-box { width: 100%; aspect-ratio: auto; }
  .nz-show-frame { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  .nz-over { position: static; padding: 28px var(--pad) 0; }
  .nz-over .nz-h2 { font-size: var(--nz-h2); }
  .nz-over .nz-copy { font-size: var(--nz-body); margin-top: 16px; }
  .nz-featrow { display: block; padding: 28px var(--pad) 72px; }
  .nz-feat--3 { grid-template-columns: 1fr; }
  .nz-feat--3 > div:nth-child(-n+3) { border-top: 0; }
  .nz-feat--3 > div:first-child { border-top: 1px solid var(--hair); }
  .nz-featrow .btn { margin-top: 28px; }
  .nz-fold--fit { min-height: 0; }
  .nz-fold--fit .nz-fold-copy { padding: 8px var(--pad) 64px; }
  .nz-band { padding: 36px var(--pad) 44px; }
  .nz-band-in { grid-template-columns: 1fr; gap: 22px; }

  /* reach on a phone: the arm fills the width, the number sits right above it */
  .nz-motion .nz-scrub.is-live .nz-canvas {
    inset: auto; left: 0; right: 0; top: calc(50% + 10px); width: 100%; height: auto; aspect-ratio: 5 / 2;
    object-fit: contain; object-position: 50% 50%; transform: none;
  }
  .nz-motion .nz-scrub.is-live .nz-step, .nz-motion .nz-scrub.is-live .nz-step--top { top: auto; bottom: calc(50% + 4px); }
  .nz-motion .nz-scrub.is-live .nz-prog { bottom: calc(var(--bar-h) + 34px); }
  .nz-scrub .nz-poster { aspect-ratio: 5 / 2; object-fit: contain; }
}

/* the floor under the side view falls off to black, so the reflection reads as a floor and not as a second unit */
.nz-stage--floor::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 55%, #000 100%); }
.nz-over .nz-copy { max-width: 44ch; }