/* ==========================================================================
   Versimple — "New website" brief wizard (SITE-022, 27 Sep 2026)
   /new: one question per screen, phone-first. Brand: versimple-brand v1.
   Also: the shared header additions (New Website pill, phone menu) used by
   index.html and dashboard.html.
   ========================================================================== */

/* ---------- wizard page ---------- */
.nw-body { background: var(--paper); min-height: 100vh; display: flex; flex-direction: column; }
.nw { flex: 1; }
.nw-top { background: var(--ink); color: #E3E3EA; border-bottom: 1px solid rgba(255,255,255,.06); }
.nw-top-in { max-width: 1200px; margin: 0 auto; padding: 16px 28px 18px; }
.nw-parts { display: flex; gap: 8px; list-style: none; margin-bottom: 12px; flex-wrap: wrap; }
.nw-parts li { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6F6F80; display: flex; align-items: center; gap: 8px; }
.nw-parts li + li::before { content: ""; width: 22px; height: 2px; background: #2A2A3A; border-radius: 2px; }
.nw-parts li.on { color: var(--cyan); }
.nw-parts li.done { color: #C9C9D4; }
.nw-parts li.done + li::before, .nw-parts li.on::before { background: linear-gradient(90deg, var(--violet), var(--cyan)); }
.nw-bar { height: 6px; border-radius: 99px; background: #1D1D2A; overflow: hidden; }
.nw-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--violet), var(--cyan)); transition: width .35s ease; }

.nw-grid { max-width: 1200px; margin: 0 auto; padding: 44px 28px 80px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; }
.nw-card { background: var(--white); border-radius: 22px; box-shadow: var(--shadow-soft); padding: 40px 44px 30px; min-height: 460px; display: flex; flex-direction: column; }
.nw-loading { color: var(--slate); }
.nw-kick { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--violet-deep); margin-bottom: 12px; display: flex; gap: 10px; align-items: center; }
.nw-kick .nw-count { color: var(--slate); font-weight: 600; letter-spacing: .04em; text-transform: none; }
.nw-q { font-size: clamp(1.6rem, 3.2vw, 2.3rem); color: var(--text-dark); margin-bottom: 10px; }
.nw-lead { color: var(--slate); font-size: 1rem; max-width: 640px; margin-bottom: 26px; }
.nw-opt-tag { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); border: 1px solid rgba(20,20,28,.15); border-radius: 6px; padding: 2px 7px; vertical-align: middle; margin-left: 8px; }
.nw-body-q { flex: 1; }

/* inputs */
.nw-in, .nw-area { width: 100%; font: 500 1.1rem var(--font-body); color: var(--text-dark); background: var(--paper); border: 1.5px solid rgba(20,20,28,.14); border-radius: 14px; padding: 16px 18px; transition: border-color .15s, box-shadow .15s; }
.nw-area { min-height: 150px; resize: vertical; line-height: 1.55; font-size: 1rem; }
.nw-in:focus, .nw-area:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124,92,255,.14); background: #fff; }
.nw-field { display: grid; gap: 8px; margin-bottom: 18px; }
.nw-field > span { font-size: .86rem; font-weight: 600; color: var(--text-dark); }
.nw-field > span em { font-style: normal; color: var(--slate); font-weight: 500; }
.nw-hint { font-size: .84rem; color: var(--slate); margin-top: 8px; }
.nw-count-chars { font-size: .78rem; color: var(--slate); text-align: right; margin-top: 6px; }
.nw-err { color: #C2410C; font-size: .88rem; font-weight: 600; margin-top: 10px; min-height: 1.2em; }

/* choice tiles (type, action, colour mode) */
.nw-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.nw-tile { position: relative; text-align: left; background: #fff; border: 1.5px solid rgba(20,20,28,.12); border-radius: 16px; padding: 16px 16px 15px; cursor: pointer; font: inherit; color: var(--text-dark); display: grid; gap: 4px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.nw-tile:hover { border-color: rgba(124,92,255,.5); transform: translateY(-1px); }
.nw-tile:focus-visible { outline: 3px solid rgba(124,92,255,.4); outline-offset: 2px; }
.nw-tile .ic { font-size: 1.35rem; line-height: 1; margin-bottom: 4px; }
.nw-tile b { font: 600 1.02rem var(--font-display); }
.nw-tile small { color: var(--slate); font-size: .8rem; line-height: 1.4; }
.nw-tile[aria-pressed="true"], .nw-tile[aria-checked="true"] { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,92,255,.16), var(--shadow-soft); }
.nw-tile[aria-pressed="true"]::after, .nw-tile[aria-checked="true"]::after { content: "✓"; position: absolute; top: 10px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--violet); color: #fff; font-size: .74rem; font-weight: 800; display: grid; place-items: center; }
.nw-tile[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* chips (features, page count) */
.nw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nw-chip { font: 600 .9rem var(--font-body); color: var(--text-dark); background: #fff; border: 1.5px solid rgba(20,20,28,.14); border-radius: 999px; padding: 9px 16px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.nw-chip:hover { border-color: rgba(124,92,255,.5); }
.nw-chip[aria-pressed="true"] { background: rgba(124,92,255,.08); border-color: var(--violet); color: var(--violet-deep); }
.nw-chip .add { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9A5B00; background: rgba(251,191,36,.18); border-radius: 5px; padding: 2px 6px; }
.nw-sub { font: 600 .8rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); margin: 22px 0 10px; }

/* uploads */
.nw-drop { display: grid; place-items: center; text-align: center; gap: 6px; border: 2px dashed rgba(124,92,255,.35); background: rgba(124,92,255,.04); border-radius: 18px; padding: 34px 20px; cursor: pointer; color: var(--text-dark); transition: background .15s, border-color .15s; }
.nw-drop:hover, .nw-drop.over { background: rgba(124,92,255,.08); border-color: var(--violet); }
.nw-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.nw-drop b { font: 600 1.05rem var(--font-display); }
.nw-drop small { color: var(--slate); font-size: .82rem; }
.nw-drop .ic { font-size: 1.8rem; }
.nw-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-top: 16px; }
.nw-thumb { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--paper-soft) center/cover no-repeat; border: 1px solid rgba(20,20,28,.08); }
.nw-thumb.logo { background-size: contain; background-origin: content-box; padding: 12px; background-color: #fff; }
.nw-thumb button { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(11,11,20,.75); color: #fff; cursor: pointer; font-size: .9rem; line-height: 1; }
.nw-thumb .st { position: absolute; left: 6px; bottom: 6px; right: 6px; font-size: .7rem; font-weight: 700; color: #fff; background: rgba(11,11,20,.7); border-radius: 6px; padding: 3px 6px; }
.nw-logo-row { display: flex; gap: 18px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.nw-logo-row .nw-thumb { width: 150px; }
.nw-sw-row { display: flex; gap: 6px; }
.nw-sw-row i { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(20,20,28,.12); display: block; }

/* colours */
.nw-palettes { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.nw-pal { background: #fff; border: 1.5px solid rgba(20,20,28,.12); border-radius: 14px; padding: 10px; cursor: pointer; text-align: left; font: inherit; display: grid; gap: 8px; }
.nw-pal[aria-checked="true"] { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,92,255,.16); }
.nw-pal .strip { display: flex; height: 38px; border-radius: 9px; overflow: hidden; border: 1px solid rgba(20,20,28,.08); }
.nw-pal .strip i { flex: 1; }
.nw-pal .strip i:first-child { flex: 2; }
.nw-pal span { font-size: .8rem; font-weight: 600; color: var(--text-dark); }
.nw-pick { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.nw-pick label { display: grid; gap: 6px; justify-items: center; font-size: .78rem; color: var(--slate); }
.nw-pick input[type="color"] { width: 64px; height: 64px; border: 1.5px solid rgba(20,20,28,.14); border-radius: 14px; padding: 4px; background: #fff; cursor: pointer; }
.nw-pick .nw-clear { font-size: .78rem; color: var(--violet-deep); background: none; border: none; cursor: pointer; text-decoration: underline; }
.nw-panel { margin-top: 18px; padding: 18px; border-radius: 16px; background: var(--paper); border: 1px solid rgba(20,20,28,.06); }

/* style cards: real mini-pages */
.nw-styles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.nw-style { position: relative; background: #fff; border: 1.5px solid rgba(20,20,28,.12); border-radius: 18px; padding: 0; overflow: hidden; cursor: pointer; text-align: left; font: inherit; color: var(--text-dark); display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s, transform .15s; }
.nw-style:hover { transform: translateY(-2px); border-color: rgba(124,92,255,.5); }
.nw-style[aria-pressed="true"] { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,92,255,.18), var(--shadow-glow); }
.nw-style[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--violet); color: #fff; font-size: .8rem; font-weight: 800; display: grid; place-items: center; z-index: 2; }
.nw-style .cap { padding: 12px 14px 14px; border-top: 1px solid rgba(20,20,28,.08); }
.nw-style .cap b { font: 600 1rem var(--font-display); display: block; }
.nw-style .cap small { color: var(--slate); font-size: .78rem; line-height: 1.4; display: block; margin-top: 2px; }
.nw-style-note { font-size: .86rem; color: var(--slate); margin-top: 14px; }

/* the mini-page itself (scaled real section patterns) */
.mp { --bg:#fff; --sf:#f4f4f4; --ink:#111; --mut:#666; --ac:#333; --ac2:#999; --on:#fff; --r:10px; --hf: 'Space Grotesk', sans-serif; --bf: 'Inter', sans-serif;
  height: 196px; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--bf); position: relative; pointer-events: none; }
.mp-nav { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 7px; }
.mp-nav .b { font: 700 9px var(--hf); display: flex; gap: 4px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mp-nav { gap: 8px; }
.mp-nav .c { white-space: nowrap; }
.mp-nav .b i { width: 10px; height: 10px; border-radius: 3px; background: var(--ac); display: block; }
.mp-nav .l { display: flex; gap: 6px; color: var(--mut); margin-left: auto; white-space: nowrap; }
.mp-nav .c { background: var(--ac); color: var(--on); border-radius: var(--r); padding: 3px 7px; font-weight: 700; }
.mp-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; padding: 8px 12px 10px; align-items: center; }
.mp-hero h4 { font: 700 15px/1.05 var(--hf); letter-spacing: -.02em; margin-bottom: 5px; }
.mp-hero p { font-size: 6.5px; line-height: 1.45; color: var(--mut); margin-bottom: 7px; }
.mp-btns { display: flex; gap: 4px; }
.mp-btns span { font-size: 6.5px; font-weight: 700; border-radius: var(--r); padding: 4px 8px; background: var(--ac); color: var(--on); }
.mp-btns span + span { background: transparent; color: var(--ink); border: 1px solid currentColor; opacity: .7; }
.mp-img { height: 78px; border-radius: var(--r); background: var(--sf) center/cover no-repeat; }
.mp-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px 12px; }
.mp-row div { background: var(--sf); border-radius: calc(var(--r) * .7); padding: 6px; font-size: 6px; color: var(--mut); min-height: 44px; }
.mp-row div b { display: block; color: var(--ink); font: 700 7px var(--hf); margin-bottom: 2px; }
.mp-row div i { display: block; height: 3px; border-radius: 3px; background: var(--ac2); width: 60%; margin-top: 5px; opacity: .8; }
/* per-style variants */
.mp.s-bold .mp-hero { grid-template-columns: 1fr; text-align: left; padding-top: 14px; }
.mp.s-bold .mp-img { display: none; }
.mp.s-bold .mp-hero h4 { font-size: 19px; text-transform: uppercase; max-width: 56%; }
.mp.s-bold .mp-hero p { max-width: 56%; }
.mp.s-bold .mp-hero::after { content: ""; position: absolute; right: 12px; top: 34px; width: 38%; height: 70px; border-radius: var(--r); background: var(--ac2); opacity: .9; background-image: var(--img); background-size: cover; background-position: center; }
.mp.s-minimal .mp-hero { grid-template-columns: 1fr; text-align: center; padding-top: 16px; }
.mp.s-minimal .mp-hero h4 { font-weight: 500; font-size: 16px; letter-spacing: .01em; }
.mp.s-minimal .mp-btns { justify-content: center; }
.mp.s-minimal .mp-img { height: 30px; margin-top: 8px; }
.mp.s-minimal .mp-row div { background: transparent; border-top: 1px solid rgba(0,0,0,.12); border-radius: 0; }
.mp.s-playful .mp-hero h4 { font-size: 16px; }
.mp.s-playful .mp-img { border-radius: 40px 40px 40px 8px; }
.mp.s-playful .mp-row div:nth-child(1) { background: var(--ac2); }
.mp.s-playful .mp-row div:nth-child(2) { background: var(--sf); }
.mp.s-classic .mp-nav { border-bottom: 1px solid rgba(0,0,0,.1); }
.mp.s-classic .mp-hero h4 { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; letter-spacing: 0; }
.mp.s-classic .mp-row div b { font-family: Georgia, serif; }
.mp.s-warm .mp-hero h4 { font-family: Georgia, serif; font-style: italic; font-weight: 600; letter-spacing: 0; }

/* sites you like */
.nw-urls { display: grid; gap: 12px; }

/* plan that fits */
.nw-fit { margin-top: 24px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; background: var(--ink); color: #E3E3EA; border-radius: 18px; padding: 18px 20px; }
.nw-fit .t { font: 700 .72rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }
.nw-fit h3 { color: #fff; font-size: 1.2rem; margin: 2px 0 4px; }
.nw-fit p { font-size: .84rem; color: #B9B9C6; }
.nw-fit .ways { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.nw-fit .ways span { font-size: .78rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 4px 10px; color: #E3E3EA; }
.nw-fit .ways b { color: #fff; font-family: var(--font-display); }
.nw-fit .num { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font: 700 1.3rem var(--font-display); color: #fff; background: linear-gradient(135deg, var(--violet), var(--cyan)); }

/* gate */
.nw-gate-list { display: grid; gap: 8px; margin: 4px 0 22px; padding: 16px 18px; background: var(--paper); border-radius: 14px; font-size: .92rem; }
.nw-gate-list li { display: flex; gap: 10px; }
.nw-gate-list li::before { content: "✓"; color: #0E9F6E; font-weight: 800; }
.nw-small { font-size: .8rem; color: var(--slate); margin-top: 12px; }

/* nav row */
.nw-nav { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(20,20,28,.08); }
.nw-back { background: none; border: none; font: 600 .95rem var(--font-body); color: var(--slate); cursor: pointer; padding: 12px 6px; }
.nw-back:hover { color: var(--text-dark); }
.nw-back[hidden] { display: inline-block; visibility: hidden; }
.nw-next { min-width: 170px; }
.nw-next.go { background: var(--cyan); color: var(--ink); box-shadow: 0 10px 30px rgba(47,224,200,.35); }

/* side panel */
.nw-side { position: sticky; top: 96px; display: grid; gap: 16px; }
.nw-side-card { background: var(--ink); color: #E3E3EA; border-radius: 22px; padding: 22px 22px 18px; background-image: radial-gradient(500px 240px at 100% 0%, rgba(124,92,255,.22), transparent 60%); }
.nw-side-card .eyebrow { margin-bottom: 14px; font-size: .7rem; padding: 5px 12px; }
.nw-sum { display: grid; gap: 10px; font-size: .86rem; }
.nw-sum div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; }
.nw-sum dt { color: #9C9CAB; }
.nw-sum dd { color: #fff; overflow-wrap: anywhere; }
.nw-sum dd.empty { color: #5E5E70; }
.nw-sum .sw { display: inline-flex; gap: 4px; vertical-align: middle; }
.nw-sum .sw i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid rgba(255,255,255,.2); }
.nw-saved { font-size: .74rem; color: #6F6F80; margin-top: 14px; }
.nw-promise { list-style: none; display: grid; gap: 10px; font-size: .86rem; color: var(--slate); padding: 0 6px; }
.nw-promise b { color: var(--text-dark); }

/* build screen */
.nw-build { grid-column: 1 / -1; }
.nw-build .bl { max-width: 900px; margin: 0 auto; }
.nw-ready { text-align: center; padding: 30px 10px; }
.nw-ready h2 { margin-bottom: 10px; }
.nw-ready p { color: var(--slate); margin-bottom: 20px; }

.nw-foot { background: var(--ink); color: #9C9CAB; font-size: .84rem; padding: 22px 0; text-align: center; }
.nw-foot a { color: var(--cyan); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .nw-grid { grid-template-columns: minmax(0,1fr) 290px; } .nw-styles { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px) {
  .nw-grid { grid-template-columns: 1fr; padding-top: 24px; }
  .nw-side { position: static; order: 2; }
  .nw-promise { display: none; }
  .nw-palettes { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .mp-nav .l { display: none; }
  .mp-nav .b { max-width: 60%; }
  .nw-top-in { padding: 12px 16px 14px; }
  .nw-parts { gap: 6px; margin-bottom: 10px; }
  .nw-parts li { font-size: .62rem; letter-spacing: .05em; gap: 6px; }
  .nw-parts li + li::before { width: 10px; }
  .nw-parts li:not(.on) span.full { display: none; }
  .nw-grid { padding: 16px 12px 110px; gap: 16px; }
  .nw-card { padding: 24px 18px 18px; border-radius: 18px; min-height: 0; }
  .nw-q { font-size: 1.55rem; }
  .nw-lead { font-size: .94rem; margin-bottom: 20px; }
  .nw-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .nw-tile { padding: 13px 12px; }
  .nw-tile small { display: none; }
  .nw-tiles.wide { grid-template-columns: 1fr; }
  .nw-tiles.wide .nw-tile small { display: block; }
  .nw-styles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mp { height: 150px; }
  .nw-style .cap { padding: 9px 10px 11px; }
  .nw-style .cap small { display: none; }
  .nw-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(11,11,20,.08); }
  .nw-next { min-width: 0; flex: 1; max-width: 240px; }
  .nw-side-card { padding: 18px; }
  .nw-sum div { grid-template-columns: 84px 1fr; }
  .nw-fit { grid-template-columns: 1fr; }
  .nw-fit .num { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nw-bar i, .nw-tile, .nw-style { transition: none; } .nw-tile:hover, .nw-style:hover { transform: none; } }
/* round 13 tweaks */
.nw-body .site-header { background: rgba(11,11,20,.96); }
.nw-style[aria-pressed="true"]::after { top: auto; bottom: 14px; right: 12px; }
@media (max-width: 640px) { .nw-side { display: none; } .nw-style[aria-pressed="true"]::after { bottom: 10px; right: 8px; width: 22px; height: 22px; } }
@media (max-width: 640px) { .nw-tile[disabled] small { display: block; } }

/* ---------- /new?token=…: the journey for a new website ---------- */
.nw-journey .btn-newsite { display: none; }
.nw-journey .nw-foot { display: none; }
.nw-jr-hero { position: relative; background: var(--ink); color: #fff; padding: 64px 0 56px; overflow: hidden; }
.nw-jr-hero .container { position: relative; z-index: 1; }
.nw-jr-h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); max-width: 900px; margin-bottom: 14px; }
.nw-jr-name { background: linear-gradient(90deg, var(--violet), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nw-jr-hero .lead { color: #B9B9C6; max-width: 720px; }
.nw-jr-tracker { margin-top: 30px; display: grid; gap: 18px; justify-items: start; }
.nw-jr-steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; width: 100%; }
.nw-jr-step a { display: flex; gap: 10px; align-items: center; background: #15151F; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 12px; color: #E3E3EA; height: 100%; }
.nw-jr-step .txt { display: grid; gap: 2px; min-width: 0; }
.nw-jr-step b { font: 600 .92rem var(--font-display); color: #fff; }
.nw-jr-step small { font-size: .74rem; color: #9C9CAB; }
.jr-dot { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 700 .86rem var(--font-display); color: #fff; background: #2A2A3A; }
.nw-jr-step.is-done .jr-dot, .nw-jr-head .jr-dot { background: linear-gradient(135deg, var(--violet), var(--cyan)); }
.nw-jr-step.is-next a, .nw-jr-step.is-active a { border-color: rgba(47,224,200,.55); box-shadow: 0 0 0 1px rgba(47,224,200,.2); }
.nw-jr-step.is-next small, .nw-jr-step.is-active small { color: var(--cyan); }
.nw-jr-sec { padding: 56px 0; background: var(--paper); }
.nw-jr-soft { background: var(--paper-soft); }
.nw-jr-dark { background: var(--ink); color: #E3E3EA; }
.nw-jr-head { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; flex-wrap: wrap; }
.nw-jr-t { font: 600 1.25rem var(--font-display); }
.nw-jr-badge { font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--violet-deep); background: rgba(124,92,255,.1); border-radius: 999px; padding: 4px 10px; }
.nw-jr-dark .nw-jr-badge { color: var(--cyan); background: rgba(47,224,200,.1); }
.nw-jr-ready { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 34px; align-items: center; background: #fff; border-radius: 22px; box-shadow: var(--shadow-soft); padding: 26px; }
.nw-jr-preview { position: relative; aspect-ratio: 16 / 11; border-radius: 14px; overflow: hidden; border: 1px solid rgba(20,20,28,.08); background: var(--paper-soft); }
.nw-jr-preview iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 880px; border: 0; transform-origin: 0 0; transform: scale(var(--s, .45)); pointer-events: none; }
.nw-jr-ready h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 10px; }
.nw-jr-ready p { color: var(--slate); margin-bottom: 20px; }
.nw-jr-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.nw-jr-next { background: var(--ink); color: #E3E3EA; border-radius: 22px; padding: 30px; background-image: radial-gradient(600px 260px at 100% 0%, rgba(124,92,255,.25), transparent 60%); }
.nw-jr-next h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 6px 0 10px; }
.nw-jr-next p { color: #B9B9C6; margin-bottom: 18px; max-width: 680px; }
.nw-jr-kick { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }
.nw-jr-prog { color: #fff !important; font-weight: 600; }
.nw-jr-brief dl { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 28px; background: #fff; border-radius: 18px; padding: 22px; box-shadow: var(--shadow-soft); }
.nw-jr-brief dl div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; font-size: .92rem; }
.nw-jr-brief dt { color: var(--slate); }
.nw-jr-brief blockquote { margin-top: 16px; padding: 16px 20px; border-left: 3px solid var(--violet); background: #fff; border-radius: 0 14px 14px 0; color: var(--text-dark); font-size: .95rem; white-space: pre-line; }
.nw-jr-uph { margin-bottom: 20px; }
.nw-jr-up { list-style: none; display: grid; gap: 14px; margin-bottom: 18px; }
.nw-jr-up li { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-soft); }
.nw-jr-up h3 { font-size: 1.05rem; margin-bottom: 4px; }
.nw-jr-up p { color: var(--slate); font-size: .9rem; }
.nw-jr-tools { margin-bottom: 14px; font-size: .9rem; }
.nw-jr-tools a { color: var(--cyan); }
#design .bl { max-width: 900px; margin: 0 auto; }
@media (max-width: 900px) {
  .nw-jr-steps { grid-template-columns: 1fr; }
  .nw-jr-ready { grid-template-columns: 1fr; }
  .nw-jr-brief dl { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nw-jr-hero { padding: 40px 0 36px; }
  .nw-jr-sec { padding: 36px 0; }
  .nw-jr-ready, .nw-jr-next { padding: 18px; }
  .nw-jr-brief dl div { grid-template-columns: 96px 1fr; }
  .container { padding: 0 16px; }
}

/* ---------- SITE-022b: which pages ---------- */
.nw-pages .nw-chip { font-weight: 600; }
.nw-pages .nw-chip[aria-pressed="false"] { color: var(--slate); }
.nw-chip.locked { opacity: 1; cursor: default; background: rgba(124,92,255,.08); border-color: var(--violet); color: var(--violet-deep); }
.nw-chip.own { border-style: dashed; }
.nw-chip .x { margin-left: 2px; font-size: 1rem; line-height: 1; color: var(--slate); }
.nw-addrow { display: flex; gap: 10px; margin-top: 18px; }
.nw-addrow .nw-in { flex: 1; font-size: 1rem; padding: 12px 16px; }
.nw-addbtn { white-space: nowrap; }
.nw-pagecount { margin-top: 14px; font-size: .9rem; color: var(--slate); }
.nw-pagecount b { color: var(--text-dark); }
@media (max-width: 640px) { .nw-addrow { flex-direction: column; } .nw-addbtn { width: 100%; } }

/* ---------- SITE-022b: the live build on /new — L-B light stepper (Darren's pick, 27 Sep) ----------
   The stepper (build-live.js) was designed for the dark build console on the
   report page; dropped onto the light journey page its white text vanished. */

/* L-B: light stepper — a white card in the journey's paper style, ink text, violet/cyan accents */
.bl-wrap-b { background: #fff; border-radius: 22px; padding: 30px 32px 24px; box-shadow: var(--shadow-soft); border: 1px solid rgba(20,20,28,.06); }
.bl-wrap-b .bl { --bl-line: rgba(20,20,28,.08); --bl-card: var(--paper); color: var(--text-dark); }
.bl-wrap-b .bl-title { color: var(--text-dark); }
.bl-wrap-b .bl-meta { color: var(--slate); }
.bl-wrap-b .bl-elapsed, .bl-wrap-b .bl-bar-label b { color: var(--text-dark); }
.bl-wrap-b .bl-live { color: #0E8F7E; background: rgba(47,224,200,.12); border-color: rgba(47,224,200,.5); }
.bl-wrap-b .bl-live i { background: #14B8A6; }
.bl-wrap-b .bl-bar { background: var(--paper-soft); }
.bl-wrap-b .bl-bar-label { color: var(--slate); }
.bl-wrap-b .bl-dot { background: var(--paper); border-color: rgba(20,20,28,.14); color: var(--slate); }
.bl-wrap-b .bl-step.on .bl-dot { border-color: var(--violet); color: var(--violet-deep); background: #fff; }
.bl-wrap-b .bl-step.on .bl-dot::before { border-top-color: var(--violet); }
.bl-wrap-b .bl-step.ok .bl-dot { background: #10B981; border-color: #10B981; color: #fff; }
.bl-wrap-b .bl-top strong { color: var(--slate); }
.bl-wrap-b .bl-step.on .bl-top strong, .bl-wrap-b .bl-step.ok .bl-top strong { color: var(--text-dark); }
.bl-wrap-b .bl-state { color: var(--slate); }
.bl-wrap-b .bl-step.on .bl-state { color: var(--violet-deep); } .bl-wrap-b .bl-step.ok .bl-state { color: #0E9F6E; }
.bl-wrap-b .bl-sub, .bl-wrap-b .bl-step.on .bl-sub, .bl-wrap-b .bl-step.ok .bl-sub { color: var(--slate); }
.bl-wrap-b .bl-facts span { background: var(--paper); border-color: rgba(20,20,28,.08); color: var(--slate); }
.bl-wrap-b .bl-facts b, .bl-wrap-b .bl-sw b, .bl-wrap-b .bl-lines q, .bl-wrap-b .bl-quote, .bl-wrap-b .bl-score b { color: var(--text-dark); }
.bl-wrap-b .bl-score b.bl-after { color: #0E9F6E; }
.bl-wrap-b .bl-sw { background: var(--paper); border-color: rgba(20,20,28,.08); }
.bl-wrap-b .bl-sw i { box-shadow: inset 0 0 0 1px rgba(20,20,28,.15); }
.bl-wrap-b .bl-sw em, .bl-wrap-b .bl-k, .bl-wrap-b .bl-note, .bl-wrap-b .bl-score span, .bl-wrap-b .bl-foot { color: var(--slate); }
.bl-wrap-b .bl-chip { background: rgba(124,92,255,.08); border-color: rgba(124,92,255,.3); color: var(--violet-deep); }
.bl-wrap-b .bl-plan .bl-chip { background: var(--paper); border-color: rgba(20,20,28,.1); color: var(--text-dark); }
.bl-wrap-b .bl-built .bl-chip { background: rgba(47,224,200,.12); border-color: rgba(20,184,166,.4); color: #0B6B5E; }
.bl-wrap-b .bl-ticks { color: var(--slate); } .bl-wrap-b .bl-ticks span.ok { color: var(--text-dark); }
.bl-wrap-b .bl-qa li { color: var(--text-dark); }
.bl-wrap-b .bl-qa em { color: #0E8F7E; }
.bl-wrap-b .bl-nf { background: linear-gradient(150deg, rgba(124,92,255,.08), rgba(47,224,200,.05) 70%), #fff; border-color: rgba(124,92,255,.3); }
.bl-wrap-b .bl-nf.bl-nf-keep { background: #FFF8E6; border-color: rgba(217,119,6,.35); }
.bl-wrap-b .bl-nf-keep strong { color: #92400E; }
.bl-wrap-b .bl-nf-ic { background: var(--paper); }
.bl-wrap-b .bl-nf-head strong { color: var(--text-dark); }
.bl-wrap-b .bl-nf-lede, .bl-wrap-b .bl-f, .bl-wrap-b .bl-c, .bl-wrap-b .bl-nf-msg, .bl-wrap-b .bl-nf-ok { color: var(--slate); }
.bl-wrap-b .bl-f em, .bl-wrap-b .bl-c em, .bl-wrap-b .bl-nf-small { color: var(--slate); }
.bl-wrap-b .bl-f input { background: var(--paper); border-color: rgba(20,20,28,.15); color: var(--text-dark); }
.bl-wrap-b .bl-nf-edit { color: var(--violet-deep); }
@media (max-width: 640px) { .bl-wrap-b { padding: 20px 16px 18px; border-radius: 20px; } }