/* Career-only: no table/rack or native layout overrides. */
.encounter-offer,
.encounter-payoff {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px;
  margin: 20px 0;
  border: 1px solid var(--line, #d8cbb5);
  border-radius: 10px;
  background: #fcf7ec;
  color: #263b34;
}
.encounter-offer > div,
.encounter-payoff > div {
  min-width: 0;
  flex: 1;
}
.encounter-offer img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid #cec399;
  background: #dce8cf;
}
.encounter-offer p {
  margin: 4px 0 0;
}
.encounter-offer button {
  align-self: center;
}
.encounter-tile {
  object-fit: contain;
  flex: 0 0 54px;
}
.encounter-payoff h2 {
  font-size: clamp(23px, 3vw, 30px);
  margin: 6px 0 12px;
}
.encounter-payoff .eyebrow,
.encounter-offer .eyebrow {
  color: #6b5637;
}
@media (max-width: 599px) {
  .encounter-offer {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }
  .encounter-offer img {
    width: 42px;
    height: 42px;
  }
  .encounter-offer button {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .encounter-payoff {
    padding: 16px;
    gap: 12px;
  }
  .encounter-tile {
    width: 36px;
    height: 48px;
    flex-basis: 36px;
  }
}