/* Octopus site top bar: logo (blue scribble + word), flag, then Log in / Request a demo / Try it now on the right. Loaded after styles.css. */
/* primary blue = Octopus desktop app blue (app icon / boot splash #165DFB); white on it = 5.3:1 */
:root{--primary:#165dfb;--primary-hover:#0f4ad1;--primary-active:#0c3fb5}
.nav{--g:clamp(14px,2.2vw,26px)}
.nav .logo{display:inline-flex;align-items:center;gap:8px}
.nav .logo-mark{width:25px;height:24px;display:block}
.nav ul{flex:1;margin-left:16px;gap:var(--g)}
/* the language flag is appended last by i18n.js: place it first, right after the logo; the 3 buttons sit close together on the right */
.nav ul>li:last-child{order:-1;margin:0}
.nav ul li.tight{margin-left:calc(8px - var(--g))}
.nav ul li.tight:first-child{margin-left:auto}
.nav ul li.tight:nth-child(2){margin-left:calc(18px - var(--g))}
.nav ul li{display:flex;align-items:center}
.nav ul a{font-weight:380;line-height:1.2}
.nav ul a.login{color:var(--fg);display:inline-flex;align-items:center;gap:7px;font-weight:520;letter-spacing:.01em}
.nav ul a.nbtn{display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;font-size:13.5px;font-weight:520;letter-spacing:.01em;white-space:nowrap;transition:background .2s,border-color .2s}
.nav ul a.nbtn.light{background:#fff;color:var(--fg);border:1px solid #d0d0d0}
.nav ul a.nbtn.light:hover{border-color:#bdbdbd;color:var(--fg)}
.nav ul a.nbtn:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
@media (max-width:760px){
  /* row 1: logo, flag, Log in (right) ; row 2: Request a demo, Try it now */
  .nav{flex-wrap:wrap;justify-content:flex-start;gap:10px 8px;padding:12px var(--gut)}
  .nav-brand{order:-2;margin-right:6px}
  .nav ul{display:contents}
  .nav ul>li:last-child{order:-1}
  .nav ul li.tight,.nav ul li.tight:first-child{margin-left:0}
  .nav ul li.tight:first-child{margin-left:auto}
  .nav ul a.nbtn{padding:7px 12px;font-size:12.5px}
  .nav ul a{font-size:12.5px}

}

/* .btn-primary: THE main button (blue, white text). Always has an icon (inline SVG or img) before the label. */
.btn-primary,.nav ul a.nbtn.btn-primary,.doc a.cta-inline.btn-primary,.plan .obtn.btn-primary,.plan.main:hover .obtn.btn-primary{background:var(--primary);color:#fff;border:1px solid var(--primary)}
.btn-primary:hover,.nav ul a.nbtn.btn-primary:hover,.doc a.cta-inline.btn-primary:hover,.plan.main:hover .obtn.btn-primary{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}
.btn-primary:active,.nav ul a.nbtn.btn-primary:active,.doc a.cta-inline.btn-primary:active{background:var(--primary-active);border-color:var(--primary-active)}
.btn-primary:focus-visible,.nav ul a.nbtn.btn-primary:focus-visible,.doc a.cta-inline.btn-primary:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.nav ul a.nbtn.btn-primary{gap:7px}
.nav ul a.nbtn svg{flex:none}

/* ---- App shell (like octopus-brain.com): blue frame all around, nav on the blue, white rounded panel that scrolls inside ---- */
html,body{background:var(--primary)}
body{height:100dvh;min-height:0;overflow:hidden}
.nav{position:static;flex:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0;padding-top:10px;padding-bottom:10px}
.shell{flex:1;min-height:0;margin:0 7px 7px;border-radius:14px;background:#fff;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:#d4d4d4 transparent}
.shell>main{flex:1 0 auto;padding-top:56px}
.shell>main.home{padding-top:28px}
.shell>footer{flex:none}
/* blue bar: white logo + text, white outline demo button, white primary */
.nav .logo{color:#fff}
.nav ul a.login{color:#fff}
.nav .lang{box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.nav .lang:hover{box-shadow:0 0 0 1px #fff}
.nav ul a.nbtn.light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.7)}
.nav ul a.nbtn.light:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.nav ul a.nbtn.btn-primary{background:#fff;color:var(--primary);border:1px solid #fff}
.nav ul a.nbtn.btn-primary:hover{background:#e8efff;border-color:#e8efff;color:var(--primary)}
.nav ul a.nbtn.btn-primary:active{background:#d6e2ff;border-color:#d6e2ff}
.nav ul a:focus-visible,.nav .logo:focus-visible{outline:2px solid #fff;outline-offset:3px}
.nav ul a.nbtn.btn-primary:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:760px){
  .shell{margin:0 5px 5px}
  .shell>main,.shell>main.home{padding-top:28px}
  main,main.home{padding-top:28px}
}

/* Squircle corners on the panel (corner smoothing like iOS/Figma, a bit softer): corner-shape needs a recent Chromium (Chrome/Brave/Edge 139+);
   other browsers keep the plain 14px round corners above. The radius is larger because a squircle of radius r looks like a ~0.6r round corner. */
@supports (corner-shape: squircle){
  .shell{border-radius:24px;corner-shape:squircle}
  @media (max-width:760px){.shell{border-radius:20px}}
}

/* Intro splash on /home: Octopus blue background, white scribble + word, light tagline */
.splash{background:var(--primary);color:#fff}
.scr.big.obig .labs{color:#fff}
.splash-tag{color:rgba(255,255,255,.72)}
@media (max-width:760px){.nav ul li.tight:nth-child(2){margin-left:6px}}