/* ============================================================
   Connect — Cross-flow band.
   Sits at the bottom of each flow so a visitor who scrolled all
   the way down can jump to the other audience without going back
   up to the hero switch.
============================================================ */

.connect-crossflow {
  background: var(--ink-900);
  color: var(--paper);
  border-top: 1px solid var(--color-border-inverse);
  padding-block: var(--space-10);
}

.connect-crossflow-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

@media (min-width: 800px) {
  .connect-crossflow-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
  }
}

.connect-crossflow-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--violet-300);
  margin-bottom: var(--space-2);
}

.connect-crossflow-copy p {
  color: var(--ink-300);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  max-width: 60ch;
}

/* The band is dark without carrying .section-dark, so the ghost button needs
   its inverse border spelled out. */
.connect-crossflow .btn-secondary {
  border-color: var(--color-border-inverse);
}

.connect-crossflow .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--violet-400);
}

/* ---------- light theme ---------- */

.theme-light .connect-crossflow {
  background: var(--ink-100);
  color: var(--ink-900);
  border-top-color: var(--color-border);
}

.theme-light .connect-crossflow-kicker {
  color: var(--violet-700);
}

.theme-light .connect-crossflow-copy p {
  color: var(--ink-600);
}