/* Integrations page shell: the column the content sits in, the header band and
   the "see all" strip. The two card sets are still separate — see the note on
   .int-cards-phone / .int-cards-wide below.

   The card-visibility switches below are written as `.page-div-4 .int-main
   .int-cards-*` on purpose. `.int-main .int-cards-*` would be (0,2,0), which *ties*
   the legacy `.page-div-4 .int-cards-*` rather than beating it, so the switch would
   depend on this sheet loading last and reordering two <link> tags would silently
   break it. The extra class makes it (0,3,0) and the load order stops mattering.

   Mobile-first: base rules are the phone layout, overrides ascend at 601px.
   The card sets, and only the card sets, also care about 1100px. */

.int-main {
  display: flex;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  height: min-content;
  padding: 0;
  position: relative;
  overflow: clip;
}

.int-header {
  display: flex;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 15px;
  width: 100%;
  height: min-content;
  padding: 10px;
  position: relative;
  overflow: clip;
}

/* Fixed heights with the text centred inside them, which is what the export does.
   It matters: at 390 and 600 the subtitle wraps to 40px of text in a 22px box and
   overflows 9px in each direction (measured). Without the centring it would hang
   low instead, which is 4519 visible px at 390 and nothing at all at 834 or 1440. */
.int-title,
.int-subtitle {
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.int-title {
  flex: none;
  width: 100%;
  height: 30px;
  position: relative;
  font-family: "Lato", sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 30px;
  color: #1d1c1d;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

.int-subtitle {
  flex: none;
  width: 100%;
  height: 22px;
  position: relative;
  font-family: "Lato", "Lato Placeholder", sans-serif;
  font-size: 15px;
  line-height: 22px;
  color: #1d1c1d;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

.int-more {
  display: flex;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  height: min-content;
  padding: 0 10px 10px;
  position: relative;
  overflow: clip;
}

.int-more-note {
  flex: none;
  width: auto;
  height: auto;
  position: relative;
  white-space: pre;
  font-family: "Lato", "Lato Placeholder", sans-serif;
  font-size: 16px;
  line-height: 19.2px;
  color: #1264a3;
}

/* TEMPORARY. The two card sets are still two DOM subtrees. They are hand-placed
   absolute layouts that share no coordinates, so merging them is its own pass;
   until then exactly one renders, as it did before. */
.page-div-4 .int-main .int-cards-wide {
  display: none;
}

@media (width >= 601px) {
  /* The export spaced the nav, the content and the footer with a 10px flex gap on
     the root. They are siblings of the root again, so the gap goes back there
     rather than being faked with margins on two of the three. */
  .page-div-4.page {
    gap: 10px;
  }
  .int-main {
    background: #fff;
    overflow: hidden;
  }
  .int-header {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    padding: 20px;
    z-index: 1;
  }
  .int-title {
    width: 100%;
  }
  .int-subtitle {
    z-index: 1;
    width: 100%;
    /* Phone pins this to 22px; from 601 up it grows, and it needs to -- at 601 the
       line wraps and a fixed height would overlap the cards. */
    height: auto;
  }
  .int-more {
    justify-content: flex-end;
    gap: 0;
    padding: 20px 20px 0;
  }
  .page-div-4 .int-main .int-cards-phone {
    display: none;
  }
  .page-div-4 .int-main .int-cards-wide {
    display: grid;
  }
}

@media (width >= 1100px) {
  .int-title {
    width: 392px;
  }
  .int-subtitle {
    width: auto;
    height: auto;
    white-space: pre;
  }
}
@media (width >= 601px) {
  .nav-bar {
    position: sticky;
    top: 0;
  }
}

@media (width >= 1100px) {
  .nav-bar {
    position: relative;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding: 16px;
  }
  .nav-row {
    display: contents;
  }
  .nav-brand {
    flex: 1 0 0;
    width: 1px;
    overflow: visible;
  }
  .nav-brand-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-green);
  }
  /* The wide bar shows Login as a button, not as a nav link. */
  .nav-toggle-slot,
  .nav-link-login,
  .nav-line {
    display: none;
  }
  .nav-menu {
    z-index: 1;
    flex: 1 0 0;
    width: 1px;
    height: min-content;
    gap: 20px;
  }
  .is-nav-closed .nav-menu > .nav-menu-list,
  .nav-menu-list {
    display: contents;
  }
  .nav-link {
    order: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 2em;
    letter-spacing: -0.2px;
    text-align: center;
    font-family: "Inter", "Inter Placeholder", sans-serif;
  }
  .nav-link-home {
    letter-spacing: -0.01em;
  }
  .nav-link-testimonials {
    letter-spacing: 0;
    line-height: 1.2em;
    text-align: start;
  }
  .nav-cta {
    display: flex;
    flex-flow: row;
    flex: 1 0 0;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    width: 1px;
    height: min-content;
    position: relative;
    overflow: visible;
  }
}