/* Live hero demo. Uses the site's color tokens, works in light and dark. */
.mock-stage.hh{min-height:0;min-width:0;width:100%;max-width:100%;position:relative;display:flex;flex-direction:column;gap:14px}
.hh-label{font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-link)}
.hh-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hh-pause{flex:none;min-height:32px;padding:0 12px;border-radius:9999px;border:1.5px solid var(--color-line);background:var(--color-ink);color:var(--color-paper);font-size:.8125rem;font-weight:600;cursor:pointer}
.hh-pause:hover{border-color:var(--color-link)}
.hh-pause:focus-visible{outline:2px solid var(--color-link);outline-offset:2px}
.hh-pause[aria-pressed=true]{border-color:var(--color-link);background:var(--color-ink-3)}

.hh-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:8px -4px 0;padding:2px 4px 4px;scroll-snap-type:x proximity}
.hh-tabs::-webkit-scrollbar{display:none}
.hh-tab{flex:none;scroll-snap-align:start;min-height:38px;padding:.45rem .9rem;border-radius:9999px;border:1.5px solid var(--color-line);background:var(--color-ink);color:var(--color-paper);font-size:.875rem;font-weight:500;white-space:nowrap;cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.hh-tab:hover{border-color:var(--color-link)}
.hh-tab[aria-selected=true]{background:var(--accent);border-color:transparent;color:#fff;font-weight:600}
.hh-tab:focus-visible{outline:2px solid var(--color-link);outline-offset:2px}

.hh-panel{position:relative;min-width:0;display:flex;flex-direction:column;height:480px;border-radius:24px;border:1px solid var(--color-line);background:var(--color-ink);box-shadow:0 1px 2px #0f1f3e0f,0 24px 60px -18px #0f1f3e40;overflow:hidden}
.hh-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--color-line);font-size:13px;font-weight:600;color:var(--color-mute)}
.hh-dot{width:8px;height:8px;border-radius:9999px;background:#2fbf71;box-shadow:0 0 0 4px #2fbf7126}
.hh-bar-t{color:var(--color-paper)}
.hh-clock{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.hh-i{width:18px;height:18px}
.hh-i-sm{width:14px;height:14px}

.hh-feed{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 28px);mask-image:linear-gradient(180deg,transparent 0,#000 28px);list-style:none;margin:0;padding:16px 18px 8px;flex:1;display:flex;flex-direction:column;gap:10px;overflow:hidden;justify-content:flex-end}
.hh-item{animation:hh-pop .32s cubic-bezier(.2,.8,.3,1) both;font-size:14px;line-height:1.45}
@keyframes hh-pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.hh-in,.hh-out{max-width:84%;padding:10px 14px;border-radius:18px}
.hh-in{align-self:flex-start;background:var(--color-ink-3);color:var(--color-paper);border-bottom-left-radius:6px}
.hh-out{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:6px}
.hh-out .pill-ok{margin-top:8px}
.hh-who{font-size:11px;font-weight:600;color:var(--color-mute);margin-bottom:2px}
.hh-in-short{padding:8px 14px}

.hh-typing{display:flex;gap:4px;padding:12px 14px;border-radius:18px;width:max-content}
.hh-typing.hh-in{background:var(--color-ink-3)}
.hh-typing.hh-out{align-self:flex-end;background:var(--color-ink-3)}
.hh-typing span{width:6px;height:6px;border-radius:9999px;background:var(--color-mute);animation:hh-blink 1s infinite}
.hh-typing span:nth-child(2){animation-delay:.15s}
.hh-typing span:nth-child(3){animation-delay:.3s}
@keyframes hh-blink{0%,60%,100%{opacity:.3}30%{opacity:1}}

.hh-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1px solid var(--color-line);background:var(--color-ink-2)}
.hh-card > div{flex:1;min-width:0}
.hh-ico{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:var(--color-ink-3);color:var(--color-link)}
.hh-t{font-weight:600;color:var(--color-paper)}
.hh-s{font-size:12.5px;color:var(--color-mute)}
.hh-pill-r{flex:none}
.hh-approve{border-color:var(--color-link)}
.hh-ok{flex:none;min-height:36px;padding:0 16px;border-radius:9999px;border:0;background:var(--accent);color:#fff;font-size:13px;font-weight:700;cursor:pointer;animation:hh-pulse 1.6s ease-in-out infinite}
.hh-ok:focus-visible{outline:2px solid var(--color-link);outline-offset:2px}
@keyframes hh-pulse{0%,100%{box-shadow:0 0 0 0 #2b61df66}50%{box-shadow:0 0 0 8px #2b61df00}}

.hh-foot{padding:0 18px 16px;min-height:28px}
.hh-hint{font-size:12.5px;color:var(--color-mute);text-align:right}
.hh-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-top:12px;border-top:1px solid var(--color-line);animation:hh-pop .35s ease both}
.hh-sum{flex-basis:100%;font-family:var(--font-display);font-weight:700;font-size:1.0625rem;color:var(--color-paper)}
.hh-cta{min-height:44px}
.hh-again{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--color-link);font-size:13px;font-weight:600;cursor:pointer;padding:6px}
.hh-finished .hh-feed{gap:8px}
.hh-finished .hh-feed .hh-item:first-child{display:none}

@media (max-width:640px){
  .hh-panel{height:500px}
  .hh-in,.hh-out{max-width:92%}
  .hh-cta{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .hh-item,.hh-cta-row{animation:none}
  .hh-ok,.hh-typing span{animation:none}
  .hh-tab,.hh-pause{transition:none}
}
/* Hint that the business tabs scroll sideways */
.hh-tabs{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent)}
.hh-tabs.hh-end{-webkit-mask-image:none;mask-image:none}

/* Dark theme: follows the system unless the visitor picked light, or when they picked dark */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .hh-panel{background:var(--color-raised);box-shadow:0 24px 60px -18px #000000a0}
  :root:not([data-theme=light]) .hh-card{background:#22386a;border-color:#2a3f6b}
  :root:not([data-theme=light]) .hh-ico{background:#0f1f3e;color:#fff}
}
:root[data-theme=dark] .hh-panel{background:var(--color-raised);box-shadow:0 24px 60px -18px #000000a0}
:root[data-theme=dark] .hh-card{background:#22386a;border-color:#2a3f6b}
:root[data-theme=dark] .hh-ico{background:#0f1f3e;color:#fff}