/* Logo cloud — vanilla port of the "logo-cloud-2" React/Tailwind component, in the /app zinc idiom.
   A bordered 12-cell grid (2x6 on mobile, 4x3 on desktop) with a subtle checkerboard, hairlines between
   cells and "+" marks at the inner intersections. Self-contained: every rule is .lc- prefixed and colours
   come from CSS variables (with zinc fallbacks), so it adapts to the host page. */
.lc-section {
  --lc-line: var(--line, #27272a);
  --lc-bg: var(--bg, #09090b);
  --lc-alt: var(--card, #0c0c0e);
  --lc-hover: var(--hover, #18181b);
  --lc-ink: var(--ink, #fafafa);
  --lc-muted: var(--muted, #a1a1aa);
  --lc-plus: var(--line-2, #3f3f46);
  --lc-ring: var(--ring, #d4d4d8);
  position: relative; max-width: 880px; margin: 0 auto; padding: 0 16px;
}
.lc-head { text-align: center; margin: 0 0 32px; }
.lc-kicker { margin: 0 0 12px; font-size: 13px; font-weight: 500; color: var(--lc-muted); }
.lc-title { margin: 0; text-align: center; font-weight: 700; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; letter-spacing: -.03em; color: var(--lc-ink); text-wrap: balance; }
.lc-title b { font-weight: inherit; }
.lc-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--lc-line); border-radius: 8px; overflow: hidden; background: var(--lc-bg); }
.lc-cell { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 28px 16px; background: var(--lc-bg); color: var(--lc-ink);
  font-weight: 500; font-size: 14px; letter-spacing: -.01em; text-decoration: none; transition: background-color .15s ease; }
.lc-cell img { width: 22px; height: 22px; border-radius: 50%; flex: none; pointer-events: none; user-select: none;
  filter: grayscale(1); opacity: .85; transition: filter .2s ease, opacity .2s ease; }
.lc-cell:hover img, .lc-cell:focus-visible img { filter: none; opacity: 1; }
.lc-cell:focus-visible { outline: 2px solid var(--lc-ring); outline-offset: -3px; border-radius: 6px; }
.lc-plus { position: absolute; z-index: 1; width: 21px; height: 21px; color: var(--lc-plus); pointer-events: none; }
.lc-plus.br { right: -11px; bottom: -11px; }
.lc-plus.bl { left: -11px; bottom: -11px; }
.lc-note { margin: 16px auto 0; max-width: 46em; text-align: center; font-size: 13px; color: var(--lc-muted); }

/* 12 cells. mobile: 2 columns x 6 rows. Checkerboard tints cells where (row + col) is even: 1,4,5,8,9,12.
   "+" marks sit on the bottom-right corner of cells 1,3,5,7,9 (the 5 inner intersections). */
.lc-cell:nth-child(odd) { border-right: 1px solid var(--lc-line); }
.lc-cell:nth-child(-n+10) { border-bottom: 1px solid var(--lc-line); }
.lc-cell:is(:nth-child(4n+1), :nth-child(4n)) { background: var(--lc-alt); }
.lc-desk { display: none; }

/* featured cell (Robinhood Chain): full-colour logo and a sub-label */
.lc-feat img { filter: none; opacity: 1; }
.lc-feat > span { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.lc-feat small { font-size: 11px; font-weight: 500; color: var(--lc-muted); letter-spacing: 0; }

@media (min-width: 768px) {
  /* desktop: 4 columns x 3 rows. Checkerboard: 1,3,6,8,9,11. "+" on cells 1,2,3,5,6,7 (6 inner intersections). */
  .lc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lc-cell { padding: 32px 18px; }
  .lc-cell:nth-child(odd) { border-right: 0; }
  .lc-cell:nth-child(-n+10) { border-bottom: 0; }
  .lc-cell:not(:nth-child(4n)) { border-right: 1px solid var(--lc-line); }
  .lc-cell:nth-child(-n+8) { border-bottom: 1px solid var(--lc-line); }
  .lc-cell:is(:nth-child(4n+1), :nth-child(4n)) { background: var(--lc-bg); }
  .lc-cell:is(:nth-child(1), :nth-child(3), :nth-child(6), :nth-child(8), :nth-child(9), :nth-child(11)) { background: var(--lc-alt); }
  .lc-mob { display: none; }
  .lc-desk { display: block; }
}
.lc-grid .lc-cell:hover { background: var(--lc-hover); }
@media (prefers-reduced-motion: reduce) { .lc-cell, .lc-cell img { transition: none; } }

/* landing band spacing */
.lc-band { padding: 96px 0; overflow-x: clip; scroll-margin-top: 8px; }
@media (max-width: 720px) { .lc-band { padding: 64px 0; } }

/* even rows: fixed cell height, single-line names; the featured sub-label becomes a small inline badge */
.lc-cell { min-height: 80px; padding-top: 0; padding-bottom: 0; }
.lc-cell > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-feat > span { flex-direction: row; align-items: center; gap: 6px; line-height: 1.2; }
.lc-feat small { display: none; padding: 1px 6px; border: 1px solid var(--lc-line); border-radius: 6px; font-size: 11px; line-height: 16px; }
@media (max-width: 420px) { .lc-cell { gap: 8px; padding-left: 10px; padding-right: 10px; font-size: 13px; } }
@media (min-width: 768px) {
  .lc-cell { min-height: 88px; padding-top: 0; padding-bottom: 0; }
  .lc-feat small { display: inline-block; }
}