/* The site header. Self-contained, like footer.css, and for the same reason.

   This site runs two design systems that share no custom properties:
   index.html and voices.html load assets/premium/*, everything else loads
   assets/css/*. The header was styled by whichever happened to be present, so
   it changed size, lost the phone number and swapped its button style when
   you clicked through to Pricing. The links were already identical by then;
   it was the styling underneath that differed.

   Hard-coded values, no var(), no dependency on .container. Loading this file
   is the whole integration, and it is loaded on every page. */

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid #d5e2ee;
}

.header-inner,
.site-nav__inner {
  width: min(1152px, calc(100% - 80px));
  /* The older pages wrap the header in .shell, which adds --page-gutter of
     inside padding on top of the width above. Same box, 32px less room, so
     the logo sat 32px further in and the button 32px further out than on the
     premium pages. The gutter is already in the width, hence zero here. */
  padding-inline: 0;
  max-width: none;
  margin-inline: auto;
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* ── brand and the number under it ──────────────────────────────────────── */

.brand-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  flex: none;
}
.brand { display: block; text-decoration: none; }
/* Three classes, deliberately. Both old stylesheets set the logo height with
   two classes and a type selector (`.brand img.brand-logo` at 44px in
   premium/site.css, `a.brand .brand-logo` at 42px in css/components.css), so
   a bare `.brand-logo` here lost to whichever one the page happened to load
   and the logo was 44px on some pages and 42px on others. */
.header .brand .brand-logo { display: block; width: auto; height: 42px; }

.header-phone {
  font-size: 13px;
  font-weight: 650;
  color: #081f38;
  text-decoration: none;
  letter-spacing: -.01em;
  line-height: 1.2;
  white-space: nowrap;
}
.header-phone:hover { color: #0066ff; }
.header-phone:focus-visible,
.brand:focus-visible {
  outline: 2px solid #0066ff;
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── the links ──────────────────────────────────────────────────────────── */

.desktop-nav,
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}
.desktop-nav a,
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: #4e647b;
  text-decoration: none;
  /* A 44px target on a 20px label: the row keeps its height even though the
     text does not fill it. */
  min-height: 44px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  position: relative;
}
.desktop-nav a:hover,
.nav-links a:hover { color: #081f38; }

/* The page you are on, marked once and quietly. */
.desktop-nav a[aria-current="page"],
.nav-links a[aria-current="page"] {
  color: #0066ff;
  font-weight: 600;
  /* The older stylesheet marks the current page with an inset box-shadow.
     Left alone, that and the bar below it both draw, and the current page
     gets two underlines. */
  box-shadow: none;
  border-radius: 0;
  background: none;
}
.desktop-nav a[aria-current="page"]::after,
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  height: 2px;
  background: #0066ff;
}
.desktop-nav a:focus-visible,
.nav-links a:focus-visible {
  outline: 2px solid #0066ff;
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── the one call to action ─────────────────────────────────────────────── */

.header .header-cta,
.header .nav-actions .btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 20px;
  border-radius: 9px;
  background: #0066ff;
  color: #fff;
  border: 1px solid #0066ff;
  font-size: 13.5px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.header .header-cta:hover,
.header .nav-actions .btn:hover { background: #0052cc; border-color: #0052cc; }
.header .header-cta:focus-visible,
.header .nav-actions .btn:focus-visible {
  outline: 2px solid #0066ff;
  outline-offset: 3px;
}

/* ── mobile ─────────────────────────────────────────────────────────────── */

.menu-button,
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #081f38;
  flex: none;
}
.menu-button svg,
.nav-toggle svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.menu-button:focus-visible,
.nav-toggle:focus-visible { outline: 2px solid #0066ff; outline-offset: 2px; }

.mobile-menu {
  display: none;
  flex-direction: column;
  padding: 8px 0 18px;
  width: min(1152px, calc(100% - 80px));
  margin-inline: auto;
  border-top: 1px solid #d5e2ee;
}
.mobile-menu a {
  font-size: 15px;
  color: #081f38;
  text-decoration: none;
  padding: 13px 2px;
  border-bottom: 1px solid #eef3f8;
}
.mobile-menu a:last-child {
  border-bottom: 0;
  margin-top: 12px;
  background: #0066ff;
  color: #fff;
  text-align: center;
  border-radius: 9px;
  font-weight: 650;
  padding: 13px 18px;
}
.mobile-menu a:focus-visible { outline: 2px solid #0066ff; outline-offset: 2px; }

@media (max-width: 900px) {
  .header-inner, .site-nav__inner { width: calc(100% - 40px); gap: 16px; }
  .mobile-menu { width: calc(100% - 40px); }
  .desktop-nav, .nav-links { gap: 20px; }
  .desktop-nav a, .nav-links a { font-size: 13.5px; }
}

@media (max-width: 820px) {
  .desktop-nav, .nav-links { display: none; }
  .menu-button, .nav-toggle { display: flex; }
  .header .header-cta, .header .nav-actions .btn { display: none; }
  .mobile-menu:not([hidden]) { display: flex; }
  .header-inner, .site-nav__inner { min-height: 70px; }
  .header .brand .brand-logo { height: 36px; }
  .header-phone { font-size: 12px; }
}