/* ==========================================================
   Search Generative Optimization -page-specific tweaks
   ----------------------------------------------------------
   This page's creative visuals reuse the existing grs-* toolkit
   from google-ranking-service.css entirely (frame/terminal/ring/
   steps dashboards) -no new visual language, no static images
   (none existed for this topic in the legacy export).
   ========================================================== */


/* Universal overflow guard, same as other inner pages */
.grs-visual,
.grs-visual *,
.grs-steps,
.grs-step,
.faq-map,
.cards-row > * {
  min-width: 0;
}


/* ==========================================================
   RICH RING GAUGE -upgrade over the base .grs-ring-card
   ----------------------------------------------------------
   The stock component is a single flat 6px stroke with no
   depth. This version adds a gradient stroke, a soft glow,
   a faint pulsing halo behind the ring, and a bigger, bolder
   number for real visual weight -while keeping the same
   markup contract (.grs-ring-card > svg.grs-ring-svg + .track
   + .fill + .grs-ring-card-num + .grs-ring-card-label) so
   nothing else on the page needs to change.
   ========================================================== */
@keyframes gsoRingHalo {
  0%, 100% { transform: scale(1); opacity: .35; }
  50%      { transform: scale(1.18); opacity: .05; }
}

.grs-ring-card {
  position: relative;
  padding: 1.15rem .9rem;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFF 100%);
  border: 1px solid #ECEFF6;
  box-shadow: 0 10px 24px -14px rgba(106, 88, 228, .25);
  transition: transform .3s ease, box-shadow .3s ease;
}
.grs-ring-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -14px rgba(106, 88, 228, .35);
}

.grs-ring-card::before {
  content: '';
  position: absolute;
  top: .55rem;
  left: 50%;
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(106, 88, 228, .28) 0%, transparent 70%);
  animation: gsoRingHalo 3s ease-in-out infinite;
  pointer-events: none;
}

.grs-ring-svg { width: 60px; height: 60px; filter: drop-shadow(0 2px 6px rgba(106, 88, 228, .35)); }
.grs-ring-svg .track { stroke: #E9ECF7; stroke-width: 7; }
.grs-ring-svg .fill { stroke-width: 7; stroke: url(#gsoRingGradient); }
.grs-ring-card-num { font-size: 22px; letter-spacing: -.01em; }


/* ==========================================================
   STEP TIMELINE -extra breathing room between description
   and progress bar (belt-and-suspenders on top of shortened
   copy, in case a future edit re-lengthens any description).
   ========================================================== */
.grs-step-bar { margin-top: .7rem; }


/* ==========================================================
   DARK-SECTION FOOTER FIX
   ----------------------------------------------------------
   .grs-frame-footer's label text (.grs-frame-footer b) is
   hardcoded near-black (#111827) in the base stylesheet, which
   is invisible on dark section backgrounds (#0B0F19). This
   scopes a light-text override to footers that sit inside a
   dark-themed .grs-steps or .grs-terminal block.
   ========================================================== */
.vf-section-border-dark .grs-frame-footer,
.bg-\[\#0B0F19\] .grs-frame-footer {
  background: rgba(106, 88, 228, .12);
  border-color: rgba(106, 88, 228, .3);
}
.vf-section-border-dark .grs-frame-footer b,
.bg-\[\#0B0F19\] .grs-frame-footer b {
  color: #FFFFFF !important;
}








.grs-t-bar-label{
  color:rgba(255, 255, 255, 0.61);
}