/* ════════════════════════════════════════════════════════════════════════
   Section scroll-spy nav — shared across every marketing page.
   A fixed column of small markers, one per section. The marker for the section
   currently crossing the viewport elongates and lights up as you scroll from
   chapter to chapter. Built + driven by /section-nav.js. Relies on the design
   tokens defined in site.css / guides.css (--accent-grad, --text3, etc.).
   ════════════════════════════════════════════════════════════════════════ */
.section-nav{
  position:fixed;left:22px;top:50%;transform:translateY(-50%);
  z-index:40;display:flex;flex-direction:column;gap:11px;padding:6px;
}
.section-nav__dot{
  display:block;width:18px;height:4px;border-radius:999px;
  background:var(--text3);opacity:.4;position:relative;cursor:pointer;
  transition:width .45s var(--ease-spring),opacity .3s,background .3s,box-shadow .3s;
}
.section-nav__dot:hover{opacity:.8;width:26px}
.section-nav__dot.active{
  width:42px;opacity:1;background:var(--accent-grad);
  box-shadow:0 0 14px var(--glow);
}
/* hover label pill to the right of each marker */
.section-nav__dot::after{
  content:attr(data-label);
  position:absolute;left:calc(100% + 12px);top:50%;
  transform:translateY(-50%) translateX(-4px);
  white-space:nowrap;font-size:11px;font-weight:600;letter-spacing:.02em;
  color:var(--text2);
  background:var(--glass-strong);border:1px solid var(--glass-border);
  padding:4px 11px;border-radius:999px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--float-sm);
  opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s var(--ease-spring);
}
.section-nav__dot:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}

@media (prefers-reduced-motion:reduce){
  .section-nav__dot{transition:none}
}
@media (max-width:980px){
  .section-nav{display:none}
}