/* Header (stand): new section links, a Log in link to the Merchant Portal. */
.nav__login { padding: 10px 12px; border-radius: 10px; font: 500 var(--t-medium)/1 var(--font); color: var(--text); white-space: nowrap; transition: background-color .2s; }
.nav__login:hover { background: var(--surface-2); }
.nav__menu-login { display: none; }
@media (max-width: 1180px) { .nav__links .nav__opt { display: none; } }
@media (max-width: 768.98px) {
  .nav__login { display: none; }
  .nav.is-open .nav__links .nav__opt, .nav.is-open .nav__menu-login { display: block; }
}

/* Reading progress: a thin violet-to-green line along the bottom edge of the header, with a notch where each
   section starts; passed notches turn violet. landing.js keeps it in step with the scroll. */
.nav__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.nav__progress i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 55%, var(--ok) 100%); box-shadow: 0 0 12px var(--accent-glow); }
.nav__ticks { position: absolute; inset: 0; }
.nav__ticks b { position: absolute; top: -2px; width: 2px; height: 6px; margin-left: -1px; border-radius: 1px; background: var(--line-2); transition: background-color .3s; }
.nav__ticks b.is-past { background: var(--accent); }
.nav--float .nav__progress { left: 28px; right: 28px; bottom: 0; }
/* Over the first screen the header is transparent: the progress line appears once the page scrolls. */
.nav__progress { opacity: 0; transition: opacity .4s; }
.nav.is-solid .nav__progress { opacity: 1; }

/* a: a full-width bar. Logo on the left edge, actions on the right edge, links centred on the screen.
   Transparent over the first screen; a solid blurred bar with a hairline once the page scrolls. */
.nav.nav--bar {
  top: 0; left: 0; right: 0; width: 100%; margin: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  height: 76px; padding: 0 var(--gutter); border-radius: 0;
  border: 0; border-bottom: 1px solid transparent;
}
.nav--bar .brand { justify-self: start; }
.nav--bar .nav__actions { justify-self: end; }
.nav--bar.is-solid { border-bottom-color: var(--line); box-shadow: none; }
@media (max-width: 768.98px) {
  .nav.nav--bar { grid-template-columns: 1fr auto; height: 64px; }
  .nav--bar.is-open .nav__links { left: var(--gutter); right: var(--gutter); }
}