/*
 * Styles for content carried over from the old Webflow site into the new
 * design (legal texts, demo booking). The new site's Tailwind build
 * only contains the classes its own pages use, so this file styles the
 * ported markup with the design's own tokens (--color-*, --radius-*, ...).
 * Published at /legacy/fusion.css by tools/fuse.py.
 */

/* --- Long-form text: legal pages ----------------------------------------- */

.fx-prose {
  color: var(--color-ink-soft);
  font-size: 17px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.fx-prose > * + * { margin-top: 1.1em; }

.fx-prose h2,
.fx-prose h3,
.fx-prose h4,
.fx-prose h5 {
  font-family: var(--font-display);
  color: var(--color-navy);
  font-weight: 600;
  line-height: 1.3;
}

.fx-prose h2 { font-size: 26px; margin-top: 2.2em; }
.fx-prose h3 { font-size: 21px; margin-top: 2em; }
.fx-prose h4 { font-size: 18px; margin-top: 1.6em; }
.fx-prose h5 { font-size: 16px; margin-top: 1.4em; }
.fx-prose > :first-child { margin-top: 0; }

.fx-prose strong { color: var(--color-navy); font-weight: 600; }

.fx-prose a {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fx-prose a:hover { color: var(--color-blue-dark); }

.fx-prose ul,
.fx-prose ol { padding-left: 1.4em; }
.fx-prose ul { list-style: disc; }
.fx-prose ol { list-style: decimal; }
.fx-prose li + li { margin-top: 0.4em; }

.fx-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.fx-prose figure { margin: 2em 0; }
.fx-prose figcaption { margin-top: 0.6em; font-size: 14px; color: var(--color-ink-muted); }

.fx-prose blockquote {
  border-left: 3px solid var(--color-blue);
  padding-left: 1em;
  color: var(--color-navy);
}

.fx-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.fx-prose th,
.fx-prose td { border: 1px solid var(--color-line); padding: 8px 10px; text-align: left; vertical-align: top; }
.fx-prose th { background: var(--color-surface-2); color: var(--color-navy); }

/* Wide tables scroll inside their own box instead of widening the page. */
.fx-table-scroll { overflow-x: auto; }

/* --- Demo booking (HubSpot Meetings embed) ------------------------------ */

.fx-booking h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-navy);
}

.fx-booking > p { margin-top: 8px; color: var(--color-ink-soft); }

/* HubSpot sizes the iframe itself; keep room so the page does not jump. */
.fx-booking .meetings-iframe-container { margin-top: 24px; min-height: 680px; }