#integrations { scroll-margin-top:24px; padding:64px 0; }
.integrations-intro { display:flex; gap:28px; justify-content:space-between; align-items:flex-end; margin-bottom:28px; }
.integrations-intro h2 { font-size:clamp(30px,3.3vw,44px); }
.integrations-intro .lede { font-size:17px; margin-bottom:0; max-width:none; }
.integration-controls { display:flex; gap:8px; flex-shrink:0; padding-bottom:3px; }
.integration-controls button { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--ink); font:20px var(--sans); cursor:pointer; }
.integration-controls button:hover:not(:disabled) { border-color:var(--ice2); background:#edf7fe; }
.integration-controls button:disabled { opacity:.3; cursor:default; }
.integration-belt { display:flex; background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.integration-carousel { display:flex; flex:1; min-width:0; gap:0; list-style:none; padding:0; margin:0; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.integration-carousel li { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; flex:0 0 142px; min-height:158px; padding:22px 12px; scroll-snap-align:start; }
.product-icon { width:32px; height:32px; margin-bottom:8px; background:var(--brand); -webkit-mask:var(--icon) center / contain no-repeat; mask:var(--icon) center / contain no-repeat; }
.integration-carousel b { font-size:14px; font-weight:500; white-space:nowrap; }
.integration-carousel li > span:last-child { color:var(--mute); font:10px/1.5 var(--mono); }
.integration-more { display:flex; flex:0 0 188px; flex-direction:column; justify-content:center; padding:24px 28px; border-left:1px solid var(--line); background:#f0f8fe; text-decoration:none; color:var(--ink); }
.integration-more strong { font-size:38px; line-height:1.1; letter-spacing:-.04em; font-weight:600; }
.integration-more > span { margin-top:6px; font-size:15px; }
.integration-more small { margin-top:9px; font:10px/1.4 var(--mono); color:var(--mute); }
.integration-more:hover { background:#e6f3fc; }
.integrations-next { display:flex; gap:16px 28px; justify-content:space-between; align-items:baseline; margin-top:18px; }
.integrations-next p { font-size:12px; color:var(--mute); margin:0; }
.integrations-next a { color:var(--ink); font-size:13px; text-underline-offset:4px; flex-shrink:0; }
#integrations a:focus-visible, #integrations button:focus-visible { outline:3px solid var(--ice2); outline-offset:3px; }
.integration-carousel:focus-visible { outline:3px solid var(--ice2); outline-offset:-3px; }
@media (max-width:600px) {
  #integrations { padding:48px 0; }
  .integrations-intro { flex-wrap:wrap; gap:16px; margin-bottom:20px; }
  .integrations-intro .eyebrow { font-size:10px; }
  .integrations-intro .lede { font-size:16px; }
  .integration-controls { margin-left:auto; }
  .integration-carousel li { flex-basis:132px; min-height:148px; }
  .integration-more { flex-basis:112px; padding:18px 12px; }
  .integration-more strong { font-size:28px; }
  .integration-more > span { font-size:11px; }
  .integration-more small { font-size:8px; }
  .integrations-next { flex-direction:column; gap:10px; }
}