/* Connectors directory. Same tokens as the legal pages so the whole site
   reads as one thing. */

:root {
  --ink: #0A0A0A;
  --ink-2: #404040;      /* 10.4:1 on white */
  --ink-3: #595959;      /*  7.0:1 on white */
  --ink-4: #6B6B6B;      /*  5.3:1 on white */
  --rule: #E6E6E6;
  --rule-strong: #D4D4D4;
  --surface: #FFFFFF;
  --surface-2: #FAFAFA;
  --focus: #1F3B60;
  --sans: 'SF Pro Display', 'SF Pro Text', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  --gutter: clamp(20px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
}

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 16px; top: 16px; z-index: 100;
  transform: translateY(-200%);
  padding: 12px 20px; min-height: 44px;
  display: inline-flex; align-items: center;
  background: var(--ink); color: #FFFFFF; border-radius: 999px;
  font-size: 15px; font-weight: 500; text-decoration: none;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- Header ---------- */

.site-header { border-bottom: 1px solid var(--rule); background: var(--surface); }
.site-header__inner {
  max-width: 1400px; margin: 0 auto; padding: 20px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.wordmark { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.wordmark img { width: 96px; height: auto; display: block; }

.call-link {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 10px 20px;
  border: 1.5px solid var(--ink); border-radius: 999px;
  color: var(--ink); font-size: 15px; font-weight: 500;
  letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  transition: background 220ms, color 220ms;
}
.call-link span { font-family: var(--mono); font-size: 13px; color: var(--ink-4); }
.call-link:hover { background: var(--ink); color: #FFFFFF; }
.call-link:hover span { color: #FFFFFF; }

/* ---------- Page head ---------- */

.page-head {
  max-width: 1400px; margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(28px, 4vw, 40px);
  border-bottom: 1px solid var(--rule);
}
.eyebrow {
  margin: 0 0 14px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4);
}
.page-head h1 {
  margin: 0; font-size: clamp(34px, 5vw, 56px); font-weight: 600;
  letter-spacing: -.03em; line-height: 1.04; text-wrap: balance;
}
.page-head h1 span { color: #A3A3A3; }
.page-head p {
  margin: 18px 0 0; max-width: 60ch; color: var(--ink-2);
  font-size: clamp(16px, 1.8vw, 18px); text-wrap: pretty;
}

/* ---------- Layout ---------- */

.layout {
  max-width: 1400px; margin: 0 auto;
  padding: clamp(24px, 3vw, 40px) var(--gutter) clamp(56px, 7vw, 96px);
  display: grid; gap: clamp(24px, 3vw, 48px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) { .layout { grid-template-columns: 248px minmax(0, 1fr); } }

/* ---------- Category rail ---------- */

.cats { border: 1px solid var(--rule); border-radius: 16px; background: var(--surface-2); padding: 8px 16px; }
.cats > summary {
  min-height: 44px; display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); list-style: none;
}
.cats > summary::-webkit-details-marker { display: none; }
.cats > summary::after {
  content: ''; margin-left: auto; width: 9px; height: 9px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 200ms cubic-bezier(.2,.8,.2,1);
}
.cats[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.cats ul { margin: 0; padding: 4px 0 12px; list-style: none; }

.cat-btn {
  width: 100%; min-height: 34px; display: flex; align-items: center; gap: 10px;
  padding: 3px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 14px; line-height: 1.3;
  color: var(--ink-3); text-align: left;
}
/* Tight enough to read as one list with a mouse, but back to a full-size
   target wherever the pointer is a finger. */
@media (pointer: coarse) {
  .cat-btn { min-height: 44px; padding: 8px 0; }
}
/* One line per category, clipped rather than wrapped, so the rail stays an
   even rhythm of rows. The full name is still in the DOM for assistive tech
   and on the title attribute for everyone else. */
.cat-btn .t {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-btn .n {
  margin-left: auto; font-family: var(--mono); font-size: 12px;
  color: var(--ink-4); font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.cat-btn:hover { color: var(--ink); }
.cat-btn[aria-pressed='true'] { color: var(--ink); font-weight: 600; }
.cat-btn[aria-pressed='true'] .n { color: var(--ink); }

@media (min-width: 900px) {
  .cats { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; }
  .cats > summary { cursor: default; }
  .cats > summary::after { display: none; }
}

.rail-foot { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-3); }
.rail-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--focus); font-weight: 500; }

/* ---------- Controls ---------- */

.controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.search { position: relative; flex: 1 1 280px; min-width: 0; }
.search input {
  width: 100%; height: 52px; padding: 0 20px 0 46px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--surface);
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  outline: none; transition: border-color 200ms, box-shadow 200ms;
}
.search input::placeholder { color: var(--ink-4); }
.search input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(76,142,79,.12); }
.search svg { position: absolute; left: 18px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; color: var(--ink-4); pointer-events: none; }

.sortwrap { position: relative; flex: 0 0 auto; }
.sortwrap select {
  height: 52px; padding: 0 44px 0 20px; min-width: 180px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--surface);
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  appearance: none; cursor: pointer; outline: none;
  transition: border-color 200ms;
}
.sortwrap select:focus { border-color: var(--ink); }
.sortwrap::after {
  content: ''; position: absolute; right: 20px; top: 45%; width: 8px; height: 8px;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg); translate: 0 -50%; pointer-events: none;
}

.count {
  margin: 24px 0 16px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}

/* ---------- Grid ---------- */

.grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.card {
  /* 1607 cards live in this document; skipping layout and paint for the ones
     off screen is what keeps scrolling smooth. */
  content-visibility: auto;
  contain-intrinsic-size: auto 191px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px;
  /* room for the worst case: logo row, a two-line name and two lines of copy */
  min-height: 191px;
  border: 1px solid var(--rule); border-radius: 16px; background: var(--surface);
  transition: border-color 200ms, box-shadow 200ms, translate 200ms cubic-bezier(.2,.8,.2,1);
}
/* display:flex above would otherwise beat the browser's [hidden] rule, and
   filtering would set the attribute without anything disappearing. */
.card[hidden] { display: none; }
.card:hover {
  border-color: var(--rule-strong); translate: 0 -2px;
  box-shadow: 0 10px 24px -16px rgba(10,10,10,.35);
}
.card__logo {
  width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  background: var(--surface-2); overflow: hidden; flex: 0 0 auto;
}
.card__logo img { width: 28px; height: 28px; object-fit: contain; display: block; }
/* Stands in for a logo that fails to load, so a gap never looks like a bug. */
.card__logo b {
  font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase;
}
/* Names run to two lines before they clip. The height for a second line is
   held on the card rather than here, so a one-line name sits against its
   description instead of leaving a hole in the middle of the card. */
.card h3 {
  margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Two lines, then an ellipsis. Reserving the height for both keeps the cards
   on an even baseline whether the copy is long or short. */
.card p {
  margin: 0; color: var(--ink-3); font-size: 14px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(2 * 1.45em);
}
/* The availability sits on the logo's row rather than under the copy: it
   reads at a glance and costs the card no extra height. */
.card__top { display: flex; align-items: center; gap: 10px; }
.card__top .badge { margin-left: auto; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
}
.badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px;
  background: #4C8E4F; flex: 0 0 auto;
}

.empty { padding: 56px 0; color: var(--ink-3); }
.empty strong { color: var(--ink); }

/* ---------- Pagination ---------- */

.pager {
  margin-top: 36px; display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
}
.pager button {
  min-height: 44px; min-width: 44px; padding: 0 16px;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--surface);
  font-family: var(--mono); font-size: 14px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink); cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color 200ms, background 200ms, color 200ms;
}
.pager button.num { padding: 0 12px; text-transform: none; }
.pager button:hover:not(:disabled):not(.is-current) { border-color: var(--ink); }
.pager button:disabled { color: var(--ink-4); cursor: default; opacity: .5; }
/* The page you are on is the one solid thing in the row. */
.pager button.is-current {
  background: var(--ink); border-color: var(--ink); color: #FFFFFF; cursor: default;
}
.pager .gap {
  min-width: 20px; text-align: center; color: var(--ink-4);
  font-family: var(--mono); font-size: 14px;
}

/* ---------- CTA ---------- */

.cta {
  max-width: 1400px; margin: 0 auto clamp(56px, 7vw, 96px);
  padding: clamp(32px, 5vw, 56px) var(--gutter);
}
.cta__inner {
  border-radius: 24px; background: #0A0A0A; color: #FFFFFF;
  padding: clamp(32px, 5vw, 64px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
}
.cta h2 { margin: 0 0 10px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.025em; line-height: 1.08; text-wrap: balance; }
.cta p { margin: 0; color: #A3A3A3; max-width: 46ch; text-wrap: pretty; }
.cta__btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 28px;
  border-radius: 999px; background: #FFFFFF; color: #0A0A0A; text-decoration: none;
  font-size: 16px; font-weight: 500; white-space: nowrap;
  transition: translate 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms;
}
.cta__btn:hover { translate: 0 -2px; box-shadow: 0 14px 28px -16px rgba(0,0,0,.6); }
.cta__btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--rule); }
.site-footer__inner {
  max-width: 1400px; margin: 0 auto; padding: 24px var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--ink-4);
}
.site-footer img { width: 96px; height: auto; display: block; }
.site-footer ul { margin: 0; padding: 0; list-style: none; display: flex; gap: 8px 24px; flex-wrap: wrap; align-items: center; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-4); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

@media (forced-colors: active) {
  .card, .cats, .search input, .sortwrap select, .pager button { border: 1px solid CanvasText; }
}