/* Integrations catalog page — layered on top of homepage-v30.css */

.hp-content .int-hero{padding-bottom:72px}
.hp-content .int-hero-inner{max-width:780px}

/* Quick-jump chip strip in the hero */
.hp-content .int-cat-strip{
	display:flex;flex-wrap:wrap;gap:8px;margin-top:30px;
}
.hp-content .int-cat-strip .int-cat-pill{
	display:inline-flex;align-items:center;gap:8px;
	padding:7px 12px 7px 9px;border-radius:999px;
	background:rgba(255,255,255,.05);
	border:1px solid var(--dark-line-2);
	color:var(--dark-ink-2);font-size:12.5px;font-weight:500;
	transition:all .18s var(--ease);
}
.hp-content .int-cat-strip .int-cat-pill:hover{
	background:rgba(255,255,255,.09);
	border-color:rgba(78,201,126,.5);
	color:#fff;
}
.hp-content .int-cat-pill-n{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:22px;height:22px;padding:0 6px;border-radius:999px;
	background:var(--accent-bright);color:var(--dark);
	font-variant-numeric:tabular-nums;font-weight:600;font-size:11.5px;
}

/* ───────── Category blocks ───────── */
.hp-content .int-page-categories{padding:96px 0 80px}
.hp-content .int-cat-block{margin-bottom:64px;scroll-margin-top:80px}
.hp-content .int-cat-block:last-child{margin-bottom:0}

.hp-content .int-cat-head{margin-bottom:24px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.hp-content .int-cat-h{
	font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.015em;
	color:var(--ink);margin:0;
}
.hp-content .int-cat-blurb{
	margin:6px 0 0;color:var(--muted);font-size:15px;line-height:1.45;
}

/* ───────── Integration cards ───────── */
.hp-content .int-card-grid{display:grid;gap:16px}
.hp-content .int-card-grid-1{grid-template-columns:1fr}
.hp-content .int-card-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hp-content .int-card-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

.hp-content .int-card{
	background:#fff;border:1px solid var(--line);border-radius:14px;
	padding:22px 22px 20px;display:flex;flex-direction:column;gap:14px;
	transition:all .2s var(--ease);position:relative;scroll-margin-top:80px;
}
.hp-content .int-card:hover{
	border-color:var(--line-3);
	transform:translateY(-2px);
	box-shadow:0 1px 2px rgba(12,12,13,.04),0 10px 22px -12px rgba(12,12,13,.14);
}

.hp-content .int-card-head{display:flex;align-items:center;gap:14px}
.hp-content .int-card-logo{
	flex:0 0 auto;width:44px;height:44px;
	display:grid;place-items:center;
	background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
	padding:8px;
}
.hp-content .int-card-logo svg,.hp-content .int-card-logo img{
	width:100%;height:100%;display:block;
}
.hp-content .int-card-titles{display:flex;flex-direction:column;gap:2px;min-width:0}
.hp-content .int-card-name{
	font-family:var(--display);font-weight:600;font-size:16.5px;letter-spacing:-.012em;
	color:var(--ink);margin:0;line-height:1.15;
}
.hp-content .int-card-cat{
	font-size:10.5px;color:var(--muted);text-transform:uppercase;
	letter-spacing:.1em;font-weight:600;line-height:1;
}

.hp-content .int-card-desc{
	margin:0;color:var(--ink-3);font-size:14px;line-height:1.55;
	flex:1;
}
.hp-content .int-card-desc code{
	font-family:var(--mono);font-size:12.5px;
	background:var(--bg-2);border:1px solid var(--line);
	padding:1px 5px;border-radius:5px;
}

.hp-content .int-card-config{
	display:flex;flex-direction:column;gap:3px;
	padding-top:14px;border-top:1px dashed var(--line-2);
}
.hp-content .int-card-config-l{
	font-size:10.5px;color:var(--soft);text-transform:uppercase;
	letter-spacing:.1em;font-weight:600;
}
.hp-content .int-card-config-v{
	font-family:var(--mono);font-size:12.5px;color:var(--ink-2);
}

/* ───────── How-it-fits explainer ───────── */
.hp-content .int-explainer{padding:96px 0}
.hp-content .int-explainer-grid{
	display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start;
}
.hp-content .int-explainer .sec-h{font-size:clamp(28px,3.2vw,40px);margin-top:16px}
.hp-content .int-explainer .sec-sub{margin-top:14px}

.hp-content .int-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.hp-content .int-steps li{
	display:flex;gap:16px;align-items:flex-start;
	background:#fff;border:1px solid var(--line);border-radius:12px;
	padding:18px 20px;
}
.hp-content .int-step-n{
	flex:0 0 auto;width:30px;height:30px;border-radius:50%;
	display:grid;place-items:center;
	background:var(--accent-soft);color:var(--accent);
	font-weight:600;font-size:13.5px;
	border:1px solid var(--accent-line);
}
.hp-content .int-steps h4{
	font-family:var(--display);font-weight:600;font-size:15.5px;letter-spacing:-.012em;
	color:var(--ink);margin:0 0 4px;
}
.hp-content .int-steps p{
	margin:0;color:var(--ink-3);font-size:13.5px;line-height:1.5;
}

/* ───────── Missing-integration CTA ───────── */
.hp-content .int-missing{padding:80px 0}
.hp-content .int-missing-card{
	background:#fff;border:1px solid var(--line);border-radius:18px;
	padding:36px 40px;
	display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.hp-content .int-missing-card h2{
	font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.015em;
	color:var(--ink);margin:0 0 8px;
}
.hp-content .int-missing-card p{
	margin:0;color:var(--muted);font-size:14.5px;line-height:1.5;max-width:62ch;
}
.hp-content .int-missing-ctas{display:flex;gap:10px;flex-wrap:wrap}

/* ───────── Responsive ───────── */
@media (max-width: 960px){
	.hp-content .int-card-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
	.hp-content .int-explainer-grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width: 640px){
	.hp-content .int-page-categories{padding:64px 0 56px}
	.hp-content .int-explainer{padding:64px 0}
	.hp-content .int-missing{padding:56px 0}
	.hp-content .int-card-grid-3,
	.hp-content .int-card-grid-2{grid-template-columns:1fr}
	.hp-content .int-missing-card{flex-direction:column;align-items:flex-start;padding:28px 24px}
	.hp-content .int-cat-h{font-size:20px}
}

/* Hero H1 carries a long glossary-locked compound in some locales
   (e.g. DE 'Benachrichtigungskanal', row 7) that cannot be shortened.
   Allow hyphenated wrapping at any width and shrink the type on narrow
   phones so the headline never clips (was clipped at 390px). */
.hp-content .int-hero .hero-h{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
@media (max-width: 420px){
	.hp-content .int-hero .hero-h{font-size:30px}
}