.integration-header { align-items: center; margin-bottom: 24px; }
.integration-header h1 { font-size: clamp(34px, 3.5vw, 48px); line-height: 1.05; }
.integration-header p { margin-top: 12px; }
.integration-manage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  color: var(--portal-ink);
  font-size: 13px;
  text-decoration: none;
}
.integration-manage .portal-icon { width: 14px; height: 14px; }
.integration-allowance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  padding: 16px 20px;
  border: 1px solid rgb(104 78 232 / 12%);
  border-radius: 18px;
  background: rgb(238 234 251 / 65%);
}
.integration-usage { display: flex; align-items: center; gap: 16px; min-width: 0; }
.integration-usage > strong {
  padding-right: 16px;
  border-right: 1px solid rgb(104 78 232 / 18%);
  font-size: 23px;
  font-weight: 650;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.integration-usage span { font-size: 13px; font-weight: 600; }
.integration-usage p { margin: 4px 0 0; color: var(--portal-muted); font-size: 12px; }
.integration-extra {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgb(104 78 232 / 16%);
  border-radius: 999px;
  color: #5138bf;
  background: rgb(255 255 255 / 70%);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.integration-extra span { font-weight: 400; }
.integration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  align-items: start;
  gap: 20px;
}
.integration-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(29 29 31 / 9%);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 3px 12px rgb(20 20 24 / 3%);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.integration-card:hover { border-color: rgb(29 29 31 / 20%); box-shadow: 0 9px 26px rgb(20 20 24 / 6%); }
.integration-card.is-active { border-color: rgb(104 78 232 / 30%); }
.integration-card.is-soon { background: #fafaf9; }
.integration-cover { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #f1f1f3; }
.integration-cover > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.integration-card.is-soon .integration-cover > img { filter: saturate(.7); opacity: .92; }
.integration-cover .account-state {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  font-size: 10px;
  letter-spacing: .03em;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgb(20 20 24 / 10%);
  background: rgb(255 255 255 / 92%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.integration-cover .account-state.is-on { background: rgb(226 244 220 / 94%); }
.integration-card-main { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 18px 20px 20px; }
.integration-title { display: flex; align-items: center; gap: 12px; }
.integration-title h2 { margin: 0; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; }
.integration-title span:not(.integration-avatar) {
  display: block;
  margin-top: 2px;
  color: var(--portal-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.integration-avatar {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(29 29 31 / 10%);
  border-radius: 12px;
  background: #fff;
}
.integration-avatar img { display: block; width: 24px; height: 24px; object-fit: contain; }
.integration-avatar.is-hey-buddy { background: #242429; border-color: transparent; }
.integration-avatar.is-hey-buddy img,
.integration-avatar.is-baghaus img { width: 100%; height: 100%; object-fit: cover; }
.integration-avatar.is-baghaus img { width: 26px; height: 26px; object-fit: contain; }
.integration-description { margin: 0; min-height: 40px; margin: 0; color: #62626b; font-size: 14px; line-height: 1.45; }
.integration-actions { display: grid; gap: 9px; margin-top: auto; }
.integration-actions > p { margin: 0; color: var(--portal-muted); font-size: 11px; line-height: 1.4; }
.integration-actions .portal-button,
.integration-actions .portal-button-secondary {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 10px 14px;
  font-size: 13px;
  text-decoration: none;
  box-shadow: none;
}
.integration-actions .portal-button-secondary:disabled { opacity: 1; color: #797981; background: #efeff0; border-color: transparent; }
.integration-details { border-top: 1px solid var(--portal-line); }
.integration-details > summary,
.integration-soon-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 12px 22px;
  color: #686870;
  font-size: 11px;
}
.integration-soon-note { border-top: 1px solid var(--portal-line); }
.integration-details > summary { cursor: pointer; list-style: none; }
.integration-details > summary::-webkit-details-marker { display: none; }
.integration-details > summary:hover { background: #f7f7fa; color: var(--portal-ink); }
.integration-details > summary > span { font-size: 18px; line-height: 12px; transition: transform 160ms; }
.integration-details[open] > summary > span { transform: rotate(45deg); }
.integration-settings { padding: 0 18px 18px; }
.integration-settings > p { margin: 0 0 14px; color: #62626b; font-size: 12px; line-height: 1.5; }
.integration-capabilities { display: grid; gap: 8px; }
.integration-capabilities .capability-row { grid-template-columns: 28px minmax(0, 1fr) 38px; gap: 8px; min-height: 96px; padding: 10px; }
.integration-capabilities .capability-icon { width: 28px; height: 28px; }
.integration-capabilities .capability-copy em { line-height: 1.4; font-style: normal; }
.integration-library :is(a, button, summary):focus-visible { outline: 3px solid #8067df; outline-offset: 4px; }
@media (max-width: 760px) {
  .integration-header { position: relative; display: block; }
  .integration-header .account-kicker { font-size: 10px; }
  .integration-manage { position: absolute; top: 0; right: 0; font-size: 12px; }
  .integration-allowance { align-items: flex-start; flex-direction: column; gap: 14px; padding: 16px; }
  .integration-usage p { line-height: 1.45; }
  .integration-extra { width: 100%; justify-content: space-between; }
  .integration-grid { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .integration-card, .integration-details > summary > span { transition: none; }
}