/* MIRROR of the brand tokens. The canonical list is :root in
   application/css/h2v.css; this copy exists because the WIZARD is a Webflow fragment and that page links neither
   h2v.css nor h2v-theme.css.
   Scripts/test_brand_tokens.py reads both and fails if they disagree.
   Change h2v.css, then run that script -- do not edit values here alone. */

:root {
	--h2c-green:       #426f71;
	--h2c-green-dark:  #3a6264;
	--h2c-navy:        #193758;
	--h2c-navy-dark:   #16304c;
	--h2c-navy-hero:   #1d3557;
	--h2c-green-muted: #7a9c9e;
	--h2c-warn:        #b45309;
	--h2c-bad:         #b42318;
	--h2c-gold:        #c9a24c;
	--h2c-gold-dark:   #b0872f;
	--h2c-gold-bright: #d4af37;
}

/* =============================================================================
   new-listing.css — the New Listing intake wizard (/new-listing).

   Guided, one-step-per-screen flow an agent walks after winning a listing.
   Standalone page (own <head>, own inline JS) served straight off disk by
   nginx from /application/javascript/pages/new-listing/ — NOT a Webflow
   fragment, so inline <script> runs normally and no bundle is needed.

   Namespaced nlw- (new listing wizard). Scoped under .lp-wrapper like the
   other lp-* pages. Loaded AFTER h2v-theme.css and lp.css; writes NO rules
   against shared lp-* visual classes.

   Deliberately reuses the lp-build-request visual language (two-tone navy
   bands, white cards, gold CTA) so the two intakes feel like one product:
     header band  #16304c
     content band #193758

   MOBILE-FIRST: every control is >=44px touch target, the wizard is a single
   ~700px column, and nothing depends on hover. This page is served to
   Facebook in-app browser traffic, so it avoids anything that browser handles
   badly — no position:sticky footers, no backdrop-filter, no dvh units.
============================================================================= */

/* ---- Top gap below the Webflow site nav ------------------------------------
   lp.css gives .lp-wrapper 36px of top padding ("breathing room below the site
   header"). The standalone version of this page zeroed it because it owned the
   whole viewport and its own header band sat flush at the top. Embedded in a
   Webflow page it must NOT sit flush, or the dark hero butts straight into the
   site nav.

   The gap is a MARGIN on the outermost dark column, not padding inside it:
   padding would just make the hero taller and stay dark, whereas a margin
   reveals the host page's background above the block — matching the background
   already showing down the left and right sides.

   Mobile-first: a slightly tighter gap on phones (screen space is scarce), then
   24px from 560px up — the same breakpoint the rest of this file uses. 24px, not
   lp.css's usual 36px, so the gap above the block reads the same weight as the
   host page's gaps down its left and right sides.

   NOTE: the standalone page also set `body { background: #193758 }` so its own
   navy filled the viewport. That is deliberately gone — as an embedded fragment
   this page has no business repainting the host page's body, and leaving it
   would paint the new gap the same navy as the hero, making it invisible. */
.lp-wrapper { padding-top: 0; }
html { scroll-behavior: smooth; }

.nlw-page { margin-top: 20px; }
@media (min-width: 560px) { .nlw-page { margin-top: 24px; } }

.nlw-page {
	/* #M: the four brand values now come from the mirror at the top of this
	   file. The --nlw-* NAMES stay -- they are referenced ~200 times below and
	   renaming them would be a diff nobody could review. */
	--nlw-head:var(--h2c-navy-dark); --nlw-body:var(--h2c-navy);
	--nlw-gold:var(--h2c-gold); --nlw-gold-dk:var(--h2c-gold-dark);
	--nlw-ink:#1c2530; --nlw-muted:#69737e; --nlw-line:#e5e9ed; --nlw-card:#ffffff;
	--nlw-onnavy:#c8d3dd; --nlw-ok:var(--h2c-green); --nlw-warn:#d97706; --nlw-bad:var(--h2c-bad);
	/* Pale teal, from the design system: h2v-theme.css --h2v-pale-teal /
	   --h2v-mid-teal. Mirrored into this page's own --nlw-* set because the
	   Webflow fragment does not link h2v-theme.css; the VALUES are the
	   theme's, not new ones. Used for a card that sits INSIDE another card
	   -- a white row on the white .nlw-card had no edge at all. */
	--nlw-pale-teal:#e8f0f2; --nlw-mid-teal:#b6cad0;
	--nlw-teal:var(--h2c-green); --nlw-teal-dk:var(--h2c-green-dark);
	/* No min-height: the card sizes to its content. 100vh was a holdover from the
	   standalone page, where this block owned the viewport and had to fill it. As
	   an inset card it just padded short steps (step 1) with a slab of dead navy
	   below the footer. Tall steps grow past the viewport on their own. */
	background: var(--nlw-body); color: #fff;

	/* Rounded card, not a full-bleed slab: the block is inset from the host page
	   on all four sides, so square corners read as a broken full-width section.
	   overflow:hidden is load-bearing — the head/body bands are full-width
	   children painting their own backgrounds right out to the edge, and without
	   the clip they square the corners back off. Slightly larger than the inner
	   white .nlw-card (14px) so the nesting reads correctly. */
	border-radius: 16px;
	overflow: hidden;
}
.nlw-page, .nlw-page * {
	box-sizing: border-box;
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.nlw-page * { margin: 0; padding: 0; }

/* ---- Full-width bands; inner column centred at 700px ----------------------- */
.nlw-band-head { background: var(--nlw-head); width: 100%; }
/* #AS: 20px, down from 56. With the footer's own 26px 0 8px above it, the
   page ended in 64px of navy below the last words -- about an inch, and
   nothing in it. 20 + the footer's 8 leaves a margin that reads as deliberate
   rather than as the page having run out. */
.nlw-band-body { background: var(--nlw-body); width: 100%; padding-bottom: 20px; }
/* THE COLUMN WAS 725px AND IS NOW 860 (#AS).

   725, NOT 700 -- and that distinction cost me a pass. `.nlw-col` declared
   max-width:700px, but the fragment sits inside `.lp-wrapper` in a Webflow
   page whose container is 725px wide, and every band inherited that. Raising
   the declared max-width to 860 changed NOTHING: the used width stayed 725,
   and the heading fitted on one line only because it needed 536px of a 536px
   text column -- exactly, with no slack at all. Measured, after asserting the
   DECLARED max-width and believing it.

   So the widening happens on .nlw-page, which has to break OUT of that 725px
   container: margin-left:50% + translateX(-50%) centres a fixed-width block
   against its parent and lets it exceed it. Checked before shipping: no
   ancestor sets overflow hidden or clip, and the document's scrollWidth still
   equals the viewport at both widths, so nothing is cut off and no horizontal
   scrollbar appears. There are no position:fixed descendants in this page, so
   the transform's containing block changes nothing.

   THE STEP PANELS DO NOT GET WIDER WITH IT. A 16px input stretched to 820px is
   a worse form, not a roomier one -- the eye loses the start of the line coming
   back from the end of it. They keep the old 700px measure and simply sit in a
   wider band; only the HEADER spends the extra width, which now leaves the
   heading 135px of slack instead of none. */
.nlw-page {
	width: 860px;
	max-width: calc(100vw - 32px);
	margin-left: 50%;
	transform: translateX(-50%);
}
.nlw-col { max-width: 860px; margin: 0 auto; padding: 0 20px; }
.nlw-band-body .nlw-col > * { max-width: 700px; margin-left: auto; margin-right: auto; }

/* ---- Header ----------------------------------------------------------------
   THE BAND'S TOP PADDING MOVED UP ONE LEVEL (#I, 2026-09-24). This rule carried
   `padding: 30px 0 26px`, and its old comment says exactly why: there was no
   logo row in this band, so its top padding "carries the whole gap" down from
   the panel's edge. F2 put a logo row back on 2026-09-24 and the 30px stayed
   where it was — which put it BETWEEN the card and the eyebrow, a 44px hole,
   while the card itself sat flush against the panel's rounded top edge.

   The 30px now sits on the head band's own column, above the card, which is
   what the review page's `.band-head .col` does with the identical value. The
   two are read minutes apart; this region is now the same on both. */
/* #AS: 18px, down from 30. That 30 existed to carry the whole gap down to a
   logo row that owned the top of the band; the mark is in the title row now,
   so the band only needs enough air to not look cramped. Measured: the eyebrow's
   top sat 30px below the panel edge and now sits 18px below it. */
.nlw-band-head .nlw-col { padding-top: 18px; }
.nlw-head-inner { padding: 0 0 26px; min-width: 0; }

/* THE HEADER ROW (#AS).
   align-items: flex-start is what puts the mark's TOP EDGE on the eyebrow's,
   rather than centring a short card against a three-line block.

   min-width: 0 on the text column is load-bearing: a flex item will not shrink
   below its content's intrinsic minimum otherwise, and the heading would push
   the mark off the band instead of the two sharing the row. */
.nlw-head-row { display: flex; align-items: flex-start; gap: 24px; }
.nlw-head-row .nlw-head-inner { flex: 1 1 auto; }
.nlw-head-row .nlw-brand { flex: 0 0 auto; }
.nlw-eyebrow { color: var(--nlw-gold); font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 10px; }
.nlw-page h1 { font-size: 25px; line-height: 1.16; font-weight: 800; letter-spacing: -.5px; margin-bottom: 10px; }
@media (min-width: 560px) { .nlw-page h1 { font-size: 31px; } }
.nlw-lede { font-size: 15.5px; line-height: 1.6; color: var(--nlw-onnavy); }
.nlw-lede b { color: #fff; }

/* ---- Progress rail --------------------------------------------------------- */
/* min-height: the rail ships EMPTY and is built by newlisting.js (2026-10-03),
   so it holds its own height (4px segment + 16px padding) before init. */
.nlw-rail { display: flex; gap: 6px; padding: 0 0 16px; min-height: 20px; }
.nlw-rail-seg { flex: 1; height: 4px; border-radius: 99px; background: rgba(255,255,255,.16); }
.nlw-rail-seg.is-done { background: var(--nlw-gold); }
.nlw-rail-seg.is-now  { background: #fff; }
/* ---- Held-revision note (2026-09-28-K) ------------------------------------
   Top of the edit screen, on every step: the form is pre-filled from changes
   still waiting for approval, and submitting replaces that review. A white
   card like the steps' own, with the gold rule the band uses for emphasis --
   read before the agent starts, not styled as an error. */
.nlw-held { display: none; background: var(--nlw-card); color: var(--nlw-ink); border-left: 4px solid var(--nlw-gold); border-radius: 14px; padding: 14px 18px; margin: 16px 0 14px; font-size: 14px; line-height: 1.5; box-shadow: 0 10px 30px -18px rgba(0,0,0,.5); }
.nlw-held.nlw-show { display: block; }
/* Ships empty; goStep() writes it. Fixed line box so the empty pre-init
   paint takes the same height as "Step 1 of 4" (2026-10-03). */
.nlw-stepnum { font-size: 12px; line-height: 18px; min-height: 26px; font-weight: 700; color: var(--nlw-onnavy); padding-bottom: 8px; letter-spacing: .3px; }

/* ---- Steps ----------------------------------------------------------------- */
.nlw-step { display: none; }
.nlw-step.is-active { display: block; }

/* ---- First-time explainer (new agents only) --------------------------------
   Sits on the navy, ABOVE the white cards, so it reads as the wizard talking
   rather than as another form section. Same heading/lede treatment as the intro
   panel, scaled down — this is a mid-flow aside, not a second hero. */
.nlw-intro { padding: 2px 0 16px; }
.nlw-intro-h { font-size: 19px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 6px; }
.nlw-intro-p { font-size: 14.5px; line-height: 1.6; color: var(--nlw-onnavy); }
@media (min-width: 560px) { .nlw-intro-h { font-size: 21px; } }

.nlw-card { background: var(--nlw-card); color: var(--nlw-ink); border-radius: 14px; padding: 22px 20px; margin-top: 4px; box-shadow: 0 10px 30px -18px rgba(0,0,0,.5); }
.nlw-card + .nlw-card { margin-top: 16px; }
.nlw-card h2 { font-size: 18px; font-weight: 800; letter-spacing: -.2px; margin-bottom: 4px; }
.nlw-card-sub { font-size: 13px; color: var(--nlw-muted); margin-bottom: 16px; line-height: 1.5; }
/* ---- Listing rows in the returning-agent picker ---------------------------
   A .nlw-card is white, and these sit inside one, so the rows dissolved into
   their own container (Chris, 2026-09-01). Pale teal separates them without
   introducing a colour: same pair the theme already uses for "the new format"
   card, and the same treatment the revision approval page gives its photo
   panel. Border rather than a shadow -- these are a list, and stacked shadows
   read as depth that isn't there. */
.nlw-listing-row {
	background: var(--nlw-pale-teal);
	color: var(--nlw-ink);
	border: 1px solid var(--nlw-mid-teal);
	border-radius: 12px;
	padding: 16px 18px;
	/* Same drop shadow .nlw-card carries. Dropped when this class was split
	   off, and the rows went flat; Chris asked for it back. */
	box-shadow: 0 10px 30px -18px rgba(0,0,0,.5);
}
.nlw-listing-row + .nlw-listing-row { margin-top: 10px; }

/* Row actions. NOT .nlw-back -- that is a wizard nav button with a 54px
   min-height, which on a list row reads as four slabs rather than four
   buttons. These are the theme's own brand teal on white (h2v-theme.css
   --h2v-teal var(--h2c-green), hover #355863, on-colour #ffffff), sized like the
   in-row controls they are. */
.nlw-row-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 34px; padding: 0 14px;
	background: var(--nlw-teal); color: #fff;
	border: 1px solid var(--nlw-teal); border-radius: 8px;
	font-size: 13.5px; font-weight: 700; line-height: 1;
	cursor: pointer; white-space: nowrap;
}
.nlw-row-btn:hover { background: var(--nlw-teal-dk); border-color: var(--nlw-teal-dk); }
.nlw-row-btn:active { transform: translateY(1px); }
.nlw-row-btn:disabled { background: #9aa8ae; border-color: #9aa8ae; cursor: not-allowed; }

.nlw-sect { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--nlw-muted); margin: 20px 0 10px; }
.nlw-sect:first-child { margin-top: 0; }

/* ---- Fields ---------------------------------------------------------------- */
.nlw-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

/* CONTENT-SIZED INPUTS (#102).
   Every field used to fill its grid cell whatever it held, so a two-letter
   state sat in a box half the row wide and a phone number got the whole row.

   MAX-WIDTH, NOT WIDTH, and deliberately so: below 560px the grid collapses to
   a single column, and a fixed width would either overflow it or leave the
   field stranded. A maximum lets the cell shrink underneath it. */
.nlw-w-state { max-width: 96px; }
.nlw-w-phone { max-width: 240px; }
@media (min-width: 560px) { .nlw-grid-2 { grid-template-columns: 1fr 1fr; } .nlw-grid-3 { grid-template-columns: 2fr 1fr 1fr; } }
.nlw-field { display: flex; flex-direction: column; min-width: 0; }
.nlw-label { font-size: 13px; font-weight: 700; color: var(--nlw-ink); margin-bottom: 6px; }
.nlw-req { color: var(--nlw-bad); }
.nlw-input, .nlw-textarea {
	width: 100%; padding: 12px 13px; border-radius: 9px; border: 1px solid #cfd6dd;
	background: #fff; font-size: 16px; color: var(--nlw-ink);	/* 16px: stops iOS zoom-on-focus */
}
.nlw-textarea { min-height: 96px; resize: vertical; }
.nlw-input:focus, .nlw-textarea:focus { outline: none; border-color: var(--nlw-gold); box-shadow: 0 0 0 3px rgba(201,162,76,.18); }
.nlw-input.nlw-invalid, .nlw-textarea.nlw-invalid { border-color: var(--nlw-bad); }
.nlw-err { display: none; font-size: 12px; font-weight: 600; color: var(--nlw-bad); margin-top: 5px; }
.nlw-err.nlw-show { display: block; }
.nlw-hint { font-size: 12px; color: var(--nlw-muted); margin-top: 5px; }

/* Input paired with an inline "Look up" button */
.nlw-inline { display: flex; gap: 8px; align-items: stretch; }
.nlw-inline .nlw-input { flex: 1 1 auto; min-width: 0; }
.nlw-lookup {
	flex: none; padding: 0 15px; min-height: 46px; border-radius: 9px; cursor: pointer;
	border: 1px solid var(--nlw-gold); background: #fffdf6; color: var(--nlw-gold-dk);
	font-size: 13.5px; font-weight: 800; white-space: nowrap;
}
.nlw-lookup:disabled { opacity: .55; cursor: default; }

/* ---- Key features list -----------------------------------------------------
   Mirrors .edit-home-features-* on the member Edit Home Features tab (two-column
   rows collapsing to one on narrow screens, ✖ on the left of each row), redrawn
   in nlw-* tokens so it reads as part of the wizard rather than the app. Empty
   list renders nothing — the grid has no gap to show until a feature exists. */
.nlw-feat-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
.nlw-feat-list:not(:empty) { margin-bottom: 10px; }
@media (min-width: 560px) { .nlw-feat-list { grid-template-columns: 1fr 1fr; } }
.nlw-feat-item {
	display: flex; align-items: center; gap: 10px; width: 100%;
	background: #fff; border: 1px solid #cfd6dd; border-radius: 9px;
	padding: 9px 11px; font-size: 14px;
}
.nlw-feat-text { flex: 1; min-width: 0; color: var(--nlw-ink); word-break: break-word; }
.nlw-feat-remove {
	flex: none; min-width: 24px; height: 24px; padding: 0 6px; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	border: none; border-radius: 5px; background: var(--nlw-gold); color: #fff;
	font-size: 12px; font-weight: 800; line-height: 1;
}
.nlw-feat-remove:hover { background: var(--nlw-gold-dk); }
.nlw-feat-add-row { display: flex; gap: 8px; align-items: stretch; }
.nlw-feat-add-row .nlw-feat-input { flex: 1 1 auto; min-width: 0; }
.nlw-feat-add {
	flex: none; padding: 0 15px; min-height: 46px; border-radius: 9px; cursor: pointer;
	border: 1px solid var(--nlw-gold); background: #fffdf6; color: var(--nlw-gold-dk);
	font-size: 13.5px; font-weight: 800; white-space: nowrap;
}
@media (max-width: 559px) { .nlw-feat-add-row { flex-direction: column; } }

/* Live character counter under the feature input. Quiet by default; the
   at-limit state is the only time it should draw the eye. */
.nlw-feat-count {
	margin-top: 4px;
	font-size: 0.8em;
	color: #6b7280;
	text-align: right;
}
.nlw-feat-count.is-at-limit { color: var(--h2c-warn); font-weight: 600; }

/* ---- DBPR status badge (WARN-ONLY — never gates the flow) ------------------ */
.nlw-dbpr { display: none; margin-top: 10px; border-radius: 10px; padding: 11px 13px; font-size: 13px; line-height: 1.5; border: 1px solid; }
.nlw-dbpr.nlw-show { display: block; }
.nlw-dbpr-t { font-weight: 800; }
.nlw-dbpr.is-ok   { background: #f2f8f6; border-color: #bcd9d1; color: #1e4d43; }
.nlw-dbpr.is-warn { background: #fff8ec; border-color: #f0d8a8; color: #7a4a06; }
.nlw-dbpr ul { margin: 6px 0 0 17px; }
.nlw-dbpr li { margin-top: 3px; }

/* ---- Returner "welcome back" summary --------------------------------------- */
.nlw-known { display: flex; gap: 13px; align-items: center; background: #f2f8f6; border: 1px solid #bcd9d1; border-radius: 11px; padding: 13px; }
.nlw-known-pic { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: #dbe6ea; border: 1px solid var(--nlw-line); }
.nlw-known-n { font-size: 15px; font-weight: 800; color: #1e4d43; }
.nlw-known-s { font-size: 12.5px; color: #3d6a60; margin-top: 2px; }

/* ---- Broker on file: confirm / update -------------------------------------- */
.nlw-onfile { background: #f8fafc; border: 1px solid var(--nlw-line); border-radius: 11px; padding: 14px; }
.nlw-onfile-n { font-size: 15px; font-weight: 800; color: var(--nlw-ink); }
.nlw-onfile-s { font-size: 12.5px; color: var(--nlw-muted); margin-top: 3px; }
.nlw-choice2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 13px; }
.nlw-chip {
	min-height: 46px; border-radius: 9px; cursor: pointer; padding: 11px 12px;
	border: 1.5px solid #cfd6dd; background: #fff; color: var(--nlw-ink);
	font-size: 14px; font-weight: 800; text-align: center;
}
.nlw-chip.is-on { border-color: var(--nlw-gold); background: #fffdf6; color: var(--nlw-gold-dk); }

/* ---- Single-asset uploads (headshot / logo) -------------------------------- */
.nlw-asset { display: flex; gap: 13px; align-items: center; }
.nlw-asset-prev { flex: none; width: 62px; height: 62px; border-radius: 10px; border: 1px solid var(--nlw-line); background: #eef1f4 center/cover no-repeat; }
.nlw-asset-prev.is-round { border-radius: 50%; }
.nlw-asset-btn {
	min-height: 44px; padding: 0 15px; border-radius: 9px; cursor: pointer;
	border: 1.5px solid #cfd6dd; background: #fff; color: var(--nlw-ink); font-size: 14px; font-weight: 800;
}
.nlw-asset-name { font-size: 12px; color: var(--nlw-muted); margin-top: 5px; word-break: break-all; }

/* ---- Categorized uploader -------------------------------------------------- */
.nlw-grp { border: 1px solid var(--nlw-line); border-radius: 11px; overflow: hidden; margin-top: 10px; }
.nlw-grp-h {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	width: 100%; cursor: pointer; padding: 14px; min-height: 52px;
	background: #f8fafc; border: none; text-align: left;
}
.nlw-grp-t { font-size: 14.5px; font-weight: 800; color: var(--nlw-ink); }
.nlw-grp-n { font-size: 12px; font-weight: 800; color: var(--nlw-muted); }
.nlw-grp-caret { font-size: 12px; color: var(--nlw-muted); }
.nlw-grp-b { display: none; padding: 4px 14px 14px; }
.nlw-grp.is-open .nlw-grp-b { display: block; }

/* THE ROW SEPARATOR IS A GROUP-BODY CONCERN, so it is scoped to one (#98).
   Unscoped, `.nlw-cat:first-child { border-top: none }` (0,2,0) outranked
   `.nlw-featured`'s border shorthand (0,1,0) and stripped the top edge off the
   Featured View panel — it is its host's only child, so it is always
   :first-child. The panel was drawing three borders and nobody could see why.
   Scoping is the fix; a second border painted over the top would not have
   been. */
.nlw-grp-b .nlw-cat { border-top: 1px solid var(--nlw-line); padding: 12px 0 4px; }
.nlw-grp-b .nlw-cat:first-child { border-top: none; }
.nlw-cat-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nlw-cat-l { font-size: 13.5px; font-weight: 700; color: var(--nlw-ink); }

/* =============================================================================
   FEATURED VIEW — its own panel, not a row in the strip.

   The one-photo rule has to be legible BEFORE an agent bumps into it, so this
   block gets a border, a tint and a divider under it. A slot styled like every
   other category reads as "add as many as you like", which is exactly the
   expectation the swap behaviour would then violate.
   ============================================================================= */
.nlw-featured {
	border: 1.5px solid var(--nlw-gold-dk, #b8860b);
	background: #fffdf6;
	border-radius: 10px;
	padding: 12px 14px 10px 14px;
	margin: 0 0 4px 0;
}

.nlw-featured .nlw-cat-l { font-size: 14.5px; }

/* THE FEATURED TILE IS ROUGHLY DOUBLE A ROOM TILE (#101).
   A room tile lands at 91x68 out of the shared auto-fill grid. Featured View is
   not a room -- it is the single most important photo, it has its own block,
   and at room size the prompt wrapped to three lines. One fixed column at 186px
   gives 186x140 at the same 4:3, which fits the prompt in two lines and makes
   the drop target comfortably larger. The size was chosen to fit the text
   rather than the text broken to fit the size. */
.nlw-featured .nlw-strip {
	grid-template-columns: 186px;
	justify-content: start;
}

.nlw-featured-tag {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--nlw-gold-dk, #b8860b);
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: 1px;
}

.nlw-featured-hint {
	margin: 4px 0 8px 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: #4b5563;
}

.nlw-featured-micro {
	margin-top: 6px;
	font-size: 11.5px;
	font-style: italic;
	color: #6b7280;
}

/* "Featured photo replaced. Undo" (2026-09-29-L) -- 8 seconds after a replace. */
.nlw-featured-undo {
	margin-top: 6px;
	font-size: 13px;
	color: var(--h2v-body-text, #111827);
}
.nlw-featured-undo-btn {
	background: none; border: 0; padding: 0 2px;
	color: var(--h2c-green); font-weight: 700; text-decoration: underline;
	cursor: pointer; font-size: 13px;
}
.nlw-featured-undo[hidden] { display: none; }

/* The visual break between the mandatory photo and everything optional. */
.nlw-photos-divider {
	height: 1px;
	background: #e5e7eb;
	margin: 14px 0 12px 0;
}

.nlw-otherhead-t {
	font-size: 13.5px;
	font-weight: 800;
	color: var(--nlw-ink);
}

.nlw-otherhead-h {
	margin: 2px 0 10px 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: #4b5563;
}
.nlw-cat-l .nlw-cat-req { color: var(--nlw-gold-dk); font-size: 11px; font-weight: 800; margin-left: 6px; }
.nlw-cat-add {
	flex: none; min-height: 40px; padding: 0 14px; border-radius: 9px; cursor: pointer;
	border: 1.5px dashed #cfd6dd; background: #fff; color: var(--nlw-ink); font-size: 13px; font-weight: 800;
}
.nlw-cat-add:hover { border-color: var(--nlw-gold); background: #fffdf6; }
/* Drag-and-drop target (desktop). The whole row highlights, since .nlw-strip is
   display:none until a category holds a photo — there'd be nothing to aim at on
   an empty one. pointer-events on the children is what stops the highlight
   flickering as the cursor crosses the label and the + Add button; it only
   applies while a drag is actually over the row. */
.nlw-cat.is-drop { background: #fffdf6; box-shadow: inset 0 0 0 2px var(--nlw-gold); border-radius: 9px; }
.nlw-cat.is-drop * { pointer-events: none; }

.nlw-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 9px; margin-top: 11px; }
.nlw-strip:empty { display: none; }
.nlw-thumb { position: relative; border-radius: 9px; overflow: hidden; border: 1px solid var(--nlw-line); background: #eef1f4; aspect-ratio: 4 / 3; }
.nlw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nlw-thumb-x {
	position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%;
	border: none; background: rgba(16,24,32,.78); color: #fff; font-size: 16px; line-height: 22px;
	cursor: pointer; padding: 0; text-align: center;
}
.nlw-thumb-x:hover { background: var(--nlw-bad); }

/* The empty Featured View tile. Same box as a real thumb — same radius, same
   4:3, same grid cell — so it reads as "a photo goes here" rather than as a
   different kind of control. Dashed, because the box is a target and not yet
   content. */
.nlw-thumb-empty {
	border: 1.5px dashed var(--nlw-gold-dk, #b8860b);
	background: #fffaf0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
}

.nlw-thumb-empty:hover,
.nlw-thumb-empty:focus-visible {
	background: #fff5e0;
	outline: none;
	border-color: var(--nlw-gold);
}

.nlw-thumb-empty-t {
	font-size: 12.5px;
	line-height: 1.4;
	font-weight: 600;
	color: #7a5c12;
	padding: 6px 12px;
}

.nlw-count { font-size: 12.5px; font-weight: 700; color: var(--nlw-muted); margin-top: 14px; }
.nlw-file-input { display: none; }
.nlw-bar { height: 6px; border-radius: 99px; background: #e5e9ed; overflow: hidden; margin-top: 12px; display: none; }
.nlw-bar.nlw-show { display: block; }
.nlw-bar-fill { height: 100%; width: 0%; background: var(--nlw-gold); transition: width .2s ease; }
/* 2026-10-02-D: the words under the bar -- uploading, then saving. */
.nlw-bar-label { font-size: 13px; color: var(--nlw-muted); margin-top: 6px; min-height: 1.2em; }
.nlw-done-close { font-weight: 700; }

/* ---- Review list ----------------------------------------------------------- */
/* ONE BORDER PER SECTION (Brief 2026-10-05-B, Part 7). The panel itself drew a
   box round every group, each heading drew an underline, and each group's first
   row drew a top line 8px below it -- a header box, an empty strip, a second
   box. Now each group (.nlw-rev-g) is the card and the panel draws nothing. */
.nlw-rev { border: 0; }
.nlw-rev-r { display: flex; gap: 12px; padding: 10px 13px; border-top: 1px solid var(--nlw-line); font-size: 13.5px; }
.nlw-rev-r:first-child { border-top: none; }
.nlw-rev-k { flex: none; width: 108px; color: var(--nlw-muted); font-weight: 700; }
.nlw-rev-v { flex: 1; color: var(--nlw-ink); font-weight: 700; word-break: break-word; }

/* ---- Permission ------------------------------------------------------------ */
.nlw-perm { display: flex; gap: 11px; align-items: flex-start; background: #f8fafc; border: 1px solid var(--nlw-line); border-radius: 10px; padding: 14px; cursor: pointer; }
.nlw-perm input[type="checkbox"] { flex: none; width: 21px; height: 21px; margin-top: 1px; accent-color: var(--nlw-gold); cursor: pointer; }
.nlw-perm-text { font-size: 13px; line-height: 1.55; color: var(--nlw-ink); }

/* ---- Nav buttons ----------------------------------------------------------- */
.nlw-nav { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.nlw-next {
	flex: 1; display: flex; align-items: center; justify-content: center; min-height: 54px;
	background: var(--nlw-gold); color: #22150a; font-size: 17px; font-weight: 800;
	padding: 15px; border: none; border-radius: 11px; cursor: pointer;
	box-shadow: 0 10px 26px rgba(201,162,76,.30);
}
.nlw-next:disabled { background: #6d7a88; color: #d6dde4; cursor: not-allowed; box-shadow: none; }
.nlw-next:not(:disabled):active { transform: translateY(1px); }
.nlw-back {
	flex: none; min-height: 54px; padding: 0 18px; border-radius: 11px; cursor: pointer;
	border: 1px solid rgba(255,255,255,.28); background: transparent; color: #fff;
	font-size: 15px; font-weight: 800;
}
.nlw-sub-note { text-align: center; font-size: 12.5px; color: var(--nlw-onnavy); margin-top: 12px; }
.nlw-form-err { display: none; font-size: 13.5px; font-weight: 700; color: #ffd9d6; margin-top: 12px; text-align: center; }
.nlw-form-err.nlw-show { display: block; }
.nlw-note { display: none; font-size: 12.5px; color: var(--nlw-onnavy); margin-top: 10px; text-align: center; }
.nlw-note.nlw-show { display: block; }

/* ---- Success --------------------------------------------------------------- */
.nlw-done { display: none; background: var(--nlw-card); color: var(--nlw-ink); border-radius: 14px; padding: 34px 22px; margin-top: 4px; text-align: center; }
.nlw-done.nlw-show { display: block; }
.nlw-done-check { font-size: 34px; color: var(--nlw-ok); }
.nlw-done h2 { font-size: 21px; font-weight: 800; margin: 8px 0 8px; }
.nlw-done p { font-size: 14.5px; color: var(--nlw-muted); line-height: 1.6; }

/* ---- Footer ---------------------------------------------------------------- */
.nlw-footer { text-align: center; padding: 26px 0 8px; font-size: 12px; color: #8ea2b5; line-height: 1.7; }
.nlw-footer a { color: #8ea2b5; }
/* 2026-09-28-I: the shared footer -- the approval shell's .foot, restated in
   the wizard's own names (this page loads neither h2v.css nor that shell). */
.nlw-foot-tag { color: var(--nlw-gold); font-weight: 800; }
.nlw-eho { display: flex; align-items: center; justify-content: center; gap: 8px;
           margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(200, 211, 221, .18);
           color: #8ea2b5; font-size: 11px; line-height: 1.4; }
.nlw-eho img { height: 22px; width: auto; display: block; background: #fff; border-radius: 3px; padding: 2px 3px; }
.nlw-foot-privacy { margin-top: 10px; }

/* THE SITE MENU IS NOT SHOWN ON THE WIZARD (2026-09-28-I). The Webflow page
   injects our menu fragment (pages/menu/menu.html) above the wizard; this
   stylesheet only loads on /newlisting, so hiding it here touches no other
   page. The wizard's own band carries the mark, linking home. `html body`
   outranks the menu's own id rule whichever stylesheet loads last. */
html body #h2v-header-wrapper { display: none; }

/* ==========================================================================
   REVISION MODE
   --------------------------------------------------------------------------
   Everything below is inert on a first submission: #nlw-existing-photos is
   rendered empty and #nlw-addr-locked has no .nlw-show class, so neither
   occupies any space.
   ========================================================================== */

/* Locked address inputs. Deliberately NOT `disabled` — a disabled input is
   skipped by autofill AND excluded from form serialisation, and it reads to a
   screen reader as unavailable rather than fixed. readOnly keeps the value
   visible, selectable and copyable, which is what "this is the address on
   file" should feel like. */
/* LOCKED IS NOT EMPTY, AND MUST NOT LOOK LIKE IT.

   This rendered its value in #4b5563 -- grey. Placeholders rendered grey too,
   so a locked field showing real data (Saint Augustine) and an empty field
   showing a suggestion (Unit 4) were indistinguishable. An agent read the hint
   as a value, submitted, and the field went out empty on marketing they had
   attested to.

   The value in a locked field IS DATA, so it gets body text #111827 -- which is
   also the rule in CLAUDE.md that #4b5563 was breaking. Read-only is signalled
   by the FIELD instead: a tinted ground and a teal edge marker, neither of
   which an empty editable field can produce. */
.nlw-input.nlw-locked {
	background: #eef2f4;
	color: #111827;
	font-weight: 500;
	cursor: not-allowed;
	border-color: #B6CAD0;
	border-left: 3px solid var(--h2c-green);
}

#nlw-addr-locked {
	display: none;
	margin: 0 0 14px 0;
	padding: 10px 12px;
	background: #e8f0f2;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: #111827;
}

#nlw-addr-locked.nlw-show {
	display: block;
}

/* ---- existing photo grid ---- */
/* The .nlw-exphoto* rules that lived here styled a second, read-only photo
   grid used only on a revision. It is gone: existing photos are now ordinary
   cells inside the real photo component, so they inherit .nlw-thumb and there
   is nothing separate left to style. */

/* Per-category count against the video's cap. */
.nlw-cat-n {
	margin-left: auto;
	padding-right: 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #111827;
}

.nlw-cat-n.is-full { color: var(--h2c-green); }

/* Over the cap is not an error -- the extra photos are stored, they just do
   not reach the video. Amber says 'this is doing nothing', not 'you broke it'. */
.nlw-cat-n.is-over { color: var(--h2c-warn); }

/* A thumb mid-drag. */
.nlw-thumb.is-dragging {
	opacity: 0.4;
	outline: 2px dashed var(--h2c-green);
}

.nlw-thumb { cursor: grab; }
.nlw-thumb:active { cursor: grabbing; }

/* ============================================================================
   A6 / A7 — the photo step says which thing is wrong, and stops offering what
   it cannot do. Both 2026-09-24.
============================================================================ */

/* A6. The same red the required INPUTS use (.nlw-input.nlw-invalid above), so
   an empty Featured View reads in the language the agent has already learned
   from the licence field rather than in a second one invented for this tile.
   A ring rather than a border-colour: the row has no border of its own, and
   adding one would move the layout at the moment it turns red. */
.nlw-featured.nlw-invalid {
	box-shadow: inset 0 0 0 2px var(--nlw-bad);
	border-radius: 9px;
	background: #fffafa;
}

/* The message now sits INSIDE the tile (the node is adopted by buildFeatured),
   so it needs the spacing a bottom-of-step line never did. */
.nlw-featured .nlw-err {
	margin-top: 10px;
}

/* A7. At the cap the button is not a button any more -- it is a label that
   says why. Solid, not dashed: dashed reads as "an empty slot to fill", which
   is the opposite of what a full room means. */
.nlw-cat-add:disabled,
.nlw-cat-add.is-full {
	cursor: default;
	border-style: solid;
	border-color: #e3e8ec;
	background: #f4f6f8;
	color: var(--nlw-muted);
	font-weight: 700;
}

.nlw-cat-add:disabled:hover,
.nlw-cat-add.is-full:hover {
	border-color: #e3e8ec;
	background: #f4f6f8;
}

/* ============================================================================
   F2 / F4 — our mark on our chrome, and an email that never breaks.
   Both 2026-09-24.
============================================================================ */

/* The header band is navy, so the logo sits on it. It is inside .nlw-col,
   which already carries the page's max-width and gutters, so it lines up with
   the heading beneath it rather than with the viewport edge. The band is
   shared by every step INCLUDING the confirmation screen, so one rule covers
   all six.

   TOP-RIGHT, IN A WHITE CARD (#H, 2026-09-24 -- Chris's call). It was
   top-left and bare. `width: max-content` + `margin-left: auto` rather than
   `text-align: right` on the parent, because the parent is the heading block
   and a text-align there would drag the eyebrow and the lede right with it.

   The card is the review page's `.head-brand` chip, which is in turn the one
   the approval footer logo wore: #fff, 8px 14px, 10px radius. Three surfaces,
   one set of values -- if this changes, `.head-brand` in approval_routes.py
   changes with it, and neither is the place to start inventing a second look.
   The artwork is opaque dark-on-white with no alpha, so on the navy it is a
   raw white rectangle without the card.

   line-height:0 on the anchor is what keeps the card tight to the image; an
   inline <img> otherwise reserves descender space and the chip gains a few
   stray pixels along its bottom edge only. */
/* #AS: margin-left:auto and margin-bottom are GONE. Both existed to place a
   block that had the band to itself -- pushed right, with a gap under it
   before the eyebrow. In the flex row the mark is placed by the row, and a
   bottom margin there would drag the whole row's height with it. */
.nlw-brand {
	display: block;
	width: max-content;
	line-height: 0;
	background: #fff;
	padding: 6px 10px;
	border-radius: 10px;
}

/* 105px is 70% of the 150px this shipped at (#I, 2026-09-24). At full size the
   card was the tallest thing in the band and pushed the heading down the page
   for no reason. Matches .head-brand on the review page at both widths -- these
   two are read minutes apart and a size difference between them is visible. */
.nlw-brand img {
	display: block;
	width: 105px;
	height: auto;
}

@media (max-width: 560px) {
	/* #AS: BESIDE, not stacked -- and both were MEASURED before choosing,
	   because the trade is real and my first guess at it was wrong.

	     beside   heading on 2 lines, header band 197px
	     stacked  heading on 1 line,  header band 224px

	   So stacking buys the heading back onto one line and costs 27px of band
	   height -- on the screen where item 3 of this brief was about removing
	   vertical space. Nothing overlaps either way; a 34-character heading
	   breaking in two on a 480px phone is ordinary, and 27px of navy is not.
	   One line in the media query flips it if that reads wrong on a real
	   handset. The gap closes from 24 to 14 so the text keeps what it can. */
	.nlw-head-row { gap: 14px; }
	.nlw-brand img { width: 78px; }
}

/* F4. AN EMAIL ADDRESS IS ONE TOKEN, and browsers do not treat it that way:
   the default break opportunity after a hyphen split sep22-a1@test.com across
   two lines on the confirmation screen, which reads as two addresses and is
   the one string on that screen the agent needs to recognise.

   Three properties, because no one of them is enough on its own:
   WORD-BREAK:KEEP-ALL DOES NOT FIX IT, which is worth writing down because it
   is the obvious first guess and it is wrong: keep-all governs breaks INSIDE a
   word for CJK, and a U+002D hyphen is a legitimate line-break OPPORTUNITY in
   the Unicode algorithm, not a word-internal break. Measured: still two lines
   with keep-all applied.

   The fix is at the character level -- the script writes the address with
   U+2011 NON-BREAKING HYPHEN in place of U+002D (see nlw-done-email's fill).
   It looks identical and cannot be broken at.

   What stays here:
     overflow-wrap:break-word  the ESCAPE HATCH. An address genuinely wider
                               than the card must wrap somewhere rather than
                               overflow invisibly -- a value you cannot see is
                               worse than one that wraps.
     hyphens:none              stops a browser ADDING a hyphen of its own.
   Applied wherever the wizard prints an address back to the agent: the
   confirmation line and the review panel's value column. */
#nlw-done-email,
.nlw-rev-v {
	overflow-wrap: break-word;
	hyphens: none;
}

/* ============================================================================
   F1 — step 5 grouped under headings, each with a way back.
============================================================================ */
.nlw-rev-g {
	margin-bottom: 14px;
	border: 1px solid var(--nlw-line);
	border-radius: 11px;
	overflow: hidden;
}
.nlw-rev-g:last-child { margin-bottom: 0; }
/* The heading's own bottom line is the divider above the first row. */
.nlw-rev-g > .nlw-rev-gh + .nlw-rev-r { border-top: none; }

.nlw-rev-gh {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 10px 13px;
	border-bottom: 1px solid var(--nlw-line);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--nlw-muted);
}

/* A button, not a link: it changes the step in place and navigates nowhere, so
   an <a> would be lying to a keyboard or screen-reader user about what happens.
   Styled as a link because that is what it reads as. */
.nlw-rev-edit {
	flex: none;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--nlw-gold);
}
.nlw-rev-edit:hover { text-decoration: underline; }

/* ============================================================================
   F3 — the two asset gates get the Featured tile's treatment.
============================================================================ */
/* .nlw-invalid on an INPUT recolours its border (see .nlw-input.nlw-invalid).
   These controls are divs with a background image, so they need their own
   rule — the same red, as a ring, so nothing moves when it turns on. */
.nlw-asset-prev.nlw-invalid {
	box-shadow: 0 0 0 2px var(--nlw-bad);
}

/* h2c-btn-secondary:start -- THE SECONDARY BUTTON (2026-09-28-E).
   App pages only: the wizard, the review/approval pages, /mylistings. Filled
   --h2c-green, white text, 8px radius, bold, no border, no shadow; hover
   --h2c-green-dark. One primary (gold) per screen; every other button is this.
   CANONICAL IN h2v.css, mirrored verbatim in newlisting.css and the approval
   shell -- test_brand_tokens.py fails if a copy drifts. `html body` lifts it
   over each page's own button rules without !important. */
html body .h2c-btn-secondary { background: var(--h2c-green); color: #fff; border: 0; border-radius: 8px; font-weight: 700; box-shadow: none; cursor: pointer; }
html body .h2c-btn-secondary:hover:not([disabled]) { background: var(--h2c-green-dark); color: #fff; border-color: transparent; }
/* Destructive (Cancel listing): red text, never a filled button. */
html body .h2c-btn-destructive { background: none; color: var(--h2c-bad); border: 0; font-weight: 700; box-shadow: none; cursor: pointer; }
/* h2c-btn-secondary:end */