/* The site nav's product panels (Remove · Cue · Pricing) and the product-column footer ("Footer A").
   Shared by every page (home, /cue/, /privacy/, /credits/) on top of black/style.css or cue/nav.css. Moved from
   cue/nav.css on 6 Nov 2026 so the whole site wears one nav. Script: site-nav.js + nav-cam.js. */
/* ---- Products + hover (picked 5 Nov): 4 items on top; a product's sections open under it.
   The panel is a Vanish selection drawn from the link's top-left corner, the way you'd drag one out:
   clip-path grows it from the box on the link down to the full panel. ---- */
.nl-item { position: relative; display: flex; }
.nl-panel { position: absolute; top: 41px; left: 4px; z-index: 2; display: grid; min-width: 200px; padding: 8px 6px; background: #fff;
  border: 1px dashed rgba(29, 29, 31, 0.55); border-radius: 2px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.22);
  clip-path: inset(-6px calc(100% + 6px) calc(100% + 6px) -6px); visibility: hidden;
  transition: clip-path 360ms var(--ease-out), visibility 0s linear 360ms; }
.nl-item.is-open .nl-panel, .nl-item:focus-within .nl-panel { clip-path: inset(-6px -6px -6px -6px); visibility: visible; transition: clip-path 380ms var(--ease-out), visibility 0s; }
.nl-panel .nl-ph i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--label); }
.nl-panel .nl-ph i:nth-child(1) { left: -3px; top: -3px; } .nl-panel .nl-ph i:nth-child(2) { right: -3px; top: -3px; }
.nl-panel .nl-ph i:nth-child(3) { left: -3px; bottom: -3px; } .nl-panel .nl-ph i:nth-child(4) { right: -3px; bottom: -3px; }
.nl-links .nl-panel a { height: 36px; padding: 0 12px; border-radius: 4px; font-size: 13.5px; color: var(--label-2); }
.nl-links .nl-panel a:hover { color: var(--label); background: var(--fill); }
.nl-links .nl-panel a:focus-visible { outline: 2px solid var(--label); outline-offset: -2px; }
.nl-sheet .nl-sub { margin: -6px 0 10px 2.75rem; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.nl-sheet .nl-sub a { display: inline-flex; align-items: center; min-height: 36px; font-size: 16px; color: var(--label-2); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .nl-panel, .nl-item.is-open .nl-panel { transition: none; } }
/* ---- Product card panel, marquee drag (6 Nov). Only items with [data-cam] (the /cue nav); /new keeps the panel above.
   Open: the selection box under the link is dragged out by its bottom-right handle to the full panel. The frame and the
   body's clip read the same registered lengths, so the white body is uncovered exactly by the moving corner.
   Preview: a live Cue camera over a minimap of the destination page (nav-cam.js). ---- */
@property --fx { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fw { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fh { syntax: "<length>"; inherits: false; initial-value: 0px; }
.nl-item[data-cam] { --drag: cubic-bezier(0.16, 1, 0.3, 1); --undrag: cubic-bezier(0.5, 0, 0.75, 0.2); }
.nl-item[data-cam] .nl-panel { top: 48px; left: var(--px, 4px); display: block; width: 540px; min-width: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  clip-path: none; pointer-events: none; visibility: hidden; transition: visibility 0s linear 220ms; }
.nl-item[data-cam].is-open .nl-panel, .nl-item[data-cam]:focus-within:not([data-shut]) .nl-panel { clip-path: none; pointer-events: auto; visibility: visible; transition: visibility 0s; }
.nl-item[data-cam] :is(.nl-frame, .nl-body) { --fx: var(--gx, 0px); --fw: var(--gw, 60px); --fh: 26px;
  transition: --fx 220ms var(--undrag), --fw 220ms var(--undrag), --fh 220ms var(--undrag); }
.nl-item[data-cam]:is(.is-open, :focus-within:not([data-shut])) :is(.nl-frame, .nl-body) { --fx: 0px; --fw: 540px; --fh: var(--ph, 340px);
  transition: --fx 480ms var(--drag), --fw 480ms var(--drag), --fh 480ms var(--drag); }
/* the frame: dashed edge, 4 handles, and the panel's shadow (it travels with the corner) */
.nl-frame { position: absolute; left: 0; top: 0; z-index: 3; width: var(--fw); height: var(--fh); translate: var(--fx) 0; pointer-events: none;
  border: 1px dashed rgba(29, 29, 31, 0.55); border-radius: 2px; box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.28), 0 2px 6px -3px rgba(0, 0, 0, 0.08); }
.nl-frame i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--label); }
.nl-frame i:nth-child(1) { left: -3px; top: -3px; } .nl-frame i:nth-child(2) { right: -3px; top: -3px; }
.nl-frame i:nth-child(3) { left: -3px; bottom: -3px; }
/* the grabbed handle: ink while it moves, white once it lets go */
.nl-frame i:nth-child(4) { right: -3px; bottom: -3px; background: var(--label); scale: 1.3; transition: background-color 0s, scale 0s; }
.nl-item[data-cam]:is(.is-open, :focus-within:not([data-shut])) .nl-frame i:nth-child(4) { background: #fff; scale: 1; transition: background-color 160ms var(--ease) 430ms, scale 260ms var(--ease-out) 430ms; }
.nl-body { position: relative; display: grid; grid-template-columns: 168px 356px; padding: 8px; background: #fff; border-radius: 2px;
  clip-path: inset(0 calc(100% - var(--fx) - var(--fw)) calc(100% - var(--fh)) var(--fx)); }
/* section list: a quiet timeline; the active section wears a cue marker */
.nl-list { position: relative; display: flex; flex-direction: column; padding: 2px 8px 2px 0; }
.nl-item[data-cam] .nl-list a:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 50%; width: 1px; height: 100%; background: rgba(29, 29, 31, 0.1); }
.nl-item[data-cam] .nl-list a { position: relative; height: 36px; padding: 0 10px 0 26px; border-radius: 4px; font-size: 13.5px; color: var(--label-2); background: none;
  opacity: 0; translate: 0 4px; transition: color 160ms var(--ease), opacity 90ms var(--ease), translate 0s linear 90ms; }
.nl-item[data-cam] .nl-list a::before { content: ""; position: absolute; left: 3.5px; top: 50%; z-index: 1; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1px var(--label); opacity: 0; scale: 0.3; transition: opacity 140ms var(--ease), scale 280ms var(--ease-out); }
.nl-item[data-cam] .nl-list a.is-cue { color: var(--label); }
.nl-item[data-cam] .nl-list a.is-cue::before { opacity: 1; scale: 1; }
.nl-item[data-cam] .nl-list a:hover { color: var(--label); background: none; }
.nl-item[data-cam] .nl-list a:focus-visible { outline: 2px solid var(--label); outline-offset: -2px; }
/* card */
.nl-card { display: flex; flex-direction: column; align-items: flex-start; padding: 0 0 4px; }
.nl-view { position: relative; width: 340px; height: 200px; overflow: hidden; border-radius: 6px; background: #f5f5f7; box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.1); isolation: isolate; }
.nl-name { margin: 14px 2px 0; font-size: 15px; font-weight: 600; letter-spacing: -0.015em; color: var(--label); }
.nl-line { margin: 3px 2px 0; max-width: 34ch; font-size: 13px; line-height: 1.45; color: var(--label-2); }
.nl-item[data-cam] .nl-go { height: 32px; margin: 14px 2px 0; padding: 0 14px; border-radius: 6px; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.16); transition: background-color 160ms var(--ease), opacity 90ms var(--ease), translate 0s linear 90ms; }
.nl-item[data-cam] .nl-go:hover { color: var(--on-accent); background: var(--accent-hover); }
.nl-item[data-cam] .nl-go:focus-visible { outline: 2px solid var(--label); outline-offset: 2px; }
.nl-card > * { opacity: 0; translate: 0 4px; transition: opacity 90ms var(--ease), translate 0s linear 90ms; }
/* contents arrive just behind the corner */
.nl-item[data-cam]:is(.is-open, :focus-within:not([data-shut])) :is(.nl-list a, .nl-card > *) { opacity: 1; translate: 0 0;
  transition: color 160ms var(--ease), background-color 160ms var(--ease), opacity 260ms var(--ease) var(--d, 0ms), translate 360ms var(--ease-out) var(--d, 0ms); }
.nl-list a:nth-child(1) { --d: 40ms; } .nl-list a:nth-child(2) { --d: 65ms; } .nl-list a:nth-child(3) { --d: 90ms; } .nl-list a:nth-child(4) { --d: 115ms; } .nl-list a:nth-child(5) { --d: 140ms; }
.nl-card > :nth-child(1) { --d: 90ms; } .nl-card > :nth-child(2) { --d: 150ms; } .nl-card > :nth-child(3) { --d: 175ms; } .nl-card > :nth-child(4) { --d: 200ms; }
/* the camera: page minimap (transform only) + overlays drawn in view pixels so 1px stays 1px */
.cam-page { position: absolute; left: 0; top: 0; width: 1200px; transform-origin: 0 0; background: #fff; font-family: var(--font-ui); color: var(--label); }
.cam-page.is-moving { will-change: transform; }
.cam-page > * { position: absolute; margin: 0; }
.cam-t { white-space: normal; font-weight: 600; letter-spacing: -0.04em; line-height: 0.98; width: max-content; }
.cam-img { object-fit: cover; display: block; }
.cam-stamp { font-family: var(--font-mono); font-size: 30px; letter-spacing: 0.04em; color: #fff; white-space: nowrap; }
.cam-stamp.is-gone { opacity: 0; filter: blur(2px); letter-spacing: 0.6em; transition: opacity 620ms var(--ease), filter 620ms var(--ease), letter-spacing 700ms var(--ease-out); }
.cam-sel { position: absolute; left: 0; top: 0; z-index: 2; border: 1px dashed rgba(29, 29, 31, 0.6); border-radius: 1px; pointer-events: none; opacity: 0; transform-origin: 50% 50%; }
.cam-sel.is-light { border-color: rgba(255, 255, 255, 0.85); }
.cam-sel i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--label); }
.cam-sel i:nth-child(1) { left: -3px; top: -3px; } .cam-sel i:nth-child(2) { right: -3px; top: -3px; }
.cam-sel i:nth-child(3) { left: -3px; bottom: -3px; } .cam-sel i:nth-child(4) { right: -3px; bottom: -3px; }
.cam-cur { position: absolute; left: 0; top: 0; z-index: 4; width: 14px; height: 14px; pointer-events: none; opacity: 0; transform-origin: 2.5px 1.6px; transition: opacity 180ms var(--ease); }
.cam-cur.is-on { opacity: 1; }
.cam-cur svg { display: block; width: 14px; height: 14px; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); }
.cam-ring { position: absolute; left: 0; top: 0; z-index: 3; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; box-shadow: 0 0 0 1px var(--label), 0 0 0 2px rgba(255, 255, 255, 0.7); pointer-events: none; opacity: 0; }
.cam-zoom { position: absolute; right: 6px; bottom: 6px; z-index: 5; padding: 2px 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.08);
  font: 500 10px/1.3 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--label); }
@media (prefers-reduced-motion: reduce) {
  .nl-item[data-cam] .nl-panel, .nl-item[data-cam] :is(.nl-frame, .nl-body, .nl-frame i, .nl-list a, .nl-list a::before, .nl-card > *),
  .nl-item[data-cam]:is(.is-open, :focus-within) :is(.nl-panel, .nl-frame, .nl-body, .nl-frame i, .nl-list a, .nl-card > *), .cam-cur { transition: none !important; }
  .nl-item[data-cam] .nl-frame i:nth-child(4) { background: #fff; scale: 1; }
  .nl-item[data-cam] :is(.nl-list a, .nl-card > *) { translate: none; }
}

/* Footer A, picked 6 Nov: one column per product, the nav's order (from footer-variants/) */
  .fv-a .wm-top { grid-template-columns: repeat(5, auto) minmax(0, 1fr); gap: 32px clamp(28px, 4vw, 64px); }
  .fv-a .wm-group ul { display: grid; gap: 6px; }
  @media (max-width: 900px) {
    .fv-a .wm-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fv-a .wm-group:first-child { grid-column: auto; }
  }
  @media (max-width: 640px) {
    .fv-a .wm-top { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
    .fv-a .wm-group ul { gap: 4px; }
  }