// Responsive helper for the marketing page. Inline styles can't be reached by
// media queries, so layout that lives in JS (grid column counts, the hero
// headline scale, the stacked-table swap) reads breakpoint booleans from here.
// Spacing that flows through CSS custom properties (--ecps-gutter,
// --ecps-section-y) is handled by the media block in index.html instead.
//
// Breakpoints follow the design system: 900 and 720.
function useViewport() {
  const [w, setW] = React.useState(() => window.innerWidth);
  React.useEffect(() => {
    const on = () => setW(window.innerWidth);
    window.addEventListener('resize', on, { passive: true });
    return () => window.removeEventListener('resize', on);
  }, []);
  return { compact: w < 900, narrow: w < 720 };
}
window.useViewport = useViewport;