/* ==========================================================================
   RanKnight — AI Visibility Checker (lead magnet)
   ========================================================================== */

/* Tool-landing hero: centered + tight to the checker card (no floating void) */
.page-hero--tool { padding-bottom: var(--space-5); }
.page-hero--tool .container { max-width: 760px; margin-inline: auto; text-align: center; }
.page-hero--tool h1 { max-width: none; }
.page-hero--tool .page-hero__lede { margin-inline: auto; }

.checker { max-width: 720px; margin-inline: auto; }
.checker__card { background: var(--ink-800); border: 1px solid var(--ink-600); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-6); }
.checker__step { display: none; }
.checker__step.is-active { display: block; }
.checker__prompt { font-family: var(--font-display); font-weight: 800; color: var(--color-heading); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.checker__sub { color: var(--color-text-muted); margin-bottom: var(--space-5); }

.checker .form { gap: var(--space-4); }
.checker .grid-2 { display: grid; gap: var(--space-4); }
@media (min-width: 560px) { .checker .grid-2 { grid-template-columns: 1fr 1fr; } }

/* Loading / querying engines */
.querying { display: grid; gap: var(--space-3); margin-block: var(--space-3) var(--space-5); }
.engine-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--ink-600); border-radius: var(--radius-sm);
  background: var(--ink); color: var(--color-text-muted);
}
.engine-row .engine-name { font-weight: 600; color: var(--color-text); }
.engine-row .engine-status { margin-left: auto; font-size: var(--text-sm); display: inline-flex; align-items: center; gap: .4rem; }
.spinner { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--ink-600); border-top-color: var(--color-accent); animation: spin .7s linear infinite; }
.engine-row[data-done="true"] .spinner { display: none; }
.engine-row[data-done="true"] .engine-status { color: var(--rank-top); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-top-color: var(--ink-600); } }

/* Results scoreboard */
.ai-answer { border: 1px solid var(--ink-600); border-radius: var(--radius-sm); background: var(--ink); padding: var(--space-4); margin-bottom: var(--space-4); }
.ai-answer__q { font-size: var(--text-sm); color: var(--steel); margin-bottom: var(--space-3); display: flex; gap: .5rem; align-items: center; }
.ai-answer__q svg { width: 1.1rem; height: 1.1rem; color: var(--color-accent); flex-shrink: 0; }
.ai-list { display: grid; gap: var(--space-2); }
.ai-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--ink-800); border: 1px solid var(--ink-600); }
.ai-row .rank { font-family: var(--font-display); font-weight: 900; width: 1.5rem; text-align: center; color: var(--color-text-muted); }
.ai-row .who { color: var(--color-text); }
.ai-row .tag { margin-left: auto; font-size: var(--text-xs); color: var(--steel); }
.you-callout {
  margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--gold) 10%, var(--ink)); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  color: var(--color-text);
}
.you-callout strong { color: var(--color-heading); }

.checker__note { font-size: var(--text-xs); color: var(--steel); margin-top: var(--space-4); text-align: center; }
.checker__divider { display: flex; align-items: center; gap: var(--space-3); margin-block: var(--space-5); color: var(--steel); font-size: var(--text-sm); }
.checker__divider::before, .checker__divider::after { content: ""; height: 1px; background: var(--ink-600); flex: 1; }

/* success */
.checker__success { text-align: center; }
.checker__success svg { width: 2.6rem; height: 2.6rem; color: var(--rank-top); margin-bottom: var(--space-3); }