Why does my visual grid not change?

ahtest001.scss

$visual-grid : true;
// ---------------------------------------------------------------------------
// Imports

@import "bourbon/bourbon";
@import "neat/neat";
@import "neat/neat-helpers";


$landscape: new-breakpoint(min-width 480px 4);
$tablet: new-breakpoint(min-width 760px 8);
$desktop: new-breakpoint(min-width 960px 12);

header {
	background: blue;
}

@include media($landscape) {
	header {
		background: red;
	}
}
@include media($tablet) {
	header {
		background: pink;
	}

}
@include media($desktop) {
	header {
		background: orange;
	}

}

Not sure if it was intentional or not, but you can call media() from within your element:

header {
    background: blue;
    @include media($landscape) {
        background: red;
     }
    @include media($tablet) {
    background: pink;
     }
    @include media($desktop) {
    background: orange;
     }
}

This doesn't seem to work for me with the breakpoints. If I place some grid settings before importing neat, the grid settings will apply - though when reducing the browser width, the grid will remain at 12 instead of changing to 4. If I keep the breakpoints above the neat import, they will not take affect. I did notice that the css output when doing this creates invalid css. It will include the entire "new-breakpoint(...)" line.

@gin93r double check you have the right sass --version for your neat version.