/*
 * Lemon AI STUDIO homepage. Shared tokens and components (hp-*) come from
 * public.css; this file keeps the hero stage, the number strip and the use cases.
 * Loaded after public.css; rules are scoped to body.home-page or hp-* classes
 * that only the homepage uses.
 */

/* Homepage content grows at under half the screen's rate, so its side margins widen too:
   about 1208px at 1440, 1312px at 1672, 1500px at 2090. Header and footer keep the shared width. */
body.home-page main { --hp-home-w: min(var(--hp-max), calc(45vw + 560px), calc(100% - var(--hp-gutter) * 2)); }
body.home-page main .container { width: var(--hp-home-w); }

/* ---------- Hero: the promise on the left, the working product on the right ---------- */
.hp-hero {
  position: relative;
  /* Spacing follows the viewport height as well as its width, so the whole hero
     (copy + product window) fits within the first screen on laptops too. */
  padding: clamp(28px, min(3.4vw, 4.6vh), 72px) 0 clamp(36px, min(3.6vw, 5vh), 76px);
  border-bottom: 1px solid var(--hp-line-soft);
  background-color: var(--hp-canvas);
  background-image: var(--oriental-landscape);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
/* Two columns: a short promise on the left, the live product window on the right. */
.hp-hero .container { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(32px, 3.4vw, 76px); }
.hp-hero__copy { display: grid; justify-items: start; max-width: 34em; text-align: left; }
.hp-hero h1 { margin: 0 0 clamp(14px, min(1.5vw, 2.1vh), 26px); font-size: var(--hp-fs-display); line-height: 1.18; letter-spacing: -.01em; }
.hp-hero h1 > span { display: block; }
.hp-accent { color: var(--hp-jade); font-style: normal; }
.hp-hero__lead { max-width: 26em; margin: 0; color: var(--hp-muted); font-size: var(--hp-fs-lead); line-height: 1.8; text-wrap: pretty; }
.hp-hero__actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; margin-top: clamp(20px, min(2.1vw, 2.8vh), 38px); }
.hp-hero__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: clamp(16px, min(1.7vw, 2.2vh), 32px) 0 0; padding: 0; color: #7b847c; font-size: var(--hp-fs-small); list-style: none; }
.hp-hero__facts li + li::before { content: ""; display: inline-block; width: 1px; height: .9em; margin: 0 1em; vertical-align: -.08em; background: #d5ddd6; }

/* The stage is one product window: the customer's chat on the left, Studio's steps on the right.
   Its font-size (em-driven) is capped by viewport height too, so the whole card shrinks to fit. */
.hp-demo { width: 100%; min-width: 0; margin: 0; }
.hp-demo figcaption { margin-top: 1.1em; color: var(--hp-faint); font-size: var(--hp-fs-label); text-align: center; }
.hp-stage { --hp-bar: 4.4em; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); 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); font-size: clamp(13px, min(.82vw, 1.62vh), 16px); }
/* Reserve the fully-expanded height up front, so the chat typing / streaming and the
   step-by-step reveal never grow the card and shift the page below it (no CLS).
   The AI reply wraps from one line to two mid-animation; this covers the tallest state. */
.hp-stage .hp-chat__body { min-height: 32em; }
/* Narrower chat bubbles (<1366px, and every stacked layout) wrap one more line by the end of the demo. */
@media (max-width: 1365px) { .hp-stage .hp-chat__body { min-height: 33.5em; } }
.hp-stage .hp-chat { display: flex; flex-direction: column; border: 0; border-radius: 0; box-shadow: none; }
.hp-stage .hp-chat__bar { box-sizing: border-box; height: var(--hp-bar); padding-block: 0; }
.hp-stage .hp-chat__body { flex: 1; padding: 1.4em 1.5em 1.2em; }
.hp-stage .hp-chat__input { margin: 0 1.5em 1.4em; }
.hp-stage .hp-flow { padding: 0 1.6em 1.6em; border: 0; border-left: 1px solid var(--hp-line-soft); border-radius: 0; background: #fafbf9; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hp-stage .hp-flow__head { box-sizing: border-box; height: calc(var(--hp-bar) / .76); margin: 0 0 1.5em; padding: 0; }

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

/* ---------- Numbers: the four facts a buyer checks first ---------- */
.hp-numbers { border-bottom: 1px solid var(--hp-line-soft); background: #fff; }
.hp-numbers__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.hp-numbers__list > div { padding: clamp(30px, 2.8vw, 56px) clamp(18px, 2vw, 40px); }
.hp-numbers__list > div:first-child { padding-left: 0; }
.hp-numbers__list > div + div { border-left: 1px solid var(--hp-line-soft); }
.hp-numbers dt { display: flex; align-items: baseline; gap: .3em; color: var(--hp-ink); font-family: var(--hp-serif); font-size: clamp(15px, 1.05vw, 20px); font-weight: 500; }
.hp-numbers dt b { font-family: var(--hp-num); font-size: clamp(40px, 3.3vw, 66px); font-weight: 400; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.hp-numbers dd { margin: .9em 0 0; color: var(--hp-muted); font-size: var(--hp-fs-small); line-height: 1.7; }

/* ---------- Use cases: one real question and answer each ---------- */
.hp-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 30px); margin: 0; padding: 0; list-style: none; font-size: clamp(13px, .88vw, 16.5px); }
.hp-use { display: flex; flex-direction: column; padding: 1.5em 1.5em 1.3em; border: 1px solid rgba(44, 48, 45, .08); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(44, 48, 45, .04), 0 14px 30px -22px rgba(44, 48, 45, .18); }
.hp-use h3 { margin: 0 0 1.1em; color: var(--hp-ink); font-size: 1.3em; font-weight: 500; }
.hp-use__chat { display: grid; flex: 1; align-content: start; gap: .65em; }
.hp-use .hp-msg { max-width: 92%; font-size: max(12px, .93em); }
.hp-use__picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55em; margin: .15em 0 0; padding: 0; list-style: none; }
.hp-use__picks li { display: grid; grid-template-columns: 2.9em minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .55em; align-items: center; padding: .45em .55em .45em .45em; border: 1px solid rgba(44, 48, 45, .08); border-radius: 10px; font-size: max(12px, .84em); }
.hp-use__picks img { grid-row: 1 / 3; display: block; width: 2.9em; height: 2.9em; padding: 5%; border-radius: 7px; background: #eef2ee; object-fit: contain; }
.hp-use__picks span { overflow: hidden; align-self: end; color: var(--hp-ink); text-overflow: ellipsis; white-space: nowrap; }
.hp-use__picks b { align-self: start; color: var(--hp-text); font-family: var(--hp-num); font-weight: 500; }
.hp-use__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: .3em 0 0; padding: .9em .2em 0; border-top: 1px dashed var(--hp-line); list-style: none; font-size: max(12px, .82em); }
.hp-use__track li { position: relative; display: grid; gap: .2em; padding-top: 1.1em; }
.hp-use__track li::before { content: ""; position: absolute; top: .2em; left: 0; right: 0; height: 1px; background: #cfe3da; }
.hp-use__track li:last-child::before { right: auto; width: .5em; }
.hp-use__track li::after { content: ""; position: absolute; top: -.05em; left: 0; width: .55em; height: .55em; border: 1.5px solid #9fcab9; border-radius: 50%; background: #fff; }
.hp-use__track .is-done::after { border-color: var(--hp-button); background: var(--hp-button); }
.hp-use__track .is-current::after { border-color: var(--hp-button); box-shadow: 0 0 0 .2em rgba(68, 149, 126, .16); }
.hp-use__track strong { color: var(--hp-ink); font-weight: 500; }
.hp-use__track small { color: var(--hp-faint); font-size: max(12px, .92em); font-variant-numeric: tabular-nums; }
.hp-use__cite { display: inline-flex; align-items: center; justify-self: start; gap: .45em; margin: .2em 0 0; padding: .35em .75em; border-radius: 999px; color: var(--hp-jade-deep); background: var(--hp-tint); font-size: max(12px, .82em); }
.hp-use__cite .hp-ico { font-size: 1.05em; }
.hp-use__src { margin: 1.2em 0 0; padding-top: .95em; border-top: 1px solid var(--hp-line-soft); color: var(--hp-faint); font-size: max(12px, .8em); }
.hp-uses__more { display: flex; justify-content: center; margin: clamp(26px, 2.2vw, 40px) 0 0; }

/* ---------- Pricing alignment: type on 11 / 12 / 13 / 14px, cards and rhythm as on pricing ---------- */
.home-page .hp-stage .hp-msg, .home-page .hp-use .hp-msg { font-size: 13px; line-height: 1.6; letter-spacing: 0; }
.home-page .hp-stage .hp-chat__title strong, .home-page .hp-stage .hp-product__info strong { font-size: 13px; }
.home-page .hp-stage .hp-product__meta b { font-size: 14px; font-weight: 500; }
/* Price stays with stock/ID; on a narrow card "库存 · ID" drops below the price as one unit. */
.home-page .hp-stage .hp-product__meta { flex-wrap: wrap; row-gap: 2px; }
.home-page .hp-stage .hp-product__meta small { white-space: nowrap; }
/* 1081–1180px: two-column hero with the narrowest chat pane; let the product card use the full row. */
@media (min-width: 1081px) and (max-width: 1180px) { .home-page .hp-stage .hp-product { max-width: 100%; column-gap: 8px; } }
.home-page .hp-stage .hp-flow__head { font-size: 11px; letter-spacing: .12em; }
.home-page .hp-numbers dt { font-family: var(--hp-sans); font-size: 14px; font-weight: 500; }
.home-page .hp-numbers dt b { font-size: 44px; line-height: 1.12; }
.home-page .hp-use { padding: 29px 28px 27px; border-color: var(--hp-line); border-radius: var(--hp-radius); box-shadow: 0 3px 14px rgba(49, 67, 48, .024); }
.home-page .hp-use h3 { margin-bottom: 18px; font-size: 20px; line-height: 1.4; }
/* Wider card padding leaves the product picks ~2px short; tighten their inner gaps. */
.home-page .hp-use__picks { gap: .45em; }
.home-page .hp-use__picks li { column-gap: .45em; padding-right: .4em; }
/* On 1366px and narrower, a product name breaks at its <wbr> onto a second line instead of an ellipsis. */
.home-page .hp-use__picks span { overflow: visible; line-height: 1.35; text-overflow: clip; white-space: normal; }
.home-page main .hp-section { padding-top: clamp(40px, 4vw, 64px); padding-bottom: clamp(40px, 4vw, 64px); }
.home-page .hp-head { gap: 12px; }
.home-page .hp-h2 { line-height: 1.5; }

/* ---------- Platform capabilities ---------- */
/* Three items: stay in three columns, then stack; never two columns plus an empty cell. */
.hp-caps { --hp-cols: 3; }
@media (max-width: 900px) { .hp-caps { --hp-cols: 1; } }

/* ---------- Real product screen: a 2x capture (2588×1524) laid out at 1294×762 CSS px, sharp on Retina ---------- */
.hp-proof__checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin: 4px 0 0; padding: 0; list-style: none; }
.hp-proof__checks li { display: flex; align-items: center; gap: 8px; color: #4e5850; font-size: 14px; line-height: 1.6; }
.hp-proof__checks .hp-ico { flex: none; width: 16px; height: 16px; color: #7e978c; stroke-width: 1.5; }
.hp-proof { --x: 0; --y: 0; --w: 1294; --h: 762; max-width: calc(var(--w) * 1px); margin: 0 auto; }
.hp-proof .hp-screen { box-shadow: 0 3px 14px rgba(49, 67, 48, .024); }
.hp-proof__view { position: relative; display: block; overflow: hidden; aspect-ratio: var(--w) / var(--h); background: #f8faf6; }
.hp-proof__view img { position: absolute; top: 0; left: 0; width: calc(129400% / var(--w)); max-width: none; height: auto; transform: translate(calc(var(--x) * -100% / 1294), calc(var(--y) * -100% / 762)); }
.hp-proof__view:focus-visible { outline: 2px solid #31866f; outline-offset: -2px; }
.hp-proof figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 12px; color: var(--hp-faint); font-size: 12px; line-height: 1.6; }
.hp-proof figcaption a { color: var(--hp-label); white-space: nowrap; }
.hp-proof figcaption a:hover { color: var(--hp-jade); }
/* Phones: zoom into 业务数据库 → Studio 已保存数据 so the counts stay legible. */
@media (max-width: 640px) { .hp-proof { --x: 12; --y: 12; --w: 799; --h: 307; } }

/* ---------- Next-step routes under the trial block ---------- */
.hp-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 22px 0 0; padding: 0; list-style: none; }
.hp-routes a { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 18px 22px; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); background: #fff; box-shadow: 0 3px 14px rgba(49, 67, 48, .024); transition: border-color .18s ease; }
.hp-routes a:hover { border-color: #a9cdbd; }
.hp-routes a:focus-visible { outline: 2px solid #31866f; outline-offset: 3px; }
.hp-routes strong { display: block; color: var(--hp-ink); font-size: 14px; font-weight: 500; }
.hp-routes small { display: block; margin-top: 4px; color: var(--hp-muted); font-size: 13px; }
.hp-routes .hp-ico { flex: none; color: #7e978c; font-size: 16px; transition: color .18s ease; }
.hp-routes a:hover .hp-ico { color: var(--hp-jade); }
@media (max-width: 1080px) {
  .hp-routes { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  /* Not enough width for copy + a two-pane product window side by side:
     stack the promise above the product, and center the copy. */
  .hp-hero .container { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 4vw, 52px); justify-items: center; }
  .hp-hero__copy { justify-items: center; max-width: 40em; text-align: center; }
  .hp-hero__lead { max-width: 34em; }
  .hp-hero__actions { justify-content: center; }
  .hp-hero__facts { justify-content: center; }
  .hp-demo { width: min(100%, 1080px); }
  .hp-numbers__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-numbers__list > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .hp-numbers__list > div:nth-child(n + 3) { border-top: 1px solid var(--hp-line-soft); }
  .hp-uses { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .hp-hero { padding-top: 32px; }
  .hp-hero__copy { justify-items: start; text-align: left; }
  .hp-hero__actions { justify-content: stretch; }
  .hp-hero__actions .hp-btn { flex: 1 1 100%; }
  .hp-hero__facts { justify-content: flex-start; }
  .hp-hero__facts li + li::before { margin: 0 .75em; }
  /* Three facts don't fit one row: start the third on its own row so no divider hangs at a line start. */
  .hp-hero__facts li:nth-child(3) { flex-basis: 100%; }
  .hp-hero__facts li:nth-child(3)::before { display: none; }
  .hp-stage { grid-template-columns: minmax(0, 1fr); border-radius: 16px; font-size: 13px; }
  .hp-stage .hp-flow { border-top: 1px solid var(--hp-line-soft); border-left: 0; }
  .hp-numbers__list > div { padding-block: 22px; }
  .hp-numbers__list > div:nth-child(even) { padding-right: 0; }
  .hp-numbers dt b { font-size: 36px; }
}

/* =====================================================================
 * v2: homepage-grade scale and composition.
 * Same language as the pricing page (serif titles, light numerals, white
 * cards on hairlines, one green accent), sized for a homepage.
 * ===================================================================== */
body.home-page {
  --v2-h1: clamp(40px, 3.8vw, 58px);
  --v2-h2: clamp(28px, 2.5vw, 38px);
  --v2-lead: clamp(15px, 1.1vw, 17px);
  --v2-sec: clamp(72px, 7vw, 120px);
}
.home-page .hp-section { padding-block: var(--v2-sec); }
.home-page .hp-head { gap: 14px; margin-bottom: clamp(36px, 4vw, 64px); }
.home-page .hp-h2 { font-size: var(--v2-h2); line-height: 1.35; letter-spacing: .01em; }
.home-page .hp-lead { color: #5d665f; font-size: var(--v2-lead); line-height: 1.8; }

/* Hero: fills the first screen; the pricing header's light replaces the washed-out landscape. */
.home-page .hp-hero { display: flex; align-items: center; background-color: var(--hp-canvas); background-image: radial-gradient(860px 300px at 50% 0, #eef7df 0, transparent 68%); }
@media (min-width: 1081px) { .home-page .hp-hero { min-height: clamp(600px, calc(100svh - 76px), 920px); } }
.home-page .hp-hero h1 { margin-bottom: 22px; font-size: var(--v2-h1); line-height: 1.22; letter-spacing: .01em; }
.home-page .hp-hero__lead { max-width: 25em; color: #5d665f; font-size: var(--v2-lead); line-height: 1.85; }
.home-page .hp-hero__actions { margin-top: 32px; }
.home-page .hp-hero .hp-btn, .v2-cta .hp-btn { min-height: 48px; padding: 0 24px; border-radius: 10px; font-size: 15px; }
.home-page .hp-hero__facts { margin-top: 24px; font-size: 13px; }
.home-page .hp-stage { box-shadow: 0 28px 64px -40px rgba(35, 62, 47, .32), 0 2px 8px rgba(35, 62, 47, .035); }

/* ---------- Before / after: the same question, answered with and without Studio ---------- */
.v2-vs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 1100px; margin: 0 auto; }
.v2-vs__card { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 26px 28px; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); background: #fff; font-size: 13px; }
.v2-vs__card--before { background: #f6f7f5; }
.v2-vs__card--after { border-color: #a4cebf; box-shadow: 0 28px 60px -42px rgba(35, 62, 47, .36), 0 2px 8px rgba(35, 62, 47, .03); }
.v2-vs__label { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; color: var(--hp-muted); font-size: 13px; font-weight: 500; letter-spacing: .02em; }
.v2-vs__label i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #b9c2bb; }
.v2-vs__card--after .v2-vs__label { color: var(--hp-jade-deep); }
.v2-vs__card--after .v2-vs__label i { background: #3fa37f; box-shadow: 0 0 0 3px rgba(63, 163, 127, .16); }
.v2-vs__chat { display: grid; flex: 1; align-content: start; gap: 10px; }
.v2-vs .hp-msg { max-width: 88%; font-size: 13px; line-height: 1.6; letter-spacing: 0; }
.v2-vs .hp-product { max-width: 88%; }
.v2-vs .hp-product__info strong { font-size: 13px; }
.v2-vs .hp-product__meta b { font-size: 14px; font-weight: 500; }
/* On a narrow card "库存 · ID" drops below the price as one unit instead of breaking at the dot. */
.v2-vs .hp-product__meta { flex-wrap: wrap; row-gap: 2px; }
.v2-vs .hp-product__meta small { white-space: nowrap; }
.v2-vs__card--before .hp-msg--user { background: #9fada4; box-shadow: none; }
.v2-vs__card--before .hp-msg--ai { color: #6d726e; background: #eaede8; }
.v2-vs__handoff { justify-self: start; padding: .45em 1.1em; border: 1px solid #dde2dc; border-radius: 999px; color: #858d86; background: #fff; font-size: 12px; }
.v2-vs__notes { display: grid; gap: 10px; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--hp-line-soft); list-style: none; }
.v2-vs__card--before .v2-vs__notes { border-top-color: #e4e8e3; }
.v2-vs__notes li { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 10px; color: var(--hp-text); font-size: 14px; line-height: 1.6; }
.v2-vs__notes .hp-ico { width: 16px; height: 16px; margin-top: 3px; stroke-width: 1.8; }
.v2-vs__card--before .v2-vs__notes li { color: #737a74; }
.v2-vs__card--before .v2-vs__notes .hp-ico { color: #b28276; }
.v2-vs__card--after .v2-vs__notes .hp-ico { color: var(--hp-jade); }

/* ---------- Scenes: pick an example and watch it answer (home-v2.js) ---------- */
.v2-scenes { border-block: 1px solid var(--hp-line-soft); background: #f3f6f1; }
.v2-scenes__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(40px, 5.6vw, 104px); }
.v2-scenes__stage, .v2-scenes__side { min-width: 0; }
.v2-scenes__side { display: grid; justify-items: start; }
.v2-scenes__side .hp-head { margin-bottom: 28px; }
.v2-scene { font-size: 13px; border-color: var(--hp-line); border-radius: var(--hp-radius); box-shadow: 0 28px 64px -40px rgba(35, 62, 47, .32), 0 2px 8px rgba(35, 62, 47, .035); }
.v2-scene[hidden] { display: none; }
.v2-scene:focus-visible { outline: 2px solid #31866f; outline-offset: 3px; }
.v2-scene .hp-chat__title strong { font-size: 13px; }
/* Fixed height: switching examples or streaming a reply never moves the page. */
.v2-scene .hp-chat__body { height: 23em; overflow: hidden; gap: .8em; padding: 1.4em 1.5em 1.2em; }
.v2-scene .hp-chat__input { margin: 0 1.5em 1.4em; }
.v2-scene .hp-msg { font-size: 13px; line-height: 1.6; letter-spacing: 0; }
.v2-status { position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; gap: .7em; padding: .72em 1em; border-radius: 16px 16px 16px 5px; color: var(--hp-muted); background: #f3f5f2; font-size: 12px; line-height: 1.5; white-space: nowrap; }
.v2-status__dots { display: inline-flex; gap: .28em; }
.v2-status__dots i { width: .38em; height: .38em; border-radius: 50%; background: #a9b6ad; animation: hp-dot 1.2s ease-in-out infinite; }
.v2-status__dots i:nth-child(2) { animation-delay: .15s; }
.v2-status__dots i:nth-child(3) { animation-delay: .3s; }
.v2-src { display: inline-flex; align-items: center; justify-self: start; gap: .5em; margin: .1em 0 0; color: var(--hp-faint); font-size: 12px; }
.v2-src .hp-ico { width: 13px; height: 13px; color: #8ea99c; }
.v2-doc { display: flex; align-items: center; justify-self: start; gap: .8em; max-width: 88%; padding: .7em .95em .7em .7em; border: 1px solid var(--hp-line); border-radius: 12px; background: #fff; }
.v2-doc__icon { display: grid; flex: none; place-items: center; width: 2.6em; height: 2.6em; border-radius: 9px; color: #5d7a6c; background: var(--hp-tint); }
.v2-doc__icon .hp-ico { font-size: 1.25em; }
.v2-doc__body { display: grid; gap: .15em; min-width: 0; }
.v2-doc__body strong { color: var(--hp-ink); font-size: 13px; font-weight: 500; }
.v2-doc__body small { color: var(--hp-faint); font-size: 12px; }
.v2-scenes__note { margin: 14px 0 0; color: var(--hp-faint); font-size: 12px; text-align: center; }
.v2-scenes.is-animated .v2-scene [data-at] { transition: opacity .45s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.v2-scenes.is-animated .v2-scene [data-at]:not(.is-on) { opacity: 0; transform: translateY(6px); }
.v2-scenes.is-animated .v2-scene .v2-status:not(.is-on) { transform: none; }
.v2-scenes:not(.is-animated) .v2-scene [data-until] { display: none; }
.v2-scenes.is-static .hp-chat__send { background: var(--hp-button); }
/* Side by side, the chat is the anchor of the section: one step larger than the hero chat. */
@media (min-width: 1081px) {
  .v2-scene { font-size: 14px; }
  .v2-scene .hp-msg, .v2-scene .hp-chat__title strong { font-size: 14px; }
}

.v2-tabs { display: grid; gap: 8px; width: 100%; }
.v2-tab { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 12px; width: 100%; overflow: hidden; padding: 18px 22px 18px 18px; border: 1px solid transparent; border-radius: var(--hp-radius); color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; transition: background-color .18s ease, border-color .18s ease; }
.v2-tab:not([aria-selected="true"]):hover { background: rgba(255, 255, 255, .6); }
.v2-tab[aria-selected="true"] { border-color: var(--hp-line); background: #fff; box-shadow: 0 3px 14px rgba(49, 67, 48, .024); }
.v2-tab:focus-visible { outline: 2px solid #31866f; outline-offset: 2px; }
.v2-tab__no { padding-top: 4px; color: #9fb5aa; font-family: var(--hp-num); font-size: 13px; letter-spacing: .08em; font-variant-numeric: tabular-nums; transition: color .18s ease; }
.v2-tab__body { display: grid; gap: 4px; min-width: 0; }
.v2-tab strong { color: #5d665f; font-family: var(--hp-serif); font-size: 20px; font-weight: 500; line-height: 1.4; transition: color .18s ease; }
.v2-tab__body > span { color: var(--hp-muted); font-size: 14px; line-height: 1.7; }
.v2-tab__body small { margin-top: 2px; color: var(--hp-faint); font-size: 12px; line-height: 1.6; }
.v2-tab[aria-selected="true"] .v2-tab__no { color: var(--hp-jade); }
.v2-tab[aria-selected="true"] strong { color: var(--hp-ink); }
.v2-tab[aria-selected="true"] .v2-tab__body small { color: #648474; }
/* While an example waits before the next one starts, this line fills up. */
.v2-tab__bar { position: absolute; right: 22px; bottom: 0; left: 18px; height: 2px; overflow: hidden; border-radius: 2px; background: #e5ede7; opacity: 0; transition: opacity .2s ease; }
.v2-tab__bar::before { content: ""; display: block; height: 100%; background: var(--hp-button); transform: scaleX(0); transform-origin: left; }
.v2-tab.is-counting .v2-tab__bar { opacity: 1; }
.v2-tab.is-counting .v2-tab__bar::before { animation: hp-progress var(--v2-pause, 4s) linear forwards; }
.v2-scenes__more { margin: 24px 0 0 18px; }

/* ---------- Three steps: each with a small drawing of the screen it happens on ---------- */
.v2-steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.v2-step { display: flex; flex-direction: column; min-width: 0; padding: 10px; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); background: #fff; box-shadow: 0 3px 14px rgba(49, 67, 48, .024); }
.v2-step__art { display: grid; place-items: center; height: 248px; padding: 0 22px; border-radius: 10px; background: #f3f6f1; }
.v2-step__text { display: grid; align-content: start; justify-items: start; gap: 8px; padding: 22px 18px 16px; }
.v2-step__no { color: var(--hp-jade); font-family: var(--hp-num); font-size: 13px; letter-spacing: .08em; }
body.home-page .v2-step h3 { margin: 0; color: var(--hp-ink); font-family: var(--hp-serif); font-size: 22px; font-weight: 500; line-height: 1.4; }
.v2-step p { margin: 0; color: var(--hp-muted); font-size: 14px; line-height: 1.8; }
.v2-steps__more { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; margin: clamp(32px, 3vw, 48px) 0 0; }

.v2-art { width: 100%; max-width: 320px; overflow: hidden; border: 1px solid var(--hp-line); border-radius: 10px; color: var(--hp-text); background: #fff; box-shadow: 0 16px 30px -22px rgba(35, 62, 47, .4); font-size: 12px; line-height: 1.5; text-align: left; }
.v2-art__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--hp-line-soft); color: var(--hp-ink); background: #fbfcfa; font-weight: 500; white-space: nowrap; }
.v2-art__bar em { color: var(--hp-faint); font-style: normal; font-weight: 400; }
.v2-art__bar .v2-ok { display: inline-flex; align-items: center; gap: 5px; color: var(--hp-jade-deep); }
.v2-ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3fa37f; }
.v2-art__fields { margin: 0; padding: 6px 12px 2px; }
.v2-art__fields > div { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: 8px; padding: 4px 0; }
.v2-art__fields dt { color: var(--hp-faint); }
.v2-art__fields dd { margin: 0; overflow: hidden; color: var(--hp-ink); text-overflow: ellipsis; white-space: nowrap; }
.v2-art__sql { margin: 6px 12px 0; padding: 8px 10px; overflow: hidden; border-radius: 6px; color: #3c443e; background: #f4f6f3; font: 11px/1.7 var(--hp-mono); white-space: pre; }
.v2-art__sql b { color: #2f7a63; font-weight: 500; }
.v2-art__rows { margin: 0; padding: 2px 0; list-style: none; }
.v2-art__rows li { display: grid; grid-template-columns: 14px 4.8em minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 12px; }
.v2-art__rows li + li { border-top: 1px solid var(--hp-line-soft); }
.v2-art__rows i { width: 14px; height: 14px; border: 1px solid #c8d2cb; border-radius: 4px; background: #fff; }
.v2-art__rows .is-on i { border-color: var(--hp-button); background: var(--hp-button) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / 10px no-repeat; }
.v2-art__rows code { color: var(--hp-ink); font: 11px/1.5 var(--hp-mono); }
.v2-art__rows span { overflow: hidden; color: var(--hp-muted); text-overflow: ellipsis; white-space: nowrap; }
.v2-art__rows em { padding: 1px 8px; border-radius: 999px; color: var(--hp-faint); background: #f2f4f1; font-size: 11px; font-style: normal; }
.v2-art__rows .is-on em { color: var(--hp-jade-deep); background: var(--hp-tint); }
.v2-art__result { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 12px 11px; color: var(--hp-jade-deep); }
.v2-art__result .hp-ico { width: 14px; height: 14px; stroke-width: 2; }
.v2-art--code { border-color: #2c3530; color: #d9e4dc; background: #1d2521; box-shadow: 0 18px 34px -22px rgba(20, 32, 26, .6); }
.v2-art--code .v2-art__bar { border-bottom-color: rgba(255, 255, 255, .08); color: #d9e4dc; background: rgba(255, 255, 255, .03); font: 400 11px/1 var(--hp-mono); }
.v2-art--code .v2-art__bar em { color: #8fa597; font-family: var(--hp-sans); font-size: 11px; }
.v2-art--code pre { margin: 0; padding: 12px 14px 14px; overflow: hidden; color: #d9e4dc; font: 11px/1.8 var(--hp-mono); white-space: pre; }
.v2-sx-head { color: #e2c78f; }
.v2-sx-key { color: #a6d5b3; }
.v2-sx-str { color: #ecd6a2; }

/* Product proof: only the three-count flow card, wide and at near-native scale. */
/* Crop inside the page's grey margin: 18px of grey on every side of the card, no stray rules. */
.home-page .hp-proof { --x: 6; --y: 6; --w: 1282; --h: 426; }
@media (max-width: 640px) { .home-page .hp-proof { --x: 12; --y: 12; --w: 799; --h: 307; } }

/* Closing: a centered pricing-style ending, then three plain next steps on a hairline. */
.v2-cta { padding: var(--v2-sec) 0 clamp(48px, 4.4vw, 80px); border-top: 1px solid var(--hp-line-soft); background: var(--hp-canvas); }
.hp-section--white + .v2-cta { border-top: 0; }
.v2-cta__main { display: grid; justify-items: center; gap: 14px; max-width: 760px; margin: 0 auto; text-align: center; }
.v2-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
.v2-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(56px, 5vw, 88px) 0 0; padding: 0; border-top: 1px solid var(--hp-line); list-style: none; }
.v2-routes li + li { border-left: 1px solid var(--hp-line-soft); }
.v2-routes a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 28px; color: inherit; text-decoration: none; }
.v2-routes li:first-child a { padding-left: 4px; }
.v2-routes li:last-child a { padding-right: 4px; }
.v2-routes strong { display: block; color: var(--hp-ink); font-size: 15px; font-weight: 500; transition: color .18s ease; }
.v2-routes small { display: block; margin-top: 4px; color: var(--hp-muted); font-size: 13px; }
.v2-routes .hp-ico { flex: none; color: #a3b8ad; font-size: 16px; transition: color .18s ease; }
.v2-routes a:hover strong { color: var(--hp-jade-deep); }
.v2-routes a:hover .hp-ico { color: var(--hp-jade); }

.v2-routes a:focus-visible { outline: 2px solid #31866f; outline-offset: 4px; border-radius: 6px; }

@media (max-width: 1180px) {
  /* Three columns get too narrow for the drawings: one step per row, drawing beside the text. */
  .v2-steps__list { grid-template-columns: minmax(0, 1fr); max-width: 780px; margin-inline: auto; }
  .v2-step { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
  .v2-step__text { padding: 12px 18px 12px 28px; }
}
@media (max-width: 1080px) {
  /* Stacked: heading, then the three examples as one segmented control, then the chat. */
  .v2-scenes__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .v2-scenes__side { display: contents; }
  .v2-scenes__side .hp-head { order: 1; justify-items: center; margin: 0 auto 8px; text-align: center; }
  .v2-tabs { order: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; width: min(100%, 560px); margin: 0 auto; padding: 4px; border: 1px solid var(--hp-line); border-radius: 999px; background: #e9eee7; }
  .v2-tab { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 9px 10px 10px; border-radius: 999px; text-align: center; }
  .v2-tab__no, .v2-tab__body > span, .v2-tab__body small { display: none; }
  .v2-tab strong { font-family: var(--hp-sans); font-size: 14px; }
  .v2-tab__bar { right: 22%; bottom: 4px; left: 22%; }
  .v2-scenes__stage { order: 3; width: min(100%, 560px); margin: 8px auto 0; }
  .v2-scenes__more { order: 4; justify-self: center; margin: 0; }
}
@media (max-width: 900px) {
  .v2-vs__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .v2-routes { grid-template-columns: minmax(0, 1fr); }
  .v2-routes li + li { border-top: 1px solid var(--hp-line-soft); border-left: 0; }
  .v2-routes a, .v2-routes li:first-child a, .v2-routes li:last-child a { padding: 20px 2px; }
}
@media (max-width: 640px) {
  .v2-vs__card { padding: 22px 18px; }
  .v2-vs .hp-product { max-width: 100%; column-gap: 10px; }
  .v2-scene .hp-chat__body { height: 24em; }
  .v2-step { display: flex; }
  .v2-step__art { height: 232px; padding: 0 10px; }
  .v2-step__text { padding: 20px 10px 12px; }
  .v2-tab strong { font-size: 13px; }
}

/* ---------- Hero composition: the shopper's chat and Studio's trace as two windows on a panel ----------
   The chat is what the customer sees (light); the trace is Studio working behind it (dark,
   set lower so the two read as front and back); the chip under it names the data it draws on. */
.home-page .hp-stage { grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); grid-template-rows: auto 1fr; column-gap: 18px; overflow: visible; padding: 26px; border: 1px solid #e1e9df; border-radius: 22px; background: #edf3eb; box-shadow: none; }
.home-page .hp-stage .hp-chat { grid-column: 1; grid-row: 1 / span 2; border: 1px solid rgba(44, 48, 45, .07); border-radius: 16px; background: #fff; box-shadow: 0 32px 60px -36px rgba(30, 58, 43, .42), 0 2px 6px rgba(30, 58, 43, .05); }
.home-page .hp-stage .hp-flow { grid-column: 2; grid-row: 1; align-self: start; min-height: 25.5em; margin-top: 46px; padding: 0 1.3em 1.4em; border: 1px solid rgba(255, 255, 255, .06); border-radius: 16px; color: #cfdcd3; background: #1c2622; box-shadow: 0 34px 60px -30px rgba(14, 30, 22, .6), 0 2px 6px rgba(14, 30, 22, .12); }
.home-page .hp-stage .hp-flow__head { height: auto; margin: 0 -1.3em 1.25em; padding: 1em 1.3em .9em; border-bottom: 1px solid rgba(255, 255, 255, .07); color: #9db2a6; letter-spacing: .1em; }
.home-page .hp-stage .hp-flow__status { color: #a9bdb2; background: rgba(255, 255, 255, .06); }
.home-page .hp-stage .hp-flow__status::before { background: #6f8379; }
.home-page .hp-stage .hp-flow__status[data-state="run"], .home-page .hp-stage .hp-flow__status[data-state="done"] { color: #9fe3c3; background: rgba(95, 191, 149, .14); }
.home-page .hp-stage .hp-flow__status[data-state="run"]::before { background: #6fd3a6; }
.home-page .hp-stage .hp-flow__status[data-state="done"]::before { border-color: #8fe0bb; background: none; }
.home-page .hp-stage .hp-flow__idle { color: #93a69b; }
.home-page .hp-stage .hp-flow__idle i { background: #5fbf95; }
.home-page .hp-stage .hp-flow__list::before { background: rgba(255, 255, 255, .1); }
.home-page .hp-stage.is-animated .hp-flow__step:not(:last-child)::before { background: rgba(111, 211, 166, .32); }
.home-page .hp-stage .hp-flow__icon { border-color: rgba(255, 255, 255, .12); color: #9db2a6; background: #1c2622; }
.home-page .hp-stage .hp-flow__step.is-run .hp-flow__icon { border-color: #4fae8a; color: #8fe0bb; }
.home-page .hp-stage .hp-flow__step.is-on .hp-flow__icon { border-color: rgba(111, 211, 166, .38); color: #8fe0bb; background: #23332c; }
.home-page .hp-stage .hp-flow__step strong { color: #edf3ee; }
.home-page .hp-stage .hp-flow__step small { color: #93a69b; }
.home-page .hp-stage .hp-flow__step.is-run strong::after { color: #93a69b; }
.home-page .hp-stage .hp-flow__chips i { color: #cfe3d8; background: rgba(255, 255, 255, .07); }
.home-page .hp-stage .hp-hits span { color: #c9d6ce; }
.home-page .hp-stage .hp-hits b { color: #edf3ee; }
.home-page .hp-stage .hp-hits i { background: rgba(255, 255, 255, .08); }
.home-page .hp-stage .hp-hits i::before { background: #5fbf95; }
.v2-chip { grid-column: 2; grid-row: 2; align-self: end; display: flex; align-items: center; gap: .8em; margin: 14px 0 22px; padding: .8em 1em .8em .8em; border: 1px solid rgba(44, 48, 45, .07); border-radius: 14px; background: #fff; box-shadow: 0 20px 40px -26px rgba(30, 58, 43, .4), 0 2px 6px rgba(30, 58, 43, .04); }
.v2-chip__icon { display: grid; flex: none; place-items: center; width: 2.4em; height: 2.4em; border-radius: 9px; color: #3b7d66; background: var(--hp-tint); }
.v2-chip__icon .hp-ico { font-size: 1.15em; }
.v2-chip__body { display: grid; flex: 1; gap: .1em; min-width: 0; }
.v2-chip__body strong { color: var(--hp-ink); font-size: 13px; font-weight: 500; white-space: nowrap; }
.v2-chip__body small { color: var(--hp-faint); font-size: 12px; white-space: nowrap; }
.v2-chip .v2-ok { display: inline-flex; flex: none; align-items: center; gap: 5px; color: var(--hp-jade-deep); font-size: 12px; font-style: normal; }
/* The trace keeps its finished height from the start, so it never grows while the steps play. */
.home-page .hp-stage .hp-flow { min-height: 29.2em; }
@media (max-width: 1365px) { .home-page .hp-stage .hp-flow { min-height: 31.1em; } }
@media (min-width: 1081px) and (max-width: 1180px) {
  /* Narrowest two-column hero: thinner panel margins leave the chat enough room for product names. */
  .home-page .hp-stage { padding: 16px; column-gap: 12px; }
  .home-page .hp-stage .hp-flow { min-height: 33.6em; margin-top: 34px; }
  .home-page .hp-stage .hp-flow__head { letter-spacing: .04em; }
}
@media (max-width: 1080px) { .home-page .hp-stage .hp-flow { min-height: 29.2em; } }
@media (max-width: 640px) {
  .home-page .hp-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: 12px; border-radius: 18px; }
  .home-page .hp-stage .hp-chat { grid-row: auto; }
  .home-page .hp-stage .hp-flow { grid-column: 1; grid-row: auto; min-height: 0; margin-top: 12px; }
  .v2-chip { display: none; }
}