@layer webflow {
/*
  Layout fixes for the Webflow Spline scene placeholders.

  The exported stylesheet defines `.spline-scene-2 { position: absolute; width:
  100%; height: 100%; }` with no `top`/`left`, and the parent `.section_div` has
  no `position` of its own. That means the absolutely positioned canvas escapes
  to the initial containing block (the viewport), so on a static export the
  Spline scene paints in the wrong place (visibly: a tiny cluster of particles
  appears below the trinity section, while the section itself stays white).

  On the live Webflow-hosted site this still works because Webflow's runtime
  scripts inject some additional layout glue when initializing the scene. We
  don't run Webflow's JS in this port (the body markup is dangerouslySetInnerHTML
  so its `<script>` tags don't execute — see `components/spline-scenes.tsx`),
  so we have to re-create that glue declaratively here.

  Pinning the canvas wrappers to (0,0) and giving `.section_div` a positioning
  context is the minimum the Spline `Application` needs to fill the section
  properly.
*/

.section_div {
  position: relative;
  /* Contain `.spline-scene-2` (`z-index: -2`) so it paints above the page bg. */
  isolation: isolate;
}

.spline-scene-2,
.spline-scene-2-copy {
  top: 0;
  left: 0;
  pointer-events: none;
}

/* Temporary: Matter "the trinity" Spline bypass — see spline-scenes.tsx */
[id="webflow-page-products/matter"] section.section_div.white .spline-scene-2,
[id="webflow-page-products/matter"] section.section_div.white .spline-scene-2-copy {
  display: none !important;
}

}