/* ============================================================
   Integrations — page sheet (additions only).
   Loaded after capability.css on /platform/integrations/ as the
   second entry of pageCss. The base capability template lives in
   capability.css (scoped .p-capability); everything here is scoped
   to the .p-capability--integrations modifier so it never bleeds
   onto sibling /platform/ routes that share capability.css.

   The "integrations.css" name is owned by the /integrations/
   marketplace page, hence the family-prefixed filename.

   RONDA 2 (2026-08-01): the visual language matches the approved
   workflow-builder illustration style (G13) — white ground, subtle
   dot-grid, grey skeleton shapes, hairlines, ONE blue accent, a
   discreet "Mockup" chip. Tokens only.
   ============================================================ */

/* ---- discreet "Mockup" chip (walk tiles) ---- */
.p-capability--integrations .intm-tile__chip {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-placeholder-yellow);
  color: var(--color-black);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  pointer-events: none;
}
/* ============================================================
   THE CONNECTION ILLUSTRATION (Mike 2026-08-08)
   The dashboard integrations-hero canvas ported: no panel, no border —
   the wires and pills float straight on the page over a dotted
   blue-gradient ground (22px dot mask), and the whole stage fades into
   the background at the sides. Canvas drawn by integrations-flow.js.
   ============================================================ */
.p-capability--integrations .cap-connect {
  border-top: 1px solid var(--color-border-light);
  background: var(--color-background);
}
/* base (position, dotted ground, canvas fill) lives in
   components/int-flow.css — shared with the /integrations/ hero; only the
   full-width stage geometry is page-specific */
.p-capability--integrations .cap-connect .int-flow {
  margin: 40px auto 0;
  /* r5: the box itself widens (850→1080) so lines + dots gain ~115px per
     side; the pill layout re-maps to the same pixel positions and the
     height stays at the 850-wide value (aspect 1080:478) */
  width: min(100%, 1080px);
  aspect-ratio: 1080 / 478;
  /* the stage itself dissolves into the page at the sides */
  -webkit-mask-image: linear-gradient(to right, transparent 0, var(--color-black) 2%, var(--color-black) 98%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, var(--color-black) 2%, var(--color-black) 98%, transparent 100%);
}
/* the next section sits closer under the illustration */
.p-capability--integrations .cap-connect .cap-inner {
  padding-bottom: calc(var(--space-section-sm) - 20px);
}
@media (min-width: 768px) {
  .p-capability--integrations .cap-connect .cap-inner {
    padding-bottom: calc(var(--space-section) - 20px);
  }
}
/* narrow: a taller stage keeps the pills legible */
@media (max-width: 640px) {
  .p-capability--integrations .cap-connect .int-flow { aspect-ratio: 4 / 3; }
}

/* ============================================================
   WALK MOCKS · the G13 window (bar + body), identical frame per row
   ============================================================ */
.p-capability--integrations .cap-tile.intm-tile {
  padding: 0;
  gap: 0;
  aspect-ratio: 16 / 11;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: var(--color-white);
  background-image: none;
  border: 1px solid var(--color-border-light);
  overflow: hidden;
}

/* window title bar */
.p-capability--integrations .intm__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 13px;
  background: var(--color-grey-50);
  border-bottom: 1px solid var(--color-border-light);
}
.p-capability--integrations .intm__lights { display: inline-flex; gap: 5px; }
.p-capability--integrations .intm__lights i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-grey-200);
}
.p-capability--integrations .intm__tab {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 9px;
  border-radius: 6px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  font-size: 11px;
  color: var(--color-grey-400);
}

/* window body */
.p-capability--integrations .intm__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px;
}
.p-capability--integrations .intm__body--canvas {
  background-color: var(--color-white);
  background-image: radial-gradient(
    color-mix(in oklab, var(--color-grey-200) 55%, transparent) 1.1px,
    transparent 1.3px
  );
  background-size: 17px 17px;
}
/* ronda 3 (2026-08-01): vertical flow so this mock fills its 16/11 frame at the
   same density as its siblings (v1 fan-out, v3 embed) — G12/G13 consistency. */
.p-capability--integrations .intm__body--flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
}
.p-capability--integrations .intm__body--app { display: grid; grid-template-columns: 30% 1fr; padding: 0; }

/* skeleton primitives */
.p-capability--integrations .intm-ln {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--color-grey-100);
}
.p-capability--integrations .intm-ln--wide { width: 100%; }
.p-capability--integrations .intm-ln--med { width: 72%; }

/* --- v1 · fan-out to every delivery surface --- */
.p-capability--integrations .intm-arch { display: block; width: 100%; height: 100%; }
.p-capability--integrations .intm-arch__wire { fill: none; stroke: var(--color-grey-300); stroke-width: 1.5; }
.p-capability--integrations .intm-arch__wire.is-on { stroke: var(--color-blue); stroke-width: 2; }
.p-capability--integrations .intm-arch__dot { fill: var(--color-grey-300); }
.p-capability--integrations .intm-arch__dot.is-on { fill: var(--color-blue); }
.p-capability--integrations .intm-arch__core {
  fill: var(--color-white);
  stroke: var(--color-blue);
  stroke-width: 1.5;
}
.p-capability--integrations .intm-arch__coreSub { fill: var(--color-grey-on-white); font-size: 8.5px; }
.p-capability--integrations .intm-arch__node {
  fill: var(--color-white);
  stroke: var(--color-grey-200);
  stroke-width: 1.25;
}
.p-capability--integrations .intm-arch__node.is-on { fill: var(--color-blue-100); stroke: var(--color-blue); }
.p-capability--integrations .intm-arch__label { fill: var(--color-black); font-weight: 500; font-size: 10px; }

/* --- v2 · verification event returned to the endpoint --- */
.p-capability--integrations .intm-emit {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: none;
}
.p-capability--integrations .intm-emit__logo { width: 62px; height: auto; }
.p-capability--integrations .intm-emit__lbl { font-size: 10px; color: var(--color-grey-400); }
.p-capability--integrations .intm-arrow { flex: 0 0 auto; align-self: center; width: 46px; height: 20px; transform: rotate(90deg); }
.p-capability--integrations .intm-arrow__line {
  stroke: var(--color-blue);
  stroke-width: 2;
  stroke-dasharray: 5 6;
  animation: intmDash 0.8s linear infinite;
}
@keyframes intmDash { to { stroke-dashoffset: -11; } }
.p-capability--integrations .intm-arrow__head { fill: none; stroke: var(--color-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-capability--integrations .intm-endpoint {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: none;
  overflow: hidden;
}
.p-capability--integrations .intm-endpoint__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-grey-50);
}
.p-capability--integrations .intm-endpoint__name { font-size: 10px; color: var(--color-grey-500); }
.p-capability--integrations .intm-endpoint__pill {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  background: var(--color-green-100);
  color: var(--color-green-500);
}
.p-capability--integrations .intm-endpoint__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
  padding: 14px 12px;
}
.p-capability--integrations .intm-row { display: flex; align-items: center; gap: 9px; }
.p-capability--integrations .intm-key {
  flex: 0 0 auto;
  width: 30px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-grey-200);
}
.p-capability--integrations .intm-val {
  flex: 1 1 auto;
  height: 7px;
  border-radius: 999px;
  background: var(--color-grey-100);
}
.p-capability--integrations .intm-val--s { max-width: 46%; }
.p-capability--integrations .intm-val--ok { background: color-mix(in oklab, var(--color-blue) 45%, var(--color-grey-100)); }

/* --- v3 · Incode embedded inside a partner platform --- */
.p-capability--integrations .intm-app__rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 12px;
  border-right: 1px solid var(--color-border-light);
  background: color-mix(in oklab, var(--color-grey-50) 55%, var(--color-white));
}
.p-capability--integrations .intm-app__rail span {
  height: 8px;
  border-radius: 999px;
  background: var(--color-grey-100);
}
.p-capability--integrations .intm-app__rail span:nth-child(even) { width: 62%; }
.p-capability--integrations .intm-app__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 16px;
}
.p-capability--integrations .intm-mod {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--color-blue-100);
  border: 1px solid color-mix(in oklab, var(--color-blue) 35%, transparent);
}
.p-capability--integrations .intm-mod__badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--color-blue);
  color: var(--color-white);
}
.p-capability--integrations .intm-mod__badge svg { width: 15px; height: 15px; }
.p-capability--integrations .intm-mod__txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-right: auto;
}
.p-capability--integrations .intm-mod__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-black);
}
.p-capability--integrations .intm-mod__sub { font-size: var(--fs-xs); color: var(--color-grey-on-white); }
.p-capability--integrations .intm-mod__chip {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--color-green-100);
  color: var(--color-green-500);
}

/* narrow screens: let the split mocks breathe */
@media (max-width: 600px) {
  .p-capability--integrations .intm__body--flow { gap: 10px; padding: 14px; }
  .p-capability--integrations .intm-emit { padding: 10px 12px; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .p-capability--integrations .int-hub__halo,
  .p-capability--integrations .int-hub__wire.is-active,
  .p-capability--integrations .intm-arrow__line { animation: none; }
  .p-capability--integrations .int-hub__wire.is-active { stroke-dasharray: none; }
  .p-capability--integrations .intm-arrow__line { stroke-dasharray: none; }
}

/* ---- marketplace section · the reused IntegrationsMarketplace module ---- */
.p-capability--integrations .cap-market {
  border-top: 1px solid var(--color-border-light);
  background: var(--color-background);
}
.p-capability--integrations .cap-market__body { margin-top: 40px; }

/* ============================================================
   NOTE: capability.css loads AFTER this sheet, so the hero rules
   carry .cap-hero__inner to outrank its flex-column base.

   HERO · copy left, the stacked connection illustration right
   (Mike 2026-08-10, from Nacim: "no hero visual"). Mirrors the
   split /platform/workflow-builder/ uses; below 1024 the visual
   drops under the copy.
   ============================================================ */
.p-capability--integrations .cap-hero__inner.inth-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  text-align: left;
}
.p-capability--integrations .cap-hero__inner.inth-hero .cap-hero__actions { justify-content: flex-start; }
.p-capability--integrations .inth-copy { min-width: 0; }
@media (min-width: 1024px) {
  .p-capability--integrations .cap-hero__inner.inth-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 64px;
  }
}
.p-capability--integrations .cap-hero .int-flow--stack {
  max-width: 460px;
  /* proportional step so the orbit sits inside the canon 444px box floor
     (Sofia 2026-08-17: one box for every /platform/ hero) */
  zoom: 0.93;
  /* right edge rides the stage inset like every /platform/ hero visual
     (Sofia 2026-08-17: unify the real estate). Mike's -5px optical nudge
     (2026-08-10) belonged to the centered position and retires with it. */
  margin-inline: auto 0;
}

/* ============================================================
   HOW IT WORKS · one console window per step (Mike 2026-08-10)
   — 01 Marketplace and 03 My integrations reproduce the product's
   Integrations section; 02 is a webhook-deliveries view designed in
   the same language (the product has no results screen and that is
   what the step promises). Crossfaded on the [data-sol-screen]
   mechanics, through the shared HowItWorks `stage` slot.
   NOTE: solution.css loads AFTER this sheet, so the stage overrides
   carry .p-solution.
   ============================================================ */
.p-capability--integrations .p-solution .sol-how__stage:has(.inw) .sol-how__phone { display: none; }
.p-capability--integrations .p-solution .sol-how__stage:has(.inw) {
  position: relative;
  width: 96%;
  min-height: 420px;
  padding: 74px 44px;
}
.p-capability--integrations .inw {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(100% - 32px), 540px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  overflow: hidden;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.p-capability--integrations .inw.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease;
}
/* chrome is now the canonical <BrowserChrome /> (.brchrome, browser-chrome.css)
   — the bespoke .inw__bar/__dots/__url rules were removed with the markup. */

/* mobile: solution-hero.js pairs each step with its own console under it and
   tags the deck data-dash-fit, so site.js dashFit renders the EXACT desktop
   window scaled to the column (base 540). The paired node is normally an
   absolute, hidden crossfade layer of the shared stage — reset it to a static,
   visible, self-centering block so every step's window shows in place. */
.p-capability--integrations .sol-how__shot--dash .inw {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  opacity: 1;
  visibility: visible;
  margin-inline: auto;
}

/* every step's window is the same height (Mike 2026-08-10: +20px) */
.p-capability--integrations .inw__body { display: flex; align-items: stretch; height: 270px; }
.p-capability--integrations .inw-side {
  flex: 0 0 104px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px;
  border-right: 1px solid var(--color-border-light);
}
.p-capability--integrations .inw-side__brand { width: 56px; height: auto; margin-bottom: 4px; }
.p-capability--integrations .inw-side__line { height: 7px; border-radius: 999px; background: var(--color-grey-100); }
.p-capability--integrations .inw-side__line--on { background: var(--color-blue-200); }
.p-capability--integrations .inw-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 16px;
}
.p-capability--integrations .inw-main__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.p-capability--integrations .inw-main__head b { font-size: 12px; font-weight: 600; color: var(--color-black); }
.p-capability--integrations .inw-main__head i { font-style: normal; font-size: 10px; color: var(--color-grey-400); }
/* the product's two tabs, with the step's own one selected */
.p-capability--integrations .inw-tabs {
  display: inline-flex;
  gap: 12px;
  text-decoration: none;
  margin-left: 4px;
}
.p-capability--integrations .inw-tabs i {
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  font-style: normal;
  font-size: 10px;
  color: var(--color-grey-400);
}
.p-capability--integrations .inw-tabs i.is-on {
  border-bottom-color: var(--color-blue-500);
  color: var(--color-black);
  font-weight: 500;
}

/* 01 · marketplace */
.p-capability--integrations .inw-market { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.p-capability--integrations .inw-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.p-capability--integrations .inw-chips i {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
  font-style: normal;
  font-size: 8.5px;
  color: var(--color-grey-500);
}
.p-capability--integrations .inw-chips i em { font-style: normal; color: var(--color-grey-300); }
.p-capability--integrations .inw-chips i.is-on {
  background: var(--color-blue-100);
  border-color: var(--color-blue-200);
  color: var(--color-blue);
  font-weight: 500;
}
.p-capability--integrations .inw-chips i.is-on em { color: var(--color-blue); }
.p-capability--integrations .inw-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  flex: 1;
  min-height: 0;
}
.p-capability--integrations .inw-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
}
.p-capability--integrations .inw-card__logo {
  display: grid;
  place-items: center;
  height: 34px;
  border-radius: 7px;
}
/* one tint per connector, the way a marketplace reads */
.p-capability--integrations .inw-card__logo--blue { background: color-mix(in oklab, var(--color-blue-100) 60%, var(--color-white)); }
.p-capability--integrations .inw-card__logo--purple { background: color-mix(in oklab, var(--color-purple-100) 55%, var(--color-white)); }
.p-capability--integrations .inw-card__logo--green { background: color-mix(in oklab, var(--color-green-100) 45%, var(--color-white)); }
.p-capability--integrations .inw-card__logo img { max-width: 52%; height: auto; }
/* the Okta wordmark is the widest of the three — it needs less room to
   read the same size as the others */
.p-capability--integrations .inw-card__logo--blue img { max-width: 40%; }
.p-capability--integrations .inw-card b { margin-top: 4px; font-size: 9.5px; font-weight: 600; color: var(--color-black); line-height: 1.3; }
.p-capability--integrations .inw-card em { font-style: normal; font-size: 8.5px; line-height: 1.4; color: var(--color-grey-400); }
/* the pill and the link each hold their own line — side by side they
   wrapped in a card this narrow */
.p-capability--integrations .inw-card__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin-top: auto;
  text-decoration: none;
}
.p-capability--integrations .inw-card__foot s {
  text-decoration: none;
  white-space: nowrap;
  font-size: 8.5px;
  color: var(--color-blue);
}
.p-capability--integrations .inw-pill {
  padding: 2px 6px;
  border-radius: 999px;
  font-style: normal;
  font-size: 8px;
  font-weight: 600;
}
/* the category pill picks up the card's tint */
.p-capability--integrations .inw-pill { white-space: nowrap; }
.p-capability--integrations .inw-pill--blue { background: color-mix(in oklab, var(--color-blue-100) 75%, var(--color-white)); color: var(--color-blue); }
.p-capability--integrations .inw-pill--purple { background: color-mix(in oklab, var(--color-purple-100) 65%, var(--color-white)); color: var(--color-purple-500); }
.p-capability--integrations .inw-pill--green { background: color-mix(in oklab, var(--color-green-100) 70%, var(--color-white)); color: var(--color-green-600); }
.p-capability--integrations .inw-pill--ok { background: color-mix(in oklab, var(--color-green-100) 70%, var(--color-white)); color: var(--color-green-600); text-decoration: none; }

/* 02 · webhook deliveries */
.p-capability--integrations .inw-hooks {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: 14px;
  flex: 1;
  min-height: 0;
}
.p-capability--integrations .inw-hooks__list { display: flex; flex-direction: column; }
/* baseline, not center: the three texts in a row run three fonts and sizes (event
   DM Sans 9, time Rethink 8.5, pill DM Sans 8), so centering their boxes left
   each one sitting on its own baseline. Baseline alignment puts all three on one
   horizontal line, and the pill rides along on its own label's baseline. */
.p-capability--integrations .inw-hook {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-light);
  font-style: normal;
}
.p-capability--integrations .inw-hook:last-child { border-bottom: 0; }
.p-capability--integrations .inw-hook b { font-size: 9px; font-weight: 500; color: var(--color-grey-600); }
/* each row is its own grid, so the timestamps only stack into a column if every
   one of them measures the same — DM Sans sets figures proportionally (a row
   with two 1s runs 5px short), Rethink Sans sets them monospaced, which is why
   the display face is the one that carries numbers. Right-aligned so the digits
   sit flush against the 200 OK pill column. */
.p-capability--integrations .inw-hook em {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 8.5px;
  color: var(--color-grey-300);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.p-capability--integrations .inw-payload {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--color-grey-50) 55%, var(--color-white));
  border: 1px solid var(--color-border-light);
}
/* the card title reads as a header, not as the first row — 6px on top of the
   list's own 6px gap gives it that separation */
.p-capability--integrations .inw-payload__head {
  font-style: normal;
  font-size: 9px;
  font-weight: 600;
  color: var(--color-black);
  margin-bottom: 6px;
}
/* same baseline rule as the delivery rows — label 8.5px against value 9px */
.p-capability--integrations .inw-payload__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-style: normal;
}
.p-capability--integrations .inw-payload__row b { font-size: 8.5px; font-weight: 400; color: var(--color-grey-400); }
.p-capability--integrations .inw-payload__row em { font-style: normal; font-size: 9px; font-weight: 600; color: var(--color-grey-600); }
.p-capability--integrations .inw-payload__row em.is-ok { color: var(--color-green-600); }

/* 03 · my integrations */
.p-capability--integrations .inw-mine { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.p-capability--integrations .inw-group { display: flex; flex-direction: column; gap: 3px; }
.p-capability--integrations .inw-group__lbl {
  font-style: normal;
  font-size: 8.5px;
  font-weight: 600;
  color: var(--color-grey-400);
}
.p-capability--integrations .inw-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 9px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
  font-style: normal;
}
.p-capability--integrations .inw-row__logo {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--color-green-100) 35%, var(--color-white));
  text-decoration: none;
  overflow: hidden;
}
.p-capability--integrations .inw-row__logo img { max-width: 78%; height: auto; }
.p-capability--integrations .inw-row__glyph {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--color-grey-200);
}
/* explicit placement — auto-flow put the state where the name belongs */
.p-capability--integrations .inw-row__logo { grid-column: 1; }
.p-capability--integrations .inw-row b { grid-column: 2; grid-row: 1; font-size: 9.5px; font-weight: 600; color: var(--color-black); }
.p-capability--integrations .inw-row em { grid-column: 2; grid-row: 2; font-style: normal; font-size: 8.5px; color: var(--color-grey-400); }
.p-capability--integrations .inw-row__state {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-green-600);
}
.p-capability--integrations .inw-row__state::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-green-500);
}