/* The robot uses the same small callout as the two existing machines. */
.factory-targets{position:absolute;inset:0;z-index:4;pointer-events:none}
.factory-target{position:absolute;display:flex;align-items:center;justify-content:center;width:44px;height:44px;transform:translate(-50%,-50%);padding:0;background:transparent;pointer-events:auto;cursor:pointer;border-radius:50%}
.factory-target[hidden]{display:none}
.factory-target-ring{display:grid;place-items:center;width:23px;height:23px;border:1px solid #eaa17d99;border-radius:50%;background:transparent;color:#eaa17dcc;font:500 14px/1 var(--body);animation:robot-attention 3s ease-in-out infinite}
@keyframes robot-attention{0%,100%{box-shadow:0 0 0 0 #eaa17d00}50%{box-shadow:0 0 0 6px #eaa17d14}}
.factory-target:hover .factory-target-ring,.factory-target[aria-expanded=true] .factory-target-ring{color:#f5bd9e;border-color:#f5bd9e;animation:none}
.factory-target:focus-visible{outline:2px solid #fff;outline-offset:2px}
.factory-target-label{position:absolute;left:calc(100% + 4px);white-space:nowrap;font:500 9px/1.4 var(--body);padding:5px 8px;border:1px solid #ffffff25;border-radius:4px;background:#25282ce8;color:#eee;pointer-events:none;opacity:0}
.factory-target:hover .factory-target-label,.factory-target:focus-visible .factory-target-label{opacity:1}
.factory-target[aria-expanded=true] .factory-target-label{display:none}
.robot-scene-panel{position:absolute;z-index:5;inset:315px 5% auto auto;width:var(--robot-card-width,173px);height:var(--robot-card-height,95px);font-family:var(--body)}
.robot-scene-panel[hidden]{display:none}
.robot-scene-panel small{padding-right:20px}
.robot-scene-panel .robot-usual{display:block;font-size:9px;color:#d5d0c9}
.robot-sparkline{position:absolute;right:16px;bottom:13px;width:58px;height:22px;overflow:visible}
.robot-sparkline path{fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.robot-baseline{stroke:#ffffff25;stroke-dasharray:2 3}
.robot-trace{stroke:#eaa17d}
.robot-sparkline circle{fill:#eaa17d}
#robot-scene-close{position:absolute;top:3px;right:3px;display:grid;place-items:center;width:26px;height:26px;padding:0;background:transparent;color:#c2c7c899;border-radius:4px;cursor:pointer}
#robot-scene-close:hover{color:#fff;background:#ffffff0a}
#robot-scene-close:focus-visible{outline:2px solid #f5a681;outline-offset:1px}
#robot-scene-close svg{width:13px;height:13px}
html[data-media=hide] .factory-targets,html[data-media=hide] .robot-scene-panel{display:none!important}
@media(min-width:961px){
  .production-callout{left:var(--production-scene-left,12px);top:360px}
  .robot-scene-panel{inset:78px auto auto 53%}
}
@media(min-width:961px) and (max-width:1100px){.robot-scene-panel{left:57%}.robot-sparkline{right:11px;bottom:11px;width:48px}}
@media(min-width:761px) and (max-width:960px){
  .hero{padding-bottom:180px}
  .robot-scene-panel{inset:auto auto 106px max(35px,calc((100% - 620px)/2))}
}
@media(max-width:760px){
  .robot-scene-panel{inset:auto 24px calc(116px + var(--robot-card-height,65px)) auto}
  .robot-scene-panel .robot-usual{font-size:7px}
  .robot-sparkline{right:10px;bottom:10px;width:48px;height:18px}
}
@media(prefers-reduced-motion:reduce){.factory-target-ring{animation:none}}

/* Tablets follow the phone story: introduction, an unobscured factory, then actions. */
@media(min-width:761px) and (max-width:1200px){
  .site-header nav{display:none}
  .hero{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;padding-bottom:0}
  .hero-content{display:flex;flex-direction:column;width:100%;min-height:max(940px,min(1100px,calc(100svh - 124px)));padding:40px 36px 30px}
  .hero-content>.eyebrow,.hero-content>h1,.hero-content>p{flex-shrink:0}
  .hero h1{font-size:clamp(56px,6vw,72px);line-height:1.12;letter-spacing:-.055em;margin-top:24px}
  .hero .eyebrow{font-size:8px;letter-spacing:1.4px}
  .hero-content>p{max-width:580px;font-size:14px;line-height:1.8;margin-top:24px}
  .hero .hero-actions{display:flex;gap:28px;align-items:center;margin-top:auto;padding-top:clamp(400px,50vw,520px)}
  .hero-actions .button{font-size:13px;padding:17px 22px;gap:28px}
  .hero-actions .hero-link{font-size:13px;gap:18px}
  .hero-bottom,.hero-grid{display:none}
  .hero-film{inset:calc(var(--hero-copy-bottom,350px) + 30px) -10% 90px -10%;opacity:1;filter:none;mask-image:linear-gradient(180deg,transparent,#000 100px,#000 100%)}
  .hero-shade{background:linear-gradient(180deg,#25282c 0%,#25282c 28%,#25282c00 45%,#25282c00 78%,#25282c 100%)}
  .scene-context{position:absolute;inset:0 36px;margin:0;width:auto;max-width:none;height:100%;align-self:stretch;display:block;pointer-events:none}
  .scene-context-label{display:none}
  .scene-context .scene-callout{position:absolute;width:230px;min-width:0;padding:14px 16px;pointer-events:auto}
  .scene-callout small{font-size:8px;letter-spacing:.8px}
  .scene-callout strong{font-size:15px;margin:5px 0}
  .scene-callout>span:last-child{display:block;font-size:10px}
  .scene-context .maintenance-callout{inset:calc(var(--hero-copy-bottom,350px) + 20px) auto auto 0}
  .scene-context .production-callout{inset:auto 0 112px auto}
  .robot-scene-panel{inset:auto 36px calc(128px + var(--robot-card-height,90px)) auto;padding:14px 16px}
  .robot-scene-panel .robot-usual{font-size:10px}
  .robot-sparkline{right:16px;bottom:14px;width:58px;height:22px}
}
/* Shared desktop treatment: keep the scene crisp, shade only the copy and
   bottom caption. Brand palettes supply the background, not a gray veil. */
@media (min-width:1201px) {
  .hero-film { opacity:1; filter:none; }
  .hero-shade {
    background:linear-gradient(90deg,var(--dark) 0%,color-mix(in srgb,var(--dark) 94%,transparent) 28%,transparent 62%),linear-gradient(0deg,var(--dark),transparent 28%);
  }
}