/* Production glue for the r5 pages (home, /staffing, /research), on top of site.css and the pages' own CSS.
   Only what the drafts don't carry: the in-page interviews (fnb-live.js on the home, research-live.js on
   /research), the privacy notices under the demos, and the header's Try free / Sign in. */

/* ---------- header: Try free (and Book a demo where Sign in is the filled button) as white pills,
   so they read on the painted heroes as well as on the scrolled bar ---------- */
.site-nav .nav-actions{gap:8px}
.site-nav .nav-actions .nav-try,.site-nav .nav-actions .nav-studio{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(20,21,20,.08);
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);font-size:15px;font-weight:500}
.site-nav .nav-actions .nav-try:hover,.site-nav .nav-actions .nav-studio:hover{background:#fff;border-color:rgba(20,21,20,.2);transform:none}

/* ---------- home: the orb starts the conversation on this page ---------- */
.demo--home .uh-orb--start{position:relative;display:block;width:280px;height:280px;border-radius:50%;overflow:hidden;cursor:pointer;isolation:isolate;
  background:radial-gradient(closest-side,#f3f8f4 0%,#e6f0e9 100%);box-shadow:0 24px 60px rgba(46,107,68,.22),0 4px 16px rgba(17,20,24,.08);transition:transform .25s ease,box-shadow .25s ease}
.demo--home .uh-orb--start:hover{transform:scale(1.03);box-shadow:0 28px 70px rgba(46,107,68,.3),0 4px 16px rgba(17,20,24,.1)}
.demo--home .uh-orb__icon{position:absolute;inset:0;z-index:1;display:grid;place-items:center;color:#fff}
.demo--home .uh-orb__icon svg{width:58px;height:58px;filter:drop-shadow(0 4px 14px rgba(17,20,24,.18))}
.demo--home .uh-live__state{margin:0;max-width:320px;text-align:center;font-size:16px;line-height:1.5;color:var(--ink2)}
.demo--home .uh-live__state:empty{display:none}
.demo--home .uh-live__state a{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.demo--home .uh-live__end{display:none;height:52px;padding:0 30px;border-radius:999px;border:1px solid rgba(20,21,20,.16);background:#fff;color:var(--ink);font:inherit;font-size:16px;font-weight:500;cursor:pointer}
.demo--home .uh-live__end:hover{border-color:var(--green);color:var(--green)}
/* while the conversation runs, the orb stays (it breathes while the agent talks) and End replaces the button */
.demo--home :is([data-phase="connecting"],[data-phase="listening"],[data-phase="speaking"]) .demo__cta{display:none}
.demo--home :is([data-phase="connecting"],[data-phase="listening"],[data-phase="speaking"]) .uh-live__end{display:inline-flex;align-items:center}
.demo--home :is([data-phase="connecting"],[data-phase="listening"],[data-phase="speaking"]) .uh-orb--start{pointer-events:none}
.demo--home [data-phase="connecting"] .uh-orb--start{opacity:.7}
.js-motion .demo--home [data-phase="speaking"] .uh-orb--start{animation:uhtalk 1.5s ease-in-out infinite alternate}
@keyframes uhtalk{to{transform:scale(1.05)}}

/* the notice under every demo (owner rule 2026-10-01) */
.uh-demo__notice,.rh-try-notice{margin:0;font-size:15px;line-height:1.5;color:var(--mute);text-align:center}
.uh-demo__notice a,.rh-try-notice a{color:inherit;text-decoration:underline;text-decoration-color:rgba(20,21,20,.3);text-underline-offset:3px}
.uh-demo__notice a:hover,.rh-try-notice a:hover{color:var(--ink)}
.demo--home .uh-demo__notice{padding:0 24px 26px}
.dmodal .uh-demo__notice{margin-top:18px;text-align:left}

/* ---------- research: the orb is a real button that starts the interview on this page ---------- */
.ltry__live{display:flex;flex-direction:column;align-items:center}
button.lorb{border:0;padding:0;background:none;cursor:pointer;font:inherit}
.ltry__live[data-phase="connecting"] .lorb{opacity:.7}
.js-motion .ltry__live[data-phase="speaking"] .lorb{animation:uhtalk 1.5s ease-in-out infinite alternate}
.ltry__end{margin-top:18px}
.ltry .rh-try-notice{margin-top:16px;max-width:340px}

@media (max-width:640px){
  .demo--home .uh-orb--start{order:1;align-self:center;width:150px;height:150px}
  .demo--home .uh-orb__icon svg{width:40px;height:40px}
  .demo--home .uh-live__state,.demo--home .uh-live__end{order:5;align-self:center;margin-top:16px}
  .demo--home .uh-demo__notice{padding:0 18px 20px}
}
@media (prefers-reduced-motion:reduce){
  .js-motion .demo--home [data-phase="speaking"] .uh-orb--start,.js-motion .ltry__live[data-phase="speaking"] .lorb{animation:none}
}

/* ---------- the interview popups: research, the home and the staffing call share one look (prod.js,
   staffing-call.js) ---------- */
/* above the consent banner (z-index 2147483000), which is inert behind it while the dialog is open */
.rpop{z-index:2147483001}
.rpop__box{text-align:center}
.rpop__slot{margin-top:24px}
.rpop .ltry__live{align-items:center}
.rpop .lorb{width:200px}
.rpop .ltry__state{margin-top:18px}
.rpop .ltry__end{margin-top:16px}
.dmodal .rpop__box :is(.rh-try-notice,.uh-demo__notice){margin:18px auto 0;padding:0;max-width:340px;font-size:14px;text-align:center}
/* In the popups the data link sits on its own line (Navid, 3 Nov 2026). */
.dmodal .rpop__box :is(.rh-try-notice,.uh-demo__notice) a{display:table;margin:4px auto 0}
@media (max-width:640px){.rpop .lorb{width:168px}}

/* recordings: the browser's own player without JavaScript, the page's player with it */
[data-player] audio{display:block;width:100%;margin-top:12px}
.js-motion [data-player] audio{display:none}
html:not(.js-motion) [data-player] .play{display:none}

/* reduced motion: the orbs and the live dot hold still (site.css animates them without an override) */
@media (prefers-reduced-motion:reduce){
  .js-motion .lorb,.js-motion .lorb__g,.js-motion .uorb__l--a,.js-motion .uorb__l--b,.js-motion .uorb__l--c,.js-motion .demo__live i{animation:none}
  /* Six ways (/research): rows open and pictures swap at once; no progress bar, since the rows don't turn by themselves */
  .acc__body,.acc__head,.acc__stage img{transition:none}
  .acc__prog{display:none}
  /* the dialogs (staffing call, research interview) appear without the phone slide-in */
  .js-motion .dmodal:not([hidden]) .dmodal__box{animation:none}
}