/* Homepage motion section: 3D wireframe + scroll-built framing elevation. Scoped to .mx */
.mx{--mx-wood:#D9B27C;--mx-wood-dk:#B98F57;--mx-osb:#C9A46A;--mx-shingle:#3A3633;--mx-blue:#7FB3D5;--mx-line:rgba(255,255,255,.12);position:relative;padding-block:72px 24px;background:var(--bg);color:var(--text);overflow:clip}
.mx .mx-mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.mx .mx-o{color:var(--brand-text)}
.mx-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;margin-bottom:24px}
.mx-intro h2{font-size:clamp(32px,4.6vw,54px);line-height:1.04;margin:10px 0 14px}
.mx-intro p{color:var(--text-2);max-width:56ch;margin:0}
.mx-3d{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:16px;border:1px solid var(--mx-line);background:radial-gradient(circle at 50% 58%,rgba(245,130,51,.14),transparent 62%),var(--bg-2)}
.mx-3d canvas{width:100%;height:100%;display:block;cursor:grab}
.mx-3d .mx-hud{position:absolute;left:14px;bottom:10px;font-size:11px}
.mx-3d .mx-hint{position:absolute;right:14px;top:10px;font-size:11px}
.mx-build{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px}
.mx-stage{position:sticky;top:96px;height:min(76vh,620px);align-self:start;grid-column:2;grid-row:1;background:var(--bg-2);border:1px solid var(--mx-line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.mx-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--mx-line)}
.mx-pct{font-family:var(--font-mono);font-size:13px;color:var(--brand-text);font-variant-numeric:tabular-nums}
.mx-meter{height:3px;background:var(--mx-line)}
.mx-meter i{display:block;height:100%;width:0;background:var(--brand);transition:width .15s linear}
.mx-stage svg{flex:1;width:100%;min-height:0;display:block}
.mx-foot{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--mx-line)}
.mx-foot div{padding:9px 14px;border-right:1px solid var(--mx-line)}
.mx-foot div:last-child{border-right:0}
.mx-foot b{display:block;font-family:var(--font-mono);font-size:17px;font-variant-numeric:tabular-nums;color:var(--text)}
.mx-steps{grid-column:1;grid-row:1;display:flex;flex-direction:column}
.mx-step{min-height:44vh;display:flex;flex-direction:column;justify-content:center;gap:12px;padding-block:20px;opacity:.4;transition:opacity .4s}
.mx-step.on{opacity:1}
.mx-step h3{font-size:clamp(26px,3.4vw,40px);line-height:1.08;margin:0}
.mx-step p,.mx-step li{color:var(--text-2);max-width:56ch}
.mx-step p{margin:0}
.mx-step ul{margin:4px 0 0;padding-left:18px}
.mx .p{opacity:0;transform:translateY(-26px);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.9,.25,1.2)}
.mx .p.in{opacity:1;transform:none}
.mx .dim{font-family:var(--font-mono);font-size:11px;fill:var(--mx-blue)}
.mx .dimline{stroke:var(--mx-blue);stroke-width:1}
@media (max-width:900px){
  .mx{padding-block:48px 12px}
  .mx-intro{grid-template-columns:minmax(0,1fr)}
  .mx-build{grid-template-columns:minmax(0,1fr);gap:0}
  .mx-stage{grid-column:1;grid-row:1;top:72px;height:42vh;z-index:5;border-radius:12px}
  .mx-foot b{font-size:14px}
  .mx-foot div{padding:7px 10px}
  .mx-steps{grid-row:2}
  .mx-step{min-height:48vh}
}
@media (prefers-reduced-motion:reduce){.mx *{transition:none!important;animation:none!important}}
/* Hero video */
.hero-video{overflow:hidden;border-radius:12px;background:#0f0f11}
.hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-video .hv-toggle{position:absolute;right:12px;bottom:12px;z-index:2;font:600 13px/1 var(--font-body);color:#fff;background:rgba(15,15,17,.72);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 14px;cursor:pointer}
.hero-video .hv-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* Technical spec rows */
.mx-spec{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--mx-line);max-width:560px}
.mx-spec li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--mx-line);font-size:15px;line-height:1.45}
.mx-spec b{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-text);padding-top:2px}
.mx-spec span{color:var(--text-2)}
.mx-check{font-size:14px;color:var(--text);border-left:3px solid var(--brand);padding:4px 0 4px 12px;margin:4px 0 0}
.mx-note{font-size:13px;color:var(--text-3);max-width:560px;margin:8px 0 24px}
.mx .co{font-family:var(--font-mono);font-size:12px;fill:var(--text)}
.mx .co-bg{fill:rgba(20,20,22,.85);stroke:var(--brand);stroke-width:1}
.mx .co-line{stroke:var(--brand);stroke-width:1.2;fill:none}
.mx .co-dot{fill:var(--brand)}
@media (max-width:520px){.mx-spec li{grid-template-columns:90px minmax(0,1fr);font-size:14px;padding:7px 0}}
.mx-intro{grid-template-columns:minmax(0,1fr)!important}
.mx-specstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:18px 0 0;border:1px solid var(--mx-line);border-radius:12px;overflow:hidden;max-width:760px}
.mx-specstrip div{padding:12px 16px;border-right:1px solid var(--mx-line)}
.mx-specstrip div:last-child{border-right:0}
.mx-specstrip dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.mx-specstrip dd{margin:4px 0 0;font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--text)}
@media (max-width:640px){.mx-specstrip{grid-template-columns:repeat(2,minmax(0,1fr))}.mx-specstrip div:nth-child(2){border-right:0}.mx-specstrip div:nth-child(-n+2){border-bottom:1px solid var(--mx-line)}}