/* /team/ section 2: "Every other AI is built for one person." Ink band, the headline, then three columns.
   Each column has a tiny picture (people as initials tiles, AI teammates as the cloud mark in a colour).
   Ours is the last column, with a lime rule on top; nothing else is lime but the highlighter. */
.only-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding: 130px var(--gutter) 140px; }
.only-kicker { color: #a3a3a0; }
.only-title { max-width: 1120px; }
.only-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: 100%; margin-top: 36px; counter-reset: only; }
.only-col { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 30px; border-radius: 22px; background: #161615; box-shadow: inset 0 0 0 1px #262624; }
.only-col.is-ours { background: #fff; color: var(--ink); box-shadow: inset 0 3px 0 var(--lime), 0 40px 80px -40px rgba(233, 255, 59, 0.25); }
.only-pic { display: flex; align-items: center; gap: 8px; height: 44px; margin-bottom: 14px; }
.only-tile { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #d6d6d2; color: var(--ink); font: 600 12px/1 "Geist Mono", monospace; letter-spacing: 0.02em; }
.only-tile { position: relative; overflow: hidden; }
.only-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.only-col:not(.is-ours) .only-tile { background: #242423; color: #d6d6d2; box-shadow: inset 0 0 0 1px #3a3a38; }
.only-col .only-tile.is-gone { background: none; color: #6b6b68; box-shadow: none; outline: 1.5px dashed #4a4a47; outline-offset: -1.5px; }
/* The agent platforms, as their own marks, blurred on purpose: you can tell who, but we don't name them. */
.only-logo { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: #fff; overflow: hidden; }
.only-logo img { width: 22px; height: 22px; filter: blur(2.4px); opacity: 0.9; }
.only-link { width: 22px; height: 2px; border-radius: 2px; background: #4a4a47; }
.only-mark { width: 40px; height: 22px; flex-shrink: 0; }
.only-pair { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 4px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ring); }
.only-mate { width: 40px; height: 24px; flex-shrink: 0; object-fit: contain; }
.only-pair + .only-pair { position: relative; margin-left: 10px; }
.only-pair + .only-pair::before { content: ""; position: absolute; left: -15px; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: #d6d6d2; }
.only-label { color: #a3a3a0; }
.is-ours .only-label { color: var(--graphite); }
.only-what { font-weight: 800; font-size: 26px; line-height: 30px; letter-spacing: -0.035em; }
.only-say { font-size: 16px; line-height: 23px; color: #a3a3a0; }
.is-ours .only-say { color: var(--graphite); }

/* The columns rise in once, one after another, when the section is on screen (scroll-driven where the
   browser supports it; otherwise they are simply there). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .only-col { animation: only-rise linear both; animation-timeline: view(); animation-range: entry calc(5% + var(--i) * 6%) entry calc(45% + var(--i) * 6%); }
    @keyframes only-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  }
}

@media (max-width: 1179.98px) {
  .only-wrap { padding: 88px var(--gutter); }
  .only-cols { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 16px; }
}
@media (max-width: 640px) {
  .only-col { padding: 22px 20px 24px; border-radius: 18px; }
  .only-what { font-size: 22px; line-height: 26px; }
  .only-pair { padding-right: 6px; }
  .only-pair + .only-pair { margin-left: 8px; }
  .only-pair + .only-pair::before { left: -12px; width: 9px; }
}