/* Flowtiv on flexilay.com: generated from Flowtiv's apps/marketing (scripts/handover.ts).
   Don't edit by hand; ask for a new copy. Every rule is scoped under .flowtiv-fx. */
@font-face {
  font-family: 'Flowtiv Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Flowtiv Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Flowtiv Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Flowtiv Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/inter-latin-800-normal.woff2') format('woff2');
}

.flowtiv-fx {
  --fx-ground: #f6f7f9;
  --fx-surface: #ffffff;
  --fx-border: #e4e7ec;
  --fx-border-strong: #828c9e;
  --fx-ink: #101828;
  --fx-ink-2: #344054;
  --fx-ink-3: #475467;
  --fx-accent: #2563eb;
  --fx-success: #067647;
  --fx-on-accent: #ffffff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  .flowtiv-fx {
  --fx-ground: #0f1217;
  --fx-surface: #161a21;
  --fx-border: #2a3140;
  --fx-border-strong: #6b778c;
  --fx-ink: #f2f4f7;
  --fx-ink-2: #cfd4dc;
  --fx-ink-3: #a9b0bc;
  --fx-accent: #60a5fa;
  --fx-success: #4ade80;
  --fx-on-accent: #0f1217;
    color-scheme: dark;
  }
}

.flowtiv-fx {
  box-sizing: border-box;
  display: block;
  background: var(--fx-ground);
  color: var(--fx-ink-2);
  font: 400 16px/1.6 'Flowtiv Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
.flowtiv-fx *, .flowtiv-fx *::before, .flowtiv-fx *::after { box-sizing: inherit; }
.flowtiv-fx :where(h1, h2, h3, p, ul, figure) { margin: 0; padding: 0; }
.flowtiv-fx :where(ul) { list-style: none; }
.flowtiv-fx img { display: block; max-width: 100%; height: auto; }
.flowtiv-fx a:focus-visible { outline: 2px solid var(--fx-accent); outline-offset: 2px; }

.flowtiv-fx .fx-wrap { max-width: 1152px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .flowtiv-fx .fx-wrap { padding: 0 24px; } }
.flowtiv-fx .fx-section { padding: 56px 0; }
@media (min-width: 640px) { .flowtiv-fx .fx-section { padding: 80px 0; } }
.flowtiv-fx .fx-alt { background: var(--fx-surface); border-block: 1px solid var(--fx-border); }

.flowtiv-fx .fx-hero { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .flowtiv-fx .fx-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; } }
.flowtiv-fx .fx-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fx-accent); }
.flowtiv-fx h1 { margin-top: 16px; font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; color: var(--fx-ink); text-wrap: balance; }
.flowtiv-fx .fx-lede { margin-top: 20px; max-width: 36rem; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); color: var(--fx-ink-3); }
.flowtiv-fx .fx-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.flowtiv-fx .fx-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 10px; font-size: 16px; font-weight: 600; text-decoration: none; }
.flowtiv-fx .fx-primary { background: var(--fx-accent); color: var(--fx-on-accent); }
.flowtiv-fx .fx-primary:hover { filter: brightness(0.94); }
.flowtiv-fx .fx-secondary { border: 1px solid var(--fx-border-strong); background: var(--fx-surface); color: var(--fx-ink); }
.flowtiv-fx .fx-secondary:hover { border-color: var(--fx-accent); }

.flowtiv-fx .fx-figure { display: grid; gap: 12px; }
.flowtiv-fx .fx-figure img { border: 1px solid var(--fx-border); border-radius: 14px; }
.flowtiv-fx figcaption { font-size: 14px; color: var(--fx-ink-3); }

.flowtiv-fx h2 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; color: var(--fx-ink); text-wrap: balance; }
.flowtiv-fx .fx-cards { margin-top: 32px; display: grid; gap: 16px; }
@media (min-width: 768px) { .flowtiv-fx .fx-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.flowtiv-fx .fx-card { padding: 24px; border: 1px solid var(--fx-border); border-radius: 14px; background: var(--fx-surface); }
.flowtiv-fx .fx-alt .fx-card { background: var(--fx-ground); }
.flowtiv-fx h3 { display: flex; gap: 10px; font-size: 18px; line-height: 1.35; font-weight: 600; color: var(--fx-ink); }
.flowtiv-fx h3 svg { flex: none; margin-top: 3px; width: 18px; height: 18px; color: var(--fx-success); }
.flowtiv-fx .fx-card p { margin-top: 8px; color: var(--fx-ink-3); }

.flowtiv-fx .fx-split { display: grid; gap: 16px; }
@media (min-width: 768px) { .flowtiv-fx .fx-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.flowtiv-fx .fx-split .fx-card h2 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); }
.flowtiv-fx .fx-split .fx-card p { margin-top: 12px; font-size: 17px; }
.flowtiv-fx .fx-link { display: inline-flex; margin-top: 32px; font-size: 18px; font-weight: 600; color: var(--fx-accent); text-decoration: underline; text-underline-offset: 3px; }