/* Progressive enhancement for the three readable, interactive product stories. */
.feature-interactive { height: 320px; min-width: 0; padding: 22px; border: 1px solid transparent; transition: border-color 300ms ease, box-shadow 300ms ease; }
.feature-interactive.feature-is-active { border-color: #d4d1e4; box-shadow: 0 8px 28px #35305108; }
.feature-interactive button { font-family: Inter, Arial, sans-serif; letter-spacing: -.25px; touch-action: manipulation; }
.feature-interactive button:focus-visible, .feature-chat-stream:focus-visible { outline: 2px solid #5b4ef5; outline-offset: 4px; }
.feature-interactive button:active { transform: scale(.98); }
.visual-chat.feature-interactive { justify-content: flex-start; gap: 14px; padding: 20px 18px; }
.feature-chat-stream { display: flex; flex: 1; min-height: 0; flex-direction: column; align-items: flex-start; gap: 14px; overflow-y: auto; overflow-x: hidden; padding: 3px 5px 7px 2px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c8ccbe transparent; }
.feature-message { width: fit-content; max-width: 92%; flex: 0 0 auto; border: 1px solid #e3e6df; border-radius: 14px 14px 14px 3px; padding: 13px 15px; background: #fff; color: #3f4639; font-size: 16px; line-height: 1.5; letter-spacing: -.25px; overflow-wrap: anywhere; }
.feature-message-out { align-self: flex-end; border-color: #dfe6c8; border-radius: 14px 14px 3px 14px; background: #e8edce; }
.feature-chat-next { align-self: center; flex: 0 0 auto; min-height: 39px; padding: 8px 18px; border: 1px solid #dce1d3; border-radius: 100px; background: #fff; color: #4b5441; font-size: 14px; line-height: 1.4; font-weight: 500; }
.visual-followup.feature-interactive { gap: 15px; }
.feature-task { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 14px 15px; border: 1px solid #e3e5de; border-radius: 12px; background: #fff; color: #52594b; text-align: left; font-size: 16px; line-height: 1.35; transition: background 220ms ease, border-color 220ms ease; }
.feature-task-check { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 auto; border: 1.5px solid #c3cabc; border-radius: 50%; color: #fff; font-size: 15px; line-height: 1; background: #fff; }
.feature-task[aria-checked=true] { border-color: #d7dfc3; background: #f8faef; color: #586341; }
.feature-task[aria-checked=true] .feature-task-check { background: #8a9b58; border-color: #8a9b58; }
.feature-task-label { min-width: 0; }
.visual-pipeline.feature-interactive { justify-content: center; align-items: stretch; gap: 0; padding: 25px 22px; }
.feature-stage-label { align-self: flex-start; max-width: 100%; padding: 8px 13px; border: 1px solid #dedbea; border-radius: 100px; background: #ebe8f6; color: #6c609e; font-size: 15px; line-height: 1.35; white-space: nowrap; }
.visual-pipeline[data-stage='3'] .feature-stage-label { background: #e6ecd5; color: #657a35; border-color: #d7e1be; }
.visual-pipeline.feature-interactive > .feature-deal-name { margin: 18px 0; font-family: Manrope, Inter, sans-serif; font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: -1px; }
.feature-stage-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 0 0 20px; }
.feature-stage-progress > span { height: 7px; border-radius: 4px; background: #dfe3e9; transform-origin: left; }
.feature-stage-progress > span.is-filled { background: #8e82cb; }
.visual-pipeline[data-stage='3'] .feature-stage-progress > span.is-filled { background: #9caf63; }
.feature-stage-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.feature-stage-button { min-width: 0; min-height: 37px; padding: 7px 6px; border: 1px solid #dde1e8; border-radius: 9px; color: #6d7280; background: #ffffffb3; font-size: 14px; line-height: 1.25; font-weight: 450; }
.feature-stage-button[aria-pressed=true] { color: #68599e; border-color: #c8c0e0; background: #f0edf9; }
.visual-pipeline[data-stage='3'] .feature-stage-button[aria-pressed=true] { color: #687946; background: #edf1e2; border-color: #ccd7b5; }
.feature-motion-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .feature-chat-next:hover { background: #f5f7ef; border-color: #bfc8b0; }
  .feature-task:hover { border-color: #bdc8a7; background: #f5f8ea; }
  .feature-stage-button:hover { background: #f4f1fb; border-color: #c3b8e2; }
}
@media (min-width: 621px) and (max-width: 1000px) {
  .feature-interactive { padding: 16px; height: 330px; }
  .visual-chat.feature-interactive { padding: 16px 12px; }
  .feature-message { padding: 11px 12px; font-size: 15px; max-width: 96%; }
  .feature-chat-next { padding: 8px 10px; font-size: 14px; }
  .feature-task { min-height: 70px; padding: 12px 10px; gap: 9px; font-size: 15px; }
  .feature-task-check { width: 23px; height: 23px; }
  .visual-pipeline.feature-interactive { padding: 20px 16px; }
  .visual-pipeline.feature-interactive > .feature-deal-name { font-size: 25px; }
  .feature-stage-controls { gap: 7px; }
  .feature-stage-button { min-height: 46px; padding: 7px 4px; font-size: 14px; }
}
@media (max-width: 620px) {
  .feature-interactive { height: 325px; padding: 27px; }
  .visual-chat.feature-interactive { padding: 24px; gap: 16px; }
  .feature-message { max-width: 92%; padding: 13px 16px; font-size: 17px; }
  .feature-chat-next { font-size: 15px; }
  .feature-task { min-height: 66px; padding: 16px; font-size: 17px; gap: 14px; }
  .feature-task-check { width: 26px; height: 26px; }
  .visual-pipeline.feature-interactive { padding: 28px; }
  .visual-pipeline.feature-interactive > .feature-deal-name { font-size: 33px; margin: 20px 0; }
  .feature-stage-label { font-size: 16px; }
  .feature-stage-controls { gap: 9px; }
  .feature-stage-button { min-height: 40px; font-size: 15px; }
}
@media (max-width: 380px) {
  .feature-interactive { padding: 20px; }
  .visual-chat.feature-interactive { padding: 18px; }
  .feature-message { font-size: 16px; padding: 12px 14px; }
  .feature-task { padding: 13px 11px; gap: 11px; font-size: 16px; }
  .visual-pipeline.feature-interactive { padding: 24px 20px; }
  .visual-pipeline.feature-interactive > .feature-deal-name { font-size: 28px; }
  .feature-stage-button { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-interactive, .feature-interactive * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Each story keeps a distinct color family. */
.visual-chat.feature-interactive { background: #eaf2ff; border-color: #dce8fa; }
.visual-chat.feature-is-active { border-color: #aec9ef; box-shadow: 0 8px 28px #386ea010; }
.feature-chat-stream { scrollbar-color: #adc5e8 transparent; }
.feature-message { background: #fff; border-color: #d4e0f4; color: #394d6e; }
.feature-message-out { background: #cfe1ff; border-color: #bfd4f3; color: #28466f; }
.feature-chat-next { color: #3d6294; border-color: #c5d7ef; }
.visual-followup.feature-interactive { background: #fff0de; border-color: #f2dfc6; }
.visual-followup.feature-is-active { border-color: #dfbc88; box-shadow: 0 8px 28px #bb80200d; }
.feature-task { background: #fffdfa; border-color: #eddbc3; color: #775c3b; }
.feature-task-check { border-color: #d6b986; }
.feature-task[aria-checked=true] { background: #fff9ed; border-color: #e8c695; color: #8e6224; }
.feature-task[aria-checked=true] .feature-task-check { background: #d39a3a; border-color: #d39a3a; }
.visual-pipeline.feature-interactive { background: #eeebf8; border-color: #dfd8ee; transition: background-color 420ms ease, border-color 300ms ease, box-shadow 300ms ease; }
.visual-pipeline.feature-is-active { border-color: #bdb0dd; box-shadow: 0 8px 28px #6549ad0c; }
.feature-stage-label { background: #e0d9f1; border-color: #d3c8e8; color: #6b5193; }
.feature-stage-progress > span { background: #dcd7e9; }
.feature-stage-progress > span.is-filled { background: #9682ca; }
.feature-stage-button { color: #7a6a96; border-color: #d7cde8; background: #faf8ff; }
.feature-stage-button[aria-pressed=true] { color: #69489c; border-color: #b6a1d7; background: #e3daf3; }
.visual-pipeline.feature-interactive[data-stage='3'] { background: #eaf2df; border-color: #d2dfbd; }
.visual-pipeline[data-stage='3'] .feature-stage-button { color: #687b4c; border-color: #d2debe; background: #f9fcf4; }
.visual-pipeline[data-stage='3'] .feature-stage-button[aria-pressed=true] { color: #526b31; background: #dce9c5; border-color: #bacd9b; }
.feature-grid[data-input='keyboard'] .feature-interactive button { transition: none; }
.feature-grid[data-input='keyboard'] .feature-interactive button:active { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .feature-chat-next:hover { background: #f5f9ff; border-color: #9fbee6; }
  .feature-task:hover { background: #fff6e6; border-color: #d9b781; }
  .feature-stage-button:hover { background: #e8dff6; border-color: #b7a3d6; }
  .visual-pipeline[data-stage='3'] .feature-stage-button:hover { background: #e5efd6; border-color: #b5c99a; }
}
@media (prefers-reduced-motion: reduce) {
  .visual-pipeline.feature-interactive { transition: none; }
}