/* Readable labels and details for the two interactive workflow diagrams. */
:is(.growth-showcase, .workflow-showcase) {
  --diagram-ink: #29323e;
  --diagram-muted: #5b6572;
  --diagram-border: #cbd2da;
  --diagram-connector: #84909e;
  border-color: #d8dde3;
}

:is(.growth-showcase, .workflow-showcase) .showcase-top {
  color: var(--diagram-ink);
  flex-wrap: wrap;
  row-gap: 8px;
}
:is(.growth-showcase, .workflow-showcase) .showcase-top > span:first-child {
  font-size: 14px;
  font-weight: 600;
}
:is(.growth-showcase, .workflow-showcase) .showcase-top .micro {
  color: var(--diagram-muted);
  font-size: 12px;
  letter-spacing: .5px;
}
:is(.growth-showcase, .workflow-showcase) .showcase-foot {
  color: var(--diagram-muted);
  border-color: var(--diagram-border);
  font-size: 12px;
  line-height: 1.6;
}
:is(.growth-showcase, .workflow-showcase) .status-dot {
  background: #587260;
  width: 5px;
  height: 5px;
}

.growth-showcase .growth-prompt {
  border-color: var(--diagram-border);
}
.growth-showcase .growth-prompt p {
  color: var(--diagram-ink);
  font-size: 14px;
  line-height: 1.5;
}
.growth-showcase .prompt-star,
.growth-showcase .prompt-enter { color: #596675; }
.growth-showcase .demo-tabs { border-color: var(--diagram-border); }
.growth-showcase .demo-tabs button {
  color: var(--diagram-muted);
  font-size: 13px;
  font-weight: 500;
  border-bottom-width: 2px;
}
.growth-showcase .demo-tabs button[aria-pressed=true] {
  color: #1f2732;
  border-bottom-color: #29323e;
  font-weight: 600;
}
.growth-showcase .demo-tabs button:hover { color: #1f2732; }
.growth-showcase .growth-content { min-height: 242px; }
.growth-showcase .list-heading {
  color: var(--diagram-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .5px;
  line-height: 1.5;
}
.growth-showcase .prospect-row {
  min-height: 63px;
  border-color: #dce1e6;
}
.growth-showcase .company-avatar {
  color: #485565;
  border-color: var(--diagram-border);
  font-size: 12px;
}
.growth-showcase .prospect-row strong,
.growth-showcase .research-profile strong {
  color: var(--diagram-ink);
  font-size: 14px;
  font-weight: 600;
}
.growth-showcase .prospect-row small,
.growth-showcase .research-profile p {
  color: var(--diagram-muted);
  font-size: 12px;
  line-height: 1.5;
}
.growth-showcase .research-profile > div { min-width: 0; }
.growth-showcase .research-profile p { overflow-wrap: anywhere; }
.growth-showcase .fit-pill {
  color: #405c48;
  background: #edf3ef;
  border-color: #c3d1c7;
  font-size: 12px;
}
.growth-showcase .research-line {
  font-size: 12px;
  line-height: 1.6;
  border-color: #dce1e6;
}
.growth-showcase .research-line > span { color: var(--diagram-muted); }
.growth-showcase .research-line strong {
  color: #364251;
  font-weight: 500;
}
.growth-showcase .outreach .micro {
  color: var(--diagram-muted);
  font-size: 12px;
  letter-spacing: .5px;
}
.growth-showcase .outreach strong {
  color: var(--diagram-ink);
  font-size: 14px;
  font-weight: 600;
}
.growth-showcase .outreach p {
  color: #4d5a6a;
  font-size: 13px;
}
.growth-showcase .review-note {
  color: #45614d;
  font-size: 12px;
  line-height: 1.5;
}

.workflow-showcase .workflow-top-row > span {
  color: #3e4b5c;
  border-color: var(--diagram-border);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  height: auto;
  min-height: 46px;
  padding: 10px 6px;
}
.workflow-showcase .connector-lines::before {
  border-color: var(--diagram-connector);
}
.workflow-showcase .connector-lines > span {
  background: var(--diagram-connector);
}
.workflow-showcase .connector-single {
  border-color: var(--diagram-connector);
}
.workflow-showcase .ai-node {
  width: 85%;
  border-color: #b8c2cf;
}
.workflow-showcase .ai-node > svg { color: #3e4b5c; }
.workflow-showcase .ai-node > div { min-width: 0; }
.workflow-showcase .ai-node strong {
  color: var(--diagram-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.workflow-showcase .ai-node > div > span {
  color: var(--diagram-muted);
  font-size: 12px;
  line-height: 1.5;
}
.workflow-showcase .node-dot {
  flex-shrink: 0;
  background: #587260;
  box-shadow: 0 0 0 4px #e9efeb;
}
.workflow-showcase .approval-node {
  color: #455365;
  background: #fff;
  border-color: var(--diagram-border);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}
.workflow-showcase .workflow-bottom-row {
  border-color: var(--diagram-connector);
}
.workflow-showcase .workflow-bottom-row > span {
  color: #455365;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}

@media (max-width: 540px) {
  :is(.growth-showcase, .workflow-showcase) .showcase-top > span:first-child {
    font-size: 13px;
  }
  .growth-showcase .growth-prompt p { font-size: 12px; }
  .growth-showcase .demo-tabs button { font-size: 12px; }
  .growth-showcase .prospect-row strong,
  .growth-showcase .research-profile strong { font-size: 13px; }
  .growth-showcase .prospect-row small { font-size: 12px; }
  .growth-showcase .fit-pill { padding: 4px 6px; }
  .workflow-showcase .workflow-top-row > span,
  .workflow-showcase .workflow-bottom-row > span { font-size: 12px; }
  .workflow-showcase .ai-node strong { font-size: 13px; }
  .workflow-showcase .ai-node > div > span { font-size: 12px; }
  .workflow-showcase .approval-node { font-size: 12px; }
}