/* between case study — additions on top of hearbat.css + atlas.css */

.case__cover--between {
  background-image: url("images/between-hero.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Problem cards: one row, white fill + gray stroke */
#problem .opps {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 600px) {
  #problem .opps { grid-template-columns: 1fr; }
}
#problem .opp {
  background: #fff;
  border: 1px solid var(--line, #d1d1d1);
}

/* Solution features: numbered text list, no containers */
#solution .opps {
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  row-gap: 40px;
  align-items: start;
}
@media (max-width: 600px) {
  #solution .opps { grid-template-columns: 1fr; }
}
#solution .opp {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* ---------- Solution feature mockups ---------- */

/* 03 — Send a drift: action buttons */
.drift-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
}
.drift-btn {
  display: inline-flex;
  align-items: stretch;
  background: #fff;
  border: 2px solid #1b1b1b;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, .4);
  font-family: var(--font-sans);
  color: #1b1b1b;
}
.drift-btn__icon {
  display: grid;
  place-items: center;
  width: 50px;
  border-right: 2px solid #1b1b1b;
  color: #1b1b1b;
}
.drift-btn__icon svg { width: 20px; height: 20px; }
.drift-btn__icon--pink { background: #e8bfe0; }
.drift-btn__icon--mint { background: #cbefe7; }
.drift-btn__label {
  display: flex;
  align-items: center;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 700;
}

/* 04 — Echo of the day: prompt card */
.echo-card {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 2px solid #1b1b1b;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, .4);
  margin-top: 18px;
}
.echo-card__avatars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  border-right: 2px solid #1b1b1b;
  flex: none;
}
.echo-avatar {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
}
.echo-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 11px;
  object-fit: cover;
  border: 2px solid #1b1b1b;
  background: #fff;
}
.echo-avatar__badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
}
.echo-avatar__badge svg { width: 9px; height: 9px; }
.echo-avatar__badge--ok { background: #43b95f; }
.echo-avatar__badge--no { background: #e23b3b; }
.echo-card__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 16px 18px;
}
.echo-card__q {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.28;
  color: #1b1b1b;
  margin: 0 0 6px;
}
.echo-card__sub {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-mute);
  margin: 0 0 8px;
}
.echo-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: auto;
}
.echo-card__btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: #8f8f8f;
  background: #f0f0f0;
  border: 1.5px solid #d2d2d2;
  border-radius: 12px;
  padding: 7px 15px;
}
.echo-card__btn--answer {
  color: #1b1b1b;
  font-weight: 700;
  background: #b8e986;
  border: 2px solid #1b1b1b;
}

/* 05 — Partner's presence: watch shot */
.watch-shot {
  margin-top: 18px;
}
.watch-shot img {
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
}

/* Prototype walkthrough video — Between phone dimensions + corner radius */
.proto-video__el {
  aspect-ratio: 540 / 1126;
  border-radius: 46px;
}