/* Products directory - unified suite grid (rebuilt 2026-09-14).
   All six products as one 3-up grid of app-icon cards on the dark chrome. */

.prodx-hero { max-width: 1120px; margin: 0 auto; padding: 76px 32px 6px; }
.prodx-eyebrow {
  font-family: var(--body-font); font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text2, #a99fd0); font-weight: 600;
  margin: 0 0 14px;
}
.prodx-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(32px, 5vw, 46px); letter-spacing: -.02em; line-height: 1.04;
  color: var(--text, #eae7f5); margin: 0 0 16px;
}
.prodx-lede {
  font-size: 17px; color: var(--text2, #c3bce0); max-width: 620px;
  line-height: 1.5; margin: 0;
}

.prodx-grid-section { max-width: 1120px; margin: 0 auto; padding: 38px 32px 84px; }
.prodx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.prodx-card {
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px; padding: 26px 24px 20px; display: flex; flex-direction: column;
}
.prodx-tile {
  width: 64px; height: 64px; border-radius: 16px;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 80%, white),
    var(--accent) 52%,
    color-mix(in srgb, var(--accent) 82%, black));
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--accent) 60%, transparent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.prodx-glyph { width: 38px; height: 38px; display: block; }
.prodx-name {
  font-family: var(--display); font-weight: 700; font-size: 21px;
  color: var(--text, #fff); margin: 0 0 5px;
}
.prodx-phrase {
  font-size: 15px; color: var(--text2, #c8c1e4); line-height: 1.4;
  margin: 0 0 16px; flex: 1;
}
.prodx-pills { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.prodx-pill {
  font-size: 11.5px; font-weight: 500; color: var(--text2, #d9d3ef);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  padding: 4px 10px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
a.prodx-pill:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
.prodx-pill.is-static { opacity: .8; }
.prodx-links {
  display: flex; gap: 18px; border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 14px; margin-top: auto;
}
.prodx-links a {
  font-size: 13.5px; color: var(--text2, #b6abe0); font-weight: 500;
  text-decoration: none; transition: color .15s;
}
.prodx-links a:hover { color: var(--text, #fff); }

@media (max-width: 900px) { .prodx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .prodx-grid { grid-template-columns: 1fr; } .prodx-hero { padding-top: 56px; } }