/* ------------------------------------------------- the floating island nav */

/*
 * A pill that floats over the page and tightens as you scroll: --nav-t runs
 * 0 -> 1 over the first 90px (set by island.js), and every dimension is a
 * calc() against it, so it never snaps at a threshold.
 *
 * Shared by every page of the site. Customer-facing pages served on their
 * behalf, hosted support pages and generated legal documents, deliberately
 * do not use it; those carry the customer's own header.
 */

.nav {
  position: sticky;
  top: calc(18px - 8px * var(--nav-t, 0));
  z-index: 100;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 16px auto 0;
  padding:
    calc(8px - 3px * var(--nav-t, 0))
    calc(8px - 2px * var(--nav-t, 0))
    calc(8px - 3px * var(--nav-t, 0))
    calc(18px - 4px * var(--nav-t, 0));
  border-radius: 999px;
  background: rgba(255, 255, 255, calc(0.72 + 0.18 * var(--nav-t, 0)));
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow:
    inset 0 0 0 1px rgba(10, 37, 64, calc(0.07 + 0.02 * var(--nav-t, 0))),
    0 calc(6px - 2px * var(--nav-t, 0)) calc(24px - 9px * var(--nav-t, 0)) -8px rgba(10, 37, 64, 0.2),
    0 1px 2px rgba(10, 37, 64, 0.04);
  overflow: hidden;
  white-space: nowrap;
  transform-origin: center top;
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: calc(28px - 7px * var(--nav-t, 0));
  width: auto;
}

.nav .logo { font-size: calc(17px - 1.5px * var(--nav-t, 0)); gap: calc(9px - 1px * var(--nav-t, 0)); }
.nav .logo-mark {
  width: calc(26px - 4px * var(--nav-t, 0));
  height: calc(26px - 4px * var(--nav-t, 0));
  border-radius: calc(7px - 1px * var(--nav-t, 0));
}
.nav .logo-mark svg { width: calc(14px - 2px * var(--nav-t, 0)); height: calc(14px - 2px * var(--nav-t, 0)); }

.nav-links { display: flex; align-items: center; gap: calc(22px - 5px * var(--nav-t, 0)); }
.nav-links a { color: var(--body); font-size: calc(13.5px - 1px * var(--nav-t, 0)); font-weight: 500; }
.nav-links a:hover { color: var(--navy); }

.nav-actions { display: flex; align-items: center; gap: calc(8px - 2px * var(--nav-t, 0)); }
.nav-actions .btn {
  height: calc(34px - 5px * var(--nav-t, 0));
  padding: 0 calc(14px - 2px * var(--nav-t, 0));
  font-size: calc(13px - 0.5px * var(--nav-t, 0));
  border-radius: 999px;
}
.nav .btn-ghost:hover { background: rgba(10, 37, 64, 0.05); }

/* The pill is centred, so the page needs no offset for a full-width bar. */
body { padding-top: 0; }

/* The island tightens on a phone instead of dropping its links, they are the
   only navigation the page has. */
@media (max-width: 720px) {
  .nav { max-width: calc(100% - 20px); padding-left: calc(13px - 2px * var(--nav-t, 0)); }
  .nav-inner { gap: calc(14px - 3px * var(--nav-t, 0)); }
  .nav-links { gap: calc(13px - 2px * var(--nav-t, 0)); }
  .nav-links a { font-size: calc(12.5px - 0.5px * var(--nav-t, 0)); }
  .nav .logo { font-size: calc(15px - 1px * var(--nav-t, 0)); }
  .nav .logo-mark { width: calc(22px - 2px * var(--nav-t, 0)); height: calc(22px - 2px * var(--nav-t, 0)); }
  .nav-actions .btn { height: calc(30px - 3px * var(--nav-t, 0)); padding: 0 calc(11px - 1px * var(--nav-t, 0)); font-size: 12.5px; }
}
@media (max-width: 420px) {
  .nav-inner { gap: 10px; }
  .nav-links { gap: 10px; }
  .nav-links a { font-size: 11.5px; }
  .nav .logo span:not(.logo-mark) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .nav-inner > * { animation: none; max-width: none; opacity: 1; }
}