/* ==========================================================================
   Homepage hero: the AI employee promise, the live meeting flow and the live app sample.
   One authored motion turns meeting statements into durable work. js/home-hero.js.
   ========================================================================== */

/* the top bar floats over the field until the page scrolls */
.topbar:not(.scrolled){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.topbar:not(.scrolled) .brand{color:var(--paper)}
.topbar:not(.scrolled) .brand svg{color:color-mix(in srgb,var(--accent) 55%,var(--paper))}
.topbar:not(.scrolled) .links{color:var(--on-primary-2)}
.topbar:not(.scrolled) .links>a:hover,.topbar:not(.scrolled) .drop:hover .drop-t,.topbar:not(.scrolled) .drop.open .drop-t{color:var(--paper)}
.topbar:not(.scrolled) .burger{color:var(--paper);border-color:color-mix(in srgb,var(--paper) 28%,transparent)}
.topbar:not(.scrolled){--focus:var(--paper)}

/* A cropped navy circle holds the introduction; the meeting sits separately on paper. */
.home-hero{--hh-out:cubic-bezier(.16,1,.3,1);--focus:var(--paper);
  margin-top:calc(var(--navh,64px) * -1);
  position:relative;overflow:clip;isolation:isolate;color:var(--paper);
  padding:calc(var(--navh,64px) + 32px) 0 48px;
  background:var(--paper)}
.home-hero ::selection{background:var(--paper);color:var(--primary)}

.home-hero .intro{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:88px}
.home-hero .intro::before{content:"";position:absolute;z-index:-1;left:50%;bottom:0;width:max(160vw,1000px);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:var(--primary);pointer-events:none}
.home-hero h1{max-width:24ch;font-size:clamp(44px,4.2vw,60px);line-height:1.04;font-weight:400;letter-spacing:-.025em;color:var(--paper);text-wrap:balance}
.home-hero h1>span{display:block}
.hh-demo-form{width:min(100%,560px);text-align:left}
.hh-email-field{display:flex;flex:1;min-width:0;padding:0 8px 0 18px}
.hh-demo-form .qf-row input{height:44px;padding:0}
.hh-demo-form .err{color:var(--paper)}
.hh-demo-form .ok-msg{background:var(--paper);color:var(--ink)}
.home-hero .lede{margin-top:20px;font-size:17px;line-height:1.55;color:var(--on-primary-2);max-width:80ch;text-wrap:balance}
.home-hero .act{margin-top:24px;width:100%;display:flex;flex-direction:column;align-items:center}

/* The app sample retains its menu | conversation | canvas structure. */
.hh-app{position:relative;max-width:1040px;margin:24px auto 0}
.hh-sample-note{margin-top:16px;text-align:center;color:var(--ink-2)}
.hx{position:relative;z-index:1}
/* two live views under the promise: the meeting and the app */
.hh-tabs{display:flex;justify-content:center;gap:4px;width:fit-content;max-width:100%;margin:28px auto 0;padding:4px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--white);--focus:var(--ink)}
.hh-tabs button{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;border:1px solid transparent;border-radius:var(--r-pill);background:transparent;font:500 14px var(--sans);color:var(--ink-2);cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
.hh-tabs button:hover{color:var(--ink);background:var(--paper)}
.hh-tabs button[aria-pressed=true]{background:var(--primary);color:var(--on-primary)}
.hh-tabs .tag{height:24px}
.hh-tabs+.hh-app{margin-top:24px}
/* Views and scenarios share one grid cell, but only the active one takes space (owner
   2026-10-30: the reserved height of the tallest scenario left empty bands under shorter
   ones, worst on phones). The card grows or shrinks below the switch the visitor clicked. */
.hh-views>.mw,.hh-views>.hx,.mw-dialogue,.mw-map{grid-area:1/1}
.hh-views>[hidden],.mw-dialogue[hidden],.mw-map[hidden]{display:none!important}

/* One conversation and its selected output share the same glance. */
.mw{position:relative;z-index:1;display:grid;grid-template-rows:auto auto minmax(0,1fr);border-radius:var(--r-card);background:var(--card);color:var(--ink);text-align:left;overflow:hidden;font-size:14px;line-height:1.45;--focus:var(--ink);
  box-shadow:0 24px 56px -32px color-mix(in srgb,var(--ink) 42%,transparent)}
.mw svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mw b{font-weight:500}
.mw-bar{display:flex;align-items:center;min-height:64px;padding:16px 24px}
.mw-t{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500}
.mw-rec{flex:none;width:6px;height:6px;border-radius:50%;background:var(--warn)}
.mw-body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.mw-body>*{min-width:0}
.mw-stage{display:grid;align-content:start;grid-template-columns:minmax(0,1fr);gap:24px;padding:24px;background:var(--primary);color:var(--on-primary)}
.mw-people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mw-person{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;margin:0;padding:12px 8px;border:1px solid transparent;border-radius:12px;background:var(--on-primary-3);text-align:center}
.mw-person figcaption{display:grid;justify-items:center;gap:3px;min-width:0;font-size:14px;overflow-wrap:anywhere}
.mw-person figcaption>span:not(.mw-ai-k){font-size:12px;color:var(--on-primary-2)}
.mw-avatar{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--on-primary) 12%,transparent);color:var(--on-primary);font-size:14px;font-weight:500}
.mw-ai{border-color:var(--accent)}
.mw-ai img{display:block;width:40px;height:48px;flex:none;border-radius:8px;object-fit:cover;object-position:50% 25%}
.mw-ai-k{padding:1px 6px;border-radius:var(--r-btn);background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:500}
.mw-scenarios{display:flex;gap:24px;padding:0 24px;border-bottom:1px solid var(--line)}
.mw-scenarios button{min-height:48px;padding:8px 4px;border:0;border-bottom:2px solid transparent;background:none;color:var(--ink-2);font:500 14px/1.3 var(--sans);cursor:pointer}
.mw-scenarios button:hover{color:var(--ink);border-bottom-color:var(--line-2)}
.mw-scenarios button[aria-pressed=true]{border-bottom-color:var(--accent);color:var(--ink)}
.mw-scenarios button:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.mw-question{position:relative;display:grid;gap:6px;width:fit-content;max-width:92%;margin:0 0 0 auto;padding:14px 18px;border-radius:var(--r-card) var(--r-card) 4px var(--r-card);background:var(--on-primary-3);font-size:15px;line-height:1.5;color:var(--on-primary)}
.mw-question::after{content:"";position:absolute;right:-7px;bottom:0;width:8px;height:12px;background:var(--on-primary-3);clip-path:polygon(0 0,0 100%,100% 100%)}
.mw-question b{color:var(--on-primary-2);font-size:13px}
.mw-reply{position:relative;width:fit-content;max-width:96%;margin-top:16px;padding:16px 18px;border-radius:var(--r-card) var(--r-card) var(--r-card) 4px;background:var(--paper);color:var(--ink)}
.mw-reply::before{content:"";position:absolute;left:-7px;bottom:0;width:8px;height:12px;background:var(--paper);clip-path:polygon(100% 0,0 100%,100% 100%)}
.mw-voice{display:block;font-size:13px;font-weight:500;color:var(--ink-2)}
.mw-cap{margin-top:6px;max-width:66ch;font-size:16px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.mw-cap b{color:var(--ink)}
.mw-side{display:flex;flex-direction:column;gap:20px;padding:28px 24px;background:var(--paper)}
.mw-flow{display:grid;flex:1}
.mw-map{display:flex;flex-direction:column;gap:24px}
/* beside a taller conversation the card takes the spare height, so no empty band opens under it */
.mw-out{display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;min-width:0;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--white)}
.mw-out-k{font-size:12px;font-weight:500;letter-spacing:.035em;text-transform:uppercase;color:var(--ink-2)}
.mw-out>b{margin-top:8px;font-size:18px;line-height:1.35}
.mw-out>small{margin-top:8px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.mw-out .hx-act{flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:16px;font-size:13px}
.mw-out .hx-act span{flex:1 0 100%;margin:0 0 4px}
.mw-out .hx-b{min-height:44px;height:auto;padding:8px 14px;font-size:14px}
.mw-out.done .hx-b[data-act]{visibility:hidden;pointer-events:none}
.mw-flow-status{padding-top:16px;border-top:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--ink-2)}
.mw [data-report-stage][hidden]{display:block!important;visibility:hidden;pointer-events:none}
.mw .mw-out[data-report-stage][hidden]{display:flex!important}
.mw-report-link{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:44px;margin-top:12px;color:var(--ink);font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.mw-report-link span{font-size:12px;font-weight:400;color:var(--ink-2);overflow-wrap:anywhere}
.mw-report-link:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:4px}
.mw-report{scroll-margin-top:calc(var(--navh,64px) + 20px)}
.mw-report:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.mw-report dl{display:grid;gap:14px;margin-top:20px}
.mw-report dl>div{display:grid;gap:4px}
.mw-report dt{font-size:12px;color:var(--ink-2)}
.mw-report dd{margin:0;font-size:14px;line-height:1.5;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .mw-dialogue[data-scenario="creative"]:not([hidden]) [data-report-stage]:not([hidden]){animation:mw-report-arrive .35s var(--hh-out) both}
}
@keyframes mw-report-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (min-width:481px) and (max-width:1100px){
  .home-hero .intro{padding-bottom:120px}
}
@media (max-width:900px){
  .mw-stage{padding:20px;gap:20px}
  .mw-side{padding:24px 20px}
  .mw-people{gap:8px}
  .mw-person{padding:10px 4px}
  .mw-person figcaption>span:not(.mw-ai-k){display:none}
  .mw-question,.mw-reply{max-width:100%}
}
@media (max-width:700px){
  .mw-body{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .hh-tabs{margin-top:24px}
  .hh-tabs button{min-height:44px;font-size:13px;padding:0 16px;gap:8px}
  .hh-tabs+.hh-app{margin-top:20px}
  .mw-bar{gap:12px;padding:12px 16px}
  .mw-t{font-size:13px}
  .mw-scenarios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 16px}
  .mw-scenarios button{min-width:0;font-size:13px}
  .mw-stage{padding:20px 16px}
  .mw-person figcaption{font-size:13px}
  .mw-avatar{width:32px;height:32px;font-size:13px}
  .mw-ai img{width:36px;height:44px}
  .mw-question,.mw-reply{padding:14px;font-size:14px}
  .mw-cap{font-size:15px}
  .mw-side{padding:24px 20px}
}
@media (max-width:480px){
  .home-hero .intro{padding-bottom:76px}
}
@media (forced-colors:active){
  .mw-scenarios button[aria-pressed=true]{outline:2px solid Highlight;outline-offset:2px}
  .mw-out{border-color:CanvasText}
}
@media (pointer:coarse){
  .hx-nav button,.hx-b{min-height:44px;height:auto}
  .hx-act{flex-wrap:wrap}
}
.hx{display:grid;grid-template-columns:150px 236px minmax(0,1fr);border-radius:var(--r-card);background:var(--card);color:var(--ink);text-align:left;overflow:hidden;font-size:12px;line-height:1.45;
  box-shadow:0 40px 80px -36px color-mix(in srgb,var(--ink) 60%,transparent),0 0 0 1px color-mix(in srgb,var(--paper) 10%,transparent)}
.hx>*{min-width:0;min-height:0}
.hx{--focus:var(--ink)}
.hx :focus-visible{outline-offset:1px}
.hx ::selection{background:var(--ink);color:var(--paper)}
.hx svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hx b{font-weight:500}

/* menu */
.hx-nav{display:flex;flex-direction:column;gap:1px;padding:10px 8px;border-right:1px solid var(--line)}
.hx-acc{display:flex;align-items:center;gap:8px;padding:6px 8px 12px;font-weight:500;white-space:nowrap}
.hx-acc span{flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;background:var(--grey);font-size:9px;font-weight:600}
.hx-nav button{display:flex;align-items:center;gap:8px;height:28px;padding:0 8px;border:0;border-radius:var(--r-btn);background:none;font:inherit;color:var(--ink-2);text-align:left;cursor:pointer;white-space:nowrap;transition:background-color .15s var(--ease),color .15s var(--ease)}
.hx-nav button:hover{background:var(--paper);color:var(--ink)}
.hx-nav button[aria-pressed=true]{background:var(--t1);color:var(--ink)}
.hx-nav svg{flex:none;width:14px;height:14px;color:var(--ink-3)}
.hx-nav [aria-pressed=true] svg{color:var(--accent-ink)}
.hx-nav em{margin-left:auto;font-style:normal;font-size:12px;color:var(--ink-2)}

/* chat column */
.hx-chat{display:grid;grid-template-rows:auto minmax(0,1fr) auto;border-right:1px solid var(--line)}
.hx-h{flex:none;display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-bottom:1px solid var(--line);font-weight:500}
.hx-h svg{width:14px;height:14px;color:var(--accent-ink)}
.hx-th{grid-area:2/1;min-height:0;display:flex;flex-direction:column;gap:9px;padding:14px}
.hx-th[hidden]{display:flex!important;visibility:hidden;pointer-events:none}
.hx-me{align-self:flex-end;max-width:90%;padding:7px 11px;border-radius:13px 13px 4px 13px;background:var(--ink);color:var(--paper)}
.hx-ai{color:var(--ink)}
.hx-mem{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:var(--r-btn);background:var(--t1);font-size:12px}
.hx-mem svg{flex:none;width:12px;height:12px;color:var(--accent-ink)}
.hx-in{grid-row:3;display:flex;align-items:center;justify-content:space-between;margin:0 10px 10px;padding:8px 10px 8px 12px;border-radius:11px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-3)}
.hx-in svg{width:13px;height:13px}
.hx-th .hx-me,.hx-th .hx-ai,.hx-th .hx-mem{animation:hx-in .4s var(--ease-out) both}
.hx-th>:nth-child(2){animation-delay:.12s}.hx-th>:nth-child(3){animation-delay:.22s}.hx-th>:nth-child(4){animation-delay:.3s}
@keyframes hx-in{from{opacity:0;transform:translateY(4px)}}

/* canvas */
.hx-cv{display:grid;background:var(--paper)}
.hx-v{grid-area:1/1;display:flex;flex-direction:column;gap:8px;padding:16px 18px;animation:hx-in .35s var(--ease-out) both}
.hx-v[hidden]{display:flex!important;visibility:hidden;pointer-events:none}
.hx-t{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px;font-size:14px;font-weight:500;letter-spacing:-.01em}
.hx-t span{font-size:12px;font-weight:400;color:var(--ink-3)}
.hx i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--mute)}
.hx i.fix{background:var(--accent)}.hx i.opp{background:var(--primary)}.hx i.watch{background:var(--warn)}
.hx-card{display:grid;gap:8px;padding:12px 14px;border-radius:14px;background:var(--card);box-shadow:var(--shadow-ui)}
.hx-k{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.hx-k span{margin-left:auto;color:var(--ink-3)}
.hx-v1{font-size:13px;font-weight:500}
.hx-diff{display:flex;align-items:center;gap:8px}
.hx-diff s,.hx-diff b{padding:2px 8px;border-radius:6px;background:var(--paper)}
.hx-diff s{color:var(--ink-3)}
.hx-diff b{background:var(--t1)}
.hx-diff svg{width:14px;height:14px;color:var(--mute)}
.hx-act{display:flex;align-items:center;gap:6px;padding-top:8px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-2)}
.hx-act span{margin-right:auto}
.hx-b{height:24px;padding:0 10px;border:0;border-radius:var(--r-pill);background:none;box-shadow:inset 0 0 0 1px var(--line-2);font:inherit;font-size:12px;color:var(--ink);cursor:pointer}
.hx-b.acc{background:var(--accent);box-shadow:none;color:var(--on-accent)}
.hx-b:hover{filter:brightness(.95)}
.hx-card.done .hx-b[data-act]{visibility:hidden;pointer-events:none}
.hh-views .hx-act .hx-actions{position:relative;display:flex;align-items:center;gap:6px;flex:0 0 auto;min-height:44px;margin:0}
.hh-views .hx-actions .hx-result{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;border-radius:var(--r-pill);background:var(--paper);color:var(--ink);font-weight:500}
.hh-views .hx-actions .hx-result[data-state="ok"]{background:var(--t1)}
.hx-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:var(--card)}
.hx-row span{margin-left:auto;color:var(--ink-3);white-space:nowrap}
.hx-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hx-kpis p{display:grid;gap:2px;padding:10px 12px;border-radius:10px;background:var(--card)}
.hx-kpis span,.hx-kpis small{font-size:12px;color:var(--ink-3)}
.hx-kpis b{font-size:17px;font-weight:400;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hx-kpis .dn{color:var(--warn-ink)}
.hx-cre{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:start}
.hx-cre img{width:100%;height:auto;border-radius:10px;box-shadow:var(--shadow-ui)}
.hx-cre>div{display:grid;gap:8px;min-width:0}
.hx-cre .hx-row{flex-wrap:wrap;gap:6px}
.hx-cre .hx-row span{margin-left:0;white-space:normal}
.hx-cre dl{margin:0;display:grid;gap:4px}
.hx-cre dl div{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px}
.hx-cre dt{width:56px;color:var(--ink-3)}
.hx-cre dd{margin:0}
.hx-bars{list-style:none;margin:0;padding:12px 14px;display:grid;gap:10px;border-radius:12px;background:var(--card)}
.hx-bars li{display:grid;grid-template-columns:110px minmax(0,1fr) 34px;align-items:center;gap:10px}
.hx-bars i{display:block;width:var(--w);height:6px;border-radius:3px;background:var(--primary)}
.hx-bars .lo i{background:var(--accent)}
.hx-bars b{text-align:right;font-variant-numeric:tabular-nums}
.hx-lr{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:baseline;gap:2px 10px;padding:9px 12px;border-radius:10px;background:var(--card)}
.hx-lr+.hx-lr{margin-top:8px}
.hx-lr>span{grid-row:1/3;color:var(--ink-3)}
.hx-lr em{font-style:normal;font-variant-numeric:tabular-nums}
.hx-lr s{color:var(--ink-3)}
.hx-lr small{grid-column:2/4;font-size:12px;color:var(--ink-3)}
.hx-lr.new{box-shadow:inset 0 0 0 1px var(--accent)}

@media (max-width:900px){
  .hx{grid-template-columns:220px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .hx-nav{grid-column:1/-1;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px}
  .hx-acc{display:none}
}
@media (max-width:640px){
  .hh-app{margin-top:44px}
  .hx{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr)}
  .hx-chat{border-right:0;border-bottom:1px solid var(--line)}
  .hx-in{display:none}
  .hx-v{min-height:250px}
  .hx-nav button,.hx-b{min-height:44px}
}
@media (prefers-reduced-motion:reduce){.hx-th .hx-me,.hx-th .hx-ai,.hx-th .hx-mem,.hx-v{animation:none}}



/* one live offer, with Meetings kept as a labelled product path */
.hh-hero-actions{justify-content:center}
.hh-hero-actions .btn-acc{box-shadow:0 18px 40px -20px color-mix(in srgb,var(--ink) 55%,transparent)}
.hh-hero-actions .go{min-height:46px;padding:0 8px;color:var(--paper)}

.home-hero .in{animation:hh-in .9s var(--hh-out) both;animation-delay:calc(var(--d,0) * 90ms)}
@keyframes hh-in{from{opacity:0;transform:translateY(14px)}}
/* the headline is the largest paint on the page (LCP): it only rises, never fades, so it is
   painted on the first frame instead of when the fade lets it through */
.home-hero h1.in{animation-name:hh-rise}
@keyframes hh-rise{from{transform:translateY(14px)}}

@media (max-width:640px){
  .home-hero{padding:calc(var(--navh,64px) + 32px) 0 40px}
  .home-hero h1{font-size:clamp(34px,9.5vw,40px)}
  .home-hero .lede{margin-top:20px;font-size:16px;line-height:1.5}
  .home-hero .act{margin-top:24px}
  .hh-demo-form .qf-row{align-items:stretch}
  .hh-demo-form .btn-acc{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .home-hero .in{animation:none}
}