/* Products hub: the site's own spectrum, and each product card wears its
   product's accent. Layout lives in /product.css. */

.suite-page {
  --accent: #06b6d4;
  --accent-rgb: 6 182 212;
  --accent-2: #ec4899;
  --accent-3: #f59e0b;
  --accent-ink: #041217;
  --accent-hover: #6ae9ff;
}

.lineup { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lineup .aram { --c: 255 177 0; }
.lineup .bunnie { --c: 178 255 89; }
.lineup .vandelay { --c: 90 169 255; }
.lineup .lenz { --c: 255 79 123; }
.lineup .sheekbot { --c: 145 70 255; }
/* An odd card out spans the row instead of sitting alone in it. */
.lineup li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.lineup a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  backdrop-filter: blur(14px);
  text-decoration: none;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.lineup a:hover, .lineup a:focus-visible {
  border-color: rgb(var(--c) / 0.6);
  box-shadow: 0 0 40px rgb(var(--c) / 0.1) inset;
  transform: translateY(-3px);
}
.lineup h3 { margin-top: 18px; font-size: clamp(24px, 2.4vw, 32px); color: rgb(var(--c)); }
.lineup p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: #c9cde0; flex: 1; }
.lineup .go { margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.lineup a:hover .go { color: var(--text); }

@media (max-width: 720px) {
  .lineup { grid-template-columns: 1fr; }
}