/* Site header (website overhaul, Nov 2026): 56 px, sticky, no shadow. Used on every public page. */

/* ---- header: 56 px, sticky, no shadow ---- */
.hd { position: sticky; top: 0; z-index: 50; background: var(--ground); border-bottom: 1px solid var(--line); }
.hd-inner { max-width: 1120px; margin: 0 auto; padding: 0 16px; height: 56px; display: flex; align-items: center; gap: 16px; }
.hd-logo img { height: 32px; width: auto; display: block; }
.hd-nav { display: none; margin-left: auto; align-items: center; gap: 4px; }
.hd-nav a { font-size: 0.95rem; font-weight: 500; color: var(--ink); text-decoration: none; padding: 8px 10px; border-radius: 8px; }
.hd-nav a:hover { background: rgba(20, 48, 46, 0.06); }
.hd-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }  /* at the right edge below 980 px, where the links are hidden */
.hd .btn { padding: 9px 16px; font-size: 0.95rem; }
/* "Sign in" reads as one of the menu links: "Start a trial" is the only emphasised item (Jordan, 12 Nov 2026) */
.hd-right .link { font-size: 0.95rem; font-weight: 500; color: var(--ink); text-decoration: none; padding: 8px 10px; border-radius: 8px; }
.hd-right .link:hover { color: var(--ink); text-decoration: none; background: rgba(20, 48, 46, 0.06); }
.hd-right a { white-space: nowrap; }
@media (max-width: 979px) { .hd-right .link { padding: 8px 4px; } }  /* one line beside the trial button on a phone */
.hd-toggle { display: inline-flex; background: none; border: 0; padding: 8px; color: var(--ink); cursor: pointer; }
@media (min-width: 980px) {
  .hd-nav { display: flex; }
  .hd-nav + .hd-right { margin-left: 8px; }  /* 8 px on top of the 16 px gap: the account actions read as their own group */
  .hd-toggle { display: none; }
}
.hd-menu { display: none; border-top: 1px solid var(--line); padding: 8px 16px 16px; background: var(--ground); }
.hd-menu.is-open { display: grid; gap: 4px; }
.hd-menu a { padding: 10px 8px; color: var(--ink); text-decoration: none; font-weight: 500; border-radius: 8px; }
.hd-menu a:hover { background: rgba(20, 48, 46, 0.06); }
@media (min-width: 980px) { .hd-menu { display: none !important; } }