/*
 * Lemon AI STUDIO public pages: shared layer.
 * Used by the homepage and the product, solutions, demo, services and docs pages
 * (body.site-page). Pricing, login and registration keep their own styles.
 * Editorial language of the pricing page: serif 500 headings, warm neutral ink,
 * hairline surfaces, sage line icons and a sparing jade accent.
 * Load after site.css and brand.css. hp-* classes are the shared components;
 * each page adds its own stylesheet for page-specific pieces.
 */

body.site-page {
  --hp-ink: #2c302d;
  --hp-text: #4e5850;
  --hp-muted: #6d726e;
  --hp-faint: #8b938c;
  --hp-label: #608174;
  --hp-icon: #7e978c;
  --hp-jade: #23836b;
  --hp-jade-deep: #1c705b;
  --hp-button: var(--brand-button, #01c8af);
  --hp-button-hover: var(--brand-button-hover, #04bfa7);
  --hp-button-active: var(--brand-button-active, #04a893);
  --hp-line: #e2e7e2;
  --hp-line-soft: #edf0eb;
  --hp-canvas: #fcfdfb;
  --hp-wash: #f5f7f3;
  --hp-tint: #eef5f0;
  --hp-serif: "Lemon Editorial Serif", "Songti SC", "Noto Serif SC", serif;
  --hp-sans: "Lemon Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --hp-num: "Lemon Latin", "Lemon Sans SC", "PingFang SC", sans-serif;
  --hp-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Lemon Sans SC", monospace;
  --hp-radius: 14px;
  --hp-shadow: 0 3px 14px rgba(49, 67, 48, .03);
  --hp-shadow-float: 0 1px 2px rgba(49, 67, 48, .04), 0 22px 48px -26px rgba(49, 67, 48, .2);
  --hp-gutter: clamp(20px, 5.2vw, 150px);
  --hp-max: 1680px;
  --hp-section: clamp(64px, 6.2vw, 124px);
  /* Type scale — anchored to the pricing page so every public page matches it.
     pricing: H1 clamp(28,2.5vw,35) · block H2 ~24-25 · card name 28 · body 14 · label 11. */
  --hp-fs-display: clamp(28px, 2.5vw, 35px);   /* page hero title (h1) */
  --hp-fs-h1: clamp(26px, 2.2vw, 32px);        /* inner-page hero title */
  --hp-fs-h2: clamp(22px, 1.9vw, 25px);        /* section title */
  --hp-fs-h3: clamp(17px, 1.3vw, 19px);        /* card / sub heading */
  --hp-fs-lead: clamp(14px, .95vw, 15px);      /* hero lead / subtitle */
  --hp-fs-body: clamp(14px, .9vw, 15px);
  --hp-fs-small: clamp(13px, .82vw, 14px);
  --hp-fs-label: clamp(11px, .72vw, 12px);
  color: var(--hp-text);
  background: var(--hp-canvas);
  font-family: var(--hp-sans);
}

/* One container width for the whole public site: header, page body and footer
   all share the same left and right edge, so the logo, the first heading and
   the footer logo sit on one vertical line. */
body.site-page .container,
body.site-page main .container,
body.site-page .site-header .container,
body.site-page .site-footer .container { width: min(var(--hp-max), calc(100% - var(--hp-gutter) * 2)); }
:where(body.site-page) :where(h1, h2, h3) { margin: 0; color: var(--hp-ink); text-wrap: balance; }
body.site-page :is(h1, h2, .hp-h2, .hp-h1) { font-family: var(--hp-serif); font-weight: 500; }
body.site-page h3 { font-family: var(--hp-sans); font-weight: 500; letter-spacing: 0; }
/* Headline phrases stay whole; lines break between them, never mid-word. */
body.site-page :is(.hp-phrases, .hp-h2, .public-trial h2) > span { display: inline-block; }
/* Short lines break at punctuation or spaces; a run that cannot fit still wraps. */
body.site-page :is(.hp-keep, .hp-msg, .hp-lead, .hp-checks li, .public-trial p) { word-break: keep-all; overflow-wrap: anywhere; }
body.site-page :is(h1, h2, h3) { word-break: keep-all; overflow-wrap: anywhere; }
/* Page copy is short and punctuated: break at punctuation or spaces, avoid orphans.
   Long-form prose (docs) opts back into normal breaking. */
:where(body.site-page main) :is(p, li, dd, dt, small, figcaption) { word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
:where(body.site-page) img { display: block; max-width: 100%; }
:where(body.site-page) code { font-family: var(--hp-mono); }

body.site-page .site-header { background: rgba(255, 255, 255, .96); border-bottom-color: #e8ece7; }
body.site-page .site-header.is-scrolled { box-shadow: 0 8px 24px rgba(49, 67, 48, .055); }
body.site-page .site-header .site-shell { min-height: 76px; }
body.site-page .site-header .site-nav { color: #555d57; font-size: 14px; font-weight: 600; }
body.site-page .site-header .site-nav a:hover { border-color: #c4ded3; }
body.site-page .brand { font-size: 18px; }
body.site-page .site-header .btn { min-height: 40px; padding: 0 16px; border-radius: 9px; font-size: 13px; }
body.site-page .site-footer { color: var(--hp-muted); border-color: var(--hp-line); background: #fff; }
body.site-page .site-footer__group a { color: #555d57; }
body.site-page .site-footer__bottom { border-color: var(--hp-line-soft); color: #7b847c; }

/* ---------- Shared pieces ---------- */
.hp-ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hp-section { padding: var(--hp-section) 0; }
.hp-section--white { border-block: 1px solid var(--hp-line-soft); background: #fff; }
.pg-hero + .hp-section--white, .hp-section--white + .public-trial-section { border-top: 0; }
.hp-head { display: grid; gap: clamp(12px, 1vw, 18px); max-width: 880px; margin-bottom: clamp(32px, 3.2vw, 60px); }
.hp-head--center { justify-items: center; margin-inline: auto; text-align: center; }
.hp-eyebrow, .hp-kicker { display: inline-flex; align-items: center; margin: 0; color: var(--hp-label); font-size: 11px; font-weight: 400; letter-spacing: .18em; line-height: 1.5; }
.hp-eyebrow span + span::before { content: ""; display: inline-block; width: 1px; height: .9em; margin: 0 .95em; vertical-align: -.1em; background: #c9d6ce; }
.hp-h2 { font-size: var(--hp-fs-h2); line-height: 1.42; }
.hp-lead { max-width: 38em; margin: 0; color: var(--hp-muted); font-size: var(--hp-fs-lead); line-height: 1.85; }
.hp-link { display: inline-flex; align-items: center; gap: .4em; color: var(--hp-jade); font-size: var(--hp-fs-body); font-weight: 500; white-space: nowrap; transition: color .18s ease; }
.hp-link .hp-ico { transition: transform .18s ease; }
.hp-link:hover { color: var(--hp-jade-deep); }
.hp-link:hover .hp-ico { transform: translateX(2px); }

.hp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: clamp(44px, 2.85vw, 54px); padding: 0 clamp(20px, 1.5vw, 30px); border: 1px solid transparent; border-radius: 10px; font: inherit; font-size: clamp(14px, .9vw, 17px); font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: border-color .18s ease, color .18s ease, background-color .18s ease; }
.hp-btn .hp-ico { font-size: 1.05em; transition: transform .18s ease; }
/* The button green is the logo teal, which is light: type on it is ink, not white. */
.hp-btn--primary { color: var(--brand-button-ink, #ffffff); background: var(--hp-button); }
.hp-btn--secondary { color: #415e52; border-color: #d9e4df; background: #fff; }
@media (hover: hover) and (pointer: fine) {
  .hp-btn--primary:hover { background: var(--hp-button-hover); }
  .hp-btn--primary:hover .hp-ico { transform: translateX(2px); }
  .hp-btn--secondary:hover { color: var(--hp-jade-deep); border-color: #a9cdbd; background: #f6faf7; }
}
.hp-btn--primary:active { background: var(--hp-button-active); }
.hp-btn--secondary:active { background: #eff6f2; }
.hp-btn:disabled { cursor: progress; filter: saturate(.7) brightness(1.05); }
:is(.hp-btn, .hp-tab, .hp-link):focus-visible { outline: 2px solid #31866f; outline-offset: 3px; }

.hp-checks { display: grid; gap: clamp(10px, .9vw, 16px); margin: 0 0 clamp(24px, 2.2vw, 40px); padding: 0; list-style: none; }
.hp-checks li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7em; color: var(--hp-text); font-size: var(--hp-fs-body); line-height: 1.7; }
.hp-checks .hp-ico { margin-top: .32em; color: var(--hp-jade); stroke-width: 1.8; }

/* Framed product screen. */
.hp-screen { margin: 0; overflow: hidden; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); background: #fff; box-shadow: var(--hp-shadow-float); }
.hp-screen__bar { display: flex; align-items: center; gap: .6em; height: clamp(34px, 2.3vw, 44px); padding: 0 clamp(14px, 1.1vw, 20px); border-bottom: 1px solid var(--hp-line-soft); color: var(--hp-muted); background: #fbfcfa; font-size: var(--hp-fs-label); }
.hp-screen__bar span:first-child { color: var(--hp-ink); font-family: var(--hp-num); font-weight: 500; }
.hp-screen__bar span + span::before { content: "/"; margin-right: .6em; color: #c3ccc5; }

/* Segmented tabs. */
.hp-tabs { display: flex; gap: 3px; width: fit-content; max-width: 100%; margin: 0 auto clamp(26px, 2.6vw, 48px); padding: 4px; border: 1px solid var(--hp-line); border-radius: 999px; background: #f0f3f1; }
.hp-tab { position: relative; min-height: clamp(34px, 2.3vw, 42px); padding: 0 clamp(16px, 1.4vw, 28px); border: 0; border-radius: 999px; color: var(--hp-muted); background: transparent; font: inherit; font-size: clamp(13px, .85vw, 16px); white-space: nowrap; cursor: pointer; transition: background-color .16s ease, color .16s ease; }
.hp-tab:not([aria-selected="true"]):hover { color: var(--hp-ink); }
.hp-tab[aria-selected="true"] { color: var(--hp-jade-deep); background: #fff; box-shadow: 0 1px 4px rgba(49, 67, 48, .07); }
.hp-tabs.is-auto .hp-tab[aria-selected="true"]::after { content: ""; position: absolute; right: 1.2em; bottom: 5px; left: 1.2em; height: 1px; background: rgba(35, 131, 107, .45); transform-origin: left; animation: hp-progress var(--hp-auto, 7s) linear forwards; }

/* Hairline grid: cells separated by 1px rules; item counts must fill every row. */
.hp-grid { display: grid; grid-template-columns: repeat(var(--hp-cols, 3), minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); background: var(--hp-line-soft); list-style: none; }
.hp-grid > * { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; column-gap: clamp(12px, .9vw, 16px); row-gap: .4em; padding: clamp(22px, 2vw, 38px) clamp(20px, 1.9vw, 36px); background: #fff; }
.hp-grid .hp-ico { grid-row: span 2; margin-top: .1em; color: var(--hp-icon); font-size: clamp(18px, 1.2vw, 22px); }
.hp-grid strong { color: var(--hp-ink); font-size: clamp(15px, 1vw, 19px); font-weight: 500; line-height: 1.5; }
.hp-grid p { margin: 0; color: var(--hp-muted); font-size: var(--hp-fs-small); line-height: 1.75; }

/* ---------- Conversation mock: chat window and the Studio steps behind it ---------- */
.hp-chat { overflow: hidden; border: 1px solid rgba(44, 48, 45, .08); border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(44, 48, 45, .04), 0 10px 24px -14px rgba(44, 48, 45, .14), 0 40px 72px -44px rgba(30, 86, 66, .24); }
.hp-chat__bar { display: flex; align-items: center; gap: .8em; padding: 1em 1.2em .95em; border-bottom: 1px solid var(--hp-line-soft); background: #fff; }
.hp-chat__avatar { display: grid; flex: none; place-items: center; width: 2.35em; height: 2.35em; border: 1px solid #dcebe3; border-radius: 11px; color: var(--hp-jade); background: #f1f8f4; }
.hp-chat__avatar .hp-ico { font-size: 1.1em; }
.hp-chat__title { display: grid; flex: 1; gap: .18em; min-width: 0; }
.hp-chat__title strong { display: flex; align-items: center; gap: .5em; color: var(--hp-ink); font-size: max(12px, .96em); font-weight: 500; }
.hp-chat__tag { padding: .12em .5em; border-radius: 999px; color: var(--hp-jade-deep); background: var(--hp-tint); font-size: max(12px, .72em); font-weight: 500; letter-spacing: .02em; }
.hp-chat__title small { display: inline-flex; align-items: center; gap: .4em; color: var(--hp-faint); font-size: max(12px, .74em); }
.hp-chat__title small::before { content: ""; width: .42em; height: .42em; border-radius: 50%; background: #3fa37f; box-shadow: 0 0 0 .18em rgba(63, 163, 127, .16); }
.hp-chat__more { display: inline-flex; flex: none; gap: .2em; padding: .5em .2em; }
.hp-chat__more i { width: .24em; height: .24em; border-radius: 50%; background: #b6bfb8; }
.hp-chat__body { display: grid; align-content: start; gap: .75em; padding: 1.25em 1.2em 1.05em; }
.hp-msg { max-width: 84%; margin: 0; padding: .66em .95em; border-radius: 16px; font-size: max(12px, .96em); line-height: 1.65; letter-spacing: .005em; }
.hp-msg--user { justify-self: end; border-bottom-right-radius: 5px; color: #fff; background: var(--hp-button); box-shadow: 0 1px 2px rgba(40, 110, 88, .14); }
.hp-msg--ai { justify-self: start; border-bottom-left-radius: 5px; color: #3c443e; background: #f3f5f2; }
.hp-msg--ai b { color: var(--hp-ink); font-weight: 500; }
.hp-reply { position: relative; display: grid; }
.hp-reply .hp-msg { max-width: 92%; }
.hp-dots { position: absolute; top: 0; left: 0; display: inline-flex; gap: .3em; padding: .95em 1.05em; border-radius: 16px 16px 16px 5px; background: #f3f5f2; }
.hp-dots i { width: .4em; height: .4em; border-radius: 50%; background: #a9b6ad; animation: hp-dot 1.2s ease-in-out infinite; }
.hp-dots i:nth-child(2) { animation-delay: .15s; }
.hp-dots i:nth-child(3) { animation-delay: .3s; }
.hp-product { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85em; max-width: 92%; padding: .65em .75em .65em .65em; border: 1px solid rgba(44, 48, 45, .08); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(44, 48, 45, .04), 0 6px 16px -10px rgba(44, 48, 45, .12); }
.hp-product__img { display: grid; place-items: center; width: 3.9em; height: 3.9em; overflow: hidden; border-radius: 10px; color: #5d7a6c; background: #eef2ee; }
.hp-product__img .hp-ico { font-size: 2em; stroke-width: 1.3; }
.hp-product__img img { display: block; width: 100%; height: 100%; padding: 6%; object-fit: contain; }
.hp-product__info { display: grid; gap: .28em; min-width: 0; }
.hp-product__info strong { overflow: hidden; color: var(--hp-ink); font-size: max(12px, .94em); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.hp-product__spec { overflow: hidden; color: var(--hp-muted); font-size: max(12px, .74em); text-overflow: ellipsis; white-space: nowrap; }
.hp-product__meta { display: flex; align-items: baseline; gap: .6em; }
.hp-product__meta b { color: var(--hp-ink); font-family: var(--hp-num); font-size: 1.05em; font-weight: 600; font-variant-numeric: tabular-nums; }
.hp-product__meta small { color: var(--hp-faint); font-size: max(12px, .72em); font-variant-numeric: tabular-nums; }
.hp-product__cta { padding: .38em .85em; border-radius: 999px; color: var(--hp-jade-deep); background: var(--hp-tint); font-size: max(12px, .76em); font-weight: 500; white-space: nowrap; }
.hp-chat__input { display: flex; align-items: center; gap: .7em; margin: 0 1.2em 1.15em; padding: .38em .38em .38em 1.1em; border: 1px solid transparent; border-radius: 999px; color: #9aa29c; background: #f3f5f2; font-size: max(12px, .9em); transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease; }
.hp-chat__input.has-text { border-color: #b9d8cb; background: #fff; box-shadow: 0 0 0 3px rgba(35, 131, 107, .07); }
.hp-chat__input [data-hp-typing] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-chat__input .is-typing { color: var(--hp-ink); }
.hp-chat__input .is-typing::after { content: ""; display: inline-block; width: 1px; height: 1.1em; margin-left: 2px; vertical-align: -.2em; background: var(--hp-jade); animation: hp-caret 1s steps(1) infinite; }
.hp-chat__send { display: grid; flex: none; place-items: center; width: 2.15em; height: 2.15em; border-radius: 50%; color: #fff; background: #c7d1ca; }
.hp-chat__input.has-text .hp-chat__send, .hp-stage.is-static .hp-chat__send, .dm-console.is-static .hp-chat__send, html:not(.hp-js) .hp-chat__send { background: var(--hp-button); }
.hp-chat__send .hp-ico { font-size: 1em; stroke-width: 2; transform: rotate(-90deg); }

.hp-flow { padding: 1.05em 1.15em 1.2em; border: 1px solid rgba(44, 48, 45, .08); border-radius: 16px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 2px rgba(44, 48, 45, .04), 0 18px 40px -26px rgba(44, 48, 45, .2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hp-flow__head { margin: 0 0 1em; padding-bottom: .8em; border-bottom: 1px solid var(--hp-line-soft); color: var(--hp-label); font-size: max(12px, .76em); letter-spacing: .12em; }
.hp-flow__list { --hp-flow-gap: 1.05em; position: relative; display: grid; gap: var(--hp-flow-gap); margin: 0; padding: 0; list-style: none; }
.hp-flow__list::before { content: ""; position: absolute; top: 1em; bottom: 1em; left: .95em; width: 1px; background: var(--hp-line); }
.hp-flow__step { position: relative; display: grid; grid-template-columns: 1.9em minmax(0, 1fr); align-items: start; gap: .75em; }
.hp-flow__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 1.9em; height: 1.9em; border: 1px solid var(--hp-line); border-radius: 50%; color: var(--hp-icon); background: #fff; transition: border-color .4s ease, color .4s ease; }
.hp-flow__icon .hp-ico { font-size: 1em; }
.hp-flow__step strong { display: block; padding-top: .22em; color: var(--hp-ink); font-size: max(12px, .9em); font-weight: 500; }
.hp-flow__step small { display: block; margin-top: .25em; color: var(--hp-muted); font-size: max(12px, .76em); font-variant-numeric: tabular-nums; }
.hp-flow__chips { display: flex; flex-wrap: wrap; gap: .3em; margin-top: .45em; }
.hp-flow__chips i { padding: .14em .6em; border-radius: 999px; color: #4a5a50; background: #f0f4f1; font-size: max(12px, .74em); font-style: normal; }
.hp-hits { display: grid; gap: .5em; margin: .5em 0 0; padding: 0; list-style: none; }
.hp-hits li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3em .6em; font-size: max(12px, .76em); }
.hp-hits span { overflow: hidden; color: var(--hp-text); text-overflow: ellipsis; white-space: nowrap; }
.hp-hits b { color: var(--hp-ink); font-family: var(--hp-num); font-weight: 500; font-variant-numeric: tabular-nums; }
.hp-hits i { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 3px; background: var(--hp-line-soft); }
.hp-hits i::before { content: ""; display: block; width: var(--w); height: 100%; border-radius: inherit; background: #5fa58c; transition: width .9s cubic-bezier(.2, .8, .2, 1); }

/* ---------- Inner-page hero ---------- */
/* Page hero head, matched to the pricing heading: eyebrow 51px below the top bar,
   eyebrow→title and title→lead as on pricing, and the same glow. The glow has a fixed
   size (pricing's glow fills a 1216×212 box), so a taller hero doesn't stretch it. */
.pg-hero { padding: 51px 0 clamp(52px, 5vw, 104px); border-bottom: 1px solid var(--hp-line-soft); background-color: var(--hp-canvas); background-image: radial-gradient(860px 300px at 50% 0, #eef7df 0, transparent 68%); background-repeat: no-repeat; }
.pg-hero__head { display: grid; justify-items: center; max-width: 64em; margin: 0 auto; text-align: center; }
.pg-hero h1 { margin: 15px 0 12px; font-size: var(--hp-fs-display); line-height: 1.5; }
.pg-hero__lead { max-width: 40em; margin: 0; color: var(--hp-muted); font-size: var(--hp-fs-lead); line-height: 1.8; word-break: keep-all; overflow-wrap: anywhere; }
.pg-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(24px, 2.1vw, 40px); }

/* ---------- Closing block: the shared public-trial component, scaled up ---------- */
body.site-page .public-trial-section { padding: clamp(48px, 5vw, 100px) 0; border-top: 1px solid var(--hp-line-soft); }
body.site-page .public-trial { gap: clamp(28px, 3vw, 64px); padding: clamp(28px, 2.6vw, 52px) clamp(28px, 2.8vw, 56px); }
body.site-page .site-footer__group > span { font-size: var(--hp-fs-label); }
body.site-page .public-trial__label { margin-bottom: 12px; font-size: var(--hp-fs-label); font-weight: 400; letter-spacing: .16em; }
body.site-page .public-trial h2 { font-size: clamp(23px, 1.8vw, 25px); line-height: 1.5; }
body.site-page .public-trial p { max-width: 46em; margin-top: 12px; font-size: var(--hp-fs-body); line-height: 1.8; }
body.site-page .public-trial .btn { min-height: clamp(44px, 2.85vw, 54px); padding: 0 clamp(20px, 1.5vw, 30px); font-size: clamp(14px, .9vw, 17px); }
body.site-page .public-trial__action small { margin-top: 12px; font-size: var(--hp-fs-label); }
body.site-page .public-trial__action small a { color: #648474; }
body.site-page .public-trial__action small a:hover { color: var(--hp-jade); }

/* ---------- Scroll reveal (only after public.js opts in) ---------- */
.hp-reveal [data-reveal] { transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.hp-reveal [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(14px); }

/* ---------- Chat demo playback (chat-demo.js) ----------
   Before the question is sent the Studio panel shows only its header and a
   waiting line. Steps are added one at a time: each runs (ring + "处理中"),
   then completes (filled icon, check, details). The panel grows downwards. */
.hp-flow__bar { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.hp-flow__status { display: inline-flex; flex: none; align-items: center; gap: .45em; padding: .22em .65em; border-radius: 999px; color: var(--hp-muted); background: #f1f3f0; font-size: max(12px, .92em); letter-spacing: .02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hp-flow__status::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: #b3bdb6; }
.hp-flow__status[data-state="run"] { color: var(--hp-jade-deep); background: var(--hp-tint); }
.hp-flow__status[data-state="run"]::before { background: var(--hp-jade); animation: hp-breathe 1.2s ease-in-out infinite; }
.hp-flow__status[data-state="done"] { color: var(--hp-jade-deep); background: var(--hp-tint); }
.hp-flow__status[data-state="done"]::before { width: .55em; height: .3em; border: solid var(--hp-jade); border-width: 0 0 1.5px 1.5px; border-radius: 0; background: none; transform: translateY(-.12em) rotate(-45deg); }
.hp-flow__idle { position: absolute; display: none; align-items: center; gap: .6em; margin: 0; padding: .3em 0 .15em; color: var(--hp-faint); font-size: max(12px, .84em); }
.hp-flow__idle i { width: .42em; height: .42em; border-radius: 50%; background: #9cc5b5; animation: hp-breathe 1.8s ease-in-out infinite; }
.is-idle .hp-flow__idle { display: flex; }
.is-animated .hp-flow__list::before { display: none; }
.is-animated .hp-flow__step[data-at]:not(.is-on):not(.is-run) { visibility: hidden; }
.is-animated .hp-flow__step.is-run { animation: hp-fade .35s ease both; }
.is-animated .hp-flow__step:not(:last-child)::before { content: ""; position: absolute; top: 1.9em; bottom: calc(-1 * var(--hp-flow-gap)); left: .95em; width: 1px; background: #cfe3da; transform: scaleY(0); transform-origin: top; transition: transform .5s ease; }
.is-animated .hp-flow__step.is-on:not(:last-child)::before { transform: none; }
.is-animated .hp-flow__step:not(.is-on) > div > :not(strong) { visibility: hidden; }
/* Side by side, the chat column sets the height, so the panel can grow step by step.
   Stacked (narrow screens), the space stays reserved so the page below never jumps. */
@media (min-width: 641px) {
  .hp-stage .hp-flow__idle { position: static; }
  .hp-stage.is-animated .hp-flow__step[data-at]:not(.is-on):not(.is-run), .hp-stage.is-animated .hp-flow__step:not(.is-on) > div > :not(strong) { display: none; }
}
@media (min-width: 1081px) {
  .dm-console .hp-flow__idle { position: static; }
  .dm-console.is-animated .hp-flow__step[data-at]:not(.is-on):not(.is-run), .dm-console.is-animated .hp-flow__step:not(.is-on) > div > :not(strong) { display: none; }
}
.is-animated .hp-flow__step.is-on > div > :not(strong) { animation: hp-fade .45s ease both; }
.is-animated .hp-flow__step.is-on .hp-flow__chips i { animation: hp-fade .35s ease both; }
.is-animated .hp-flow__step.is-on .hp-flow__chips i:nth-child(2) { animation-delay: .1s; }
.is-animated .hp-flow__step.is-on .hp-flow__chips i:nth-child(3) { animation-delay: .2s; }
.hp-flow__step strong { display: flex; align-items: center; justify-content: space-between; gap: .8em; }
.hp-flow__step.is-run strong::after { content: "处理中"; color: var(--hp-faint); font-size: max(12px, .84em); font-weight: 400; animation: hp-blink 1.2s ease-in-out infinite; }
.hp-flow__step.is-on strong::after { content: ""; flex: none; width: .6em; height: .32em; margin-right: .15em; border: solid var(--hp-jade); border-width: 0 0 1.5px 1.5px; transform: translateY(-.1em) rotate(-45deg); }
.hp-flow__step.is-run .hp-flow__icon { border-color: #9fcab9; color: var(--hp-jade); animation: hp-ring 1.4s ease-out infinite; }
.hp-flow__step.is-on .hp-flow__icon { border-color: #bfdccf; color: var(--hp-jade-deep); background: #eef6f1; }
.hp-chat__input { position: relative; }
.hp-chat__send { transition: transform .15s ease, background-color .2s ease; }
.hp-chat__send.is-press { transform: scale(.88); background: var(--hp-button-active); }
button.hp-chat__send { padding: 0; border: 0; font: inherit; cursor: pointer; }
button.hp-chat__send:disabled { cursor: default; }
button.hp-chat__send:focus-visible { outline: 2px solid #31866f; outline-offset: 2px; }
.hp-chat__send.is-waiting { animation: hp-pulse 1.7s ease-out infinite; }
.hp-chat__hint { position: absolute; right: 0; bottom: calc(100% + .7em); padding: .4em .75em; border-radius: 8px; color: #fff; background: #2f3a33; font-size: max(12px, .82em); line-height: 1.4; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.hp-chat__hint::after { content: ""; position: absolute; top: 100%; right: 1em; border: 5px solid transparent; border-top-color: #2f3a33; }
.hp-chat__input.is-waiting .hp-chat__hint { opacity: 1; transform: none; }

@keyframes hp-caret { 50% { opacity: 0; } }
@keyframes hp-show { to { opacity: 1; transform: none; } }
@keyframes hp-dot { 0%, 80%, 100% { opacity: .4; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-.2em); } }
@keyframes hp-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hp-blink { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes hp-ring { 0% { box-shadow: 0 0 0 0 rgba(35, 131, 107, .28); } 80%, 100% { box-shadow: 0 0 0 .45em rgba(35, 131, 107, 0); } }
@keyframes hp-breathe { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@keyframes hp-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes hp-pulse { 0% { box-shadow: 0 0 0 0 rgba(36, 128, 102, .45); } 70%, 100% { box-shadow: 0 0 0 .6em rgba(36, 128, 102, 0); } }

@media (prefers-reduced-motion: reduce) {
  .hp-btn, .hp-btn .hp-ico, .hp-link .hp-ico, .hp-tab { transition: none; }
}

@media (max-width: 1180px) {
  .hp-grid { --hp-cols: 2; }
}
@media (max-width: 640px) {
  .hp-grid { --hp-cols: 1; }
  .hp-grid > * { padding: 22px 20px; }
  .pg-hero { padding-top: 33px; }
  .pg-hero__actions .hp-btn { flex: 1 1 100%; }
  .hp-tabs { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; width: 100%; }
  .hp-tab { padding: 0 6px; font-size: 13px; }
}

/* Footer logo: the shared teal SVG, same as the header. */
body.site-page .site-footer__brand--img img { display: block; width: auto; height: 30px; object-fit: contain; }