/* ============================================================
   RubySDK introduction page — additions only.
   styles.css (shared with investors.rubysdk.com) carries the
   brand tokens and every base component. Nothing here overrides
   brand colour, type or spacing; these rules only add the three
   components this page needs that the investor page does not:
   the product grid, the compact pipeline, and the contact list.
   ============================================================ */

/* ---- Product grid ---- */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.prod {
  background: linear-gradient(180deg, var(--wash) 0%, #ffffff 82%);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ruby);
  border-radius: 10px;
  padding: 15px 17px;
}
.prod-name {
  display: block;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink);
  margin-bottom: 4px;
}
.prod-line {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---- Compact pipeline rows ---- */
.pipe--compact { gap: 10px; }
.pipe--compact .pipe-item { padding: 14px 17px; }
.pipe--compact .pipe-summary { font-size: 14px; }

/* ---- Contact list on the ruby card ---- */
.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 17px;
}
.contact-list li { margin: 0; }
.contact-list a {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}
.contact-list a:hover { border-bottom-color: #ffffff; }
.contact-name {
  display: block;
  font-weight: 600;
  color: var(--on-dark);
}
.contact-role {
  display: block;
  font-size: 14px;
  color: var(--on-dark-dim);
}

/* ---- Three opportunity cards sit across one row at this page width,
        and the status tag drops under the title rather than crushing it ---- */
.leads { grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); gap: 14px; }
.lead { padding: 16px 17px; }
.lead-top { flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.lead-top h4 { font-size: 16px; flex: 1 1 100%; }
.lead-top .tag { flex: 0 0 auto; }

/* ---- Hero headline sits a little tighter on this page ---- */
.hero h1 { max-width: 20ch; }

@media (max-width: 560px) {
  .hero h1 { max-width: none; }
}