/* Header: navy row (logo, capsule nav, theme switch) over a teal rail of pills.
   >= 960px: sticky, rail collapses on scroll. < 960px: logo + burger, rail becomes an icon toolbar. */
.site-header { position: sticky; top: 0; z-index: 50; color: var(--chrome-text); }
.hd-inner { max-width: 1440px; margin: 0 auto; padding-inline: 16px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.hd-main { background: radial-gradient(ellipse 45% 160% at 50% 40%, var(--navy-glow), var(--navy-mid) 55%, var(--navy)); }
.hd-main .hd-inner { min-height: 76px; }
.hd-logo { display: block; width: 210px; }
.hd-logo img { display: block; width: 100%; height: auto; }
.hd-tools { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.nav-burger { display: none; }

.hd-nav .menu { list-style: none; margin: 0; padding: 0; }
.hd-nav .menu-1 { display: flex; gap: 2px; padding: 3px 6px; border: 1px solid var(--chrome-line); border-radius: 999px; background: var(--chrome-fill); }
.hd-nav li { position: relative; }
.menu-link, .menu-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding-inline: 10px; border: 0; background: transparent; color: var(--chrome-text); font: 600 13px/20px var(--font); letter-spacing: .02em; text-transform: uppercase; border-radius: 999px; cursor: pointer; text-decoration: none; }
.menu-link:hover, .menu-toggle:hover, .has-sub.open > .menu-toggle, .has-sub.open > .menu-split > .menu-link { background: rgba(255,255,255,.09); color: var(--chrome-text); }
.menu-split { display: inline-flex; align-items: center; }
.menu-caret { padding-inline: 4px; margin-left: -8px; }
.caret { width: 9px; height: 9px; transition: transform .15s; }
.has-sub.open > .menu-toggle .caret, .has-sub.open > .menu-split .caret { transform: rotate(180deg); }

/* dropdowns (desktop) */
.hd-nav .menu-2 { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); min-width: 250px; padding: 8px; border-radius: 22px; background: rgba(20, 42, 60, .96); backdrop-filter: blur(18px); box-shadow: 0 18px 40px rgba(0,0,0,.35); display: none; }
.hd-nav .menu-2::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
.hd-nav .has-sub:hover > .menu-2, .hd-nav .has-sub:focus-within > .menu-2, .hd-nav .has-sub.open > .menu-2 { display: block; }
.menu-2 .menu-link, .menu-2 .menu-toggle { display: flex; width: 100%; min-height: 40px; font: 400 14px/1.3 var(--font); text-transform: none; letter-spacing: 0; color: #f5fafc; border-radius: 999px; padding-inline: 14px; }
.menu-2 .menu-link:hover, .menu-2 .menu-toggle:hover { background: rgba(38,122,129,.65); }
.menu-2 .menu-split { display: flex; }
.menu-2 .menu-split .menu-link { flex: 1; }
.menu-2 .menu-caret { display: none; }
.menu-3 { list-style: none; margin: 0 0 6px 14px; padding: 0 0 0 10px; border-left: 1px solid var(--chrome-line); }
.menu-3 .menu-link { min-height: 34px; font-size: 13.5px; color: #cfe3e8; }

/* rail */
.hd-rail { background: linear-gradient(180deg, var(--rail-hi), var(--rail) 50%, var(--rail-lo)); border-top: 1px solid rgba(174,218,222,.12); max-height: 60px; overflow: hidden; transition: max-height .2s; }
.hd-rail .hd-inner { min-height: 50px; }
.site-header.scrolled .hd-rail { max-height: 0; border-top-width: 0; }
.rail-links { display: flex; gap: 8px; justify-content: center; }
.rail-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 5px 14px; border-radius: 999px; border: 1px solid rgba(176,213,218,.31); background: rgba(255,255,255,.055); color: var(--chrome-text); font: 400 13px/1.4 var(--font); text-decoration: none; }
.rail-pill .icon { color: #a0e4df; font-size: 15px; }
.rail-pill:hover { background: #176e73; border-color: #4b969b; color: var(--chrome-text); }
.rail-email { justify-self: start; }
.rail-links .icon { display: none; }
.rail-links .rail-trial .icon, .rail-links .rail-download .icon { display: none; }

/* theme switch (header and footer share it) */
.theme-switch { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--chrome-line); background: var(--chrome-fill); }
.theme-switch button { width: 32px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: rgba(255,255,255,.78); cursor: pointer; font-size: 15px; }
.theme-switch button:hover { color: #fff; background: rgba(255,255,255,.1); }
.theme-switch button[aria-pressed="true"] { background: #176e73; color: #fff; }

@media (max-width: 959px) {
  .hd-main .hd-inner { grid-template-columns: 1fr auto; min-height: 64px; }
  .hd-logo { width: clamp(115px, 33vw, 140px); }
  .hd-tools .theme-switch { display: none; }
  .nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #536477; border-radius: 7px; background: transparent; color: #fff; font-size: 22px; cursor: pointer; }
  .nav-burger .burger-close, .site-header.nav-open .nav-burger .burger-open { display: none; }
  .site-header.nav-open .nav-burger .burger-close { display: inline; }
  .hd-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 140px); overflow: auto; background: var(--navy); border-top: 1px solid var(--chrome-line); padding: 8px 16px 18px; }
  .site-header.nav-open .hd-nav { display: block; }
  .hd-nav .menu-1 { display: block; padding: 0; border: 0; background: transparent; border-radius: 0; }
  .hd-nav .menu-link, .hd-nav .menu-toggle { min-height: 44px; width: 100%; justify-content: flex-start; border-radius: 8px; }
  .hd-nav .menu-split { display: flex; width: 100%; }
  .hd-nav .menu-split .menu-link { flex: 1; }
  .hd-nav .menu-caret { width: 44px; justify-content: center; margin: 0; }
  .hd-nav .menu-2, .hd-nav .menu-3 { position: static; transform: none; display: none; min-width: 0; padding: 0 0 0 12px; margin: 0 0 6px; border-radius: 0; background: transparent; backdrop-filter: none; box-shadow: none; border-left: 1px solid var(--chrome-line); }
  .hd-nav .has-sub.open > .menu-2, .hd-nav .has-sub.open > .menu-3 { display: block; }
  .hd-nav .has-sub:hover > .menu-2, .hd-nav .has-sub:focus-within > .menu-2 { display: none; }
  .hd-nav .has-sub.open:hover > .menu-2, .hd-nav .has-sub.open:focus-within > .menu-2 { display: block; }
  .hd-nav .menu-2::before { display: none; }
  .menu-2 .menu-caret { display: inline-flex; }
  .hd-rail { max-height: 56px; }
  .hd-rail .hd-inner { display: flex; justify-content: center; gap: 14px; min-height: 56px; padding-block: 6px; }
  .rail-links { display: contents; }
  .rail-pill { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .rail-pill .icon, .rail-links .rail-trial .icon, .rail-links .rail-download .icon, .rail-links .icon { display: inline-block; font-size: 19px; }
  .rail-pill .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rail-download { display: none; }
  .site-header.scrolled .hd-rail { max-height: 0; }
}