/* ═══════════════════════════════════════════════════════════════
   Funding-data SEO pages (/funding-data/*) — funding-specific bits only.
   Structure/typography reuse marketing.css primitives + alternatives.css
   (alt-*) + home.css (mcp-*). Keep this file to what those don't cover.
   ═══════════════════════════════════════════════════════════════ */

.fund-breadcrumb {
  margin-bottom: 1rem;
  color: var(--mkt-body-color);
}

.fund-hook {
  font-size: 1.125rem;
  color: var(--foreground);
  opacity: 0.9;
}

.fund-solution-h {
  margin-top: 2rem;
}

/* How-it-works — connected flow diagram (horizontal on desktop, vertical on
   mobile). Numbered nodes joined by an arrow rendered as a CSS pseudo-element. */
.fund-flow {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.fund-flow-step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--mkt-card-border);
  border-radius: 1rem;
  background: hsl(0 0% 100% / 0.02);
}

.fund-flow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--card);
  background: var(--foreground);
}

.fund-flow-title {
  font-weight: 600;
  font-size: 1rem;
  margin: 0.15rem 0 0;
  color: var(--foreground);
}

.fund-flow-body {
  margin: 0;
}

/* Connector arrow between steps. Mobile: points down, sits in the vertical
   gap. Desktop: points right, sits in the horizontal gap. */
.fund-flow-step:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  color: var(--mkt-body-color);
  font-size: 1.35rem;
  line-height: 1;
  bottom: -1.4rem;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
}

@media (min-width: 768px) {
  .fund-flow {
    flex-direction: row;
    align-items: stretch;
    gap: 1.5rem;
  }

  .fund-flow-step:not(:last-child)::after {
    bottom: auto;
    left: auto;
    top: 50%;
    right: -1.2rem;
    transform: translateY(-50%);
  }
}

/* Example queries */
.fund-queries {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fund-query {
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--mkt-card-border);
  border-radius: 0.75rem;
  color: var(--foreground);
  background: hsl(0 0% 100% / 0.02);
}

/* Static proof screenshot */
.fund-shot {
  margin: 1.25rem 0 0;
  border: 1px solid var(--mkt-card-border);
  border-radius: 1rem;
  overflow: hidden;
}

.fund-shot-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Connect block spacing (mcp-* styles come from home.css) */
.fund-connect .mcp-clients {
  margin-top: 1rem;
}