/* DexMat Why Galvorn stages: a square white stage pinned under the site header inside a track three times its height.
   Sizes follow the Making Galvorn step three row on the DexMat UI (84px header, 50/50 columns, 48px media inset from the column). */
.dm-wg-track { position: relative; width: 100%; aspect-ratio: 1 / 3; --dm-wg-header: 84px; }
.dm-wg-stage { position: sticky; top: calc(var(--dm-wg-header) + 24px); width: 100%; aspect-ratio: 1 / 1; background: #ffffff; overflow: hidden; }
.dm-wg-stage canvas { display: block; width: 100%; height: 100%; }
.dm-wg-still { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.dm-wg-track.is-live .dm-wg-still { display: none; }
.dm-wg-label { position: absolute; font-family: 'Oswald', system-ui, sans-serif; font-weight: 400; text-transform: uppercase; color: #3d3d3d; line-height: 1.2; pointer-events: none; margin: 0; }
.dm-wg-measure { position: absolute; visibility: hidden; white-space: nowrap; left: -9999px; top: 0; font-family: 'Oswald', system-ui, sans-serif; font-weight: 400; text-transform: uppercase; }
.dm-wg-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* below 768 the pair stacks; no pin, the build plays once as the stage crosses the viewport */
@media (max-width: 767px) {
  .dm-wg-track { aspect-ratio: auto; }
  .dm-wg-stage { position: relative; top: auto; }
}
/* inside the Beaver Builder UI: the still only */
.dm-wg-track--builder { aspect-ratio: auto; }
.dm-wg-track--builder .dm-wg-stage { position: relative; top: auto; }
.dm-wg-builder-note { position: absolute; left: 12px; bottom: 8px; margin: 0; font: 12px/1.3 system-ui, sans-serif; color: #6b6b69; background: rgba(255,255,255,.85); padding: 4px 8px; }
/* the copy beside a stage pins at the same height, so it stays in view while the stage plays */
.fl-col:has(> .fl-col-content .dm-wg-track) ~ .fl-col > .fl-col-content,
.fl-col:has(+ .fl-col > .fl-col-content .dm-wg-track) > .fl-col-content { position: sticky; top: calc(var(--dm-wg-header, 84px) + 24px); }
@media (max-width: 767px) {
  .fl-col:has(> .fl-col-content .dm-wg-track) ~ .fl-col > .fl-col-content,
  .fl-col:has(+ .fl-col > .fl-col-content .dm-wg-track) > .fl-col-content { position: static; }
}
/* the column pair that holds a stage lays out as flex so the copy column is as tall as the track and its sticky content has room to travel */
@media (min-width: 768px) {
  .fl-col-group:has(> .fl-col > .fl-col-content .dm-wg-track) { display: flex; align-items: stretch; }
  .fl-col-group:has(> .fl-col > .fl-col-content .dm-wg-track) > .fl-col { float: none; }
}