/* Streaming-word motion from transitions-dev/30-streaming-text. */
.hha-workflow {
  --stream-gap: 45ms;
  --stream-fade: 350ms;
  --stream-blur: 1px;
  --stream-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-stream-w {
  opacity: 0;
  filter: blur(var(--stream-blur));
  transition:
    opacity var(--stream-fade) var(--stream-ease),
    filter var(--stream-fade) var(--stream-ease);
}
.t-stream-w.is-in {
  opacity: 1;
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .t-stream-w { transition: none !important; filter: none !important; opacity: 1 !important; }
}
/* Scoped autoplay layout. The stage swaps in place and never creates an inner scroller. */
.hha-body .hha-workflow-autoplay .hha-workflow-toolbar {
  margin-bottom: 12px;
}

.hha-body .hha-workflow-stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 360px;
  min-height: 360px;
  overflow: hidden;
}

.hha-body .hha-workflow-autoplay .hha-workflow-intro {
  min-height: 0;
  height: 100%;
  padding: 4px 0 8px;
}

.hha-body .hha-workflow-autoplay .hha-workflow-intro-mark {
  width: 58px;
  height: 58px;
  border-radius: 17px;
  margin-bottom: 10px;
}

.hha-body .hha-workflow-autoplay .hha-workflow-intro h4 {
  font-size: 19px;
  margin-bottom: 6px;
}

.hha-body .hha-workflow-autoplay .hha-workflow-intro > p {
  line-height: 1.75;
}

.hha-body .hha-workflow-autoplay .hha-workflow-draft {
  max-width: 540px;
  padding: 12px 14px;
  margin-top: 12px;
}

.hha-body .hha-workflow-autoplay .hha-workflow-draft > p {
  margin: 5px 0 9px;
  line-height: 1.7;
}

.hha-body .hha-current-activity {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(140px, .65fr);
  grid-template-rows: auto minmax(88px, 1fr);
  gap: 9px;
  min-height: 0;
  flex: 1;
}

.hha-body .hha-workflow-request,
.hha-body .hha-workflow-activity-current {
  border: 1px solid #eee8f4;
  border-radius: 10px;
  background: #fcfaff;
  padding: 10px 12px;
}

.hha-body .hha-workflow-request {
  grid-column: 1 / -1;
}

.hha-body .hha-workflow-request small,
.hha-body .hha-workflow-activity-current small {
  display: block;
  color: var(--hha-muted);
  font-size: 9px;
}

.hha-body .hha-workflow-request p {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.65;
}

.hha-body .hha-workflow-activity-current {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #6d28d9;
}

.hha-body .hha-workflow-activity-current strong {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 600;
}

.hha-body .hha-workflow-autoplay .hha-workflow-search {
  min-height: 0;
  padding: 12px;
  align-content: center;
}

.hha-body .hha-workflow-autoplay .hha-workflow-skeleton {
  gap: 8px;
}

.hha-body .hha-workflow-autoplay .hha-action-card {
  padding: 13px 15px;
}

.hha-body .hha-workflow-autoplay .hha-product {
  gap: 12px;
  margin: 10px 0;
}

.hha-body .hha-workflow-autoplay .hha-product-picture,
.hha-body .hha-workflow-autoplay .hha-product-picture img {
  width: 64px;
  height: 64px;
}

.hha-body .hha-workflow-autoplay .hha-product p {
  margin-top: 4px;
}

.hha-body .hha-workflow-autoplay .hha-quiet {
  min-height: 38px;
  font-size: 11px;
  line-height: 1.7;
}

.hha-body .hha-workflow-autoplay .hha-actions {
  align-items: center;
  margin-top: 9px;
}

.hha-body .hha-approve-wrap {
  position: relative;
}

.hha-body .hha-approve-wrap.is-simulating [data-workflow-approve] {
  animation: hha-auto-approve-button 3500ms ease-in-out both;
}

.hha-body .hha-simulated-pointer {
  position: absolute;
  z-index: 2;
  inset-inline-end: 12px;
  bottom: -15px;
  width: 24px;
  height: 24px;
  color: #4c1d95;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px #fff);
  animation: hha-auto-approve-pointer 3500ms cubic-bezier(.22, 1, .36, 1) both;
}

.hha-body .hha-simulated-pointer i {
  position: absolute;
  inset: -7px;
  border: 2px solid #a178dc;
  border-radius: 50%;
  opacity: 0;
  animation: hha-auto-approve-ring 3500ms ease-out both;
}

.hha-body .hha-workflow-autoplay .hha-workflow-controls {
  margin-top: auto;
}

.hha-body .hha-workflow-autoplay .hha-demo-note {
  margin-top: 10px;
}

@keyframes hha-auto-approve-pointer {
  0%, 56% { opacity: 0; transform: translate(22px, 16px) scale(.88); }
  66% { opacity: 1; transform: translate(12px, 8px) scale(.92); }
  82%, 91% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(0, 0) scale(.94); }
}

@keyframes hha-auto-approve-button {
  0%, 80% { transform: translateY(0); box-shadow: none; }
  87% { transform: translateY(1px) scale(.985); box-shadow: 0 0 0 4px #dac4f655; }
  94%, 100% { transform: translateY(0); box-shadow: 0 0 0 7px transparent; }
}

@keyframes hha-auto-approve-ring {
  0%, 82% { opacity: 0; transform: scale(.35); }
  87% { opacity: .7; transform: scale(.65); }
  98%, 100% { opacity: 0; transform: scale(1.35); }
}

@media (max-width: 720px) {
  .hha-body .hha-workflow-stage {
    height: auto;
    min-height: 420px;
    overflow: visible;
  }

  .hha-body .hha-workflow-autoplay .hha-workflow-intro {
    min-height: 420px;
    height: auto;
  }

  .hha-body .hha-current-activity {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(100px, 1fr);
  }

  .hha-body .hha-workflow-request {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hha-body .hha-approve-wrap.is-simulating [data-workflow-approve],
  .hha-body .hha-simulated-pointer,
  .hha-body .hha-simulated-pointer i {
    animation: none;
  }
}
.hha-benefit-demo {
  --hha-benefit-violet: #6f3dc5;
  --hha-benefit-violet-dark: #432071;
  --hha-benefit-ink: #251735;
  --hha-benefit-muted: #766d80;
  --hha-benefit-line: rgba(76, 43, 105, 0.13);
  --hha-benefit-ivory: #fffdf8;
  --hha-benefit-ease: cubic-bezier(.22, .8, .22, 1);
  position: relative;
  display: flex;
  width: min(100%, 660px);
  height: 450px;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hha-benefit-line);
  border-radius: 24px;
  outline: none;
  color: var(--hha-benefit-ink);
  background:
    radial-gradient(circle at 88% 2%, rgba(132, 86, 196, .13), transparent 30%),
    linear-gradient(155deg, #fffdf9 0%, #fbf7ff 100%);
  box-shadow: 0 22px 56px rgba(67, 32, 113, .1), inset 0 1px rgba(255,255,255,.9);
}

.hha-benefit-demo:focus-visible { box-shadow: 0 0 0 3px rgba(111,61,197,.23), 0 22px 56px rgba(67,32,113,.1); }
.hha-benefit-demo * { box-sizing: border-box; }
.hha-benefit-demo button { font: inherit; }

.hha-benefit-toolbar,
.hha-benefit-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 15px;
  border-bottom: 1px solid var(--hha-benefit-line);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(12px);
}

.hha-benefit-toolbar > span { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 780; }
.hha-benefit-toolbar > span i { width: 7px; height: 7px; border-radius: 50%; background: #8a55d4; box-shadow: 0 0 0 4px rgba(138,85,212,.12); }
.hha-benefit-toolbar small { color: var(--hha-benefit-muted); font-size: 10px; }

.hha-benefit-canvas {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  padding: 14px 16px;
  display: grid;
  align-content: center;
}

.hha-benefit-intro,
.hha-benefit-flow { display: grid; gap: 12px; animation: hha-benefit-enter 360ms var(--hha-benefit-ease) both; }
.hha-benefit-heading { display: flex; align-items: center; gap: 11px; }
.hha-benefit-heading h4 { margin: 0 0 3px; font-size: 16px; line-height: 1.35; }
.hha-benefit-heading p,
.hha-benefit-request p { margin: 0; color: var(--hha-benefit-muted); font-size: 12px; line-height: 1.65; }
.hha-benefit-hero-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border: 1px solid rgba(111,61,197,.13); border-radius: 14px; color: var(--hha-benefit-violet); background: #f5efff; }

.hha-benefit-channels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.hha-benefit-channels button {
  display: flex; min-width: 0; align-items: center; justify-content: center; gap: 5px; padding: 9px 6px;
  border: 1px solid var(--hha-benefit-line); border-radius: 11px; color: var(--hha-benefit-ink); background: rgba(255,255,255,.78); cursor: pointer;
  transition: transform 150ms var(--hha-benefit-ease), border-color 150ms ease, background 150ms ease;
}
.hha-benefit-channels button:hover { transform: translateY(-1px); border-color: rgba(111,61,197,.3); }
.hha-benefit-channels button[aria-pressed="true"] { border-color: rgba(111,61,197,.42); color: var(--hha-benefit-violet-dark); background: #f1e8ff; box-shadow: inset 0 0 0 1px rgba(111,61,197,.08); }
.hha-benefit-channels button span { overflow: hidden; font-size: 11px; font-weight: 720; text-overflow: ellipsis; }
.hha-benefit-brand { display: block; flex: 0 0 auto; object-fit: contain; }
.hha-benefit-brand-fallback { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; color: #fff; background: var(--hha-benefit-violet); font-size: 10px; font-weight: 800; }

.hha-benefit-request { padding: 11px; border: 1px solid var(--hha-benefit-line); border-radius: 14px; background: rgba(255,255,255,.72); }
.hha-benefit-request small { display: block; margin-bottom: 4px; color: var(--hha-benefit-violet); font-size: 10px; font-weight: 780; }
.hha-benefit-request .hha-benefit-primary { margin-top: 10px; }
.hha-benefit-primary,
.hha-benefit-actions button,
.hha-benefit-mini-actions button,
.hha-benefit-controls button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--hha-benefit-line); border-radius: 10px; cursor: pointer;
  transition: transform 150ms var(--hha-benefit-ease), box-shadow 150ms ease, background 150ms ease;
}
.hha-benefit-primary { min-height: 34px; padding: 7px 12px; border-color: transparent; color: white; background: linear-gradient(135deg, #7542c8, #5b2ca3); box-shadow: 0 7px 16px rgba(91,44,163,.17); font-size: 11px; font-weight: 780; }
.hha-benefit-primary:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(91,44,163,.23); }
button:focus-visible.hha-benefit-primary,
.hha-benefit-demo button:focus-visible { outline: 2px solid rgba(111,61,197,.54); outline-offset: 2px; }

.hha-benefit-bubble { display: flex; max-width: 91%; gap: 8px; animation: hha-benefit-enter 280ms var(--hha-benefit-ease) both; }
.hha-benefit-bubble.is-owner { justify-self: end; text-align: start; }
.hha-benefit-bubble > div { padding: 8px 10px; border: 1px solid var(--hha-benefit-line); border-radius: 4px 13px 13px 13px; background: rgba(255,255,255,.78); }
.hha-benefit-bubble.is-owner > div { border-radius: 13px 4px 13px 13px; color: #fff; background: var(--hha-benefit-violet-dark); }
.hha-benefit-bubble small { display: block; margin-bottom: 2px; opacity: .7; font-size: 9px; }
.hha-benefit-bubble p { margin: 0; font-size: 11px; line-height: 1.6; }
.hha-benefit-avatar { display: grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center; overflow: hidden; border: 1px solid var(--hha-benefit-line); border-radius: 9px; background: #fff; }

.hha-benefit-selected { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--hha-benefit-line); border-radius: 11px; background: rgba(255,255,255,.6); font-size: 10px; }
.hha-benefit-selected span { color: var(--hha-benefit-muted); }
.hha-benefit-selected strong { margin-inline-start: auto; }

.hha-benefit-steps,
.hha-benefit-automation { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.hha-benefit-steps li { display: flex; min-width: 0; align-items: center; gap: 5px; padding: 7px; border: 1px solid var(--hha-benefit-line); border-radius: 10px; color: var(--hha-benefit-muted); background: rgba(255,255,255,.52); font-size: 9px; line-height: 1.3; }
.hha-benefit-steps li > span { display: grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; border-radius: 6px; background: #eee7f6; font-size: 9px; font-weight: 800; }
.hha-benefit-steps li[data-state="active"] { border-color: rgba(111,61,197,.28); color: var(--hha-benefit-violet-dark); background: #f4edff; }
.hha-benefit-steps li[data-state="active"] > span { color: #fff; background: var(--hha-benefit-violet); animation: hha-benefit-pulse 1.4s ease-in-out infinite; }
.hha-benefit-steps li[data-state="done"] { color: #365a4a; }
.hha-benefit-steps li[data-state="done"] > span { color: #fff; background: #3d8064; }

.hha-benefit-phone { width: min(100%, 380px); justify-self: center; padding: 10px; border: 1px solid rgba(67,32,113,.18); border-radius: 17px; background: #fff; box-shadow: 0 13px 30px rgba(67,32,113,.1); animation: hha-benefit-enter 300ms var(--hha-benefit-ease) both; }
.hha-benefit-phone-head { display: flex; align-items: center; gap: 7px; padding-bottom: 7px; border-bottom: 1px solid var(--hha-benefit-line); }
.hha-benefit-phone-head div { display: grid; }
.hha-benefit-phone-head strong { font-size: 11px; }
.hha-benefit-phone-head small { color: var(--hha-benefit-muted); font-size: 8px; }
.hha-benefit-phone > p { margin: 8px 0; font-size: 10px; }
.hha-benefit-menu { display: flex; flex-wrap: wrap; gap: 5px; }
.hha-benefit-menu span { padding: 5px 8px; border-radius: 8px; color: var(--hha-benefit-violet-dark); background: #f2eaff; font-size: 9px; font-weight: 720; }
.hha-benefit-phone .hha-benefit-primary { width: 100%; margin-top: 8px; }
.hha-benefit-test-chat { display: grid; gap: 5px; margin-top: 8px; }
.hha-benefit-test-chat span { width: fit-content; max-width: 86%; padding: 6px 8px; border-radius: 9px; background: #eee9f3; font-size: 9px; line-height: 1.5; animation: hha-benefit-enter 240ms var(--hha-benefit-ease) both; }
.hha-benefit-test-chat span:first-child { justify-self: end; color: #fff; background: var(--hha-benefit-violet-dark); }

.hha-benefit-file,
.hha-benefit-upload-card { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--hha-benefit-line); border-radius: 14px; background: rgba(255,255,255,.76); }
.hha-benefit-file > div,
.hha-benefit-upload-card > div { display: grid; flex: 1; min-width: 0; }
.hha-benefit-file strong,
.hha-benefit-upload-card strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; }
.hha-benefit-file small,
.hha-benefit-upload-card small { color: var(--hha-benefit-muted); font-size: 9px; }
.hha-benefit-file > svg { margin-inline-start: auto; color: #3d8064; }
.hha-benefit-file-sheet { position: relative; display: grid; width: 39px; height: 45px; flex: 0 0 39px; place-items: center; overflow: hidden; border-radius: 7px 12px 7px 7px; color: #fff; background: linear-gradient(145deg, #1c8a5a, #146542); box-shadow: 0 6px 13px rgba(20,101,66,.18); }
.hha-benefit-file-sheet::after { position: absolute; top: 0; right: 0; width: 10px; height: 10px; border-radius: 0 0 0 4px; background: rgba(255,255,255,.38); content: ""; }
.hha-benefit-file-sheet b { font-size: 16px; }
.hha-benefit-file-sheet small { color: rgba(255,255,255,.8); font-size: 7px; }
.hha-benefit-upload-card > b { color: var(--hha-benefit-violet); font-size: 10px; }
.hha-benefit-progress { display: block; height: 5px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: #e9e2ed; }
.hha-benefit-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7441c6, #a075df); transition: width 420ms var(--hha-benefit-ease); }
.hha-benefit-upload-card:not([data-uploaded="true"]) .hha-benefit-file-sheet { animation: hha-benefit-upload 1.3s var(--hha-benefit-ease) infinite; }
.hha-benefit-upload-card:not([data-uploaded="true"]) .hha-benefit-progress i { animation: hha-benefit-progress 2.8s var(--hha-benefit-ease) both; }
.hha-benefit-demo[data-paused="true"] *,
.hha-benefit-demo[data-paused="true"] *::before,
.hha-benefit-demo[data-paused="true"] *::after { animation-play-state: paused !important; }

.hha-benefit-automation { grid-template-columns: 1fr; }
.hha-benefit-automation li { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 9px; color: var(--hha-benefit-muted); background: rgba(255,255,255,.46); font-size: 9px; }
.hha-benefit-automation li svg { color: #a098a8; }
.hha-benefit-automation li small { font-size: 8px; }
.hha-benefit-automation li[data-state="active"] { color: var(--hha-benefit-violet-dark); background: #f1e8ff; }
.hha-benefit-automation li[data-state="active"] svg { color: var(--hha-benefit-violet); animation: hha-benefit-spin 1.5s linear infinite; }
.hha-benefit-automation li[data-state="done"] svg { color: #3d8064; }

.hha-benefit-table { display: grid; overflow: hidden; border: 1px solid var(--hha-benefit-line); border-radius: 12px; background: rgba(255,255,255,.66); }
.hha-benefit-table [role="row"] { display: grid; grid-template-columns: minmax(100px, 1.1fr) 50px minmax(130px, 1.35fr); align-items: center; gap: 7px; padding: 7px 9px; border-bottom: 1px solid var(--hha-benefit-line); font-size: 9px; }
.hha-benefit-table [role="row"]:last-child { border-bottom: 0; }
.hha-benefit-table [role="row"] > span:first-child { display: grid; }
.hha-benefit-table b { font-size: 9px; }
.hha-benefit-table small { color: var(--hha-benefit-muted); font-size: 8px; }
.hha-benefit-table [data-row-outcome="create"] > span:last-child { color: #246847; }
.hha-benefit-table [data-row-outcome="update"] > span:last-child { color: #5d3aa0; }
.hha-benefit-table [data-row-outcome="hold"] { color: #826627; background: #fff9e9; }

.hha-benefit-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.hha-benefit-actions > button:not(.hha-benefit-primary) { min-height: 34px; padding: 7px 11px; color: var(--hha-benefit-muted); background: rgba(255,255,255,.75); font-size: 10px; font-weight: 700; }

.hha-benefit-searching { display: flex; align-items: center; gap: 9px; padding: 11px; border: 1px solid var(--hha-benefit-line); border-radius: 13px; background: rgba(255,255,255,.7); }
.hha-benefit-searching > svg:first-child { color: var(--hha-benefit-violet); }
.hha-benefit-searching > svg:last-child { margin-inline-start: auto; color: var(--hha-benefit-violet); animation: hha-benefit-spin 1.3s linear infinite; }
.hha-benefit-searching div { display: grid; }
.hha-benefit-searching strong { font-size: 10px; }
.hha-benefit-searching small { color: var(--hha-benefit-muted); font-size: 9px; }

.hha-benefit-destinations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.hha-benefit-destinations article { min-width: 0; padding: 9px; border: 1px solid var(--hha-benefit-line); border-radius: 12px; background: rgba(255,255,255,.74); animation: hha-benefit-enter 300ms var(--hha-benefit-ease) both; }
.hha-benefit-destinations article:nth-child(2) { animation-delay: 50ms; }
.hha-benefit-destinations article:nth-child(3) { animation-delay: 100ms; }
.hha-benefit-destinations article[data-decision="approved"] { border-color: rgba(49,122,88,.3); background: #f4fbf7; }
.hha-benefit-destinations article[data-decision="denied"] { opacity: .76; background: #f7f4f6; }
.hha-benefit-destinations header { display: flex; align-items: center; gap: 5px; }
.hha-benefit-destinations header strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; }
.hha-benefit-destinations header small,
.hha-benefit-destinations header > svg { margin-inline-start: auto; color: var(--hha-benefit-muted); font-size: 8px; }
.hha-benefit-price { display: grid; gap: 2px; margin: 8px 0; }
.hha-benefit-price s { color: var(--hha-benefit-muted); font-size: 9px; }
.hha-benefit-price b { font-size: 11px; }
.hha-benefit-mini-actions { display: flex; gap: 4px; }
.hha-benefit-mini-actions button { flex: 1; min-width: 0; padding: 5px 3px; color: var(--hha-benefit-violet-dark); background: #f1e9fc; font-size: 8px; font-weight: 750; }
.hha-benefit-mini-actions button:last-child { color: var(--hha-benefit-muted); background: #f4f1f4; }
.hha-benefit-decision { display: block; min-height: 28px; color: var(--hha-benefit-muted); font-size: 8px; line-height: 1.45; }
.hha-benefit-hint { margin: 0; color: var(--hha-benefit-muted); font-size: 9px; text-align: center; }

.hha-benefit-comment { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--hha-benefit-line); border-radius: 13px; background: rgba(255,255,255,.76); }
.hha-benefit-comment-avatar { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: white; background: linear-gradient(135deg, #f28a38, #b23fc4 60%, #5b4dde); font-size: 10px; font-weight: 800; }
.hha-benefit-comment > div { display: grid; }
.hha-benefit-comment strong { font-size: 9px; }
.hha-benefit-comment p { margin: 1px 0 0; font-size: 11px; }
.hha-benefit-comment > small,
.hha-benefit-comment > img { margin-inline-start: auto; color: var(--hha-benefit-muted); font-size: 8px; }
.hha-benefit-reply-card { padding: 10px; border: 1px solid rgba(111,61,197,.18); border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(67,32,113,.07); animation: hha-benefit-enter 300ms var(--hha-benefit-ease) both; }
.hha-benefit-product-mini { display: flex; align-items: center; gap: 8px; }
.hha-benefit-product-mini img { border-radius: 9px; object-fit: cover; }
.hha-benefit-product-mini div { display: grid; }
.hha-benefit-product-mini strong { font-size: 10px; }
.hha-benefit-product-mini small { color: var(--hha-benefit-muted); font-size: 8px; }
.hha-benefit-reply-card > p { margin: 8px 0 5px; font-size: 10px; line-height: 1.65; }
.hha-benefit-link { display: inline-flex; align-items: center; gap: 5px; direction: ltr; color: var(--hha-benefit-violet); font-size: 9px; }
.hha-benefit-reply-card .hha-benefit-actions { margin-top: 9px; }

.hha-benefit-receipt { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border: 1px solid rgba(49,122,88,.2); border-radius: 12px; color: #244e3d; background: #f0faf5; animation: hha-benefit-enter 300ms var(--hha-benefit-ease) both; }
.hha-benefit-receipt svg { flex: 0 0 auto; margin-top: 1px; }
.hha-benefit-receipt div { display: grid; }
.hha-benefit-receipt strong { font-size: 10px; }
.hha-benefit-receipt small { color: #587466; font-size: 8px; line-height: 1.55; }

.hha-benefit-footer { align-items: flex-end; border-top: 1px solid var(--hha-benefit-line); border-bottom: 0; }
.hha-benefit-footer > p { max-width: 390px; margin: 0; color: var(--hha-benefit-muted); font-size: 8px; line-height: 1.45; }
.hha-benefit-controls { display: flex; flex: 0 0 auto; gap: 5px; }
.hha-benefit-controls button { min-height: 28px; padding: 5px 8px; color: var(--hha-benefit-violet-dark); background: rgba(255,255,255,.78); font-size: 8px; font-weight: 720; }

.hha-benefit-demo.is-compact { height: min(450px, calc(100svh - 215px)); min-height: 0; max-height: none; border-radius: 19px; }
.hha-benefit-demo.is-compact .hha-benefit-canvas { padding: 11px 13px; }
.hha-benefit-demo.is-compact .hha-benefit-intro,
.hha-benefit-demo.is-compact .hha-benefit-flow { gap: 9px; }
.hha-benefit-demo.is-compact .hha-benefit-heading p { display: none; }

@keyframes hha-benefit-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hha-benefit-pulse {
  50% { transform: scale(.9); opacity: .72; }
}
@keyframes hha-benefit-spin { to { transform: rotate(360deg); } }
@keyframes hha-benefit-upload {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes hha-benefit-progress {
  from { width: 0; }
  to { width: 86%; }
}

@media (max-width: 560px) {
  .hha-benefit-demo { height: auto; min-height: 450px; max-height: none; border-radius: 18px; }
  .hha-benefit-canvas { padding: 12px; }
  .hha-benefit-channels { grid-template-columns: repeat(2, 1fr); }
  .hha-benefit-destinations { grid-template-columns: 1fr; }
  .hha-benefit-steps { grid-template-columns: 1fr; }
  .hha-benefit-table [role="row"] { grid-template-columns: minmax(90px, 1fr) 42px 1.2fr; padding-inline: 7px; }
  .hha-benefit-footer { align-items: center; }
  .hha-benefit-footer > p { max-width: 180px; }
}

/* The landing shell defines broad button and typography defaults. Keep this
   component's deliberately compact controls and violet primary action intact. */
.hha-body .hha-benefit-demo p { line-height: inherit; }
.hha-body .hha-benefit-demo .hha-benefit-heading h4 { margin: 0 0 3px; font-size: 16px; line-height: 1.35; }
.hha-body .hha-benefit-demo button {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font-size: inherit;
  font-weight: inherit;
}
.hha-body .hha-benefit-demo .hha-benefit-channels button { min-height: 39px; padding: 9px 6px; border: 1px solid var(--hha-benefit-line); border-radius: 11px; color: var(--hha-benefit-ink); background: rgba(255,255,255,.78); }
.hha-body .hha-benefit-demo .hha-benefit-channels button[aria-pressed="true"] { border-color: rgba(111,61,197,.42); color: var(--hha-benefit-violet-dark); background: #f1e8ff; }
.hha-body .hha-benefit-demo .hha-benefit-primary { min-height: 34px; padding: 7px 12px; border: 1px solid transparent; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #7542c8, #5b2ca3); box-shadow: 0 7px 16px rgba(91,44,163,.17); font-size: 11px; font-weight: 780; }
.hha-body .hha-benefit-demo .hha-benefit-primary:hover { border-color: transparent; background: linear-gradient(135deg, #6b36bc, #502591); box-shadow: 0 9px 20px rgba(91,44,163,.23); }
.hha-body .hha-benefit-demo .hha-benefit-actions > button:not(.hha-benefit-primary) { min-height: 34px; padding: 7px 11px; border: 1px solid var(--hha-benefit-line); border-radius: 10px; color: var(--hha-benefit-muted); background: rgba(255,255,255,.75); font-size: 10px; font-weight: 700; }
.hha-body .hha-benefit-demo .hha-benefit-mini-actions button { min-height: 28px; padding: 5px 3px; border: 1px solid var(--hha-benefit-line); border-radius: 10px; color: var(--hha-benefit-violet-dark); background: #f1e9fc; font-size: 8px; font-weight: 750; }
.hha-body .hha-benefit-demo .hha-benefit-mini-actions button:last-child { color: var(--hha-benefit-muted); background: #f4f1f4; }
.hha-body .hha-benefit-demo .hha-benefit-controls button { min-height: 28px; padding: 5px 8px; border: 1px solid var(--hha-benefit-line); border-radius: 10px; color: var(--hha-benefit-violet-dark); background: rgba(255,255,255,.78); font-size: 8px; font-weight: 720; }

@media (prefers-reduced-motion: reduce) {
  .hha-benefit-demo *,
  .hha-benefit-demo *::before,
  .hha-benefit-demo *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Scheduled read-check demo ------------------------------------------------ */
.hha-scheduled {
  height: 450px;
  min-height: 420px;
  max-height: 450px;
  overflow: hidden;
}
.hha-scheduled .hha-benefit-toolbar { min-height: 39px; padding-block: 8px; }
.hha-scheduled-canvas { display: grid; flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 11px 14px; }
.hha-scheduled-panel { display: grid; width: 100%; max-width: 560px; min-height: 0; align-content: center; justify-self: center; gap: 10px; animation: hha-scheduled-enter 520ms cubic-bezier(.22,.8,.22,1) both; }
.hha-scheduled-panel.is-suggestion { max-width: 515px; }
.hha-scheduled-bubble { display: flex; max-width: 92%; align-items: flex-start; gap: 7px; }
.hha-scheduled-bubble > div { padding: 8px 10px; border: 1px solid rgba(76,43,105,.13); border-radius: 12px 4px 12px 12px; background: #f0e7fb; }
.hha-scheduled-bubble.is-assistant > div { border-radius: 4px 12px 12px; background: rgba(255,255,255,.85); }
.hha-scheduled-bubble.is-assistant { justify-self: start; }
.hha-scheduled-bubble.is-owner { justify-self: end; }
.hha-scheduled-bubble small { display: block; margin-bottom: 2px; color: #5f5669; font-size: 8px; }
.hha-scheduled-bubble p { margin: 0; font-size: 10px; line-height: 1.65; }
.hha-scheduled-avatar { display: grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center; overflow: hidden; border: 1px solid rgba(76,43,105,.13); border-radius: 9px; background: #fff; }
.hha-scheduled-brand { display: block; object-fit: contain; }
.hha-scheduled-brand-fallback { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; color: white; background: #d9272e; font-size: 10px; font-weight: 800; }

.hha-scheduled-card { display: grid; gap: 7px; padding: 11px 12px; border: 1px solid rgba(111,61,197,.2); border-radius: 14px; background: rgba(255,255,255,.86); box-shadow: 0 9px 24px rgba(67,32,113,.07); }
.hha-scheduled-card > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hha-scheduled-card > header > span { display: flex; min-width: 0; align-items: center; gap: 7px; }
.hha-scheduled-card > header b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.hha-scheduled-card > header small { flex: 0 0 auto; padding: 3px 6px; border-radius: 999px; color: #60329f; background: #f0e7fb; font-size: 8px; }
.hha-scheduled-card[data-status="scheduled"] > header small { color: #2d684e; background: #e9f7f0; }
.hha-scheduled-card[data-status="paused"] > header small { color: #7c6329; background: #fff4d7; }
.hha-scheduled-card h4 { margin: 0; font-size: 14px; line-height: 1.45; }
.hha-scheduled-time { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 10px; }
.hha-scheduled-time svg { color: #6f3dc5; }
.hha-scheduled-time span { color: #766d80; font-size: 8px; }
.hha-scheduled-scope { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding-top: 6px; border-top: 1px solid rgba(76,43,105,.1); color: #665d70; font-size: 8px; line-height: 1.55; }
.hha-scheduled-scope svg { flex: 0 0 auto; color: #6f3dc5; }

.hha-scheduled-primary,
.hha-scheduled-actions button,
.hha-scheduled-footer button,
.hha-scheduled-panel.is-result > button,
.hha-scheduled-editor button { display: inline-flex; min-height: 30px; align-items: center; justify-content: center; gap: 5px; padding: 6px 9px; border: 1px solid rgba(76,43,105,.13); border-radius: 9px; color: #432071; background: rgba(255,255,255,.82); font-size: 9px; font-weight: 730; cursor: pointer; }
.hha-scheduled-primary { justify-self: end; border-color: transparent; color: #fff; background: linear-gradient(135deg,#7542c8,#5b2ca3); box-shadow: 0 7px 16px rgba(91,44,163,.17); }
.hha-scheduled-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.hha-scheduled-actions .hha-scheduled-primary { margin-inline-start: auto; }
.hha-scheduled-auto-press { animation: hha-scheduled-press 3s ease-in-out both; }
.hha-scheduled-confirmed,
.hha-scheduled-receipt { display: flex; align-items: flex-start; gap: 8px; padding: 8px 9px; border: 1px solid rgba(49,122,88,.18); border-radius: 11px; color: #2b5945; background: #f0faf5; }
.hha-scheduled-confirmed div,
.hha-scheduled-receipt div { display: grid; }
.hha-scheduled-confirmed strong,
.hha-scheduled-receipt strong { font-size: 9px; }
.hha-scheduled-confirmed small,
.hha-scheduled-receipt small { color: #587466; font-size: 8px; line-height: 1.5; }

.hha-scheduled-editor { display: grid; gap: 9px; padding: 12px; border: 1px solid rgba(111,61,197,.2); border-radius: 14px; background: #fff; }
.hha-scheduled-editor label { display: grid; gap: 4px; color: #665d70; font-size: 9px; }
.hha-scheduled-editor input { min-height: 34px; padding: 6px 9px; border: 1px solid rgba(76,43,105,.18); border-radius: 8px; color: #251735; background: #fff; font: inherit; }
.hha-scheduled-editor fieldset { margin: 0; padding: 0; border: 0; }
.hha-scheduled-editor legend { margin-bottom: 5px; color: #665d70; font-size: 9px; }
.hha-scheduled-editor fieldset div { display: flex; gap: 6px; }
.hha-scheduled-editor fieldset button[aria-pressed="true"] { border-color: rgba(111,61,197,.4); color: #5b2ca3; background: #f0e7fb; }

.hha-scheduled-panel.is-working { justify-items: center; text-align: center; }
.hha-scheduled-working-mark { display: grid; width: 52px; height: 52px; place-items: center; overflow: hidden; border: 1px solid rgba(111,61,197,.16); border-radius: 16px; background: #fff; box-shadow: 0 10px 24px rgba(67,32,113,.08); }
.hha-scheduled-panel.is-working > strong { font-size: 13px; }
.hha-scheduled-panel.is-working > small { color: #766d80; font-size: 8px; }
.hha-scheduled-panel.is-working ol { display: grid; width: min(100%,430px); gap: 5px; margin: 0; padding: 0; list-style: none; text-align: start; }
.hha-scheduled-panel.is-working li { display: grid; grid-template-columns: 20px 1fr 16px; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 9px; color: #817789; background: rgba(255,255,255,.55); font-size: 9px; }
.hha-scheduled-panel.is-working li > span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 6px; background: #ece6f2; font-size: 8px; }
.hha-scheduled-panel.is-working li[data-state="active"] { color: #432071; background: #f0e7fb; }
.hha-scheduled-panel.is-working li[data-state="active"] > span { color: #fff; background: #6f3dc5; }
.hha-scheduled-panel.is-working li[data-state="active"] > svg { color: #6f3dc5; animation: hha-scheduled-spin 1.8s linear infinite; }
.hha-scheduled-panel.is-working li[data-state="done"] > span { color: #fff; background: #3d8064; }

.hha-scheduled-panel.is-result { gap: 8px; }
.hha-scheduled-conversation-head { display: flex; align-items: center; gap: 7px; }
.hha-scheduled-conversation-head > div { display: grid; }
.hha-scheduled-conversation-head strong { font-size: 10px; }
.hha-scheduled-conversation-head small { color: #766d80; font-size: 8px; }
.hha-scheduled-badge { display: inline-flex; margin-inline-start: auto; align-items: center; gap: 3px; padding: 4px 6px; border-radius: 999px; color: #fff; background: #6f3dc5; font-size: 8px; animation: hha-scheduled-badge 620ms cubic-bezier(.2,.9,.25,1.25) both; }
.hha-scheduled-result-card { padding: 10px; border: 1px solid rgba(76,43,105,.13); border-radius: 13px; background: #fff; box-shadow: 0 9px 24px rgba(67,32,113,.06); }
.hha-scheduled-result-card > header { display: flex; align-items: center; gap: 7px; }
.hha-scheduled-result-card > header div { display: grid; min-width: 0; }
.hha-scheduled-result-card > header strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.hha-scheduled-result-card > header small { color: #766d80; font-size: 8px; }
.hha-scheduled-result-card > header > svg { margin-inline-start: auto; color: #3d8064; }
.hha-scheduled-counts { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-top: 8px; }
.hha-scheduled-counts span { display: grid; gap: 1px; padding: 6px; border-radius: 8px; background: #f7f4fa; text-align: center; }
.hha-scheduled-counts b { color: #432071; font-size: 13px; }
.hha-scheduled-counts small { color: #766d80; font-size: 7px; }
.hha-scheduled-panel.is-terminal { justify-items: center; color: #665d70; text-align: center; }
.hha-scheduled-panel.is-terminal > span { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 17px; color: #6f3dc5; background: #f0e7fb; }
.hha-scheduled-panel.is-terminal h4 { margin: 0; font-size: 14px; }
.hha-scheduled-panel.is-terminal p { margin: 0; font-size: 9px; }

.hha-scheduled-footer { display: flex; min-height: 43px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 9px; padding: 7px 12px; border-top: 1px solid rgba(76,43,105,.13); background: rgba(255,255,255,.7); }
.hha-scheduled-footer > p { max-width: 350px; margin: 0; color: #766d80; font-size: 7px; line-height: 1.45; }
.hha-scheduled-footer > div { display: flex; flex: 0 0 auto; gap: 5px; }
.hha-scheduled-footer button { min-height: 27px; padding: 5px 7px; }
.hha-scheduled[data-paused="true"] *,
.hha-scheduled[data-paused="true"] *::before,
.hha-scheduled[data-paused="true"] *::after { animation-play-state: paused !important; }

/* Defend compact scheduled controls from the landing shell's broad button rule. */
.hha-body .hha-scheduled button { min-height: 30px; padding: 6px 9px; border: 1px solid rgba(76,43,105,.13); border-radius: 9px; color: #432071; background: rgba(255,255,255,.82); font-size: 9px; font-weight: 730; box-shadow: none; }
.hha-body .hha-scheduled .hha-scheduled-primary { border-color: transparent; color: #fff; background: linear-gradient(135deg,#7542c8,#5b2ca3); box-shadow: 0 7px 16px rgba(91,44,163,.17); }
.hha-body .hha-scheduled .hha-scheduled-footer button { min-height: 27px; padding: 5px 7px; }

@keyframes hha-scheduled-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hha-scheduled-press {
  0%, 72% { transform: translateY(0) scale(1); box-shadow: 0 7px 16px rgba(91,44,163,.17); }
  82% { transform: translateY(1px) scale(.97); box-shadow: 0 2px 7px rgba(91,44,163,.1); }
  92%, 100% { transform: translateY(0) scale(1); box-shadow: 0 7px 16px rgba(91,44,163,.17); }
}
@keyframes hha-scheduled-spin { to { transform: rotate(360deg); } }
@keyframes hha-scheduled-badge {
  from { opacity: 0; transform: translateY(5px) scale(.8); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 560px) {
  .hha-scheduled { height: 450px; min-height: 420px; max-height: 450px; }
  .hha-scheduled-canvas { padding-inline: 10px; }
  .hha-scheduled-footer > p { max-width: 170px; }
  .hha-scheduled-actions { gap: 4px; }
  .hha-scheduled-counts { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .hha-scheduled *,
  .hha-scheduled *::before,
  .hha-scheduled *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Each step occupies the same stage; content never creates a second scroll area. */
@media (max-width: 999px) {
  .hha-benefit-demo.is-compact { height:auto; min-height:450px; max-height:none; }
}
.hha-benefit-demo[data-auto="true"] button { position:relative; }
.hha-benefit-demo[data-auto="true"][data-auto-target="start"] [data-benefit-start]::after,
.hha-benefit-demo[data-auto="true"][data-auto-target="test"] [data-benefit-test]::after,
.hha-benefit-demo[data-auto="true"][data-auto-target="main"] [data-benefit-approve="main"]::after,
.hha-benefit-demo[data-auto="true"][data-auto-target="woocommerce"] [data-benefit-approve="woocommerce"]::after,
.hha-benefit-demo[data-auto="true"][data-auto-target="digikala"] [data-benefit-approve="digikala"]::after,
.hha-benefit-demo[data-auto="true"][data-auto-target="divar"] [data-benefit-approve="divar"]::after {
  content:""; position:absolute; pointer-events:none; width:15px; height:15px;
  inset-inline-end:12px; bottom:4px; border:2px solid #fff; border-radius:50%;
  background:#432071; box-shadow:0 0 0 5px #a075df55;
  animation:hha-benefit-click 3.5s ease both;
}
@keyframes hha-benefit-click {
  0%,45% { opacity:0; transform:translate(12px,12px) scale(.7); }
  65%,83% { opacity:1; transform:translate(0,0) scale(1); }
  92% { opacity:1; transform:scale(.7); box-shadow:0 0 0 12px #a075df22; }
  100% { opacity:0; transform:scale(1); }
}

@media (min-width:1000px) { .hha-scheduled.is-compact { height:min(450px, calc(100svh - 215px)); min-height:0; max-height:none; } }
.hha-memory-demo {
  --hha-memory-violet: #6f3dc5;
  --hha-memory-dark: #432071;
  --hha-memory-ink: #251735;
  --hha-memory-muted: #766d80;
  --hha-memory-line: rgba(76,43,105,.13);
  display: flex;
  width: min(100%, 660px);
  height: 390px;
  min-height: 360px;
  max-height: 390px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hha-memory-line);
  border-radius: 21px;
  outline: none;
  color: var(--hha-memory-ink);
  background: radial-gradient(circle at 88% 0%, rgba(132,86,196,.13), transparent 31%), linear-gradient(155deg,#fffdf9,#faf5ff);
  box-shadow: 0 20px 48px rgba(67,32,113,.1);
}
.hha-memory-demo * { box-sizing: border-box; }
.hha-memory-demo:focus-visible { box-shadow: 0 0 0 3px rgba(111,61,197,.22), 0 20px 48px rgba(67,32,113,.1); }
.hha-memory-demo-top { display: flex; min-height: 42px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 13px; border-bottom: 1px solid var(--hha-memory-line); background: rgba(255,255,255,.68); }
.hha-memory-demo-top > span { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.hha-memory-demo-top small { color: var(--hha-memory-muted); font-size: 8px; }
.hha-memory-demo-canvas { display: grid; flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 12px 15px; }
.hha-memory-demo-panel { display: grid; width: 100%; max-width: 540px; min-height: 0; align-content: center; justify-self: center; gap: 10px; animation: hha-memory-enter 520ms cubic-bezier(.22,.8,.22,1) both; }

.hha-memory-demo-bubble { display: flex; max-width: 92%; align-items: flex-start; gap: 7px; }
.hha-memory-demo-bubble.is-owner { justify-self: end; }
.hha-memory-demo-bubble.is-assistant { justify-self: start; }
.hha-memory-demo-bubble > div { padding: 9px 11px; border: 1px solid var(--hha-memory-line); border-radius: 13px 4px 13px 13px; color: #fff; background: var(--hha-memory-dark); }
.hha-memory-demo-bubble.is-assistant > div { border-radius: 4px 13px 13px; color: var(--hha-memory-ink); background: rgba(255,255,255,.87); }
.hha-memory-demo-bubble small { display: block; margin-bottom: 2px; opacity: .7; font-size: 8px; }
.hha-memory-demo-bubble p { margin: 0; font-size: 10px; line-height: 1.65; }
.hha-memory-demo-avatar { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; overflow: hidden; border: 1px solid var(--hha-memory-line); border-radius: 9px; background: #fff; }
.hha-memory-demo-thinking,
.hha-memory-demo-added { display: inline-flex; width: fit-content; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 9px; color: var(--hha-memory-violet); background: #f1e9fc; font-size: 8px; }
.hha-memory-demo-thinking svg { animation: hha-memory-sparkle 1.8s ease-in-out infinite; }
.hha-memory-demo-added { color: #2f674f; background: #eef9f3; }

.hha-memory-demo-card { display: grid; gap: 7px; padding: 11px 12px; border: 1px solid rgba(111,61,197,.2); border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: 0 10px 25px rgba(67,32,113,.07); }
.hha-memory-demo-card > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hha-memory-demo-card > header > span { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 760; }
.hha-memory-demo-card > header > span svg { color: var(--hha-memory-violet); }
.hha-memory-demo-card > header small { color: var(--hha-memory-violet); font-size: 8px; }
.hha-memory-demo-path { display: flex; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--hha-memory-line); color: var(--hha-memory-muted); font-size: 8px; }
.hha-memory-demo-fact { margin: 0; font-size: 10px; line-height: 1.65; }
.hha-memory-demo-card > small { color: var(--hha-memory-muted); font-size: 8px; }
.hha-memory-demo-card.is-saved { border-color: rgba(49,122,88,.23); }
.hha-memory-demo-card.is-editing label { color: var(--hha-memory-muted); font-size: 8px; }
.hha-memory-demo-card.is-editing > small { color: var(--hha-memory-muted); font-size: 8px; line-height: 1.45; }
.hha-memory-demo-card textarea { width: 100%; min-height: 62px; resize: none; padding: 7px 8px; border: 1px solid rgba(76,43,105,.2); border-radius: 9px; color: var(--hha-memory-ink); background: #fff; font: inherit; font-size: 9px; line-height: 1.55; }
.hha-memory-demo-actions { display: flex; justify-content: flex-end; gap: 6px; }
.hha-memory-demo-empty { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hha-memory-demo-empty p { margin: 0; color: var(--hha-memory-muted); font-size: 9px; }

.hha-memory-demo button { display: inline-flex; min-height: 29px; align-items: center; justify-content: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--hha-memory-line); border-radius: 9px; color: var(--hha-memory-dark); background: rgba(255,255,255,.85); font: inherit; font-size: 8px; font-weight: 720; cursor: pointer; }
.hha-memory-demo button:focus-visible { outline: 2px solid rgba(111,61,197,.52); outline-offset: 2px; }
.hha-memory-demo .hha-memory-demo-primary { justify-self: end; border-color: transparent; color: #fff; background: linear-gradient(135deg,#7542c8,#5b2ca3); box-shadow: 0 7px 15px rgba(91,44,163,.16); }
.hha-memory-demo-auto-press { animation: hha-memory-press 3.2s ease-in-out both; }
.hha-memory-demo-source { display: flex; align-items: flex-start; gap: 8px; padding: 8px 9px; border: 1px solid rgba(49,122,88,.18); border-radius: 11px; color: #2c5d48; background: #eff9f4; }
.hha-memory-demo-source svg { flex: 0 0 auto; }
.hha-memory-demo-source div { display: grid; }
.hha-memory-demo-source strong { font-size: 9px; }
.hha-memory-demo-source small { color: #587466; font-size: 8px; line-height: 1.5; }

.hha-memory-demo > footer { display: flex; min-height: 42px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; border-top: 1px solid var(--hha-memory-line); background: rgba(255,255,255,.66); }
.hha-memory-demo > footer > p { max-width: 350px; margin: 0; color: var(--hha-memory-muted); font-size: 7px; line-height: 1.45; }
.hha-memory-demo > footer > div { display: flex; flex: 0 0 auto; gap: 5px; }
.hha-memory-demo > footer button { min-height: 27px; padding: 5px 7px; }
.hha-memory-demo[data-paused="true"] *,
.hha-memory-demo[data-paused="true"] *::before,
.hha-memory-demo[data-paused="true"] *::after { animation-play-state: paused !important; }
.hha-memory-demo.is-compact { height: min(390px, calc(100svh - 215px)); }

/* Keep the component compact under the landing shell's broad element rules. */
.hha-body .hha-memory-demo p { line-height: inherit; }
.hha-body .hha-memory-demo button { min-height: 29px; padding: 5px 8px; border: 1px solid var(--hha-memory-line); border-radius: 9px; color: var(--hha-memory-dark); background: rgba(255,255,255,.85); font-size: 8px; font-weight: 720; box-shadow: none; }
.hha-body .hha-memory-demo .hha-memory-demo-primary { border-color: transparent; color: #fff; background: linear-gradient(135deg,#7542c8,#5b2ca3); box-shadow: 0 7px 15px rgba(91,44,163,.16); }
.hha-body .hha-memory-demo > footer button { min-height: 27px; padding: 5px 7px; }

@keyframes hha-memory-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hha-memory-sparkle {
  0%, 100% { opacity: .55; transform: rotate(0deg) scale(.9); }
  50% { opacity: 1; transform: rotate(12deg) scale(1.08); }
}
@keyframes hha-memory-press {
  0%, 73% { transform: translateY(0) scale(1); box-shadow: 0 7px 15px rgba(91,44,163,.16); }
  84% { transform: translateY(1px) scale(.97); box-shadow: 0 2px 6px rgba(91,44,163,.1); }
  94%, 100% { transform: translateY(0) scale(1); box-shadow: 0 7px 15px rgba(91,44,163,.16); }
}

@media (max-width: 560px) {
  .hha-memory-demo, .hha-memory-demo.is-compact { height:auto; min-height:390px; max-height:none; border-radius:18px; }
  .hha-memory-demo-canvas { padding-inline:10px; min-height:280px; overflow:visible; }
  .hha-memory-demo > footer { flex-direction:column-reverse; align-items:stretch; }
  .hha-memory-demo > footer > p { max-width:none; }
}

@media (prefers-reduced-motion: reduce) {
  .hha-memory-demo *,
  .hha-memory-demo *::before,
  .hha-memory-demo *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Self-contained player frame, so any landing variant can mount the section.
   Page chrome (section, heading, eyebrow, button) comes from the host page. */
.hhpv-frame { position:relative; box-sizing:border-box; width:100%; max-width:960px; margin:0 auto; border:1px solid #e9e4ee; border-radius:18px; overflow:hidden; background:#201638; box-shadow:0 18px 50px #2016380d,0 3px 8px #20163805; }
/* Reserves 16:9 (9:16 on phones, below) before any media exists; nothing below it ever moves. */
.hhpv-frame::before { content:""; display:block; padding-top:56.25%; }
.hhpv-frame .hhpv-poster,.hhpv-frame .hhpv-video { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; border:0; }
/* The film carries on-screen type: never crop it, even by a rounding pixel. */
.hhpv-frame .hhpv-video { object-fit:contain; background:#201638; }
.hhpv-frame .hhpv-video:focus-visible { outline:3px solid #fff; outline-offset:-6px; }
/* The button is the whole frame. Its visible pill sits in the bottom right
   corner in both languages: the mascot stands at the bottom left of the wide
   poster, so that corner is the one that stays empty on both posters. */
.hhpv-frame .hhpv-play { position:absolute; top:0; left:0; box-sizing:border-box; width:100%; height:100%; min-height:0; margin:0; padding:22px; display:flex; align-items:flex-end; justify-content:flex-start; border:0; border-radius:0; background:linear-gradient(#20163800 55%,#20163866); box-shadow:none; cursor:pointer; }
[dir="ltr"] .hhpv-frame .hhpv-play { justify-content:flex-end; }
.hhpv-frame .hhpv-play:hover { box-shadow:none; }
.hhpv-frame .hhpv-play-pill { display:inline-flex; align-items:center; gap:10px; padding:7px 13px; padding-inline-start:7px; padding-inline-end:18px; border-radius:999px; color:#fff; background:#7c3aed; box-shadow:0 0 0 2px #ffffffe6,0 10px 30px #20163866; font-size:15px; font-weight:700; line-height:1.6; white-space:nowrap; transition:background-color .18s; }
.hhpv-frame .hhpv-play-label-narrow { display:none; }
.hhpv-frame .hhpv-play-disc { display:flex; flex-shrink:0; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; color:#7c3aed; background:#fff; }
/* A play triangle points the same way in RTL; nudge it to its optical centre. */
.hhpv-frame .hhpv-play-disc svg { margin-left:3px; }
.hhpv-frame .hhpv-play:hover .hhpv-play-pill { background:#6d28d9; }
.hhpv-frame .hhpv-play:focus-visible { outline:3px solid #fff; outline-offset:-8px; }
.hhpv-frame .hhpv-play:focus-visible .hhpv-play-pill { box-shadow:0 0 0 3px #fff,0 0 0 6px #201638; }
/* Opposite the play control, at the top. */
.hhpv-frame .hhpv-failed { position:absolute; left:12px; right:12px; top:12px; margin:0; padding:10px 14px; border-radius:10px; color:#201638; background:#fff; font-size:14px; line-height:1.8; text-align:center; pointer-events:none; }
.hhpv-cta { display:flex; justify-content:center; margin:28px 0 0; }
/* Phones play the 9:16 cut in a portrait frame, sized to stay inside one
   screen so the play control and the film's bottom line are both visible. */
@media (max-width:760px) {
  .hhpv-frame { border-radius:14px; max-width:min(100%,400px); }
  .hhpv-frame::before { padding-top:177.78%; }
  /* Lifted above the film's AI-voice line at the bottom and kept under the
     mascot; a percentage of the width is a fixed share of the 9:16 height. */
  .hhpv-frame .hhpv-play { padding:13px; padding-bottom:13%; }
  .hhpv-frame .hhpv-play-pill { gap:8px; padding:5px 10px; padding-inline-start:5px; padding-inline-end:14px; font-size:13px; }
  .hhpv-frame .hhpv-play-label-wide { display:none; }
  .hhpv-frame .hhpv-play-label-narrow { display:inline; }
  .hhpv-frame .hhpv-play-disc { width:32px; height:32px; }
  .hhpv-frame .hhpv-failed { font-size:13px; padding:8px 10px; }
}
/* Small phones: a smaller pill, so it fits between the mascot and the AI-voice line. */
@media (max-width:400px) {
  .hhpv-frame .hhpv-play-pill { gap:6px; padding:4px 9px; padding-inline-start:4px; padding-inline-end:11px; font-size:12px; }
  .hhpv-frame .hhpv-play-disc { width:26px; height:26px; }
  .hhpv-frame .hhpv-play-disc svg { width:14px; height:14px; margin-left:2px; }
}
/* The narrowest phones: only the disc shows. The button keeps its full
   accessible name. */
@media (max-width:340px) {
  .hhpv-frame .hhpv-play-pill { gap:0; padding:4px; }
  .hhpv-frame .hhpv-play-label-narrow { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .hhpv-frame .hhpv-play-pill { transition:none; }
}
/* Deliberately no hero, .hh5, body or global element overrides. The live hero
   keeps its original stylesheet and geometry; all new presentation is below it. */
.hha-body { --hha-ink:#201638; --hha-muted:#655c78; --hha-accent:#7c3aed; --hha-line:#e9e4ee; color:var(--hha-ink); background:#faf8f4; padding:0 24px; isolation:isolate; }
.hha-body * { box-sizing:border-box; }
.hha-body [hidden] { display:none!important; }
.hha-body :is(button,input,textarea,select) { font:inherit; }
.hha-body :is(button,a,input,textarea,select):focus-visible { outline:3px solid #7c3aed; outline-offset:4px; }
.hha-body :is(section,article,details)[id] { scroll-margin-top:112px; }
.hha-body :is(p,h2,h3,h4) { margin:0; }
.hha-body p { line-height:1.85; }
.hha-body button,.hha-body .hha-button { border:1px solid var(--hha-line); border-radius:9px; color:var(--hha-ink); background:#fff; min-height:38px; padding:7px 13px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; gap:8px; align-items:center; justify-content:center; text-decoration:none; transition:border-color .18s,box-shadow .18s; }
.hha-body button:hover,.hha-body .hha-button:hover { border-color:#c3afe5; box-shadow:0 3px 10px #20163808; }
.hha-body .hha-primary { color:#fff; background:#7c3aed; border-color:#7c3aed; }
.hha-body .hha-primary:hover { background:#6d28d9; }
.hha-body a { color:inherit; }
.hha-body svg { flex-shrink:0; }
.hha-body img { object-fit:contain; flex-shrink:0; }
.hha-skip { position:fixed; top:12px; inset-inline-start:12px; transform:translateY(-200%); z-index:200; padding:12px 18px; background:#fff; color:#201638; border:2px solid #7c3aed; border-radius:8px; }
.hha-skip:focus { transform:translateY(0); }
.hha-body .hha-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.hha-body .hha-section { max-width:1180px; margin:0 auto; padding:104px 0; }
.hha-body .hha-lead { padding-top:48px; padding-bottom:44px; }
.hha-body .hha-promo { padding-top:64px; padding-bottom:28px; }
.hha-body .hha-promo .hha-heading { margin-bottom:34px; }
.hha-body .hha-heading { max-width:760px; margin:0 auto 52px; text-align:center; }
.hha-body .hha-eyebrow { display:flex; align-items:center; justify-content:center; gap:8px; color:#8c6014; font-size:13px; font-weight:600; letter-spacing:.02em; margin:0 0 17px; }
.hha-body h2 { font-size:clamp(30px,3.5vw,48px); font-weight:800; line-height:1.6; letter-spacing:-.035em; }
.hha-body h2 em { color:var(--hha-accent); font-style:normal; }
.hha-body .hha-heading>p:last-of-type:not(.hha-eyebrow) { color:var(--hha-muted); font-size:17px; max-width:700px; margin:17px auto 0; }
.hha-body h3 { font-size:23px; font-weight:750; line-height:1.7; }
.hha-body h4 { font-size:17px; font-weight:700; line-height:1.8; }
.hha-body .hha-section-note { max-width:840px; text-align:center; color:var(--hha-muted); font-size:13px; margin:28px auto 0; }
.hha-body .hha-section-note a,.hha-body .hha-surface>a,.hha-body .hha-heading>a { display:inline-flex; align-items:center; gap:8px; color:var(--hha-accent); text-decoration:none; }
/* First scroll after the hero: three steps, familiar tools, one start button. */
.hha-body .hha-start { padding-top:72px; padding-bottom:64px; }
.hha-body .hha-start .hha-heading { margin-bottom:40px; }
.hha-body .hha-start-steps { list-style:none; margin:0 auto; padding:0; max-width:1040px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; counter-reset:none; }
.hha-body .hha-start-steps>li { position:relative; min-width:0; padding:26px 24px 24px; background:#fff; border:1px solid var(--hha-line); border-radius:20px; box-shadow:0 12px 32px #20163806; text-align:start; }
.hha-body .hha-start-index { display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 14px 0 12px; border-radius:14px; background:linear-gradient(140deg,#f4ecff,#fbf8f2); color:var(--hha-accent); }
.hha-body .hha-start-index small { font-size:13px; font-weight:800; color:#6236a5; }
.hha-body .hha-start-steps h3 { margin:18px 0 0; font-size:19px; line-height:1.6; font-weight:800; color:var(--hha-ink); }
.hha-body .hha-start-steps p { margin:8px 0 0; font-size:14px; line-height:1.95; color:var(--hha-muted); }
.hha-body .hha-start-tools { max-width:1040px; margin:34px auto 0; text-align:center; }
.hha-body .hha-start-tools>p { margin:0; font-size:14px; color:var(--hha-muted); }
.hha-body .hha-start-tools>div { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 26px; margin-top:16px; }
.hha-body .hha-start-tools a { display:flex; align-items:center; gap:8px; text-decoration:none; font-size:13px; color:#52465f; }
.hha-body .hha-start-cta { display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:34px; }
.hha-body .hha-start-cta .hha-button { min-height:52px; padding:12px 28px; border-radius:14px; font-size:16px; font-weight:750; box-shadow:0 14px 30px #7c3aed33; }
.hha-body .hha-start-cta small { font-size:12px; color:var(--hha-muted); text-align:center; }
.hha-body .hha-demo { background:#fff; border:1px solid var(--hha-line); border-radius:18px; overflow:hidden; box-shadow:0 12px 36px #20163806; text-align:start; }
.hha-body .hha-demo-wide { display:grid; grid-template-columns:190px minmax(0,1fr); max-width:1050px; margin:auto; box-shadow:0 18px 50px #2016380d,0 3px 8px #20163805; }
.hha-body .hha-demo-sidebar { display:flex; flex-direction:column; background:#f9f7fb; border-inline-end:1px solid var(--hha-line); padding:22px 14px; gap:12px; font-size:13px; }
.hha-body .hha-demo-brand { display:flex; align-items:center; gap:9px; margin-bottom:20px; font-size:17px; }
.hha-body .hha-demo-sidebar>span { display:flex; gap:10px; padding:9px; align-items:center; color:var(--hha-muted); }
.hha-body .hha-demo-sidebar>.hha-nav-selected { color:#6d28d9; border-radius:7px; background:#ede7f8; }
.hha-body .hha-demo-sidebar>small { margin-top:auto; padding-top:45px; font-size:10px; color:var(--hha-muted); }
.hha-body .hha-demo-main { min-width:0; }
.hha-body .hha-demo-top { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #f0edf4; padding:16px 19px; }
.hha-body .hha-demo-top>span { display:flex; align-items:center; gap:9px; font-size:13px; }
.hha-body .hha-demo-top>small { color:var(--hha-muted); font-size:10px; white-space:nowrap; }
.hha-body .hha-demo-conversation { padding:22px; }
.hha-body .hha-demo-wide .hha-demo-conversation { padding:28px 36px; }
.hha-body .hha-sequence { display:flex; flex-direction:column; gap:17px; }
.hha-body .hha-message { display:flex; gap:9px; align-items:flex-start; min-width:0; font-size:14px; }
.hha-body .hha-message>div { min-width:0; }
.hha-body .hha-message small { font-size:10px; color:var(--hha-muted); display:block; margin-bottom:5px; }
.hha-body .hha-message-body { line-height:1.95; overflow-wrap:anywhere; }
.hha-body .hha-user { justify-content:flex-start; padding-inline-start:38px; }
.hha-body .hha-user>div { margin-inline-start:auto; background:#f2ebfe; border-radius:12px 12px 3px 12px; padding:10px 14px; max-width:96%; }
.hha-body .hha-user small { display:none; }
.hha-body .hha-avatar { display:flex; align-items:center; justify-content:center; width:30px; padding-top:3px; flex-shrink:0; }
.hha-body .hha-evidence { display:flex; flex-wrap:wrap; gap:7px; padding-inline-start:38px; }
.hha-body .hha-evidence>span { display:inline-flex; align-items:center; gap:5px; border-radius:5px; padding:4px 7px; background:#f7f5fa; color:#645477; font-size:10px; }
.hha-body .hha-action-card { border:1px solid var(--hha-line); border-radius:12px; padding:17px; background:#fff; box-shadow:0 5px 18px #20163805; min-width:0; }
.hha-body .hha-card-label { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; font-size:11px; margin-bottom:13px; }
.hha-body .hha-card-label>span:first-child { display:flex; align-items:center; gap:7px; }
.hha-body .hha-pill { display:inline-flex; align-items:center; font-size:10px; line-height:1.6; color:#6d28d9; background:#f3edfd; padding:4px 8px; border-radius:6px; }
.hha-body .hha-product { display:flex; gap:16px; align-items:center; margin:18px 0; }
.hha-body .hha-product-picture { width:80px; height:80px; border-radius:10px; background:#f7f5f1; overflow:hidden; flex-shrink:0; }
.hha-body .hha-product p { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:15px; margin-top:8px; }
.hha-body .hha-product s { color:#82778d; font-size:12px; }
.hha-body .hha-product strong { color:#6d28d9; }
.hha-body .hha-product small { color:var(--hha-muted); font-size:10px; }
.hha-body .hha-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.hha-body .hha-actions button { min-height:35px; font-size:11px; padding:7px 10px; }
.hha-body .hha-quiet { font-size:12px; color:var(--hha-muted); }
.hha-body .hha-receipt { display:flex; align-items:center; gap:8px; color:#62478a; background:#f7f2fe; border-radius:7px; padding:10px; font-size:12px; }
.hha-body .hha-demo-note { color:#776c83; font-size:10px; line-height:1.85; }
.hha-body .hha-demo-composer { display:flex; align-items:center; gap:10px; margin:0 18px 17px; border:1px solid var(--hha-line); border-radius:11px; padding:10px 12px; font-size:11px; color:#82778d; }
.hha-body .hha-demo-composer>.hha-send { margin-inline-start:auto; background:#7c3aed; color:#fff; padding:6px; border-radius:7px; display:flex; }
.hha-body .hha-tour-controls { display:flex; justify-content:center; margin:0 0 20px; }
.hha-body .hha-tour-controls button { font-size:12px; background:transparent; border-color:transparent; color:var(--hha-muted); }
.hha-body .hha-tour { direction:ltr; }
.hha-body .hha-chapter { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); align-items:center; gap:55px; padding:30px 0; }
.hha-body .hha-chapter-copy { text-align:start; }
.hha-body .hha-chapter-number { color:#7d5514; display:block; font-size:14px; margin-bottom:19px; font-variant-numeric:tabular-nums; }
.hha-body .hha-chapter h3>button { font:inherit; line-height:inherit; text-align:inherit; background:transparent; border:0; padding:0; min-height:0; box-shadow:none; }
.hha-body .hha-chapter-copy p { color:var(--hha-muted); font-size:16px; margin-top:15px; }
.hha-body .hha-inline-scene { min-width:0; padding:20px; background:linear-gradient(145deg,#fbf7ef 0%,#fbf9fc 42%,#ece5fc 100%); border:1px solid var(--hha-line); border-radius:24px; }
.hha-body .hha-sticky { position:sticky; top:110px; grid-column:2; grid-row:1; min-width:0; align-self:start; margin-top:40px; padding:20px; border:1px solid var(--hha-line); border-radius:26px; background:linear-gradient(145deg,#fbf7ef 0%,#fbf9fc 42%,#e9e1fa 100%); box-shadow:0 20px 50px #20163805; }
.hha-body .hha-stage-caption { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:11px; color:var(--hha-muted); direction:rtl; margin-bottom:15px; }
.hha-body[dir="ltr"] .hha-stage-caption { direction:ltr; }
.hha-body .hha-stage-caption button { background:transparent; min-height:30px; padding:4px 7px; font-size:10px; border:0; }
.hha-body .hha-stage-visual { max-height:none; overflow:visible; animation:hha-arrive .3s ease both; }
.hha-body .hha-stage-track { display:flex; justify-content:center; gap:7px; margin-top:18px; }
.hha-body .hha-stage-track>span { width:24px; height:3px; background:#ddd4e9; border-radius:2px; }
.hha-body .hha-stage-track>span[data-active="true"] { background:#7c3aed; }
.hha-body .hha-schedule-card { border-color:#d9caf0; }
.hha-body .hha-tile-icon { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:11px; background:#f0e7fe; color:#7c3aed; }
.hha-body .hha-schedule-time { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0 12px; font-size:14px; }
.hha-body .hha-schedule-time small { color:var(--hha-muted); font-size:10px; }
.hha-body .hha-edit { display:flex; flex-direction:column; gap:8px; padding:14px 0 0; font-size:12px; }
.hha-body .hha-edit :is(input,select,textarea) { width:100%; min-width:0; border:1px solid #d7cbe7; color:#201638; background:#fff; border-radius:7px; padding:9px 10px; font-size:13px; }
.hha-body .hha-edit button { align-self:start; }
.hha-body .hha-memory-chip { display:inline-flex; align-items:center; gap:6px; color:#6d28d9; font-size:11px; margin-top:9px; }
.hha-body .hha-memory-path { display:flex; gap:8px; border-bottom:1px solid var(--hha-line); padding:4px 0 13px; color:var(--hha-muted); font-size:11px; }
.hha-body .hha-memory-fact { padding:16px 0 10px; font-size:15px; overflow-wrap:anywhere; }
.hha-body .hha-connect-scene { padding:25px 0; text-align:center; }
.hha-body .hha-connect-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:24px; }
.hha-body .hha-connect-grid>a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:14px 6px; min-width:0; border:1px solid #ebe5f0; border-radius:12px; background:#fff; text-decoration:none; font-size:10px; box-shadow:0 4px 9px #20163803; }
.hha-body .hha-connect-grid>a:hover { border-color:#c9b3ed; }
.hha-body .hha-connect-core { display:flex; flex-direction:column; align-items:center; justify-content:center; grid-column:2 / 4; grid-row:2 / 4; gap:5px; border:1px solid #ddd1ef; background:radial-gradient(circle,#fff 20%,#f1eaf9 100%); border-radius:50%; margin:15px; box-shadow:0 8px 22px #7c3aed0b; }
.hha-body .hha-connect-core strong { font-size:14px; }
.hha-body .hha-connect-scene>p { font-size:15px; margin-bottom:16px; }
.hha-body .hha-copilot-scene { background:#fff; padding:23px; border:1px solid var(--hha-line); border-radius:18px; }
.hha-body .hha-copilot-scene>header { display:flex; gap:9px; justify-content:space-between; align-items:center; margin-bottom:23px; font-size:13px; }
.hha-body .hha-copilot-scene>header>span { display:flex; align-items:center; gap:7px; }
.hha-body .hha-copilot-scene>header>small { color:var(--hha-muted); font-size:10px; }
.hha-body .hha-skill-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.hha-body .hha-skill-grid>button { display:grid; grid-template-columns:38px 1fr; text-align:start; gap:5px 9px; padding:13px 10px; font-size:11px; }
.hha-body .hha-skill-grid>button[aria-pressed="true"] { border-color:#b59adb; background:#fcf9ff; }
.hha-body .hha-skill-grid .hha-tile-icon { grid-row:1 / 3; width:36px; height:38px; }
.hha-body .hha-skill-grid small { font-size:10px; font-weight:400; color:var(--hha-muted); }
.hha-body .hha-tone-1 { background:#fff4df; color:#976414; }
.hha-body .hha-tone-2 { background:#edf1ff; color:#5066ad; }
.hha-body .hha-tone-3 { background:#f9edf7; color:#9a428a; }
.hha-body .hha-routine-steps { padding-inline-start:24px; margin:13px 0 0; font-size:12px; line-height:2.3; color:var(--hha-muted); }
.hha-body .hha-copilot-scene>.hha-demo-note { margin-top:14px; }
.hha-body .hha-case-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:28px; }
.hha-body .hha-case-tabs>button { background:transparent; border-color:transparent; font-size:14px; padding:8px 15px; }
.hha-body .hha-case-tabs>button[aria-selected="true"] { background:#efe7fa; border-color:#d8c7ef; color:#6d28d9; }
.hha-body .hha-use-cases>[role="tabpanel"] { max-width:800px; margin:auto; padding:28px; background:linear-gradient(130deg,#f4ecff,#fbf8f2 55%,#f0eaf6); border:1px solid var(--hha-line); border-radius:25px; }
.hha-body .hha-result-line { display:flex; align-items:center; gap:10px; border-top:1px solid #f0edf4; padding:12px 0; font-size:14px; }
.hha-body .hha-result-note { display:flex; align-items:center; gap:9px; background:#f7f3fc; border-radius:6px; padding:10px; font-size:12px; color:#675477; }
.hha-body .hha-nojs-cases { display:grid; gap:20px; margin-top:28px; }
.hha-body .hha-search { display:flex; align-items:center; gap:9px; width:min(100%,400px); margin:0 auto 28px; padding:10px 14px; background:#fff; border:1px solid var(--hha-line); border-radius:10px; color:var(--hha-muted); }
.hha-body .hha-search input { width:100%; min-width:0; border:0; background:transparent; color:#201638; padding:4px; font-size:14px; }
.hha-body .hha-directory-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; align-items:start; }
.hha-body .hha-directory-grid>details { border:1px solid var(--hha-line); border-radius:12px; padding:15px; background:#fff; }
.hha-body .hha-directory-grid summary { cursor:pointer; display:flex; align-items:center; gap:12px; list-style:none; }
.hha-body summary::-webkit-details-marker { display:none; }
.hha-body .hha-directory-grid summary>span:last-child { margin-inline-start:auto; color:#7c3aed; }
.hha-body .hha-directory-grid summary b { font-size:13px; display:block; }
.hha-body .hha-directory-grid summary small { font-size:10px; color:var(--hha-muted); display:block; margin-top:5px; }
.hha-body .hha-directory-grid details>p { font-size:13px; padding-top:12px; }
.hha-body .hha-three-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.hha-body .hha-surface { padding:10px 10px 26px; background:#fff; border:1px solid var(--hha-line); border-radius:16px; }
.hha-body .hha-surface-art { height:238px; border-radius:10px; border:1px solid #eee8f2; background:linear-gradient(140deg,#fbf7ef,#f7f3fc 60%,#eee6fa); display:flex; align-items:center; justify-content:center; padding:18px; margin-bottom:23px; overflow:hidden; }
.hha-body .hha-surface h3 { font-size:19px; display:flex; align-items:center; gap:8px; padding:0 12px; }
.hha-body .hha-surface>p { font-size:14px; color:var(--hha-muted); padding:12px 12px 16px; }
.hha-body .hha-surface>a { font-size:12px; margin:0 12px; }
.hha-body .hha-mini-window { background:#fff; border:1px solid #e4dbef; border-radius:12px; padding:20px 15px; text-align:center; width:100%; box-shadow:0 6px 22px #20163808; }
.hha-body .hha-mini-window>svg { margin:auto; }
.hha-body .hha-mini-window>p { font-size:12px; margin:12px 0 17px; }
.hha-body .hha-mini-window>span { display:flex; gap:8px; align-items:center; color:var(--hha-muted); padding:10px 8px; border:1px solid var(--hha-line); border-radius:7px; font-size:10px; }
.hha-body .hha-mini-chat { display:flex; flex-direction:column; gap:12px; width:100%; }
.hha-body .hha-mini-chat>img { margin:0 auto 8px; }
.hha-body .hha-mini-chat>span { display:flex; align-items:center; gap:7px; padding:10px 12px; font-size:12px; border-radius:10px; background:#fff; border:1px solid #e9dff4; }
.hha-body .hha-mini-chat>span:first-of-type { background:#f2e8fd; margin-inline-start:18px; }
.hha-body .hha-messenger-cluster { display:grid; grid-template-columns:repeat(3,1fr); align-items:center; justify-items:center; gap:25px; }
.hha-body .hha-messenger-cluster>img:last-child { grid-column:2; }
.hha-body .hha-outcome-wall { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:start; }
.hha-body .hha-outcome-wall>article { border:1px solid var(--hha-line); background:#fff; padding:24px; border-radius:15px; }
.hha-body .hha-outcome-wall>article:nth-child(3n + 2) { transform:translateY(17px); }
.hha-body .hha-outcome-top { display:flex; gap:8px; align-items:center; color:var(--hha-muted); margin-bottom:20px; }
.hha-body .hha-outcome-top>svg:last-child { margin-inline-start:auto; color:#8865b4; }
.hha-body .hha-outcome-top small { font-size:10px; }
.hha-body .hha-outcome-wall h3 { font-size:19px; margin-bottom:10px; }
.hha-body .hha-outcome-wall p { font-size:14px; color:var(--hha-muted); }
.hha-body .hha-security-card { text-align:center; padding:18px; }
.hha-body .hha-security-art { width:112px; height:112px; display:flex; align-items:center; justify-content:center; border:1px solid #e5d8f3; border-radius:26px; color:#755299; margin:0 auto 24px; background:linear-gradient(150deg,#fff,#f0e7fc); box-shadow:0 15px 30px #20163804; }
.hha-body .hha-security-card h3 { font-size:21px; margin-bottom:12px; }
.hha-body .hha-security-card p { font-size:15px; color:var(--hha-muted); }
.hha-body .hha-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.hha-body .hha-plan { padding:28px; border:1px solid var(--hha-line); border-radius:17px; background:#fff; display:flex; flex-direction:column; }
.hha-body .hha-plan[data-featured="true"] { border-color:#b99be5; background:linear-gradient(#fbf8ff,#fff 40%); box-shadow:0 0 0 3px #f0e6fc; }
.hha-body .hha-plan-mark { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--hha-muted); margin-bottom:20px; }
.hha-body .hha-plan>p { font-size:13px; color:var(--hha-muted); margin-top:9px; }
.hha-body .hha-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:9px; padding:28px 0; }
.hha-body .hha-price strong { font-size:33px; font-weight:750; }
.hha-body .hha-price span { font-size:12px; color:var(--hha-muted); }
.hha-body .hha-plan ul { padding:22px 0; margin:0; list-style:none; font-size:13px; line-height:1.85; display:flex; flex-direction:column; gap:13px; }
.hha-body .hha-plan li { display:flex; gap:8px; align-items:flex-start; }
.hha-body .hha-plan li>svg { margin-top:4px; color:#8466a8; }
.hha-body .hha-plan>small { margin-top:auto; border-top:1px solid var(--hha-line); padding-top:17px; font-size:11px; color:var(--hha-muted); line-height:1.9; }
.hha-body .hha-other-plans { margin-top:23px; display:grid; gap:12px; }
.hha-body .hha-other-plans article { padding:18px 22px; border:1px solid var(--hha-line); border-radius:12px; display:flex; gap:25px; align-items:center; justify-content:space-between; }
.hha-body .hha-other-plans h3 { font-size:16px; }
.hha-body .hha-other-plans p { font-size:12px; color:var(--hha-muted); margin-top:5px; }
.hha-body .hha-other-plans a { flex-shrink:0; }
.hha-body .hha-faq-section { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:70px; align-items:start; }
.hha-body .hha-faq-section>.hha-heading { text-align:start; margin:0; }
.hha-body .hha-faq-section .hha-eyebrow { justify-content:start; }
.hha-body .hha-faq-section .hha-heading>a { font-size:14px; margin-top:20px; }
.hha-body .hha-faq-list>details { border-bottom:1px solid #dfd8e7; padding:22px 0; }
.hha-body .hha-faq-list>details:first-child { padding-top:0; }
.hha-body .hha-faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:20px; list-style:none; cursor:pointer; font-size:16px; font-weight:650; line-height:1.8; }
.hha-body .hha-faq-list summary>span:last-child { color:#8a6aad; font-size:22px; }
.hha-body .hha-faq-list details[open] summary>span:last-child { transform:rotate(45deg); }
.hha-body .hha-faq-list details>p { padding-top:15px; color:var(--hha-muted); font-size:14px; }
.hha-body .hha-closing { text-align:center; padding:74px 38px; margin-top:20px; margin-bottom:80px; border:1px solid #e8ddf4; border-radius:26px; background:radial-gradient(ellipse at top,#f0e4fc,transparent 70%),#fcfaff; }
.hha-body .hha-closing-mark { display:flex; justify-content:center; margin-bottom:25px; }
.hha-body .hha-closing>p:not(.hha-eyebrow) { color:var(--hha-muted); font-size:16px; margin:16px auto 26px; }
.hha-body .hha-closing>small { display:block; font-size:11px; color:var(--hha-muted); margin-top:20px; }
.hha-body .hha-closing>h2 { max-width:800px; margin:auto; }
.hha-body .hha-sequence>* { animation:hha-arrive .35s both; }
.hha-body .hha-sequence>*:nth-child(2) { animation-delay:.12s; }
.hha-body .hha-sequence>*:nth-child(3) { animation-delay:.24s; }
.hha-body .hha-sequence>*:nth-child(4) { animation-delay:.42s; }
.hha-body .hha-tour[data-still="true"] * { animation:none!important; transition:none!important; }
@keyframes hha-arrive { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
/* Owner-requested pinned 01–05 story: the viewport/frame never changes size. */
.hha-body .hha-tour[data-enhanced="true"] { display:block; }
.hha-body .hha-tour[data-enhanced="true"] .hha-tour-viewport { display:grid; grid-template-rows:minmax(0,1fr); grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:55px; height:calc(100svh - 140px); min-height:0; }
.hha-body .hha-tour[data-enhanced="true"] .hha-copy-window { overflow:clip; height:100%; min-height:0; min-width:0; }
.hha-body .hha-tour[data-enhanced="true"] .hha-chapter { display:flex; height:calc(100svh - 140px); min-height:0; padding:35px 0; }
.hha-body .hha-tour[data-enhanced="true"] .hha-chapter[data-active="false"] .hha-chapter-copy { opacity:1; }
.hha-body .hha-tour[data-enhanced="true"] .hha-sticky { position:relative; top:auto; grid-column:2; grid-row:1; margin:0; height:100%; min-height:0; display:flex; flex-direction:column; }
.hha-body .hha-tour[data-enhanced="true"] .hha-stage-visual { flex:1; min-height:0; max-height:none; overflow:visible; display:flex; flex-direction:column; justify-content:safe center; }
.hha-body .hha-tour[data-enhanced="true"] .hha-stage-visual>div { flex-shrink:0; }
.hha-body .hha-tour[data-enhanced="true"] .hha-stage-caption,.hha-body .hha-tour[data-enhanced="true"] .hha-stage-track { flex-shrink:0; }

@media (max-width:1100px) {
  .hha-body .hha-directory-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hha-body .hha-chapter,.hha-body .hha-tour[data-enhanced="true"] .hha-tour-viewport { gap:30px; }
  .hha-body .hha-plan { padding:23px; }
}
@media (max-width:999px) {
  .hha-body .hha-section { padding:76px 0; }
  .hha-body .hha-chapter { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
  .hha-body .hha-inline-scene { padding:12px; }
  .hha-body .hha-chapter-copy p { font-size:14px; }
  .hha-body .hha-chapter h3 { font-size:21px; }
  .hha-body .hha-demo-wide { grid-template-columns:155px minmax(0,1fr); }
  .hha-body .hha-demo-wide .hha-demo-conversation { padding:24px; }
  .hha-body .hha-three-grid { gap:12px; }
  .hha-body .hha-surface-art { height:200px; padding:10px; }
  .hha-body .hha-surface h3 { font-size:17px; }
  .hha-body .hha-faq-section { gap:38px; }
}
@media (max-width:760px) {
  .hha-body { padding:0 18px; }
  .hha-body .hha-start { padding-top:44px; padding-bottom:44px; }
  .hha-body .hha-start .hha-heading { margin-bottom:24px; }
  .hha-body .hha-start-steps { grid-template-columns:1fr; gap:10px; }
  .hha-body .hha-start-steps>li { display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:start; padding:16px; border-radius:16px; box-shadow:none; }
  .hha-body .hha-start-index { grid-row:span 2; flex-direction:column; justify-content:center; gap:2px; width:52px; height:56px; padding:0; }
  .hha-body .hha-start-steps h3 { margin:2px 0 0; font-size:16px; }
  .hha-body .hha-start-steps p { margin:2px 0 0; font-size:13px; line-height:1.85; }
  .hha-body .hha-start-tools { margin-top:22px; }
  .hha-body .hha-start-tools>div { gap:12px 14px; }
  .hha-body .hha-start-tools a span { display:none; }
  .hha-body .hha-start-cta { margin-top:24px; }
  .hha-body .hha-start-cta .hha-button { width:100%; max-width:360px; }
  .hha-body .hha-section { padding:62px 0; }
  .hha-body .hha-lead { padding-top:32px; }
  .hha-body .hha-heading { margin-bottom:32px; }
  .hha-body .hha-heading>p:last-of-type:not(.hha-eyebrow) { font-size:15px; }
  .hha-body .hha-demo-wide { display:block; }
  .hha-body .hha-demo-sidebar { display:none; }
  .hha-body .hha-chapter { display:flex; flex-direction:column; align-items:stretch; gap:22px; padding:30px 0; }
  .hha-body .hha-chapter-copy { max-width:540px; }
  .hha-body .hha-chapter h3 { font-size:24px; }
  .hha-body .hha-chapter-copy p { font-size:15px; }
  .hha-body .hha-chapter-number { margin-bottom:10px; }
  .hha-body .hha-directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hha-body .hha-three-grid,.hha-body .hha-plan-grid,.hha-body .hha-faq-section { grid-template-columns:1fr; gap:24px; }
  .hha-body .hha-surface-art { height:245px; }
  .hha-body .hha-mini-window,.hha-body .hha-mini-chat { max-width:310px; }
  .hha-body .hha-surface h3 { font-size:21px; }
  .hha-body .hha-outcome-wall { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .hha-body .hha-outcome-wall>article { padding:18px; }
  .hha-body .hha-outcome-wall>article:nth-child(3n + 2) { transform:none; }
  .hha-body .hha-security-card { max-width:480px; margin:auto; }
  .hha-body .hha-use-cases>[role="tabpanel"] { padding:12px; }
  .hha-body .hha-case-tabs { gap:5px; }
  .hha-body .hha-case-tabs>button { font-size:12px; padding:8px 11px; }
  .hha-body .hha-other-plans article { align-items:start; flex-direction:column; gap:14px; }
  .hha-body .hha-closing { padding:54px 22px; margin-bottom:45px; }
  .hha-body .hha-actions button,.hha-body .hha-button { min-height:44px; }
}
@media (max-width:400px) {
  .hha-body { padding:0 12px; }
  .hha-body h2 { font-size:27px; }
  .hha-body .hha-demo-conversation,.hha-body .hha-demo-wide .hha-demo-conversation { padding:15px; }
  .hha-body .hha-demo-top { padding:13px 12px; }
  .hha-body .hha-demo-top>span { font-size:11px; }
  .hha-body .hha-demo-top>small { font-size:9px; }
  .hha-body .hha-user { padding-inline-start:12px; }
  .hha-body .hha-evidence { padding-inline-start:0; }
  .hha-body .hha-action-card { padding:13px; }
  .hha-body .hha-product { gap:10px; }
  .hha-body .hha-product-picture { width:60px; height:60px; }
  .hha-body .hha-product-picture img { width:60px; height:60px; }
  .hha-body .hha-product h4 { font-size:14px; }
  .hha-body .hha-outcome-wall { grid-template-columns:1fr; }
  .hha-body .hha-directory-grid { gap:8px; }
  .hha-body .hha-directory-grid>details { padding:11px; }
  .hha-body .hha-directory-grid summary { gap:7px; }
  .hha-body .hha-directory-grid summary b { font-size:11px; }
  .hha-body .hha-directory-grid summary img { width:25px; height:25px; }
  .hha-body .hha-copilot-scene { padding:15px; }
  .hha-body .hha-skill-grid>button { grid-template-columns:1fr; justify-items:start; }
  .hha-body .hha-skill-grid .hha-tile-icon { grid-row:auto; }
  .hha-body .hha-connect-grid { gap:6px; }
  .hha-body .hha-connect-grid>a { font-size:9px; }
  .hha-body .hha-connect-core { margin:6px; }
}
@media (prefers-reduced-motion:reduce) {
  .hha-body * { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
@media print {
  .hha-body .hha-tour { display:block!important; }
  .hha-body .hha-sticky { position:static; max-height:none; }
  .hha-body .hha-stage-visual { max-height:none; overflow:visible; }
  .hha-body .hha-chapter { min-height:0!important; break-inside:avoid; }
}

/* Price workflow: local demonstration, scoped away from the preserved hero. */
.hha-body .hha-workflow { outline:none; }
.hha-body .hha-workflow-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; color:#71647f; font-size:11px; }
.hha-body .hha-workflow-toolbar>span { display:flex; gap:7px; align-items:center; }
.hha-body .hha-workflow-toolbar small { font-size:10px; }
.hha-body .hha-workflow-dot { width:6px; height:6px; border-radius:50%; background:#9b72d5; }
.hha-body .hha-workflow-intro { min-height:380px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:14px 0 30px; }
.hha-body .hha-workflow-intro-mark { display:flex; align-items:center; justify-content:center; width:76px; height:76px; background:#f5effe; border:1px solid #e8dcf8; border-radius:22px; margin-bottom:18px; }
.hha-body .hha-workflow-intro h4 { font-size:22px; margin-bottom:10px; }
.hha-body .hha-workflow-intro>p { max-width:480px; color:var(--hha-muted); font-size:13px; line-height:1.95; }
.hha-body .hha-workflow-draft { width:100%; max-width:570px; text-align:start; border:1px solid #e5d9f6; border-radius:14px; padding:18px; margin-top:25px; background:linear-gradient(130deg,#fbf8ff,#fff); }
.hha-body .hha-workflow-draft>small { color:#80708f; font-size:10px; }
.hha-body .hha-workflow-draft>p { margin:8px 0 16px; font-size:14px; line-height:1.95; }
.hha-body .hha-workflow-draft button { gap:12px; min-height:42px; }
.hha-body .hha-workflow-status { display:flex; align-items:center; gap:10px; min-height:58px; }
.hha-body .hha-workflow-status>span:nth-child(2) { flex:1; min-width:0; }
.hha-body .hha-workflow-status small { display:block; font-size:10px; color:var(--hha-muted); margin-bottom:6px; }
.hha-body .hha-workflow-status strong { font-size:13px; line-height:1.8; font-weight:500; }
.hha-body .hha-workflow-status>svg { flex-shrink:0; color:#8651d4; }
.hha-body .hha-workflow-spinner { animation:hha-workflow-spin 1.3s linear infinite; }
.hha-body .hha-workflow-activity { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; padding:0; gap:8px; margin:0; }
.hha-body .hha-workflow-activity li { display:grid; grid-template-columns:24px minmax(0,1fr); gap:4px 7px; align-items:center; border:1px solid #eee9f3; border-radius:9px; padding:10px; font-size:10px; color:#8a7e96; transition:background-color .25s,border-color .25s; }
.hha-body .hha-workflow-activity li>small { grid-column:2; font-size:9px; }
.hha-body .hha-workflow-activity-icon { grid-row:span 2; display:flex; align-items:center; justify-content:center; height:24px; border-radius:7px; background:#f5f2f8; }
.hha-body .hha-workflow-activity li[data-state="active"] { background:#f8f3ff; border-color:#d9c5f6; color:#6d28d9; }
.hha-body .hha-workflow-activity li[data-state="active"] .hha-workflow-activity-icon { animation:hha-workflow-pulse 1.4s ease-in-out infinite; }
.hha-body .hha-workflow-activity li[data-state="done"] { color:#645077; background:#fbf9fd; }
.hha-body .hha-workflow-activity li[data-state="done"] .hha-workflow-activity-icon { background:#eee6f9; color:#7044a3; }
.hha-body .hha-workflow-search { display:flex; flex-wrap:wrap; align-items:center; gap:10px; border:1px dashed #e4daef; border-radius:12px; padding:22px; color:#867494; font-size:12px; min-height:185px; }
.hha-body .hha-workflow-skeleton { width:100%; display:grid; gap:12px; }
.hha-body .hha-workflow-skeleton i { height:9px; border-radius:5px; background:#eee8f5; animation:hha-workflow-pulse 1.4s ease-in-out infinite; }
.hha-body .hha-workflow-skeleton i:nth-child(2) { width:76%; animation-delay:.15s; }
.hha-body .hha-workflow-skeleton i:nth-child(3) { width:48%; animation-delay:.3s; }
.hha-body .hha-workflow-enter { animation:hha-arrive .35s cubic-bezier(.22,1,.36,1) both; }
.hha-body .hha-workflow-controls { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.hha-body .hha-workflow-controls button { font-size:10px; min-height:36px; color:#756582; background:#fcfaff; }
.hha-body .hha-workflow .hha-demo-note { margin-top:20px; }
.hha-body .hha-workflow .hha-receipt { align-items:flex-start; }
.hha-body .hha-workflow .hha-receipt small { display:block; margin-top:5px; color:#796b89; line-height:1.8; }
.hha-body .hha-workflow[data-paused="true"] * { animation-play-state:paused; }
@keyframes hha-workflow-spin { to { transform:rotate(360deg); } }
@keyframes hha-workflow-pulse { 50% { opacity:.45; } }
@media(max-width:480px) {
  .hha-body .hha-workflow-activity { grid-template-columns:1fr; gap:5px; }
  .hha-body .hha-workflow-activity li { grid-template-columns:24px 1fr auto; }
  .hha-body .hha-workflow-activity li>small { grid-column:3; }
  .hha-body .hha-workflow-activity-icon { grid-row:1; }
  .hha-body .hha-workflow-toolbar { align-items:flex-start; }
  .hha-body .hha-workflow-intro h4 { font-size:19px; }
  .hha-body .hha-workflow-draft { padding:14px; }
  .hha-body .hha-workflow-controls button { min-height:44px; }
}
@media(prefers-reduced-motion:reduce) {
  .hha-body .hha-workflow-enter,.hha-body .hha-workflow-spinner,.hha-body .hha-workflow-skeleton i,.hha-body .hha-workflow-activity li .hha-workflow-activity-icon { animation:none; }
  .hha-body .hha-workflow-activity li { transition:none; }
}

/* Keep the story legible in laptop windows after browser chrome takes its space.
   Scope density changes to the pinned stage; the approved lead demo is unchanged. */
@media (min-width:1000px) and (max-height:800px) {
  .hha-body .hha-tour[data-enhanced="true"] .hha-sticky { padding:12px; }
  .hha-body .hha-tour[data-enhanced="true"] .hha-stage-caption { margin-bottom:8px; }
  .hha-body .hha-tour[data-enhanced="true"] .hha-stage-track { margin-top:8px; }
  .hha-body .hha-sticky .hha-connect-scene { padding:0; }
  .hha-body .hha-sticky .hha-connect-grid { gap:6px; margin-bottom:8px; }
  .hha-body .hha-sticky .hha-connect-grid>a { padding:5px 6px; gap:5px; }
  .hha-body .hha-sticky .hha-connect-core { margin:8px; }
  .hha-body .hha-sticky .hha-connect-scene>p { margin-bottom:8px; }
  .hha-body .hha-sticky .hha-demo-top { padding:10px 14px; }
  .hha-body .hha-sticky .hha-demo-conversation { padding:14px; }
  .hha-body .hha-sticky .hha-sequence { gap:10px; }
  .hha-body .hha-sticky .hha-demo-composer { margin:0 14px 10px; padding:7px 10px; }
}

.hha-body .hha-reply-walkthrough>*:nth-child(2) { animation-delay:2.4s; }
.hha-body .hha-reply-walkthrough>*:nth-child(3) { animation-delay:4.8s; }
.hha-body .hha-reply-walkthrough>*:nth-child(4) { animation-delay:4.8s; }