/* Secondary control scenes share the same viewport budget as the product scenes. */
.page-valve .motion-control-hero{padding:calc(var(--head) + 16px) 0 20px;scroll-margin-top:var(--head)}
.page-valve .motion-control-hero .breadcrumbs{margin-bottom:10px}
.page-valve .motion-control-hero .eyebrow{margin:0 0 8px;font-size:11px}
.page-valve .motion-control-hero h1{font-size:clamp(30px,3.7vw,48px);line-height:1.08;margin:0 0 12px;max-width:17ch}
.page-valve .motion-control-hero .lead{font-size:14px;line-height:1.6;max-width:42ch}
.page-valve .motion-control-hero .actions{margin-top:16px;gap:16px}
.page-valve .motion-control-hero .feedback-lab{height:clamp(280px,calc(100svh - var(--head) - 170px),390px);display:grid;grid-template-rows:auto auto minmax(65px,1fr) auto auto auto;gap:6px;align-content:stretch}
.page-valve .motion-control-hero .feedback-lab>svg{width:100%;height:100%;min-height:0;margin:0;object-fit:contain}
.page-valve .motion-control-hero .feedback-lab figcaption,.page-valve .motion-control-hero .feedback-lab .fb-readout{margin:0;padding:0;min-height:0}
.page-valve .motion-control-hero .feedback-lab small{font-size:10px;line-height:1.4}
.page-valve #command{padding:24px 0;scroll-margin-top:0}
.page-valve #command .detail-row{align-items:center;gap:5%}
.page-valve #command .h2{font-size:clamp(28px,3.2vw,42px);margin:0 0 12px;max-width:18ch}
.page-valve #command .eyebrow{font-size:10px;margin:0 0 8px}
.page-valve #command .motion-command-copy{font-size:14px;line-height:1.6;margin:0 0 8px}
.page-valve #command .motion-explain{font-size:13px;line-height:1.6;max-width:48ch}
.page-valve #command .motion-explain summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700;color:var(--garnet)}
.page-valve #command .motion-explain[open] summary{margin-bottom:8px}
.page-valve #command .visual-panel{padding:8px;border-radius:9px}
.page-valve #command .valve-diagram{height:min(330px,calc(100svh - var(--head) - 200px));width:100%;object-fit:contain}
.page-valve #command .valve-diagram text{font-size:23px}
.page-valve #command .detail-valve-control{padding:10px 14px;margin-top:8px}
.page-valve #command .detail-valve-control output{font-size:12px;margin-top:2px}
.page-valve #command .detail-valve-control .scale{font-size:11px}
.engineering-content .how{padding:16px 0 18px;scroll-margin-top:0}
.engineering-content .how .ex{gap:10px;align-items:start}
.engineering-content .how .ex-copy{gap:7px;margin:0}
.engineering-content .how .ex-copy .eyebrow{font-size:10px;margin:0}
.engineering-content .how .ex-copy .h2{font-size:30px;line-height:1.1;margin:0}
.engineering-content .how .ex-copy .lead{font-size:13px;line-height:1.5}
.engineering-content .how .ex-rail [role=tab]{min-height:44px;font-size:12px}
.engineering-content .how .ex-stage{position:static;min-width:0;margin:0;align-items:center;justify-items:center}
.engineering-content .how .scene{display:block;width:100%;height:min(380px,calc(100svh - var(--head) - 160px));max-height:none;max-width:none;object-fit:contain}
.engineering-content .how .result{font-size:13px;line-height:1.55;margin:0}
.engineering-content .how .stage-bar{margin:0;min-height:44px}
.engineering-content .how .btn-quiet{min-height:44px}
@media(max-width:699px){
 .page-valve .motion-control-hero{padding:calc(var(--head) + 9px) 0 12px}
 .page-valve .motion-control-hero .breadcrumbs{margin-bottom:7px;font-size:10px}
 .page-valve .motion-control-hero .detail-hero-grid{gap:12px}
 .page-valve .motion-control-hero .eyebrow{display:none}
 .page-valve .motion-control-hero h1{font-size:29px;line-height:1.05;margin-bottom:8px;max-width:19ch}
 .page-valve .motion-control-hero .lead{font-size:13px;line-height:1.45}
 .page-valve .motion-control-hero .actions{margin-top:9px;gap:12px}
 .page-valve .motion-control-hero .actions .btn,.page-valve .motion-control-hero .actions .text-link{font-size:11px;min-height:44px}
 .page-valve .motion-control-hero .actions .btn{padding-inline:12px}
 .page-valve .motion-control-hero .actions .text-link{gap:6px}
 .page-valve .motion-control-hero .feedback-lab{height:clamp(260px,calc(100svh - var(--head) - 216px),360px);padding:12px;gap:4px}
 .page-valve .motion-control-hero .feedback-lab figcaption{font-size:17px;line-height:1.3}
 .page-valve .motion-control-hero .feedback-lab .fb-readout{font-size:12px;line-height:1.4}
 .page-valve .motion-control-hero .feedback-tools{padding-top:5px;gap:4px}
 .page-valve .motion-control-hero .feedback-tools button{min-height:44px;padding:6px 8px}
 .page-valve #command{padding:14px 0}
 .page-valve #command .detail-row{gap:10px}
 .page-valve #command .eyebrow{display:none}
 .page-valve #command .h2{font-size:28px;margin:0 0 6px}
 .page-valve #command .motion-command-copy{font-size:12px;line-height:1.45;margin:0}
 .page-valve #command .motion-explain{font-size:12px}
 .page-valve #command .motion-explain summary{min-height:36px}
 .page-valve #command .valve-diagram{height:clamp(150px,calc(100svh - var(--head) - 280px),235px)}
 .page-valve #command .valve-diagram text{font-size:27px}
 .page-valve #command .detail-valve-control{padding:7px 11px;margin-top:6px}
 .page-valve #command .detail-valve-control .scale{display:none}
 .page-valve #command .detail-valve-control label{font-size:11px}
 .engineering-content .how{padding:4px 0}
 .engineering-content .how .ex{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .engineering-content .how .ex-copy{display:none}
 .engineering-content .how .ex-rail,.engineering-content .how .ex-panels{display:contents}
 .engineering-content .how .ex-rail [role=tab]{min-height:44px;padding:4px;font-size:11px;line-height:1.25;display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid #cfd4c6}
 .engineering-content .how .ex-rail [role=tab]:nth-child(4){grid-row:2;grid-column:1}
 .engineering-content .how .stage-bar{grid-row:2;grid-column:2/4;display:flex;min-height:44px;align-items:stretch}
 .engineering-content .how .stage-bar .btn-quiet{width:100%;font-size:12px;padding:4px 8px;min-height:44px}
 .engineering-content .how .stage-bar .sn{font-size:11px;line-height:1.4}
 .engineering-content .how .ex-stage{grid-row:3;grid-column:1/-1}
 .engineering-content .how .scene{height:clamp(180px,calc(100svh - var(--head) - 315px),250px)}
 .engineering-content .how .scene .lb{font-size:21px}
 .engineering-content .how .scene .ls{font-size:18px}
 .engineering-content .how .scene .glyph text{font-size:25px}
 .engineering-content .how [role=tabpanel]{grid-row:4;grid-column:1/-1;gap:3px}
 .engineering-content .how .ctl{gap:2px}
 .engineering-content .how .ctl-label{font-size:12px;line-height:1.3}
 .engineering-content .how .ctl .scale{display:none}
 .engineering-content .how output{font-size:12px;line-height:1.4}
 .engineering-content .how .result{font-size:12px;line-height:1.4;margin:0}
 .engineering-content .how .switch{font-size:12px;gap:8px;min-height:44px}
 #flow-management .tech-split{display:flex;flex-direction:column;gap:24px}
 #flow-management .feedback-lab{order:-1;width:100%;margin:0}
 #flow-management{scroll-margin-top:0}
}
@media(max-width:359px) and (max-height:620px){.page-valve #command{padding-block:6px}}

/* At tablet widths, give the cutaway the width of the page. */
/* Short reflow viewports need normal vertical reading space for the artwork. */
@media (max-width:539px) and (max-height:500px) {
  .rack-hero, .cl-valve-opening { height:auto; max-height:none; min-height:0; }
  .rack-hero .rh-grid, .cl-valve-opening .cl-valve-opening-wrap,
  .cl-valve-opening .cl-valve-opening-grid { height:auto; grid-template-rows:auto auto; }
  .rack-hero .rack-motion .rm-svg { height:auto; max-height:none; }
  .cl-valve-opening .cl-valve-motion { height:auto; grid-template-rows:auto auto auto auto; }
  .cl-valve-opening .cl-vm-stage { height:auto; grid-template-rows:auto auto; }
  .cl-valve-opening .cl-vm-diagram { height:auto; max-height:none; aspect-ratio:704 / 390; }
}
@media (max-width:699px) and (min-height:501px) {
  .rack-motion .rm-flow-key { gap:8px; padding-inline:5px; }
  .rack-motion .rm-flow-key span { font-size:10px; gap:3px; }
  .rack-motion .rm-flow-key i { width:9px; }
  .rack-motion .rm-sensor-key span { font-size:11px; }
}
@media (min-width:500px) and (max-width:999px) and (min-height:501px) {
  .rack-hero .rh-grid { grid-template-columns:1fr; grid-template-rows:auto auto; align-content:center; gap:14px; }
  .rack-hero .rh-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 16px; }
  .rack-hero .rh-eyebrow, .rack-hero .breadcrumbs { display:none; }
  .rack-hero h1 { grid-column:1; font-size:30px; max-width:none; }
  .rack-hero .rh-lead { grid-column:1; font-size:13px; line-height:1.45; margin:3px 0; }
  .rack-hero .rh-links { grid-column:2; grid-row:1/3; margin:0; }
  .rack-hero .rh-compare { grid-column:1; justify-self:start; margin:3px 0 0; }
  .rack-motion .rm-svg { height:clamp(190px,calc(100svh - 392px),340px); max-height:none; }
  .rack-motion .rm-svg .rm-module-label, .rack-motion .rm-svg .rm-sensing-label { font-size:18px; }
  .rack-motion .rm-svg .rm-tray-label { font-size:18px; }
  .feedback-lab .fb-axis { font-size:25px; }
}
@media (min-width:1000px) and (max-width:1199px) {
  .rack-motion .rm-svg .rm-module-label, .rack-motion .rm-svg .rm-sensing-label { font-size:18px; }
  .rack-motion .rm-svg .rm-tray-label { font-size:17px; }
}
@media (min-width:700px) and (max-width:1199px) {
  .cl-valve-motion .cl-vm-part-name { font-size:18px; }
}
@media (min-width:500px) and (max-width:999px) and (min-height:501px) and (max-height:740px) {
  .rack-hero { padding-block:10px; }
  .rack-hero .rh-grid { gap:6px; }
  .rack-motion .rm-svg { height:clamp(185px,calc(100svh - 435px),280px); }
}
@media (min-width:700px) and (min-height:501px) and (max-height:650px) {
  .page-valve #command { padding-block:8px; }
  .page-valve #command .valve-diagram { height:min(265px,calc(100svh - var(--head) - 230px)); }
}
@media (max-width:359px) {
  .cl-valve-opening .cl-vm-mobile-label .cl-vm-label { font-size:31px; }
}
@media (max-width:359px) and (max-height:555px) {
  .cl-valve-opening .breadcrumbs { display:none; }
  .rack-hero { padding-block:4px; }
  .rack-hero .rh-grid { gap:4px; }
  .rack-hero .rh-links { margin-top:3px; }
  .rack-hero .rm-controls { padding-top:2px; }
  .rack-motion .rm-board-head { padding-block:4px; }
  .page-valve .motion-control-hero .breadcrumbs { display:none; }
  .page-valve #command .valve-diagram { height:170px; }
  .rack-motion .rm-diagram-tall .rm-header-label, .rack-motion .rm-diagram-tall .rm-tray-label,
  .rack-motion .rm-diagram-tall .rm-sensing-label { font-size:19px; }
}
/* Short, wide screens keep the drawing between two horizontal control rows. */
@media (min-width:540px) and (max-height:500px) {
  .rack-hero, .cl-valve-opening { height:calc(100svh - var(--head)); min-height:0; max-height:none; padding-block:6px; }
  .rack-hero .rh-grid, .cl-valve-opening .cl-valve-opening-grid {
    display:grid; grid-template-columns:minmax(130px,.37fr) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr); gap:12px; align-content:stretch; align-items:center;
  }
  .cl-valve-opening .cl-valve-opening-wrap { grid-template-rows:minmax(0,1fr); }
  .rack-hero .rh-copy, .cl-valve-opening .cl-valve-opening-copy { display:block; }
  .rack-hero .rh-eyebrow, .rack-hero .breadcrumbs, .cl-valve-opening .breadcrumbs,
  .cl-valve-opening-copy .cl-kicker { display:none; }
  .rack-hero h1, .cl-valve-opening-copy h1 { font-size:clamp(21px,3.3vw,29px); max-width:none; white-space:normal; }
  .cl-valve-opening-copy h1 span { display:inline; }
  .rack-hero .rh-lead, .cl-valve-opening-copy .cl-valve-opening-lead { display:block; font-size:11px; line-height:1.4; margin:7px 0; }
  .rack-hero .rh-links, .cl-valve-opening-copy .actions { display:flex; flex-flow:row wrap; gap:4px; margin:6px 0 0; }
  .rack-hero .rh-links a, .cl-valve-opening-copy .btn, .cl-valve-opening-copy .text-link {
    min-height:44px; font-size:10px; padding:4px 7px;
  }
  .rack-hero .rh-compare { display:inline-flex; margin-top:7px; }
  .rack-motion .rm-board {
    display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    grid-template-rows:48px minmax(0,1fr) 48px; height:calc(100svh - var(--head) - 20px);
  }
  .rack-motion .rm-board-head { grid-column:1; grid-row:1; padding:4px 6px; border:0; }
  .rack-motion .rm-board-head h2 { font-size:11px; line-height:1.25; }
  .rack-motion .rm-board-head span { display:none; }
  .rack-motion .rm-controls { grid-column:2; grid-row:1; padding:2px 5px 2px 0; align-self:center; }
  .rack-motion .rm-tray-controls { gap:3px; }
  .rack-motion .rm-tray-controls button { min-height:44px; padding:3px; font-size:10px; }
  .rack-motion .rm-drawing { grid-column:1/-1; grid-row:2; padding:0 4px; }
  .rack-motion .rm-svg { height:100%; max-height:none; }
  .rack-motion .rm-svg .rm-header-label, .rack-motion .rm-svg .rm-tray-label,
  .rack-motion .rm-svg .rm-module-label, .rack-motion .rm-svg .rm-sensing-label { font-size:23px; }
  .rack-motion .rm-flow-key { grid-column:1; grid-row:3; padding:2px 5px; gap:3px 8px; flex-wrap:wrap; align-content:center; justify-content:flex-start; }
  .rack-motion .rm-flow-key span { font-size:10px; gap:3px; line-height:1.2; }
  .rack-motion .rm-flow-key i { width:10px; }
  .rack-motion .rm-bottom { grid-column:2; grid-row:3; gap:1px; padding:1px 2px; }
  .rack-motion .rm-bottom button, .rack-motion summary { min-height:44px; font-size:10px; padding:2px; }
  .cl-valve-opening .cl-valve-motion { height:calc(100svh - var(--head) - 20px); grid-template-rows:auto minmax(0,1fr) auto auto; }
  .cl-valve-opening .cl-vm-head { padding:4px 8px; }
  .cl-valve-opening .cl-vm-stage { display:grid; grid-template-columns:minmax(0,1fr) minmax(74px,.24fr); grid-template-rows:minmax(0,1fr); gap:2px; padding:2px 5px; }
  .cl-valve-opening .cl-vm-diagram { height:100%; width:100%; max-height:100%; }
  .cl-valve-opening .cl-vm-desktop-label { display:none; }
  .cl-valve-opening .cl-vm-mobile-label { display:block; }
  .cl-valve-opening .cl-vm-label { font-size:28px; }
  .cl-valve-opening .cl-vm-actuator-label { font:31px Arial,sans-serif; letter-spacing:-.04em; }
  .cl-valve-opening .cl-vm-readout { margin:0; padding:4px; border:0; border-left:1px solid #d8e0da; }
  .cl-valve-opening .cl-vm-readout dl { display:block; }
  .cl-valve-opening .cl-vm-readout dl>div+div { padding-top:5px; margin-top:6px; }
  .cl-valve-opening .cl-vm-readout dt { font-size:9px; line-height:1.15; }
  .cl-valve-opening .cl-vm-readout dd { font-size:12px; white-space:normal; }
  .cl-valve-opening .cl-vm-controls { padding:4px 8px; }
  .cl-valve-opening .cl-vm-options button { min-height:44px; padding:4px 7px; }
  .cl-valve-opening .cl-vm-playback { margin:0; padding:0; }
  .cl-valve-opening .cl-vm-caption { padding:3px 8px; font-size:10px; }
  .page-valve .motion-control-hero { padding:calc(var(--head) + 5px) 0 5px; }
  .page-valve .motion-control-hero .breadcrumbs { display:none; }
  .page-valve .motion-control-hero .detail-hero-grid, .page-valve #command .detail-row {
    grid-template-columns:minmax(130px,.37fr) minmax(0,1fr); gap:12px; align-items:center;
  }
  .page-valve .motion-control-hero h1, .page-valve #command .h2 { font-size:24px; }
  .page-valve .motion-control-hero .lead { font-size:12px; line-height:1.4; }
  .page-valve .motion-control-hero .actions { gap:3px; margin-top:5px; }
  #flow-management { padding-block:6px; }
  #flow-management .tech-split { display:flex; flex-direction:column; gap:12px; }
  #flow-management .feedback-lab { order:-1; }
  #flow-management .feedback-lab, .page-valve .motion-control-hero .feedback-lab {
    display:grid; grid-template-rows:auto auto minmax(60px,1fr) auto auto auto;
    width:100%; height:calc(100svh - var(--head) - 44px); max-width:720px; padding:8px; gap:2px;
  }
  #flow-management .feedback-lab>svg, .page-valve .motion-control-hero .feedback-lab>svg { margin:0; height:100%; max-height:none; }
  #flow-management .feedback-lab figcaption, #flow-management .feedback-lab .fb-readout, #flow-management .feedback-lab small { min-height:0; margin:0; padding:0; }
  #flow-management .feedback-tools { padding-top:2px; }
  .feedback-lab .fb-axis { font-size:28px; }
  .page-valve #command { padding:4px 0; }
  .page-valve #command .valve-diagram { height:calc(100svh - var(--head) - 174px); }
  .page-valve #command .valve-diagram text { font-size:33px; }
  .page-valve #command .detail-valve-control { margin-top:3px; padding:4px 8px; }
  .page-valve #command .detail-valve-control .scale { display:none; }
}
@media (max-width:999px) {
  .engineering-content .how .ex-stage { min-height:0; aspect-ratio:auto; padding:0; }
}
@media (min-width:540px) and (max-height:500px) {
  .engineering-content .how { padding-block:4px; }
  .engineering-content .how .ex {
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    grid-template-rows:auto auto auto;
    grid-template-areas:"rail stage" "controls stage" "play stage";
    align-content:start; align-items:start; gap:5px 10px;
  }
  .engineering-content .how .ex-copy { display:none; }
  .engineering-content .how .ex-rail { display:grid; grid-area:rail; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; }
  .engineering-content .how .ex-rail [role=tab] {
    display:flex; grid-row:auto; grid-column:auto; align-items:center; justify-content:center;
    text-align:center; padding:3px; min-height:44px; line-height:1.2; font-size:11px;
  }
  .engineering-content .how .ex-rail [role=tab]:nth-child(4) { grid-row:auto; grid-column:auto; }
  .engineering-content .how .ex-rail [role=tab]::after { display:none; }
  .engineering-content .how .ex-panels { display:contents; }
  .engineering-content .how [role=tabpanel] { grid-area:controls; gap:3px; }
  .engineering-content .how .stage-bar { grid-area:play; align-self:start; }
  .engineering-content .how .ex-stage {
    grid-area:stage; align-self:start; width:100%; height:min(280px,calc(100svh - var(--head) - 45px));
    min-height:0; aspect-ratio:auto; padding:0;
  }
  .engineering-content .how .scene { display:block; width:100%; height:100%; min-height:0; max-height:100%; }
  .engineering-content .how .scene .lb { font-size:21px; }
  .engineering-content .how .scene .ls { font-size:18px; }
  .engineering-content .how .scene .glyph text { font-size:21px; }
  .engineering-content .how .ctl { padding:0; gap:1px; }
  .engineering-content .how .ctl .scale { display:none; }
  .engineering-content .how .ctl-label, .engineering-content .how output,
  .engineering-content .how .result { font-size:12px; line-height:1.35; }
}