/* About figure: a slow two-ring wheel of systems we integrate with. CSS only; CSP allows no inline styles. */
.integrations { margin: 0; width: 100%; }
.wheel { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1; margin-inline: auto; container: wheel / inline-size; }
.wheel::before, .wheel::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.wheel::before { inset: 6cqi; border: 1px solid #c6c8bc; background: #e1e2d8; }
.wheel::after { inset: 22cqi; border: 1px dashed #b5bea7; }

.wheel-centre { position: absolute; inset: 35cqi; z-index: 1; border: 1px solid #c6c8bc; border-radius: 50%; background: #f6f6f0; display: flex; align-items: center; justify-content: center; }
.wheel-centre img { display: block; width: 56%; height: auto; }

.wheel-items { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; border-radius: 50%; }
.wheel-items:focus-visible { outline: 3px solid #a74220; outline-offset: 6px; }
.wheel-items li { --a: 0deg; --r: 44cqi; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))); animation: orbit-forward 180s linear infinite; }
.wheel-items .label { --r: 28cqi; z-index: 2; animation-name: orbit-back; animation-duration: 140s; }

.logo img { --chip: 10.5cqi; position: absolute; left: calc(var(--chip) / -2); top: calc(var(--chip) / -2); width: var(--chip); height: var(--chip); padding: 2.85cqi; border: 1px solid #c6c8bc; border-radius: 50%; background: #f6f6f0; }
.logo.wide img { padding: 2.2cqi; }
.logo .name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.label span { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; padding: .5em .95em; border: 1px solid #b5bea7; border-radius: 99px; background: #ecebe4; color: #262e28; font-size: 2.15cqi; font-weight: 700; letter-spacing: .2px; line-height: 1.2; }

.integrations figcaption { max-width: 52ch; text-wrap: balance; margin: 22px auto 0; text-align: center; font-size: 13px; line-height: 1.6; color: #262e28; }
.integrations figcaption small { display: block; margin-top: 8px; font-size: 10px; line-height: 1.6; color: #62655b; }

.wheel:hover li, .wheel-items:focus-within li { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .logo:hover { z-index: 3; }
  .logo:hover img { border-color: #262e28; }
  .logo:hover .name { width: auto; height: auto; overflow: visible; clip-path: none; top: calc(5.25cqi + 6px); left: 0; transform: translateX(-50%); padding: 3px 8px; background: #262e28; color: #ecebe4; font-size: 11px; font-weight: 700; line-height: 1.4; }
}

/* Compact columns (phones and narrow tablets): keep names legible rather than scaling them down. */
@container wheel (max-width: 440px) {
  .wheel-items li { --r: 44.5cqi; }
  .wheel-items .label { --r: 26cqi; }
  .logo img { --chip: 11cqi; padding: 2.75cqi; }
  .logo.wide img { padding: 2.1cqi; }
  .label span { font-size: 10px; padding: .45em .75em; }
  .wheel::after { inset: 24cqi; }
  .wheel-centre { inset: 37.5cqi; }
}

@container wheel (max-width: 300px) {
  .wheel-items li { --r: 45cqi; }
  .wheel-items .label { --r: 27cqi; }
  .logo img { --chip: 10cqi; padding: 2.4cqi; }
  .logo.wide img { padding: 1.7cqi; }
  .label span { font-size: 9px; padding: .4em .6em; }
  .wheel::after { inset: 23cqi; }
  .wheel-centre { inset: 38.5cqi; }
}

.logo:nth-child(2) { --a: 22.5deg; }
.logo:nth-child(3) { --a: 45deg; }
.logo:nth-child(4) { --a: 67.5deg; }
.logo:nth-child(5) { --a: 90deg; }
.logo:nth-child(6) { --a: 112.5deg; }
.logo:nth-child(7) { --a: 135deg; }
.logo:nth-child(8) { --a: 157.5deg; }
.logo:nth-child(9) { --a: 180deg; }
.logo:nth-child(10) { --a: 202.5deg; }
.logo:nth-child(11) { --a: 225deg; }
.logo:nth-child(12) { --a: 247.5deg; }
.logo:nth-child(13) { --a: 270deg; }
.logo:nth-child(14) { --a: 292.5deg; }
.logo:nth-child(15) { --a: 315deg; }
.logo:nth-child(16) { --a: 337.5deg; }
.label:nth-child(17) { --a: 22.5deg; }
.label:nth-child(18) { --a: 67.5deg; }
.label:nth-child(19) { --a: 112.5deg; }
.label:nth-child(20) { --a: 157.5deg; }
.label:nth-child(21) { --a: 202.5deg; }
.label:nth-child(22) { --a: 247.5deg; }
.label:nth-child(23) { --a: 292.5deg; }
.label:nth-child(24) { --a: 337.5deg; }

@keyframes orbit-forward {
  to { transform: rotate(calc(var(--a) + 360deg)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a) - 360deg)); }
}
@keyframes orbit-back {
  to { transform: rotate(calc(var(--a) - 360deg)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a) + 360deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .wheel-items li { animation: none; }
}