/* Integrations: pairing hero, logo tiles, integration cards, feature rows.
   Builds on site.css; tokens only, so dark mode follows automatically. */

/* hero: Kipwise tile + partner logo */
.int-hero h1{max-width:16ch}
.int-pair{display:inline-flex;align-items:center;gap:14px;margin-bottom:6px}
.int-pair .tile{width:72px;height:72px;flex:none}
.int-pair__plus{font:600 26px/1 var(--display);color:var(--ink-3)}
.int-pair__p{height:72px;min-width:72px;max-width:min(260px,48vw);padding:10px 14px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line);display:grid;place-items:center}
.int-pair__p img{display:block;max-height:52px;max-width:100%;width:auto;height:auto}
.int-pair__p--dark{background:#0f0f12}
.int-hero .cap{margin-top:14px}
.int-also{margin:14px auto 0;max-width:40em;font-size:15px;color:var(--ink-2)}
.int-also a{color:var(--link);text-decoration:underline;text-underline-offset:3px}

/* customer logos */
.int-trust{padding-top:clamp(64px,8vw,104px);text-align:center}
.int-trust__h{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:28px}
.int-trust__h h2{font:600 16px/1.4 var(--sans);letter-spacing:0;color:var(--ink-2)}

.int-dls{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.int-dl{display:flex;align-items:center;gap:16px;min-width:250px;padding:16px 26px 16px 18px;border-radius:18px;background:var(--card);box-shadow:0 0 0 1px var(--line);text-align:left;transition:box-shadow .2s}
.int-dl:hover{box-shadow:0 0 0 1px var(--line-2),0 18px 40px -24px rgba(15,15,18,.4)}
.int-dl img{display:block;width:52px;height:52px;object-fit:contain}
.int-dl small{display:block;font-size:14px;color:var(--ink-2)}
.int-dl b{display:block;font:700 26px/1.1 var(--display);letter-spacing:-.02em;color:var(--ink)}

/* cards */
.int-featured{padding-top:clamp(44px,5vw,64px)}
.int-head{max-width:760px;margin-bottom:36px}
.int-head .sub{margin-top:14px}
.int-card{padding-top:22px}
.int-card h3{margin-top:10px}
.int-card .tag{position:absolute;top:22px;right:22px}
.int-logo{width:60px;height:60px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line);display:grid;place-items:center;padding:11px;flex:none}
.int-logo img{display:block;max-width:100%;max-height:100%;width:auto;height:auto}

/* feature rows */
.int-rows .media video{display:block;width:100%;height:auto}
.int-art{background:var(--card-2)}
.int-art>.mk{height:100%;display:flex;flex-direction:column;justify-content:center}
.int-video{max-width:960px;margin-inline:auto}
.int-quote{margin:10px 0 0;padding:18px 20px;border-radius:18px;background:var(--card);box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column;gap:14px}
.int-quote blockquote{margin:0;font-size:15px;line-height:1.6;color:var(--ink)}
.int-quote figcaption{display:flex;align-items:center;gap:12px;font-size:14px}
.int-quote figcaption img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.int-quote figcaption b{display:block;font-weight:600}
.int-quote figcaption span span{color:var(--ink-3);font-size:13px}

/* agent pages: long-form setup notes */
.int-doc .prose{margin-inline:auto}

/* request an integration */
.int-suggest{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border-radius:28px;background:var(--card-2);padding:clamp(22px,3vw,34px) clamp(22px,3.6vw,44px)}
.int-suggest .sub{margin-top:8px;max-width:36em}

/* enterprise support */

@media(max-width:640px){
  .int-card{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:14px;row-gap:6px;padding:18px 18px 16px}
  .int-card>:not(.int-logo):not(.tag){grid-column:2}
  .int-card .int-logo{grid-row:1/span 3;align-self:start;width:48px;height:48px;padding:9px;border-radius:13px}
  .int-card h3{margin-top:0;padding-right:84px}
  .int-card .tag{top:16px;right:16px}
  .int-card .more{padding-top:2px}
  .int-pair .tile{width:56px;height:56px}
  .int-pair__p{height:56px;min-width:56px;padding:8px 10px;border-radius:14px}
  .int-pair__p img{max-height:40px}
}