/* ============================================================
   BEDRAUK — landing site
   ============================================================ */

:root {
  --bg: #000000;
  --surface: #0a0a0a;
  --surface-2: #141414;
  --line: #1f1f1f;
  --line-strong: #2a2a2a;
  --fg: #f5f4f0;
  --fg-dim: #a8a59c;
  --fg-mute: #6b6962;
  --accent: #f08a3b;
  --accent-dim: #f08a3b33;
  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
html { scroll-behavior: smooth; }
body {
  font-family: var(--display);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.access-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
img, svg, video { display: block; max-width: 100%; }

::selection { background: var(--accent); color: #000; }

.mono { font-family: var(--mono); letter-spacing: 0.02em; }
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
  font-weight: 400;
}
.eyebrow .n { color: var(--accent); margin-right: 10px; }

.container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
}
section { position: relative; }
.section-pad { padding: 120px 0; }
@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section-pad { padding: 80px 0; }
}

/* ---------------- nav ---------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 200ms ease, border-color 200ms ease, backdrop-filter 200ms ease;
}
.nav.scrolled {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.72);
  border-bottom-color: var(--line);
}
.nav .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 72px;
}
.wordmark {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  justify-self: start;
}
.wordmark img { width: 22px; height: 22px; object-fit: contain; }
.nav-links { display: flex; gap: 48px; justify-self: center; }
.nav-links a, .nav-right a { font-size: 15px; color: var(--fg); transition: color 150ms; }
.nav-links a:hover, .nav-right a:hover { color: var(--fg-dim); }
.nav-right { display: flex; gap: 32px; align-items: center; justify-self: end; }
@media (max-width: 900px) { .nav-links { display: none; } }

/* ---------------- hero ---------------- */
.hero { position: relative; height: 100vh; min-height: 640px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; background: #000; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-bg .shade {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.65) 75%, rgba(0,0,0,0.92) 100%);
}
.hero-center {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 32px; text-align: center; gap: 32px;
}
.hiring {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-dim);
  display: inline-flex; align-items: center; gap: 10px;
  transition: color 150ms;
}
.hiring:hover { color: var(--fg); }
.hiring .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
.hero h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(40px, 6.4vw, 108px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 1400px;
  text-wrap: balance;
}
.hero-demo-entry { display: grid; justify-items: center; gap: 10px; }
.hero-demo-cta {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  min-width: 224px;
  padding: 15px 18px 15px 20px;
  border: 1px solid rgba(245,244,240,.78);
  background: rgba(5,5,5,.68);
  color: var(--fg);
  font: 500 14px var(--display);
  letter-spacing: .01em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: color 160ms, background 160ms, border-color 160ms, transform 160ms;
}
.hero-demo-cta:hover { border-color: var(--accent); background: var(--accent); color: #050505; transform: translateY(-1px); }
.hero-demo-cta i { margin-left: auto; font-size: 20px; font-style: normal; font-weight: 300; }
.hero-demo-entry small { color: rgba(245,244,240,.56); font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }
.hero-scroll-cue {
  position: absolute;
  z-index: 3;
  bottom: 92px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  color: rgba(245,244,240,.64);
  font: 7.5px var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  transform: translateX(-50%);
  transition: color 160ms ease, transform 160ms ease;
}
.hero-scroll-cue::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
}
.hero-scroll-cue i {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid rgba(245,244,240,.28);
  color: var(--accent);
  font: 12px var(--mono);
  font-style: normal;
}
.hero-scroll-cue:hover,
.hero-scroll-cue:focus-visible { color: var(--fg); transform: translate(-50%, 2px); }
.hero-scroll-cue:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.hero-strip {
  position: absolute; left: 0; right: 0; bottom: 40px; z-index: 2;
  padding: 0 32px;
  display: flex; align-items: center; justify-content: center;
  gap: 48px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg);
}
.hero-strip img { width: 28px; height: 28px; object-fit: contain; }
@media (max-width: 720px) {
  .hero-center { gap: 24px; }
  .hero-demo-cta { min-width: 210px; padding-block: 14px; }
  .hero-strip { gap: 20px; font-size: 10px; }
  .hero-scroll-cue { bottom: 100px; width: max-content; max-width: calc(100% - 32px); font-size: 6.5px; }
}

/* ---------------- platform / grade ---------------- */
.platform {
  overflow: hidden;
  background: #050505;
  padding-top: 92px;
  padding-bottom: 96px;
}
.platform .container { position: relative; z-index: 1; }
.meta-strip {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(245,244,240,0.25);
  padding-top: 18px;
  flex-wrap: wrap; gap: 12px;
}
.meta-strip .mono, .meta-strip.mono span {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
}
/* solid CTA */
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-size: 14px; letter-spacing: 0.01em;
  font-family: var(--display);
  background: var(--fg); color: #000;
  border: 1px solid transparent;
  transition: background 150ms, color 150ms;
  cursor: pointer; white-space: nowrap;
}
.cta:hover { background: var(--accent); }
.contact .ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-demo-cta { justify-content: space-between; min-width: 210px; }
.contact-secondary-cta { border-color: rgba(245,244,240,.3); background: transparent; color: var(--fg); }
.contact-secondary-cta:hover { border-color: var(--fg); background: var(--fg); color: #000; }

/* ---------------- grade / live workbench ---------------- */
.grade-demo {
  scroll-margin-top: 88px;
  position: relative;
  padding: 32px;
  border: 1px solid rgba(245,244,240,0.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 160px),
    rgba(5,5,5,0.94);
  box-shadow: 0 36px 90px rgba(0,0,0,0.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.grade-demo::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 32px;
  width: 72px;
  height: 1px;
  background: var(--accent);
}
.grade-demo-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-strong);
}
.grade-demo-bar > .mono {
  color: var(--fg-mute);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.demo-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  align-items: end;
  gap: 64px;
  margin: 0 0 40px;
}
.demo-head h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(32px, 4.4vw, 72px);
  line-height: 1.02; letter-spacing: -0.03em;
  margin: 32px 0 0; max-width: 900px; text-wrap: balance;
}
.demo-head .lede {
  margin: 32px 0 0; max-width: 560px;
  font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55;
  color: var(--fg-dim); font-weight: 300;
}
.grade-section-foot { margin-top: 72px; }
.grade-section-foot .mono {
  opacity: 0.7;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .demo-head { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 720px) {
  .platform { padding-top: 72px; padding-bottom: 72px; }
  .grade-demo { padding: 20px; }
  .grade-demo::before { left: 20px; }
  .grade-demo-bar { align-items: flex-start; flex-direction: column; }
  .demo-head { margin-bottom: 28px; }
  .demo-head h2 { margin-top: 28px; }
  .demo-head .lede { margin-top: 18px; }
  .grade-section-foot { margin-top: 48px; }
}

/* ---------------- grade / live workbench v2 ---------------- */
.grade-demo { padding: 0; overflow: hidden; }
.grade-demo::before { left: 0; height: 2px; z-index: 3; }
.grade-demo-bar {
  display: grid;
  grid-template-columns: auto minmax(420px, 1fr) auto;
  align-items: center;
  gap: 28px;
  min-height: 88px;
  padding: 14px 24px;
}
.grade-demo-definition {
  display: grid;
  grid-template-columns: minmax(210px, .78fr) minmax(300px, 1.22fr);
  align-items: center;
  gap: 24px;
  min-width: 0;
}
.grade-demo-definition b {
  color: var(--fg);
  font: 500 22px/1.02 var(--display);
  letter-spacing: -.025em;
}
.grade-demo-definition small {
  max-width: 620px;
  color: var(--fg-dim);
  font-size: 10.5px;
  line-height: 1.45;
}
.grade-demo-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--fg-mute);
  font: 10px var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.grade-demo-status i {
  width: 6px;
  height: 6px;
  background: #94b783;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(148,183,131,.1);
}
.demo-preview {
  display: grid;
  grid-template-columns: minmax(280px, .54fr) minmax(560px, 1.55fr);
  height: 454px;
  min-height: 454px;
}
.demo-preview-copy {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.5vw, 38px);
  border-right: 1px solid var(--line-strong);
}
.demo-kicker {
  color: var(--accent);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.demo-preview-copy h2 {
  max-width: 620px;
  margin: 15px 0 12px;
  font-family: var(--display);
  font-size: clamp(35px, 3vw, 48px);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .98;
}
.demo-preview-copy > p {
  max-width: 560px;
  margin: 0;
  color: var(--fg-dim);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
}
.demo-flow-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  color: var(--fg-mute);
  font-size: 7px;
  letter-spacing: .12em;
  white-space: nowrap;
}
.demo-flow-note i { color: var(--accent); font-style: normal; }
.demo-output-list {
  margin: auto 0 16px;
  border-top: 1px solid var(--line-strong);
}
.demo-output-list > div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  border-bottom: 1px solid var(--line);
}
.demo-output-list span { color: var(--accent); font: 9px var(--mono); letter-spacing: .12em; }
.demo-output-list b { font-size: 13px; font-weight: 450; }
.demo-output-list small {
  color: var(--fg-mute);
  font: 9px var(--mono);
  letter-spacing: .04em;
  text-align: right;
  text-transform: uppercase;
}
.demo-launch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 54px;
  margin-top: auto;
  padding: 12px 18px;
  border: 1px solid var(--fg);
  background: var(--fg);
  color: #050505;
  text-align: left;
  transition: background 160ms, border-color 160ms;
}
.demo-launch:hover { background: var(--accent); border-color: var(--accent); }
.demo-launch > span { display: grid; gap: 3px; font-size: 15px; font-weight: 550; }
.demo-launch small { font: 8px var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.demo-launch > i { font-size: 26px; font-style: normal; font-weight: 300; }
.demo-access-note {
  margin-top: 12px;
  color: var(--fg-mute);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.demo-preview-screen {
  --motion-cycle: 22s;
  position: relative;
  display: grid;
  grid-template-rows: 40px minmax(0, 1fr) 60px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #060606;
  text-align: left;
}
.demo-screen-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  color: var(--fg-mute);
  font: 8px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.demo-screen-bar > span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-dim); }
.demo-screen-bar i { width: 5px; height: 5px; background: var(--accent); }
.compiler-motion {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) 42px minmax(100px, .42fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 34%, rgba(240,138,59,.075), transparent 27%),
    #080808;
}
.motion-model {
  position: relative;
  display: block;
  width: min(72%, 680px);
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
}
.motion-panel-head {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--fg-mute);
  font: 8px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.motion-panel-head > b { color: var(--fg-dim); font-weight: 400; }
.motion-panel-head > span { display: inline-flex; align-items: center; gap: 7px; }
.motion-panel-head i, .motion-model-state i {
  width: 5px;
  height: 5px;
  background: #94b783;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(148,183,131,.1);
}
.motion-build-phases {
  position: absolute;
  z-index: 2;
  top: 29px;
  left: 14px;
  width: 190px;
  height: 12px;
  overflow: hidden;
  color: var(--accent);
  font: 6px var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.motion-build-phases b {
  position: absolute;
  inset: 0;
  font-weight: 400;
  opacity: 0;
  transform: translateY(6px);
  animation: motionPhase var(--motion-cycle) linear infinite;
}
.motion-build-phases b:nth-child(2) { animation-delay: calc(var(--motion-cycle) * .12); }
.motion-build-phases b:nth-child(3) { animation-delay: calc(var(--motion-cycle) * .24); }
.motion-build-phases b:nth-child(4) { animation-delay: calc(var(--motion-cycle) * .36); }
.motion-build-phases b:nth-child(5) { animation-delay: calc(var(--motion-cycle) * .48); }
.motion-build-phases b:nth-child(6) { animation-delay: calc(var(--motion-cycle) * .60); }
.motion-build-phases b:nth-child(7) { animation-delay: calc(var(--motion-cycle) * .72); }
.motion-webgl {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.motion-model::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(ellipse at 50% 46%, transparent 42%, rgba(8,8,8,.12) 73%, rgba(8,8,8,.58));
  pointer-events: none;
}
.motion-isometric { display: none; }
.webgl-fallback .motion-model::before {
  content: "WEBGL MODEL / INITIALIZATION REQUIRED";
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--fg-mute);
  font: 7px var(--mono);
  letter-spacing: .14em;
}
.webgl-ready .motion-build-phases b { display: none; animation: none; }
.webgl-ready .motion-build-phases b:first-child { display: block; opacity: 1; transform: none; }
.motion-site { stroke: rgba(255,255,255,.16); stroke-width: 1; }
.motion-site-grid { opacity: .72; }
.motion-site-line { fill: none; stroke: rgba(255,255,255,.1); stroke-width: .7; }
.motion-contours path { fill: none; stroke: rgba(240,138,59,.24); stroke-width: .7; stroke-dasharray: 3 5; animation: motionContours var(--motion-cycle) linear infinite; }
.motion-earthwork { transform-box: fill-box; transform-origin: center; animation: motionEarthwork var(--motion-cycle) ease infinite; }
.motion-earthwork polygon { fill: rgba(116,100,77,.2); stroke: #766b5b; stroke-width: .8; stroke-dasharray: 4 3; }
.motion-earthwork path { fill: none; stroke: rgba(204,179,142,.48); stroke-width: 6; stroke-linejoin: bevel; }
.motion-underground path { fill: none; stroke-width: 2.2; stroke-linecap: square; stroke-linejoin: bevel; stroke-dasharray: 620; animation: motionUtility var(--motion-cycle) ease infinite; }
.motion-utility-water { stroke: #5f9eaa; }
.motion-utility-sanitary { stroke: #b37c51; animation-delay: .35s !important; }
.motion-underground circle { fill: #080808; stroke: #b9bbb5; stroke-width: 1; opacity: 0; animation: motionUtilityNode var(--motion-cycle) ease infinite; }
.motion-footings { transform-box: fill-box; transform-origin: center; animation: motionFootings var(--motion-cycle) cubic-bezier(.2,.75,.2,1) infinite; }
.motion-footings polygon { fill: #22231f; stroke: #8a8d85; stroke-width: 1; fill-rule: evenodd; }
.motion-footings path { fill: none; stroke: #b0b2ac; stroke-width: 2.4; }
.motion-slab { transform-box: fill-box; transform-origin: center; animation: motionSlab var(--motion-cycle) cubic-bezier(.2,.75,.2,1) infinite; }
.motion-slab polygon { fill: #444640; stroke: #a5a7a1; stroke-width: 1; }
.motion-slab path { fill: none; stroke: rgba(255,255,255,.13); stroke-width: .6; }
.motion-frame path {
  fill: none;
  stroke: #c1c3bd;
  stroke-width: 1.05;
  stroke-dasharray: 1200;
  vector-effect: non-scaling-stroke;
}
.motion-frame-left path { animation: motionFrameLeft var(--motion-cycle) cubic-bezier(.2,.75,.2,1) infinite; }
.motion-frame-right path { animation: motionFrameRight var(--motion-cycle) cubic-bezier(.2,.75,.2,1) infinite; }
.motion-top-plates path { fill: none; stroke: #f08a3b; stroke-width: 1.5; stroke-dasharray: 420; animation: motionTopPlates var(--motion-cycle) ease infinite; }
.motion-envelope {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: motionEnvelope var(--motion-cycle) cubic-bezier(.2,.75,.2,1) infinite;
}
.motion-wall-left { fill: rgba(126,129,120,.86); stroke: #c4c6c0; stroke-width: 1; }
.motion-wall-right { fill: rgba(86,90,83,.88); stroke: #aeb1aa; stroke-width: 1; }
.motion-gable { fill: rgba(75,78,72,.92); stroke: #b9bbb5; stroke-width: 1; }
.motion-panel-joints { fill: none; stroke: rgba(15,15,15,.48); stroke-width: .65; }
.motion-openings polygon { fill: #0b0c0b; stroke: #c2c4be; stroke-width: .75; }
.motion-roof-trusses { transform-box: fill-box; transform-origin: center bottom; animation: motionTrusses var(--motion-cycle) ease infinite; }
.motion-roof-trusses path { fill: none; stroke: #d0d2cc; stroke-width: .9; }
.motion-roof-deck { transform-box: fill-box; transform-origin: center; animation: motionRoofDeck var(--motion-cycle) ease infinite; }
.motion-roof-deck .motion-roof-left { fill: rgba(157,151,139,.62); stroke: #c1beb5; stroke-width: 1; }
.motion-roof-deck .motion-roof-right { fill: rgba(108,106,99,.68); stroke: #aaa79f; stroke-width: 1; }
.motion-deck-joints { fill: none; stroke: rgba(17,17,17,.45); stroke-width: .7; }
.motion-roof-finish { transform-box: fill-box; transform-origin: center; animation: motionRoofFinish var(--motion-cycle) ease infinite; }
.motion-roof-finish .motion-roof-left { fill: #363833; stroke: #969991; stroke-width: 1; }
.motion-roof-finish .motion-roof-right { fill: url(#motion-roof); stroke: #858880; stroke-width: 1; }
.motion-roof-seams { fill: none; stroke: rgba(240,138,59,.5); stroke-width: .7; }
.motion-earthwork-callout {
  position: absolute;
  z-index: 2;
  left: 16px;
  bottom: 15px;
  display: grid;
  gap: 5px;
  padding: 9px 11px;
  border-left: 2px solid var(--accent);
  background: rgba(5,5,5,.84);
  box-shadow: 0 10px 30px rgba(0,0,0,.34);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms linear, transform 240ms cubic-bezier(.2,.75,.25,1);
}
.motion-earthwork-callout small { color: var(--accent); font: 7px var(--mono); letter-spacing: .16em; }
.motion-earthwork-callout b { color: var(--fg); font: 400 11px var(--display); }
.motion-earthwork-callout em { color: #91ad86; font: 5px var(--mono); font-style: normal; letter-spacing: .11em; text-transform: uppercase; }
.motion-model-state {
  position: absolute;
  z-index: 2;
  right: 15px;
  bottom: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-mute);
  font: 7px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.motion-model-state i { animation: motionState 1.6s linear infinite; }
.motion-propagation {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: visible;
}
.motion-propagation::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 1px;
  background: var(--line-strong);
}
.motion-propagation-line { position: absolute; inset: 0 auto 0 50%; width: 1px; background: var(--line-strong); }
.motion-propagation-line::after {
  content: "";
  position: absolute;
  left: -2px;
  top: -6px;
  width: 5px;
  height: 18px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  filter: drop-shadow(0 0 5px var(--accent));
  opacity: 0;
  animation: motionSignal 2.2s cubic-bezier(.2,.7,.2,1) infinite;
}
.motion-propagation-core {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  padding: 6px 9px;
  border: 1px solid var(--line-strong);
  background: #090909;
  color: var(--fg-mute);
  font: 6px var(--mono);
  letter-spacing: .1em;
  transform: translateZ(0);
  animation: motionCompile 2.2s ease infinite;
}
.motion-propagation-core i { width: 5px; height: 5px; border: 1px solid var(--accent); transform: rotate(45deg); }
.motion-propagation-core b { color: var(--fg-dim); font-size: 6px; font-weight: 400; }
.motion-propagation-core small { color: var(--accent); font-size: 6px; }
.motion-outputs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 1fr;
  min-width: 0;
  min-height: 0;
  background: var(--line);
  gap: 1px;
}
.motion-output {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(26px, 1fr) auto;
  align-items: stretch;
  gap: 5px;
  min-width: 0;
  min-height: 0;
  padding: 9px 10px 8px;
  background: #0a0a0a;
  box-shadow: inset 2px 0 transparent;
  animation: motionOutputSync var(--motion-cycle) ease infinite;
  animation-delay: calc(var(--output-index) * .06s);
}
.motion-output::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 42px;
  background: var(--line-strong);
}
.motion-output::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  pointer-events: none;
  animation: motionOutputBorder var(--motion-cycle) ease infinite;
  animation-delay: calc(var(--output-index) * .06s);
}
.motion-output-head { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-width: 0; }
.motion-output-head b { overflow: hidden; color: var(--fg-dim); font: 7px var(--mono); font-weight: 400; letter-spacing: .12em; text-overflow: ellipsis; white-space: nowrap; }
.motion-output-head i {
  width: max-content;
  padding: 2px 4px;
  background: rgba(240,138,59,.11);
  color: var(--accent);
  font: 6px var(--mono);
  font-style: normal;
  letter-spacing: .12em;
  opacity: 0;
  animation: motionSyncBadge var(--motion-cycle) ease infinite;
  animation-delay: calc(var(--output-index) * .06s);
}
.motion-output-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; min-width: 0; text-align: left; }
.motion-output-meta b { overflow: hidden; color: var(--fg); font: 400 11px var(--display); text-overflow: ellipsis; white-space: nowrap; }
.motion-output-meta small { overflow: hidden; color: var(--fg-mute); font: 6px var(--mono); letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.motion-output-meta b, .motion-output-meta small { font-size: 0; }
.motion-output-meta b::after { font: 400 11px var(--display); }
.motion-output-meta small::after { color: var(--fg-mute); font: 6px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.motion-output-plan .motion-output-meta b::after { content: "PAD SET"; animation: motionPlanValue var(--motion-cycle) linear infinite; }
.motion-output-plan .motion-output-meta small::after { content: "Site geometry"; animation: motionPlanDetail var(--motion-cycle) linear infinite; }
.motion-output-sequence .motion-output-meta b::after { content: "18 tasks"; animation: motionSequenceValue var(--motion-cycle) linear infinite; }
.motion-output-sequence .motion-output-meta small::after { content: "Earthwork linked"; animation: motionSequenceDetail var(--motion-cycle) linear infinite; }
.motion-output-bom .motion-output-meta b::after { content: "17 assemblies"; animation: motionBomValue var(--motion-cycle) linear infinite; }
.motion-output-bom .motion-output-meta small::after { content: "Concrete takeoff"; animation: motionBomDetail var(--motion-cycle) linear infinite; }
.motion-output-logistics .motion-output-meta b::after { content: "1 load"; animation: motionLogisticsValue var(--motion-cycle) linear infinite; }
.motion-output-logistics .motion-output-meta small::after { content: "Excavator staged"; animation: motionLogisticsDetail var(--motion-cycle) linear infinite; }
.webgl-ready .motion-output-meta b { font-size: 11px; }
.webgl-ready .motion-output-meta small { font-size: 6px; }
.webgl-ready .motion-output-meta b::after, .webgl-ready .motion-output-meta small::after { content: none !important; animation: none !important; }
.motion-output-plan svg { width: 100%; height: 100%; max-height: 42px; }
.plan-grid { fill: none; stroke: rgba(255,255,255,.09); stroke-width: .55; }
.plan-line { fill: rgba(255,255,255,.02); stroke: #8c8f88; stroke-width: 1.4; }
.plan-change { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-dasharray: 80; animation: motionPlanChange 2.8s ease infinite; }
.sequence-rail { display: flex; align-items: center; justify-content: space-between; height: 1px; background: #383a37; }
.sequence-rail i { width: 5px; height: 5px; border: 1px solid #797c75; border-radius: 50%; background: #0a0a0a; }
.sequence-rail i:nth-child(-n+4) { border-color: var(--accent); }
.sequence-tasks { display: grid; gap: 3px; }
.sequence-tasks i { display: block; width: var(--w); height: 2px; background: #666962; transform-origin: left; animation: motionTask 3.6s ease infinite; }
.sequence-tasks i:nth-child(2) { background: var(--accent); animation-delay: .12s; }
.bom-lines { display: grid; gap: 4px; }
.bom-lines i { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 2px; border-bottom: 1px solid var(--line); font-style: normal; }
.bom-lines b { color: var(--fg-mute); font: 6px var(--mono); font-weight: 400; }
.bom-lines small { color: var(--accent); font: 6px var(--mono); animation: motionBomPulse var(--motion-cycle) ease infinite; }
.logistics-route { display: flex; align-items: center; justify-content: space-between; height: 1px; background: #4b4d48; }
.logistics-route i { width: 4px; height: 4px; background: #777a73; border-radius: 50%; }
.logistics-route i:nth-child(3) { width: 7px; height: 7px; background: var(--accent); box-shadow: 0 0 0 3px rgba(240,138,59,.1); animation: motionRoute 3.2s ease infinite; }
.logistics-slots { display: flex; justify-content: space-between; margin-top: 7px; color: var(--fg-mute); font: 5px var(--mono); }

@keyframes motionPhase {
  0% { opacity: 0; transform: translateY(6px); }
  2%, 9% { opacity: 1; transform: none; }
  11%, 100% { opacity: 0; transform: translateY(-5px); }
}
@keyframes motionContours {
  0% { stroke-dashoffset: 0; opacity: .35; }
  50% { opacity: .8; }
  100% { stroke-dashoffset: -32; opacity: .35; }
}
@keyframes motionEarthwork {
  0% { opacity: 0; transform: scale(.94); }
  5%, 16% { opacity: 1; transform: none; }
  30%, 100% { opacity: .3; transform: none; }
}
@keyframes motionUtility {
  0%, 7% { opacity: 0; stroke-dashoffset: 620; }
  11% { opacity: 1; }
  24%, 38% { opacity: .95; stroke-dashoffset: 0; }
  48%, 100% { opacity: .2; stroke-dashoffset: 0; }
}
@keyframes motionUtilityNode {
  0%, 12% { opacity: 0; }
  18%, 38% { opacity: 1; }
  48%, 100% { opacity: .2; }
}
@keyframes motionFootings {
  0%, 15% { opacity: 0; transform: translateY(9px) scale(.97); }
  22%, 100% { opacity: 1; transform: none; }
}
@keyframes motionSlab {
  0%, 23% { opacity: 0; transform: translateY(8px); }
  30%, 100% { opacity: 1; transform: none; }
}
@keyframes motionFrameLeft {
  0%, 30% { opacity: 0; stroke-dashoffset: 1200; transform: translateY(22px) scaleY(.64); }
  36% { opacity: 1; }
  48%, 64% { opacity: .96; stroke-dashoffset: 0; transform: none; }
  70%, 100% { opacity: .24; stroke-dashoffset: 0; transform: none; }
}
@keyframes motionFrameRight {
  0%, 34% { opacity: 0; stroke-dashoffset: 1200; transform: translateY(22px) scaleY(.64); }
  40% { opacity: 1; }
  52%, 64% { opacity: .96; stroke-dashoffset: 0; transform: none; }
  70%, 100% { opacity: .24; stroke-dashoffset: 0; transform: none; }
}
@keyframes motionTopPlates {
  0%, 43% { opacity: 0; stroke-dashoffset: 420; }
  51%, 66% { opacity: 1; stroke-dashoffset: 0; }
  74%, 100% { opacity: .35; stroke-dashoffset: 0; }
}
@keyframes motionEnvelope {
  0%, 47% { opacity: 0; transform: translateY(12px) scaleY(.78); }
  56%, 100% { opacity: 1; transform: none; }
}
@keyframes motionTrusses {
  0%, 55% { opacity: 0; transform: translateY(-18px); }
  62%, 75% { opacity: 1; transform: none; }
  82%, 100% { opacity: .22; transform: none; }
}
@keyframes motionRoofDeck {
  0%, 63% { opacity: 0; transform: translateY(-14px); }
  71%, 100% { opacity: 1; transform: none; }
}
@keyframes motionRoofFinish {
  0%, 71% { opacity: 0; transform: translateY(-11px); }
  79%, 100% { opacity: 1; transform: none; }
}
@keyframes motionState {
  0%, 100% { background: #94b783; box-shadow: 0 0 0 3px rgba(148,183,131,.1); }
  50% { background: var(--accent); box-shadow: 0 0 0 5px rgba(240,138,59,.14); }
}
@keyframes motionSignal {
  0% { top: -8px; opacity: 0; }
  14% { opacity: 1; }
  78% { top: calc(100% - 12px); opacity: 1; }
  100% { top: calc(100% - 12px); opacity: 0; }
}
@keyframes motionCompile {
  0%, 100% { border-color: var(--line-strong); box-shadow: none; }
  42%, 70% { border-color: rgba(240,138,59,.72); box-shadow: 0 0 24px rgba(240,138,59,.15); }
}
@keyframes motionOutputSync {
  0%, 6%, 12%, 18%, 24%, 30%, 36%, 42%, 48%, 54%, 60%, 66%, 72%, 78%, 84%, 90%, 96%, 100% { background: #0a0a0a; box-shadow: inset 2px 0 transparent; }
  9%, 21%, 33%, 45%, 57%, 69%, 81%, 93% { background: #11100f; box-shadow: inset 2px 0 var(--accent); }
}
@keyframes motionOutputBorder {
  0%, 6%, 12%, 18%, 24%, 30%, 36%, 42%, 48%, 54%, 60%, 66%, 72%, 78%, 84%, 90%, 96%, 100% { border-color: transparent; }
  9%, 21%, 33%, 45%, 57%, 69%, 81%, 93% { border-color: rgba(240,138,59,.2); }
}
@keyframes motionSyncBadge {
  0%, 6%, 12%, 18%, 24%, 30%, 36%, 42%, 48%, 54%, 60%, 66%, 72%, 78%, 84%, 90%, 96%, 100% { opacity: .15; }
  9%, 21%, 33%, 45%, 57%, 69%, 81%, 93% { opacity: 1; }
}
@keyframes motionPlanChange {
  0% { opacity: .2; stroke-dashoffset: 80; }
  55%, 80% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: .2; stroke-dashoffset: -20; }
}
@keyframes motionTask {
  0%, 100% { transform: scaleX(.35); opacity: .4; }
  20% { transform: scaleX(.52); opacity: .7; }
  45% { transform: scaleX(.68); opacity: .85; }
  70% { transform: scaleX(.84); opacity: 1; }
  90% { transform: scaleX(1); opacity: 1; }
}
@keyframes motionRoute {
  0% { transform: translateX(-28px); opacity: .15; }
  50% { transform: translateX(20px); opacity: 1; }
  100% { transform: translateX(-28px); opacity: .15; }
}
@keyframes motionBomPulse {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}
@keyframes motionPlanValue { 0%, 15% { content: "PAD SET"; } 16%, 27% { content: "UTIL ROUTES"; } 28%, 41% { content: "1,148 SF"; } 42%, 55% { content: "1,632 SF"; } 56%, 100% { content: "1,824 SF"; } }
@keyframes motionPlanDetail { 0%, 15% { content: "Site geometry"; } 16%, 27% { content: "5 lines placed"; } 28%, 41% { content: "Slab resolved"; } 42%, 69% { content: "Walls coordinated"; } 70%, 100% { content: "Roof projected"; } }
@keyframes motionSequenceValue { 0%, 15% { content: "18 tasks"; } 16%, 27% { content: "31 tasks"; } 28%, 41% { content: "54 tasks"; } 42%, 55% { content: "92 tasks"; } 56%, 69% { content: "118 tasks"; } 70%, 100% { content: "142 tasks"; } }
@keyframes motionSequenceDetail { 0%, 15% { content: "Earthwork linked"; } 16%, 27% { content: "Utilities linked"; } 28%, 41% { content: "Cure windows set"; } 42%, 55% { content: "Crews leveled"; } 56%, 69% { content: "Dry-in linked"; } 70%, 100% { content: "150 days"; } }
@keyframes motionBomValue { 0%, 15% { content: "17 assemblies"; } 16%, 27% { content: "26 assemblies"; } 28%, 41% { content: "41 assemblies"; } 42%, 55% { content: "63 assemblies"; } 56%, 69% { content: "76 assemblies"; } 70%, 100% { content: "89 assemblies"; } }
@keyframes motionBomDetail { 0%, 15% { content: "Earth takeoff"; } 16%, 27% { content: "Pipe takeoff"; } 28%, 41% { content: "Concrete takeoff"; } 42%, 55% { content: "Lumber takeoff"; } 56%, 69% { content: "Envelope takeoff"; } 70%, 100% { content: "PO-014 revised"; } }
@keyframes motionLogisticsValue { 0%, 15% { content: "1 mobilization"; } 16%, 27% { content: "2 deliveries"; } 28%, 41% { content: "3 deliveries"; } 42%, 55% { content: "5 deliveries"; } 56%, 69% { content: "7 deliveries"; } 70%, 100% { content: "9 deliveries"; } }
@keyframes motionLogisticsDetail { 0%, 15% { content: "Excavator staged"; } 16%, 27% { content: "Pipe load routed"; } 28%, 41% { content: "Concrete booked"; } 42%, 55% { content: "Frame packs split"; } 56%, 69% { content: "Sheathing slotted"; } 70%, 100% { content: "Roof load optimized"; } }
@keyframes motionDesignMetric { 0%, 27% { content: "CHECK"; } 28%, 100% { content: "PASS"; } }
@keyframes motionEstimateMetric { 0%, 15% { content: "$38K"; } 16%, 27% { content: "$64K"; } 28%, 41% { content: "$108K"; } 42%, 55% { content: "$174K"; } 56%, 69% { content: "$218K"; } 70%, 100% { content: "$252K"; } }
@keyframes motionMaterialsMetric { 0%, 15% { content: "17 BOM"; } 16%, 27% { content: "26 BOM"; } 28%, 41% { content: "41 BOM"; } 42%, 55% { content: "63 BOM"; } 56%, 69% { content: "76 BOM"; } 70%, 100% { content: "89 BOM"; } }
@keyframes motionFieldMetric { 0%, 15% { content: "24D"; } 16%, 27% { content: "41D"; } 28%, 41% { content: "67D"; } 42%, 55% { content: "98D"; } 56%, 69% { content: "124D"; } 70%, 100% { content: "150D"; } }
.demo-screen-action {
  position: absolute;
  right: 22px;
  bottom: 20px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(0,0,0,.76);
  color: var(--fg);
  font: 9px var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.demo-screen-action i { color: var(--accent); font-size: 16px; font-style: normal; }
.demo-screen-metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-strong); }
.demo-screen-metrics > span {
  display: grid;
  align-content: center;
  gap: 7px;
  min-width: 0;
  padding: 0 16px;
  border-right: 1px solid var(--line);
}
.demo-screen-metrics > span:last-child { border-right: 0; }
.demo-screen-metrics small { color: var(--fg-mute); font: 8px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.demo-screen-metrics b { overflow: hidden; font: 500 17px var(--display); text-overflow: ellipsis; white-space: nowrap; }
.demo-screen-metrics > span:first-child b { color: #94b783; }
.demo-screen-metrics b { font-size: 0; }
.demo-screen-metrics b::after { font: 500 17px var(--display); }
.demo-screen-metrics > span:nth-child(1) b::after { content: "CHECK"; animation: motionDesignMetric var(--motion-cycle) linear infinite; }
.demo-screen-metrics > span:nth-child(2) b::after { content: "$38K"; animation: motionEstimateMetric var(--motion-cycle) linear infinite; }
.demo-screen-metrics > span:nth-child(3) b::after { content: "17 BOM"; animation: motionMaterialsMetric var(--motion-cycle) linear infinite; }
.demo-screen-metrics > span:nth-child(4) b::after { content: "24D"; animation: motionFieldMetric var(--motion-cycle) linear infinite; }
.webgl-ready .demo-screen-metrics b { font-size: 17px; }
.webgl-ready .demo-screen-metrics b::after { content: none !important; animation: none !important; }
@media (max-width: 900px) {
  .demo-preview { grid-template-columns: 1fr; height: auto; }
  .demo-preview-copy { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .demo-output-list { margin-top: 40px; }
  .demo-preview-screen { height: 540px; min-height: 540px; }
}
@media (max-width: 720px) {
  .grade-demo { padding: 0; }
  .grade-demo::before { left: 0; }
  .grade-demo-bar { align-items: flex-start; flex-direction: column; justify-content: center; padding: 14px 18px; }
  .demo-preview { min-height: 0; }
  .demo-preview-copy { padding: 34px 22px; }
  .demo-preview-copy h2 { font-size: clamp(38px, 12vw, 54px); }
  .demo-output-list > div { grid-template-columns: 26px 1fr; padding: 8px 0; }
  .demo-output-list small { grid-column: 2; text-align: left; }
  .demo-preview-screen { grid-template-rows: 42px minmax(470px, 125vw) 58px; height: auto; min-height: 0; }
  .demo-screen-bar > span:last-child { display: none; }
  .compiler-motion { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 34px 112px; }
  .motion-model { width: 100%; }
  .motion-propagation::after { left: 10%; right: 10%; }
  .motion-propagation-core { padding: 4px 7px; }
  .motion-outputs { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 1fr; }
  .motion-output { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 5px; padding: 7px 5px; }
  .motion-output::before { height: 34px; }
  .motion-output-head { display: grid; gap: 4px; }
  .motion-output-head b { font-size: 6px; letter-spacing: .04em; }
  .motion-output-meta { display: grid; align-content: end; gap: 3px; text-align: left; }
  .motion-output-meta b { font-size: 9px; }
  .motion-output-meta small, .motion-output > svg, .sequence-rail, .sequence-tasks, .bom-lines, .logistics-route, .logistics-slots { display: none; }
  .motion-isometric { transform: scale(1.04); }
  .motion-earthwork-callout { left: 11px; bottom: 10px; }
  .motion-model-state { right: 11px; bottom: 11px; }
  .demo-screen-metrics > span { padding: 0 8px; }
  .demo-screen-metrics small { letter-spacing: .06em; }
  .demo-screen-metrics b { font-size: 13px; }
  .demo-screen-action { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .compiler-motion *, .compiler-motion *::before, .compiler-motion *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  .motion-envelope, .motion-foundation, .motion-roof-assembly { opacity: 1; transform: none; }
  .motion-frame path { opacity: .16; stroke-dashoffset: 0; }
  .access-handoff-progress i { animation: none; background: var(--accent); }
}

/* ---------------- authenticated demo access ---------------- */
.access-handoff { display: none; }
.auth-returning { background: #050505; }
.auth-returning body { background: #050505; }
.auth-returning .access-handoff {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  justify-items: start;
  padding: clamp(28px, 8vw, 120px);
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 52% 46%, rgba(240,138,59,.08), transparent 28%),
    #050505;
  background-size: 48px 48px, 48px 48px, auto, auto;
}
.access-handoff-code { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--accent); font-size: 10px; letter-spacing: .18em; }
.access-handoff-code i { width: 7px; height: 7px; border-radius: 50%; background: #73b98b; box-shadow: 0 0 16px rgba(115,185,139,.65); }
.access-handoff h1 { margin: 0; font-size: clamp(42px, 7vw, 96px); font-weight: 500; letter-spacing: -.045em; line-height: .96; }
.access-handoff p { max-width: 520px; margin: 22px 0 34px; color: var(--fg-dim); font-size: clamp(14px, 1.4vw, 18px); line-height: 1.55; }
.access-handoff-progress { display: grid; grid-template-columns: repeat(4, minmax(42px, 100px)); gap: 5px; }
.access-handoff-progress i { height: 2px; background: var(--line-strong); animation: accessHandoff 1s ease-in-out infinite; }
.access-handoff-progress i:nth-child(2) { animation-delay: .12s; }.access-handoff-progress i:nth-child(3) { animation-delay: .24s; }.access-handoff-progress i:nth-child(4) { animation-delay: .36s; }
@keyframes accessHandoff { 0%,45% { background: var(--line-strong); } 50%,72% { background: var(--accent); } 78%,100% { background: var(--line-strong); } }

.access-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 1;
  transition: opacity 180ms ease;
}
.access-gate[aria-hidden="true"] { opacity: 0; pointer-events: none; }
.access-dialog {
  position: relative;
  width: min(720px, 100%);
  max-height: min(880px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid var(--line-strong);
  background: #080808;
  box-shadow: 0 36px 120px rgba(0,0,0,.75);
  padding: clamp(28px, 4vw, 56px);
}
.access-dialog::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 88px; height: 2px; background: var(--accent); }
.access-close { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border: 1px solid var(--line); color: var(--fg-mute); }
.access-close:hover, .access-close:focus-visible { border-color: var(--fg-dim); color: var(--fg); }
.access-code { display: block; margin-bottom: 22px; color: var(--accent); font-size: 10px; letter-spacing: .2em; }
.access-step h2 { max-width: 580px; margin: 0; font-size: clamp(34px, 5vw, 62px); line-height: 1; letter-spacing: -.035em; font-weight: 500; }
.access-step > p { max-width: 590px; margin: 22px 0 30px; color: var(--fg-dim); font-size: 16px; line-height: 1.6; }
.access-step > p strong { color: var(--fg); font-weight: 500; }
.access-step > small { display: block; max-width: 540px; margin-top: 18px; color: var(--fg-mute); font: 10px/1.6 var(--mono); letter-spacing: .06em; }
.access-email-form > label { display: block; margin-bottom: 8px; color: var(--fg-mute); font: 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.access-email-row { display: grid; grid-template-columns: minmax(0, 1fr) 220px; }
.access-email-row input {
  min-width: 0;
  height: 56px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-right: 0;
  border-radius: 0;
  outline: none;
  background: #0d0d0d;
  color: var(--fg);
  font: 14px var(--display);
}
.access-email-row input:focus { border-color: var(--accent); box-shadow: inset 2px 0 var(--accent); }
.access-email-row .access-primary { min-height: 56px; }
.access-email-form .access-error { margin-top: 12px !important; }
.access-primary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid var(--fg);
  background: var(--fg);
  color: #000;
  font: 500 12px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.access-primary:hover, .access-primary:focus-visible { background: var(--accent); border-color: var(--accent); }
.access-primary:disabled { cursor: wait; opacity: .55; }
.access-sent { min-height: 360px; }
.access-sent-mark { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 28px; border: 1px solid var(--accent); color: var(--accent); font: 22px var(--mono); }
.access-status-line { display: flex; align-items: center; gap: 9px; padding: 14px 0; border-block: 1px solid var(--line); color: var(--fg-mute); font: 10px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.access-status-line span { width: 6px; height: 6px; border-radius: 50%; background: #73b98b; box-shadow: 0 0 12px rgba(115,185,139,.5); }
.access-text-button { margin-top: 24px; padding: 0 0 4px; border-bottom: 1px solid var(--line-strong); color: var(--fg-dim); font: 10px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.access-text-button:hover, .access-text-button:focus-visible { border-color: var(--accent); color: var(--fg); }
.access-identity { display: flex; justify-content: space-between; gap: 16px; margin: 28px 0; padding: 13px 0; border-block: 1px solid var(--line); font: 10px var(--mono); letter-spacing: .08em; }
.access-identity span { color: var(--fg-mute); text-transform: uppercase; }
.access-identity b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.access-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.access-fields label > span, .access-dialog legend { display: block; margin-bottom: 8px; color: var(--fg-mute); font: 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.access-fields input, .access-fields select {
  width: 100%;
  height: 48px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  outline: none;
  background: #0d0d0d;
  color: var(--fg);
  font: 13px var(--display);
}
.access-fields input:focus, .access-fields select:focus { border-color: var(--accent); }
.access-dialog fieldset { padding: 0; margin: 26px 0 0; border: 0; }
.access-interest { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.access-interest legend, .access-usecases legend { grid-column: 1 / -1; }
.access-interest label { position: relative; display: block; }
.access-interest input { position: absolute; opacity: 0; pointer-events: none; }
.access-interest label > span { display: block; min-height: 70px; padding: 13px; border: 1px solid var(--line); background: #0a0a0a; cursor: pointer; }
.access-interest label > span b { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 500; }
.access-interest label > span small { color: var(--fg-mute); font: 9px/1.4 var(--mono); }
.access-interest input:checked + span { border-color: var(--accent); background: #130d08; box-shadow: inset 2px 0 var(--accent); }
.access-interest input:focus-visible + span { outline: 1px solid var(--fg); outline-offset: 2px; }
.access-usecases { display: flex; flex-wrap: wrap; gap: 8px; }
.access-usecases label { position: relative; }
.access-usecases input { position: absolute; opacity: 0; pointer-events: none; }
.access-usecases label span { display: block; padding: 9px 11px; border: 1px solid var(--line); color: var(--fg-dim); font: 9px var(--mono); letter-spacing: .06em; cursor: pointer; }
.access-usecases input:checked + span { border-color: var(--fg-dim); background: var(--fg); color: #000; }
.access-consent { display: flex; align-items: flex-start; gap: 10px; margin: 24px 0; color: var(--fg-dim); font-size: 12px; line-height: 1.45; }
.access-consent input { margin-top: 2px; accent-color: var(--accent); }
.access-error { margin: 0 0 16px !important; color: #e87575 !important; font: 10px/1.5 var(--mono) !important; }

@media (max-width: 620px) {
  .access-gate { align-items: end; padding: 0; }
  .access-dialog { width: 100%; max-height: 94vh; padding: 32px 20px 24px; border-inline: 0; border-bottom: 0; }
  .access-email-row { grid-template-columns: 1fr; gap: 8px; }
  .access-email-row input { border-right: 1px solid var(--line-strong); }
  .access-fields, .access-interest { grid-template-columns: 1fr; }
  .access-interest legend, .access-usecases legend { grid-column: auto; }
}

/* ---------------- contact ---------------- */
.contact { text-align: center; }
.contact .eyebrow { margin-bottom: 48px; }
.contact h2 {
  font-family: var(--display);
  font-size: clamp(40px, 7vw, 112px);
  line-height: 1.0; letter-spacing: -0.03em; font-weight: 500;
  margin: 0; text-wrap: balance;
}
.contact .ctas { margin-top: 48px; display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------------- footer ---------------- */
footer { border-top: 1px solid var(--line); padding: 64px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.footer-grid h4 {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--fg-mute); text-transform: uppercase;
  margin: 0 0 16px 0; font-weight: 400;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-grid li { font-size: 13px; color: var(--fg-dim); }
.footer-base {
  margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-family: var(--mono); font-size: 11px; color: var(--fg-mute);
  letter-spacing: 0.16em; text-transform: uppercase;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------------- careers ---------------- */
.careers h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(36px, 5.2vw, 84px);
  line-height: 1.0; letter-spacing: -0.03em;
  margin: 0 0 24px 0; max-width: 1100px; text-wrap: balance;
}
.careers .lede {
  margin: 0; max-width: 640px;
  font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55;
  color: var(--fg-dim); font-weight: 300;
}
.role {
  border-top: 1px solid var(--line);
  padding: 48px 0;
}
.role:last-of-type { border-bottom: 1px solid var(--line); }
.role-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 64px; align-items: start;
}
.role .code {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 16px;
}
.role h3 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.05; letter-spacing: -0.02em;
  margin: 0 0 12px 0; text-wrap: balance;
}
.role .sub { font-size: 16px; color: var(--fg-dim); margin-bottom: 24px; line-height: 1.4; }
.role .type {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--fg-mute); text-transform: uppercase;
}
.role .summary {
  margin: 0 0 28px 0; max-width: 640px;
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6;
  font-weight: 300;
}
.role-details { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 32px; }
.role-details h4 {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--fg-mute); text-transform: uppercase;
  margin: 0 0 16px 0; font-weight: 400;
}
.role-details ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.role-details li {
  font-size: 14px; line-height: 1.5; color: var(--fg-dim);
  padding-left: 14px; position: relative;
}
.role-details li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 6px; height: 1px; background: var(--fg-mute);
}
@media (max-width: 900px) { .role-row { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 640px) { .role-details { grid-template-columns: 1fr; gap: 32px; } }

/* ---------------- unified compiler truth map ---------------- */
.demo-preview {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 900px;
  height: 900px;
  min-height: 900px;
}
.demo-preview-copy {
  position: absolute;
  z-index: 5;
  top: 44px;
  bottom: 350px;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 33%;
  padding: 30px 32px 26px;
  border-right: 0;
  border-bottom: 0;
  background: linear-gradient(90deg, rgba(8,8,8,.98), rgba(8,8,8,.9) 82%, rgba(8,8,8,0));
  pointer-events: auto;
}
.demo-preview-copy .demo-kicker { align-self: flex-start; }
.demo-preview-copy h2 { align-self: flex-start; margin: 18px 0 16px; font-size: clamp(38px, 3.6vw, 52px); }
.demo-preview-copy > p { align-self: flex-start; max-width: 355px; margin: 0; }
.demo-preview-copy .demo-flow-note { align-self: flex-start; margin: 24px 0 0; }
.demo-preview-copy .demo-launch { align-self: stretch; margin: auto 0 0; }
.demo-preview-copy .demo-access-note { align-self: flex-start; margin: 12px 0 0; }
.demo-preview-screen { grid-template-rows: 44px minmax(0, 1fr) 72px; }
.compiler-motion {
  position: relative;
  display: block;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 31%, rgba(240,138,59,.065), transparent 29%),
    linear-gradient(180deg, #080808, #070707);
}
.motion-model {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: none;
}
.motion-model::after { display: none; }
.motion-panel-head { top: 14px; right: 3%; left: 48%; }
.motion-build-phases { top: 31px; left: 48%; }
.motion-earthwork-callout { left: 43%; bottom: 300px; }
.motion-model-state { right: 4%; bottom: 300px; }
.motion-propagation {
  position: absolute;
  z-index: 4;
  top: 44%;
  left: 64%;
  display: block;
  width: auto;
  min-width: 0;
  overflow: visible;
  transform: translate(-50%, -50%);
}
.motion-propagation::after, .motion-propagation-line { display: none; }
.motion-propagation-core { padding: 5px 8px; background: rgba(8,8,8,.96); }
.motion-propagation-core::before { content: "COMPUTED TRUTH"; padding-right: 7px; border-right: 1px solid rgba(207,209,202,.18); color: rgba(207,209,202,.44); font: 5px var(--mono); letter-spacing: .12em; }
.motion-propagation-core { animation: none; }
.motion-outputs {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 10px;
  left: 24px;
  display: grid;
  grid-template-columns: 1.45fr 1.14fr 1.3fr 1.22fr;
  grid-template-rows: 1fr;
  gap: 18px;
  height: 270px;
  overflow: visible;
  background: transparent;
}
.motion-output {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(170px, 1fr) auto;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 10px 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
  transition: opacity 140ms;
}
.motion-output::before {
  display: none;
}
.motion-output::after {
  display: none;
}
.motion-output-head { padding: 0 3px; }
.motion-output-head b { font-size: 8px; }
.motion-output-head i { animation: none; opacity: .72; }
.motion-output-meta { padding: 0 3px; }
.webgl-ready .motion-output-meta b { font-size: 13px; }
.webgl-ready .motion-output-meta small { font-size: 6.5px; }
.plan-workspace { display: grid; grid-template-rows: 15px minmax(0, 1fr) 9px; gap: 2px; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; }
.plan-sheet-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 0 3px 3px; border-bottom: 1px solid rgba(255,255,255,.07); }
.plan-sheet-status > span, .plan-sheet-status > small { display: flex; align-items: center; gap: 6px; min-width: 0; }
.plan-sheet-status b { padding: 1px 3px; background: rgba(240,138,59,.11); color: var(--accent); font: 5px var(--mono); font-weight: 400; letter-spacing: .06em; }
.plan-sheet-status i { overflow: hidden; color: rgba(239,238,232,.72); font: 5px var(--mono); font-style: normal; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.plan-sheet-status em, .plan-sheet-status u { color: rgba(207,209,202,.34); font: 4px var(--mono); font-style: normal; letter-spacing: .05em; text-decoration: none; white-space: nowrap; }
.plan-sheet-status u { color: #8eb07e; }
.motion-output-plan { overflow: hidden; }
.motion-output-plan svg { display: block; align-self: stretch; width: 100%; height: 100%; min-width: 0; min-height: 0; max-height: none; overflow: hidden; shape-rendering: geometricPrecision; }
.motion-output-plan svg path, .motion-output-plan svg rect, .motion-output-plan svg circle { vector-effect: non-scaling-stroke; }
.motion-output-plan svg text { dominant-baseline: middle; paint-order: stroke; stroke: #050505; stroke-width: .38px; stroke-linejoin: round; }
.plan-cad-paper { fill: #050505; }
.plan-grid-minor { fill: none; stroke: rgba(255,255,255,.035); stroke-width: .18; }
.plan-grid-major { fill: none; stroke: rgba(255,255,255,.075); stroke-width: .32; }
.plan-axis { fill: none; stroke: rgba(240,138,59,.18); stroke-width: .5; stroke-dasharray: 7 5; }
.plan-contour { fill: none; stroke: rgba(128,142,131,.24); stroke-width: .42; }
.plan-site-line { fill: rgba(255,255,255,.012); stroke: #777a76; stroke-width: .75; stroke-dasharray: 7 2 1 2; }
.plan-earthwork { fill: rgba(110,170,150,.018); stroke: rgba(145,158,147,.38); stroke-width: .55; stroke-dasharray: 4 2; }
.plan-building-ghost { fill: rgba(222,221,216,.018); stroke: rgba(222,221,216,.42); stroke-width: .65; stroke-dasharray: 4 2; }
.plan-utility, .plan-foundation, .plan-slab, .plan-wall-cut, .plan-opening-erase, .plan-window, .plan-door, .plan-electrical, .plan-hvac, .plan-roof, .plan-change-zone, .plan-dimension, .plan-plan-label, .plan-plan-sub {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  vector-effect: non-scaling-stroke;
}
.plan-utility { stroke-width: 1.05; stroke-linejoin: round; }
.plan-water { stroke: #67aee8; }
.plan-sanitary { stroke: #a4afb6; stroke-width: 1.2; stroke-dasharray: 7 2; }
.plan-foundation { stroke: var(--accent); stroke-width: 1.2; }
.plan-slab { fill: rgba(240,138,59,.025); stroke: rgba(240,138,59,.54); stroke-width: .62; }
.plan-wall-cut { stroke: #deddd8; stroke-width: 2.6; stroke-linecap: square; }
.plan-opening-erase { stroke: #050505; stroke-width: 5.2; stroke-linecap: butt; }
.plan-window { stroke: #9da5a3; stroke-width: 1.15; }
.plan-door { stroke: #deddd8; stroke-width: .78; }
.plan-electrical { stroke: #e8c85a; stroke-width: .85; stroke-dasharray: 2 1; stroke-linejoin: round; }
.plan-hvac { stroke: #ab83cb; stroke-width: 2.2; stroke-linecap: round; }
.plan-roof { stroke: var(--accent); stroke-width: .8; stroke-dasharray: 9 2 2 2; }
.plan-change-zone { fill: rgba(240,138,59,.06); stroke: var(--accent); stroke-width: 1; stroke-dasharray: .12 .06; }
.plan-dimension { stroke: #777873; stroke-width: .5; }
.plan-utility-node { fill: #050505; stroke-width: .9; opacity: 0; }
.plan-water-node { stroke: #67aee8; }
.plan-sanitary-node { stroke: #a4afb6; }
.plan-callout { fill: rgba(213,215,208,.72); font: 4.3px var(--mono); letter-spacing: .05em; opacity: 0; }
.plan-earthwork-balance { fill: var(--accent); font-size: 3.8px; text-anchor: middle; opacity: .82; }
.plan-plan-label { fill: #c8c7c2; font: 500 5px var(--mono); letter-spacing: .12em; text-anchor: middle; }
.plan-plan-sub { fill: #6f736f; font: 3.7px var(--mono); letter-spacing: .07em; text-anchor: middle; }
.plan-dimension-text { fill: #777873; font: 4px var(--mono); letter-spacing: .04em; }
.plan-north { fill: none; stroke: #d8d8d2; stroke-width: .75; }
.plan-north-text { fill: #d8d8d2; font: 600 4.5px var(--mono); text-anchor: middle; }
.plan-titleblock { fill: rgba(5,5,5,.94); stroke: #647581; stroke-width: .55; }
.plan-titleblock text { fill: #71818b; stroke: #050505; font: 3.4px var(--mono); letter-spacing: .06em; }
.plan-titleblock text:first-of-type { fill: #e8e8e4; font-size: 4px; }
.plan-detail-view { fill: none; stroke: #777873; stroke-width: .6; }
.plan-detail-view text { fill: #8f938e; stroke: #050505; font: 3.8px var(--mono); letter-spacing: .04em; }
.plan-section-ground { stroke: #5f625e; stroke-width: .55; stroke-dasharray: 7 2; }
.plan-section-slab { fill: rgba(240,138,59,.025); stroke: var(--accent); stroke-width: 1.2; }
.plan-section-drywall { fill: rgba(216,212,200,.08); stroke: #d8d4c8; }
.plan-section-insulation { fill: rgba(201,138,151,.12); stroke: #c98a97; }
.plan-section-sheathing { fill: rgba(119,121,113,.13); stroke: #8d9088; }
.plan-section-wrb { fill: rgba(103,142,124,.11); stroke: #7d9c89; }
.plan-section-siding { fill: rgba(89,99,93,.16); stroke: #8ca095; }
.plan-section-stud { stroke: var(--accent); stroke-width: .8; }
.plan-section-flashing { stroke: #9da5a3; stroke-width: 1; }
.plan-section-callouts { stroke: #686c68; stroke-width: .45; }
.plan-section-title { fill: #deddd8 !important; font-size: 5px !important; font-weight: 500; letter-spacing: .1em !important; text-anchor: middle; }
.plan-section-note { fill: #8eb07e !important; font-size: 3.6px !important; letter-spacing: .08em !important; text-anchor: middle; }
.demo-preview[data-plan-view="thermal"] .plan-section-insulation { fill: rgba(201,138,151,.23); stroke-width: 1.3; }
.demo-preview[data-plan-view="wall"] .plan-section-sheathing,
.demo-preview[data-plan-view="wall"] .plan-section-wrb,
.demo-preview[data-plan-view="wall"] .plan-section-siding { stroke-width: 1.15; }
.plan-roof-profile { stroke: #deddd8; stroke-width: 1.2; }
.plan-roof-rafters { stroke: var(--accent); stroke-width: .75; }
.plan-roof-ceiling { stroke: #b0a68f; stroke-width: .65; }
.plan-roof-services { stroke: #ab83cb; stroke-width: 1.4; }
.plan-roof-section circle { fill: #050505; stroke: #e8c85a; stroke-width: .8; }
.plan-revision-view > path { stroke: rgba(207,209,202,.16); stroke-width: .5; }
.plan-revision-view text { fill: rgba(207,209,202,.66); font-size: 4px; }
.plan-revision-view text:nth-of-type(3n) { fill: var(--accent); }
.plan-layer-strip { display: flex; align-items: center; justify-content: space-between; gap: 2px; min-width: 0; border-top: 1px solid rgba(255,255,255,.055); }
.plan-layer-strip i { position: relative; color: rgba(207,209,202,.27); font: 4.7px var(--mono); font-style: normal; letter-spacing: .035em; transition: color 180ms; }
.plan-layer-strip i::before { content: ""; display: inline-block; width: 3px; height: 3px; margin-right: 2px; border: 1px solid currentColor; vertical-align: 1px; }
.plan-layer-strip i.is-live { color: rgba(207,209,202,.78); }
.plan-layer-strip i.is-live::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 5px rgba(240,138,59,.35); }
.sequence-workspace { display: grid; grid-template-rows: 17px minmax(0, 1fr); gap: 4px; min-width: 0; min-height: 165px; }
.sequence-queue-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 3px 4px; border-bottom: 1px solid rgba(255,255,255,.07); }
.sequence-queue-head b { color: rgba(239,238,232,.7); font: 5.5px var(--mono); font-weight: 400; letter-spacing: .08em; }
.sequence-queue-head small { overflow: hidden; color: #8eb07e; font: 4.2px var(--mono); letter-spacing: .035em; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.sequence-column { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 3px; min-width: 0; min-height: 0; }
.sequence-task-row {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 44px;
  align-items: center;
  min-width: 0;
  padding: 4px 5px 4px 0;
  overflow: hidden;
  border: 1px solid rgba(207,209,202,.11);
  border-left: 2px solid rgba(207,209,202,.2);
  background: rgba(8,8,8,.9);
  font-style: normal;
  transition: border-color 180ms, background 180ms, opacity 180ms, transform 180ms;
}
.sequence-order { align-self: stretch; display: grid; place-items: center; border-right: 1px solid rgba(255,255,255,.06); color: rgba(207,209,202,.28); font: 6px var(--mono); }
.sequence-task-copy { display: flex; min-width: 0; padding: 0 6px; flex-direction: column; gap: 2px; }
.sequence-task-copy b { overflow: hidden; color: rgba(239,238,232,.7); font: 500 7px var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.sequence-task-copy small { overflow: hidden; color: rgba(207,209,202,.3); font: 4.2px var(--mono); letter-spacing: .035em; text-overflow: ellipsis; white-space: nowrap; }
.sequence-task-time { display: flex; align-items: end; flex-direction: column; gap: 2px; }
.sequence-task-time b { color: rgba(207,209,202,.48); font: 5px var(--mono); font-weight: 400; }
.sequence-task-time em { color: rgba(207,209,202,.28); font: 4px var(--mono); font-style: normal; letter-spacing: .07em; }
.sequence-task-row.is-next { border-left-color: rgba(231,196,106,.56); background: rgba(231,196,106,.025); }
.sequence-task-row.is-next .sequence-task-time em { color: #e7c46a; }
.sequence-task-row.is-active { border-color: rgba(240,138,59,.38); border-left-color: var(--accent); background: rgba(240,138,59,.055); }
.sequence-task-row.is-active::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--accent); }
.sequence-task-row.is-active .sequence-order, .sequence-task-row.is-active .sequence-task-time em { color: var(--accent); }
.sequence-task-row.is-active .sequence-task-copy b { color: rgba(239,238,232,.96); }
.sequence-task-row.is-complete { border-left-color: rgba(142,176,126,.45); background: rgba(142,176,126,.018); opacity: .56; }
.sequence-task-row.is-complete .sequence-order, .sequence-task-row.is-complete .sequence-task-time em { color: #8eb07e; }
.sequence-task-row.is-complete .sequence-task-copy b { color: rgba(218,220,213,.62); }
.sequence-column.is-updating .sequence-task-row.is-active::after { animation: sequenceProgress 680ms cubic-bezier(.2,.75,.25,1) both; transform-origin: left; }
@keyframes sequenceProgress { from { transform: scaleX(.12); opacity: .45; } to { transform: scaleX(1); opacity: 1; } }
.bom-table { display: grid; grid-template-rows: 14px 12px repeat(6, minmax(0, 1fr)) 24px; align-content: stretch; min-width: 0; min-height: 165px; overflow: hidden; }
.bom-receipt-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; padding: 0 1px 3px; border-bottom: 1px solid rgba(255,255,255,.08); }
.bom-receipt-head b { overflow: hidden; color: rgba(239,238,232,.72); font: 5.2px var(--mono); font-weight: 400; letter-spacing: .075em; text-overflow: ellipsis; white-space: nowrap; }
.bom-receipt-head small { color: #8eb07e; font: 4.2px var(--mono); letter-spacing: .05em; white-space: nowrap; }
.bom-column-head, .bom-table > i { display: grid; grid-template-columns: 30px minmax(0, 1fr) 29px 44px 36px 40px; align-items: center; gap: 2px; min-width: 0; padding: 3px 1px; border-bottom: 1px solid rgba(255,255,255,.055); }
.bom-column-head { padding-top: 1px; color: rgba(207,209,202,.32); font: 4.3px var(--mono); letter-spacing: .05em; }
.bom-column-head b { font-weight: 400; }
.bom-column-head i, .bom-column-head u, .bom-column-head s { overflow: hidden; font-style: normal; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.bom-column-head small, .bom-column-head s, .bom-column-head em { text-align: right; }
.bom-table > i { color: var(--fg-dim); font: 4.8px var(--mono); font-style: normal; transition: opacity 260ms, border-color 260ms, background 260ms; }
.bom-table > i[hidden] { display: none; }
.bom-table > i b { overflow: hidden; color: rgba(207,209,202,.48); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.bom-table > i span { overflow: hidden; color: rgba(239,238,232,.78); text-overflow: ellipsis; white-space: nowrap; }
.bom-table > i small { color: var(--fg-mute); font: inherit; text-align: right; }
.bom-table > i u { overflow: hidden; color: rgba(207,209,202,.5); font: 4.5px var(--mono); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.bom-table > i s { color: rgba(207,209,202,.46); font: 4.5px var(--mono); text-align: right; text-decoration: none; }
.bom-table > i em { overflow: hidden; color: rgba(239,238,232,.78); font: 4.7px var(--mono); font-style: normal; text-align: right; text-overflow: ellipsis; }
.bom-table > i.is-posting { border-bottom-color: rgba(240,138,59,.22); background: linear-gradient(90deg, rgba(240,138,59,.055), transparent 72%); box-shadow: inset 1px 0 var(--accent); }
.bom-table > i.is-posting span { color: var(--accent); }
.bom-table > i.is-revised { box-shadow: inset 1px 0 #e7c46a; }
.bom-total { display: flex; grid-row: 9; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 2px 0; border-top: 1px solid rgba(255,255,255,.08); color: rgba(207,209,202,.44); font: 4.8px var(--mono); font-weight: 400; letter-spacing: .06em; }
.bom-total > span { display: flex; flex-direction: column; gap: 2px; }
.bom-total small { color: rgba(207,209,202,.27); font: 3.8px var(--mono); letter-spacing: .04em; }
.bom-total b { color: var(--accent); font: 9px var(--sans); font-weight: 500; letter-spacing: 0; }
.logistics-workspace { display: grid; grid-template-rows: 1px minmax(145px, 1fr) 11px 8px; align-content: center; gap: 4px; min-height: 0; }
.logistics-route { margin: 0; }
.logistics-slots { font-size: 6px; }
.logistics-route i:not(.is-live) { width: 4px; height: 4px; background: #777a73; box-shadow: none; animation: none; }
.logistics-route i.is-live { background: var(--accent); box-shadow: 0 0 0 2px rgba(240,138,59,.09); }
.logistics-stage {
  position: relative;
  display: block;
  min-height: 70px;
  overflow: hidden;
  border: 1px solid rgba(205,207,200,.14);
  background: radial-gradient(circle at 50% 48%, rgba(77,82,75,.18), rgba(7,8,7,.72));
}
.logistics-stage canvas { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; }
.logistics-stage > b {
  position: absolute;
  z-index: 3;
  top: 3px;
  left: 4px;
  color: rgba(210,212,205,.58);
  font: 5px var(--mono);
  font-weight: 400;
  letter-spacing: .08em;
}
.logistics-gate {
  position: absolute;
  z-index: 3;
  right: 3px;
  bottom: 2px;
  padding-left: 4px;
  border-left: 5px solid var(--accent);
  color: var(--fg-mute);
  font: 5px var(--mono);
  font-style: normal;
}
.logistics-stage-scan {
  display: none;
}
.logistics-stage-status { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; }
.logistics-stage-status b, .logistics-stage-status small { overflow: hidden; font: 5px var(--mono); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.logistics-stage-status b { color: var(--fg-dim); }
.logistics-stage-status small { color: #94b783; }
.logistics-stage.is-optimizing { border-color: rgba(205,207,200,.14); box-shadow: none; }
.demo-screen-action { display: none; }
@keyframes logisticsStageScan { 0%, 100% { left: 5%; opacity: .2; } 50% { left: 94%; opacity: .9; } }

@media (max-width: 900px) {
  .demo-preview { grid-template-columns: 1fr; grid-template-rows: auto 680px; height: auto; min-height: 0; }
  .demo-preview-copy { position: relative; z-index: auto; inset: auto; display: flex; flex-direction: column; width: auto; padding: 30px 26px 28px; border-top: 0; border-right: 0; border-bottom: 1px solid var(--line-strong); background: #080808; }
  .demo-preview-copy h2 { margin: 15px 0 12px; }
  .demo-preview-copy .demo-flow-note, .demo-preview-copy .demo-launch { margin-top: 24px; }
  .demo-preview-copy .demo-access-note { margin-top: 12px; }
  .demo-preview-screen { grid-template-rows: 44px minmax(0, 1fr) 68px; height: 680px; min-height: 680px; }
  .motion-propagation { left: 50%; }
  .motion-panel-head { right: 14px; left: 14px; }
  .motion-build-phases { left: 14px; }
  .motion-earthwork-callout { left: 16px; bottom: 130px; }
  .motion-model-state { right: 15px; bottom: 130px; }
}

@media (max-width: 720px) {
  .demo-preview { grid-template-rows: auto auto; }
  .demo-preview-screen { grid-template-rows: 42px minmax(0, 1fr) 58px; height: clamp(570px, 150vw, 650px); min-height: 570px; }
  .demo-preview-copy { padding: 30px 22px 28px; }
  .demo-preview-copy h2 { margin-top: 16px; font-size: clamp(36px, 11vw, 48px); }
  .demo-preview-copy > p { max-width: none; font-size: 14px; line-height: 1.55; }
  .demo-preview-copy .demo-flow-note { flex-wrap: wrap; row-gap: 6px; white-space: normal; }
  .demo-preview-copy .demo-launch { min-height: 60px; }
  .demo-screen-bar { padding: 0 12px; }
  .motion-model { inset: 0; width: 100%; height: 100%; }
  .motion-panel-head { top: 11px; right: 12px; left: 12px; font-size: 7px; }
  .motion-build-phases { top: 29px; left: 12px; }
  .motion-earthwork-callout { top: 48px; right: 12px; bottom: auto; left: 12px; width: max-content; max-width: calc(100% - 24px); padding: 7px 9px; }
  .motion-earthwork-callout b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .motion-earthwork-callout em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .motion-model-state { display: none; }
  .motion-propagation { top: auto; bottom: 190px; left: 50%; }
  .motion-propagation-core { padding: 4px 7px; }
  .motion-outputs {
    right: 8px;
    bottom: 8px;
    left: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 6px;
    height: 176px;
  }
  .motion-output {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 7px;
    padding: 8px 9px 7px;
    border: 1px solid rgba(207,209,202,.13);
    background: rgba(7,7,7,.92);
  }
  .motion-output-head { padding: 0; }
  .motion-output-head b { font-size: 7px; letter-spacing: .08em; }
  .motion-output-head i { padding: 1px 3px; font-size: 5px; }
  .motion-output-meta { display: grid; align-content: end; gap: 3px; padding: 0; }
  .webgl-ready .motion-output-meta b { font-size: 12px; }
  .webgl-ready .motion-output-meta small { font-size: 5.5px; }
  .motion-output > svg, .plan-workspace, .sequence-workspace, .bom-table, .logistics-workspace { display: none; }
}

@media (max-width: 420px) {
  .demo-preview-screen { height: clamp(570px, 154vw, 620px); }
  .motion-output-head i { display: none; }
  .motion-outputs { height: 168px; }
  .motion-propagation { bottom: 182px; }
}

/* ---------------- focused compiler tour --------------------------------- */
.demo-preview {
  grid-template-rows: 950px;
  height: 950px;
  min-height: 950px;
}
.demo-preview-copy {
  top: 68px;
  bottom: 82px;
  left: 24px;
  width: min(36%, 560px);
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(245,244,240,.2);
  background: linear-gradient(180deg, rgba(15,16,15,.965), rgba(7,8,7,.985));
  box-shadow: inset 0 2px rgba(240,138,59,.58), 0 28px 70px rgba(0,0,0,.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.demo-preview-copy h2 { max-width: 500px; margin: 12px 0 9px; font-size: clamp(27px, 2.35vw, 36px); line-height: 1.02; }
.demo-preview-copy > p { max-width: 520px; font-size: 11.5px; line-height: 1.45; }
.demo-preview-copy .demo-flow-note { min-height: 14px; margin-top: 8px; white-space: normal; line-height: 1.45; }
.demo-preview-copy .demo-launch { flex: 0 0 auto; margin-top: 12px; }
.demo-preview-copy .demo-access-note { flex: 0 0 auto; margin-top: 9px; }
.demo-preview-screen {
  grid-template-rows: 44px minmax(0, 1fr) 72px;
  height: 950px;
  min-height: 950px;
  cursor: default;
}
.demo-screen-bar {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px;
}
.demo-screen-summary { white-space: nowrap; }
.demo-screen-open {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(245,244,240,.28);
  background: transparent;
  color: var(--fg-dim);
  font: 7px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: border-color 150ms, background 150ms, color 150ms;
}
.demo-screen-open:hover { border-color: var(--accent); background: var(--accent); color: #050505; }
.demo-screen-open i { width: auto; height: auto; background: none; color: inherit; font-size: 13px; font-style: normal; }
.compiler-motion { position: relative; display: block; }
.motion-model {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
}
.motion-panel-head { top: 14px; right: 18px; left: 18px; }
.motion-panel-head strong { color: var(--fg-mute); font: inherit; font-weight: 400; }
.motion-build-phases { top: 31px; left: 18px; }
.motion-earthwork-callout { right: 18px; bottom: 18px; left: auto; }
.motion-model-state { top: 48px; right: 18px; bottom: auto; }
.motion-propagation { top: 51%; left: 68%; }
.motion-chapter-status {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  min-height: 34px;
  margin-top: 14px;
  padding: 9px 0 7px;
  border-top: 1px solid rgba(245,244,240,.12);
}
.motion-chapter-status > span { display: grid; gap: 5px; min-width: 0; }
.motion-chapter-status b { color: var(--fg); font: 8px var(--mono); font-weight: 400; letter-spacing: .12em; white-space: nowrap; }
.motion-chapter-status small { overflow: hidden; color: var(--fg-mute); font: 6px var(--mono); letter-spacing: .1em; text-overflow: ellipsis; white-space: nowrap; }
.motion-chapter-status em { flex: 0 0 auto; color: #8dac83; font: 6px var(--mono); font-style: normal; letter-spacing: .12em; white-space: nowrap; }
.demo-preview.is-tour-paused .motion-chapter-status em { color: var(--accent); }
.motion-chapter-nav {
  position: static;
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  margin-top: 7px;
  overflow: hidden;
  border: 1px solid rgba(245,244,240,.14);
  background: rgba(6,6,6,.62);
  flex-direction: column;
}
.motion-chapter-nav button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 10px 0 0;
  border: 0;
  border-bottom: 1px solid rgba(245,244,240,.1);
  background: transparent;
  color: var(--fg-mute);
  text-align: left;
  transition: background 180ms, color 180ms, box-shadow 180ms;
}
.motion-chapter-nav button:hover { background: rgba(245,244,240,.04); color: var(--fg); }
.motion-chapter-nav button[aria-expanded="true"] { background: rgba(240,138,59,.07); color: var(--fg); box-shadow: inset 2px 0 var(--accent); }
.motion-chapter-nav button[aria-expanded="true"]::after { content: "−"; color: var(--accent); font: 12px var(--mono); }
.motion-chapter-nav button[aria-expanded="false"]::after { content: "+"; color: var(--fg-mute); font: 11px var(--mono); }
.motion-chapter-nav button::after { grid-column: 3; grid-row: 1; }
.motion-chapter-nav small { display: grid; align-self: stretch; place-items: center; border-right: 1px solid rgba(245,244,240,.08); color: var(--accent); font: 10px var(--mono); letter-spacing: .08em; }
.motion-chapter-nav b { overflow: hidden; font: 13px var(--sans); font-weight: 450; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.motion-chapter-nav i { display: none; }
.motion-explore-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 15px; }
.motion-explore-label b { color: var(--fg-dim); font: 7px var(--mono); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.motion-explore-label small { color: var(--accent); font: 5px var(--mono); letter-spacing: .1em; white-space: nowrap; }
.motion-chapter-detail {
  display: flex;
  flex: 1 1 auto;
  min-height: 295px;
  padding: 11px 11px 8px;
  overflow: hidden;
  border-bottom: 1px solid rgba(245,244,240,.1);
  background: linear-gradient(180deg, rgba(20,21,20,.78), rgba(8,9,8,.42));
  flex-direction: column;
}
.motion-chapter-detail.is-opening { animation: motionAccordionOpen 300ms cubic-bezier(.2,.72,.2,1) both; }
.motion-chapter-copy { display: block; flex: 0 0 auto; }
.motion-chapter-copy h3 { margin: 0 0 6px; color: var(--fg); font: 500 21px/1.05 var(--display); letter-spacing: -.025em; }
.motion-chapter-copy p { margin: 0; color: var(--fg-dim); font-size: 10.5px; line-height: 1.4; }
.motion-output-host {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-height: 176px;
  margin-top: 9px;
  overflow: hidden;
  border-top: 1px solid rgba(245,244,240,.1);
}
.motion-outputs {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
  filter: none;
}
.motion-output,
.motion-output:not(.is-active) { display: none; }
.motion-output.is-active {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 9px;
  width: 100%;
  height: 100%;
  padding: 11px 0 5px;
  border: 0;
  background: transparent;
  box-shadow: none;
  animation: motionChapterIn 360ms cubic-bezier(.2,.72,.2,1) both;
}
.motion-output-plan.is-active { animation: none; }
.motion-output.is-active::before,
.motion-output.is-active::after { display: none; }
.motion-output.is-active .motion-output-head { padding: 0; }
.motion-output.is-active .motion-output-head b { font-size: 9px; letter-spacing: .13em; }
.motion-output.is-active .motion-output-head i { padding: 3px 6px; font-size: 6px; opacity: 1; }
.motion-output.is-active .motion-output-meta { padding: 0; }
.webgl-ready .motion-output.is-active .motion-output-meta b { font-size: 16px; }
.webgl-ready .motion-output.is-active .motion-output-meta small { font-size: 7px; letter-spacing: .08em; }
.motion-output.is-active .plan-workspace,
.motion-output.is-active .sequence-workspace,
.motion-output.is-active .bom-table,
.motion-output.is-active .logistics-workspace { display: grid; min-height: 0; }
.motion-output.is-active .plan-workspace { grid-template-rows: 21px minmax(0, 1fr) 13px; }
.motion-output.is-active .plan-sheet-status b { font-size: 7px; }
.motion-output.is-active .plan-sheet-status i,
.motion-output.is-active .plan-sheet-status em,
.motion-output.is-active .plan-sheet-status u { font-size: 6px; }
.motion-output.is-active .plan-layer-strip { font-size: 6px; }
.motion-output.is-active .sequence-workspace { grid-template-rows: 24px minmax(0, 1fr); }
.motion-output.is-active .sequence-queue-head b { font-size: 7px; }
.motion-output.is-active .sequence-queue-head small { font-size: 6px; }
.motion-output.is-active .sequence-task-row { min-height: 40px; }
.motion-output.is-active .sequence-order { font-size: 7px; }
.motion-output.is-active .sequence-task-copy b { font-size: 9px; }
.motion-output.is-active .sequence-task-copy small,
.motion-output.is-active .sequence-task-time b,
.motion-output.is-active .sequence-task-time em { font-size: 6px; }
.motion-output.is-active .bom-table { grid-template-rows: 21px 18px repeat(6, minmax(0, 1fr)) 31px; min-height: 0; }
.motion-output.is-active .bom-receipt-head b { font-size: 7px; }
.motion-output.is-active .bom-receipt-head small { font-size: 6px; }
.motion-output.is-active .bom-column-head,
.motion-output.is-active .bom-table > i { grid-template-columns: 46px minmax(0, 1fr) 58px 92px 54px 68px; padding-inline: 5px; }
.motion-output.is-active .bom-column-head { font-size: 5.5px; }
.motion-output.is-active .bom-table > i { font-size: 7px; }
.motion-output.is-active .bom-table > i u,
.motion-output.is-active .bom-table > i s { font-size: 6px; }
.motion-output.is-active .bom-total { font-size: 6px; }
.motion-output.is-active .bom-total b { font-size: 13px; }
.motion-output.is-active .logistics-workspace { grid-template-rows: 2px minmax(0, 1fr) 15px 10px; }
.motion-output.is-active .logistics-stage { min-height: 0; }
.motion-output.is-active .logistics-stage > b,
.motion-output.is-active .logistics-gate,
.motion-output.is-active .logistics-stage-status b,
.motion-output.is-active .logistics-stage-status small { font-size: 7px; }
.motion-output.is-active .logistics-slots { font-size: 7px; }
@keyframes motionChapterIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes motionAccordionOpen {
  from { opacity: .5; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) {
  .grade-demo-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 20px;
    padding: 16px 20px;
  }
  .grade-demo-definition { grid-column: 1 / -1; grid-template-columns: minmax(200px, .7fr) minmax(0, 1.3fr); gap: 18px; }
  .demo-preview { grid-template-rows: auto 760px; height: auto; min-height: 0; }
  .demo-preview-copy { position: relative; inset: auto; width: auto; padding: 30px 26px 28px; overflow: visible; border: 0; border-bottom: 1px solid var(--line-strong); background: #080808; box-shadow: none; backdrop-filter: none; }
  .demo-preview-copy h2 { max-width: 700px; }
  .demo-preview-copy > p { max-width: 680px; }
  .demo-preview-copy .motion-chapter-status { max-width: 680px; }
  .demo-preview-copy .motion-chapter-nav { display: flex; max-width: 680px; margin: 7px 0 0; }
  .demo-preview-copy .motion-chapter-nav button { border-right: 0; }
  .demo-preview-screen { grid-template-rows: 44px minmax(0, 1fr) 68px; height: 760px; min-height: 760px; }
  .motion-chapter-detail { flex: none; min-height: 320px; }
  .motion-output-host { min-height: 190px; }
  .motion-model { inset: 0; width: auto; height: auto; }
  .motion-panel-head { right: 14px; left: 14px; }
  .motion-build-phases { left: 14px; }
  .motion-earthwork-callout { right: auto; left: 15px; bottom: 16px; }
  .motion-model-state { top: 44px; right: 15px; bottom: auto; }
  .motion-propagation { top: 43%; left: 46%; }
  .motion-outputs { width: 100%; height: 100%; }
  .motion-output.is-active { padding: 11px 12px 9px; }
}

@media (max-width: 720px) {
  .grade-demo-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px 14px; }
  .grade-demo-definition { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .grade-demo-definition b { font-size: 20px; }
  .grade-demo-definition small { font-size: 10px; }
  .demo-preview-screen { grid-template-rows: 42px minmax(0, 1fr) 58px; height: 720px; min-height: 720px; }
  .demo-screen-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 0 10px; }
  .demo-screen-summary { display: none; }
  .demo-screen-open { height: 26px; padding-inline: 8px; font-size: 6px; }
  .motion-model { inset: 0; width: auto; height: auto; }
  .motion-earthwork-callout { top: 46px; right: 12px; bottom: auto; left: 12px; }
  .motion-propagation { top: 43%; bottom: auto; left: 50%; }
  .demo-preview-copy .motion-chapter-status { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .demo-preview-copy .motion-chapter-status em { display: none; }
  .demo-preview-copy .motion-chapter-nav button { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 7px; padding: 0 8px 0 0; }
  .demo-preview-copy .motion-chapter-nav b { font-size: 12px; letter-spacing: 0; }
  .demo-preview-copy .motion-chapter-nav small { font-size: 9px; }
  .demo-preview-copy .motion-chapter-nav i { display: none; }
  .motion-chapter-detail { min-height: 310px; }
  .motion-output-host { min-height: 180px; }
  .motion-outputs { width: 100%; height: 100%; }
  .motion-output.is-active { grid-template-rows: auto minmax(0, 1fr) auto; gap: 7px; padding: 9px 10px 8px; }
  .motion-output.is-active .motion-output-head b { font-size: 7px; }
  .motion-output.is-active .motion-output-head i { display: block; font-size: 5px; }
  .webgl-ready .motion-output.is-active .motion-output-meta b { font-size: 12px; }
  .webgl-ready .motion-output.is-active .motion-output-meta small { font-size: 5.5px; }
  .motion-output.is-active .plan-workspace,
  .motion-output.is-active .sequence-workspace,
  .motion-output.is-active .bom-table,
  .motion-output.is-active .logistics-workspace { display: grid; }
  .motion-output.is-active .sequence-task-row { min-height: 31px; }
  .motion-output.is-active .bom-column-head,
  .motion-output.is-active .bom-table > i { grid-template-columns: 32px minmax(0, 1fr) 40px 55px 44px 52px; gap: 2px; padding-inline: 2px; }
  .motion-output.is-active .bom-table > i { font-size: 5.5px; }
  .motion-output.is-active .bom-table > i u,
  .motion-output.is-active .bom-table > i s { font-size: 5px; }
}

@media (max-width: 420px) {
  .grade-demo-bar { grid-template-columns: minmax(0, 1fr); }
  .grade-demo-status { grid-row: 3; }
  .demo-preview-screen { height: 700px; min-height: 700px; }
  .motion-model { bottom: 0; }
  .motion-chapter-detail { min-height: 300px; }
  .demo-preview-copy .motion-chapter-nav button { padding-inline: 6px; }
  .demo-preview-copy .motion-chapter-nav b { font-size: 11px; }
}

/* ---------------- compiled views workbench ---------------- */
.demo-preview-copy {
  top: 48px;
  bottom: 48px;
  width: min(38%, 600px);
  padding: 18px;
}
.views-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex: 0 0 auto;
  min-height: 38px;
}
.views-panel-head .motion-explore-label {
  display: grid;
  justify-items: end;
  gap: 4px;
  margin: 0;
  text-align: right;
}
.views-panel-head .motion-explore-label b { color: rgba(239,238,232,.68); font-size: 7.5px; }
.views-panel-head .motion-explore-label small { font-size: 6px; }
.motion-chapter-nav,
.demo-preview-copy .motion-chapter-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  min-height: 66px;
  margin: 12px 0 0;
  overflow: visible;
  border: 1px solid rgba(245,244,240,.18);
  background: rgba(3,4,3,.72);
}
.motion-chapter-nav button,
.demo-preview-copy .motion-chapter-nav button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: 4px 7px;
  min-height: 64px;
  padding: 9px 8px;
  border: 0;
  border-right: 1px solid rgba(245,244,240,.1);
  border-bottom: 2px solid transparent;
  background: transparent;
  color: rgba(239,238,232,.55);
  box-shadow: none;
}
.motion-chapter-nav button:last-child { border-right: 0; }
.motion-chapter-nav button::after { display: none; content: none; }
.motion-chapter-nav button small,
.demo-preview-copy .motion-chapter-nav button small {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: stretch;
  border: 0;
  border-right: 1px solid rgba(245,244,240,.09);
  color: rgba(240,138,59,.76);
  font-size: 8px;
}
.motion-chapter-nav button b,
.demo-preview-copy .motion-chapter-nav button b {
  grid-column: 2;
  overflow: visible;
  color: inherit;
  font: 500 11px/1.1 var(--sans);
  text-overflow: clip;
}
.motion-chapter-nav button i,
.demo-preview-copy .motion-chapter-nav button i {
  display: block;
  grid-column: 2;
  overflow: hidden;
  color: rgba(207,209,202,.38);
  font: 6px var(--mono);
  font-style: normal;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.motion-chapter-nav button:hover { background: rgba(245,244,240,.045); color: var(--fg); }
.motion-chapter-nav button[aria-selected="true"] {
  border-bottom-color: var(--accent);
  background: linear-gradient(180deg, rgba(240,138,59,.095), rgba(240,138,59,.025));
  color: var(--fg);
  box-shadow: none;
}
.motion-chapter-nav button[aria-selected="true"] i { color: #9ab78d; }
.motion-chapter-nav button:focus-visible { position: relative; z-index: 2; outline: 1px solid var(--accent); outline-offset: -2px; }
.motion-chapter-detail {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 12px;
  padding: 15px;
  overflow: hidden;
  border: 1px solid rgba(245,244,240,.17);
  background: linear-gradient(180deg, rgba(18,20,18,.94), rgba(6,7,6,.98));
  flex-direction: column;
}
.motion-chapter-detail.is-opening { animation: none; }
.motion-chapter-copy {
  display: grid;
  grid-template-columns: minmax(150px, .78fr) minmax(0, 1.22fr);
  align-items: start;
  gap: 7px 18px;
  flex: 0 0 auto;
}
.motion-chapter-copy h3 { margin: 0; font-size: 23px; line-height: 1.02; }
.motion-chapter-copy p { margin: 0; color: rgba(219,220,214,.65); font-size: 11px; line-height: 1.5; }
.motion-chapter-copy .demo-flow-note { grid-column: 1 / -1; min-height: 0; margin: 2px 0 0; font-size: 6.5px; }
.motion-output-host {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-height: 355px;
  margin-top: 12px;
  padding-top: 11px;
  overflow: hidden;
  border-top: 1px solid rgba(245,244,240,.13);
}
.motion-outputs { flex: 1 1 auto; min-width: 0; min-height: 0; }
.motion-output.is-active {
  grid-template-rows: 22px minmax(0, 1fr) 28px;
  gap: 9px;
  padding: 0;
  animation: none;
}
.motion-output.is-active .motion-output-head { align-items: center; padding: 0 2px 6px; border-bottom: 1px solid rgba(245,244,240,.08); }
.motion-output.is-active .motion-output-head b { font-size: 9px; letter-spacing: .1em; }
.motion-output.is-active .motion-output-head i { font-size: 6px; }
.motion-output.is-active .motion-output-meta { align-items: end; padding: 5px 2px 0; border-top: 1px solid rgba(245,244,240,.08); }
.webgl-ready .motion-output.is-active .motion-output-meta b { font-size: 15px; }
.webgl-ready .motion-output.is-active .motion-output-meta small { color: rgba(207,209,202,.55); font-size: 7px; }
.motion-output.is-active .plan-workspace { grid-template-rows: 28px minmax(0, 1fr) 19px; gap: 5px; }
.motion-output.is-active .plan-sheet-status { padding: 0 4px 5px; }
.motion-output.is-active .plan-sheet-status b { font-size: 8px; }
.motion-output.is-active .plan-sheet-status i { font-size: 7px; }
.motion-output.is-active .plan-sheet-status em,
.motion-output.is-active .plan-sheet-status u { font-size: 6.5px; }
.motion-output-plan.is-active svg { border: 1px solid rgba(245,244,240,.1); background: #050505; }
.plan-contour { stroke: rgba(142,154,145,.5); }
.plan-site-line { stroke: #a7aaa4; }
.plan-building-ghost { stroke: rgba(232,231,224,.72); }
.motion-output.is-active .plan-layer-strip i { font-size: 6px; }
.motion-output.is-active .sequence-workspace { grid-template-rows: 30px minmax(0, 1fr); gap: 7px; }
.motion-output.is-active .sequence-queue-head { padding: 0 5px 7px; }
.motion-output.is-active .sequence-queue-head b { font-size: 8px; }
.motion-output.is-active .sequence-queue-head small { font-size: 6.5px; }
.motion-output.is-active .sequence-column { gap: 6px; }
.motion-output.is-active .sequence-task-row { grid-template-columns: 38px minmax(0, 1fr) 68px; min-height: 55px; padding: 7px 8px 7px 0; }
.motion-output.is-active .sequence-order { font-size: 8px; }
.motion-output.is-active .sequence-task-copy { gap: 4px; padding-inline: 10px; }
.motion-output.is-active .sequence-task-copy b { color: rgba(239,238,232,.9); font-size: 10px; }
.motion-output.is-active .sequence-task-copy small { color: rgba(207,209,202,.5); font-size: 6.5px; }
.motion-output.is-active .sequence-task-time b { font-size: 7px; }
.motion-output.is-active .sequence-task-time em { font-size: 6px; }
.motion-output.is-active .bom-table { grid-template-rows: 28px 24px repeat(6, minmax(29px, 1fr)) 40px; }
.motion-output.is-active .bom-receipt-head { padding: 0 5px 7px; }
.motion-output.is-active .bom-receipt-head b { font-size: 8px; }
.motion-output.is-active .bom-receipt-head small { font-size: 6.5px; }
.motion-output.is-active .bom-column-head,
.motion-output.is-active .bom-table > i { grid-template-columns: 48px minmax(0, 1fr) 56px 82px 58px 70px; gap: 5px; padding-inline: 6px; }
.motion-output.is-active .bom-column-head { font-size: 6.5px; }
.motion-output.is-active .bom-table > i { font-size: 8px; }
.motion-output.is-active .bom-table > i u,
.motion-output.is-active .bom-table > i s { font-size: 7px; }
.motion-output.is-active .bom-table > i em { font-size: 8px; }
.motion-output.is-active .bom-total { padding: 7px 5px 0; font-size: 7px; }
.motion-output.is-active .bom-total small { font-size: 5.5px; }
.motion-output.is-active .bom-total b { font-size: 15px; }
.motion-output.is-active .logistics-workspace { grid-template-rows: 14px minmax(0, 1fr) 26px 38px; gap: 7px; }
.motion-output.is-active .logistics-route { position: relative; margin: 4px 50px 0; }
.motion-output.is-active .logistics-route::before,
.motion-output.is-active .logistics-route::after { position: absolute; top: -5px; color: rgba(207,209,202,.45); font: 5.5px var(--mono); letter-spacing: .07em; }
.motion-output.is-active .logistics-route::before { right: calc(100% + 8px); content: "SUPPLIER"; }
.motion-output.is-active .logistics-route::after { left: calc(100% + 8px); content: "SITE"; }
.motion-output.is-active .logistics-stage { border-color: rgba(205,207,200,.26); }
.motion-output.is-active .logistics-stage > b,
.motion-output.is-active .logistics-gate { padding: 5px 7px; background: rgba(5,5,5,.72); font-size: 7px; }
.motion-output.is-active .logistics-stage-status { padding-inline: 3px; border-bottom: 1px solid rgba(245,244,240,.07); }
.motion-output.is-active .logistics-stage-status b,
.motion-output.is-active .logistics-stage-status small { font-size: 7px; }
.motion-output.is-active .logistics-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; }
.motion-output.is-active .logistics-slots i { display: grid; gap: 3px; padding: 5px 7px; border: 1px solid rgba(245,244,240,.1); color: rgba(239,238,232,.78); font: 7px var(--mono); font-style: normal; }
.motion-output.is-active .logistics-slots i::before { color: rgba(207,209,202,.4); font-size: 5px; letter-spacing: .08em; }
.motion-output.is-active .logistics-slots i:nth-child(1)::before { content: "LOAD 01"; }
.motion-output.is-active .logistics-slots i:nth-child(2)::before { content: "LOAD 02"; }
.motion-output.is-active .logistics-slots i:nth-child(3)::before { content: "LOAD 03"; }

@media (max-width: 900px) {
  .demo-preview-copy { width: auto; padding: 24px; }
  .views-panel-head { max-width: 760px; }
  .demo-preview-copy .motion-chapter-nav { max-width: 760px; }
  .motion-chapter-detail { min-height: 520px; }
  .motion-output-host { min-height: 365px; }
}

@media (max-width: 720px) {
  .views-panel-head { align-items: flex-start; flex-direction: column; gap: 9px; }
  .views-panel-head .motion-explore-label { justify-items: start; text-align: left; }
  .motion-chapter-nav,
  .demo-preview-copy .motion-chapter-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .motion-chapter-nav button:nth-child(2) { border-right: 0; }
  .motion-chapter-nav button:nth-child(-n+2) { border-bottom-color: rgba(245,244,240,.1); }
  .motion-chapter-nav button[aria-selected="true"] { border-bottom-color: var(--accent); }
  .motion-chapter-copy { grid-template-columns: minmax(0, 1fr); }
  .motion-chapter-copy .demo-flow-note { grid-column: 1; }
  .motion-chapter-detail { min-height: 535px; padding: 13px; }
  .motion-output-host { min-height: 365px; }
  .motion-output.is-active .bom-column-head,
  .motion-output.is-active .bom-table > i { grid-template-columns: 38px minmax(0, 1fr) 52px 62px; }
  .motion-output.is-active .bom-column-head u,
  .motion-output.is-active .bom-column-head s,
  .motion-output.is-active .bom-table > i u,
  .motion-output.is-active .bom-table > i s { display: none; }
}

@media (max-width: 420px) {
  .demo-preview-copy { padding: 20px 14px 24px; }
  .motion-chapter-nav button,
  .demo-preview-copy .motion-chapter-nav button { min-height: 58px; padding: 7px 6px; }
  .motion-chapter-detail { min-height: 510px; }
  .motion-output-host { min-height: 345px; }
  .motion-output.is-active .sequence-task-row { grid-template-columns: 30px minmax(0, 1fr) 56px; min-height: 51px; }
  .motion-output.is-active .sequence-task-copy b { font-size: 9px; }
  .motion-output.is-active .plan-sheet-status > span u { display: none; }
}

/* ---------------- coordinated hero plan ---------------- */
.hero-plan-sheet { background: #050605; }
.hero-plan-sheet text { fill: rgba(225,226,219,.72); font-family: var(--mono); font-size: 3.2px; letter-spacing: .035em; }
.hero-plan-heading { fill: rgba(245,244,240,.92) !important; font-size: 4.4px !important; font-weight: 600; letter-spacing: .1em !important; }
.hero-plan-revision { fill: #91af83 !important; font-size: 2.7px !important; letter-spacing: .08em !important; }
.hero-plan-property { fill: rgba(255,255,255,.008); stroke: rgba(191,196,188,.58); stroke-width: .65; stroke-dasharray: 6 2 1 2; }
.hero-plan-contours { fill: none; stroke: rgba(115,133,119,.34); stroke-width: .52; }
.hero-plan-pad { fill: rgba(240,138,59,.018); stroke: rgba(240,138,59,.4); stroke-width: .65; stroke-dasharray: 4 2; }
.hero-plan-wall { fill: rgba(233,232,225,.018); stroke: #ddddd7; stroke-width: 2.4; stroke-linecap: square; stroke-linejoin: miter; }
.hero-plan-opening { fill: none; stroke: #86a3aa; stroke-width: 1.8; stroke-linecap: square; }
.hero-plan-door { fill: none; stroke: #d8d8d2; stroke-width: .7; }
.hero-plan-room { fill: rgba(225,226,219,.45) !important; font-size: 2.7px !important; letter-spacing: .1em !important; text-anchor: middle; }
.hero-plan-water, .hero-plan-sanitary, .hero-plan-power { fill: none; stroke-linecap: square; stroke-linejoin: bevel; }
.hero-plan-water { stroke: #62afe9; stroke-width: 1.15; }
.hero-plan-sanitary { stroke: #b7bec1; stroke-width: 1.35; stroke-dasharray: 5 2; }
.hero-plan-power { stroke: #e7c65d; stroke-width: .9; stroke-dasharray: 2 1; }
.hero-plan-water-node, .hero-plan-sanitary-node { fill: #050605; stroke-width: 1; }
.hero-plan-water-node { stroke: #62afe9; }
.hero-plan-sanitary-node { stroke: #b7bec1; }
.hero-plan-panel { fill: rgba(231,198,93,.14); stroke: #e7c65d; stroke-width: .75; }
.hero-plan-water-label { fill: #62afe9 !important; font-size: 2.8px !important; }
.hero-plan-sanitary-label { fill: #c1c6c8 !important; font-size: 2.8px !important; }
.hero-plan-power-label { fill: #e7c65d !important; font-size: 2.7px !important; }
.hero-plan-grade { fill: none; stroke: #71a894; stroke-width: .75; stroke-dasharray: 2 1; }
.hero-plan-arrowhead { fill: #71a894; }
.hero-plan-spot { fill: #86bca8 !important; font-size: 2.6px !important; }
.hero-plan-balance { fill: var(--accent) !important; font-size: 2.8px !important; letter-spacing: .07em !important; }
.hero-plan-dimension { fill: none; stroke: rgba(190,192,186,.62); stroke-width: .48; }
.hero-plan-dimension-text { fill: rgba(220,221,214,.68) !important; font-size: 2.8px !important; text-anchor: middle; }
.hero-plan-vertical { transform-box: fill-box; transform-origin: center; transform: rotate(90deg); }
.hero-plan-north { fill: none; stroke: #ecece7; stroke-width: .75; }
.hero-plan-north-text { fill: #ecece7 !important; font-size: 3px !important; text-anchor: middle; }
.hero-plan-section-mark { fill: #050605; stroke: var(--accent); stroke-width: .9; }
.hero-plan-section-text { fill: var(--accent) !important; font-size: 3px !important; text-anchor: middle; }
.hero-plan-section-line { fill: none; stroke: rgba(240,138,59,.48); stroke-width: .55; stroke-dasharray: 3 2; }
.hero-plan-detail-frame, .hero-plan-notes rect { fill: rgba(8,10,8,.82); stroke: rgba(205,207,200,.3); stroke-width: .6; }
.hero-plan-detail-title { fill: rgba(245,244,240,.88) !important; font-size: 2.8px !important; letter-spacing: .07em !important; }
.hero-plan-section-ground { stroke: rgba(170,174,167,.55); stroke-width: .55; }
.hero-plan-section-slab { fill: rgba(240,138,59,.05); stroke: var(--accent); stroke-width: .8; }
.hero-plan-section-drywall { fill: rgba(216,212,200,.1); stroke: #d8d4c8; }
.hero-plan-section-insulation { fill: rgba(201,138,151,.18); stroke: #c98a97; }
.hero-plan-section-sheathing { fill: rgba(119,121,113,.18); stroke: #8d9088; }
.hero-plan-section-wrb { fill: rgba(103,142,124,.17); stroke: #7d9c89; }
.hero-plan-section-siding { fill: rgba(89,99,93,.22); stroke: #8ca095; }
.hero-plan-roof-profile { fill: none; stroke: #deddd8; stroke-width: 1.05; }
.hero-plan-rafters { fill: none; stroke: var(--accent); stroke-width: .65; }
.hero-plan-attic-services { fill: none; stroke: #aa83c8; stroke-width: 1.05; }
.hero-plan-service-node { fill: #050605; stroke: #e7c65d; stroke-width: .7; }
.hero-plan-section-label { fill: rgba(218,220,213,.6) !important; font-size: 2.35px !important; }
.hero-plan-section-note { fill: #91af83 !important; font-size: 2.45px !important; letter-spacing: .06em !important; }
.hero-plan-notes text { fill: rgba(216,218,211,.58); font-size: 2.25px; }
.hero-plan-titleblock rect { fill: rgba(3,4,3,.97); stroke: rgba(152,170,179,.68); stroke-width: .7; }
.hero-plan-titleblock path { fill: none; stroke: rgba(152,170,179,.5); stroke-width: .5; }
.hero-plan-titleblock text { fill: rgba(177,192,199,.68); font-size: 2.35px; }
.hero-plan-titleblock .hero-plan-sheet-code { fill: var(--accent); font-size: 6.4px; font-weight: 600; }
.hero-plan-titleblock .hero-plan-sheet-title { fill: rgba(245,244,240,.92); font-size: 3px; font-weight: 600; }
.motion-output-plan.is-active .plan-workspace { grid-template-rows: 27px minmax(0, 1fr) 18px; }
.motion-output-plan.is-active .hero-plan-sheet { width: 100%; height: 100%; border-color: rgba(164,177,183,.28); }
.motion-output-plan.is-active .plan-layer-strip { padding: 0 3px; }

/* ---------------- dependency path ---------------- */
.motion-output-sequence.is-active .sequence-workspace { grid-template-rows: 31px minmax(0, 1fr); }
.motion-output-sequence.is-active .sequence-queue-head b { color: rgba(245,244,240,.9); letter-spacing: .11em; }
.motion-output-sequence.is-active .sequence-queue-head small { color: #9ab78d; }
.motion-output-sequence.is-active .sequence-column {
  position: relative;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 2px 2px 2px 43px;
  overflow: hidden;
}
.motion-output-sequence.is-active .sequence-column::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 22px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), rgba(240,138,59,.24) 55%, rgba(207,209,202,.18));
  box-shadow: 0 0 10px rgba(240,138,59,.12);
}
.motion-output-sequence.is-active .sequence-task-row {
  position: relative;
  grid-template-columns: 38px minmax(0, 1fr) 70px;
  min-height: 52px;
  padding: 7px 9px 7px 0;
  overflow: visible;
  border: 1px solid rgba(207,209,202,.18);
  border-left: 2px solid rgba(207,209,202,.36);
  background: linear-gradient(90deg, rgba(21,23,21,.98), rgba(8,9,8,.96));
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.motion-output-sequence.is-active .sequence-task-row::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 21px;
  border-top: 1px solid rgba(240,138,59,.5);
}
.motion-output-sequence.is-active .sequence-task-row::after {
  content: attr(data-dependency);
  position: absolute;
  top: -8px;
  right: auto;
  bottom: auto;
  left: -39px;
  z-index: 3;
  width: auto;
  height: auto;
  padding: 2px 4px;
  border: 1px solid rgba(240,138,59,.28);
  background: #080908;
  color: rgba(240,170,111,.84);
  font: 5.5px var(--mono);
  letter-spacing: .06em;
  white-space: nowrap;
  animation: none;
  transform: none;
}
.motion-output-sequence.is-active .sequence-order {
  align-self: center;
  width: 28px;
  height: 28px;
  margin-left: 5px;
  border: 1px solid rgba(207,209,202,.32);
  background: #090a09;
  color: rgba(239,238,232,.68);
  font-size: 8px;
  border-radius: 50%;
}
.motion-output-sequence.is-active .sequence-task-row.is-active {
  border-color: rgba(240,138,59,.72);
  border-left-color: var(--accent);
  background: linear-gradient(90deg, rgba(82,44,19,.38), rgba(17,14,11,.97));
  box-shadow: inset 0 0 0 1px rgba(240,138,59,.08), 0 10px 28px rgba(240,138,59,.08);
}
.motion-output-sequence.is-active .sequence-task-row.is-active .sequence-order {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 4px rgba(240,138,59,.08), 0 0 14px rgba(240,138,59,.16);
}
.motion-output-sequence.is-active .sequence-task-row.is-next {
  border-color: rgba(231,196,106,.38);
  border-left-color: #e7c46a;
}
.motion-output-sequence.is-active .sequence-task-row.is-complete { opacity: .72; }
.motion-output-sequence.is-active .sequence-task-row.is-complete .sequence-order { border-color: rgba(142,176,126,.6); color: #8eb07e; }

@media (max-width: 420px) {
  .motion-output-sequence.is-active .sequence-column { padding-left: 35px; }
  .motion-output-sequence.is-active .sequence-column::before { left: 18px; }
  .motion-output-sequence.is-active .sequence-task-row { grid-template-columns: 32px minmax(0, 1fr) 56px; }
  .motion-output-sequence.is-active .sequence-task-row::after { left: -33px; font-size: 5px; }
  .motion-output-sequence.is-active .sequence-order { width: 24px; height: 24px; margin-left: 4px; }
}

/* ---------------- single-canvas compiler ---------------- */
.demo-preview {
  display: block;
  height: 900px;
  min-height: 900px;
}
.demo-preview-screen {
  display: grid;
  grid-template-rows: 44px 112px minmax(0, 1fr);
  width: 100%;
  height: 900px;
  min-height: 900px;
  border: 0;
  background: #070807;
}
.compiler-viewbar {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(520px, 1.45fr) 188px;
  align-items: stretch;
  gap: 18px;
  min-width: 0;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(245,244,240,.16);
  background: rgba(8,9,8,.97);
  box-shadow: 0 14px 36px rgba(0,0,0,.24);
}
.compiler-view-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-content: center;
  align-items: baseline;
  gap: 5px 13px;
  min-width: 0;
  padding: 2px 0;
}
.compiler-view-copy .demo-kicker {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  color: var(--accent);
  font-size: 6.5px;
  letter-spacing: .15em;
  white-space: nowrap;
}
.compiler-view-copy .demo-kicker b { color: rgba(245,244,240,.72); font-weight: 400; }
.compiler-view-copy h3 {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: start;
  overflow: hidden;
  margin: 0;
  color: rgba(245,244,240,.94);
  font: 500 19px/1.04 var(--display);
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compiler-view-copy p {
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  margin: 0;
  color: rgba(207,209,202,.52);
  font-size: 8px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compiler-view-copy .demo-flow-note { display: none; }
.compiler-viewbar .motion-chapter-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-self: stretch;
  width: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(245,244,240,.16);
  background: rgba(3,4,3,.72);
}
.compiler-viewbar .motion-chapter-nav button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: 4px 7px;
  min-height: 0;
  padding: 8px 7px;
  border: 0;
  border-right: 1px solid rgba(245,244,240,.1);
  border-bottom: 2px solid transparent;
  background: transparent;
}
.compiler-viewbar .motion-chapter-nav button:last-child { border-right: 0; }
.compiler-viewbar .motion-chapter-nav button small {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: stretch;
  padding-right: 6px;
  border: 0;
  border-right: 1px solid rgba(245,244,240,.08);
  color: rgba(240,138,59,.72);
  font-size: 7px;
}
.compiler-viewbar .motion-chapter-nav button b {
  grid-column: 2;
  color: inherit;
  font: 500 11px/1 var(--sans);
}
.compiler-viewbar .motion-chapter-nav button i {
  display: block;
  grid-column: 2;
  overflow: hidden;
  color: rgba(207,209,202,.36);
  font: 5.5px var(--mono);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compiler-viewbar .motion-chapter-nav button[aria-selected="true"] {
  border-bottom-color: var(--accent);
  background: linear-gradient(180deg, rgba(240,138,59,.1), rgba(240,138,59,.02));
  color: var(--fg);
}
.compiler-viewbar .demo-launch {
  align-self: stretch;
  min-height: 0;
  margin: 0;
  padding: 10px 14px;
}
.compiler-viewbar .demo-launch > span { gap: 4px; font-size: 13px; }
.compiler-viewbar .demo-launch small { font-size: 6px; }
.compiler-viewbar .demo-launch > i { font-size: 20px; }
.compiler-motion {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 55% 35%, rgba(240,138,59,.06), transparent 34%),
    linear-gradient(180deg, #080908, #050605);
}
.motion-model {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  opacity: 0;
  transform: scale(.985);
  transition: opacity 260ms ease, transform 420ms cubic-bezier(.2,.75,.2,1);
  pointer-events: none;
}
.demo-preview-screen.is-model-view .motion-model {
  opacity: 1;
  transform: scale(1);
}
.motion-panel-head { top: 16px; right: 20px; left: 20px; }
.motion-build-phases { top: 34px; left: 20px; }
.motion-model-state { top: auto; right: 20px; bottom: 20px; }
.motion-earthwork-callout { right: auto; bottom: 20px; left: 20px; }
.motion-propagation {
  position: absolute;
  z-index: 4;
  top: auto;
  right: auto;
  bottom: 20px;
  left: 50%;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 200ms ease;
}
.demo-preview-screen.is-model-view .motion-propagation { opacity: 1; }
.motion-outputs {
  position: absolute;
  z-index: 5;
  inset: 18px 22px 16px;
  display: block;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: transparent;
  opacity: 1;
  transition: opacity 220ms ease;
}
.demo-preview-screen.is-model-view .motion-outputs {
  opacity: 0;
  pointer-events: none;
}
.motion-output,
.motion-output[aria-hidden="true"] {
  display: none;
}
.motion-output.is-active,
.motion-output.is-active[aria-hidden="false"] {
  display: grid;
  grid-template-rows: 28px minmax(0, 1fr) 34px;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  animation: motionCanvasViewIn 320ms cubic-bezier(.2,.72,.2,1) both;
}
.motion-output.is-active .motion-output-head {
  padding: 0 4px 8px;
  border-bottom: 1px solid rgba(245,244,240,.12);
}
.motion-output.is-active .motion-output-head b { font-size: 9px; }
.motion-output.is-active .motion-output-head i { font-size: 6px; }
.motion-output.is-active .motion-output-meta {
  padding: 7px 4px 0;
  border-top: 1px solid rgba(245,244,240,.1);
}
.webgl-ready .motion-output.is-active .motion-output-meta b { font-size: 17px; }
.webgl-ready .motion-output.is-active .motion-output-meta small { font-size: 7px; }
.motion-output.is-active .plan-workspace,
.motion-output.is-active .sequence-workspace,
.motion-output.is-active .bom-table,
.motion-output.is-active .logistics-workspace {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.motion-output-plan.is-active .plan-workspace { grid-template-rows: 30px minmax(0, 1fr) 22px; gap: 7px; }
.motion-output-plan.is-active .hero-plan-sheet { border: 0; }
.motion-output-sequence.is-active .sequence-workspace {
  grid-template-rows: 34px minmax(0, 1fr);
  gap: 12px;
  width: min(920px, 82%);
  margin: 0 auto;
}
.motion-output-sequence.is-active .sequence-column { gap: 13px; padding-left: 58px; }
.motion-output-sequence.is-active .sequence-column::before { left: 27px; }
.motion-output-sequence.is-active .sequence-task-row {
  grid-template-columns: 52px minmax(0, 1fr) 100px;
  min-height: 82px;
  padding: 10px 14px 10px 0;
}
.motion-output-sequence.is-active .sequence-task-row::before { width: 31px; }
.motion-output-sequence.is-active .sequence-task-row::after { left: -53px; font-size: 6.5px; }
.motion-output-sequence.is-active .sequence-order { width: 36px; height: 36px; font-size: 9px; }
.motion-output-sequence.is-active .sequence-task-copy b { font-size: 13px; }
.motion-output-sequence.is-active .sequence-task-copy small,
.motion-output-sequence.is-active .sequence-task-time b,
.motion-output-sequence.is-active .sequence-task-time em { font-size: 7.5px; }
.motion-output-bom.is-active .bom-table {
  grid-template-rows: 34px 28px repeat(6, minmax(38px, 1fr)) 48px;
  width: min(1040px, 92%);
  margin: 0 auto;
}
.motion-output-bom.is-active .bom-column-head,
.motion-output-bom.is-active .bom-table > i {
  grid-template-columns: 70px minmax(0, 1fr) 82px 136px 82px 106px;
  gap: 10px;
  padding-inline: 12px;
}
.motion-output-bom.is-active .bom-table > i { font-size: 10px; }
.motion-output-bom.is-active .bom-table > i u,
.motion-output-bom.is-active .bom-table > i s { font-size: 8px; }
.motion-output-bom.is-active .bom-total b { font-size: 19px; }
.motion-output-logistics.is-active .logistics-workspace {
  grid-template-rows: 18px minmax(0, 1fr) 32px 46px;
  gap: 9px;
  width: min(1080px, 94%);
  margin: 0 auto;
}
.motion-output-logistics.is-active .logistics-stage { min-height: 0; border: 0; }
.motion-output-logistics.is-active .logistics-stage > b,
.motion-output-logistics.is-active .logistics-gate { font-size: 8px; }
.demo-screen-metrics { display: none; }

@keyframes motionCanvasViewIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  .compiler-viewbar { grid-template-columns: minmax(250px, .9fr) minmax(480px, 1.5fr); }
  .compiler-viewbar .demo-launch { display: none; }
}

@media (max-width: 900px) {
  .demo-preview { height: auto; min-height: 0; }
  .demo-preview-screen {
    grid-template-rows: 44px 154px minmax(0, 1fr);
    height: 780px;
    min-height: 780px;
  }
  .compiler-viewbar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 66px;
    gap: 11px;
    padding: 12px 14px;
  }
  .compiler-view-copy { grid-template-columns: auto minmax(0, 1fr); }
  .compiler-view-copy h3 { font-size: 17px; }
  .compiler-viewbar .motion-chapter-nav { max-width: none; }
  .motion-output-sequence.is-active .sequence-workspace { width: min(94%, 760px); }
  .motion-output-bom.is-active .bom-table { width: 96%; }
}

@media (max-width: 640px) {
  .demo-preview-screen {
    grid-template-rows: 42px 170px minmax(0, 1fr);
    height: 760px;
    min-height: 760px;
  }
  .compiler-viewbar { grid-template-rows: auto 62px; padding: 11px 10px; }
  .compiler-view-copy { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 4px; }
  .compiler-view-copy .demo-kicker { grid-column: 1; grid-row: 1; }
  .compiler-view-copy h3 { grid-column: 1; grid-row: 2; font-size: 16px; white-space: normal; }
  .compiler-view-copy p { grid-column: 1; grid-row: 3; font-size: 7.5px; white-space: normal; }
  .compiler-viewbar .motion-chapter-nav { overflow-x: auto; grid-template-columns: repeat(5, minmax(82px, 1fr)); }
  .compiler-viewbar .motion-chapter-nav button { min-width: 82px; padding-inline: 6px; }
  .compiler-viewbar .motion-chapter-nav button small { display: none; }
  .compiler-viewbar .motion-chapter-nav button b,
  .compiler-viewbar .motion-chapter-nav button i { grid-column: 1; }
  .motion-outputs { inset: 13px 10px 12px; }
  .motion-output.is-active { grid-template-rows: 25px minmax(0, 1fr) 31px; gap: 7px; }
  .motion-output-sequence.is-active .sequence-workspace { width: 100%; gap: 7px; }
  .motion-output-sequence.is-active .sequence-column { gap: 7px; padding-left: 38px; }
  .motion-output-sequence.is-active .sequence-column::before { left: 18px; }
  .motion-output-sequence.is-active .sequence-task-row {
    grid-template-columns: 34px minmax(0, 1fr) 62px;
    min-height: 56px;
    padding: 7px 7px 7px 0;
  }
  .motion-output-sequence.is-active .sequence-task-row::before { width: 19px; }
  .motion-output-sequence.is-active .sequence-task-row::after { left: -36px; font-size: 5px; }
  .motion-output-sequence.is-active .sequence-order { width: 25px; height: 25px; font-size: 7px; }
  .motion-output-sequence.is-active .sequence-task-copy { padding-inline: 7px; }
  .motion-output-sequence.is-active .sequence-task-copy b { font-size: 9px; }
  .motion-output-sequence.is-active .sequence-task-copy small,
  .motion-output-sequence.is-active .sequence-task-time b,
  .motion-output-sequence.is-active .sequence-task-time em { font-size: 5.5px; }
  .motion-output-bom.is-active .bom-table { width: 100%; }
  .motion-output-bom.is-active .bom-column-head,
  .motion-output-bom.is-active .bom-table > i { grid-template-columns: 40px minmax(0, 1fr) 48px 58px; gap: 4px; padding-inline: 4px; }
  .motion-output-bom.is-active .bom-column-head u,
  .motion-output-bom.is-active .bom-column-head s,
  .motion-output-bom.is-active .bom-table > i u,
  .motion-output-bom.is-active .bom-table > i s { display: none; }
  .motion-output-bom.is-active .bom-table > i { font-size: 6.5px; }
  .motion-output-logistics.is-active .logistics-workspace { width: 100%; }
  .motion-panel-head { right: 12px; left: 12px; }
  .motion-build-phases { left: 12px; }
  .motion-earthwork-callout { right: 12px; bottom: 12px; left: 12px; }
  .motion-model-state { right: 12px; bottom: 12px; }
}

/* ---------------- compact single-canvas views ---------------- */
.demo-preview-screen {
  grid-template-rows: 44px 58px minmax(0, 1fr);
}
.compiler-viewbar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 7px 12px;
}
.compiler-view-copy {
  position: absolute;
  z-index: 12;
  top: calc(100% + 28px);
  left: 22px;
  display: block;
  width: min(21%, 285px);
  min-width: 220px;
  padding: 4px 16px 4px 15px;
  border-left: 2px solid rgba(240,138,59,.72);
  pointer-events: none;
}
.compiler-view-copy .demo-kicker {
  display: block;
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 7px;
  letter-spacing: .16em;
}
.compiler-view-copy h3 {
  display: block;
  overflow: visible;
  margin: 0;
  color: rgba(245,244,240,.96);
  font: 500 28px/1.02 var(--display);
  letter-spacing: -.03em;
  text-overflow: clip;
  white-space: normal;
}
.compiler-view-copy p {
  display: block;
  overflow: visible;
  margin: 13px 0 0;
  color: rgba(219,220,214,.65);
  font-size: 11.5px;
  line-height: 1.52;
  text-overflow: clip;
  white-space: normal;
}
.compiler-view-copy .demo-flow-note {
  display: flex;
  flex-wrap: wrap;
  margin: 18px 0 0;
  color: rgba(207,209,202,.38);
  font-size: 6.5px;
  line-height: 1.5;
  white-space: normal;
}
.compiler-viewbar .motion-chapter-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(72px, 96px));
  flex: 0 1 auto;
  width: auto;
  height: 42px;
  min-height: 42px;
  margin: 0;
}
.compiler-viewbar .motion-chapter-nav button {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 40px;
  padding: 5px 9px;
}
.compiler-viewbar .motion-chapter-nav button small,
.compiler-viewbar .motion-chapter-nav button i { display: none; }
.compiler-viewbar .motion-chapter-nav button b {
  grid-column: 1;
  color: inherit;
  font-size: 10.5px;
  line-height: 1;
}
.compiler-viewbar .demo-launch {
  width: 176px;
  height: 42px;
  margin-left: auto;
  padding: 7px 12px;
}
.compiler-viewbar .demo-launch > span { gap: 2px; font-size: 12px; }
.compiler-viewbar .demo-launch small { font-size: 5.5px; }
.motion-outputs {
  inset: 18px 22px 16px calc(23% + 34px);
}
.motion-panel-head { right: 22px; left: calc(23% + 34px); }
.motion-build-phases { left: calc(23% + 34px); }
.motion-earthwork-callout { left: calc(23% + 34px); }

/* Dense, field-useful receipt with local sourcing. */
.motion-output-bom.is-active .bom-table {
  grid-template-rows: 31px 22px repeat(12, minmax(23px, 1fr)) 43px;
  width: 100%;
  margin: 0;
}
.motion-output-bom.is-active .bom-receipt-head { padding: 0 7px 6px; }
.motion-output-bom.is-active .bom-column-head,
.motion-output-bom.is-active .bom-table > i {
  grid-template-columns: 50px minmax(155px, 1.35fr) 68px minmax(150px, 1fr) 70px 86px;
  gap: 7px;
  padding-inline: 7px;
}
.motion-output-bom.is-active .bom-column-head { font-size: 6px; }
.motion-output-bom.is-active .bom-table > i {
  min-height: 0;
  padding-block: 3px;
  font-size: 7.5px;
}
.motion-output-bom.is-active .bom-table > i span,
.motion-output-bom.is-active .bom-table > i u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.motion-output-bom.is-active .bom-table > i u { color: rgba(151,183,137,.8); font-size: 6.7px; }
.motion-output-bom.is-active .bom-table > i s { font-size: 6.7px; }
.motion-output-bom.is-active .bom-table > i em { font-size: 7.5px; }
.motion-output-bom.is-active .bom-total { padding: 6px 7px 0; }
.motion-output-bom.is-active .bom-total b { color: var(--accent); font-size: 18px; }

/* Landing logistics: one spatial plan with its time, material and inbound data attached. */
.motion-output-logistics.is-active .logistics-workspace {
  grid-template-rows: 32px minmax(0, 1fr) 40px 32px 18px;
  gap: 6px;
  width: 100%;
  margin: 0;
}
.logistics-control-strip {
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
  border: 1px solid rgba(245,244,240,.12);
  background: rgba(4,5,4,.84);
}
.logistics-control-strip > span:not(.logistics-day-line) { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.logistics-control-strip small { color: rgba(207,209,202,.36); font: 5.5px var(--mono); letter-spacing: .1em; }
.logistics-control-strip b { color: rgba(245,244,240,.8); font: 7px var(--mono); font-weight: 400; }
.logistics-control-strip > span:first-child b { color: var(--accent); font-size: 9px; }
.logistics-control-state b { color: #96b789; }
.logistics-day-line {
  --logistics-progress: 8%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1px;
  background: rgba(245,244,240,.15);
}
.logistics-day-line::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--logistics-progress);
  background: var(--accent);
  transition: width 420ms cubic-bezier(.2,.72,.2,1);
}
.logistics-day-line i { position: relative; z-index: 1; width: 4px; height: 4px; border: 1px solid #5f625d; background: #080908; transform: rotate(45deg); }
.logistics-day-line i:first-child { border-color: var(--accent); background: var(--accent); }
.motion-output-logistics.is-active .logistics-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(205,207,200,.2);
  background: radial-gradient(circle at 62% 45%, #151714 0%, #080908 67%);
}
.motion-output-logistics.is-active .logistics-stage canvas { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; }
.logistics-yard-chrome {
  position: absolute;
  z-index: 3;
  top: 9px;
  right: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.logistics-yard-chrome small { color: rgba(207,209,202,.48); font: 6px var(--mono); letter-spacing: .11em; }
.logistics-yard-chrome b { color: rgba(245,244,240,.68); font: 6px var(--mono); font-weight: 400; letter-spacing: .08em; }
.logistics-yard-chrome b i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #8fb57f; box-shadow: 0 0 7px rgba(143,181,127,.5); }
.logistics-stage-selection {
  position: absolute;
  z-index: 3;
  bottom: 9px;
  left: 10px;
  display: grid;
  gap: 3px;
  max-width: 48%;
  padding: 7px 9px 7px 10px;
  border-left: 2px solid var(--accent);
  background: rgba(5,5,5,.82);
  text-align: left;
}
.logistics-stage-selection small { color: rgba(207,209,202,.42); font: 5.5px var(--mono); letter-spacing: .1em; }
.logistics-stage-selection b { overflow: hidden; color: rgba(245,244,240,.88); font: 7.5px var(--mono); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.logistics-stage-selection em { overflow: hidden; color: rgba(207,209,202,.5); font: 5.5px var(--mono); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.motion-output-logistics.is-active .logistics-gate {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 9px;
  padding: 5px 7px;
  border-right: 2px solid var(--accent);
  background: rgba(5,5,5,.76);
  color: rgba(245,244,240,.62);
  font: 5.5px var(--mono);
  letter-spacing: .08em;
}
.logistics-load-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(245,244,240,.12);
  background: rgba(4,5,4,.82);
}
.logistics-load-rail > i {
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr) auto;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  gap: 0 7px;
  min-width: 0;
  padding: 4px 8px;
  border-right: 1px solid rgba(245,244,240,.09);
  color: rgba(207,209,202,.5);
  font-style: normal;
  transition: background 220ms, box-shadow 220ms;
}
.logistics-load-rail > i:last-child { border-right: 0; }
.logistics-load-rail > i.is-active { background: rgba(240,138,59,.06); box-shadow: inset 2px 0 var(--accent); }
.logistics-load-rail time { grid-row: 1 / 3; color: var(--accent); font: 7px var(--mono); }
.logistics-load-rail > i span { grid-row: 1 / 3; display: grid; gap: 1px; min-width: 0; }
.logistics-load-rail > i span b,
.logistics-load-rail > i span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logistics-load-rail > i span b { color: rgba(245,244,240,.76); font: 500 7px var(--sans); }
.logistics-load-rail > i span small { color: rgba(207,209,202,.38); font: 5px var(--mono); }
.logistics-load-rail > i em { align-self: end; color: rgba(239,238,232,.62); font: 5.5px var(--mono); font-style: normal; text-align: right; }
.logistics-load-rail > i u { align-self: start; color: #95b887; font: 4.5px var(--mono); letter-spacing: .05em; text-align: right; text-decoration: none; }
.logistics-wavebar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(245,244,240,.12);
  background: rgba(4,5,4,.72);
}
.logistics-wavebar > i {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 4px 7px;
  border-right: 1px solid rgba(245,244,240,.09);
  color: rgba(207,209,202,.38);
  font-style: normal;
}
.logistics-wavebar > i:last-child { border-right: 0; }
.logistics-wavebar > i::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: transparent; }
.logistics-wavebar > i.is-active { background: rgba(240,138,59,.055); color: rgba(245,244,240,.88); }
.logistics-wavebar > i.is-active::after { background: var(--accent); }
.logistics-wavebar b { color: var(--accent); font: 6px var(--mono); font-weight: 400; }
.logistics-wavebar span { overflow: hidden; font: 500 7px var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.logistics-wavebar small { color: rgba(207,209,202,.35); font: 4.8px var(--mono); letter-spacing: .04em; }
.motion-output-logistics.is-active .logistics-stage-status { padding: 0 4px; border: 0; border-top: 1px solid rgba(245,244,240,.09); }

@media (max-width: 1100px) {
  .compiler-viewbar { grid-template-columns: none; }
  .compiler-viewbar .demo-launch { display: flex; }
  .compiler-view-copy { width: 22%; min-width: 190px; }
  .motion-outputs { left: calc(24% + 28px); }
  .motion-panel-head, .motion-build-phases, .motion-earthwork-callout { left: calc(24% + 28px); }
  .logistics-body { grid-template-columns: minmax(0, 1.45fr) minmax(210px, .7fr); }
}

@media (max-width: 760px) {
  .demo-preview-screen {
    grid-template-rows: 42px 54px minmax(0, 1fr);
    height: 880px;
    min-height: 880px;
  }
  .compiler-viewbar { gap: 8px; padding: 6px 8px; }
  .compiler-viewbar .motion-chapter-nav {
    grid-template-columns: repeat(5, minmax(68px, 1fr));
    width: 100%;
    height: 40px;
    overflow-x: auto;
  }
  .compiler-viewbar .motion-chapter-nav button { min-width: 68px; min-height: 38px; padding: 4px 6px; }
  .compiler-viewbar .motion-chapter-nav button b { font-size: 9px; }
  .compiler-viewbar .demo-launch { display: none; }
  .compiler-view-copy {
    top: calc(100% + 15px);
    left: 12px;
    width: calc(100vw - 64px);
    min-width: 0;
    padding-left: 11px;
  }
  .compiler-view-copy .demo-kicker { margin-bottom: 6px; font-size: 6px; }
  .compiler-view-copy h3 { font-size: 20px; }
  .compiler-view-copy p { max-width: 560px; margin-top: 6px; font-size: 9px; line-height: 1.4; }
  .compiler-view-copy .demo-flow-note { display: none; }
  .motion-outputs { inset: 125px 10px 10px; }
  .motion-panel-head { top: 126px; right: 12px; left: 12px; }
  .motion-build-phases { top: 144px; left: 12px; }
  .motion-earthwork-callout { right: 12px; bottom: 12px; left: 12px; }
  .motion-output-bom.is-active .bom-column-head,
  .motion-output-bom.is-active .bom-table > i { grid-template-columns: 38px minmax(0, 1fr) 48px 65px; }
  .motion-output-bom.is-active .bom-column-head u,
  .motion-output-bom.is-active .bom-column-head s,
  .motion-output-bom.is-active .bom-table > i u,
  .motion-output-bom.is-active .bom-table > i s { display: none; }
  .logistics-wavebar > i { grid-template-columns: minmax(0, 1fr); padding: 5px; }
  .logistics-wavebar b, .logistics-wavebar small { display: none; }
  .logistics-wavebar span { font-size: 7px; text-align: center; }
  .logistics-control-strip { grid-template-columns: auto minmax(70px, 1fr) auto; gap: 7px; }
  .logistics-control-state { display: none !important; }
  .logistics-load-rail > i { grid-template-columns: 32px minmax(0, 1fr); padding-inline: 5px; }
  .logistics-load-rail > i em, .logistics-load-rail > i u { display: none; }
  .logistics-stage-selection { max-width: 66%; }
}

/* ---------------- integrated compiler navigation rail ---------------- */
.demo-preview-screen {
  grid-template-rows: 44px minmax(0, 1fr);
}
.compiler-viewbar {
  position: absolute;
  z-index: 11;
  top: 44px;
  bottom: 0;
  left: 0;
  display: flex;
  width: 24%;
  min-width: 250px;
  padding: 30px 20px 22px 22px;
  border: 0;
  background: linear-gradient(90deg, rgba(7,8,7,.985) 0%, rgba(7,8,7,.94) 78%, rgba(7,8,7,0) 100%);
  box-shadow: none;
  flex-direction: column;
}
.compiler-view-copy {
  position: static;
  display: block;
  width: auto;
  min-width: 0;
  padding: 0 15px 0 14px;
  border-left: 2px solid rgba(240,138,59,.72);
  pointer-events: none;
}
.compiler-view-copy .demo-kicker { margin-bottom: 11px; }
.compiler-view-copy h3 {
  overflow: visible;
  font-size: clamp(28px, 2.25vw, 35px);
  line-height: 1.04;
  white-space: normal;
}
.compiler-view-copy p {
  overflow: visible;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.48;
  white-space: normal;
}
.compiler-view-copy .demo-flow-note { display: flex; margin-top: 15px; }
.compiler-viewbar .motion-chapter-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(5, 47px);
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 26px 0 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid rgba(245,244,240,.13);
  background: transparent;
}
.compiler-viewbar .motion-chapter-nav button {
  --view-progress: 0%;
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 47px;
  padding: 0 9px 0 0;
  overflow: hidden;
  border: 0;
  border-right: 0;
  border-bottom: 1px solid rgba(245,244,240,.1);
  background: transparent;
  color: rgba(239,238,232,.53);
  text-align: left;
}
.compiler-viewbar .motion-chapter-nav button::after {
  content: "";
  position: absolute;
  right: auto;
  bottom: -1px;
  left: 0;
  display: block;
  width: var(--view-progress);
  height: 1px;
  background: rgba(240,138,59,.62);
  transition: width 420ms cubic-bezier(.2,.72,.2,1);
}
.compiler-viewbar .motion-chapter-nav button small {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  place-items: center;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(245,244,240,.08);
  color: rgba(240,138,59,.65);
  font: 6.5px var(--mono);
}
.compiler-viewbar .motion-chapter-nav button b {
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  color: inherit;
  font: 500 11px/1 var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compiler-viewbar .motion-chapter-nav button i {
  display: block;
  grid-column: 3;
  grid-row: 1;
  overflow: hidden;
  color: rgba(151,183,137,.62);
  font: 5.5px var(--mono);
  font-style: normal;
  letter-spacing: .045em;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compiler-viewbar .motion-chapter-nav button:hover { background: rgba(245,244,240,.025); color: rgba(245,244,240,.82); }
.compiler-viewbar .motion-chapter-nav button[aria-selected="true"] {
  border-bottom-color: rgba(245,244,240,.1);
  background: linear-gradient(90deg, rgba(240,138,59,.12), rgba(240,138,59,0));
  color: var(--fg);
  box-shadow: inset 2px 0 var(--accent);
}
.compiler-viewbar .motion-chapter-nav button[aria-selected="true"] i { color: #9ab78d; }
.compiler-viewbar .demo-launch {
  display: flex;
  width: calc(100% - 10px);
  height: 52px;
  min-height: 52px;
  margin: auto 10px 0 0;
  padding: 9px 13px;
}
.compiler-motion {
  grid-row: 2;
}
.motion-outputs {
  left: calc(24% + 30px);
}
.motion-panel-head,
.motion-build-phases,
.motion-earthwork-callout { left: calc(24% + 30px); }

@media (max-width: 1100px) {
  .compiler-viewbar {
    width: 28%;
    min-width: 230px;
    padding-inline: 17px 14px;
  }
  .compiler-view-copy h3 { font-size: 27px; }
  .compiler-view-copy p { font-size: 11.5px; }
  .compiler-viewbar .motion-chapter-nav button i { font-size: 5px; }
  .motion-outputs,
  .motion-panel-head,
  .motion-build-phases,
  .motion-earthwork-callout { left: calc(28% + 24px); }
}

@media (max-width: 760px) {
  .demo-preview-screen {
    grid-template-rows: 42px minmax(0, 1fr);
    height: 900px;
    min-height: 900px;
  }
  .compiler-viewbar {
    top: 42px;
    right: 0;
    bottom: auto;
    width: auto;
    min-width: 0;
    height: 188px;
    padding: 14px 11px 10px;
    background: linear-gradient(180deg, rgba(7,8,7,.99), rgba(7,8,7,.92) 83%, rgba(7,8,7,0));
  }
  .compiler-view-copy { padding-left: 10px; }
  .compiler-view-copy .demo-kicker { margin-bottom: 5px; }
  .compiler-view-copy h3 { font-size: 21px; }
  .compiler-view-copy p { max-width: 600px; margin-top: 6px; font-size: 9.5px; line-height: 1.4; }
  .compiler-view-copy .demo-flow-note { display: none; }
  .compiler-viewbar .motion-chapter-nav {
    grid-template-columns: repeat(5, minmax(72px, 1fr));
    grid-template-rows: 43px;
    width: 100%;
    height: 43px;
    margin-top: 12px;
    overflow-x: auto;
    border: 1px solid rgba(245,244,240,.12);
  }
  .compiler-viewbar .motion-chapter-nav button {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 3px;
    min-width: 72px;
    min-height: 41px;
    padding: 5px 6px;
    border-right: 1px solid rgba(245,244,240,.08);
    text-align: center;
  }
  .compiler-viewbar .motion-chapter-nav button small { display: none; }
  .compiler-viewbar .motion-chapter-nav button b { grid-column: 1; grid-row: 1; font-size: 9px; }
  .compiler-viewbar .motion-chapter-nav button i { grid-column: 1; grid-row: 2; font-size: 4.7px; text-align: center; }
  .compiler-viewbar .demo-launch { display: none; }
  .motion-outputs { inset: 198px 10px 10px; }
  .motion-panel-head { top: 198px; right: 12px; left: 12px; }
  .motion-build-phases { top: 216px; left: 12px; }
  .motion-earthwork-callout { right: 12px; bottom: 12px; left: 12px; }
}

/* ---------------- compiled-view clarity pass ---------------- */
.hero-plan-service-key text { font-size: 2.25px !important; letter-spacing: .025em !important; }
.hero-plan-service-key text:nth-child(1) { fill: #62afe9; }
.hero-plan-service-key text:nth-child(2) { fill: #c1c6c8; }
.hero-plan-service-key text:nth-child(3) { fill: #e7c65d; }
.hero-plan-section-ceiling { fill: none; stroke: #b8b5aa; stroke-width: .75; }
.hero-plan-section-attic-insulation { fill: rgba(201,138,151,.18); stroke: #c98a97; stroke-width: .45; }
.hero-plan-attic-hvac { fill: none; stroke: #aa83c8; stroke-width: 1.05; }
.hero-plan-attic-electric { fill: none; stroke: #e7c65d; stroke-width: .65; }
.hero-plan-section-legend text { fill: rgba(219,221,214,.66); font-size: 2.05px; letter-spacing: .025em; }
.hero-plan-section-legend text:nth-child(1),
.hero-plan-section-legend text:nth-child(3),
.hero-plan-section-legend text:nth-child(5) { fill: rgba(240,138,59,.82); }
.hero-plan-titleblock text:last-child { font-size: 1.75px; letter-spacing: 0; text-anchor: middle; }

.motion-output-sequence.is-active .sequence-workspace {
  grid-template-rows: 36px minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  margin: 0;
}
.sequence-queue-head > span { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.sequence-queue-head > span em { overflow: hidden; color: rgba(207,209,202,.38); font: 5.5px var(--mono); font-style: normal; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.motion-output-sequence.is-active .sequence-queue-head b { color: var(--accent); font-size: 7px; }
.motion-output-sequence.is-active .sequence-queue-head small { font-size: 6px; }
.sequence-map {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(245,244,240,.12);
  background:
    linear-gradient(rgba(245,244,240,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,244,240,.025) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, rgba(29,31,29,.72), rgba(6,7,6,.96));
  background-size: 28px 28px, 28px 28px, auto;
}
.sequence-lanes { position: absolute; z-index: 0; inset: 0; display: grid; grid-template-rows: repeat(4, 1fr); pointer-events: none; }
.sequence-lanes i { position: relative; padding: 5px 7px; border-bottom: 1px solid rgba(245,244,240,.045); color: rgba(207,209,202,.2); font: 4.5px var(--mono); font-style: normal; letter-spacing: .12em; }
.sequence-lanes i:last-child { border-bottom: 0; }
.sequence-cables { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sequence-cables path { fill: none; stroke: rgba(193,199,191,.34); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.sequence-cables path:nth-child(3n + 1) { stroke: rgba(240,138,59,.72); }
.sequence-cables path:nth-child(3n + 2) { stroke: rgba(107,163,190,.55); }
.sequence-map.is-recomputing .sequence-cables path { animation: sequenceCableCompute 720ms cubic-bezier(.2,.72,.2,1) both; }
@keyframes sequenceCableCompute { from { stroke-dasharray: 5 8; stroke-dashoffset: 38; opacity: .3; } to { stroke-dasharray: 0; stroke-dashoffset: 0; opacity: 1; } }
.sequence-node {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  width: clamp(112px, 16%, 154px);
  min-height: 52px;
  padding: 6px 7px 6px 0;
  border: 1px solid rgba(207,209,202,.16);
  border-left: 2px solid rgba(207,209,202,.28);
  background: rgba(6,7,6,.94);
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
  font-style: normal;
  transform: translate(-50%, -50%);
  transition: left 680ms cubic-bezier(.2,.72,.2,1), top 680ms cubic-bezier(.2,.72,.2,1), border-color 220ms, background 220ms, opacity 220ms;
}
.sequence-node-id { grid-row: 1 / 3; align-self: stretch; display: grid; place-items: center; border-right: 1px solid rgba(245,244,240,.08); color: rgba(207,209,202,.4); font: 6.5px var(--mono); }
.sequence-node > b { overflow: hidden; padding-left: 7px; color: rgba(245,244,240,.82); font: 500 8.5px var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.sequence-node > span { overflow: hidden; padding-left: 7px; color: rgba(207,209,202,.36); font: 5px var(--mono); letter-spacing: .035em; text-overflow: ellipsis; white-space: nowrap; }
.sequence-node > em { grid-column: 3; grid-row: 1 / 3; display: grid; justify-items: end; gap: 4px; color: rgba(207,209,202,.55); font: 5.5px var(--mono); font-style: normal; white-space: nowrap; }
.sequence-node > em u { color: rgba(207,209,202,.3); font: 4.5px var(--mono); text-decoration: none; }
.sequence-node.is-complete { border-left-color: #7f9f72; opacity: .58; }
.sequence-node.is-complete .sequence-node-id { color: #8eb07e; }
.sequence-node.is-active { border-color: rgba(240,138,59,.5); border-left-color: var(--accent); background: rgba(240,138,59,.09); }
.sequence-node.is-active .sequence-node-id, .sequence-node.is-active > em u { color: var(--accent); }
.sequence-node.is-next { border-left-color: #dfbf69; }
.sequence-node.is-next > em u { color: #dfbf69; }
.sequence-replan { position: absolute; z-index: 3; right: 8px; bottom: 8px; display: flex; align-items: baseline; gap: 7px; padding: 5px 7px; border-left: 2px solid var(--accent); background: rgba(4,5,4,.86); }
.sequence-replan small { color: var(--accent); font: 4.7px var(--mono); letter-spacing: .09em; }
.sequence-replan b { color: rgba(245,244,240,.68); font: 5.5px var(--mono); font-weight: 400; }

.motion-output-bom.is-active .bom-column-head,
.motion-output-bom.is-active .bom-table > i {
  grid-template-columns: 44px minmax(145px, 1.35fr) 62px minmax(125px, 1fr) 58px 76px 64px;
  gap: 6px;
  padding-inline: 7px;
}
.bom-column-head strong { color: rgba(207,209,202,.32); font-weight: 400; text-align: right; }
.bom-buy {
  align-self: center;
  justify-self: end;
  min-width: 58px;
  padding: 4px 5px;
  border: 1px solid rgba(240,138,59,.42);
  border-radius: 0;
  background: rgba(240,138,59,.075);
  color: var(--accent);
  font: 5.5px var(--mono);
  letter-spacing: .06em;
  cursor: pointer;
  transition: background 160ms, border-color 160ms, color 160ms;
}
.bom-buy:hover { border-color: var(--accent); background: var(--accent); color: #050505; }
.bom-buy.is-added { border-color: rgba(142,176,126,.5); background: rgba(142,176,126,.08); color: #95b887; }

.motion-output-logistics.is-active .logistics-workspace { grid-template-rows: 38px minmax(0, 1fr) 40px 32px 36px; }
.logistics-control-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: 0; }
.logistics-control-strip > span:not(.logistics-day-line) { display: grid; align-content: center; gap: 3px; min-width: 0; height: 100%; padding: 0 8px; border-right: 1px solid rgba(245,244,240,.08); }
.logistics-control-strip > span:last-child { border-right: 0; }
.logistics-control-strip small, .logistics-control-strip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logistics-control-strip > span:first-child b { font-size: 10px; }
.logistics-yard-chrome { right: calc(29% + 14px); }
.motion-output-logistics.is-active .logistics-stage canvas {
  right: 29%;
  width: auto;
}
.motion-output-logistics.is-active .logistics-gate {
  right: auto;
  left: calc(31% + 11px);
  border-right: 0;
  border-left: 2px solid rgba(143,181,127,.72);
}
.logistics-stage-selection {
  right: calc(29% + 10px);
  left: 39%;
  max-width: none;
}
.logistics-ops-rail {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-rows: 37px 24px minmax(0, 1fr);
  width: 29%;
  min-width: 225px;
  border-left: 1px solid rgba(245,244,240,.13);
  background: rgba(4,5,4,.9);
  backdrop-filter: blur(5px);
}
.logistics-zone-label {
  position: absolute;
  z-index: 4;
  top: 29px;
  display: grid;
  gap: 2px;
  padding: 5px 7px;
  border-top: 1px solid rgba(245,244,240,.13);
  background: linear-gradient(180deg, rgba(4,5,4,.84), rgba(4,5,4,.42));
  pointer-events: none;
}
.logistics-zone-label b { color: rgba(245,244,240,.72); font: 5.8px var(--mono); font-weight: 400; letter-spacing: .09em; }
.logistics-zone-label small { color: rgba(207,209,202,.3); font: 4.6px var(--mono); letter-spacing: .055em; }
.logistics-zone-operations { left: 9px; width: 31%; border-top-color: rgba(143,181,127,.5); }
.logistics-zone-operations b { color: #94b987; }
.logistics-zone-materials { right: calc(29% + 10px); left: 39%; border-top-color: rgba(240,138,59,.48); }
.logistics-zone-materials b { color: var(--accent); }
.logistics-resource-bubbles {
  position: absolute;
  z-index: 5;
  bottom: 8px;
  left: 8px;
  display: grid;
  width: 31%;
  gap: 4px;
  pointer-events: none;
}
.logistics-resource-bubbles > i {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 7px;
  min-width: 0;
  padding: 5px 7px 5px 5px;
  border: 1px solid rgba(245,244,240,.1);
  border-left: 2px solid rgba(143,181,127,.58);
  background: rgba(4,5,4,.84);
  box-shadow: 0 5px 12px rgba(0,0,0,.2);
  font-style: normal;
  backdrop-filter: blur(4px);
}
.logistics-resource-bubbles > i > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid rgba(143,181,127,.42);
  border-radius: 50%;
  color: #94b987;
  font: 5.8px var(--mono);
}
.logistics-resource-bubbles b,
.logistics-resource-bubbles small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logistics-resource-bubbles b { color: rgba(245,244,240,.76); font: 500 6.3px var(--sans); }
.logistics-resource-bubbles small { color: rgba(207,209,202,.38); font: 4.7px var(--mono); }
.logistics-ops-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 9px; border-bottom: 1px solid rgba(245,244,240,.09); }
.logistics-ops-head > span { display: grid; gap: 2px; }
.logistics-ops-head small, .logistics-ops-head em { color: rgba(207,209,202,.36); font: 5px var(--mono); font-style: normal; letter-spacing: .07em; }
.logistics-ops-head b { color: var(--accent); font: 6.5px var(--mono); font-weight: 400; }
.logistics-resources { display: grid; grid-template-rows: repeat(3, 1fr); border-bottom: 1px solid rgba(245,244,240,.09); }
.logistics-resources > i { display: grid; grid-template-columns: 27px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 1px 7px; min-width: 0; padding: 5px 8px; border-bottom: 1px solid rgba(245,244,240,.055); font-style: normal; }
.logistics-resources > i:last-child { border-bottom: 0; }
.logistics-resources > i > span { grid-row: 1 / 3; display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid rgba(240,138,59,.4); color: var(--accent); font: 6px var(--mono); }
.logistics-resources b, .logistics-resources small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logistics-resources b { color: rgba(245,244,240,.74); font: 500 6.5px var(--sans); }
.logistics-resources small { color: rgba(207,209,202,.36); font: 4.8px var(--mono); }
.logistics-inventory-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; border-bottom: 1px solid rgba(245,244,240,.08); }
.logistics-inventory-head b { color: rgba(245,244,240,.62); font: 5.5px var(--mono); font-weight: 400; letter-spacing: .08em; }
.logistics-inventory-head small { color: rgba(207,209,202,.3); font: 4.5px var(--mono); }
.logistics-inventory { display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); min-height: 0; }
.logistics-inventory > i { --used: 0%; position: relative; display: grid; grid-template-columns: 31px minmax(0, 1fr) 43px 48px; align-items: center; gap: 5px; min-width: 0; padding: 3px 7px; border-bottom: 1px solid rgba(245,244,240,.055); font-style: normal; }
.logistics-inventory > i:last-child { border-bottom: 0; }
.logistics-inventory > i > b { color: rgba(207,209,202,.36); font: 4.8px var(--mono); font-weight: 400; }
.logistics-inventory > i > span { overflow: hidden; color: rgba(245,244,240,.68); font: 5.5px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.logistics-inventory > i > small, .logistics-inventory > i > em { color: rgba(207,209,202,.42); font: 4.7px var(--mono); font-style: normal; text-align: right; }
.logistics-inventory > i > em { color: #98b58b; }
.logistics-inventory > i > u { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, var(--accent) 0 var(--used), rgba(245,244,240,.06) var(--used) 100%); text-decoration: none; }
.logistics-scrubber {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 116px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 9px;
  border: 1px solid rgba(245,244,240,.12);
  background: rgba(4,5,4,.88);
  cursor: ew-resize;
}
.logistics-scrubber > span { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.logistics-scrubber small { color: rgba(207,209,202,.36); font: 5px var(--mono); letter-spacing: .08em; }
.logistics-scrubber b { color: var(--accent); font: 7px var(--mono); font-weight: 400; white-space: nowrap; }
.logistics-scrubber em { overflow: hidden; color: rgba(207,209,202,.46); font: 5px var(--mono); font-style: normal; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.logistics-scrubber input {
  --scrub-progress: 0%;
  width: 100%;
  height: 18px;
  margin: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}
.logistics-scrubber input::-webkit-slider-runnable-track {
  height: 2px;
  border: 0;
  background: linear-gradient(90deg, var(--accent) 0 var(--scrub-progress), rgba(245,244,240,.15) var(--scrub-progress) 100%);
}
.logistics-scrubber input::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -5px;
  border: 2px solid #080908;
  border-radius: 50%;
  appearance: none;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(240,138,59,.65);
}
.logistics-scrubber input::-moz-range-track { height: 2px; border: 0; background: rgba(245,244,240,.15); }
.logistics-scrubber input::-moz-range-progress { height: 2px; background: var(--accent); }
.logistics-scrubber input::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid #080908; border-radius: 50%; background: var(--accent); }
.logistics-scrubber input:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

@media (max-width: 760px) {
  .motion-output-sequence.is-active .sequence-workspace { grid-template-rows: 32px minmax(0, 1fr); }
  .sequence-queue-head > span em { display: none; }
  .sequence-node { grid-template-columns: 19px minmax(0, 1fr); width: 88px; min-height: 42px; padding: 4px 4px 4px 0; }
  .sequence-node-id { font-size: 5px; }
  .sequence-node > b { padding-left: 4px; font-size: 6px; }
  .sequence-node > span { padding-left: 4px; font-size: 3.6px; }
  .sequence-node > em { display: none; }
  .sequence-replan { right: 4px; bottom: 4px; max-width: 62%; }
  .sequence-replan small { display: none; }
  .sequence-replan b { overflow: hidden; font-size: 4.3px; text-overflow: ellipsis; white-space: nowrap; }
  .motion-output-bom.is-active .bom-column-head,
  .motion-output-bom.is-active .bom-table > i { grid-template-columns: 34px minmax(0, 1fr) 42px 48px 55px; gap: 3px; padding-inline: 3px; }
  .motion-output-bom.is-active .bom-column-head u,
  .motion-output-bom.is-active .bom-column-head s,
  .motion-output-bom.is-active .bom-table > i u,
  .motion-output-bom.is-active .bom-table > i s { display: none; }
  .bom-buy { min-width: 49px; padding-inline: 3px; font-size: 4.5px; }
  .motion-output-logistics.is-active .logistics-workspace { grid-template-rows: 64px minmax(0, 1fr) 37px 28px 40px; }
  .logistics-control-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logistics-control-strip > span:not(.logistics-day-line) { padding-inline: 5px; border-bottom: 1px solid rgba(245,244,240,.08); }
  .logistics-control-strip small { font-size: 4px; }
  .logistics-control-strip b { font-size: 5.5px; }
  .logistics-ops-rail { width: 38%; min-width: 135px; grid-template-rows: 31px 20px minmax(0, 1fr); }
  .motion-output-logistics.is-active .logistics-stage canvas { right: 38%; }
  .logistics-yard-chrome { right: calc(38% + 8px); }
  .motion-output-logistics.is-active .logistics-gate,
  .logistics-stage-selection,
  .logistics-zone-materials { display: none; }
  .logistics-zone-operations { top: 27px; width: 52%; padding: 4px 5px; }
  .logistics-zone-operations small { display: none; }
  .logistics-resource-bubbles { bottom: 5px; left: 5px; width: 52%; gap: 3px; }
  .logistics-resource-bubbles > i { grid-template-columns: 20px minmax(0, 1fr); padding: 3px 4px; }
  .logistics-resource-bubbles > i > span { width: 17px; height: 17px; font-size: 4.2px; }
  .logistics-resource-bubbles b { font-size: 4.7px; }
  .logistics-resource-bubbles small { font-size: 3.6px; }
  .logistics-ops-head em { display: none; }
  .logistics-resources > i { grid-template-columns: 22px minmax(0, 1fr); padding: 3px 5px; }
  .logistics-resources > i > span { width: 18px; height: 18px; font-size: 4.5px; }
  .logistics-resources b { font-size: 4.8px; }
  .logistics-resources small { font-size: 3.8px; }
  .logistics-inventory > i { grid-template-columns: 22px minmax(0, 1fr) 34px; gap: 3px; padding-inline: 4px; }
  .logistics-inventory > i > small { display: none; }
  .logistics-inventory > i:nth-child(n+5) { display: none; }
  .logistics-inventory { grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .logistics-scrubber { grid-template-columns: 72px minmax(0, 1fr); gap: 6px; padding-inline: 5px; }
  .logistics-scrubber em { display: none; }
  .logistics-scrubber small { display: none; }
  .logistics-scrubber b { font-size: 5.5px; }
  .logistics-load-rail > i:nth-child(3) { display: none; }
  .logistics-load-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}