/* ==========================================================
   VersaForge - Google Ranking Service : SECTION VISUALS
   ----------------------------------------------------------
   Loaded ONLY by google-ranking-service.php.

   The hero visual is NOT styled here - it uses the original
   .grs-* styles in google-ranking-service.css, untouched.

   This file styles four section visuals:
     1. First Rank Tracker  - self-drawing rank chart
     2. Website SEO         - page anatomy optimiser
     3. Google Maps         - real map embed + local pack
     4. Achieving First Rank- score dials + audit checklist

   PERFORMANCE
   Every looping animation moves only transform / opacity
   (plus stroke-dashoffset, which stays on the SVG layer).
   No width, height, top or left is ever animated, so there
   is no layout thrash and no CLS.

   FAIL-SAFE
   Nothing here is load-bearing for legibility. If this file
   is missing or stale, the visuals degrade to plain, correct,
   readable content - never to broken or misleading output.
   ========================================================== */

.grx {
  --grx-violet:  #6A58E4;
  --grx-blue:    #4A86F5;
  --grx-green:   #10B981;
  --grx-amber:   #F59E0B;
  --grx-ink:     #111827;
  --grx-slate:   #475569;
  --grx-mute:    #5B6475;
  --grx-line:    #E6ECF5;
  --grx-tint:    #F8FAFF;
  --grx-radius:  1.15rem;
  --grx-shadow:  0 18px 44px -20px rgba(106, 88, 228, .30);
  --grx-mono:    'Inter', ui-monospace, monospace;
}

/* ==========================================================
   1. SHARED SHELL
   ========================================================== */
.grx-scene {
  position: relative;
  width: 100%;
  max-width: 580px;
  margin-inline: auto;
  contain: layout paint;
  isolation: isolate;
}

.grx-scene::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(45% 45% at 30% 30%, rgba(106, 88, 228, .16), transparent 70%),
    radial-gradient(45% 45% at 72% 66%, rgba(74, 134, 245, .14), transparent 70%);
  filter: blur(28px);
  animation: grx-aurora 14s ease-in-out infinite;
  pointer-events: none;
}

@keyframes grx-aurora {
  0%, 100% { transform: scale(1)    rotate(0deg);  opacity: .85; }
  33%      { transform: scale(1.12) rotate(6deg);  opacity: 1;   }
  66%      { transform: scale(.95)  rotate(-5deg); opacity: .7;  }
}

.grx-frame {
  position: relative;
  z-index: 1;
  border-radius: var(--grx-radius);
  background: #fff;
  border: 1px solid var(--grx-line);
  box-shadow: var(--grx-shadow);
  overflow: hidden;
  animation: grx-float 7s ease-in-out infinite;
  will-change: transform;
}

@keyframes grx-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}

.grx-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.05rem;
  background: #F7F8FC;
  border-bottom: 1px solid #ECEFF6;
  min-width: 0;
}

.grx-dot { width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto; }
.grx-dot.r { background: #EF4444; }
.grx-dot.y { background: #F59E0B; }
.grx-dot.g { background: #10B981; }

.grx-url {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: .45rem;
  height: 24px;
  border-radius: 999px;
  background: #EEF1F8;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: 0 .7rem;
  font: 600 14px/1 var(--grx-mono);
  color: var(--grx-slate);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.grx-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font: 800 12px/1 var(--grx-mono);
  letter-spacing: .06em;
  color: var(--grx-violet);
  flex: 0 0 auto;
}

.grx-blip {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  animation: grx-blip 1.5s ease-in-out infinite;
}

@keyframes grx-blip {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .25; transform: scale(.7); }
}

.grx-body { padding: clamp(1.1rem, 3vw, 1.6rem); }

/* Fill-height variant: the visual matches the text column exactly,
   with the comparison box absorbing any extra height. */
.grx-scene.is-fill,
.grx-scene.is-fill .grx-frame { height: 100%; }

.grx-scene.is-fill .grx-frame,
.grx-scene.is-fill .grx-body { display: flex; flex-direction: column; }

.grx-scene.is-fill .grx-body { flex: 1 1 auto; min-height: 0; }

/* Ambient scan pass */
.grx-beam {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.grx-beam::after {
  content: "";
  position: absolute;
  top: -60%;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(180deg, transparent, rgba(106, 88, 228, .12), transparent);
  animation: grx-sweep 5.5s cubic-bezier(.45, 0, .55, 1) infinite;
  will-change: transform;
}

@keyframes grx-sweep {
  0%   { transform: translate3d(0, 0, 0);    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate3d(0, 280%, 0); opacity: 0; }
}

/* Shared metric strip (used by First Rank Tracker, Google Maps, PDF report) */
.grx-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  margin-top: 1.1rem;
}

.grx-metric {
  padding: .7rem .5rem;
  border-radius: .75rem;
  background: var(--grx-tint);
  border: 1px solid var(--grx-line);
  text-align: center;
  animation: grx-rise .7s cubic-bezier(.2, .8, .2, 1) both;
}

.grx-metric:nth-child(2) { animation-delay: .12s; }
.grx-metric:nth-child(3) { animation-delay: .24s; }

@keyframes grx-rise {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.grx-metric-v { font: 800 19px/1 'Inter', sans-serif; color: var(--grx-violet); }
.grx-metric:nth-child(2) .grx-metric-v { color: var(--grx-blue); }
.grx-metric:nth-child(3) .grx-metric-v { color: #059669; }

.grx-metric-k {
  margin-top: .3rem;
  font: 700 12px/1.2 var(--grx-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--grx-mute);
}

.grx-stars { color: var(--grx-amber); font-size: 14.5px; letter-spacing: .5px; flex: 0 0 auto; }

/* ==========================================================
   2. FIRST RANK TRACKER - search-results climb visual
   ========================================================== */

/* First Rank Tracker (fill mode): the ladder itself expands to absorb
   all extra vertical space so there is no dead whitespace between the
   header and the metrics/flip rows below - those stay a fixed, readable
   size and the ladder grows or shrinks around them. */
.grx-climb-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.grx-climb-body .grx-metrics,
.grx-climb-body .grx-flip {
  flex: 0 0 auto;
}

/* Big rank readout at the top of the card */
.grx-climb-head {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex: 0 0 auto;
  margin-bottom: 1rem;
}
.grx-climb-rank {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  line-height: 1;
  color: var(--grx-violet);
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  transition: color .5s ease;
}
.grx-climb-hash { font-size: clamp(1.4rem, 3vw, 1.8rem); opacity: .55; }
.grx-climb-num  { font-size: clamp(2.4rem, 6vw, 3.1rem); }
.grx-climb-rank.is-top { color: #059669; }

.grx-climb-head-info {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
}
.grx-climb-head-label {
  font: 700 12px/1.2 var(--grx-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--grx-mute);
}
.grx-climb-head-trend {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font: 700 13px/1.2 'Inter', sans-serif;
  color: var(--grx-violet);
}
.grx-climb-head-trend i { flex: 0 0 auto; }

/* Results ladder */
.grx-ladder {
  position: relative;
  flex: 1 1 auto;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .55rem;
}

.grx-ladder-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  height: 34px;
  opacity: .6;
  transition: opacity .5s ease;
}
/* The row currently sitting directly under the climbing "Your Business"
   card fades out so it never peeks out from underneath the overlay -
   this is what was previously showing as an empty gray bar. */
.grx-ladder-row.is-covered {
  opacity: 0;
}
.grx-ladder-n {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: .4rem;
  background: var(--grx-tint);
  border: 1px solid var(--grx-line);
  color: var(--grx-mute);
  font: 700 12px/1 var(--grx-mono);
}
.grx-ladder-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.grx-ladder-name {
  min-width: 0;
  font: 600 13px/1.2 'Inter', sans-serif;
  color: var(--grx-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grx-ladder-stars {
  flex: 0 0 auto;
  color: #CBD2E0;
  font-size: 12px;
  letter-spacing: .08em;
}

/* The climbing "you" card - absolutely positioned so it can travel
   smoothly across ladder rows via transform (JS sets --climb-y). */
.grx-climb-you {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 34px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 0 .7rem;
  border-radius: .6rem;
  background: linear-gradient(135deg, rgba(106,88,228,.10), rgba(74,134,245,.06));
  border: 1.5px solid rgba(106,88,228,.35);
  box-shadow: 0 10px 24px -12px rgba(106,88,228,.35);
  transform: translate3d(0, var(--climb-y, 0px), 0);
  transition: transform 1.1s cubic-bezier(.32,.9,.24,1), border-color .5s ease, box-shadow .5s ease, background .5s ease;
  will-change: transform;
  z-index: 2;
}
.grx-climb-you-badge {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--grx-violet), var(--grx-blue));
  color: #fff;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.grx-climb-you.is-top .grx-climb-you-badge { opacity: 1; transform: scale(1); }

.grx-climb-you-name {
  flex: 1 1 auto;
  min-width: 0;
  font: 700 14px/1.2 'Inter', sans-serif;
  color: var(--grx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grx-climb-you-stars {
  flex: 0 0 auto;
  color: var(--grx-amber);
  font-size: 12px;
  letter-spacing: .1em;
}
.grx-climb-you.is-top {
  border-color: rgba(16,185,129,.45);
  background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(106,88,228,.06));
  box-shadow: 0 14px 30px -12px rgba(16,185,129,.4);
  animation: grx-climb-settle .6s ease;
}
@keyframes grx-climb-settle {
  0%   { transform: translate3d(0, var(--climb-y, 0px), 0) scale(1.04); }
  100% { transform: translate3d(0, var(--climb-y, 0px), 0) scale(1); }
}

/* Ripple pulse that fires once the card reaches #1, on loop */
.grx-climb-you::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid rgba(16,185,129,.5);
  opacity: 0;
  pointer-events: none;
}
.grx-climb-you.is-top::after {
  animation: grx-climb-ripple 2.2s ease-out infinite;
}
@keyframes grx-climb-ripple {
  0%   { opacity: .7; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.12); }
}

/* ==========================================================
   1. SHARED SHELL
   ========================================================== */

/* Before -> after rank flip */
.grx-flip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 1.1rem;
  padding: .95rem 1rem;
  border-radius: .9rem;
  background: var(--grx-tint);
  border: 1px solid var(--grx-line);
}

.grx-flip-cell { text-align: center; }

.grx-flip-v {
  font: 800 26px/1 'Inter', sans-serif;
  color: #94A3B8;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.grx-flip-cell.is-after .grx-flip-v {
  color: #059669;
  text-decoration: none;
  animation: grx-pop 3.2s ease-in-out infinite;
}

@keyframes grx-pop {
  0%, 70%, 100% { transform: scale(1); }
  80%           { transform: scale(1.16); }
}

.grx-flip-k {
  margin-top: .25rem;
  font: 700 12px/1.2 var(--grx-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--grx-mute);
}

.grx-arrow { color: var(--grx-violet); animation: grx-nudge 1.8s ease-in-out infinite; }

@keyframes grx-nudge {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(6px, 0, 0); }
}

/* ==========================================================
   3. WEBSITE SEO - before / after split of the same page
   The two layers are structurally identical, so they are
   always exactly the same height and the wipe lines up.
   The reveal is a counter-translated clip: pure transform,
   no clip-path recalculation, no layout work.
   ========================================================== */
.grx-ba {
  position: relative;
  flex: 1 1 auto;
  min-height: clamp(300px, 46vw, 360px);
  border-radius: .85rem;
  overflow: hidden;
  background: #fff;
  isolation: isolate;
}

/* Both states occupy the same box */
.grx-ba-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: clamp(.9rem, 2.4vw, 1.15rem);
}

.grx-ba-layer.is-before { background: #F4F5F8; }

.grx-ba-layer.is-after {
  background: linear-gradient(160deg, #FFFFFF 0%, #F6F4FF 100%);
  transform: translate3d(100%, 0, 0);
  animation: grx-ba-content 9s cubic-bezier(.6, 0, .3, 1) infinite;
  will-change: transform;
}

/* The clip window slides in; its child slides the opposite way
   by the same amount, so the "after" page never actually moves. */
.grx-ba-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
  transform: translate3d(-100%, 0, 0);
  animation: grx-ba-clip 9s cubic-bezier(.6, 0, .3, 1) infinite;
  will-change: transform;
}

@keyframes grx-ba-clip {
  0%, 8%    { transform: translate3d(-100%, 0, 0); }
  46%, 78%  { transform: translate3d(0, 0, 0); }
  100%      { transform: translate3d(-100%, 0, 0); }
}

@keyframes grx-ba-content {
  0%, 8%    { transform: translate3d(100%, 0, 0); }
  46%, 78%  { transform: translate3d(0, 0, 0); }
  100%      { transform: translate3d(100%, 0, 0); }
}

/* Divider that travels with the wipe edge */
.grx-ba-wipe {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  animation: grx-ba-wipe 9s cubic-bezier(.6, 0, .3, 1) infinite;
  will-change: transform;
}

@keyframes grx-ba-wipe {
  0%, 8%    { transform: translate3d(0, 0, 0); }
  46%, 78%  { transform: translate3d(100%, 0, 0); }
  100%      { transform: translate3d(0, 0, 0); }
}

.grx-ba-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: linear-gradient(180deg, rgba(106, 88, 228, .25), var(--grx-violet) 22%, var(--grx-blue) 78%, rgba(74, 134, 245, .25));
  box-shadow: 0 0 14px rgba(106, 88, 228, .5);
}

.grx-ba-edge i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--grx-violet);
  box-shadow: 0 4px 14px -4px rgba(106, 88, 228, .6);
}

/* the two chevrons inside the grip */
.grx-ba-edge i::before,
.grx-ba-edge i::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -3px;
  border-top: 2px solid var(--grx-violet);
  border-right: 2px solid var(--grx-violet);
}

.grx-ba-edge i::before { left: 5px;  transform: rotate(-135deg); }
.grx-ba-edge i::after  { right: 5px; transform: rotate(45deg); }

/* ---- state row ---- */
.grx-ba-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex: 0 0 auto;
}

.grx-ba-badge {
  padding: .26rem .6rem;
  border-radius: 999px;
  font: 800 12px/1 var(--grx-mono);
  letter-spacing: .12em;
  background: #E4E7EE;
  color: #7A8496;
}

.is-after .grx-ba-badge {
  background: linear-gradient(135deg, var(--grx-violet), var(--grx-blue));
  color: #fff;
}

.grx-ba-rank {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  font: 600 12px/1 var(--grx-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #98A1B2;
}

.grx-ba-rank b {
  font: 800 clamp(19px, 3.4vw, 24px)/1 'Inter', sans-serif;
  letter-spacing: -.02em;
  color: #9AA3B4;
}

.is-after .grx-ba-rank   { color: var(--grx-mute); }
.is-after .grx-ba-rank b { color: #059669; }

/* ---- the search result card ---- */
.grx-ba-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .4rem;
  padding: clamp(.75rem, 2vw, 1rem);
  border-radius: .7rem;
  border: 1px solid #E4E7EE;
  background: #fff;
  min-height: 0;
}

.is-after .grx-ba-card {
  border-color: rgba(106, 88, 228, .28);
  box-shadow: 0 10px 26px -16px rgba(106, 88, 228, .55);
}

.grx-ba-url {
  font: 600 14px/1.3 var(--grx-mono);
  color: #A3ABBA;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.is-after .grx-ba-url { color: #4B8A5C; }

.grx-ba-title {
  font: 700 clamp(14.5px, 2.5vw, 18.5px)/1.35 'Inter', sans-serif;
  color: #98A1B2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.is-after .grx-ba-title { color: var(--grx-violet); }

.grx-ba-desc { display: grid; gap: .28rem; margin-top: .1rem; }

.grx-ba-line {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: #E9EBF0;
}

.grx-ba-line.w90 { width: 90%; }
.grx-ba-line.w80 { width: 80%; }

.is-after .grx-ba-line { background: #DAD5F6; }

.grx-ba-note {
  margin-top: .35rem;
  font: 600 14.5px/1.4 var(--grx-mono);
  color: #A3ABBA;
}

.is-after .grx-ba-note { color: var(--grx-mute); }

/* ---- bottom stats ---- */
.grx-ba-stats {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
}

.grx-ba-stat {
  padding: .55rem .3rem;
  border-radius: .6rem;
  border: 1px solid #E4E7EE;
  background: #FAFBFD;
  text-align: center;
}

.is-after .grx-ba-stat {
  border-color: rgba(106, 88, 228, .22);
  background: rgba(106, 88, 228, .05);
}

.grx-ba-stat b {
  display: block;
  font: 800 clamp(13px, 2.6vw, 18px)/1 'Inter', sans-serif;
  color: #9AA3B4;
}

.is-after .grx-ba-stat b { color: var(--grx-violet); }
.is-after .grx-ba-stat:nth-child(3) b { color: #059669; }

.grx-ba-stat span {
  display: block;
  margin-top: .28rem;
  font: 700 12px/1.2 var(--grx-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #A3ABBA;
}

.is-after .grx-ba-stat span { color: var(--grx-mute); }

/* ==========================================================
   4. GOOGLE MAPS - real embed + local pack
   ========================================================== */
.grx-map {
  position: relative;
  border-radius: .9rem;
  overflow: hidden;
  background: #EAF3EC;
  height: clamp(190px, 28vw, 250px);
  contain: layout paint;
}

.grx-map-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: saturate(.92) brightness(1.02);
}

.grx-map-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 34%);
}

.grx-map-search {
  position: absolute;
  z-index: 4;
  top: .7rem;
  left: .7rem;
  right: .7rem;
  height: 34px;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: 0 .8rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--grx-line);
  box-shadow: 0 6px 16px -8px rgba(17, 24, 39, .22);
  font: 600 14px/1 'Inter', sans-serif;
  color: var(--grx-slate);
}

/* Sonar sweep from your location */
.grx-radar {
  position: absolute;
  z-index: 2;
  left: 44%;
  top: 60%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  border: 2px solid var(--grx-green);
  opacity: 0;
  animation: grx-radar 3.4s cubic-bezier(.2, .7, .3, 1) infinite;
  pointer-events: none;
}

.grx-radar:nth-of-type(2) { animation-delay: 1.13s; }
.grx-radar:nth-of-type(3) { animation-delay: 2.26s; }

@keyframes grx-radar {
  0%   { transform: scale(.5);  opacity: .85; }
  100% { transform: scale(7);   opacity: 0;   }
}

.grx-pin {
  position: absolute;
  z-index: 3;
  width: 26px;
  height: 26px;
  margin: -26px 0 0 -13px;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 50% 8%;
  transform: rotate(-45deg);
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(17, 24, 39, .5);
  animation: grx-drop 3.4s cubic-bezier(.3, 1.5, .5, 1) infinite;
}

.grx-pin > * { transform: rotate(45deg); }
.grx-pin.is-you { background: var(--grx-green); }
.grx-pin.is-b   { background: var(--grx-blue);  animation-delay: .35s; }
.grx-pin.is-c   { background: var(--grx-amber); animation-delay: .7s;  }

@keyframes grx-drop {
  0%       { transform: rotate(-45deg) translate3d(0, -14px, 0) scale(.7); opacity: 0; }
  14%, 82% { transform: rotate(-45deg) translate3d(0, 0, 0)     scale(1);  opacity: 1; }
  100%     { transform: rotate(-45deg) translate3d(0, 0, 0)     scale(1);  opacity: 1; }
}

.grx-pack { display: grid; gap: .45rem; margin-top: .8rem; }

.grx-pack-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .7rem;
  border-radius: .7rem;
  border: 1px solid var(--grx-line);
  background: #fff;
  min-width: 0;
  animation: grx-rise .7s cubic-bezier(.2, .8, .2, 1) both;
}

.grx-pack-row:nth-child(2) { animation-delay: .12s; }
.grx-pack-row:nth-child(3) { animation-delay: .24s; }

.grx-pack-row.is-you {
  border-color: rgba(16, 185, 129, .40);
  background: linear-gradient(135deg, rgba(16, 185, 129, .09), rgba(52, 211, 153, .04));
}

.grx-pack-n {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: .45rem;
  background: #EEF1F8;
  color: var(--grx-slate);
  font: 800 12px/1 var(--grx-mono);
}

.grx-pack-n.is-first { background: var(--grx-green); color: #fff; }

.grx-pack-main { flex: 1 1 auto; min-width: 0; }

.grx-pack-t {
  font: 700 16px/1.25 'Inter', sans-serif;
  color: var(--grx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grx-pack-m {
  margin-top: .15rem;
  font: 600 13px/1.2 var(--grx-mono);
  color: var(--grx-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================
   5. ACHIEVING FIRST RANK - score dials + audit
   ========================================================== */
.grx-dials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

.grx-dial {
  position: relative;
  padding: .9rem .6rem;
  border-radius: .85rem;
  background: var(--grx-tint);
  border: 1px solid var(--grx-line);
  text-align: center;
  overflow: hidden;
  animation: grx-rise .7s cubic-bezier(.2, .8, .2, 1) both;
}

.grx-dial:nth-child(2) { animation-delay: .1s; }
.grx-dial:nth-child(3) { animation-delay: .2s; }
.grx-dial:nth-child(4) { animation-delay: .3s; }

.grx-dial::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .72), transparent);
  animation: grx-shimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}

.grx-dial:nth-child(2)::after { animation-delay: .5s;  }
.grx-dial:nth-child(3)::after { animation-delay: 1s;   }
.grx-dial:nth-child(4)::after { animation-delay: 1.5s; }

@keyframes grx-shimmer {
  0%, 55% { transform: translate3d(0, 0, 0); }
  100%    { transform: translate3d(400%, 0, 0); }
}

.grx-dial svg { display: block; margin: 0 auto; }

.grx-dial-track { fill: none; stroke: #E6ECF5; stroke-width: 9; }

.grx-dial-arc {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: grx-arc 4.5s cubic-bezier(.3, .8, .2, 1) infinite;
}

@keyframes grx-arc {
  0%       { stroke-dashoffset: 283; }
  45%, 85% { stroke-dashoffset: var(--grx-off, 40); }
  100%     { stroke-dashoffset: 283; }
}

.grx-dial-v { margin-top: .5rem; font: 800 20px/1 'Inter', sans-serif; color: var(--grx-ink); }

.grx-dial-k {
  margin-top: .25rem;
  font: 700 12px/1.2 var(--grx-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--grx-mute);
}

.grx-audit { display: grid; gap: .45rem; margin-top: 1.1rem; }

.grx-audit-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  font: 600 14.5px/1.3 'Inter', sans-serif;
  color: var(--grx-slate);
  min-width: 0;
}

.grx-check {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--grx-green);
  display: grid;
  place-items: center;
  transform: scale(0);
  animation: grx-tick 5s cubic-bezier(.3, 1.6, .5, 1) infinite;
}

.grx-check svg { width: 9px; height: 9px; stroke: #fff; stroke-width: 3.2; fill: none; }

.grx-audit-row:nth-child(1) .grx-check { animation-delay: .1s; }
.grx-audit-row:nth-child(2) .grx-check { animation-delay: .5s; }
.grx-audit-row:nth-child(3) .grx-check { animation-delay: .9s; }
.grx-audit-row:nth-child(4) .grx-check { animation-delay: 1.3s; }

@keyframes grx-tick {
  0%       { transform: scale(0); }
  12%, 85% { transform: scale(1); }
  100%     { transform: scale(0); }
}

.grx-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: 1rem;
  padding: .7rem .85rem;
  border-radius: .75rem;
  background: var(--grx-tint);
  border: 1px solid var(--grx-line);
  font: 700 14.5px/1 'Inter', sans-serif;
  color: var(--grx-ink);
}

.grx-status-pill {
  padding: .3rem .65rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--grx-violet), var(--grx-blue));
  color: #fff;
  font: 800 12px/1 var(--grx-mono);
  letter-spacing: .05em;
  white-space: nowrap;
  animation: grx-glow 3s ease-in-out infinite;
}

@keyframes grx-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(106, 88, 228, 0); }
  50%      { box-shadow: 0 0 18px 0 rgba(106, 88, 228, .55); }
}

/* ==========================================================
   6. RESPONSIVE
   ========================================================== */
@media (max-width: 1023px) {
  .grx-scene { max-width: 520px; }
}

@media (max-width: 639px) {
  .grx-scene     { max-width: 100%; }
  .grx-body      { padding: 1rem .9rem; }
  .grx-url       { font-size: 12px; }
  .grx-metrics   { gap: .4rem; }
  .grx-metric-v  { font-size: 16px; }
  .grx-metric-k  { font-size: 12px; letter-spacing: .03em; }
  .grx-dials     { gap: .5rem; }
  .grx-flip      { gap: .7rem; padding: .8rem .6rem; }
  .grx-flip-v    { font-size: 21px; }
  .grx-status    { font-size: 12px; padding: .6rem .65rem; }
  .grx-status-pill { font-size: 12px; padding: .3rem .6rem; }
  .grx-ba        { min-height: clamp(320px, 82vw, 400px); }
  .grx-ba-layer  { gap: .7rem; }
  .grx-ba-stat span { font-size: 12px; letter-spacing: .02em; }
}

@media (max-width: 400px) {
  .grx-pack-m    { font-size: 12px; }
  .grx-ba-note   { display: none; }
  .grx-ba-edge i { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
}

/* ==========================================================
   7. MOTION SAFETY - everything resolves to its finished state
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .grx *,
  .grx *::before,
  .grx *::after {
    animation: none !important;
    transition: none !important;
  }

  .grx-line       { stroke-dashoffset: 0; }
  .grx-area       { opacity: 1; transform: none; }
  .grx-runner     { opacity: 1; offset-distance: 100%; }
  .grx-dial-arc   { stroke-dashoffset: var(--grx-off, 40); }
  .grx-check      { transform: scale(1); }
  .grx-metric,
  .grx-dial,
  .grx-pack-row   { opacity: 1; transform: none; }
  .grx-pin        { transform: rotate(-45deg); opacity: 1; }
  .grx-radar      { opacity: 0; }

  /* Comparison: no sliding/parallax (that's what reduced-motion
     guards against), but the before/after story must still be
     visible -a permanently frozen "AFTER" card with no visible
     "BEFORE" state reads as broken, not as an accessibility
     accommodation. A slow opacity cross-fade has no motion/
     vestibular trigger (no movement, no parallax, no directional
     sliding) so it stays within reduced-motion guidelines while
     still telling the actual before/after story on a loop. */
  .grx-ba-clip {
    inset: 0;
    transform: none !important;
    clip-path: none;
    animation: grx-ba-fade-after 9s ease-in-out infinite !important;
  }
  .grx-ba-layer.is-after {
    transform: none !important;
    animation: none !important;
  }
  .grx-ba-layer.is-before { animation: grx-ba-fade-before 9s ease-in-out infinite !important; }
  .grx-ba-wipe    { display: none; }

  @keyframes grx-ba-fade-after {
    0%, 42%   { opacity: 0; }
    50%, 92%  { opacity: 1; }
    100%      { opacity: 0; }
  }
  @keyframes grx-ba-fade-before {
    0%, 42%   { opacity: 1; }
    50%, 92%  { opacity: 0; }
    100%      { opacity: 1; }
  }
}

/* Skip offscreen work - saves battery and main-thread time */
@supports (content-visibility: auto) {
  .grx-scene { content-visibility: auto; contain-intrinsic-size: 520px; }
}

/* ==========================================================
   MOBILE 2-UP FIX -- fixed 3-item metric/stat strips show only
   2 tiles per row on small phones (3 tiles in a row was either
   cramped/clipped, or stacking all 3 full-width made the card
   too tall). The 3rd tile is hidden rather than wrapped to its
   own half-empty row, and the CTA nothing else references it.
   ========================================================== */
@media (max-width: 480px) {
  .grx-ba-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .6rem !important; }
  .grx-ba-stats > *:nth-child(3) { display: none !important; }
  .grx-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .6rem !important; }
  .grx-metrics > *:nth-child(3) { display: none !important; }
}