/*
 * Demo page (/demo/): an interactive walkthrough. Four scripted examples show
 * the customer's chat beside the steps Studio takes behind it. demo.js plays
 * the selected example; without it every example is shown in its final state.
 * Tokens and hp-* chat components come from public.css.
 */

.dm-hero { padding-bottom: clamp(28px, 2.6vw, 42px); }
.dm-hero .pg-hero__lead { max-width: 46em; }
.dm-console { max-width: 78em; margin: 12px auto 0; font-size: clamp(13px, .86vw, 16.5px); }
.dm-console .hp-tabs { margin-bottom: 14px; font-size: 1rem; }

/* Heading rhythm shared with pricing / solutions / services. */
.demo-page .hp-eyebrow, .demo-page .hp-kicker { letter-spacing: .18em; }
.demo-page .hp-head { gap: 12px; }
.demo-page .hp-h2 { line-height: 1.5; }
.demo-page main .hp-section { padding-top: clamp(40px, 4vw, 64px); padding-bottom: clamp(40px, 4vw, 64px); }

/* Console type on pricing's scale — 14 / 13 / 12 / 11px, weights 400 / 500 only.
   The chat components are shared with the homepage, so these stay scoped to /demo/. */
.demo-page .dm-console .hp-msg { font-size: 13px; line-height: 1.6; letter-spacing: 0; }
.demo-page .dm-console .hp-product__info strong { font-size: 13px; }
.demo-page .dm-console .hp-product__meta b { font-size: 14px; font-weight: 500; }
.demo-page .dm-result__head strong { font-size: 14px; }
.demo-page .dm-board__title span:first-child { font-weight: 500; }
.demo-page .dm-pane__label { font-size: 11px; letter-spacing: .12em; }

.dm-board { overflow: hidden; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); background: #fff; box-shadow: 0 3px 14px rgba(49, 67, 48, .024); }
.dm-board__bar { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .8em 1.1em .8em 1.35em; border-bottom: 1px solid var(--hp-line-soft); background: #fbfcfa; }
.dm-board__title { display: flex; align-items: center; gap: .6em; margin: 0; color: var(--hp-muted); font-size: max(12px, .86em); }
.dm-board__title span:first-child { color: var(--hp-ink); font-family: var(--hp-num); font-weight: 600; }
.dm-board__title span + span::before { content: "/"; margin-right: .6em; color: #c3ccc5; }
.dm-replay { display: inline-flex; align-items: center; gap: .45em; min-height: 2.4em; padding: 0 .95em; border: 1px solid #d9e4df; border-radius: 8px; color: #415e52; background: #fff; font: inherit; font-size: max(12px, .84em); font-weight: 500; cursor: pointer; transition: border-color .18s ease, color .18s ease; }
.dm-replay .hp-ico { font-size: 1.05em; }
.dm-replay:hover { border-color: #9fc8b8; color: var(--hp-jade-deep); }
.dm-replay:focus-visible { outline: 2px solid #31866f; outline-offset: 2px; }
.dm-replay:disabled { opacity: .55; cursor: default; }
.dm-replay[hidden] { display: none; }

.dm-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .86fr); }
.dm-panel[hidden] { display: none; }
.hp-js .dm-console:not(.is-ready) .dm-panel + .dm-panel { display: none; }
.dm-pane { display: grid; align-content: start; gap: 1em; padding: 1.4em 1.5em 1.5em; }
.dm-pane + .dm-pane { border-left: 1px solid var(--hp-line-soft); background: #fcfdfb; }
.dm-pane__label { margin: 0; color: var(--hp-label); font-size: max(12px, .76em); letter-spacing: .14em; }
.dm-chat { display: grid; align-content: start; gap: .8em; min-height: 23.5em; }
.dm-chat .hp-msg { max-width: 84%; }
.dm-pane .hp-chat__input { margin: 0; }
.dm-trace { --hp-flow-gap: 1.2em; }
.dm-trace .hp-flow__step small code, .dm-code { padding: .1em .45em; border-radius: 5px; color: var(--hp-jade-deep); background: var(--hp-tint); font-size: max(12px, .95em); }
.dm-code { display: inline-block; margin-top: .45em; font-family: var(--hp-mono); font-size: max(12px, .74em); }
.dm-rows { display: grid; gap: .35em; margin: .5em 0 0; padding: 0; list-style: none; }
.dm-rows li { display: flex; justify-content: space-between; gap: .8em; padding: .35em .6em; border: 1px solid var(--hp-line-soft); border-radius: 7px; color: var(--hp-text); background: #fff; font-size: max(12px, .74em); }
.dm-rows code { color: var(--hp-ink); font-size: max(12px, .96em); }

/* Result cards returned into the chat. */
.dm-result { width: 100%; padding: .95em 1.05em 1em; border: 1px solid var(--hp-line); border-radius: 12px; background: #fff; }
.dm-result__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin-bottom: .95em; color: var(--hp-faint); font-size: max(12px, .78em); }
.dm-result__head strong { color: var(--hp-ink); font-size: 1.16em; font-weight: 500; }
.dm-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.dm-steps li { position: relative; display: grid; gap: .2em; padding: 1.25em .5em 0 0; }
.dm-steps li::before { content: ""; position: absolute; top: .3em; left: 0; right: 0; height: 2px; background: var(--hp-line); }
.dm-steps li::after { content: ""; position: absolute; top: 0; left: 0; width: .62em; height: .62em; border: 2px solid #fff; border-radius: 50%; background: #9fc5b6; box-shadow: 0 0 0 1px #9fc5b6; }
.dm-steps li.is-done::before { background: #b5d5c8; }
.dm-steps li.is-current::after { background: var(--hp-jade); box-shadow: 0 0 0 1px var(--hp-jade); }
.dm-steps strong { color: var(--hp-ink); font-size: max(12px, .9em); font-weight: 500; }
.dm-steps small { color: var(--hp-faint); font-family: var(--hp-num); font-size: max(12px, .74em); font-variant-numeric: tabular-nums; }
.dm-table { width: 100%; border-collapse: collapse; font-size: max(12px, .8em); }
.dm-table th, .dm-table td { padding: .5em .4em; border-bottom: 1px solid var(--hp-line-soft); text-align: left; white-space: nowrap; }
.dm-table th { color: var(--hp-faint); font-weight: 400; }
.dm-table td { color: var(--hp-text); font-variant-numeric: tabular-nums; }
.dm-table tr:last-child td { border-bottom: 0; }
.dm-table .is-best td { color: var(--hp-ink); font-weight: 500; }
.dm-table__item { display: inline-flex; align-items: center; gap: .6em; }
.dm-table__item img { flex: none; width: 2.3em; height: 2.3em; padding: 3%; border-radius: 6px; background: #eef2ee; object-fit: contain; }
.dm-table .is-best .dm-table__item img { box-shadow: 0 0 0 1.5px var(--hp-jade); }
/* The earlier turn that introduced the three bags, so "这三款" has something to refer to. */
.dm-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; width: 100%; margin: 0; padding: 0; list-style: none; }
.dm-picks li { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: .15em .6em; padding: .5em .6em .5em .5em; border: 1px solid var(--hp-line); border-radius: 10px; background: #fff; font-size: max(12px, .8em); }
.dm-picks img { grid-row: 1 / 3; display: block; width: 3.4em; height: 3.4em; padding: 5%; border-radius: 7px; background: #eef2ee; object-fit: contain; }
.dm-picks strong { display: -webkit-box; align-self: end; overflow: hidden; color: var(--hp-ink); font-weight: 500; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dm-picks li > span { align-self: start; color: var(--hp-text); font-family: var(--hp-num); font-variant-numeric: tabular-nums; }
.dm-list { display: grid; gap: .5em; margin: 0; padding: 0; list-style: none; }
.dm-list li { display: flex; align-items: center; gap: .6em; color: var(--hp-text); font-size: max(12px, .9em); }
.dm-list .hp-ico { color: var(--hp-jade); stroke-width: 1.8; }
.dm-source { display: flex; align-items: center; gap: .5em; margin: .95em 0 0; padding-top: .8em; border-top: 1px dashed var(--hp-line); color: var(--hp-muted); font-size: max(12px, .76em); }
.dm-source .hp-ico { color: var(--hp-icon); font-size: 1.15em; }
.dm-note { margin: 8px 0 0; color: var(--hp-faint); font-size: max(12px, .78em); text-align: center; }

/* Playback: demo.js adds .is-on step by step; without it everything stays visible. */
.hp-js .dm-panel [data-at] { transition: opacity .45s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.hp-js .dm-panel [data-at]:not(.is-on) { opacity: 0; transform: translateY(6px); }
.hp-js .dm-panel .hp-flow__step[data-at]:not(.is-on) { opacity: 0; transform: none; }
.hp-js .dm-panel .hp-flow__step[data-at].is-run { opacity: 1; }
.hp-js .dm-panel .hp-flow__step[data-at]:not(.is-on) .hp-hits i::before { width: 0; }
.hp-js .dm-console:not(.is-ready) [data-at] { animation: hp-show .01s 2.5s forwards; }
.dm-console:not(.is-animated) .dm-panel [data-until] { display: none; }
.dm-console.is-static [data-at] { opacity: 1 !important; transform: none !important; }

/* ---------- Next steps: two choice cards, drawn like the pricing plan cards ---------- */
.dm-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 78em; margin: 0 auto; font-size: clamp(13px, .86vw, 16.5px); }
.dm-path { display: grid; grid-template-rows: auto auto 1fr auto; align-content: start; justify-items: start; gap: 0; padding: 29px 28px 27px; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); background: #fff; box-shadow: 0 3px 14px rgba(49, 67, 48, .024); }
/* The recommended path carries the same jade border as pricing's featured plan. */
.dm-path--trial { border-color: #a4cebf; background: #fff; }
.demo-page .dm-path h3 { margin: 0; font-family: var(--hp-serif); font-size: 28px; font-weight: 500; line-height: 1.4; }
/* Card rhythm from the pricing card: title→intro 10px, list rows 14px apart, 16px line icons. */
.dm-path > p { margin: 10px 0 0; color: var(--hp-muted); font-size: 13px; line-height: 1.75; }
.dm-path .hp-checks { gap: 14px; margin: 24px 0 0; }
.dm-path .hp-checks li { color: #4e5850; font-size: 14px; line-height: 1.6; }
.dm-path .hp-checks .hp-ico { width: 16px; height: 16px; margin-top: 3px; color: #7e978c; stroke-width: 1.5; }
.dm-path .hp-btn { width: 100%; min-height: 46px; margin-top: 26px; }

@media (max-width: 1080px) {
  .dm-panel { grid-template-columns: minmax(0, 1fr); }
  .dm-pane + .dm-pane { border-top: 1px solid var(--hp-line-soft); border-left: 0; }
  .dm-chat { min-height: 0; }
}
@media (max-width: 760px) {
  .dm-paths { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .dm-console { font-size: 13px; }
  .dm-pane { padding: 1.1em 1em 1.2em; }
  .dm-board__title span:first-child { display: none; }
  .dm-board__title span + span::before { display: none; }
  .dm-table th:nth-child(4), .dm-table td:nth-child(4) { display: none; }
  /* Three picks side by side leave too little room for the name beside the photo. */
  .dm-picks li { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: .55em .45em .6em; text-align: center; }
  .dm-picks img { grid-row: auto; width: 4.4em; height: 4.4em; }
  .dm-picks strong { display: block; }
  .dm-picks strong span { display: inline-block; }
  .dm-path .hp-btn { width: 100%; }
}