/* ── next-band.css — homepage "what's next" signup, a standalone box ─────────────
   Replaces the full-bleed --fg slab (.rx-close in catalogue.css, still used by the
   product draft). A rounded, hairline-bordered box set inside the page on --surface,
   centred headline, underline email field with an arrow. Radii are page-local (not
   tokens). Motion: one whisper-fade in on scroll; reduced-motion safe. */
.nb { position: relative; padding: var(--s6) var(--gutter) var(--s7); display: grid; place-items: center; }
.nb-box { --nb-r: var(--r-tray); width: min(100%, 72rem); box-sizing: border-box; display: grid; justify-items: center; gap: var(--s3); text-align: center;
  padding: var(--s6) var(--s4); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--nb-r); color: var(--fg); }
.nb-kicker { margin: 0; font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--fg-muted); }
.nb-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(4rem, 9vw, 7.6rem); line-height: .95; letter-spacing: -.02em; text-wrap: balance; }
.nb-title b { font-weight: 400; color: var(--fg-faint); }
.nb-sub { margin: 0; max-width: 46ch; font-family: var(--font-text); font-size: var(--fs-text); line-height: 1.6; color: var(--fg-muted); text-wrap: pretty; }
.nb-form { width: min(100%, 52rem); display: grid; gap: var(--s3); margin-top: var(--s3); }
.nb-field { display: flex; align-items: center; gap: var(--s2); border-bottom: 1px solid var(--rule-strong); transition: border-color .4s ease; }
.nb-field:focus-within { border-bottom-color: var(--fg); }
.nb-input { flex: 1 1 auto; min-width: 0; padding: 1.4rem 0; font: inherit; font-family: var(--font-text); font-size: var(--fs-text); color: var(--fg); background: none; border: 0; border-radius: 0; outline: 0; text-align: left; }
.nb-input::placeholder { color: var(--fg-faint); }
.nb-go { flex: none; width: 4.4rem; height: 4.4rem; display: grid; place-items: center; font-size: 2.2rem; line-height: 1; color: var(--fg); background: none; border: 0; cursor: pointer; transition: transform var(--hover-dur) var(--hover-ease), opacity var(--hover-dur) var(--hover-ease); }
.nb-go:disabled { opacity: .4; cursor: default; }
@media (hover: hover) { .nb-go:hover:not(:disabled) { transform: translateX(.4rem); } }
.nb-go:focus-visible, .nb-chip:focus-visible, .nb-input:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.nb-chip { justify-self: center; display: inline-flex; align-items: center; gap: var(--s2); padding: .9rem 1.8rem; min-height: 4.4rem; box-sizing: border-box; font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--fg); background: none; border: 1px solid var(--rule-strong); border-radius: var(--r-ctl); cursor: pointer; transition: background-color var(--hover-dur) var(--hover-ease), color var(--hover-dur) var(--hover-ease); }
.nb-chip i { width: .9rem; height: .9rem; border-radius: 50%; border: 1px solid currentColor; transition: background-color .4s ease; }
.nb-chip[aria-pressed="true"] { background: var(--fg); color: var(--ground); }
.nb-chip[aria-pressed="true"] i { background: var(--ground); }
.nb-fine { margin: 0; justify-self: center; text-align: center; text-indent: var(--track-data); font-family: var(--font-data); font-size: 1.1rem; letter-spacing: var(--track-data); text-transform: uppercase; color: var(--fg-faint); line-height: 1.5; }
.nb-fine a { color: inherit; text-decoration: underline; text-underline-offset: .3rem; }
.nb-status { margin: 0; min-height: 0; font-family: var(--font-data); font-size: var(--fs-small); color: var(--fg-muted); }
.nb-status[data-state="error"] { color: var(--fg); text-decoration: underline wavy; text-underline-offset: .4rem; }
.nb-collab { margin: var(--s3) 0 0; padding-top: var(--s4); width: min(100%, 52rem); border-top: 1px solid var(--rule); font-family: var(--font-data); font-size: var(--fs-small); color: var(--fg-muted); }
.nb-collab a { color: var(--fg); text-decoration: underline; text-underline-offset: .5rem; }
.nb-done[hidden], .nb-form[hidden] { display: none; }
.nb-done { margin: 0; font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1.1; }
@media (min-width: 64em) { .nb { padding: var(--s7) var(--gutter) var(--s8); } .nb-box { padding: var(--s7) var(--s6); } }
@media (prefers-reduced-motion: no-preference) {
  .nb-box { animation: nb-in .9s cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
}
@keyframes nb-in { from { opacity: 0; transform: translateY(1.2rem); } to { opacity: 1; transform: none; } }

/* localhost lab: ?next=a|b|c (js/next-band.js) */
.nb[data-next] .nb-kicker::after { content: ' / copy ' attr(data-next) ' (lab)'; }