/* ISPbills integrations directory — page-specific experience. */
.d360-page-integrations main { overflow: clip; }
.d360-page-integrations .site-header { border-bottom-color: rgba(255,255,255,.08); }
.d360-page-integrations .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.integrations-label {
	display: block; margin-bottom: 15px; color: #7647e8;
	font-size: 10px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase;
}

/* Hero */
.integrations-hero {
	position: relative; isolation: isolate; overflow: hidden; padding: clamp(82px,8vw,116px) 0 0;
	color: #fff; background:
		radial-gradient(circle at 82% 18%,rgba(71,186,255,.13),transparent 28%),
		radial-gradient(circle at 15% 5%,rgba(148,76,255,.24),transparent 30%),
		linear-gradient(135deg,#090b18 0%,#101229 48%,#071b29 100%);
}
.integrations-hero::before {
	content: ''; position: absolute; z-index: -2; inset: 0; pointer-events: none; opacity: .21;
	background-image: linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px);
	background-size: 46px 46px; mask-image: linear-gradient(110deg,#000,transparent 68%);
}
.integrations-hero::after {
	content: ''; position: absolute; z-index: -1; right: -6%; bottom: 6%; width: 56%; height: 72%; pointer-events: none;
	background: radial-gradient(ellipse,rgba(34,211,238,.1),transparent 67%); filter: blur(20px);
}
.integrations-hero__glow { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(3px); }
.integrations-hero__glow--one { top: -310px; left: -190px; width: 660px; height: 660px; background: radial-gradient(circle,rgba(132,63,246,.28),transparent 69%); }
.integrations-hero__glow--two { right: -260px; bottom: -390px; width: 780px; height: 780px; background: radial-gradient(circle,rgba(14,165,233,.18),transparent 69%); }
.integrations-hero__grid {
	position: relative; display: grid; grid-template-columns: minmax(0,.86fr) minmax(550px,1.14fr);
	align-items: center; gap: clamp(54px,7vw,100px); padding-bottom: clamp(74px,8vw,105px);
}
.integrations-kicker {
	display: flex; margin: 0 0 21px; align-items: center; gap: 11px;
	color: #c2b5ff; font-size: 10px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase;
}
.integrations-kicker > span { width: 8px; height: 8px; border-radius: 50%; background: #8b5cf6; box-shadow: 0 0 0 6px rgba(139,92,246,.13),0 0 24px rgba(139,92,246,.8); }
.integrations-hero h1 {
	max-width: 670px; margin: 0; color: #fff; font: 790 clamp(48px,5.4vw,74px)/1.01 'Manrope','Inter',sans-serif;
	letter-spacing: -.06em;
}
.integrations-hero h1 em {
	color: transparent; font-style: normal; background: linear-gradient(92deg,#bca5ff 0%,#d787ff 40%,#63d8ff 96%);
	-webkit-background-clip: text; background-clip: text;
}
.integrations-hero__lead { max-width: 610px; margin: 25px 0 0; color: #abb5c8; font-size: clamp(16px,1.45vw,18px); line-height: 1.72; text-wrap: pretty; }
.integrations-hero__actions { display: flex; margin-top: 33px; align-items: center; gap: 27px; }
.integrations-hero .btn-primary {
	border: 1px solid rgba(255,255,255,.08); background: linear-gradient(105deg,#7447ef,#9b51f4 55%,#b34fd9);
	box-shadow: 0 18px 38px -16px rgba(131,72,239,.9);
}
.integrations-hero .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 23px 44px -15px rgba(131,72,239,.95); }
.integrations-text-link { display: inline-flex; align-items: center; gap: 8px; color: #d7deea; font-size: 12px; font-weight: 780; }
.integrations-text-link span { color: #a992ef; transition: transform .18s ease; }
.integrations-text-link:hover { color: #fff; }.integrations-text-link:hover span { transform: translateX(4px); }
.integrations-hero__checks { display: flex; flex-wrap: wrap; gap: 11px 21px; margin: 27px 0 0; padding: 0; color: #8995aa; font-size: 10.5px; font-weight: 650; list-style: none; }
.integrations-hero__checks li::before { content: '✓'; margin-right: 7px; color: #69e1c0; font-weight: 900; }

/* Integration map */
.integration-map {
	position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 23px;
	background: linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
	box-shadow: 0 40px 90px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(18px);
}
.integration-map__topbar,.integration-map__status { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.integration-map__topbar { min-height: 53px; padding: 0 19px; border-bottom: 1px solid rgba(255,255,255,.09); color: #adb7c9; font-size: 9px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.integration-map__topbar > span,.integration-map__status > span { display: flex; align-items: center; gap: 8px; }
.integration-map__topbar i { width: 7px; height: 7px; border-radius: 50%; background: #8b5cf6; box-shadow: 0 0 12px rgba(139,92,246,.9); }
.integration-map__topbar strong { padding: 6px 9px; border: 1px solid rgba(104,225,192,.2); border-radius: 999px; color: #79dfc1; background: rgba(32,191,142,.08); font-size: 8px; }
.integration-map__canvas { position: relative; height: 420px; overflow: hidden; }
.integration-map__canvas::before {
	content: ''; position: absolute; inset: 0; opacity: .45; pointer-events: none;
	background-image: radial-gradient(rgba(255,255,255,.22) .7px,transparent .7px); background-size: 18px 18px;
	mask-image: radial-gradient(circle at center,#000,transparent 72%);
}
.integration-map__paths { position: absolute; inset: 0; width: 100%; height: 100%; }
.integration-map__paths path { fill: none; stroke: rgba(151,137,255,.38); stroke-width: 1.25; stroke-dasharray: 5 6; animation: integration-path 18s linear infinite; }
.integration-map__paths circle { fill: #73d7f8; filter: drop-shadow(0 0 5px rgba(115,215,248,.9)); }
@keyframes integration-path { to { stroke-dashoffset: -130; } }
.integration-map__core {
	position: absolute; z-index: 3; top: 50%; left: 50%; display: flex; width: 166px; height: 118px;
	align-items: center; justify-content: center; flex-direction: column; border: 1px solid rgba(190,169,255,.48); border-radius: 21px;
	background: linear-gradient(145deg,rgba(116,71,239,.9),rgba(83,59,168,.82));
	box-shadow: 0 20px 50px rgba(26,15,66,.52),0 0 55px rgba(124,85,235,.2); transform: translate(-50%,-50%);
}
.integration-map__core .brand-mark { margin-bottom: 9px; transform: scale(.78); transform-origin: center; }
.integration-map__core > strong { color: #fff; font: 750 17px/1 'Manrope','Inter',sans-serif; letter-spacing: -.04em; }
.integration-map__core > strong span { color: #cfb9ff; }
.integration-map__core > small { margin-top: 7px; color: #d4c8ee; font-size: 7.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.integration-map__node {
	position: absolute; z-index: 2; display: grid; width: 124px; height: 62px; padding: 12px 15px; place-items: center;
	border: 1px solid rgba(255,255,255,.13); border-radius: 15px; background: rgba(255,255,255,.96);
	box-shadow: 0 16px 35px rgba(0,0,0,.22); transition: transform .2s ease,border-color .2s ease;
}
.integration-map__node:hover { z-index: 4; border-color: rgba(190,169,255,.7); transform: translateY(-3px); }
.integration-map__node img { display: block; width: 100%; height: 100%; object-fit: contain; }
.integration-map__node--one { top: 54px; left: 21px; }.integration-map__node--two { top: 23px; left: 50%; transform: translateX(-50%); }
.integration-map__node--three { top: 54px; right: 21px; }.integration-map__node--four { bottom: 52px; left: 21px; }
.integration-map__node--five { bottom: 21px; left: 50%; transform: translateX(-50%); }.integration-map__node--six { right: 21px; bottom: 52px; }
.integration-map__node--two:hover,.integration-map__node--five:hover { transform: translate(-50%,-3px); }
.integration-map__status { min-height: 49px; padding: 0 19px; border-top: 1px solid rgba(255,255,255,.09); color: #8f9bb0; font-size: 8.5px; }
.integration-map__status > span { color: #bdc7d8; font-weight: 700; }.integration-map__status i { width: 6px; height: 6px; border-radius: 50%; background: #46d7a2; box-shadow: 0 0 10px rgba(70,215,162,.8); }
.integration-map__status small { color: #78869c; font-size: 8px; }

.integrations-hero__metrics { position: relative; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(255,255,255,.1); }
.integrations-hero__metrics > div { display: flex; min-height: 112px; padding: 26px clamp(16px,3vw,35px); align-items: center; gap: 13px; }
.integrations-hero__metrics > div + div { border-left: 1px solid rgba(255,255,255,.09); }
.integrations-hero__metrics strong { color: #fff; font: 760 clamp(24px,2.5vw,34px)/1 'Manrope','Inter',sans-serif; letter-spacing: -.045em; }
.integrations-hero__metrics span { color: #8995a9; font-size: 9px; font-weight: 700; line-height: 1.45; text-transform: uppercase; letter-spacing: .05em; }

/* Category index */
.integration-directory-shell { position: relative; }
.integration-category-strip { position: sticky; z-index: 18; top: 70px; border-bottom: 1px solid #dfe4ec; background: rgba(255,255,255,.92); box-shadow: 0 13px 34px -29px rgba(15,23,42,.5); backdrop-filter: blur(18px) saturate(150%); }
.integration-category-strip .container { display: grid; grid-template-columns: repeat(5,1fr); }
.integration-category-strip a { display: grid; min-width: 0; min-height: 76px; padding: 14px 16px; grid-template-columns: 35px minmax(0,1fr) auto; align-items: center; gap: 10px; color: #536075; border-left: 1px solid #e8ebf0; }
.integration-category-strip a:last-child { border-right: 1px solid #e8ebf0; }
.integration-category-strip a:hover { color: #6332d2; background: #faf8ff; }
.integration-category-strip__icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #7040da; background: #f0eaff; }
.integration-category-strip__icon .fx-grid__icon { width: 17px; height: 17px; color: inherit; opacity: 1; }
.integration-category-strip a > span:nth-child(2) { min-width: 0; }
.integration-category-strip small,.integration-category-strip strong { display: block; }
.integration-category-strip small { margin-bottom: 3px; color: #a0a8b5; font-size: 7px; letter-spacing: .1em; }
.integration-category-strip strong { overflow: hidden; color: inherit; font-size: 9.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.integration-category-strip b { display: grid; min-width: 25px; height: 25px; padding: 0 5px; place-items: center; border-radius: 8px; color: #7c8799; background: #f2f4f7; font-size: 8px; }

/* Directory */
.integration-directory { padding: clamp(82px,8vw,112px) 0 clamp(95px,9vw,130px); background: #f5f7fb; }
.integration-directory__head { display: grid; grid-template-columns: minmax(0,1fr) minmax(330px,.65fr); align-items: end; gap: clamp(45px,7vw,95px); margin-bottom: 43px; }
.integration-directory__head h2 { max-width: 720px; margin: 0; color: #121a2a; font: 770 clamp(38px,4.5vw,56px)/1.06 'Manrope','Inter',sans-serif; letter-spacing: -.052em; text-wrap: balance; }
.integration-directory__head > p { max-width: 530px; margin: 0 0 4px; color: #687386; font-size: 14px; line-height: 1.72; }
.integration-toolbar {
	position: relative; z-index: 5; margin: 0 0 73px; padding: 13px;
	border: 1px solid #dbe1ea; border-radius: 19px; background: rgba(255,255,255,.95);
	box-shadow: 0 22px 58px -34px rgba(25,35,57,.42); backdrop-filter: blur(14px);
}
.integration-toolbar__top { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: stretch; gap: 11px; }
.integration-search { display: flex; min-height: 59px; padding: 0 18px; align-items: center; gap: 12px; border: 1px solid #d3dae5; border-radius: 12px; background: #f8fafc; transition: border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.integration-search:focus-within { border-color: #8b63e9; background: #fff; box-shadow: 0 0 0 4px rgba(123,79,224,.1); }
.integration-search .fx-grid__icon { width: 20px; height: 20px; flex: 0 0 auto; color: #7b8799; opacity: 1; }
.integration-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: #162033; background: transparent; font: 560 13px/1.4 'Inter',sans-serif; }
.integration-search input::placeholder { color: #8c96a6; }
.integration-results { display: flex; min-width: 146px; margin: 0; padding: 0 18px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #e1e5ec; border-radius: 12px; color: #8a94a4; background: #fff; }
.integration-results strong { color: #6636d7; font: 780 21px/1 'Manrope','Inter',sans-serif; }.integration-results span { margin-top: 4px; font-size: 7.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.integration-filters { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }
.integration-filter { display: inline-flex; min-height: 38px; padding: 8px 12px; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 10px; color: #687487; background: transparent; font: 720 10.5px/1 'Inter',sans-serif; cursor: pointer; transition: color .16s ease,background .16s ease,border-color .16s ease; }
.integration-filter span { display: grid; min-width: 21px; height: 21px; padding: 0 5px; place-items: center; border-radius: 7px; color: #828c9c; background: #edf0f4; font-size: 8px; }
.integration-filter:hover { color: #5f32ca; border-color: #ded5f5; background: #f8f5ff; }
.integration-filter.active { color: #fff; border-color: #6f3fd9; background: linear-gradient(105deg,#6c3ed5,#8150e5); box-shadow: 0 10px 22px -14px rgba(99,55,207,.8); }
.integration-filter.active span { color: #fff; background: rgba(255,255,255,.17); }

.integration-section { --integration-accent:#7245dc; --integration-soft:#f0eaff; scroll-margin-top: 175px; margin-bottom: 94px; }
.integration-section:last-child { margin-bottom: 0; }
.integration-section[data-integration-section="sms"] { --integration-accent:#0a8fb3; --integration-soft:#e3f9ff; }
.integration-section[data-integration-section="equipment"] { --integration-accent:#d06a24; --integration-soft:#fff0e3; }
.integration-section[data-integration-section="communication"] { --integration-accent:#cf3a84; --integration-soft:#ffebf5; }
.integration-section[data-integration-section="protocols"] { --integration-accent:#11865e; --integration-soft:#e6f9f1; }
.integration-section__head { display: grid; max-width: none; margin-bottom: 27px; padding-bottom: 23px; grid-template-columns: 52px minmax(0,780px) auto; align-items: start; gap: 16px; border-bottom: 1px solid #dce2ea; }
.integration-section__icon { display: grid; width: 48px; height: 48px; padding: 0; place-items: center; border-radius: 14px; color: var(--integration-accent); background: var(--integration-soft); }
.integration-section__icon .fx-grid__icon { width: 22px; height: 22px; color: inherit; opacity: 1; }
.integration-section__head small { display: block; margin: 0 0 5px; color: var(--integration-accent); font-size: 8px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.integration-section__head h2 { margin: 0 0 7px; color: #182234; font: 760 clamp(26px,3vw,34px)/1.15 'Manrope','Inter',sans-serif; letter-spacing: -.04em; }
.integration-section__head p { max-width: 760px; margin: 0; color: #6c7789; font-size: 13px; line-height: 1.65; }
.integration-section__head > strong { align-self: center; padding: 10px 13px; border: 1px solid #dfe4eb; border-radius: 11px; color: #263247; background: rgba(255,255,255,.7); font: 780 15px/1 'Manrope','Inter',sans-serif; white-space: nowrap; }
.integration-section__head > strong span { color: #8a94a4; font: 700 8px/1 'Inter',sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.integration-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.integration-card {
	position: relative; display: flex; min-width: 0; min-height: 274px; padding: 18px; flex-direction: column; overflow: hidden;
	border: 1px solid #dfe4eb; border-radius: 16px; background: #fff; box-shadow: 0 10px 28px -24px rgba(15,23,42,.35);
	transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.integration-card::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 3px; opacity: 0; background: var(--integration-accent); transition: opacity .2s ease; }
.integration-card:hover { border-color: color-mix(in srgb,var(--integration-accent) 40%,#dfe4eb); box-shadow: 0 23px 48px -30px rgba(24,33,55,.45); transform: translateY(-4px); }
.integration-card:hover::before { opacity: 1; }
.integration-card__top { display: flex; margin: 0 0 19px; align-items: flex-start; justify-content: space-between; gap: 10px; }
.integration-card__mark { display: grid; width: 46px; height: 46px; padding: 0; flex: 0 0 auto; place-items: center; border: 0; border-radius: 12px; color: var(--integration-accent); background: var(--integration-soft); box-shadow: none; font: 850 10px/1 'Manrope','Inter',sans-serif; }
.integration-card__mark--logo { width: 70px; padding: 8px 9px; border: 1px solid #e5e8ee; background: #fff; box-shadow: 0 8px 18px -15px rgba(15,23,42,.45); }
.integration-card__mark--logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.integration-card__status { display: flex; padding: 5px 7px; align-items: center; gap: 5px; border-radius: 999px; color: #628276; background: #f1f8f5; font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.integration-card__status i { width: 5px; height: 5px; border-radius: 50%; background: #2db985; box-shadow: 0 0 0 3px rgba(45,185,133,.09); }
.integration-card__category { display: block; margin-bottom: 6px; color: var(--integration-accent); font-size: 7.5px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.integration-card h3 { margin: 0 0 9px; color: #1b2537; font: 760 16px/1.25 'Manrope','Inter',sans-serif; letter-spacing: -.025em; }
.integration-card > p { flex: 1; margin: 0 0 17px; color: #6b7688; font-size: 11.5px; line-height: 1.62; }
.integration-tags { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 13px; border-top: 1px solid #edf0f4; }
.integration-tags span { padding: 5px 7px; border: 0; border-radius: 7px; color: #768193; background: #f3f5f8; font-size: 7.5px; font-weight: 750; }
.integration-empty { padding: 80px 25px; border: 1px dashed #cbd3df; border-radius: 19px; background: #fff; text-align: center; }
.integration-empty > .fx-grid__icon { width: 40px; height: 40px; margin: 0 auto 17px; color: #8a94a5; opacity: 1; }
.integration-empty h2 { margin: 0 0 8px; color: #202a3d; font-size: 26px; }.integration-empty p { margin: 0; color: #7b8596; font-size: 13px; }
.integration-empty a { display: inline-flex; margin-top: 18px; color: #6636d7; font-size: 11px; font-weight: 800; }

/* API/custom connection section */
.integration-build { position: relative; overflow: hidden; padding: clamp(88px,9vw,125px) 0; color: #fff; background: radial-gradient(circle at 82% 10%,rgba(14,165,233,.15),transparent 30%),radial-gradient(circle at 10% 90%,rgba(139,92,246,.2),transparent 32%),#0b1020; }
.integration-build::before { content: ''; position: absolute; inset: 0; opacity: .13; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.45) .7px,transparent .7px); background-size: 21px 21px; mask-image: linear-gradient(90deg,#000,transparent 52%); }
.integration-build__grid { position: relative; display: grid; grid-template-columns: minmax(0,.9fr) minmax(520px,1.1fr); align-items: center; gap: clamp(65px,8vw,110px); }
.integration-build .integrations-label { color: #b5a4f4; }
.integration-build h2 { max-width: 660px; margin: 0; color: #fff; font: 770 clamp(38px,4.6vw,57px)/1.07 'Manrope','Inter',sans-serif; letter-spacing: -.052em; text-wrap: balance; }
.integration-build__copy > p:not(.integrations-label) { max-width: 620px; margin: 22px 0 0; color: #a8b2c4; font-size: 14.5px; line-height: 1.75; }
.integration-build__pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 25px; }
.integration-build__pills a { padding: 7px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #bbc4d3; background: rgba(255,255,255,.05); font-size: 8px; font-weight: 750; transition: border-color .2s ease,color .2s ease,background .2s ease; }
.integration-build__pills a:hover { border-color: rgba(255,255,255,.25); color: #fff; background: rgba(255,255,255,.09); }
.integration-build__actions { display: flex; margin-top: 30px; align-items: center; gap: 25px; }
.integration-build__link { color: #c8d0dd; font-size: 11px; font-weight: 780; }.integration-build__link:hover { color: #fff; }
.integration-code { overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: #101727; box-shadow: 0 35px 80px rgba(0,0,0,.35); transform: perspective(1200px) rotateY(-1.5deg); }
.integration-code__bar { display: grid; min-height: 44px; padding: 0 15px; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); background: #151d2e; }
.integration-code__bar > span { display: flex; gap: 5px; }.integration-code__bar i { width: 7px; height: 7px; border-radius: 50%; background: #fb7185; }.integration-code__bar i:nth-child(2) { background: #fbbf24; }.integration-code__bar i:nth-child(3) { background: #34d399; }
.integration-code__bar small { color: #8f9aaf; font: 600 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }.integration-code__bar b { justify-self: end; padding: 5px 7px; border-radius: 7px; color: #6ee7b7; background: rgba(52,211,153,.08); font-size: 7px; }
.integration-code__body { padding: 24px; }.integration-code__body > div { display: flex; align-items: center; gap: 10px; padding-bottom: 17px; border-bottom: 1px solid rgba(255,255,255,.08); }
.integration-code__body > div span { padding: 5px 7px; border-radius: 6px; color: #d8c9ff; background: rgba(139,92,246,.16); font: 750 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.integration-code__body > div code { color: #d1d8e4; font: 550 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; }
.integration-code pre { margin: 0; padding: 22px 0 19px; overflow: auto; color: #c2cad7; font: 500 11px/1.85 ui-monospace,SFMono-Regular,Menlo,monospace; tab-size: 2; }
.integration-code pre em { color: #a6b2c5; font-style: normal; }.integration-code pre strong { color: #7dd3fc; font-weight: 600; }.integration-code pre b { color: #c4b5fd; font-weight: 600; }
.integration-code__body > p { margin: 0; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.08); color: #78869b; font-size: 8px; line-height: 1.6; }.integration-code__body > p span { color: #4adead; }

@media (max-width: 1120px) {
	.integrations-hero__grid { grid-template-columns: 1fr; }
	.integrations-hero__copy { max-width: 790px; margin: 0 auto; text-align: center; }
	.integrations-kicker,.integrations-hero__actions,.integrations-hero__checks { justify-content: center; }
	.integrations-hero h1,.integrations-hero__lead { margin-right: auto; margin-left: auto; }
	.integration-map { width: min(720px,100%); margin: 0 auto; }
	.integration-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
	.integration-build__grid { grid-template-columns: 1fr; }
	.integration-build__copy { max-width: 760px; }
	.integration-code { width: min(720px,100%); transform: none; }
}

@media (max-width: 900px) {
	.integration-category-strip { top: 65px; overflow-x: auto; scrollbar-width: none; }
	.integration-category-strip::-webkit-scrollbar { display: none; }
	.integration-category-strip .container { width: max-content; min-width: 100%; grid-template-columns: repeat(5,190px); padding: 0; }
	.integration-directory__head { grid-template-columns: 1fr; gap: 18px; }
	.integration-directory__head > p { max-width: 680px; }
	.integration-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 700px) {
	.integrations-hero { padding-top: 64px; }
	.integrations-hero__grid { gap: 48px; padding-bottom: 64px; }
	.integrations-hero h1 { font-size: clamp(43px,12vw,56px); }
	.integrations-hero__actions { align-items: stretch; flex-direction: column; gap: 18px; }
	.integrations-hero__actions .btn { width: 100%; }
	.integration-map__canvas { height: 360px; }
	.integration-map__node { width: 98px; height: 52px; padding: 10px; }
	.integration-map__node--one,.integration-map__node--four { left: 10px; }.integration-map__node--three,.integration-map__node--six { right: 10px; }
	.integration-map__node--one,.integration-map__node--three { top: 39px; }.integration-map__node--four,.integration-map__node--six { bottom: 37px; }
	.integration-map__node--two { top: 13px; }.integration-map__node--five { bottom: 11px; }
	.integration-map__core { width: 138px; height: 104px; }
	.integrations-hero__metrics { grid-template-columns: repeat(2,1fr); }
	.integrations-hero__metrics > div { min-height: 92px; }.integrations-hero__metrics > div:nth-child(3) { border-top: 1px solid rgba(255,255,255,.09); border-left: 0; }.integrations-hero__metrics > div:nth-child(4) { border-top: 1px solid rgba(255,255,255,.09); }
	.integration-toolbar { margin-bottom: 56px; }
	.integration-toolbar__top { grid-template-columns: 1fr; }
	.integration-results { min-height: 49px; flex-direction: row; gap: 8px; }.integration-results span { margin-top: 0; }
	.integration-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }.integration-filters::-webkit-scrollbar { display: none; }.integration-filter { flex: 0 0 auto; }
	.integration-section { margin-bottom: 70px; scroll-margin-top: 155px; }
	.integration-section__head { grid-template-columns: 48px 1fr; }.integration-section__head > strong { grid-column: 2; justify-self: start; margin-top: 2px; }
	.integration-build__actions { align-items: stretch; flex-direction: column; gap: 18px; }.integration-build__actions .btn { width: 100%; }.integration-build__link { text-align: center; }
}

@media (max-width: 540px) {
	.integrations-hero__lead { font-size: 15px; }
	.integrations-hero__checks { display: grid; justify-content: start; width: fit-content; margin-right: auto; margin-left: auto; text-align: left; }
	.integration-map__topbar { padding-inline: 13px; }.integration-map__topbar > span { font-size: 7.5px; }
	.integration-map__canvas { height: 318px; }
	.integration-map__paths { opacity: .75; }
	.integration-map__node { width: 80px; height: 45px; padding: 8px; border-radius: 11px; }
	.integration-map__node--one,.integration-map__node--four { left: 8px; }.integration-map__node--three,.integration-map__node--six { right: 8px; }
	.integration-map__node--one,.integration-map__node--three { top: 33px; }.integration-map__node--four,.integration-map__node--six { bottom: 31px; }
	.integration-map__core { width: 119px; height: 92px; border-radius: 17px; }.integration-map__core > strong { font-size: 14px; }.integration-map__core > small { font-size: 6px; }
	.integration-map__status { justify-content: center; }.integration-map__status small { display: none; }
	.integration-category-strip .container { grid-template-columns: repeat(5,174px); }
	.integration-directory { padding-top: 70px; }
	.integration-directory__head h2 { font-size: 37px; }
	.integration-toolbar { margin-right: -4px; margin-left: -4px; padding: 10px; border-radius: 16px; }
	.integration-search { padding-inline: 13px; }.integration-search input { font-size: 12px; }
	.integration-grid { grid-template-columns: 1fr; }
	.integration-card { min-height: 0; padding: 19px; }
	.integration-section__head { grid-template-columns: 42px 1fr; gap: 12px; }.integration-section__icon { width: 42px; height: 42px; border-radius: 12px; }.integration-section__head > strong { grid-column: 1/-1; }
	.integration-build h2 { font-size: 38px; }
	.integration-code__body { padding: 17px; }.integration-code pre { font-size: 9.5px; }.integration-code__body > p { font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
	.integration-map__paths path { animation: none; }
	.integration-card,.integration-map__node,.integrations-text-link span { transition: none; }
	.integration-card:hover,.integration-map__node:hover { transform: none; }
}