/* ============ HERO — copy + one glass conversation at a time ============
   Shared by the landing page and every solutions page. Pairs with
   /ai-hire/assets/hero-convos.js (carousel driver) and the inline blanker each page
   runs right after its hero markup. */
/* the ask must never show pre-typed: hide it from FIRST PAINT — the hero
   driver lives at the end of the body behind parser-blocking scripts, so the
   page renders long before it can blank the text for typing. The driver adds
   .js and empties the asks in the same synchronous step, so no flash between. */
.hero-convos .msg.user .text { visibility: hidden; }
.hero-convos.js .msg.user .text { visibility: visible; }
/* no JS: nothing will ever type, so show the markup's full ask */
.no-js .hero-convos .msg.user .text { visibility: visible; }
/* every width shows ONE card: the three share a grid cell, .on is visible */
.hero-convos { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; width: 100%; max-width: 560px; margin: 34px auto 0; text-align: left; touch-action: pan-y; }
/* carousel: cards enter from the right, exit to the left (swipe/drag jumps) */
.hconv { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(26px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.16,1,.3,1), visibility 0s linear .35s; }
.hconv.out-left { transform: translateX(-26px); }
.hconv.on { opacity: 1; visibility: visible; transform: none;
  transition: opacity .45s ease .06s, transform .5s cubic-bezier(.16,1,.3,1) .06s, visibility 0s; }
@media (min-width: 861px) {
  /* two columns: headline/CTA left, the rotating conversation right */
  .hero--centered .hero-stack.hero-sbs { display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(32px, 4.5vw, 64px); align-items: center; text-align: left; }
  .hero-sbs .hero-copy { min-width: 0; }
  .hero-sbs .hero-copy .hero-sub { margin-left: 0; margin-right: 0; }
  .hero-sbs .hero-cta, .hero-sbs .hero-reassure { justify-content: flex-start; }
  .hero-sbs .trust-row.hero-trust { justify-content: flex-start; margin-top: 26px; }
  .hero-sbs .hero-trust .trust-stack { align-items: flex-start; text-align: left; }
  .hero-sbs .hero-convos { margin: 0; align-self: center; }
}
/* no container around the conversation — the DS glass bubble IS each message's
   .body (site-v3 .msg .body), avatar floating beside it: the early-version look */
.hconv { min-height: 262px; }
.hconv .thread { gap: 12px; }
/* the ask is typed live by the driver (.js): caret while typing, the bubble
   pops on send, and Minded's reply only lands after it */
.hconv .msg.user .text.typing::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: text-bottom; background: var(--ink-900); animation: hcvcaret 1.05s steps(1) infinite; }
@keyframes hcvcaret { 50% { opacity: 0; } }
/* Minded's on-it acknowledgment: an eyes reaction pops onto the ask bubble
   right after send, just before the reply lands */
.hconv .msg.user .hack { position: absolute; left: 12px; bottom: -10px; display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-xs); font-size: 11.5px; line-height: 1.5; opacity: 0; }
.hero-convos.js .hconv.asked .msg.user .hack { animation: hackpop .5s cubic-bezier(.22,1.2,.4,1) .15s both; transform-origin: bottom left; }
@keyframes hackpop { 0% { opacity: 0; transform: translateY(6px) scale(.2); } 65% { opacity: 1; transform: translateY(-2px) scale(1.18); } 100% { opacity: 1; transform: none; } }
.hero-convos.js .msg.minded { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1); }
/* order of the beat: send pulse → eyes reaction pops (.15s) → only then the
   thinking bubble lands (.65s) — Minded reacts BEFORE it starts thinking */
.hero-convos.js .hconv.asked .msg.minded { opacity: 1; transform: none; transition-delay: .65s, .65s; }
/* no send animation — the eyes reaction IS the beat that says "delivered,
   Minded's on it" (Gmail/Chrome cards carry no reaction; not a chat surface) */
.hconv .msg .avatar { width: 34px; height: 34px; }
/* user text sits directly in the glass panel — no inner white box */
.hconv .msg.user .text, .hconv .msg.user .text:hover { background: transparent; border: none; box-shadow: none; padding: 0; font-size: 14px; line-height: 1.6; }
.hconv .msg.minded .text { font-size: 14px; }
/* answers type directly into .m-result (no .text wrapper — element nodes drop
   in whole, so wrapped text would pop as a block instead of streaming).
   display:block matters: the DS .m-result is a column flex container, which
   stretched inline chips into full-width rows of their own (the Stripe chip
   "not hugging its content"); block flow keeps chips inline in the sentence,
   exactly like the cw panels' .cw-run .m-result. */
.hconv .m-result { display: block; font-family: var(--font-serif); font-size: 14px; line-height: 1.55; color: var(--ink-900); }
.hconv .attach { padding: 8px 12px 8px 10px; gap: 9px; }
.hconv .attach img.ft { width: 22px; height: 22px; }
/* previews animate in as they land in the typed answer: the card rises, the
   bars grow up from the baseline with a small stagger, the spike tag pops last */
.hconv .attach.aprev { animation: previn .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes previn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.hconv .aprev .pv .bars i, .hconv .aprev .pv .cb i { transform-origin: bottom; animation: barup .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes barup { from { transform: scaleY(0); } }
.hconv .aprev .pv .cb i:nth-child(1) { animation-delay: .25s; }
.hconv .aprev .pv .cb i:nth-child(2), .hconv .aprev .pv .bars i:nth-child(1) { animation-delay: .31s; }
.hconv .aprev .pv .cb i:nth-child(3), .hconv .aprev .pv .bars i:nth-child(2) { animation-delay: .37s; }
.hconv .aprev .pv .cb i:nth-child(4), .hconv .aprev .pv .bars i:nth-child(3) { animation-delay: .43s; }
.hconv .aprev .pv .cb i:nth-child(5) { animation-delay: .49s; }
.hconv .aprev .pv .cb i:nth-child(6) { animation-delay: .55s; }
.hconv .aprev .pv .cb i:nth-child(7) { animation-delay: .61s; }
.hconv .aprev .pv .tl, .hconv .aprev .pv .t2, .hconv .aprev .pv .lbl { animation: prevtx .4s ease .2s both; }
@keyframes prevtx { from { opacity: 0; } }
.hconv .aprev .pv .tag { animation: hackpop .4s cubic-bezier(.22,1.2,.4,1) .75s both; transform-origin: bottom right; }
/* minimized previews — abstract mock of the deliverable above the file row:
   readable as "a deck" / "an analysis", deliberately not ultra-real */
.hconv .attach.aprev { display: block; padding: 0; max-width: 296px; width: 100%; border-radius: 14px; overflow: hidden; }
.hconv .aprev .arow { display: flex; align-items: center; gap: 9px; padding: 8px 12px; }
.hconv .aprev .arow img.ft { width: 20px; height: 20px; }
.hconv .aprev .pv { position: relative; height: 86px; background: linear-gradient(135deg, #FDF8F4 0%, #F7F3FB 100%); border-bottom: 1px solid var(--line); }
/* deck — title slide skeleton: brand mark, two title lines, rising bar trio */
.hconv .pv.deck .pg { position: absolute; left: 14px; top: 13px; width: 15px; height: 15px; border-radius: 5px; background: linear-gradient(135deg, #FFAC6F 0%, #FF5F34 50%, #E43CFF 100%); }
.hconv .pv.deck .tl { position: absolute; left: 14px; top: 38px; font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--ink-900); white-space: nowrap; }
.hconv .pv.deck .t2 { position: absolute; left: 14px; top: 57px; font-size: 10px; line-height: 1.2; color: var(--slate-500); white-space: nowrap; }
.hconv .pv.deck .bars { position: absolute; right: 16px; bottom: 13px; display: flex; align-items: flex-end; gap: 5px; height: 42px; }
.hconv .pv.deck .bars i { width: 10px; border-radius: 3px 3px 1px 1px; background: #C9D2DC; }
.hconv .pv.deck .bars i:nth-child(1) { height: 42%; }
.hconv .pv.deck .bars i:nth-child(2) { height: 68%; }
.hconv .pv.deck .bars i:nth-child(3) { height: 100%; background: var(--slate-500); }
/* analysis — 7-day spend bars, the overspend spike flagged with a labeled tag */
.hconv .pv.chart .cb { position: absolute; inset: 26px 14px 12px; display: flex; align-items: flex-end; gap: 6px; }
.hconv .pv.chart .cb i { flex: 1; height: var(--h, 40%); border-radius: 3px 3px 1px 1px; background: #D9DFE7; }
.hconv .pv.chart .cb i.hot { background: #FF5F34; }
.hconv .pv.chart .lbl { position: absolute; top: 10px; left: 14px; font-size: 10px; font-weight: 600; color: var(--slate-600); white-space: nowrap; }
.hconv .pv.chart .tag { position: absolute; top: 9px; right: 12px; font-size: 10px; font-weight: 700; letter-spacing: .01em; color: #C9372C; background: #FFECEB; border: 1px solid #FFD5D2; padding: 2px 7px; border-radius: 999px; }
@media (max-width: 600px) {
  /* narrow screens wrap harder — a taller floor keeps the fold from pumping
     as cards of different depths swap through */
  .hconv { min-height: 340px; }
}