/* Site header: logo, dropdown menus (Product / Solutions / Compare / Pricing), phone drawer. Shared by the
   marketing pages and the landing page so both behave the same on every screen size. */
header.site { position:sticky; top:0; z-index:5; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line) }
header.site .in { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:12px; padding-bottom:12px; flex-wrap:nowrap } /* side gutters come from .wrap */
header.site .cta { display:flex; gap:8px; align-items:center }
.brand { display:flex; align-items:center; gap:8px; font-weight:800; font-size:19px; color:var(--ink); text-decoration:none }
.brand img { width:26px; height:26px }
.brand b { color:var(--orange) }
nav.main { display:flex; gap:2px; align-items:center }
nav.main > a, nav.main .dd > button { color:var(--muted); font-size:14px; padding:8px 10px; border-radius:9px; background:none; border:0; font:inherit; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; gap:4px; text-decoration:none }
nav.main > a:hover, nav.main > a.on, nav.main .dd:hover > button, nav.main .dd.open > button, nav.main .dd.on > button { color:var(--ink); background:var(--tint) }
nav.main > a.on, nav.main .dd.on > button { font-weight:600 }
nav.main .i { width:14px; height:14px; display:inline-block }
.dd { position:relative }
.dd .menu { position:absolute; left:0; top:calc(100% + 8px); background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 48px -24px rgba(32,34,36,.35); padding:14px; display:none; min-width:240px; z-index:20 }
/* wide menus hang from the header bar itself, centred, so they can never run off the screen at tablet widths */
header.site .in { position:relative } .dd.wide { position:static }
.dd.wide .menu { grid-template-columns:1fr 1fr; gap:6px 26px; left:0; right:0; top:calc(100% - 4px); width:max-content; max-width:min(100%, 640px); margin:0 auto }
.dd.wide.three .menu { grid-template-columns:1fr 1fr 1fr; max-width:min(100%, 860px) }
.dd:hover .menu, .dd.open .menu, .dd:focus-within .menu { display:block }
.dd.wide:hover .menu, .dd.wide.open .menu, .dd.wide:focus-within .menu { display:grid }
.dd .col h5 { margin:6px 0 4px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.dd .mi { display:block; padding:6px 8px; border-radius:8px; font-size:14px; color:var(--ink); text-decoration:none }
.dd .mi:hover, .dd .mi.on { background:var(--tint); color:var(--orange) }
#navBtn { display:none; width:40px; height:40px; border-radius:11px; border:1px solid var(--line); background:#fff; color:var(--ink); align-items:center; justify-content:center; cursor:pointer; padding:0 }
#navBtn .i { width:22px; height:22px }
.drawer { display:none }
body.nav-open .drawer { display:block; position:absolute; left:0; right:0; top:100%; height:calc(100vh - 61px); height:calc(100dvh - 61px); background:#fff; z-index:30; overflow:auto; padding:10px 20px 40px; border-top:1px solid var(--line) }
body.nav-open { overflow:hidden }
.drawer details { border-top:1px solid var(--line); padding:12px 0 }
.drawer summary { font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between }
.drawer summary::-webkit-details-marker { display:none }
.drawer .mi { display:block; padding:8px 0 8px 12px; color:var(--muted); text-decoration:none }
.drawer > a { display:block; padding:12px 0; border-top:1px solid var(--line); font-weight:600; color:var(--ink); text-decoration:none }
/* phones and small tablets: menu on the left, logo in the middle, one button on the right */
@media (max-width:900px){
  header.site .in { display:grid; grid-template-columns:minmax(40px,1fr) auto minmax(40px,1fr); align-items:center; gap:10px; padding-top:10px; padding-bottom:10px }
  header.site .cta { justify-self:end } #navBtn { justify-self:start }
  #navBtn { display:inline-flex }
  .brand { justify-content:center; font-size:18px }
  nav.main { display:none }
  header.site .cta .ghost { display:none }
  header.site .cta .btn.sm { padding:9px 12px; white-space:nowrap }
}
@media (max-width:380px){ .brand span { display:none } .brand img { width:30px; height:30px } }