/* Site footer. One component, one stylesheet.

   The base is the wide form, because that is the shared one: index.html uses it at
   every width, and integrations uses it from 601px up. Integrations alone has a
   narrow phone footer — a fixed 402px block with smaller type — and that is the
   `.site-footer-compact` variant, the way `btn-accent` is a variant of `btn`.

   The variant is the one place this project uses a descending media query. It
   exists *only* below 601px, so `@media (width < 601px)` states that directly;
   writing it mobile-first would mean declaring every value twice and undoing it. */

.site-footer {
  display: flex;
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  gap: 32px;
  width: 100%;
  height: min-content;
  padding: 32px;
  position: relative;
  overflow: visible;
  background: #fafaf7;
  cursor: pointer;
}

.footer-intro {
  z-index: 1;
  display: flex;
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  height: min-content;
  padding: 0;
  position: relative;
}

.footer-intro-inner {
  z-index: 1;
  display: flex;
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  gap: 40px;
  width: 100%;
  height: min-content;
  padding: 0;
  position: relative;
}

.footer-pitch {
  display: flex;
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  width: 71%;
  height: min-content;
  padding: 0;
  position: relative;
}

.footer-title {
  flex: none;
  width: 95%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 44px;
  text-align: center;
  color: #183848;
}

.footer-subtitle {
  flex: none;
  width: 105%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  color: rgb(69 95 108 / 0.8);
}

.footer-actions {
  display: flex;
  flex-flow: row;
  flex: none;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
  width: min-content;
  height: min-content;
  padding: 0;
  position: relative;
}

.footer-actions-inner {
  display: flex;
  flex-flow: row;
  flex: none;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  width: min-content;
  height: min-content;
  padding: 0;
  position: relative;
  min-width: 181px;
  min-height: 50px;
}

.footer-cta {
  z-index: 1;
  display: flex;
  flex-flow: row;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: min-content;
  height: min-content;
  padding: 10px 20px;
  position: absolute;
  text-decoration: none;
  background: #fff;
  border-radius: 15px;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

/* Overlay rather than a real border: `border` would eat into the padding box. */
.footer-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #10b981;
  border-radius: inherit;
  pointer-events: none;
}

.footer-cta-label {
  flex: none;
  width: auto;
  white-space: pre;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 30px;
  text-align: center;
  color: #10b981;
}

.footer-links-row {
  z-index: 1;
  display: flex;
  flex-flow: row;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  gap: 64px;
  width: 100%;
  height: min-content;
  padding: 17px;
  position: relative;
}

/* Overlay, not a real border: the export drew these as a pseudo-element so the
   2px never entered the box model. A real border would move the row. */
.footer-links-row::after {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  pointer-events: none;
}

.footer-logo {
  z-index: 1;
  display: flex;
  flex-flow: row;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: 20%;
  height: min-content;
  padding: 0 0 8px 40px;
  position: relative;
}

.footer-logo-mark {
  display: block;
  z-index: 1;
  flex: none;
  width: 32px;
  height: 24px;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}

.footer-logo-name {
  z-index: 1;
  flex: none;
  width: auto;
  white-space: pre;
  font-family: "Exo 2", "Exo 2 Placeholder", sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 20px;
  text-align: left;
  color: #10b981;
}

.footer-links {
  z-index: 1;
  display: flex;
  flex-flow: wrap;
  flex: 1 0 0;
  justify-content: flex-start;
  align-items: center;
  gap: 32px;
  width: 1px;
  height: min-content;
  padding: 0;
  position: relative;
}

/* The export's phone footer is a fixed 402px block with three short links, and the
   five-link set includes "Professional Service Agreement", which is wider than the
   track that leaves. Let a label wrap there rather than be sliced off at the clip
   edge; `max-width` is what makes the item shrink so the wrap can happen at all.
   From 601 up the track is wide enough and the labels stay on one line. */
.footer-link {
  display: flex;
  flex-flow: row;
  /* Shrinkable and auto-width on phone so a label too wide for the track wraps
     inside the item instead of overflowing it; pinned back to the export's
     min-content sizing from 601 up, where everything fits on one line. */
  flex: none;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: min-content;
  height: min-content;
  padding: 0;
  position: relative;
  cursor: pointer;
  text-decoration: none;
}

.footer-link-label {
  flex: none;
  width: auto;
  white-space: pre;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #667084;
}

.footer-bottom {
  display: flex;
  flex-flow: row;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  height: min-content;
  padding: 0;
  position: relative;
}

.footer-note {
  z-index: 1;
  flex: none;
  width: 98%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #98a1b2;
}

.footer-social {
  z-index: 1;
  flex: none;
  width: 24px;
  height: 24px;
  position: relative;
  text-decoration: none;
  fill: #000;
  color: #000;
  image-rendering: pixelated;
}

.footer-social svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Integrations' phone footer: a fixed 402px block with smaller type. No other page
   has it, and it exists only below 601px. */
@media (width < 601px) {
  .site-footer-compact {
    justify-content: center;
    gap: 10px;
    padding: 0;
    overflow: clip;
    cursor: auto;
  }
  .site-footer-compact .footer-intro {
    width: 402px;
  }
  .site-footer-compact .footer-intro-inner {
    width: min-content;
  }
  .site-footer-compact .footer-pitch {
    width: 402px;
  }
  .site-footer-compact .footer-title {
    width: 100%;
    font-size: 24px;
  }
  .site-footer-compact .footer-subtitle {
    width: 100%;
    font-size: 18px;
  }
  .site-footer-compact .footer-actions-inner {
    min-width: auto;
    min-height: auto;
  }
  .site-footer-compact .footer-cta {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
  }
  .site-footer-compact .footer-links-row {
    width: 402px;
  }
  .site-footer-compact .footer-logo {
    width: min-content;
  }
  .site-footer-compact .footer-links {
    gap: 13px;
  }
  /* The five-link set includes a label wider than this track; let it wrap rather
     than be sliced off at the clip edge. Both the item and the label have to be
     allowed to shrink for the wrap to happen at all. */
  .site-footer-compact .footer-link {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
  }
  .site-footer-compact .footer-link-label {
    flex: 0 1 auto;
    min-width: 0;
    white-space: normal;
  }
  .site-footer-compact .footer-bottom {
    width: 402px;
  }
  .site-footer-compact .footer-note {
    width: 93%;
  }
}

/* The home page lays its sections out with `order:` per breakpoint (45 declarations
   in home.css). The footer is last in all three bands -- 14 at phone, 31 at tablet,
   and DOM order at desktop where everything is 0 -- so one value above every band's
   maximum keeps it last everywhere. */
.page-div .site-footer {
  order: 99;
}