/* The nav's Free group (TRANSMUTATION, ELUATE, G2M), moved out of page-transmutation.css so the
   public Eluate page (eluate.html) can draw the same header without another product's CSS.
   Loaded on every page: index.html and eluate.html. */

/* The Free group: after the products, behind a hairline, with its own tag. Below 1100px the
   header has no room for it, so the strip under the header carries the same links. */
.nav-free { position: relative; display: flex; align-items: stretch; gap: 14px; padding-left: 30px; }
.nav-free::before { content: ''; position: absolute; left: 0; top: 50%; width: 1px; height: 20px; margin-top: -10px; background: var(--line); }
.nav-free__tag { align-self: center; padding: 3px 8px 3px calc(8px + .1em); border: 1px solid var(--control-line); border-radius: 999px; font: 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.free-strip { display: none; }
@media (max-width: 1100px) {
  .nav-free { display: none; }
  .free-strip { display: flex; align-items: stretch; gap: 14px; min-height: 44px; padding: 0 var(--page); border-bottom: 1px solid var(--line); background: var(--ground); }
  .free-strip .nav-free__tag { align-self: center; }
  .free-strip a { position: relative; display: flex; align-items: center; font: 12px var(--mono); letter-spacing: .12em; color: var(--muted); transition: color 160ms ease; }
  .free-strip a:hover, .free-strip a[aria-current=page] { color: var(--ink); }
  .free-strip a[aria-current=page]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); }
}