/* ==========================================================================
   Fiscor global footer — one shared footer for every page (Framer + authored).
   Self-contained: no dependency on Framer classes or page CSS.
   Backdrop = existing green gradient PNG + flowing-lines overlay.
   ========================================================================== */

/* Hide any pre-existing footer so only this one renders */
.framer-nkxd1e-container { display: none !important; }   /* native Framer footer */

.fx-footer,
.fx-footer *,
.fx-footer *::before,
.fx-footer *::after { box-sizing: border-box; }

.fx-footer {
  /* side padding held as a proportion of screen width (see reference) */
  --fx-edge: max(16px, 8.5%);   /* margin lines — distance from each edge */
  --fx-pad:  max(24px, 11%);    /* content inset from each edge */
  position: relative;
  width: 100%;
  margin: 0;
  background: #07130d;
  color: #fff;
  font-family: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* vertical margin / frame lines at the container edges (full footer height) */
.fx-footer::before,
.fx-footer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, .09);
  z-index: 4;
  pointer-events: none;
}
.fx-footer::before { left: var(--fx-edge); }
.fx-footer::after  { right: var(--fx-edge); }

/* --- green backdrop (gradient PNG + flowing lines) ------------------------ */
.fx-footer__main {
  position: relative;
  isolation: isolate;
}
.fx-footer__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.fx-footer__bg::before {          /* backdrop image (gradient + flowing lines) */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/_assets/images/footer-backdrop.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.fx-footer__inner {
  position: relative;
  z-index: 1;
  padding: 250px var(--fx-pad) 195px;
}

/* --- top row: brand block + link columns --------------------------------- */
.fx-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.fx-footer__brand {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.fx-footer__logo { display: inline-flex; }
.fx-footer__logo img { height: 40px; width: auto; display: block; }

.fx-footer__copyline { display: flex; flex-direction: column; gap: 6px; }
.fx-footer__tag {
  margin: 0;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;   /* keep the sentence on one line (desktop) */
}
.fx-footer__sub {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 200;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .78);
}

/* newsletter */
.fx-footer__form {
  display: flex;
  align-items: stretch;
  width: 100%;              /* span the width of the text above (ends at "businesses.") */
  height: 52px;
  margin-top: 4px;
}
.fx-footer__form input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .35);
  border-right: none;
  color: #fff;
  font: inherit;
  font-size: 15px;
  padding: 0 18px;
  outline: none;
}
.fx-footer__form input::placeholder { color: rgba(255, 255, 255, .72); }
.fx-footer__form input:focus { border-color: rgba(255, 255, 255, .6); }
.fx-footer__form button {
  flex: none;
  height: 100%;
  background: #17a34a;
  color: #fff;
  border: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 0 30px;
  cursor: pointer;
  transition: background .2s ease;
}
.fx-footer__form button:hover { background: #149042; }

/* link columns */
.fx-footer__cols {
  flex: none;
  display: flex;
  gap: min(100px, 9vw);
  padding-top: 68px;   /* drop headers to align with the tagline line (logo 40 + gap 28) */
}
.fx-footer__col { display: flex; flex-direction: column; }
.fx-footer__col h4 {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  color: #fff;
}
.fx-footer__col a {
  display: block;
  padding: 7px 0;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .55);
  text-decoration: none;
  transition: color .2s ease;
}
.fx-footer__col a:hover { color: #fff; }

/* --- bottom bar ---------------------------------------------------------- */
.fx-footer__bar {
  position: relative;
  z-index: 1;
  background: #0a0d0c;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.fx-footer__bar-inner {
  padding: 26px var(--fx-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.fx-footer__copy {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
}
.fx-footer__legal { display: flex; gap: 34px; }
.fx-footer__legal a,
.fx-footer__legal span {
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
  transition: color .2s ease;
}
.fx-footer__legal a:hover { color: #fff; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 1300px) {
  .fx-footer::before { left: 16px; }
  .fx-footer::after  { right: 16px; }
  .fx-footer__inner { padding: 64px 28px 56px; }
  .fx-footer__top { flex-direction: column; align-items: center; gap: 48px; }
  .fx-footer__brand { align-items: center; text-align: center; max-width: 420px; gap: 22px; }
  .fx-footer__tag { font-size: 22px; max-width: 24ch; white-space: normal; }
  .fx-footer__sub { font-size: 18px; }
  .fx-footer__form { width: 320px; margin: 4px auto 0; }

  .fx-footer__cols {
    width: 100%;
    max-width: 340px;
    flex-direction: column;
    gap: 40px;
    padding-top: 8px;
  }
  .fx-footer__col { align-items: flex-start; text-align: left; }
  .fx-footer__col h4 { margin-bottom: 14px; }

  .fx-footer__bar-inner {
    padding: 20px 28px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
  }
  .fx-footer__copy { font-size: 13px; }
  .fx-footer__legal { gap: 24px; }
}

@media (max-width: 420px) {
  .fx-footer__form { width: 100%; }
  .fx-footer__legal { gap: 18px; }
}

/* ==========================================================================
   Framer pages — align body content + desktop nav to the SAME side margins
   as the footer (content column and nav capped to 78vw = 11% side margins).
   Targets Framer-only data-framer-names, so it has no effect on the authored
   industry pages. Desktop only; Framer's native layout handles smaller widths.
   ========================================================================== */
@media (min-width: 1200px) {
  #main [data-framer-name="Content Container"],
  #main [data-framer-name="web"] [data-framer-name="Wrapper"] {
    max-width: 83vw !important;   /* 83vw = 8.5% side margins, aligned with the footer line */
  }
}

/* ==========================================================================
   ORCA page — "See what ORCA" CTA section frame: remove the inner box (the
   double line) and give the outer frame a top line so its left/right lines
   close at the top. Hashed classes are orca-only.
   ========================================================================== */
.framer-16b2fud::after { display: none !important; }          /* remove inner box line */
.framer-1wuxl4e::after { border-top-width: 1px !important; }  /* outer frame: add top line */

/* ==========================================================================
   MARS + ORCA — "The Platform Thesis" diagram (.stage exists only on these
   two pages): square the MARS/ORCA cards, drop the grey box, hide the dashed
   vertical rails, and hide the "The layer underneath" label.
   ========================================================================== */
.stage { background: transparent !important; }              /* remove grey background */
.stage .card { border-radius: 0 !important; }               /* MARS / ORCA cards: no corner radius */
.stage .rail { display: none !important; }                  /* remove the dashed vertical lines */
.stage .connect .mid { display: none !important; }          /* remove "The layer underneath" */

/* MARS + ORCA — extend the MARS/ORCA cards out to the frame lines (remove the
   white side gap): let the stage span the full content width and make the
   diagram's outer grid columns flexible so the cards fill to the edges. */
.stage { width: 100% !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
.stage .diagram { max-width: none !important; }
.stage .toprow, .stage .connect { grid-template-columns: 1fr 240px 1fr !important; }

/* MARS + ORCA — remove the "Outcomes over activity" stats section
   (unique per-page section hashes). */
.framer-lw89gf { display: none !important; }    /* mars: "Calls and messages are inputs…" */
.framer-1t1keta { display: none !important; }   /* orca: "ORCA scales the follow-up…" */

/* MARS + ORCA — "The Platform Thesis" section frame sits on a wrapper (not a
   Content Container), so the 8.5% rule above didn't reach it and its frame
   lines landed a hair off the page margin. Match it to 8.5% too. */
@media (min-width: 1200px) {
  .framer-y4i15i,    /* mars */
  .framer-5bdmkc {   /* orca */
    max-width: 83vw !important;
  }
}
