/* ==========================================================================
   RanKnight — Proof components (shared: Domination Map + proof stats)
   Used on home, local-seo, and results.
   ========================================================================== */

/* ---- Domination map (before/after ranking heat map) ---- */
.dommap { position: relative; }
.dommap__frame {
  position: relative; border: 1px solid var(--ink-600); border-radius: var(--radius);
  background: var(--ink-800); box-shadow: var(--shadow); overflow: hidden;
}
.dommap__media { position: relative; aspect-ratio: 1000 / 812; }
.dommap__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-slow) var(--ease-out); }
.dommap__img[data-state="before"] { opacity: 1; }
.dommap__img[data-state="after"]  { opacity: 0; }
.dommap[data-view="after"] .dommap__img[data-state="before"] { opacity: 0; }
.dommap[data-view="after"] .dommap__img[data-state="after"]  { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .dommap__img { transition: none; } }

.dommap__tag {
  position: absolute; top: var(--space-3); left: var(--space-3); z-index: 3;
  background: color-mix(in srgb, var(--ink) 78%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--ink-600); border-radius: var(--radius-pill);
  padding: .4rem .85rem; font-size: var(--text-xs); font-weight: 600; letter-spacing: .02em;
  color: var(--color-text); display: inline-flex; align-items: center; gap: .45rem;
}
.dommap__tag .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--rank-top); }

.dommap__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--ink-600); background: var(--ink-800);
}
.dommap__toggle { display: inline-flex; background: var(--ink); border: 1px solid var(--ink-600); border-radius: var(--radius-pill); padding: 3px; }
.dommap__toggle button {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
  color: var(--color-text-muted); background: transparent; border: 0; cursor: pointer;
  padding: .5rem .95rem; border-radius: var(--radius-pill); transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.dommap__toggle button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-accent); }
.dommap__readout { text-align: right; }
.dommap__readout .num { font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl); color: var(--color-heading); line-height: 1; }
.dommap__readout .lab { font-size: var(--text-xs); color: var(--color-text-muted); }
.dommap__note { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--steel); text-align: center; }

/* ---- Proof stats ---- */
.proof-stats { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-top: var(--space-2); }
@media (min-width: 640px) { .proof-stats { grid-template-columns: repeat(3, 1fr); } }
.proof-stat { text-align: center; }
.proof-stat__num { font-family: var(--font-display); font-weight: 900; font-size: var(--text-3xl); color: var(--color-accent-text); line-height: 1; margin-bottom: var(--space-2); }
.proof-stat p { margin: 0 auto; color: var(--color-text-muted); max-width: 30ch; }
.proof-cta { text-align: center; margin-top: var(--space-6); }

/* ==========================================================================
   Homepage proof section — static before/after, real-calls card, attribution
   ========================================================================== */

/* Static single-image variant of the dommap frame (hero) */
.dommap__media--static .dommap__img { position: absolute; inset: 0; opacity: 1; }
.dommap__caption { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
  letter-spacing: .04em; text-transform: uppercase; color: var(--rank-top); }

/* Honest attribution line — the strongest sentence on the page, not small print */
.proof__own {
  max-width: 60ch; margin: var(--space-4) auto 0; text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-lg); line-height: 1.3; color: var(--color-heading); letter-spacing: -0.01em;
}
.proof__own strong { color: var(--color-accent-text); }

/* Before → After static comparison with arrow */
.ba { display: grid; gap: var(--space-4); grid-template-columns: 1fr; align-items: center; margin-top: var(--space-6); }
@media (min-width: 760px) { .ba { grid-template-columns: 1fr auto 1fr; gap: var(--space-4); } }
.ba__panel { margin: 0; border: 1px solid var(--ink-600); border-radius: var(--radius); overflow: hidden; background: var(--ink-800); box-shadow: var(--shadow); }
.ba__label {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--ink-600);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); letter-spacing: .06em; text-transform: uppercase;
}
.ba__label--before { color: var(--rank-low); }
.ba__label--after  { color: var(--rank-top); }
.ba__label .pct { font-size: var(--text-sm); color: var(--color-heading); letter-spacing: 0; text-transform: none; font-weight: 700; }
.ba__panel img { width: 100%; height: auto; display: block; aspect-ratio: 1000 / 820; object-fit: cover; }
.ba__arrow { display: grid; place-items: center; color: var(--color-accent); }
.ba__arrow svg { width: 2.2rem; height: 2.2rem; }
@media (max-width: 759px) { .ba__arrow { transform: rotate(90deg); margin: calc(-1 * var(--space-2)) 0; } }

/* Bridge line into the calls proof */
.proof__bridge { text-align: center; max-width: 52ch; margin: var(--space-7) auto var(--space-4);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); color: var(--color-heading); }

/* Real calls card (GBP screenshot + caption) */
.proof__calls { display: grid; gap: var(--space-4); padding: var(--space-4); max-width: 920px; margin-inline: auto; }
.proof__calls img { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); border: 1px solid var(--ink-600); }
.proof__calls figcaption { text-align: center; }
.proof__calls-lead { color: var(--color-text); max-width: 62ch; margin: 0 auto; }
.proof__calls-lead strong { color: var(--color-heading); }
.proof__calls-sub { color: var(--steel); font-size: var(--text-sm); margin: var(--space-2) auto 0; }

/* Proof stats spacing when it follows the calls card */
.proof .proof-stats { margin-top: var(--space-7); }

/* Client-proof figure spacing (Elite before/after card) */
.proof__client { margin-top: var(--space-4); }