/* Navbar CTA buttons. Signed out: light-blue "Sign up" + navy "Log in". Signed in (html.hh-authed, set by
   hi-hello-get-started.js from the saved login): only the navy "Get Started", which opens the app. */
a[data-track-item="get_started_cta"]{
  display:none !important; /* hidden until we know the visitor is logged in */
  background:linear-gradient(135deg,#10408f 0%,#0a2557 100%);
  color:#fff;
  font-weight:600;
  border-color:transparent;
  box-shadow:0 4px 12px rgba(10,37,87,.25);
  transition:filter .2s ease,box-shadow .2s ease;
}
a[data-track-item="get_started_cta"]:hover{filter:brightness(1.15);box-shadow:0 6px 16px rgba(10,37,87,.3)}
html.hh-authed a[data-track-item="get_started_cta"]{display:inline-flex !important}
html.hh-authed a[data-track-item="log_in_cta"],
html.hh-authed a[data-hh-signup],
html.hh-authed li:has(> a[data-track-item="log_in_cta"]){display:none !important}
/* label: the navbar's signed-in button is swapped to "Get Started" by CSS, so React's own text node is left untouched */
/* gap:0 — the hidden button text still counts as a flex item, and the button's 8px gap would push the label off-centre */
a[data-track-item="get_started_cta"]{font-size:0 !important;gap:0 !important;justify-content:center !important}
a[data-track-item="get_started_cta"]::after{content:"Get Started";font-size:var(--text-base,1rem);line-height:var(--text-base--line-height,1.5)}
a[data-track-item="get_started_cta"][data-hh-cta-label]::after{content:attr(data-hh-cta-label)}
/* Navbar "Sign up": same look as "Get Started" (see hi-hello-get-started.js); desktop only, like "Log in" */
a[data-hh-signup]{
  display:none;
  background:#d3e3ff;
  color:#142b55;
  font-weight:600;
  border:1px solid #a6c1f0;
  transition:background-color .2s ease;
}
a[data-hh-signup]:hover{background:#c2d8ff;border-color:#8aaae6}
@media (min-width:1280px){a[data-hh-signup]{display:inline-flex}}
/* Navbar "Log out": same soft look as "Sign up", but shown only when signed in (hi-hello-get-started.js adds it). Hidden on phones,
   where the navbar is full: there it is an item in the mobile menu instead (hi-hello-mobile-nav.js). */
a[data-hh-logout]{
  display:none !important;
  background:#d3e3ff;
  color:#142b55;
  font-weight:600;
  border:1px solid #a6c1f0;
  transition:background-color .2s ease;
}
a[data-hh-logout]:hover{background:#c2d8ff;border-color:#8aaae6}
@media (min-width:640px){html.hh-authed a[data-hh-logout]{display:inline-flex !important}}
a[data-track-item="log_in_cta"]{
  background:linear-gradient(135deg,#10408f 0%,#0a2557 100%);
  color:#fff;
  font-weight:600;
  box-shadow:0 4px 12px rgba(10,37,87,.25);
  transition:filter .2s ease,box-shadow .2s ease;
}
a[data-track-item="log_in_cta"]:hover{filter:brightness(1.15);box-shadow:0 6px 16px rgba(10,37,87,.3)}

/* Hero "Talk with Ola" button + form shadow */
button[aria-label="Talk with Ola"]{
  background:linear-gradient(135deg,#10408f 0%,#0a2557 100%);
  color:#fff;
  font-weight:600;
  box-shadow:0 4px 12px rgba(10,37,87,.25);
  transition:filter .2s ease,box-shadow .2s ease;
}
button[aria-label="Talk with Ola"]:hover{filter:brightness(1.15)}
section[data-track-section="hero"] form{
  box-shadow:0 12px 32px -4px rgba(66,137,245,.28),0 4px 12px -2px rgba(66,137,245,.18) !important;
  border-color:#dbe7fb;
}


/* "Log in" button is shown (frontend only, no auth backend); "Sign up" stays hidden */
a[data-track-item="sign_up_cta"]{display:none !important}

/* India-only demo-call popup (assets/hi-hello-india-only.js) */
.hh-io-backdrop{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,24,52,.45);backdrop-filter:blur(3px)}
.hh-io-card{width:100%;max-width:380px;background:#fff;border-radius:20px;padding:26px 24px 22px;text-align:center;box-shadow:0 24px 60px -12px rgba(16,64,143,.45);font-family:inherit}
.hh-io-card h2{margin:0 0 8px;font-size:20px;font-weight:600;color:#142b55}
.hh-io-card p{margin:0 0 20px;font-size:15px;line-height:1.5;color:#4a5a78}
.hh-io-btn{border:0;border-radius:999px;padding:11px 28px;font-size:15px;font-weight:500;color:#fff;background:#0f2f6b;cursor:pointer}
.hh-io-btn:hover{filter:brightness(1.15)}

/* Landing carousel voice-demo popup (assets/hi-hello-voice-call.js) */
.hh-vc-card{position:relative;max-width:400px}
.hh-vc-orb{width:84px;height:84px;margin:0 auto 14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7fb0ff,#2f6fe0 60%,#16399a);box-shadow:0 10px 28px -6px rgba(47,111,224,.6);display:flex;align-items:center;justify-content:center}
.hh-vc-orb span{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.85)}
#hh-vc[data-speaking="1"] .hh-vc-orb{animation:hhvcPulse 1.1s ease-in-out infinite}
#hh-vc[data-state="connecting"] .hh-vc-orb,#hh-vc[data-state="waiting"] .hh-vc-orb{animation:hhvcPulse 1.8s ease-in-out infinite}
@keyframes hhvcPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
#hh-vc[data-state="error"] .hh-vc-status{color:#c0392b}
.hh-vc-time{margin:-10px 0 14px!important;font-size:13px!important;color:#7b8aa6!important;min-height:16px}
.hh-vc-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.hh-vc-mute,.hh-vc-end{border:1px solid #d3deef;border-radius:999px;padding:11px 22px;font-size:15px;font-weight:500;background:#fff;color:#0f2f6b;cursor:pointer}
.hh-vc-end{background:#d93025;border-color:#d93025;color:#fff}
.hh-vc-note{margin:0!important;font-size:12px!important;color:#8a97ae!important}
.hh-vc-x{position:absolute;top:10px;right:14px;border:0;background:none;font-size:26px;line-height:1;color:#8a97ae;cursor:pointer}
.hh-vc-actions [hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){#hh-vc .hh-vc-orb{animation:none!important}}