/* Onboarding v4 — Chronos (6) Figma redesign (2026-10-12).
   Loaded AFTER nz-onboarding.css on the v4 pages only (onboarding-v4*.html):
   the old sheet keeps modals / paywall / connect popups / ticker working, this
   sheet re-skins the tokens and adds the new components. Everything here is
   scoped under body.v4 so nothing leaks into the old pages (instant revert =
   flip the rewrites back; see .context/onboarding-v4-plan.md). */

body.v4 {
  --bg: #faf9f6;
  --panel: #ffffff;
  --panel-2: #f3f1ec;
  --line: rgba(20, 20, 20, 0.08);
  --line-strong: rgba(20, 20, 20, 0.16);
  --ink: #141414;
  --ink-2: #5c5c5c;
  --ink-3: #9a968e;
  --accent: #141414;
  --on-accent: #ffffff;
  --ok: #1b7f4d;
  --ok-bg: #ddf1e4;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(20, 20, 20, 0.03), 0 10px 30px rgba(20, 20, 20, 0.05);
  --sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

/* ── Chrome ─────────────────────────────────────────────────────────────── */
body.v4 .nz-top { background: var(--bg); border-bottom: 0; padding: 18px 28px 10px; }
body.v4 .nz-brand { font-weight: 700; letter-spacing: 0.01em; font-size: 17px; gap: 10px; }
body.v4 .nz-brand img { width: 30px; height: 30px; border-radius: 9px; }
body.v4 .v4-exit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink-2); font-size: 14px; font-weight: 600;
  text-decoration: none; margin-right: 2px; transition: all 0.15s ease;
}
body.v4 .v4-exit:hover { color: var(--ink); border-color: var(--line-strong); }
body.v4 .v4-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink-2); font-size: 15px; cursor: pointer;
  font-family: inherit; margin-right: 6px; transition: all 0.15s ease;
}
body.v4 .v4-back:hover { color: var(--ink); border-color: var(--line-strong); }
/* The exit (✕) is force-hidden on the /welcome logged-out funnel — that mount
   shows the back button alone (owner 2026-10-16). !important so it overrides the
   launch page's own JS that reveals #exitTop after sign-in. .v4-exit also resets
   any absolute positioning inherited from the launch page's original .nz-exit. */
body.v4 .v4-exit { position: static; top: auto; left: auto; transform: none; }
body.v4.nz-mount-welcome .v4-exit,
body.v4.nz-mount-welcome #exitTop { display: none !important; }

body.v4 .nz-steps { gap: 26px; }
body.v4 .v4-step {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-3); text-decoration: none;
}
body.v4 .v4-step.on { color: var(--ink); font-weight: 600; }
body.v4 .v4-step.done { color: var(--ink-2); }
body.v4 a.v4-step:hover { color: var(--ink); }
body.v4 .v4-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 600;
  border: 1.4px solid currentColor; flex: none;
}
body.v4 .v4-step.on .v4-step-num { background: var(--ink); border-color: var(--ink); color: #fff; }
body.v4 .v4-step.done .v4-step-num { background: var(--ink); border-color: var(--ink); color: #fff; }
body.v4 .v4-step-num svg { width: 11px; height: 11px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
body.v4 .nz-btn { font-family: var(--sans); border-radius: 12px; font-weight: 600; }
body.v4 .nz-btn-primary { background: var(--ink); color: #fff; box-shadow: 0 8px 24px rgba(20, 20, 20, 0.16); }
body.v4 .nz-btn-primary:hover { background: #000; }
body.v4 .v4-arrow { display: inline-block; margin-left: 8px; transition: transform 0.15s ease; }
body.v4 .nz-btn-primary:hover .v4-arrow { transform: translateX(3px); }

/* CTA auto-advance progress fill */
body.v4 .v4-cta-auto { position: relative; overflow: hidden; }
body.v4 .v4-cta-fill {
  position: absolute; inset: 0 auto 0 0; width: 0%; background: rgba(255, 255, 255, 0.18);
  pointer-events: none; transition: width 60ms linear;
}

/* ── Shared page scaffolding ────────────────────────────────────────────── */
body.v4 .v4-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel-2); border-radius: 999px; padding: 6px 14px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
}
body.v4 .v4-h1 { font-size: 40px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; margin: 14px 0 10px; }
body.v4 .v4-sub { font-size: 17px; color: var(--ink-2); line-height: 1.5; font-weight: 400; max-width: 640px; }

/* Testimonial rail (left) — reuse the old marquee engine, reskin the cards.
   Width is set ONLY where the shell grid reserves 250px for it; on the launch
   shell the old grid reserves 220px and an unscoped 250px bled over the
   content (owner live-test 2026-10-12: "reviews are on top of the text"). */
body.v4 .v4-shell > .nz-reviews-side, body.v4 .v4-ch-shell > .nz-reviews-side { width: 250px; }
body.v4 .nz-review { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
body.v4 .nz-review .txt { color: var(--ink-2); }

/* ── Stage 1: the four views ────────────────────────────────────────────── */
body.v4 .v4-shell {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px;
  /* Bound the single row to the shell height (min 0) so the active stage below
     becomes a REAL scroll container — identical to the fix on .v4-ch-shell.
     Without it the stage's `overflow-y: auto` is dead (the row grows with its
     content past the fixed shell height), so on any viewport shorter than the
     content — e.g. a 1280x720 / 1366x768 laptop, or any window with browser
     bars — the overflow is clipped by `overflow: hidden` with NO way to scroll
     and the lower cards + Next button are cut off (owner report 2026-10-26). */
  grid-template-rows: minmax(0, 1fr);
  max-width: 1340px; margin: 0 auto; padding: 18px 28px 30px;
  height: calc(100vh - 64px); box-sizing: border-box; overflow: hidden;
}
/* The content column is the shell's grid item; it must shrink to the bounded row
   (min-height:0, defeating the default min-height:auto that let it grow with its
   content) and pass that height down to the active stage via a flex column. */
body.v4 .v4-content { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
body.v4 .v4-stage { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 28px; align-items: start; min-width: 0; min-height: 0; flex: 1 1 auto; overflow-y: auto; padding-top: 1.5vh; }
body.v4 .v4-stage-left { min-width: 0; }
/* The right column is sticky to the top of the scrolling stage, so the Next
   button (placed at its top) is ALWAYS visible without scrolling (owner
   2026-10-13: "I should always see the one that says go to next page … on the
   right hand side"). */
body.v4 .v4-stage-right { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; position: sticky; top: 0; gap: 14px; }
body.v4 .v4-view[hidden] { display: none !important; }

/* website view */
body.v4 .v4-urlform {
  display: flex; align-items: center; gap: 10px; margin-top: 26px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 16px;
  padding: 8px 8px 8px 16px; box-shadow: var(--shadow); max-width: 640px;
}
body.v4 .v4-urlform .globe { color: var(--ink-3); flex: none; display: inline-flex; }
body.v4 .v4-urlform input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 16px; color: var(--ink); padding: 10px 4px;
}
body.v4 .v4-urlform input::placeholder { color: var(--ink-3); }
body.v4 .v4-urlform .nz-btn { padding: 13px 22px; font-size: 15px; }
body.v4 .v4-help { margin-top: 26px; }
body.v4 .v4-help b { font-size: 15.5px; font-weight: 600; display: block; margin-bottom: 4px; }
body.v4 .v4-help span { color: var(--ink-2); font-size: 14.5px; }
body.v4 .v4-secure { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 14px; margin-top: 7vh; }
body.v4 .v4-mascot { max-width: 440px; width: 100%; height: auto; }
body.v4 .nz-manualform { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; max-width: 640px; }

/* analyzing view checklist */
body.v4 .v4-checklist { margin-top: 26px; display: flex; flex-direction: column; }
body.v4 .v4-check { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; position: relative; padding-bottom: 26px; }
body.v4 .v4-check::before {
  content: ''; position: absolute; left: 14.5px; top: 32px; bottom: 2px; width: 1.5px;
  background: var(--line-strong);
}
body.v4 .v4-check:last-child { padding-bottom: 0; }
body.v4 .v4-check:last-child::before { display: none; }
body.v4 .v4-check .dot {
  width: 30px; height: 30px; border-radius: 50%; border: 1.6px solid var(--line-strong);
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  color: #fff; z-index: 1; transition: all 0.18s ease; flex: none; box-sizing: border-box;
}
body.v4 .v4-check .dot svg { width: 13px; height: 13px; opacity: 0; transform: scale(0.4); transition: all 0.18s ease; }
body.v4 .v4-check.doing .dot { border-color: var(--ink); }
body.v4 .v4-check.doing .dot::after {
  content: ''; width: 14px; height: 14px; border-radius: 50%;
  border: 2.2px solid var(--ink); border-top-color: transparent;
  animation: nzSpin 0.7s linear infinite;
}
body.v4 .v4-check.done .dot { background: var(--ink); border-color: var(--ink); }
body.v4 .v4-check.done .dot svg { opacity: 1; transform: scale(1); }
body.v4 .v4-check .t { font-size: 16.5px; font-weight: 600; color: var(--ink-3); transition: color 0.18s ease; }
body.v4 .v4-check .d { font-size: 14px; color: var(--ink-3); margin-top: 2px; }
body.v4 .v4-check.doing .t, body.v4 .v4-check.done .t { color: var(--ink); }
body.v4 .v4-check.doing .d, body.v4 .v4-check.done .d { color: var(--ink-2); }

/* mascot crossfade stack (analyzing) */
body.v4 .v4-mascot-stack { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1.3; }
body.v4 .v4-mascot-stack img.m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.5s ease; }
body.v4 .v4-mascot-stack img.m.on { opacity: 1; }
body.v4 .v4-mascot-stack img.ring {
  position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: contain;
  opacity: 0; transition: opacity 0.5s ease; pointer-events: none;
}
body.v4 .v4-mascot-stack.radar img.ring { opacity: 1; }
body.v4 .v4-mascot-stack img.ring.r1 { animation: v4spinSlow 26s linear infinite; }
body.v4 .v4-mascot-stack img.ring.r2 { animation: v4spinSlow 34s linear infinite reverse; }
body.v4 .v4-mascot-stack img.ring.r3 { animation: v4spinSlow 42s linear infinite; }
@keyframes v4spinSlow { to { transform: rotate(360deg); } }

/* found view cards */
body.v4 .v4-cards { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
body.v4 .v4-card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px;
  opacity: 0; transform: translateY(8px);
}
body.v4 .v4-card.in { animation: v4cardIn 0.4s ease forwards; }
@keyframes v4cardIn { to { opacity: 1; transform: translateY(0); } }
body.v4 .v4-card .ic {
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel-2); display: flex; align-items: center; justify-content: center; color: var(--ink);
}
body.v4 .v4-card .ic svg { width: 22px; height: 22px; }
body.v4 .v4-card .nm { font-size: 16.5px; font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
body.v4 .v4-card .nm .v4-tick { color: var(--ok); display: inline-flex; opacity: 0; transform: scale(0.4); }
body.v4 .v4-card.in .nm .v4-tick { animation: v4tickIn 0.3s ease 0.25s forwards; }
@keyframes v4tickIn { to { opacity: 1; transform: scale(1); } }
body.v4 .v4-card .bd {
  font-size: 14px; color: var(--ink-2); line-height: 1.55; white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
body.v4 .v4-card .bd:has(textarea) { display: block; -webkit-line-clamp: unset; overflow: visible; }
body.v4 .v4-card.v4-card-empty .bd { color: var(--ink-3); font-style: italic; }
/* Edit control = a bare pencil, no label, no box (owner 2026-10-12). Scoped to
   the stage-1 found + ICP + CTA cards so the channels page pill button is
   untouched. */
body.v4 .nz-edit-pencil {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; background: none;
  border-radius: 9px; color: var(--ink-3); cursor: pointer; flex: none;
  transition: color .14s ease, background .14s ease;
}
body.v4 .nz-edit-pencil svg { width: 16px; height: 16px; }
body.v4 .nz-edit-pencil:hover { color: var(--ink); background: var(--panel-2); }

/* found-card text column + "Show more" (expand in place without editing) */
body.v4 .v4-card-main { min-width: 0; }
body.v4 .v4-card.expanded .bd { -webkit-line-clamp: unset; overflow-y: auto; max-height: 220px; }
body.v4 .v4-more {
  margin-top: 6px; border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 2px;
}
body.v4 .v4-more:hover { color: #000; }
body.v4 .v4-more[hidden] { display: none; }

/* ── Collapsible sections (accordion) — owner 2026-10-13: "each section should
   be expandable, open and close them, they're too big" ──────────────────────
   A pencil + a chevron live together on the right of each card header; the
   chevron toggles .v4-collapsed which hides the whole body. */
body.v4 .v4-card-ctrls { display: inline-flex; align-items: flex-start; gap: 2px; flex: none; }
body.v4 .v4-collapse {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; background: none;
  border-radius: 9px; color: var(--ink-3); cursor: pointer; flex: none;
  transition: color .14s ease, background .14s ease, transform .18s ease;
}
body.v4 .v4-collapse svg { width: 17px; height: 17px; }
body.v4 .v4-collapse:hover { color: var(--ink); background: var(--panel-2); }
body.v4 .v4-card.v4-collapsed .v4-collapse,
body.v4 .v4-icpcard.v4-collapsed .v4-collapse { transform: rotate(-90deg); }
body.v4 .v4-card.v4-collapsed .v4-cardbody,
body.v4 .v4-icpcard.v4-collapsed .v4-cardbody { display: none; }
body.v4 .v4-card.v4-collapsed { padding-top: 14px; padding-bottom: 14px; }

/* type-out: show the full body AS it types (don't clamp mid-reveal), with a
   blinking caret so it reads as live generation (owner 2026-10-13). */
body.v4 .v4-card .bd.v4-typing { -webkit-line-clamp: unset; overflow: visible; }
body.v4 .bd.v4-typing::after {
  content: '▋'; margin-left: 1px; color: var(--ink-3);
  animation: v4caret 0.8s steps(1) infinite;
}
@keyframes v4caret { 50% { opacity: 0; } }
body.v4 .v4-card textarea {
  width: 100%; box-sizing: border-box; min-height: 90px; border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 14px; line-height: 1.5;
  resize: vertical; outline: none;
}

/* side panel (How we found this / Why these roles) */
body.v4 .v4-side {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow); padding: 22px; width: 100%; max-width: 440px; box-sizing: border-box;
}
body.v4 .v4-side h3 { font-size: 17px; font-weight: 600; margin: 0 0 14px; }
body.v4 .v4-side .row { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ink-2); margin-bottom: 11px; }
body.v4 .v4-side .row .ok {
  width: 18px; height: 18px; border-radius: 50%; border: 1.4px solid var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; color: var(--ink);
}
body.v4 .v4-side .row .ok svg { width: 10px; height: 10px; }
body.v4 .v4-side .v4-side-note { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin: 0 0 16px; }
body.v4 .v4-side hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
body.v4 .v4-side img { max-width: 70%; display: block; margin: 10px auto 0; }

/* ICP chip cards — compact so all FOUR cards fit one screen (owner live-test
   2026-10-12: "I only see company size and target roles … make the words
   smaller"). */
body.v4 .v4-icpgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
body.v4 .v4-icpcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 13px 14px;
}
body.v4 .v4-icpcard .hd { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 2px; }
body.v4 .v4-icpcard .hd .ic {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); display: flex; align-items: center; justify-content: center; color: var(--ink);
}
body.v4 .v4-icpcard .hd .ic svg { width: 17px; height: 17px; }
body.v4 .v4-icpcard .hd .nm { font-size: 14px; font-weight: 600; }
body.v4 .v4-icpcard .hd .ds { font-size: 11.5px; color: var(--ink-2); margin-top: 0; line-height: 1.3; }
body.v4 #viewFound .v4-h1 { font-size: 30px; margin: 10px 0 6px; }
body.v4 #viewFound .v4-sub { font-size: 14.5px; }
body.v4 #viewIcp .v4-h1 { font-size: 28px; margin: 10px 0 6px; }
body.v4 #viewIcp .v4-sub { font-size: 14px; }
body.v4 #viewIcp .v4-stage-right .v4-side { max-width: 360px; padding: 16px; }
body.v4 #viewIcp .v4-side h3 { font-size: 14.5px; margin-bottom: 9px; }
body.v4 #viewIcp .v4-side .row { font-size: 12px; margin-bottom: 7px; }
body.v4 #viewIcp .v4-side .v4-side-note { font-size: 12px; margin-bottom: 10px; }
body.v4 #viewIcp .v4-side img { max-width: 46%; }
body.v4 #viewIcp .v4-actions { margin-top: 16px; }
body.v4 .v4-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
body.v4 .v4-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 10px; font-size: 12px; font-weight: 500; color: var(--ink);
}
body.v4 .v4-chip .x {
  border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 13px;
  padding: 0; line-height: 1; font-family: inherit;
}
body.v4 .v4-chip .x:hover { color: var(--ink); }
body.v4 .v4-chip-add { display: flex; gap: 8px; margin-top: 12px; }
body.v4 .v4-chip-add[hidden] { display: none; }
body.v4 .v4-chip-add input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px;
  font-family: inherit; font-size: 13px; outline: none; background: var(--panel);
}
body.v4 .v4-chip-add input:focus { border-color: var(--line-strong); }
body.v4 .v4-chip-add .nz-btn { padding: 8px 14px; font-size: 13px; }
body.v4 .v4-chips-empty { font-size: 13px; color: var(--ink-3); margin-top: 12px; }

/* ICP "Locations" typeahead dropdown (owner 2026-10-13: type a place and it
   narrows down so you click it — no manual typing). Anchored to the chip-add
   row; absolute so it never disturbs the input+button flex layout. */
body.v4 .v4-chip-add { position: relative; }
body.v4 .v4-geo-ac {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .14); padding: 4px;
  max-height: 288px; overflow-y: auto;
}
body.v4 .v4-geo-ac[hidden] { display: none; }
body.v4 .v4-geo-opt {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 13px;
  color: var(--ink); padding: 8px 10px; border-radius: 8px; line-height: 1.25;
}
body.v4 .v4-geo-opt b { font-weight: 600; }
body.v4 .v4-geo-opt .sub { color: var(--ink-3); font-weight: 400; }
body.v4 .v4-geo-opt svg { width: 15px; height: 15px; flex: none; color: var(--ink-3); }
body.v4 .v4-geo-opt.active, body.v4 .v4-geo-opt:hover { background: var(--panel-2); }
body.v4 .v4-geo-empty { padding: 10px; font-size: 12px; color: var(--ink-3); }

/* Collapsible chip sections — a section with many chips starts clamped to ~2
   rows; the toggle reveals the rest in a scroll area (owner 2026-10-12: "if
   there's a ton of information it gets compressed … open it up and see the
   rest … scroll up and down"). */
body.v4 .v4-chips.collapsible.collapsed { max-height: 64px; overflow: hidden; }
body.v4 .v4-chips.collapsible:not(.collapsed) { max-height: 148px; overflow-y: auto; }
body.v4 .v4-chip-more {
  margin-top: 8px; border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 2px;
}
body.v4 .v4-chip-more:hover { color: #000; }

/* Call-to-action card (full width, under the ICP grid) — the outreach goal. */
body.v4 .v4-cta-section { margin-top: 10px; }
body.v4 .v4-ctacard { padding: 14px 16px; }
body.v4 .v4-goals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
body.v4 .v4-goal {
  border: 1px solid var(--line-strong); background: var(--panel); border-radius: 999px;
  padding: 7px 14px; font-family: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--ink-2); cursor: pointer; transition: all .14s ease;
}
body.v4 .v4-goal:hover { border-color: var(--ink); color: var(--ink); }
body.v4 .v4-goal.on { background: var(--ink); border-color: var(--ink); color: #fff; }
body.v4 .v4-cta-custom { margin-top: 11px; }
body.v4 .v4-cta-custom input {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; font-family: inherit; font-size: 13px; outline: none;
  background: var(--panel); color: var(--ink);
}
body.v4 .v4-cta-custom input::placeholder { color: var(--ink-3); }
body.v4 .v4-cta-custom input:focus { border-color: var(--line-strong); }

/* Next button is ALWAYS visible — it lives at the TOP of the sticky right
   column now, so you never scroll to find it (owner 2026-10-13: "I should
   always see the one that says go to next page … on the right hand side"). */
body.v4 .v4-actions {
  display: flex; align-items: center; gap: 10px; flex: none; margin: 0;
  order: -1;
}
body.v4 .v4-actions .nz-btn-primary { flex: 1; justify-content: center; }
body.v4 .v4-actions .nz-btn { padding: 13px 26px; font-size: 15px; }
body.v4 .v4-actions .nz-btn-ghost { background: var(--panel); border: 1px solid var(--line); color: var(--ink-2); }

/* ── Channels page ──────────────────────────────────────────────────────── */
body.v4 .v4-ch-shell {
  display: grid; grid-template-columns: 250px minmax(0, 1.35fr) minmax(320px, 1fr); gap: 24px;
  grid-template-rows: minmax(0, 1fr);   /* constrain the row to the shell height so the contacts list gets real height (owner 2026-10-13) */
  max-width: 1480px; margin: 0 auto; padding: 14px 28px 88px; box-sizing: border-box;
  height: calc(100vh - 64px); overflow: hidden;
}
/* min-height:0 (2026-10-27): a grid item's auto min-size can exceed its
   minmax(0,1fr) track when column content grows, which silently kills this
   overflow-y:auto and lets the shell's overflow:hidden CLIP the lower content
   with no scroll path — the same failure class d2ead39d7 fixed on .v4-stage. */
body.v4 .v4-ch-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; position: relative; scroll-behavior: smooth; padding-bottom: 6px; }
body.v4 .v4-ch-head { flex: none; }
body.v4 .v4-ch-head .v4-h1 { font-size: 26px; margin: 4px 0 4px; }
body.v4 .v4-ch-head .v4-h1 .n { font-weight: 700; }
body.v4 .v4-ch-head .v4-sub { font-size: 13.5px; }
/* ⓘ after "We found N people" — sized to sit on the big headline (owner 2026-10-12) */
body.v4 .v4-found-info { width: 21px; height: 21px; font-size: 12px; margin-left: 7px; vertical-align: middle; position: relative; top: -3px; }
body.v4 .v4-found-info::after { width: 280px; }

body.v4 .v4-listcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow); margin-top: 12px; display: flex; flex-direction: column;
  /* A tall, bounded height (not flex:1) so the list stays big AND the main column
     can scroll past it to More channels / Change website / the hyper card. */
  overflow: hidden; flex: none; height: clamp(320px, 52vh, 620px);
}
/* The contacts list is a fixed window that shows ≥4 people and auto-scrolls
   through the rest (owner 2026-10-13: "I want to see at least four at a time
   … constantly scrolling") — see .v4-rows height below. */
body.v4 .v4-tabs { display: flex; gap: 8px; padding: 14px 14px 10px; border-bottom: 1px solid var(--line); flex: none; flex-wrap: wrap; }
body.v4 .v4-tab {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: var(--panel); border-radius: 12px;
  padding: 8px 14px; font-family: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--ink-2); cursor: pointer; transition: all 0.14s ease;
}
body.v4 .v4-tab svg, body.v4 .v4-tab img { width: 17px; height: 17px; }
body.v4 .v4-tab:hover { border-color: var(--line-strong); color: var(--ink); }
body.v4 .v4-tab.on { border-color: var(--ink); color: var(--ink); font-weight: 600; background: var(--panel-2); }
/* 2026-10-27 — the rows FILL the card (owner: "white, blank white under the
   contacts … can't really scroll"). The card is clamp(320px,52vh,620px) tall
   but the old fixed height:358px + flex:none left every pixel above
   tabs+358px as dead white panel on viewports ≳810px — nothing scrollable.
   flex:1 absorbs exactly that space (more contacts visible, same internal
   auto-scroll); the min-height keeps the owner's ≥4-rows window on short
   viewports (2026-10-13 directive). */
body.v4 .v4-rows { overflow-y: auto; flex: 1 1 auto; min-height: 240px; height: auto; }
body.v4 .v4-row {
  display: grid; grid-template-columns: 40px minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 12px;
  align-items: center; width: 100%; text-align: left; padding: 10px 16px;
  border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer;
  font-family: inherit; transition: background 0.12s ease;
}
body.v4 .v4-row:hover { background: var(--panel-2); }
body.v4 .v4-row.on { background: var(--panel-2); }
body.v4 .v4-row .who .nm { font-size: 14px; font-weight: 600; color: var(--ink); display: block; }
body.v4 .v4-row .who .tt { font-size: 12.5px; color: var(--ink-2); display: block; margin-top: 1px; }
body.v4 .v4-row .who .chn { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
body.v4 .v4-row .who .chn svg, body.v4 .v4-row .who .chn img { width: 13px; height: 13px; }
body.v4 .v4-row .co .cnm { font-size: 13px; font-weight: 500; color: var(--ink); display: block; }
body.v4 .v4-row .co .loc { font-size: 12px; color: var(--ink-3); display: block; margin-top: 1px; }
body.v4 .v4-fit {
  background: var(--ok-bg); color: var(--ok); border-radius: 999px;
  font-size: 12px; font-weight: 600; padding: 5px 10px; white-space: nowrap;
}
body.v4 .v4-row .nz-avatar, body.v4 .v4-row .nz-avatar img { border-radius: 50%; }

/* skeleton rows while sourcing */
body.v4 .v4-rows .nz-inrow.nz-skel { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }

/* more channels row */
body.v4 .v4-others { margin-top: 10px; flex: none; }
body.v4 .v4-others .lbl { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 9px; padding: 0; cursor: pointer; }
body.v4 .v4-others .lbl:hover { color: var(--ink); }
body.v4 .v4-lbl-arr { font-size: 11px; opacity: 0.85; }
body.v4 .v4-others .row { display: flex; gap: 9px; flex-wrap: wrap; }

/* Scroll-hint pill — floats at the bottom of the (scrollable) main column while
   there is more below the contact list, scrolls down on click, hides at the end. */
body.v4 .v4-chmore {
  position: sticky; bottom: 10px; align-self: center; z-index: 6; margin-top: 8px;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink);
  border-radius: 999px; padding: 8px 15px; font-family: inherit; font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(20, 20, 20, 0.12); cursor: pointer;
}
body.v4 .v4-chmore:hover { border-color: var(--ink); }
body.v4 .v4-chmore[hidden] { display: none; }
body.v4 .v4-chmore-arr { display: inline-block; animation: v4bob 1.1s ease-in-out infinite; }
@keyframes v4bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
body.v4 .v4-other {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 13px; font-size: 13px; font-weight: 500; color: var(--ink);
  cursor: pointer; font-family: inherit; text-decoration: none; transition: all 0.14s ease;
}
body.v4 .v4-other:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow); }
body.v4 .v4-other svg, body.v4 .v4-other img { width: 18px; height: 18px; }

/* ── Single-channel select ───────────────────────────────────────────────────
   A campaign runs on exactly ONE channel, so the moment the user picks one every
   OTHER channel greys out (owner: "whenever they click a channel, all the other
   channels get grayed out so they understand they can only choose one channel at a
   time"). Applies across the top tabs, the More-channels chips and the Hyper entry.
   The chosen chip also gets an explicit selected ring so the picked channel reads
   as "this is the new campaign's channel". */
body.v4 .v4-tab.v4-ch-dim,
body.v4 .v4-other.v4-ch-dim,
body.v4 .v4-preview .v4-hyper.v4-ch-dim {
  opacity: 0.4; filter: grayscale(0.65);
  transition: opacity 0.14s ease, filter 0.14s ease;
}
body.v4 .v4-tab.v4-ch-dim:hover,
body.v4 .v4-other.v4-ch-dim:hover,
body.v4 .v4-preview .v4-hyper.v4-ch-dim:hover {
  opacity: 0.6; transform: none; box-shadow: none; border-color: var(--line);
}
body.v4 .v4-other.v4-ch-sel { border-color: var(--ink); background: var(--panel-2); font-weight: 600; }

/* ── Hyper-personalized campaign entry ───────────────────────────────────────
   Lives on the preview rail, directly under the message card (owner 2026-10-17:
   "see the hyper personalized campaign without scrolling … move it to the right
   under the chat box, make it a little button — fatter but not as long"). A
   compact, chunky button: the whole thing is #hyperEntry and clickable. Scoped to
   .v4-preview so it stays a rail element and the short, fat shape is unambiguous.
   It is flex:0 0 auto, so the message card above (which can shrink + scroll
   internally) yields room and this button stays visible without scrolling. */
body.v4 .v4-preview .v4-hyper {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  margin-top: 14px; flex: 0 0 auto; cursor: pointer; font-family: inherit; color: var(--ink);
  padding: 14px 15px; border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: var(--shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
}
body.v4 .v4-preview .v4-hyper:hover { border-color: var(--ink); box-shadow: 0 10px 26px rgba(20, 20, 20, 0.12); transform: translateY(-1px); }
body.v4 .v4-preview .v4-hyper:active { transform: translateY(0); }
body.v4 .v4-hyper-logo { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; }
body.v4 .v4-hyper-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
body.v4 .v4-hyper-title {
  font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink);
  margin: 0; display: inline-flex; align-items: center; gap: 6px; line-height: 1.2;
}
body.v4 .v4-hyper-title .nz-info { width: 16px; height: 16px; font-size: 10px; }
body.v4 .v4-hyper-sub { font-size: 12.5px; color: var(--ink-2); margin: 0; line-height: 1.35; }
body.v4 .v4-hyper-arr { flex: 0 0 auto; font-size: 17px; color: var(--ink-2); line-height: 1; }
body.v4 .v4-preview .v4-hyper:hover .v4-hyper-arr { color: var(--ink); }

/* website re-analyze row */
body.v4 .v4-site { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--ink-2); flex: none; flex-wrap: wrap; }
body.v4 .v4-site .u { font-weight: 500; color: var(--ink); }
body.v4 .v4-site button, body.v4 .v4-site a { border: 0; background: none; font-family: inherit; font-size: 13px; color: var(--ink-2); text-decoration: underline; cursor: pointer; padding: 0; }
body.v4 .v4-site button:hover, body.v4 .v4-site a:hover { color: var(--ink); }
body.v4 .v4-site [hidden] { display: none; }
body.v4 .v4-site input {
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 7px 11px;
  font-family: inherit; font-size: 13px; outline: none; min-width: 220px;
}
body.v4 .v4-site .nz-btn { padding: 7px 14px; font-size: 13px; }

/* preview card (right) */
body.v4 .v4-preview { display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding-top: 86px; }
body.v4 .v4-prevcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow); padding: 20px; overflow-y: auto; min-height: 0;
}
body.v4 .v4-prevcard .hd { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 14px; }
body.v4 .v4-prevcard .hd .nm { font-size: 16px; font-weight: 600; }
body.v4 .v4-prevcard .hd .tt { font-size: 13px; color: var(--ink-2); margin-top: 1px; }
body.v4 .v4-prevcard .hd .nz-badge {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  border-radius: 10px; padding: 7px 11px; font-size: 12.5px; font-weight: 600; background: var(--panel);
}
body.v4 .v4-prevcard .hd .nz-badge svg, body.v4 .v4-prevcard .hd .nz-badge img { width: 15px; height: 15px; }
body.v4 .v4-prevcard .qi { font-size: 16.5px; font-weight: 600; margin: 2px 0 10px; }
body.v4 .v4-prevcard .sj { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
body.v4 .v4-prevcard .bd { font-size: 14px; line-height: 1.65; color: var(--ink-2); white-space: pre-line; }
body.v4 .v4-prevcard .fr { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
body.v4 .v4-prevcard .fr .from { font-size: 12px; color: var(--ink-3); flex: 1; min-width: 120px; }
body.v4 .v4-prevcard .nz-send-btn {
  display: inline-flex; align-items: center; gap: 7px; background: var(--ink); color: #fff;
  border: 0; border-radius: 11px; padding: 10px 18px; font-family: inherit; font-size: 13.5px;
  font-weight: 600; cursor: pointer;
}
body.v4 .v4-prevcard .nz-send-btn svg { width: 15px; height: 15px; }
body.v4 .v4-prevcard .nz-send-btn:hover { background: #000; }
body.v4 .v4-lockline { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13px; margin-top: 14px; justify-content: center; }

/* bottom launch bar */
body.v4 .nz-sendbar {
  background: linear-gradient(to top, var(--bg) 62%, transparent);
  border-top: 0; padding: 26px 28px 22px;
}
body.v4 .nz-sendbar .nz-btn-big { border-radius: 14px; padding: 15px 34px; font-size: 16px; }

/* ── Launch page (Figma Set up-7 layout) ────────────────────────────────── */
/* Two-column shell: reviews 230px + center. The old sheet's 3-col 220px grid
   with absolute-ish rails is overridden; the right rail node stays in the DOM
   (JS references it) but renders nothing. */
body.v4 .nz-launch-shell {
  grid-template-columns: 230px minmax(0, 1fr);
  max-width: 1400px; gap: 24px; padding: 2px 26px 72px;
}
body.v4 .nz-launch-shell .nz-reviews-side { width: auto; max-height: 72vh; z-index: 0; }
body.v4 .nz-launch-center { position: relative; z-index: 2; gap: 8px; }
/* Compact-by-default launch column (owner 2026-10-14: the Launch button must be
   visible WITHOUT scrolling on every campaign type, not only under 800px).
   The head is one slim line — the pill + static sub were removed from the HTML;
   the launch card right below names the campaign and explains it. */
body.v4 .v4-launch-head { margin: 0; }
body.v4 .v4-launch-head .v4-h1 { font-size: 19px; margin: 2px 0 0; }
/* Launch page only: slimmer top chrome + ticker band (both pure whitespace). */
body.v4.v4-launch .nz-top { padding: 12px 28px 6px; }
body.v4.v4-launch .nz-ticker-wrap { height: 64px; }

/* Info tooltips must float ABOVE the review rail (owner 2026-10-12: "it
   shouldn't be hiding in back of the user reviews"). They were also too small
   to hold a full explanation (owner 2026-10-12: "only has a couple of words"),
   so they now open wider, take a full paragraph, and sit above everything. */
body.v4 .nz-info::after {
  z-index: 1000;
  width: 300px;
  max-width: min(340px, 86vw);
  font-size: 12px;
  line-height: 1.5;
  padding: 11px 13px;
  box-shadow: 0 10px 30px rgba(10, 10, 10, 0.28);
  /* The row label wrapper sets white-space:nowrap (.v4-rmeta .nz-lctl) and the
     ::after inherits it, which kept the long tip on one clipped line. Force the
     paragraph to wrap inside the wider box. */
  white-space: normal;
}

/* Instagram-only "Who to message" row: the inline display:block beat the
   [hidden] attribute, so every channel saw it. Hidden wins now. */
body.v4 #igModeRow[hidden] { display: none !important; }

/* Top row: campaign-type cards left, Chronos recommendation right. */
body.v4 .v4-toprow { display: flex; gap: 14px; align-items: stretch; }
body.v4 .v4-toprow .nz-qrow { flex: 1 1 auto; margin: 0; min-width: 0; }
body.v4 .v4-toprow .v4-rec { width: 360px; flex: none; margin: 0; }
body.v4 .v4-toprow:has(.nz-qrow:empty) .v4-rec { width: auto; flex: 1; }

body.v4 .nz-launchcard { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 12px 20px 0; max-width: none; width: 100%; box-sizing: border-box; }
body.v4 .nz-launchcard h2 { font-size: 16.5px; }
body.v4 .nz-launch-sub { font-size: 12.5px; margin-top: 2px; }
body.v4 .nz-qrow .nz-q {
  border-radius: 14px; border: 1px solid var(--line); background: var(--panel);
  font-weight: 600; box-shadow: var(--shadow); padding: 10px 14px; min-height: 0;
}
/* This padding override outranks .nz-q-has-info's reserved right padding (3
   classes vs 2), which let card text run under the floated "(i)" — re-reserve it. */
body.v4 .nz-qrow .nz-q.nz-q-has-info { padding-right: 44px; }
/* Channel logos on the question-row buttons must render at ONE size regardless of
   label length/wrapping (owner 2026-10-17: Competitor Engagement logo looked off). */
body.v4 .nz-qrow .nz-q svg { width: 16px; height: 16px; flex: none; align-self: center; }
body.v4 .nz-qrow .nz-q.on { border-color: var(--ink); background: var(--panel-2); }

/* ── Campaign-type explainer: current-campaign bar + per-campaign "(i)" popovers
   (owner 2026-10-12: "explain what each campaign is" + a visible switcher). The
   popover is position:fixed and JS-placed so the launch column's overflow-y
   (which also clips overflow-x) never cuts it off. ── */
body.v4 .nz-ctype { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; }
body.v4 .nz-ctype[hidden] { display: none; }
body.v4 .nz-ctype-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
body.v4 .nz-ctype-name { display: inline-flex; align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; color: var(--ink); }
body.v4 .nz-ci { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink-3); font-size: 11px; font-style: italic; font-weight: 700; line-height: 1; cursor: pointer; flex: none; user-select: none; vertical-align: middle; }
body.v4 .nz-ci:hover, body.v4 .nz-ci.on, body.v4 .nz-ci:focus-visible { color: var(--ink); border-color: var(--ink); outline: none; }
body.v4 .nz-q-has-info { position: relative; padding-right: 44px; }
/* NO `transform` here: .nz-ci-pop is position:fixed and nested inside this element.
   A transform would make .nz-ci-inq the containing block for its fixed child (CSS
   Transforms spec), so ciOpen()'s viewport coords would double-count the trigger
   offset and the popover would render off-screen. Center the 18px glyph with top
   math instead so the fixed popover stays anchored to the viewport. */
body.v4 .nz-ci-inq { position: absolute; right: 13px; top: calc(50% - 9px); }
body.v4 .nz-ci-pop { position: fixed; left: 0; top: 0; z-index: 90; width: min(300px, calc(100vw - 40px)); padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 45px rgba(0,0,0,0.18); color: var(--ink-2); font-size: 12.5px; font-style: normal; font-weight: 400; line-height: 1.5; text-align: left; white-space: normal; cursor: default; display: none; }
body.v4 .nz-ci.on .nz-ci-pop { display: block; }
body.v4 .nz-ci-h { display: block; margin: 0 0 5px; font-size: 13px; font-weight: 700; color: var(--ink); }
body.v4 .nz-ci-row { display: block; margin: 5px 0 0; }
body.v4 .nz-ci-row b { font-weight: 700; color: var(--ink); }

body.v4 .v4-toprow .v4-rec { padding: 12px 14px; }
body.v4 .v4-toprow .v4-rec .ds { font-size: 12px; line-height: 1.4; }

/* Settings rows: icon · label+description · control (one per line). */
body.v4 .v4-lrows { margin-top: 6px; }
body.v4 .v4-lrow {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px;
  align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line);
}
body.v4 .v4-rmeta .nz-lctl { flex-wrap: nowrap; white-space: nowrap; }
body.v4 .v4-rmeta .ds { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.v4 .v4-lrow:last-child { border-bottom: 0; }
body.v4 .v4-ric {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); align-self: start; margin-top: 1px;
}
body.v4 .v4-ric svg { width: 17px; height: 17px; }
body.v4 .v4-rmeta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
body.v4 .v4-rmeta .lb { font-size: 14px; font-weight: 600; }
body.v4 .v4-rmeta .ds { font-size: 12px; color: var(--ink-2); }
body.v4 .v4-rctl { display: inline-flex; align-items: center; justify-content: flex-end; }
body.v4 .nz-days { display: inline-flex; gap: 6px; flex-wrap: wrap; margin: 0 !important; }
body.v4 .nz-day {
  width: auto; min-width: 40px; height: 30px; padding: 0 10px;
  border-radius: 10px; font-weight: 600; font-size: 12px;
}
body.v4 .nz-day.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* "Sending from" as a sentence row. */
body.v4 .nz-sender-row { border-top: 1px solid var(--line); padding: 8px 0 4px; margin-top: 0; }
body.v4 .nz-sender-row .lb { font-size: 14px; font-weight: 600; }

/* CTA: Back + launch, right-aligned (Figma) — a STICKY card footer. It sticks
   to the bottom of the scrolling launch column whenever content overflows (a
   warning, the personality panel, Instagram seeds, a short window), so the
   Launch button is ALWAYS in view; when everything fits it reads as a normal
   card footer. Bleeds over the card padding; the card's own bottom padding is 0. */
body.v4 .v4-cta-row {
  justify-content: flex-end; gap: 10px;
  position: sticky; bottom: 0; z-index: 6;
  background: var(--panel); border-top: 1px solid var(--line);
  margin: 8px -20px 0; padding: 10px 20px 12px;
  border-radius: 0 0 17px 17px;
  box-shadow: 0 -10px 16px -14px rgba(20, 20, 20, 0.22);
}
body.v4 .v4-cta-row .nz-btn-ghost { background: var(--panel); border: 1px solid var(--line); color: var(--ink-2); padding: 10px 20px; border-radius: 12px; }
body.v4 .v4-cta-row .nz-btn-big { padding: 10px 24px; font-size: 14.5px; }
body.v4 .nz-pw-toggle { padding: 8px 16px; }

/* Message-personality toggle hint */
body.v4 .v4-pw-hint { font-weight: 450; font-size: 12.5px; color: var(--ink-3); }

/* Short laptop screens: squeeze the launch column further (the compact values
   above are already the default; this is the extra tier for small windows). */
@media (max-height: 800px) {
  body.v4 .v4-launch-head .v4-h1 { font-size: 17px; margin: 0; }
  body.v4 .v4-toprow .nz-qrow .nz-q, body.v4 .v4-toprow .v4-rec { padding: 8px 12px; }
  body.v4 .v4-lrow { padding: 5px 0; }
  body.v4 .v4-ric { width: 30px; height: 30px; border-radius: 9px; }
  body.v4 .v4-ric svg { width: 16px; height: 16px; }
  body.v4 .nz-launchcard { padding: 10px 18px 0; }
  body.v4 .v4-cta-row { margin: 6px -18px 0; padding: 8px 18px 10px; }
  body.v4 .nz-pw-toggle { padding: 7px 14px; }
  body.v4 .v4-recbtn { padding: 6px 10px; }
  body.v4 .v4-stepper button { width: 30px; height: 30px; }
  body.v4 .nz-days .nz-day { height: 28px; min-width: 36px; padding: 0 8px; }
  body.v4.v4-launch .nz-ticker-wrap { height: 56px; }
  body.v4.v4-launch .nz-launch-shell { padding-bottom: 62px; }
  /* …and shrink the Channels head so the contact list keeps more rows visible. */
  body.v4 .v4-ch-head .v4-h1 { font-size: 25px; margin: 4px 0 3px; }
  body.v4 .v4-ch-head .v4-sub { font-size: 13px; }
  body.v4 .v4-ch-shell { padding-bottom: 76px; }
}

/* Stacked layout (≤1080px): the column no longer scrolls internally (the body
   does) and the ticker zone differs, so the CTA returns to normal flow. */
@media (max-width: 1080px) {
  body.v4 .v4-cta-row {
    position: static; margin: 8px 0 0; padding: 10px 0 0;
    border-top: 1px solid var(--line); border-radius: 0; box-shadow: none;
    background: transparent;
  }
  body.v4 .nz-launchcard { padding-bottom: 12px; }
}

body.v4 .v4-rec {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 16px; margin: 0 0 14px;
}
body.v4 .v4-rec .ic { width: 40px; height: 40px; border-radius: 11px; background: var(--panel-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
body.v4 .v4-rec .ic svg { width: 20px; height: 20px; }
body.v4 .v4-rec .nm { font-weight: 600; font-size: 15px; margin-bottom: 3px; }
body.v4 .v4-rec .ds { font-size: 13px; color: var(--ink-2); line-height: 1.5; }

/* The toprow now holds ONLY the campaign-type cards; the recommendation moved
   into the launch card as its own button. Hide the row when there are no cards
   (every non-LinkedIn/non-email channel) so it leaves no empty gap. */
body.v4 .v4-toprow:has(.nz-qrow:empty) { display: none; }

/* "Recommended campaign" reset button (owner 2026-10-12): a slim, distinct bar
   at the top of the launch card. Deliberately NOT styled like the white
   campaign-type cards — a dark icon tile, smaller type, full width so it reads
   as one balanced control that resets the fields below. */
body.v4 .v4-recwrap { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; }
body.v4 .v4-recbtn {
  display: flex; align-items: center; gap: 11px; flex: 1 1 auto; min-width: 0;
  text-align: left; cursor: pointer; font-family: inherit;
  padding: 7px 11px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel-2);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
}
body.v4 .v4-recbtn:hover { border-color: var(--ink); box-shadow: var(--shadow); }
body.v4 .v4-recbtn:active { transform: translateY(1px); }
body.v4 .v4-recbtn-ic { width: 28px; height: 28px; border-radius: 9px; background: var(--ink); color: var(--panel); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
body.v4 .v4-recbtn-ic svg { width: 16px; height: 16px; }
body.v4 .v4-recbtn-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
body.v4 .v4-recbtn-nm { font-weight: 650; font-size: 13px; color: var(--ink); }
body.v4 .v4-recbtn-ds { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.v4 .v4-recbtn-go { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; color: var(--ink-2); flex: 0 0 auto; }
body.v4 .v4-recbtn-go svg { width: 14px; height: 14px; }
/* This info bubble sits at the card's right edge, so open its tooltip leftward
   (the icon's own right edge) to keep the paragraph fully inside the viewport. */
body.v4 .v4-recbtn-info::after { left: auto; right: -4px; transform: none; }

/* "Regenerating" beat for the reset: the value cells dim for ~half a second,
   then pop back in with the recommended numbers. Skipped under reduced motion. */
body.v4 .v4-regen-loading { opacity: 0.32; filter: blur(0.6px); pointer-events: none; transition: opacity 0.14s ease; }
@keyframes v4RegenPop { 0% { opacity: 0.2; transform: scale(0.955); } 60% { opacity: 1; transform: scale(1.015); } 100% { opacity: 1; transform: scale(1); } }
body.v4 .v4-regen-pop { animation: v4RegenPop 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
  body.v4 .v4-regen-loading { opacity: 1; filter: none; }
  body.v4 .v4-regen-pop { animation: none; }
}

/* number stepper around #pace */
body.v4 .v4-stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: var(--panel); }
body.v4 .v4-stepper button {
  width: 34px; height: 34px; border: 0; background: var(--panel); font-size: 16px;
  cursor: pointer; font-family: inherit; color: var(--ink); line-height: 1;
}
body.v4 .v4-stepper button:hover { background: var(--panel-2); }
body.v4 .v4-stepper input {
  width: 48px; text-align: center; border: 0; outline: none; font-family: inherit;
  font-size: 14.5px; font-weight: 600; color: var(--ink); -moz-appearance: textfield; background: transparent;
}
body.v4 .v4-stepper input::-webkit-outer-spin-button, body.v4 .v4-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Wide / high-res monitors (owner 2026-10-21) ────────────────────────────
   On a MacBook the viewport (~1440px) sits right at these shells' max-width, so
   they fill the screen and look right. On a BIGGER non-MacBook monitor (1920 or
   2560 at 100% OS scaling — the common desktop/PC setup) the capped, CENTERED
   shells floated as a small island with large empty side gutters: the review
   rail got pushed hundreds of px off the left edge (reported: "reviews are not
   on the most left-hand sidebar"), everything read as shrunk into the middle
   ("condensed / much smaller"), and the ✕ exit was stranded in a far corner.
   Let the shells use most of the width above 1600px so the rail returns toward
   the left edge and the content breathes, while a sane content ceiling keeps
   lines from stretching on ultrawide. Gated at 1600px: every common laptop /
   MacBook width (<=1536px) matches NOTHING here and renders byte-for-byte as
   today. 100vw is safe — these pages are overflow:hidden (no scrollbar). */
@media (min-width: 1600px) {
  /* width:100% is required so the shell actually STRETCHES to the raised
     max-width: these shells are flex items with margin:0 auto, and cross-axis
     auto margins disable flex stretch — without an explicit width they size to
     their content and the auto margins just center that small block. Adding
     width:100% here (NOT in the base) keeps every <=1536px MacBook/laptop at its
     current content width while letting >=1600px fill. */
  body.v4 .v4-shell        { width: 100%; max-width: min(2000px, 100vw - 140px); }
  body.v4 .v4-ch-shell     { width: 100%; max-width: min(2200px, 100vw - 120px); }
  body.v4 .nz-launch-shell { width: 100%; max-width: min(1980px, 100vw - 140px); }
}

/* ── Sub-MacBook width dead zone, 1061–1299px (owner 2026-10-21) ─────────────
   The only width breakpoint before mobile was 1060px, so across 1061–1299 the
   fixed 250px review rail + the fixed 440px stage panel + the greedy 3-col
   channels grid crushed the working columns (Windows OS scaling / browser zoom
   land here). Narrow the review rail (keep it visible on the LEFT, answering
   S3) and let the stage panel shrink so the copy keeps a readable width.
   Banded 1061–1299 so it never fights the <=1060 single-column stack AND leaves
   the >=1300 (capped 1340/1480) MacBook layout untouched. The rail node keeps
   its grid slot (JS still references #reviewsLeft), just 60px narrower; the
   mascot/side panel only ever renders narrower (their own max-width caps). */
@media (min-width: 1061px) and (max-width: 1299px) {
  body.v4 .v4-shell { grid-template-columns: 190px minmax(0, 1fr); gap: 20px; }
  body.v4 .v4-ch-shell { grid-template-columns: 190px minmax(0, 1.5fr) minmax(300px, 1fr); gap: 18px; }
  body.v4 .v4-shell > .nz-reviews-side,
  body.v4 .v4-ch-shell > .nz-reviews-side { width: 190px; }
  body.v4 .v4-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 22px; }
  body.v4 .nz-launch-shell { grid-template-columns: 180px minmax(0, 1fr); gap: 18px; }
}

/* Launch shell ≤1080: stack to one column. The old sheet already does this,
   but this sheet's BASE `.nz-launch-shell { grid-template-columns: 230px … }`
   loads later and re-split the grid — and with the review rail display:none'd
   (old sheet ≤1080) the launch column auto-placed into the EMPTY 230px rail
   column, squeezing the whole page into a ~230px strip on tablets and small
   windows (2026-10-26 mobile audit). AFTER the 1061–1299 band on purpose: at
   1061–1080 the rail is hidden, so this later rule must win there too. */
@media (max-width: 1080px) {
  body.v4 .nz-launch-shell { grid-template-columns: 1fr; }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 1060px) {
  body.v4 .v4-shell { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; overflow: visible; }
  body.v4 .v4-shell > .nz-reviews-side { display: none; }
  /* Below the desktop breakpoint the shell is height:auto and the BODY scrolls,
     so undo the desktop flex/scroll plumbing — the content column returns to
     normal flow and the stage stops being an inner scroll container. */
  body.v4 .v4-content { display: block; min-height: 0; }
  body.v4 .v4-stage { grid-template-columns: 1fr; overflow: visible; flex: none; min-height: 0; padding-top: 2vh; }
  /* On the body-scroll path the PAGE scrolls, so expanded cards + expanded chip
     lists flow to natural height instead of opening a small nested scroll area —
     a 220px/148px keyhole is a touch-scroll trap on a phone. The one page scroll
     now reveals every section, expanded or not (owner report 2026-10-27). The
     collapsed chip state keeps its clamp (the "Show all" affordance). Desktop
     (>=1061px) is untouched. */
  body.v4 .v4-card.expanded .bd { max-height: none; overflow: visible; }
  body.v4 .v4-chips.collapsible:not(.collapsed) { max-height: none; overflow: visible; }
  body.v4 .v4-stage-right { position: static; order: -1; }
  body.v4 .v4-stage-right .v4-mascot, body.v4 .v4-stage-right .v4-mascot-stack { max-width: 240px; }
  body.v4 .v4-stage-right .v4-side { max-width: none; }
  body.v4 .v4-ch-shell { grid-template-columns: 1fr; height: auto; overflow: visible; padding-bottom: 130px; }
  body.v4 .v4-ch-shell > .nz-reviews-side { display: none; }
  body.v4 .v4-preview { padding-top: 0; }
  body.v4 .v4-icpgrid { grid-template-columns: 1fr; }
  body.v4 .v4-h1 { font-size: 30px; }
  body.v4 .v4-rows { max-height: 60vh; }
}
@media (max-width: 760px) {
  /* Current-step-only stepper (same law as the old funnel's mobile layer):
     the centered nav cannot fit four labeled steps on a phone. */
  body.v4 .v4-step { display: none; }
  body.v4 .v4-step.on { display: inline-flex; font-size: 12.5px; }
  body.v4 .v4-step-num { font-size: 11px; }
}
@media (max-width: 640px) {
  body.v4 .nz-top { padding: 12px 14px 8px; }
  body.v4 .v4-shell, body.v4 .v4-ch-shell { padding-left: 14px; padding-right: 14px; }
  body.v4 .v4-h1 { font-size: 25px; }
  body.v4 .v4-sub { font-size: 15px; }
  body.v4 .v4-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  body.v4 .v4-row .co { display: none; }
  body.v4 .v4-urlform { flex-direction: column; align-items: stretch; padding: 10px; }
  body.v4 .v4-urlform input { font-size: 16px; }
}

/* ── Launch page on phones (owner 2026-10-26: "not able to see everything" on
   mobile). At ≤760px the Figma launch components collided: the campaign-type
   cards squeezed three-abreast with text overlapping text, the settings rows'
   `auto` control column (stepper / day chips / send-window selects) sat ON TOP
   of their labels, and REC badges clipped off the right edge. Everything below
   is ≤760px only — the ≥761px laptop/desktop layout renders byte-for-byte as
   before. ─────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* Campaign-type cards + recommendation: one per row, full width. */
  body.v4 .v4-toprow { flex-direction: column; }
  body.v4 .v4-toprow .nz-qrow { flex-direction: column; align-items: stretch; }
  /* flex-basis 0 (old sheet's row layout) collapses card height in column
     direction — restore natural height or the cards render on top of each other. */
  body.v4 .v4-toprow .nz-qrow .nz-q { width: 100%; box-sizing: border-box; justify-content: flex-start; flex: 0 0 auto; }
  /* The (i) anchor is absolute-centered for one-line desktop cards; on wrapped
     phone cards it lands mid-text. Let it flow inline after the text instead
     (its popover is position:fixed and JS-placed, so it still opens fine). */
  body.v4 .v4-toprow .nz-ci-inq { position: static; margin-left: 6px; }
  body.v4 .v4-toprow .nz-qrow .nz-q.nz-q-has-info { padding-right: 14px; }
  /* Recommended-campaign bar: the ellipsized sub-line is useless at this width
     and the Reset affordance needs its own room. */
  body.v4 .v4-recbtn-ds { display: none; }
  body.v4 .v4-recbtn-nm { white-space: normal; }
  body.v4 .v4-toprow .v4-rec { width: 100%; box-sizing: border-box; }

  /* Settings rows: the control moves to its own full-width line under the
     label instead of colliding in the grid's `auto` column. */
  body.v4 .v4-lrow { grid-template-columns: 34px minmax(0, 1fr); row-gap: 7px; }
  body.v4 .v4-lrow .v4-rctl {
    grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; gap: 8px;
  }
  /* Labels + descriptions wrap on a phone instead of ellipsizing mid-word. */
  body.v4 .v4-rmeta .ds { white-space: normal; overflow: visible; text-overflow: clip; }
  body.v4 .v4-rmeta .nz-lctl { flex-wrap: wrap; white-space: normal; }
  body.v4 .nz-sender-select { max-width: 100%; }

  /* Message-personality bar: label reads as one left-aligned line; the long
     inline explainer is desktop-only (the (i) tooltips still explain). */
  body.v4 .nz-pw-toggle { text-align: left; }
  body.v4 .v4-pw-hint { display: none; }

  /* Back + Launch stack as full-width rows: with flex-end alignment the wide
     launch button clipped off the LEFT edge of a phone screen. align-items
     centers the glass pill (it carries an inline width from glass-cta.js,
     clamped to the row on small phones); Back keeps its explicit full width. */
  body.v4 .v4-cta-row { flex-direction: column; align-items: center; }
  body.v4 .v4-cta-row .nz-btn { width: 100%; box-sizing: border-box; justify-content: center; min-width: 0; }
  body.v4 .v4-cta-row .nz-btn-big { white-space: normal; }
}

/* ── "Regenerated ✓" toast (owner 2026-10-12) ──────────────────────────────
   Jumps up from the bottom when an edit re-rolls the audience size, then
   fades. Dark on-brand pill (ink bg, white text) with a green success tick. */
.nz-regen-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 26px);
  display: inline-flex; align-items: center; gap: 8px;
  background: #0a0a0a; color: #fff;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 999px;
  padding: 10px 17px; font-family: inherit; font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.01em; box-shadow: 0 14px 38px rgba(0,0,0,0.30);
  opacity: 0; pointer-events: none; z-index: 10000;
  transition: transform .36s cubic-bezier(.2,.9,.3,1.25), opacity .28s ease;
}
.nz-regen-toast.show { opacity: 1; transform: translate(-50%, 0); }
.nz-regen-tick {
  display: inline-flex; width: 18px; height: 18px; flex: 0 0 auto;
  align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(86,214,138,0.20); color: #56d68a;
}
@media (prefers-reduced-motion: reduce) {
  .nz-regen-toast { transition: opacity .2s ease; transform: translate(-50%, 0); }
}