/* Integrations (template-integrations.php): a copy of the live /integration/ page.

   Values here are measured off the live page, not matched by eye:
     headline   #09529d  72px/72px 700, left
     sub        #09529d  18px/24px 700, left
     section h2 #000     40px/56px 400, centred
     body copy  #1061ad  18px/25.2px 400, centred, 700px measure
     zapier     #fff     32px/44.8px centred
     bands      #d7eaf0 sky, #1061ad blue, #fff, #f5f8f9 pale
     button     linear-gradient(to right, #ee9c62, #f7a233), white, 18px/500

   The page does NOT use .om-page or the OM section furniture. Those are this site's own design
   language, and putting the live page's content through them produced a redesign rather than a
   copy -- which is what the previous version of this file did.

   This file is page-local and loads after design-om.css and design-om-extras.css. */

.int-page {
    margin-top: 80px;             /* the fixed header, as .om-page does it */
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    color: #1061ad;
}
.int-wrap {
    width: 1140px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
}

/* --- Hero: clouds, left-aligned, blue ------------------------------------------------------- */
.int-banner {
    padding: 96px 0 120px;
    background: url('../img/integrations/banner-integra02.png') no-repeat 100% 50%;
    background-size: auto 100%;
}
.int-banner h1 {
    max-width: 520px;
    margin: 0 0 18px;
    color: #09529d;
    font-size: 72px;
    line-height: 72px;
    font-weight: 700;
    text-align: left;
}
.int-banner__sub {
    max-width: 340px;
    margin: 0 0 30px;
    color: #09529d;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
}
/* The live page's hero pill: an orange gradient, white label, 500 weight. */
/* The hero CTA is .om-btn, the site's button -- flat orange, navy label, 3px corners, and the
   brightness-and-lift hover every other button has. It was a rounded pill on an orange gradient,
   copied from the live page along with the rest of this template; Yuri, 2026-09-21: "adjust to
   standard button styling."

   Only the size is set here. .om-btn is 13px/25px at the body size, and this one stands alone
   under a banner headline, where the live page's 18px is the right weight. */
.int-banner .om-btn { padding: 13px 32px; font-size: 18px; }

/* --- Bands ----------------------------------------------------------------------------------- */
.int-band { padding: 62px 0 68px; background: #fff; }
.int-band--sky { background: #d7eaf0; }
.int-band--pale { background: #f5f8f9; }
.int-band--blue { background: #1061ad; }
.int-head {
    margin: 0 0 26px;
    color: #000;
    font-size: 40px;
    line-height: 56px;
    font-weight: 400;
    text-align: center;
}
.int-copy {
    max-width: 700px;
    margin: 0 auto;
    color: #1061ad;
    font-size: 18px;
    line-height: 25.2px;
    text-align: center;
}
.int-copy--sub { margin-bottom: 30px; }

/* --- LOS illustration, with its five logos as links ------------------------------------------
   Percentage hit areas rather than the live page's fixed pixels, so they stay on the logos at
   any width. Desktop and mobile are different pictures, hence two copies with their own boxes. */
.int-los { position: relative; margin: 0 auto; }
.int-los img { display: block; width: 100%; height: auto; }
.int-los__hit {
    position: absolute;
    display: block;
    border-radius: 6px;
    transition: background-color .15s ease, box-shadow .15s ease;
}
.int-los__hit:hover,
.int-los__hit:focus-visible {
    background: rgba(9, 82, 157, .10);
    box-shadow: 0 0 0 2px rgba(9, 82, 157, .35);
    outline: none;
}
.int-los--desk { max-width: 1000px; }
.int-los--mob { display: none; max-width: 320px; }
@media (max-width: 767px) {
    .int-los--desk { display: none; }
    .int-los--mob { display: block; }
}

/* --- Zapier ---------------------------------------------------------------------------------- */
.int-band--blue .int-wrap { text-align: center; }
.int-zapier__mark { display: inline-block; height: 54px; width: auto; margin: 0 0 16px; }
.int-zapier__quote {
    max-width: 760px;
    margin: 0 auto;
    color: #fff;
    font-size: 32px;
    line-height: 44.8px;
    text-align: center;
}

/* --- Icon rows -------------------------------------------------------------------------------- */
.int-marks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 38px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}
.int-marks img { display: block; max-height: 44px; width: auto; }
.int-marks--social img { max-height: 56px; }
.int-marks a { display: block; transition: transform .15s ease; }
.int-marks a:hover { transform: translateY(-2px); }

/* --- Vendor bands: centred logo over centred copy --------------------------------------------- */
.int-vendor .int-wrap { text-align: center; }
.int-vendor__logo {
    display: inline-block;
    width: auto;
    max-width: 260px;
    height: auto;
    margin: 0 0 22px;
}

/* --- Lead sources ------------------------------------------------------------------------------
   A grid, not the live page's carousel: 27 logos behind dots and arrows are 24 nobody sees.
   Fixed-height slots because these files run from 200x38 to 200x90 and would otherwise step the
   rows up and down. */
.int-leads {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}
.int-leads li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    padding: 12px 18px;
    background: #fff;
}
.int-leads img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
/* The last tile carries words, not a logo. Same white tile and same height as the rest so the
   grid stays even; the dashed edge and the lighter weight keep it from reading as a 27th brand. */
.int-leads__more {
    border: 1px dashed rgba(3, 45, 96, .28);
    background: #fff;
    color: #032d60;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

/* The closing band is this site's .om-cta, not the live page's orange section -- see the
   template. design-om-extras releases its fixed height for .int-page; the underline is this
   page's own problem, since design-om kills link underlines through `.om-page a` and this page
   is not inside one. */
.int-page .om-btn { text-decoration: none; }

@media (max-width: 900px) {
    .int-banner { padding: 64px 0 72px; background-size: cover; }
    .int-banner h1 { font-size: 48px; line-height: 52px; }
    .int-head { font-size: 30px; line-height: 40px; }
    .int-zapier__quote { font-size: 24px; line-height: 34px; }
}
@media (max-width: 600px) {
    .int-band { padding: 44px 0 48px; }
    .int-banner h1 { font-size: 36px; line-height: 42px; }
    .int-marks { gap: 24px; }
    .int-leads { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .int-leads li { height: 78px; }
}