/* Card 3 — Establish Rapport and Transition. Card-specific components on top of
   the shared foundation template (sales-foundation.css + card-1-foundation.css +
   card-1-polish.css): the Rapport & Transition Map (6 cards), the reusable
   weak/manager-ready compare block, and the Operating Truth hook-band label. */

/* Rapport & Transition Map — 6 cards, each a discipline + its inspection question. */
.rt-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.rt-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfaf7;
}
.rt-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.rt-head span {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
}
.rt-head strong { color: var(--navy); font-size: 1.02rem; line-height: 1.15; }
.rt-card p { margin: 0; color: var(--slate); font-size: .94rem; line-height: 1.45; }

/* Reusable compare block — weak vs manager-ready transition. */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
.compare .col { padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); }
.compare .weak { background: #fbf3f1; border-color: rgba(176, 58, 46, .22); }
.compare .ready { background: var(--navy); border-color: var(--navy); }
.compare .tag {
  display: inline-flex;
  margin-bottom: 8px;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.compare .weak .tag { color: #b03a2e; }
.compare .ready .tag { color: rgba(255, 255, 255, .72); }
.compare .col p { margin: 0; font-weight: 700; line-height: 1.5; }
.compare .weak p { color: var(--navy); }
.compare .ready p { color: #fff; }

/* Operating Truth label inside the shared hook-band. */
.hook-band .hook-eyebrow {
  margin: 0 0 8px;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

@media (max-width: 900px) {
  .rt-map { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .compare { grid-template-columns: 1fr; }
}