/* Login button shared by every page's navbar */
a.so-login{display:inline-flex!important;align-items:center;justify-content:center;gap:7px;flex:none;height:38px;margin-left:10px;padding:0 18px!important;
  border-radius:999px!important;background:linear-gradient(135deg,#3971B3,#27568E)!important;color:#fff!important;border:0!important;
  font:700 .88rem/1 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;letter-spacing:0!important;text-transform:none!important;
  text-decoration:none!important;white-space:nowrap;box-shadow:0 8px 18px rgba(39,86,142,.28);transition:transform .2s,box-shadow .2s,filter .2s}
a.so-login:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 12px 24px rgba(39,86,142,.34)}
a.so-login:focus-visible{outline:2px solid #27568E;outline-offset:3px}
a.so-login svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
a.so-login::before,a.so-login::after{display:none!important}
.mnav a.so-login{display:flex!important;margin:14px 0 0;height:44px}
@media (max-width:520px){a.so-login{height:34px;padding:0 13px!important;font-size:.82rem!important;margin-left:6px}}
@media (prefers-reduced-motion:reduce){a.so-login{transition:none}}
/* modules.html: keep Login beside "Get Started Free" on the right */
.mod-nav-in a.so-login{margin-left:auto}
.mod-nav-in a.so-login + .btn-cta,.mod-nav-in a.so-signup + .btn-cta{margin-left:0}

/* Sign Up button: same shape as Login, outlined so the two read as a pair */
a.so-signup{display:inline-flex!important;align-items:center;justify-content:center;gap:7px;flex:none;height:38px;margin-left:8px;padding:0 18px!important;
  border-radius:999px!important;background:#fff!important;color:#27568E!important;border:1.5px solid #3971B3!important;
  font:700 .88rem/1 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;letter-spacing:0!important;text-transform:none!important;
  text-decoration:none!important;white-space:nowrap;box-shadow:0 6px 14px rgba(39,86,142,.12);transition:transform .2s,box-shadow .2s,background .2s}
a.so-signup:hover{transform:translateY(-1px);background:#EEF4FB!important;box-shadow:0 10px 20px rgba(39,86,142,.2)}
a.so-signup:focus-visible{outline:2px solid #27568E;outline-offset:3px}
a.so-signup svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
a.so-signup::before,a.so-signup::after{display:none!important}
.mnav a.so-signup{display:flex!important;margin:10px 0 0;height:44px}
@media (max-width:520px){a.so-signup{height:34px;padding:0 13px!important;font-size:.82rem!important;margin-left:6px}}
@media (max-width:420px){a.so-login svg,a.so-signup svg{display:none}}
@media (prefers-reduced-motion:reduce){a.so-signup{transition:none}}

/* ---- keep headers from overflowing now that they carry Login + Sign Up ---- */
/* home page / ai page navbar: drop the language word, then tighten, then switch to the menu button earlier */
@media (max-width:1560px){.navbar-right .lang-txt{display:none}.navbar-right{gap:12px!important}}
@media (max-width:1380px){.navbar .nav-links{gap:16px!important}.navbar-left{gap:18px!important}.navbar a.so-login,.navbar a.so-signup{padding:0 14px!important}}
@media (max-width:1220px){.navbar a.so-login svg,.navbar a.so-signup svg{display:none}.navbar .nav-links{gap:10px!important}}
@media (max-width:1320px){.navbar .nav-links,.navbar .navbar-right{display:none!important}.navbar .burger{display:flex!important}.navbar .navbar-left{flex:1 1 auto}}
/* product pages on phones: the Sia AI pill makes way for Login + Sign Up */
@media (max-width:600px){
  a[class$="-ask"]:has(+ a.so-login){display:none!important}
  a.so-login svg,a.so-signup svg{display:none}
  a.so-login,a.so-signup{height:34px;padding:0 12px!important;font-size:.8rem!important;margin-left:6px}
  a.so-login{margin-left:auto!important}
  a.so-signup ~ a{display:none!important}   /* extra header CTAs step aside; Sign Up covers them */
}
@media (max-width:420px){
  a.so-login,a.so-signup{height:32px;padding:0 10px!important;font-size:.76rem!important;margin-left:4px}
}