/* Kinetic grid (kinetic-grid.js): a pointer-reactive line grid behind a section.
   Everything is scoped to [data-kinetic-grid]; :where() keeps it at zero
   specificity so a section's own position/z-index rules still win. */
:where([data-kinetic-grid]) { position: relative; isolation: isolate; }
:where([data-kinetic-grid]) > :where(:not(.kg-canvas)) { position: relative; z-index: 1; }
.kg-canvas {
  position: absolute; inset: 0; z-index: 0; display: block;
  width: 100%; height: 100%; pointer-events: none;
  opacity: var(--kg-alpha, .7);
  /* fade the top and bottom edges so the grid never ends in a hard line */
  --kg-fade: clamp(48px, 9vw, 110px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--kg-fade), #000 calc(100% - var(--kg-fade)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--kg-fade), #000 calc(100% - var(--kg-fade)), transparent 100%);
}
/* Pricing is long and dense (plan lists sit right on the grid), so it gets a quieter grid. */
.pricing[data-kinetic-grid] { --kg-alpha: .55; }