/* The Integrations page (marketing/integrations). Builds on app.css: bands, hero chips, status pills, tones. */

.int-counts{margin:14px 0 0;color:var(--muted);font-size:15px;font-weight:600}

/* Services' marks (public/img/integrations): the brand's mark in its color (inline style) on a white tile. */
.int-logos{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.int-logo{display:grid;flex:none;place-items:center;width:40px;height:40px;border-radius:11px;background:#FFFFFF;border:1px solid var(--line);box-shadow:0 1px 2px rgba(26,26,23,.05)}
.int-logo svg{display:block;width:22px;height:22px}
.int-logo-lg{width:52px;height:52px;border-radius:14px}
.int-logo-lg svg{width:28px;height:28px}
/* The hero's row: what works now. */
.int-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:760px;margin:28px auto 0;padding:0;list-style:none}
.int-marks{margin:40px 0 0;color:var(--subtle);font-size:13px;line-height:1.5}

/* Each integration: a card with its icon and whether it works now, what it does, where to set it up. */
.int-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.int-card{display:flex;flex-direction:column;gap:8px;padding:22px;background:var(--paper);border:1px solid var(--line);border-radius:18px}
.band:not(.band-alt) .int-card{background:var(--surface)}
.int-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.int-card h3{font-size:17px}
.int-card p{margin:0;font-size:15px}
.int-card .int-where{margin-top:4px;color:var(--ink);font-size:14px;font-weight:500}
/* What's coming reads as such: quieter, without a way to set it up. */
.int-card.is-soon{border-style:dashed}
.int-card.is-soon .mega-icon{filter:saturate(.35)}
.int-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:auto;padding-top:10px}
.int-tag{display:inline-flex;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-hover);font-size:12px;font-weight:700}
.int-link{font-size:15px;font-weight:600}

/* Sending enquiries to Zapier or Make, step by step, under the enquiry apps. */
.int-steps{margin-top:40px;scroll-margin-top:24px}
.int-steps > h3{margin:0 0 16px;font:400 clamp(24px,3vw,30px)/1.15 var(--display);letter-spacing:-.01em}

/* Moving a site: one wide card with its button. */
.int-moving{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:22px}
.int-moving h2{margin-top:14px}
.int-moving p{max-width:680px;margin:12px 0 0}
.int-moving .btn{flex:none}
.int-moving .int-logos{margin-top:18px}

/* Asking for an app, under the questions' heading. */
.int-ask{margin-top:28px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:18px}
.int-ask p{margin:6px 0 14px;font-size:15px}

@media (max-width:980px){.int-grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.int-moving{flex-direction:column;align-items:flex-start;padding:24px}}
@media (max-width:560px){.int-grid{grid-template-columns:1fr}}