/* A concrete, readable four-step story. */
.ldx-demo { padding: 88px 0; background: #e9e5f2; border-block: 1px solid #d8d1e7; }
.ldx-demo .ld-section-heading > p { font-size: 17px; max-width: 360px; color: #51495f; }
.ldx-story { background: #fff; border: 1px solid #cec6df; border-radius: 24px; box-shadow: 0 20px 55px -35px #2b175a66; overflow: hidden; }
.ldx-brief { display: flex; align-items: center; gap: 20px; padding: 26px 32px; background: #faf9fd; border-bottom: 1px solid #e6e1ee; }
.ldx-brief-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; background: #ebe6fb; color: #5a4fcf; display: grid; place-items: center; }
.ldx-brief-icon svg { width: 26px; height: 26px; }
.ldx-brief div > span { display: block; font-size: 13px; color: #70657f; margin-bottom: 5px; }
.ldx-brief strong { font-size: 16px; line-height: 1.5; font-weight: 550; color: #211b36; }
.ldx-brief-arrow { color: #5a4fcf; font-size: 24px; margin-inline: 8px; }
.ldx-brief > small { margin-left: auto; padding-left: 18px; font-size: 12px; line-height: 1.6; color: #756980; border-left: 1px solid #ded7e8; flex: none; }
.ldx-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 12px; gap: 8px; border-bottom: 1px solid #e6e1ee; }
.ldx-tabs button { display: flex; align-items: center; gap: 12px; padding: 17px 15px; border-radius: 12px; text-align: left; color: #554c68; border: 1px solid transparent; min-width: 0; }
.ldx-tabs button > span { font-size: 13px; color: #7b6c96; border: 1px solid #dcd4e9; border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; flex: none; }
.ldx-tabs b { font-size: 15px; line-height: 1.4; font-weight: 550; }
.ldx-tabs button:hover { background: #f5f2fb; }
.ldx-tabs button[aria-selected=true] { background: #5a4fcf; color: #fff; border-color: #5a4fcf; box-shadow: 0 5px 14px #5a4fcf25; }
.ldx-tabs button[aria-selected=true] > span { background: #c7f464; border-color: #c7f464; color: #283615; }
.ldx-panel { display: grid; grid-template-columns: .82fr 1.25fr; gap: 48px; padding: 42px; align-items: center; min-height: 560px; }
.ldx-explain { max-width: 390px; }
.ldx-step-label { color: #5a4fcf; font-size: 13px; font-weight: 550; display: block; margin-bottom: 23px; }
.ldx-explain h3 { font-size: 27px; line-height: 1.4; margin: 0 0 22px; }
.ldx-explain > p { font-size: 17px; line-height: 1.75; color: #51495f; }
.ldx-explain .ldx-detail { font-size: 14px; margin-top: 16px; color: #70627f; }
.ldx-takeaway { margin-top: 30px; border-left: 3px solid #9eca4d; padding-left: 18px; }
.ldx-takeaway > span { display: block; color: #70627f; font-size: 13px; margin-bottom: 9px; }
.ldx-takeaway strong { display: block; font-size: 17px; line-height: 1.6; font-weight: 550; color: #211b36; }
.ldx-visual { min-width: 0; background: #f8f6fc; border: 1px solid #ded7eb; border-radius: 18px; padding: 26px; box-shadow: 0 16px 32px -22px #35245340; }
.ldx-visual-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 13px; color: #756789; margin-bottom: 16px; }
.ldx-mini-tag { background: #e4f5c7; color: #39541d; border: 1px solid #c6df9e; padding: 5px 10px; border-radius: 6px; font-size: 12px; flex: none; }
.ldx-visual h4 { font-family: var(--font-body); font-size: 23px; letter-spacing: -.025em; line-height: 1.45; font-weight: 600; }
.ldx-search-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 23px; }
.ldx-search-tags span { font-size: 12px; color: #645378; background: #eee9f8; padding: 7px 9px; border: 1px solid #ded4ee; border-radius: 6px; }
.ldx-candidates { display: grid; gap: 11px; }
.ldx-candidate { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 12px; align-items: center; background: #fff; border: 1px solid #e3deeb; padding: 17px 14px; border-radius: 10px; }
.ldx-company-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: #f1eef6; color: #857592; }
.ldx-company-icon svg { width: 23px; height: 23px; }
.ldx-candidate strong { font-size: 15px; line-height: 1.5; font-weight: 550; }
.ldx-candidate p { font-size: 13px; color: #756b80; margin-top: 4px; }
.ldx-match-status { font-size: 11px; color: #80758d; }
.ldx-match-status i { display: inline-grid; place-items: center; font-style: normal; border-radius: 50%; background: #c7f464; width: 20px; height: 20px; margin-right: 3px; }
.ldx-candidate.is-match { border-color: #b6c982; background: #f8fcee; }
.ldx-candidate.is-match .ldx-match-status { color: #39541d; }
.ldx-candidate.is-match .ldx-company-icon { color: #39541d; background: #e7f2d3; }
.ldx-evidence { padding: 0; background: #fff; overflow: hidden; }
.ldx-publication-head, .ldx-chat-top { display: flex; align-items: center; gap: 12px; padding: 22px 24px; border-bottom: 1px solid #e8e1ef; }
.ldx-monogram { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #ede8f7; color: #5a4fcf; font-size: 14px; font-weight: 600; flex: none; }
.ldx-publication-head strong,.ldx-chat-top strong { display: block; font-size: 16px; font-weight: 600; }
.ldx-publication-head div > span,.ldx-chat-top div > span { display: block; color: #756789; font-size: 12px; margin-top: 5px; line-height: 1.5; }
.ldx-publication-head > span:last-child { font-size: 22px; color: #5a4fcf; margin-left: auto; }
.ldx-build-art { background: #f0ecf8; padding: 10px 20px 0; }
.ldx-build-art svg { display: block; width: 100%; height: auto; }
.ldx-publication-copy { padding: 20px 24px; }
.ldx-publication-copy > span { color: #756789; font-size: 12px; display: block; margin-bottom: 9px; }
.ldx-publication-copy h4 { font-size: 21px; }
.ldx-evidence-notes { display: grid; grid-template-columns: 1fr 1fr; margin: 0 24px 24px; border-top: 1px solid #e4ddec; padding-top: 18px; gap: 20px; }
.ldx-evidence-notes span { font-size: 12px; color: #5a4fcf; font-weight: 550; }
.ldx-evidence-notes p { font-size: 14px; margin-top: 7px; color: #51495f; }
.ldx-conversation { padding: 0; background: #f5f2fa; overflow: hidden; }
.ldx-chat-top { background: #fff; }
.ldx-chat-icon { width: 25px; margin-left: auto; color: #8a78a4; }
.ldx-chat-icon svg { width: 25px; }
.ldx-chat-messages { padding: 22px; display: flex; flex-direction: column; gap: 17px; }
.ldx-bubble { padding: 18px; border-radius: 13px; max-width: 94%; }
.ldx-bubble > span { font-size: 12px; display: block; margin-bottom: 8px; }
.ldx-bubble p { font-size: 16px; line-height: 1.65; }
.ldx-bubble-out { background: #5a4fcf; color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; }
.ldx-bubble-out > span { color: #e5e0ff; }
.ldx-bubble-in { background: #fff; border: 1px solid #e0d9ec; border-bottom-left-radius: 3px; }
.ldx-bubble-in > span { color: #776888; }
.ldx-interest { display: flex; align-items: center; gap: 12px; padding: 5px 0; }
.ldx-interest > span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #c7f464; color: #39541d; flex: none; }
.ldx-interest strong { font-size: 15px; font-weight: 550; }
.ldx-interest p { font-size: 13px; color: #736780; margin-top: 3px; }
.ldx-deal-subtitle { font-size: 15px; color: #756789; margin-top: 7px; }
.ldx-deal dl { margin: 22px 0; }
.ldx-deal dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 15px 0; border-top: 1px solid #e1dbea; font-size: 14px; line-height: 1.6; }
.ldx-deal dt { color: #756789; }.ldx-deal dd { margin: 0; color: #211b36; }
.ldx-next-action { display: flex; align-items: flex-start; gap: 14px; background: #fff; border: 1px solid #bdb0e3; border-radius: 11px; padding: 20px; }
.ldx-next-action img { width: 48px; height: 40px; object-fit: contain; flex: none; }
.ldx-next-action span { display: block; font-size: 12px; color: #5a4fcf; margin-bottom: 7px; }
.ldx-next-action strong { font-size: 16px; line-height: 1.5; font-weight: 550; display: block; }
.ldx-next-action p { font-size: 13px; margin-top: 6px; color: #756789; }
.ldx-demo-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 32px; border-top: 1px solid #e6e1ee; }
.ldx-demo-controls > span { font-size: 14px; color: #756789; }
.ldx-demo-controls > div { display: flex; gap: 10px; }
.ldx-demo-controls button { padding: 12px 17px; border: 1px solid #cfc6df; border-radius: 9px; background: #fff; color: #5a4fcf; min-height: 46px; font-size: 14px; }
.ldx-demo-controls button:disabled { opacity: .4; cursor: default; }
.ldx-demo-controls #demo-next { background: #f0ecfa; display: flex; gap: 26px; align-items: center; }
.ldx-demo-controls #demo-next:hover { background: #e5ddf7; }
@media(max-width:1100px) {
  .ldx-brief { gap: 15px; padding: 24px; }.ldx-brief strong { font-size: 15px; }
  .ldx-tabs button { gap: 9px; padding: 15px 10px; }.ldx-tabs b { font-size: 14px; }
  .ldx-panel { gap: 28px; padding: 32px; grid-template-columns: .8fr 1.2fr; }
  .ldx-explain h3 { font-size: 24px; }.ldx-visual { padding: 22px; }
  .ldx-evidence,.ldx-conversation { padding: 0; }
  .ldx-candidate { grid-template-columns: 32px minmax(0,1fr); }.ldx-match-status { grid-column: 2; }
  .ldx-candidate p { margin-top: 3px; }.ldx-company-icon { width: 32px; height: 32px; }
}
@media(max-width:850px) {
  .ldx-demo { padding: 64px 0; }.ldx-demo .ld-section-heading { display: block; }
  .ldx-demo .ld-section-heading > p { margin-top: 22px; max-width: 580px; }
  .ldx-brief { flex-wrap: wrap; }.ldx-brief-icon { display: none; }.ldx-brief > small { border: 0; padding: 0; width: 100%; margin: 0; }
  .ldx-brief > small br { display: none; }.ldx-brief > small br::after { content: ' '; }
  .ldx-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }.ldx-tabs b { font-size: 16px; }
  .ldx-panel { grid-template-columns: 1fr; gap: 30px; min-height: 0; }
  .ldx-explain { max-width: none; }.ldx-explain h3 { max-width: 540px; font-size: 27px; }
  .ldx-step-label { margin-bottom: 15px; }.ldx-takeaway { margin-top: 20px; }
  .ldx-visual { width: 100%; max-width: 620px; margin: 0 auto; }
  .ldx-candidate { grid-template-columns: 36px minmax(0,1fr) auto; }.ldx-match-status { grid-column: auto; }
}
@media(max-width:540px) {
  .ldx-demo { padding: 48px 0; }.ldx-story { border-radius: 17px; }
  .ldx-demo .ld-section-heading > p { font-size: 16px; }
  .ldx-brief { display: grid; grid-template-columns: 1fr; gap: 13px; padding: 22px; }
  .ldx-brief-arrow { display: none; }.ldx-brief strong { font-size: 16px; }
  .ldx-brief div > span { font-size: 13px; }.ldx-brief > small { font-size: 12px; padding-top: 10px; border-top: 1px solid #e4ddec; }
  .ldx-brief > small br { display: initial; }
  .ldx-tabs { padding: 10px; gap: 6px; }.ldx-tabs button { align-items: flex-start; gap: 8px; padding: 12px 9px; border-color: #e8e2f1; border-radius: 9px; }
  .ldx-tabs button > span { width: 22px; height: 22px; font-size: 11px; }.ldx-tabs b { font-size: 13px; line-height: 1.6; }
  .ldx-panel { padding: 25px 18px; gap: 24px; }.ldx-explain h3 { font-size: 23px; line-height: 1.45; margin-bottom: 16px; }
  .ldx-explain > p { font-size: 16px; }.ldx-takeaway strong { font-size: 16px; }.ldx-step-label { font-size: 12px; }
  .ldx-visual { padding: 19px 15px; border-radius: 13px; }.ldx-visual h4 { font-size: 20px; }.ldx-visual-top { font-size: 12px; gap: 8px; }
  .ldx-mini-tag { font-size: 11px; padding: 5px 8px; }.ldx-search-tags { gap: 6px; }.ldx-search-tags span { font-size: 12px; }
  .ldx-candidate { grid-template-columns: 28px minmax(0,1fr); padding: 14px 12px; gap: 9px; }.ldx-company-icon { width: 28px; height: 28px; }.ldx-company-icon svg { width: 20px; height: 20px; }
  .ldx-candidate strong { font-size: 14px; }.ldx-candidate p { font-size: 13px; }.ldx-match-status { grid-column: 2; font-size: 12px; }
  .ldx-evidence,.ldx-conversation { padding: 0; }.ldx-publication-head,.ldx-chat-top { padding: 17px 15px; gap: 10px; }
  .ldx-monogram { width: 32px; height: 32px; font-size: 12px; }.ldx-publication-head strong,.ldx-chat-top strong { font-size: 15px; }
  .ldx-publication-copy { padding: 18px 15px; }.ldx-publication-copy h4 { font-size: 20px; }
  .ldx-build-art { padding-inline: 0; }.ldx-evidence-notes { margin: 0 15px 20px; grid-template-columns: 1fr; gap: 15px; }
  .ldx-evidence-notes span { font-size: 13px; }.ldx-evidence-notes p { font-size: 15px; margin-top: 5px; }
  .ldx-chat-messages { padding: 17px 12px; gap: 14px; }.ldx-bubble { padding: 15px; max-width: 97%; }.ldx-bubble p { font-size: 15px; }
  .ldx-bubble > span { font-size: 12px; line-height: 1.5; }.ldx-interest strong { font-size: 14px; }.ldx-interest p { font-size: 13px; }.ldx-chat-icon { display: none; }
  .ldx-deal dl > div { grid-template-columns: 1fr; gap: 5px; font-size: 15px; padding: 13px 0; }.ldx-deal dt { font-size: 13px; }.ldx-deal-subtitle { font-size: 14px; }
  .ldx-next-action { display: block; padding: 16px; }.ldx-next-action img { margin-bottom: 10px; }.ldx-next-action strong { font-size: 16px; }
  .ldx-demo-controls { padding: 18px; gap: 12px; flex-wrap: wrap; }.ldx-demo-controls > span { font-size: 13px; }
  .ldx-demo-controls button { font-size: 13px; padding-inline: 14px; }.ldx-demo-controls #demo-next { gap: 15px; }
}
@media(max-width:360px) {
  .ldx-tabs button { flex-direction: column; gap: 7px; }.ldx-tabs b { font-size: 13px; }
  .ldx-panel { padding-inline: 14px; }.ldx-explain h3 { font-size: 21px; }
  .ldx-candidate { grid-template-columns: 1fr; }.ldx-company-icon { display: none; }.ldx-match-status { grid-column: 1; }
  .ldx-demo-controls > div { width: 100%; }.ldx-demo-controls #demo-next { flex: 1; justify-content: space-between; }
}