/* ==========================================================
   SUAS — #infra (product page), #scale and #impact (home page)
   Rules: reference/INTEGRATION_RULES.md. Every class is
   prefixed infra- / scale- / impact-; colours come from
   theme.css tokens (raw hex only for neutral greys inside the
   drawn machines). Index: load after home.css. Product page:
   load before pages.css, which holds the #infra placement
   (padding, width, heading size).
   ========================================================== */

/* ==========================================================
   #infra — Plug & play integration (product.html only)
   Source: reference/works_with_your_existing_infrastructure.html
   Pure CSS animation on one 10s cycle. The stage is drawn at a
   fixed 840px design width (all sizes below are design px);
   bottom-sections.js measures its real height and scales the
   whole stage to the space it has (right column on desktop,
   full width when stacked), and pauses the animation while the
   section is off-screen. Layout and placement: pages.css.
   Design text sizes are chosen so that at the desktop scale
   (~0.95-1.35) nothing renders below 12px.
   ========================================================== */
.infra-section{
  overflow:hidden;
  padding:52px 0 45px; /* reference spacing, tighter than .sec */
  background:
    radial-gradient(circle at 65% 48%,color-mix(in srgb,var(--accent) 4%,transparent),transparent 29%),
    var(--bg);
}
.infra-section::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb,var(--text) 1.8%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--text) 1.8%,transparent) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
}
.infra-section>.wrap{position:relative;z-index:2}

/* ---------- Header ---------- */
.infra-head{max-width:none;margin-bottom:32px}
.infra-head .lede{max-width:640px;margin-top:14px;font-size:14px;line-height:1.55}
.infra-eyebrow{display:inline-flex;align-items:center;gap:10px}
.infra-eyebrow::before,.infra-eyebrow::after{content:"";width:23px;height:1px;flex:none;background:var(--accent);opacity:.55}

/* ---------- Stage + scaling ---------- */
.infra-fit{overflow-x:clip;overflow-clip-margin:48px}
.infra-stage{
  position:relative;overflow:hidden;width:840px;transform-origin:0 0;
  line-height:normal; /* the drawing is positioned for the browser default, not the theme's 1.6 */
  border:1px solid var(--line);border-radius:22px;background:var(--bg);
  box-shadow:0 1px 2px color-mix(in srgb,var(--text) 2%,transparent),0 18px 45px color-mix(in srgb,var(--text) 5.5%,transparent);
}

/* ---------- Top bar ---------- */
.infra-top{height:60px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 28px;border-bottom:1px solid var(--line)}
.infra-top-label{display:flex;align-items:center;gap:11px;color:var(--text);font-size:14px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.infra-top-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent)}
.infra-top-mode{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.infra-top-mode strong{color:var(--accent-hover);font-weight:600}

/* ---------- Work area (840 x 452) ---------- */
.infra-work{position:relative;height:452px;overflow:hidden}
.infra-floor{position:absolute;left:4%;right:4%;bottom:60px;height:110px;opacity:.45;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 58px,color-mix(in srgb,var(--text) 4.5%,transparent) 59px);
  transform:perspective(500px) rotateX(67deg);transform-origin:bottom}

.infra-area{position:absolute;top:20px;z-index:10;font-size:13px;line-height:1.3;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted)}
.infra-area--left{left:4%}
.infra-area--right{right:4%}
.infra-area--center{left:50%;color:var(--accent-hover);white-space:nowrap;transform:translateX(-50%);animation:infraTitle 10s ease-in-out infinite}
@keyframes infraTitle{
  0%,52%{opacity:1;transform:translateX(-50%) translateY(0)}
  58%,94%{opacity:0;transform:translateX(-50%) translateY(-4px)}
  100%{opacity:1;transform:translateX(-50%) translateY(0)}
}

/* ---------- CNC machines (neutral greys: drawing; full size, was scale .88) ---------- */
.infra-cnc{position:absolute;width:178px;height:174px;z-index:10}
.infra-cnc--left{left:4%;top:62px}
.infra-cnc--right{right:calc(4% + 31px);top:62px} /* the shell + shadow overhang the box by 31px on the right */
.infra-cnc-shell{position:absolute;left:5px;top:12px;width:195px;height:160px;border:2px solid #555d65;border-radius:7px 7px 3px 3px;background:linear-gradient(145deg,#fcfcfc,#e8ebed);box-shadow:9px 10px 0 #e0e2e3}
.infra-cnc-head{position:absolute;left:0;top:0;width:204px;height:29px;border-radius:5px 5px 0 0;background:#303030}
.infra-cnc-head::before{content:"CNC";position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#fff;font-size:13px;line-height:1;font-weight:600;letter-spacing:.14em}
.infra-cnc-door{position:absolute;left:18px;top:48px;width:112px;height:75px;border:3px solid #676d73;background:linear-gradient(135deg,rgba(100,115,125,.2),rgba(255,255,255,.1)),#dce3e7}
.infra-cnc-door::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(70,70,70,.2)}
.infra-cnc-panel{position:absolute;right:15px;top:50px;width:38px;height:65px;border:2px solid #676d73;background:#fafafa}
.infra-cnc-screen{width:25px;height:19px;margin:8px auto;background:#171717}
.infra-cnc-base{position:absolute;left:10px;right:0;bottom:14px;height:28px;background:#666d73;clip-path:polygon(3% 0,97% 0,100% 100%,0 100%)}

.infra-light{position:absolute;right:12px;top:10px;width:8px;height:8px;z-index:5;border-radius:50%;background:#aaa;animation:infraLight 10s ease-in-out infinite}
@keyframes infraLight{
  0%,54%{background:#aaa;box-shadow:none}
  61%,91%{background:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 70%,transparent)}
  100%{background:#aaa;box-shadow:none}
}

.infra-mlabel{position:absolute;left:4%;top:262px;z-index:20}
.infra-mlabel--right{left:auto;right:4%;text-align:right}
.infra-mlabel small{display:block;margin-bottom:5px;color:var(--text-muted);font-size:13px;line-height:1.3;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.infra-mlabel strong{display:block;color:var(--text);font-size:23px;line-height:1.2;font-weight:600}
.infra-mlabel p{margin-top:5px;color:var(--text-muted);font-size:14px;line-height:1.35}

/* ---------- Connection paths (pulse runs from the RTU out to each machine) ---------- */
.infra-conn{position:absolute;top:168px;height:2px;z-index:6;background:var(--line);overflow:hidden}
.infra-conn--left{left:22%;width:26%}
.infra-conn--right{right:22%;width:26%}
.infra-conn::after{content:"";position:absolute;top:0;width:90px;height:100%;opacity:0;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-on-dark),transparent);
  animation:infraPulse 10s linear infinite}
.infra-conn--left::after{right:-100px;animation-name:infraPulseL}
.infra-conn--right::after{left:-100px}
@keyframes infraPulse{
  0%,54%{opacity:0}
  58%{opacity:1}
  70%{transform:translateX(330px);opacity:1}
  72%,100%{opacity:0}
}
@keyframes infraPulseL{
  0%,54%{opacity:0}
  58%{opacity:1}
  70%{transform:translateX(-330px);opacity:1}
  72%,100%{opacity:0}
}

/* ---------- Automation zone (320 x 290, centred) ---------- */
.infra-zone{position:absolute;left:50%;top:66px;width:320px;height:290px;transform:translateX(-50%);z-index:20}

.infra-iface{position:absolute;left:50%;top:0;width:290px;height:44px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:10px;z-index:50}
.infra-socket{position:relative;width:28px;height:27px;flex:none;border:2px solid #4e4e4e;border-radius:4px;background:#fff}
.infra-socket::before,.infra-socket::after{content:"";position:absolute;left:7px;width:3px;height:5px;background:#555}
.infra-socket::before{top:4px}
.infra-socket::after{bottom:4px}
.infra-gap{position:relative;width:60px;height:28px;flex:none}
.infra-gap::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.infra-plug{position:absolute;right:0;top:4px;width:27px;height:20px;border-radius:3px;background:#303030;animation:infraPlug 10s cubic-bezier(.65,.05,.2,1) infinite}
.infra-plug::before{content:"";position:absolute;left:-9px;top:5px;width:10px;height:9px;background:#303030}
@keyframes infraPlug{
  0%,32%{right:0}
  44%,92%{right:42px}
  100%{right:0}
}
.infra-status{flex:none}
.infra-status small{display:block;margin-bottom:3px;color:var(--text-muted);font-size:13px;line-height:1.3;font-weight:600;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.infra-status strong{display:block;color:var(--text-muted);font-size:14px;line-height:1.3;font-weight:600;white-space:nowrap;animation:infraStatus 10s ease-in-out infinite}
@keyframes infraStatus{
  0%,39%{color:var(--text-muted)}
  45%,92%{color:var(--accent-hover)}
  100%{color:var(--text-muted)}
}

.infra-badge{position:absolute;left:50%;top:52px;transform:translateX(-50%) translateY(4px);display:flex;align-items:center;gap:8px;padding:6px 12px;
  border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:100px;background:var(--accent-tint);color:var(--accent-hover);
  font-size:13px;line-height:1.2;font-weight:600;letter-spacing:.12em;white-space:nowrap;text-transform:uppercase;opacity:0;animation:infraBadge 10s ease-in-out infinite}
.infra-badge::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--accent);box-shadow:0 0 7px color-mix(in srgb,var(--accent) 50%,transparent)}
@keyframes infraBadge{
  0%,42%{opacity:0;transform:translateX(-50%) translateY(4px)}
  48%,91%{opacity:1;transform:translateX(-50%) translateY(0)}
  96%,100%{opacity:0;transform:translateX(-50%) translateY(-3px)}
}

/* ---------- Docking bay: its label sits on the bottom border, clear above the stepper ---------- */
.infra-bay{position:absolute;left:50%;bottom:0;width:190px;height:62px;transform:translateX(-50%);border:1px dashed var(--line);border-radius:8px;
  background:color-mix(in srgb,var(--accent) 2%,transparent);animation:infraBay 10s ease-in-out infinite}
@keyframes infraBay{
  0%,20%{border-color:var(--line);background:transparent}
  25%,42%{border-color:color-mix(in srgb,var(--accent) 65%,transparent);background:color-mix(in srgb,var(--accent) 5%,transparent)}
  48%,92%{border-color:color-mix(in srgb,var(--accent) 28%,transparent);background:color-mix(in srgb,var(--accent) 2%,transparent)}
  100%{border-color:var(--line);background:transparent}
}
.infra-corner{position:absolute;width:10px;height:10px;border-color:var(--accent);border-style:solid;opacity:.4}
.infra-corner--tl{left:6px;top:6px;border-width:1px 0 0 1px}
.infra-corner--tr{right:6px;top:6px;border-width:1px 1px 0 0}
.infra-corner--bl{left:6px;bottom:6px;border-width:0 0 1px 1px}
.infra-corner--br{right:6px;bottom:6px;border-width:0 1px 1px 0}
.infra-dock-label{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);padding:3px 9px;background:var(--bg);color:var(--text-muted);
  font-size:13px;line-height:1.2;font-weight:600;letter-spacing:.14em;white-space:nowrap;text-transform:uppercase}
.infra-dock-label span{color:var(--accent-hover)}

/* ---------- RTU (neutral greys: drawing; scale .86, was .78) ---------- */
.infra-rtu{position:absolute;left:50%;bottom:26px;width:160px;height:220px;transform:translateX(220px) scale(.86);transform-origin:bottom center;opacity:0;
  animation:infraDock 10s cubic-bezier(.65,.05,.2,1) infinite}
@keyframes infraDock{
  0%,10%{transform:translateX(220px) scale(.86);opacity:0}
  14%{opacity:1}
  30%,92%{transform:translateX(-80px) scale(.86);opacity:1}
  96%,100%{transform:translateX(220px) scale(.86);opacity:0}
}
.infra-platform{position:absolute;left:7px;bottom:4px;width:145px;height:28px;border:2px solid #474747;border-radius:4px;background:linear-gradient(#f0f0ef,#d8d8d6)}
/* 15px design x .86 = 12.9px before the stage scale */
.infra-platform::before{content:"SUAS";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#555;font-size:15px;line-height:1;font-weight:700;letter-spacing:.16em}
.infra-wheel{position:absolute;bottom:-7px;width:15px;height:15px;border:3px solid #303030;border-radius:50%;background:#aaa}
.infra-wheel--one{left:20px}
.infra-wheel--two{right:20px}
.infra-robot-base{position:absolute;left:49px;bottom:30px;width:58px;height:31px;border-radius:8px 8px 3px 3px;background:#303030}
.infra-robot-lower{position:absolute;left:66px;bottom:55px;width:24px;height:72px;border:2px solid #4c5157;border-radius:13px;background:#e9eaeb;transform:rotate(-12deg);transform-origin:bottom center}
.infra-robot-joint{position:absolute;left:54px;bottom:114px;width:38px;height:38px;border:7px solid #303030;border-radius:50%;background:#fff}
.infra-robot-upper{position:absolute;left:85px;bottom:130px;width:80px;height:22px;border:2px solid #4c5157;border-radius:12px;background:#e9eaeb;transform-origin:left center;
  animation:infraArm 10s ease-in-out infinite}
.infra-robot-upper::after{content:"";position:absolute;right:-12px;top:-6px;width:28px;height:28px;border:6px solid #303030;border-radius:50%;background:#fff}
.infra-gripper{position:absolute;right:-31px;top:7px;width:21px;height:7px;background:#303030}
.infra-gripper::before,.infra-gripper::after{content:"";position:absolute;right:-4px;width:4px;height:12px;background:#303030}
.infra-gripper::before{top:-7px;transform:rotate(-20deg)}
.infra-gripper::after{bottom:-7px;transform:rotate(20deg)}
@keyframes infraArm{
  0%,62%{transform:rotate(-10deg)}
  70%{transform:rotate(-28deg)}
  78%{transform:rotate(10deg)}
  86%{transform:rotate(-22deg)}
  92%,100%{transform:rotate(-10deg)}
}

/* ---------- Ready message (shows after the centre title fades) ---------- */
.infra-ready{position:absolute;left:50%;top:12px;z-index:30;transform:translateX(-50%) translateY(5px);text-align:center;white-space:nowrap;opacity:0;pointer-events:none;
  animation:infraReady 10s ease-in-out infinite}
.infra-ready small{display:block;margin-bottom:3px;color:var(--accent-hover);font-size:13px;line-height:1.3;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
.infra-ready strong{display:block;color:var(--text);font-size:22px;line-height:1.15;font-weight:600;letter-spacing:-.02em}
@keyframes infraReady{
  0%,59%{opacity:0;transform:translateX(-50%) translateY(5px)}
  65%,91%{opacity:1;transform:translateX(-50%) translateY(0)}
  96%,100%{opacity:0;transform:translateX(-50%) translateY(-3px)}
}

/* ---------- Three steps (full-width row under the dock) ---------- */
.infra-steps{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:flex-start;z-index:60}
.infra-step{position:relative;min-width:172px;text-align:center}
.infra-step-num{width:34px;height:34px;margin:0 auto 9px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;
  background:var(--bg);color:var(--text-muted);font-size:14px;line-height:1;font-weight:600}
.infra-step-text{display:block;color:var(--text-muted);font-size:13px;line-height:1.3;font-weight:600;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
.infra-step:not(:last-child)::after{content:"";position:absolute;left:calc(50% + 27px);top:17px;width:calc(100% - 54px);height:1px;background:var(--line)}
.infra-step--1 .infra-step-num{animation:infraStep1 10s infinite}
.infra-step--1 .infra-step-text{animation:infraStep1Text 10s infinite}
.infra-step--2 .infra-step-num{animation:infraStep2 10s infinite}
.infra-step--2 .infra-step-text{animation:infraStep2Text 10s infinite}
.infra-step--3 .infra-step-num{animation:infraStep3 10s infinite}
.infra-step--3 .infra-step-text{animation:infraStep3Text 10s infinite}
/* active number: white on --accent-hover (5.6:1) */
@keyframes infraStep1{
  0%,30%{color:#fff;border-color:var(--accent-hover);background:var(--accent-hover)}
  37%,100%{color:var(--text-muted);border-color:var(--line);background:var(--bg)}
}
@keyframes infraStep1Text{
  0%,30%{color:var(--accent-hover)}
  37%,100%{color:var(--text-muted)}
}
@keyframes infraStep2{
  0%,32%{color:var(--text-muted);background:var(--bg)}
  39%,58%{color:#fff;border-color:var(--accent-hover);background:var(--accent-hover)}
  65%,100%{color:var(--text-muted);background:var(--bg)}
}
@keyframes infraStep2Text{
  0%,32%{color:var(--text-muted)}
  39%,58%{color:var(--accent-hover)}
  65%,100%{color:var(--text-muted)}
}
@keyframes infraStep3{
  0%,60%{color:var(--text-muted);background:var(--bg)}
  67%,92%{color:#fff;border-color:var(--accent-hover);background:var(--accent-hover)}
  100%{color:var(--text-muted);background:var(--bg)}
}
@keyframes infraStep3Text{
  0%,60%{color:var(--text-muted)}
  67%,92%{color:var(--accent-hover)}
  100%{color:var(--text-muted)}
}

/* ---------- Stage footer ---------- */
.infra-foot{min-height:78px;padding:12px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line);background:var(--bg-alt)}
.infra-foot-main{display:grid;color:var(--text-muted);font-size:15px;line-height:1.35}
.infra-foot-main strong{color:var(--text);font-weight:700}
.infra-foot-main span{color:var(--accent-hover);font-weight:600}
.infra-features{display:flex;align-items:center;gap:18px}
.infra-feature{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:14px;line-height:1.3;font-weight:600;white-space:nowrap}
.infra-check{width:22px;height:22px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent-tint);color:var(--accent-hover);font-size:13px;font-weight:700}

/* ---------- Bottom message ---------- */
.infra-note{margin-top:17px;text-align:center;color:var(--text-muted);font-size:12px}
.infra-note strong{color:var(--text)}

@media (max-width:700px){
  .infra-section{padding:55px 0 60px}
  .infra-head{margin-bottom:30px}
}

/* ---------- Pause while off-screen (bottom-sections.js) ---------- */
.infra-is-off .infra-stage *,
.infra-is-off .infra-stage *::before,
.infra-is-off .infra-stage *::after{animation-play-state:paused}

/* ---------- Reduced motion: static "ready to produce" end state ---------- */
@media (prefers-reduced-motion:reduce){
  .infra-area--center{opacity:0}
  .infra-light{background:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 70%,transparent)}
  .infra-plug{right:42px}
  .infra-status strong{color:var(--accent-hover)}
  .infra-badge{opacity:1;transform:translateX(-50%)}
  .infra-bay{border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
  .infra-rtu{opacity:1;transform:translateX(-80px) scale(.86)}
  .infra-robot-upper{transform:rotate(-10deg)}
  .infra-ready{opacity:1;transform:translateX(-50%)}
  .infra-step--3 .infra-step-num{color:#fff;border-color:var(--accent-hover);background:var(--accent-hover)}
  .infra-step--3 .infra-step-text{color:var(--accent-hover)}
}

/* ==========================================================
   #impact — Real business impact
   Source: reference/real_business-impact.html
   Per-card colour lives in --card-accent (decoration) and
   --card-accent-text (labels, 4.5:1+ on --bg):
   increases = --green, decreases = --accent.
   bottom-sections.js reveals the cards in a staggered sequence
   and pauses the looping animations while off-screen.
   ========================================================== */
.impact-section{
  overflow:hidden;
  padding:clamp(90px,9vw,145px) 0 clamp(100px,10vw,150px);
  background:var(--bg);
}
/* ambient glow */
.impact-section::before{
  content:"";position:absolute;width:900px;max-width:100%;height:500px;left:50%;top:35%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--green) 3.5%,transparent),transparent 70%);
}
/* vertical guide lines */
.impact-section::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:linear-gradient(90deg,
    transparent 0%,transparent 19.9%,color-mix(in srgb,var(--text) 1.8%,transparent) 20%,transparent 20.1%,
    transparent 39.9%,color-mix(in srgb,var(--text) 1.8%,transparent) 40%,transparent 40.1%,
    transparent 59.9%,color-mix(in srgb,var(--text) 1.8%,transparent) 60%,transparent 60.1%,
    transparent 79.9%,color-mix(in srgb,var(--text) 1.8%,transparent) 80%,transparent 80.1%);
}
.impact-section>.wrap{position:relative;z-index:2}

/* ---------- Header ---------- */
.impact-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.65fr);gap:60px;align-items:end;margin-bottom:clamp(50px,6vw,80px)}
.impact-head-left{max-width:900px}
.impact-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.impact-eyebrow::before{content:"";width:28px;height:1px;background:var(--text)}
.impact-head .lede{max-width:440px;margin:0;padding-bottom:5px;font-size:clamp(16px,1.2vw,19px);line-height:1.65}

/* ---------- Cards ---------- */
.impact-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.impact-card{
  --card-accent:var(--green);
  --card-accent-text:color-mix(in srgb,var(--green) 55%,var(--text));
  --card-soft:color-mix(in srgb,var(--card-accent) 7.5%,transparent);
  position:relative;min-height:410px;padding:23px 23px 22px;display:flex;flex-direction:column;
  background:color-mix(in srgb,var(--bg) 82%,transparent);border:1px solid var(--line);overflow:hidden;
  /* transform = the scroll reveal; scale = the shared hover grow (home.css) */
  transition:opacity .65s ease,transform .6s cubic-bezier(.2,.7,.2,1),background .35s ease,border-color .35s ease,
    box-shadow var(--hover-dur,.22s) ease,scale var(--hover-dur,.22s) cubic-bezier(.2,.7,.2,1);
}
.impact-card--down{
  --card-accent:var(--accent);
  --card-accent-text:var(--accent-hover);
}
/* staggered reveal (hidden only when JS can reveal it) */
.js .impact-card{opacity:0;transform:translateY(26px)}
.js .impact-card.impact-is-visible{opacity:1;transform:translateY(0)}
/* hover grow: shared "scale" rule in home.css (replaces the old translateY(-6px) lift) */
.impact-card:hover{background:var(--bg);border-color:color-mix(in srgb,var(--text) 16%,transparent);box-shadow:0 20px 50px color-mix(in srgb,var(--text) 5.5%,transparent)}
/* bottom line draws in on reveal */
.impact-card::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--card-accent);transition:width .9s cubic-bezier(.2,.7,.2,1) .25s}
.impact-card.impact-is-visible::after{width:100%}

.impact-card-top{display:flex;align-items:center;justify-content:space-between}
.impact-num{font-size:10px;font-weight:600;letter-spacing:.15em;color:var(--text-muted)}
.impact-dir{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:var(--card-soft);color:var(--card-accent-text);font-size:17px;transition:transform .3s ease}
.impact-card:hover .impact-dir{transform:translate(2px,-2px)}
.impact-card--down:hover .impact-dir{transform:translate(2px,2px)}

/* ---------- Visual area ---------- */
.impact-visual{position:relative;height:160px;margin:23px 0 19px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.impact-vlabel{font-size:8px;font-weight:600;letter-spacing:.14em;color:var(--text-muted);text-transform:uppercase}

/* 01 productivity: parts flow through three machines */
.impact-prod{position:relative;width:92%;height:100px}
.impact-prod .impact-vlabel{position:absolute;top:3px;left:0}
.impact-conveyor{position:absolute;left:0;right:0;bottom:24px;height:1px;background:color-mix(in srgb,var(--text) 15%,transparent)}
.impact-conveyor::before,.impact-conveyor::after{content:"";position:absolute;bottom:-4px;width:9px;height:9px;border:1px solid color-mix(in srgb,var(--text) 15%,transparent);border-radius:50%;background:var(--bg)}
.impact-conveyor::before{left:0}
.impact-conveyor::after{right:0}
.impact-machine{position:absolute;bottom:28px;width:31px;height:37px;background:var(--bg);border:1px solid color-mix(in srgb,var(--text) 15%,transparent)}
.impact-machine::before{content:"";position:absolute;top:7px;left:7px;width:15px;height:8px;background:var(--card-soft);border:1px solid color-mix(in srgb,var(--card-accent) 18%,transparent)}
.impact-machine::after{content:"";position:absolute;left:7px;bottom:6px;width:16px;height:1px;background:color-mix(in srgb,var(--text) 15%,transparent)}
.impact-machine--1{left:7%}
.impact-machine--2{left:43%}
.impact-machine--3{right:7%}
.impact-part{position:absolute;left:1%;bottom:19px;width:11px;height:11px;background:var(--card-accent);border-radius:2px;opacity:0}
.impact-card.impact-is-visible .impact-part{animation:impactPartFlow 3.6s linear infinite}
.impact-card.impact-is-visible .impact-part--2{animation-delay:1.2s}
.impact-card.impact-is-visible .impact-part--3{animation-delay:2.4s}
@keyframes impactPartFlow{
  0%{left:1%;opacity:0}
  7%{opacity:1}
  92%{opacity:1}
  100%{left:95%;opacity:0}
}

/* 02 utilization: gauge */
.impact-gauge{position:relative;width:126px;height:126px}
.impact-gauge svg{width:126px;height:126px;transform:rotate(-90deg)}
.impact-gauge-bg{fill:none;stroke:color-mix(in srgb,var(--text) 7%,transparent);stroke-width:6}
.impact-gauge-val{fill:none;stroke:var(--card-accent);stroke-width:6;stroke-linecap:round;stroke-dasharray:302;stroke-dashoffset:302}
.impact-card.impact-is-visible .impact-gauge-val{animation:impactGauge 1.7s cubic-bezier(.2,.7,.2,1) .3s forwards}
@keyframes impactGauge{to{stroke-dashoffset:43}}
.impact-gauge-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.impact-gauge-num{font:700 27px/1 var(--f-display);letter-spacing:-.02em;color:var(--text)}
.impact-gauge-text .impact-vlabel{margin-top:3px;letter-spacing:.12em}

/* 03 consistency: variable bars become even */
.impact-cons{width:91%}
.impact-cons-head{display:flex;justify-content:space-between;margin-bottom:15px}
.impact-cons-head .impact-vlabel{letter-spacing:.13em}
.impact-cons-row{display:grid;grid-template-columns:1fr 24px 1fr;align-items:center;gap:4px;margin:9px 0}
.impact-var{height:5px;background:color-mix(in srgb,var(--text) 12%,transparent);border-radius:20px}
.impact-var--1{width:62%}
.impact-var--2{width:87%}
.impact-var--3{width:48%}
.impact-var--4{width:74%}
.impact-cons-arrow{text-align:center;font-size:10px;color:var(--text-muted)}
.impact-even{width:0;height:5px;margin-left:auto;background:var(--card-accent);border-radius:20px}
.impact-card.impact-is-visible .impact-even{animation:impactEven .9s ease forwards}
.impact-card.impact-is-visible .impact-cons-row:nth-child(3) .impact-even{animation-delay:.15s}
.impact-card.impact-is-visible .impact-cons-row:nth-child(4) .impact-even{animation-delay:.3s}
.impact-card.impact-is-visible .impact-cons-row:nth-child(5) .impact-even{animation-delay:.45s}
@keyframes impactEven{to{width:82%}}

/* 04 manual dependency: person -> robot */
.impact-auto{position:relative;width:91%;display:flex;align-items:center;justify-content:space-between}
.impact-human{position:relative;width:50px;height:82px;opacity:.65}
.impact-human-head{position:absolute;top:2px;left:15px;width:18px;height:18px;border:1.5px solid var(--text-muted);border-radius:50%}
.impact-human-body{position:absolute;top:23px;left:24px;width:1.5px;height:34px;background:var(--text-muted)}
.impact-human-limb{position:absolute;left:24px;height:1.5px;background:var(--text-muted);transform-origin:left}
.impact-human-limb--a1{width:24px;top:32px;transform:rotate(28deg)}
.impact-human-limb--a2{width:24px;top:32px;transform:rotate(152deg)}
.impact-human-limb--l1{width:27px;top:56px;transform:rotate(58deg)}
.impact-human-limb--l2{width:27px;top:56px;transform:rotate(122deg)}
.impact-trans{position:relative;flex:1;height:1px;margin:0 14px;background:color-mix(in srgb,var(--text) 12%,transparent)}
.impact-trans::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid var(--text-muted);border-right:1px solid var(--text-muted);transform:rotate(45deg)}
.impact-robot{position:relative;width:64px;height:85px}
.impact-robot-base{position:absolute;left:14px;bottom:4px;width:37px;height:9px;border:1.5px solid var(--card-accent)}
.impact-robot-joint{position:absolute;left:27px;bottom:22px;width:13px;height:13px;border:1.5px solid var(--card-accent);border-radius:50%;background:var(--bg)}
.impact-robot-arm1,.impact-robot-arm2{position:absolute;height:4px;background:var(--card-accent);border-radius:10px;transform-origin:left}
.impact-robot-arm1{left:32px;bottom:37px;width:34px;transform:rotate(-55deg)}
.impact-robot-arm2{left:49px;bottom:65px;width:28px;transform:rotate(22deg)}
.impact-card.impact-is-visible .impact-robot-arm1{animation:impactArm1 3s ease-in-out infinite}
.impact-card.impact-is-visible .impact-robot-arm2{animation:impactArm2 3s ease-in-out infinite}
@keyframes impactArm1{0%,100%{transform:rotate(-55deg)}50%{transform:rotate(-38deg)}}
@keyframes impactArm2{0%,100%{transform:rotate(22deg)}50%{transform:rotate(-8deg)}}
.impact-auto .impact-vlabel{position:absolute;left:0;right:0;bottom:-22px;text-align:center;letter-spacing:.12em}

/* 05 downtime: broken timeline vs continuous */
.impact-time{width:91%}
.impact-time .impact-vlabel{display:block;margin-bottom:8px;letter-spacing:.12em}
.impact-old{display:flex;gap:4px;height:7px;margin-bottom:25px}
.impact-run{height:100%;background:color-mix(in srgb,var(--text) 16%,transparent)}
.impact-stop{height:100%;background:color-mix(in srgb,var(--text) 5.5%,transparent)}
.impact-run--1{width:24%}.impact-stop--1{width:8%}
.impact-run--2{width:18%}.impact-stop--2{width:11%}
.impact-run--3{width:27%}.impact-stop--3{width:7%}
.impact-conn{position:relative;width:100%;height:7px;background:color-mix(in srgb,var(--text) 6%,transparent);overflow:hidden}
.impact-conn-bar{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--card-accent)}
.impact-card.impact-is-visible .impact-conn-bar{animation:impactUptime 1.6s cubic-bezier(.2,.7,.2,1) .35s forwards}
@keyframes impactUptime{to{width:95%}}
.impact-online{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:8px;font-weight:600;letter-spacing:.1em;color:var(--card-accent-text);text-transform:uppercase}
.impact-online-dot{width:5px;height:5px;border-radius:50%;background:var(--card-accent);animation:impactBlink 1.7s ease infinite}
@keyframes impactBlink{50%{opacity:.3}}

/* ---------- Card text ---------- */
.impact-card-body{margin-top:auto}
.impact-card-title{min-height:51px;font:600 clamp(17px,1.3vw,20px)/1.23 var(--f-display);letter-spacing:-.01em;color:var(--text)}
.impact-divider{height:1px;margin:18px 0 15px;background:var(--line)}
.impact-result{display:flex;align-items:center;justify-content:space-between}
.impact-result-label{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--card-accent-text)}
.impact-result-arrow{font-size:21px;color:var(--card-accent-text);transition:transform .3s ease}
.impact-card:hover .impact-result-arrow{transform:translate(3px,-3px)}
.impact-card--down:hover .impact-result-arrow{transform:translate(3px,3px)}

/* ---------- Bottom line ---------- */
.impact-foot{display:flex;justify-content:space-between;align-items:center;margin-top:29px;padding-top:2px;color:var(--text-muted);font-size:10px;letter-spacing:.03em}
.impact-foot-left{display:flex;align-items:center;gap:8px}
.impact-foot-dot{width:4px;height:4px;border-radius:50%;background:var(--green)}

/* ---------- Pause looping animations while off-screen ---------- */
/* (must out-rank .impact-card.impact-is-visible .x, whose animation shorthand resets play-state) */
.impact-section.impact-is-off .impact-card .impact-part,
.impact-section.impact-is-off .impact-card .impact-robot-arm1,
.impact-section.impact-is-off .impact-card .impact-robot-arm2,
.impact-section.impact-is-off .impact-card .impact-online-dot{animation-play-state:paused}

/* ---------- Responsive ---------- */
@media (max-width:1250px){
  .impact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .impact-head{grid-template-columns:1fr;gap:25px}
  .impact-head .lede{max-width:580px}
  .impact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .impact-section{padding:80px 0 95px}
  .impact-grid{grid-template-columns:1fr}
  .impact-card{min-height:390px}
  .impact-foot{align-items:flex-start;gap:20px;flex-direction:column}
}

/* ---------- Reduced motion: static end state ---------- */
@media (prefers-reduced-motion:reduce){
  .js .impact-card{opacity:1;transform:none}
  .impact-card::after{width:100%}
  .impact-part{opacity:1}
  .impact-part--1{left:18%}
  .impact-part--2{left:50%}
  .impact-part--3{left:80%}
  .impact-gauge-val{stroke-dashoffset:43}
  .impact-even{width:82%}
  .impact-conn-bar{width:95%}
}

/* ==========================================================
   #scale — Start with one. Scale without limits.
   Reference: reference/SUAS_Scalability_No_Interactive_Label.html
   A three.js scene (scale-3d.js) fills the section on desktop. A dark
   fade on the left carries the copy column (title, intro, then the
   current stage); the live-metrics panel sits on the right and the six
   stages run along one open timeline at the bottom (no panel, no
   "interactive" hint). At 900px and below everything stacks.
   bottom-sections.js wires the six stage buttons and loads
   three.js + scale-3d.js only when the section is near.
   ========================================================== */
.scale-section{
  position:relative;overflow:hidden;padding:0;
  height:max(620px,min(100svh,900px));
  background:var(--dark);color:var(--text-on-dark);
}

/* ---------- 3D stage (canvas + metrics panel) ---------- */
.scale-stage{position:absolute;inset:0}
.scale-canvas{position:absolute;inset:0}
.scale-canvas canvas{display:block;width:100%;height:100%}
/* dark fade behind the copy column, plus a soft vignette */
.scale-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse at 70% 45%,transparent 35%,color-mix(in srgb,var(--ink) 10%,transparent) 88%),
    linear-gradient(90deg,var(--dark) 0%,var(--dark) 22%,color-mix(in srgb,var(--dark) 88%,transparent) 30%,color-mix(in srgb,var(--dark) 35%,transparent) 40%,transparent 48%)}

/* ---------- Copy column: header at the top, current stage below ---------- */
.scale-copy{position:absolute;z-index:4;left:4.5%;top:clamp(28px,6%,56px);bottom:clamp(118px,17%,160px);width:min(38%,520px);
  display:flex;flex-direction:column;pointer-events:none}
.scale-eyebrow{display:flex;align-items:center;gap:12px;color:var(--accent-on-dark)}
.scale-eyebrow::before{content:"";width:32px;height:1px;background:linear-gradient(90deg,var(--accent-on-dark),color-mix(in srgb,var(--accent-on-dark) 25%,transparent))}
.scale-hl{color:var(--accent-on-dark)}
.scale-intro{max-width:360px;margin:clamp(10px,1.8vh,16px) 0 0;color:var(--text-on-dark-muted);font-size:clamp(13px,.95vw,15px);line-height:1.8}

/* ---------- Stage text (aria-live), with an orange rule on the left ---------- */
.scale-info{margin:auto 0;max-width:400px;padding-left:19px;border-left:1px solid color-mix(in srgb,var(--accent-on-dark) 46%,transparent)}
.scale-count{margin:0;color:var(--accent-on-dark);font-size:10px;font-weight:700;letter-spacing:.25em}
.scale-title{margin:clamp(8px,1.4vh,13px) 0;font:600 clamp(26px,2.5vw,44px)/1.1 var(--f-display);letter-spacing:-.02em;color:var(--text-on-dark)}
.scale-text{max-width:350px;margin:0;color:var(--text-on-dark-muted);font-size:clamp(13px,.9vw,15px);line-height:1.75}
.scale-pill{display:inline-flex;align-items:center;gap:9px;margin:clamp(12px,2.2vh,20px) 0 0;padding:10px 15px;border:1px solid var(--line-inv);border-radius:3px;
  background:color-mix(in srgb,var(--ink) 82%,transparent);color:var(--text-on-dark);font-size:9px;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
.scale-pill::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--accent-on-dark);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-on-dark) 10%,transparent)}

/* ---------- Live metrics panel ---------- */
.scale-hud{position:absolute;right:4%;top:25%;width:205px;padding:18px 20px;z-index:4;pointer-events:none;
  border:1px solid var(--line-inv);border-top:2px solid color-mix(in srgb,var(--accent-on-dark) 70%,transparent);border-radius:4px;
  background:color-mix(in srgb,var(--ink) 90%,transparent);box-shadow:0 18px 50px rgba(0,0,0,.25);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease}
.scale-hud.scale-is-shown{opacity:1;transform:none}
.scale-hud-title{margin:0 0 10px;color:var(--accent-on-dark);font-size:10px;font-weight:600;letter-spacing:.17em}
.scale-metric{display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid var(--line-inv);color:var(--text-on-dark-muted);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.scale-metric strong{color:var(--text-on-dark);font-weight:600;letter-spacing:0}

/* ---------- Six-stage timeline: one continuous line, six aligned dots ---------- */
.scale-nav{position:absolute;left:4.5%;right:4.5%;bottom:3.1%;z-index:5}
.scale-nav-label{margin:0 0 20px;color:var(--text-on-dark-muted);font-size:9px;font-weight:600;letter-spacing:.19em;text-transform:uppercase}
.scale-buttons{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.scale-buttons::before{content:"";position:absolute;left:8.333%;right:8.333%;top:6px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent-on-dark) 65%,transparent),color-mix(in srgb,var(--text-on-dark-muted) 30%,transparent))}
.scale-btn{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;min-height:63px;padding:0 5px;border:0;background:transparent;
  color:var(--text-on-dark-muted);font:inherit;text-align:center;cursor:pointer;transition:color .2s}
.scale-btn:focus-visible{outline:2px solid var(--accent-on-dark);outline-offset:4px;border-radius:4px}
.scale-dot{position:relative;z-index:1;display:block;flex:none;width:13px;height:13px;margin:0 0 10px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--text-on-dark-muted) 70%,var(--dark));background:var(--dark);transition:background .25s,border-color .25s,box-shadow .25s}
.scale-num{display:block;margin:0 0 4px;color:var(--text-on-dark-muted);font-size:9px;font-weight:600;letter-spacing:.14em}
.scale-name{display:block;font-size:clamp(11px,.85vw,12px);font-weight:500;line-height:1.3}
.scale-btn:hover{color:var(--text-on-dark)}
.scale-btn:hover .scale-dot{border-color:var(--accent-on-dark)}
.scale-btn[aria-pressed="true"]{color:var(--text-on-dark)}
.scale-btn[aria-pressed="true"] .scale-dot{background:var(--accent-on-dark);border-color:var(--accent-on-dark);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--accent-on-dark) 13%,transparent),0 0 17px color-mix(in srgb,var(--accent-on-dark) 35%,transparent)}
.scale-btn[aria-pressed="true"] .scale-num{color:var(--accent-on-dark)}

/* ---------- Fallback list (no WebGL / three.js failed / no JS) ---------- */
.scale-fallback{display:none}
.scale-fb-title{display:block;color:var(--text-on-dark);font:600 1.05rem/1.25 var(--f-display)}
.scale-fb-text{display:block;margin-top:4px;color:var(--text-on-dark-muted);font-size:.92rem;line-height:1.55}
.scale-fallback li{padding:14px 0;border-top:1px solid var(--line-inv);counter-increment:scale-fb}
.scale-fallback li::before{content:counter(scale-fb,decimal-leading-zero) " / 06";display:block;margin-bottom:6px;color:var(--accent-on-dark);font-size:10px;font-weight:600;letter-spacing:2px}

.scale-is-fallback.scale-section,
html:not(.js) .scale-section{height:auto;padding:clamp(56px,7vw,96px) 0}
.scale-is-fallback .scale-stage,.scale-is-fallback .scale-info,.scale-is-fallback .scale-nav,
html:not(.js) .scale-stage,html:not(.js) .scale-info,html:not(.js) .scale-nav{display:none}
.scale-is-fallback .scale-copy,
html:not(.js) .scale-copy{position:static;display:block;width:auto;margin:0 5%}
.scale-is-fallback .scale-fallback,
html:not(.js) .scale-fallback{display:block;margin:40px 5% 0;max-width:760px;counter-reset:scale-fb}

/* ---------- Responsive ---------- */
/* stacked: header, canvas, stage text, 3 x 2 stage buttons */
@media (max-width:900px){
  .scale-section{height:auto;min-height:620px;display:flex;flex-direction:column;padding:56px 0 48px}
  .scale-copy{display:contents}
  .scale-head,.scale-info,.scale-nav{position:static;margin-inline:5%;pointer-events:auto}
  .scale-head{order:1}
  .scale-intro{max-width:520px}
  .scale-stage{order:2;position:relative;inset:auto;height:clamp(320px,62vw,520px);margin-top:28px}
  .scale-stage::after{background:radial-gradient(ellipse at 50% 45%,transparent 35%,color-mix(in srgb,var(--ink) 18%,transparent) 90%)}
  .scale-info{order:3;margin-top:28px;max-width:560px}
  .scale-title{font-size:30px}
  .scale-text{max-width:560px}
  .scale-hud{top:16px;right:16px;width:200px}
  .scale-nav{order:4;margin-top:32px}
  .scale-buttons{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}
  .scale-buttons::before{display:none}
}
@media (max-width:600px){
  .scale-hud{display:none}
}

/* ==========================================================
   One section per window (desktop / tall-enough windows only).
   Matches the block in home.css; these rules live here because
   they must come after the section rules above.
   ========================================================== */
@media (min-width:901px) and (min-height:620px){
  .impact-section{padding-top:var(--pad-top);padding-bottom:var(--pad-bot)}

  /* #infra: two-column layout and spacing live in pages.css (product page only) */

  /* #impact */
  .impact-head{margin-bottom:var(--gap-v)}

  /* #scale: exactly one window; the canvas follows via ResizeObserver */
  .scale-section{height:100svh;min-height:620px}
  .scale-copy{top:var(--pad-top)}
}