/* logos (tools/sections/logos.html): one glass card for each tool, each with its own soft light */
.k-logos .k-in { text-align: center; }
.k-int { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1180px; margin: 0 auto; padding: 0; list-style: none; text-align: left; }
.k-int-card { --k-int-tint: 110, 114, 242; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 248px; box-sizing: border-box;
  padding: 34px 32px 28px; border-radius: 26px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: var(--k-edge), var(--k-lift); transition: transform .35s var(--k-ease), box-shadow .35s var(--k-ease); }
.k-int-card:nth-child(3n + 2) { --k-int-tint: 190, 160, 80; }   /* the second: a gold light */
.k-int-card:nth-child(3n + 3) { --k-int-tint: 176, 82, 255; }   /* the third: a violet light */
.k-int-card::before { content: ''; position: absolute; z-index: -1; top: -46%; right: -28%; width: 78%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--k-int-tint), .2), rgba(var(--k-int-tint), .07) 55%, transparent); transition: transform .6s var(--k-ease); }
.k-int-logo { display: flex; align-items: center; gap: 14px; height: 56px; }
.k-int-logo img { display: block; height: 30px; width: auto; max-width: 100%; }
.k-int-logo--mark img { height: 46px; }
.k-int-logo b { font: 500 32px/1 var(--sans); letter-spacing: -.035em; color: var(--ink); white-space: nowrap; }
.k-int-card p { margin: 22px 0 0; max-width: 26em; font: 400 17px/1.5 var(--sans); color: var(--ink2); text-wrap: pretty; }
.k-int-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 26px; font: 500 16px/1 var(--sans); color: var(--k-blue); text-decoration: none; }
.k-int-go::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }  /* the whole card is the link */
.k-int-go svg { width: 18px; height: 18px; transition: transform .3s var(--k-ease); }
.k-int-go:focus-visible { outline: none; }
.k-int-card:has(.k-int-go:focus-visible) { outline: 2px solid #6E72F2; outline-offset: 3px; }
@media (hover: hover) {
  .k-int-card:has(.k-int-go):hover { transform: translateY(-6px); box-shadow: var(--k-edge), 0 26px 90px -40px rgba(40, 44, 120, .25); }
  .k-int-card:hover::before { transform: scale(1.15); }
  .k-int-card:hover .k-int-go svg { transform: translateX(3px); }
}
@media (max-width: 860px) {
  .k-int { grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 520px; }
  .k-int-card { min-height: 0; padding: 26px 24px 24px; border-radius: 22px; }
  .k-int-logo { height: 48px; }
  .k-int-logo img { height: 26px; } .k-int-logo--mark img { height: 40px; }
  .k-int-logo b { font-size: 28px; }
  .k-int-card p { margin-top: 16px; font-size: 16px; }
  .k-int-go { padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .k-int-card, .k-int-card::before, .k-int-go svg { transition: none; } .k-int-card:hover { transform: none; } }