.watch-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 68px);
  padding: clamp(24px, 4vw, 48px);
  margin-bottom: clamp(40px, 6vw, 72px);
  background: #f3f6fb;
  border: 1px solid #dce5f2;
  border-radius: 12px;
}
.watch-story .eyebrow { margin-bottom: 12px; }
.watch-story h2 {
  margin-bottom: 16px;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.12;
  letter-spacing: -.04em;
}
.watch-story .watch-copy { margin-bottom: 18px; color: #4b5e77; }
.watch-demo { margin: 0; }
.watch-demo-panel {
  padding: clamp(12px, 2.5vw, 20px);
  border-radius: 9px;
  background: #10223d;
  color: #fff;
}
.watch-demo-heading { margin-bottom: 12px; font-size: .88rem; font-weight: 650; }
.watch-demo-screen {
  position: relative;
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 126px;
  aspect-ratio: 16 / 8;
  padding: 38px 16px 20px;
  border-radius: 5px;
  background: #e8effb;
  color: #10223d;
  text-align: center;
}
.watch-demo-screen > strong {
  font-size: clamp(21px, 2.7vw, 32px);
  line-height: 1.15;
  letter-spacing: -.035em;
}
.watch-demo-screen > span:not(.watch-rec) { font-size: .8rem; color: #415675; }
.watch-rec {
  position: absolute;
  inset: 10px 10px auto auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid #555962;
  border-radius: 999px;
  background: #171a20;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
}
.watch-rec::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff404e;
}
.watch-demo figcaption { margin-top: 8px; font-size: .76rem; color: #4b5e77; }
@media (max-width: 680px) {
  .watch-story { grid-template-columns: minmax(0, 1fr); }
}