/* systMD — Additional CSS Variables */
:root {
  --systmd-counter-size: 56px;
  --systmd-heading-gap: 8px;
  --systmd-heading-gap-lg: 12px;
  --systmd-card-image-offset: 140px;
  --systmd-content-max-width: 1000px;
  --systmd-narrow-max-width: 500px;
  --systmd-medium-max-width: 700px;
  --systmd-grid-line: #f0f0f0;
  --systmd-gradient-blue: #046BD2;
  --systmd-gradient-teal: #0891B2;
  --systmd-gradient-emerald: #10B981;
  --systmd-gradient-mint: #34D399;

  /* Layout */
  --systmd-faq-sidebar-width: 320px;
  --systmd-faq-sidebar-min: 280px;
}

/* Gravity Forms — tighten field row gap */
.gform_fields {
  row-gap: var(--systmd-form-gap, 24px) !important;
}

/* ============================================================
 * CLS prevention (added Batch B / 2026-05-06)
 * ============================================================ */

/* Native HTML5 video controls intentionally NOT hidden — they're needed for the
   below-fold video. Aspect-ratio rule below reserves space so the controls UI
   loading doesn't shift the layout (which was the original CLS concern).
   ============================================================ */

/* Bricks .brxe-video elements: reserve 5:3 aspect-ratio so video metadata loading
   doesn't reflow the page when Bricks lazy-loads the source. */
.brxe-video video {
  aspect-ratio: 5 / 3;
  width: 100%;
  height: auto;
  display: block;
}