/* Product agents: a clear introduction followed by controls native to the page. */
.agent-demo-section {
  --demo-ink: #14213b;
  --demo-muted: #59677d;
  --demo-blue: #0769e8;
  padding: clamp(64px, 8vw, 112px) 0 64px;
  background: linear-gradient(180deg, #faf9f6 0%, #f6f9fd 58%, #f8fafc 100%);
  color: var(--demo-ink);
  scroll-margin-top: 96px;
}
.agent-introduction { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 90px); align-items: center; margin-bottom: 48px; }
.agent-demo-eyebrow { display: block; color: var(--demo-muted); font-size: 12px; line-height: 1.6; font-weight: 500; }
.agent-introduction h2 { margin: 12px 0 20px; color: var(--demo-ink); font-size: clamp(44px, 5.5vw, 72px); font-weight: 600; line-height: 1.05; letter-spacing: -.055em; }
.agent-demo-period { color: var(--demo-blue); }
.agent-introduction__tagline { margin: 0 0 20px; font-size: clamp(22px, 2.6vw, 32px); font-weight: 500; line-height: 1.25; letter-spacing: -.035em; }
.agent-introduction__description { max-width: 470px; margin: 0; color: var(--demo-muted); font-size: 15px; line-height: 1.8; }
.agent-capability-card { min-width: 0; padding: 28px 30px 10px; border: 1px solid #e0e6ef; border-radius: 24px; background: #ffffffd9; box-shadow: 0 12px 36px -18px #233d642b, inset 0 1px 0 #fff; }
.agent-capability-card__person { display: flex; gap: 18px; align-items: center; padding-bottom: 23px; border-bottom: 1px solid #e8edf4; }
.agent-capability-card__person img { display: block; width: 64px; height: 64px; border-radius: 18px; object-fit: cover; object-position: 50% 30%; background: #edf3fb; }
.agent-capability-card__person h3 { margin: 5px 0 0; font-size: 19px; letter-spacing: -.025em; font-weight: 600; color: var(--demo-ink); }
.agent-capabilities { list-style: none; padding: 0; margin: 0; }
.agent-capabilities li { display: flex; gap: 15px; align-items: flex-start; margin: 0; padding: 20px 0; }
.agent-capabilities li + li { border-top: 1px solid #edf1f6; }
.agent-capability-check { display: grid; place-items: center; flex: 0 0 25px; height: 25px; margin-top: 1px; border-radius: 50%; background: #e9f2ff; color: #0867de; font-size: 14px; font-weight: 600; }
.agent-capabilities strong { display: block; font-size: 15px; line-height: 1.5; font-weight: 600; }
.agent-capabilities p { margin: 5px 0 0; color: var(--demo-muted); font-size: 13px; line-height: 1.65; }
.agent-demo-disclosure { max-width: 850px; margin: 20px auto 0; color: var(--demo-muted); text-align: center; font-size: 11px; line-height: 1.8; }
@media (max-width: 800px) {
  .agent-introduction { grid-template-columns: 1fr; gap: 28px; margin-bottom: 30px; }
  .agent-introduction__description { max-width: 600px; }
  .agent-capability-card { padding: 24px 24px 6px; }
}
@media (max-width: 500px) {
  .agent-demo-section { padding-block: 54px 40px; }
  .agent-demo-section > .offers-wrap { width: min(100% - 28px, 1180px); }
  .agent-introduction__copy { padding-inline: 6px; }
  .agent-capability-card { padding: 20px 20px 4px; border-radius: 20px; }
  .agent-capability-card__person { gap: 13px; }
  .agent-capability-card__person .agent-demo-eyebrow { font-size: 10px; }
  .agent-capability-card__person h3 { font-size: 17px; }
}