/* ==========================================================
   VersaForge - On-Page SEO (page-scoped)
   ----------------------------------------------------------
   The creative-visual engine (.grs-frame, .grs-row-list,
   .grs-frame-bar-row, .grs-stat-tiles, keyframes, etc.) is
   already shared via assets/css/off-page-seo.css, loaded
   right before this file - nothing is duplicated here.

   This file only carries the handful of rules that are
   specific to the On-Page SEO layout itself, so the left and
   right columns in every split section land at equal height
   with zero empty space, matching the Off-Page SEO page.
   ========================================================== */

/* Force every split row on this page to stretch its two
   columns to equal height, and make sure the visual side
   (which has no explicit height of its own) fills that height
   completely instead of collapsing to its content. */
[data-rail="Understanding On-Page SEO"] .split-row,
[data-rail="Avoid Common Mistakes"] .split-row,
[data-rail="Future Trends"] .split-row,
[data-rail="Brand Visibility"] .split-row,
[data-rail="Comprehensive Services"] .split-row {
  align-items: center;
}

[data-rail="Understanding On-Page SEO"] .grs-visual,
[data-rail="Avoid Common Mistakes"] .grs-visual,
[data-rail="Future Trends"] .grs-visual,
[data-rail="Brand Visibility"] .grs-visual,
[data-rail="Comprehensive Services"] .grs-visual {
  height: 100%;
  min-height: 360px;
}

/* Keep the four "Effective Process" step cards and three
   "Monitoring Performance" cards visually anchored to the
   same baseline height inside their grid row. */
[data-rail="Effective Process"] .cards-row > *,
[data-rail="Monitoring Performance"] .cards-row > * {
  display: flex;
}
[data-rail="Effective Process"] .service-card,
[data-rail="Monitoring Performance"] .service-card {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  [data-rail] .grs-visual * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}