/* =====================================================================================
   NC Deal Depot public design system — InvestorLift structure, HOPE calm, JHB palette.

   The reference is the InvestorLift marketplace (captured 2026-09-17..19: the deal page
   logged in and out, the Make Offer sheet, Messages, the profile pages). Every measurement
   here is theirs: a 62px sticky white header, a 1360px content-box column with 24px side
   padding, 12px-radius white cards on a #e5e5e5 hairline and NO shadow, a 320px sticky rail,
   a 6-cell 4px-gapped photo grid at 2 x 208px, Inter throughout, 15/500 buttons on a 6px
   corner. Only the COLOURS moved: their #2958ff blue is the JHB navy where it is structure
   (badges, links, the active tab, the price-block rim) and the JHB crimson where it is the
   ONE action (Make offer, Log in, View full address, Send offer).

   Loaded LAST on every public page, after tailwind.css and whatever legacy sheet the page's
   own scripts still render into (deal-detail.css, public-ui.css). Legacy components those
   scripts emit — .email-btn, .status-badge, the modals — are re-skinned at the foot of this
   file so JS-rendered content wears the same language as the markup around it.
   ===================================================================================== */

:root {
  /* ink + ground (InvestorLift's, verbatim) */
  --il-white: #ffffff; --il-black: #000000;
  --il-ink: #1a1b22; --il-ink-2: #4f5366; --il-ink-3: #a7a9b3; --il-ink-4: #8d8d8d;
  --il-line: #e5e5e5; --il-line-2: #d9d9d9; --il-line-3: #b3b3b3; --il-wash: #f2f2f2; --il-wash-2: #f3f3f3;
  --il-ground: #fbfbfb;
  /* the JHB palette (brand-assets/JHBTG Color Palette.txt) on InvestorLift's roles */
  --il-navy: #13436b; --il-navy-hover: #0f3757; --il-navy-active: #0b2a46;
  --il-navy-05: #eef3f8; --il-navy-10: #dbe5ee; --il-navy-15: #c5d4e2; --il-navy-25: #9fb7cd; --il-navy-40: #6d90b0;
  --il-crimson: #b11d29; --il-crimson-hover: #8f0f1c; --il-crimson-active: #7a0c17;
  --il-crimson-05: #fbeced; --il-crimson-10: #f5d2d5; --il-crimson-15: #efb8bc; --il-crimson-40: #cf6068;
  --il-bright: #d93240;
  --il-mint: #44d792; --il-mint-05: #edfbf4; --il-mint-10: #d3f5e4; --il-green: #0f7a3d; --il-green-ink: #0a6a34;
  --il-gold: #f5b301; --il-gold-05: #fff8e1; --il-gold-10: #ffefb8; --il-gold-ink: #7d5a00;
  --il-gray: #ebebeb;
  /* RGB triplets for the premium-button glow below -- a colour-matched box-shadow needs
     the channels loose so rgba() can vary the opacity per state. */
  --il-navy-rgb: 19, 67, 107; --il-crimson-rgb: 177, 29, 41; --il-bright-rgb: 217, 50, 64;
  --il-green-rgb: 15, 122, 61; --il-gold-rgb: 245, 179, 1; --il-ink-rgb: 26, 27, 34;
  /* THE PREMIUM ELEVATION, declared once. It is a structurally forced restatement of
     HOPE_PREMIUM.lift in lib/hope-marketing.js — a stylesheet cannot call a builder —
     so tests/one-premium-layer.test.js asserts the AGREEMENT rather than pinning the
     literal on both sides. Three rules read it: the base pair below and the two 2-ID
     !important rules that own these elements' box-shadow. */
  --il-prem-lift: 0 18px 44px -26px rgba(19, 67, 107, 0.34);
  --il-focus: 0 0 0 3px rgba(19, 67, 107, 0.32);
  --il-focus-crimson: 0 0 0 3px rgba(177, 29, 41, 0.28);
  --il-radius: 12px; --il-radius-sm: 8px; --il-radius-xs: 6px;
  --il-content: 1360px;
  --il-header: 62px;
  --il-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ------------------------------------------------------------------ document */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body.public-body, body.il-body {
  margin: 0; background: var(--il-ground); color: var(--il-ink);
  font-family: var(--il-font); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body.public-body *, body.il-body * { box-sizing: border-box; }
body.public-body :is(h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, label, li, span, div, td, th, summary),
body.il-body :is(h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, label, li, span, div, td, th, summary) {
  font-family: var(--il-font);
}
body.public-body a { color: inherit; }
body.public-body :focus-visible { outline: none; box-shadow: var(--il-focus); border-radius: 6px; }
body.public-body img { max-width: 100%; }
.il-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ type kit (InvestorLift's kit-*) */
.kit-text-xs { font-size: .75rem; line-height: 1rem; }
.kit-text-sm { font-size: .875rem; line-height: 1.25rem; font-weight: 400; }
.kit-text-sm-plus { font-size: .9375rem; line-height: 1.25rem; font-weight: 400; }
.kit-text-base { font-size: 1rem; line-height: 1.375rem; }
.kit-text-lg { font-size: 1.125rem; line-height: 1.5rem; }
.kit-text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.kit-text-2xl { font-size: 1.5rem; line-height: 2rem; }
.kit-font-medium { font-weight: 500; }
.kit-font-semibold { font-weight: 600; }
.kit-font-bold { font-weight: 700; }
.kit-leading-relaxed { line-height: 1.625; }
.text-1-line-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-2-line-ellipsis { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; }
.il-muted { color: var(--il-ink-2); }
.il-light { color: var(--il-ink-3); }

/* ------------------------------------------------------------------ buttons (InvestorLift's .ui-button) */
.ui-button {
  cursor: pointer; outline: none; position: relative; transition: all .3s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  font-family: var(--il-font); font-weight: 500; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; background: transparent; color: var(--il-ink); line-height: 1.25rem;
  -webkit-appearance: none; appearance: none;
}
.ui-button .front-layer { align-items: center; display: flex; flex: 1; justify-content: center; }
.ui-button .front-layer > .icon-left, .ui-button .icon-left { align-items: center; display: flex; }
.ui-button .content { white-space: nowrap; }
.ui-button.size-xs { border-radius: 4px; padding: 5px 6px; font-size: .8125rem; line-height: 1.125rem; }
.ui-button.size-xs .content { padding: 0 6px; }
.ui-button.size-xs svg, .ui-button.size-xs .icon-left svg { height: 18px; width: 18px; }
.ui-button.size-sm { border-radius: 6px; padding: 7px 8px; font-size: .875rem; }
.ui-button.size-sm .content { padding: 1px 6px; }
.ui-button.size-sm svg, .ui-button.size-sm .icon-left svg { height: 22px; width: 22px; }
.ui-button.size-md { border-radius: 6px; padding: 10px 11px; font-size: .9375rem; }
.ui-button.size-md .content { padding: 1px 8px; }
.ui-button.size-md svg, .ui-button.size-md .icon-left svg { height: 22px; width: 22px; }
.ui-button.size-lg { border-radius: 8px; padding: 11px 12px; font-size: 1rem; line-height: 1.375rem; }
.ui-button.size-lg .content { padding: 1px 8px; }
.ui-button.size-lg svg { height: 22px; width: 22px; }
.ui-button.corner-sharp { border-radius: 6px; }
.ui-button.full-width, .ui-button.w-full { width: 100%; }
.ui-button:focus-visible { box-shadow: var(--il-focus); }
.ui-button:disabled, .ui-button.disabled { background: #d9d9d9 !important; border-color: #d9d9d9 !important; color: var(--il-ink-3) !important; cursor: default; box-shadow: none !important; }
/* PRIMARY = the ONE action colour, crimson (InvestorLift's filled blue) */
.ui-button.color-primary.type-filled { background: var(--il-navy); border-color: var(--il-navy); color: #fff; }
.ui-button.color-primary.type-filled:hover { background: var(--il-navy-hover); border-color: var(--il-navy-hover); }
.ui-button.color-primary.type-filled:active, .ui-button.color-primary.type-filled:focus-visible { background: var(--il-navy); border-color: #fff; box-shadow: var(--il-focus); }
.ui-button.color-primary.type-outline { background: #fff; border-color: var(--il-navy); color: var(--il-navy); }
.ui-button.color-primary.type-outline:hover { background: var(--il-navy-05); }
.ui-button.color-primary.type-tinted { background: var(--il-navy-05); border-color: var(--il-navy-10); color: var(--il-navy); }
.ui-button.color-primary.type-tinted:hover { background: var(--il-navy-10); border-color: var(--il-navy-15); }
.ui-button.color-primary.type-plain { background: transparent; border-color: transparent; color: var(--il-navy); }
.ui-button.color-primary.type-plain:hover { background: var(--il-wash); border-color: var(--il-wash); }
/* NAVY = structure: the second voice, never a second red */
.ui-button.color-navy.type-filled { background: var(--il-navy); border-color: var(--il-navy); color: #fff; }
.ui-button.color-navy.type-filled:hover { background: var(--il-navy-hover); border-color: var(--il-navy-hover); }
.ui-button.color-navy.type-outline { background: #fff; border-color: var(--il-navy); color: var(--il-navy); }
.ui-button.color-navy.type-outline:hover { background: var(--il-navy-05); }
.ui-button.color-navy.type-tinted { background: var(--il-navy-05); border-color: var(--il-navy-05); color: var(--il-navy); }
.ui-button.color-navy.type-tinted:hover { background: var(--il-navy-10); border-color: var(--il-navy-10); }
.ui-button.color-navy.type-plain { background: transparent; border-color: transparent; color: var(--il-navy); }
.ui-button.color-navy.type-plain:hover { background: var(--il-wash); border-color: var(--il-wash); }
/* BLACK = the neutral action (Save to favorites, Share, Send inquiry) */
.ui-button.color-black.type-filled { background: var(--il-ink); border-color: var(--il-ink); color: #fff; }
.ui-button.color-black.type-filled:hover { background: #000; border-color: #000; }
.ui-button.color-black.type-outline { background: #fff; border-color: var(--il-line-3); color: var(--il-ink); }
.ui-button.color-black.type-outline:hover { background: var(--il-wash); border-color: #999; }
.ui-button.color-black.type-tinted { background: var(--il-wash); border-color: var(--il-wash); color: var(--il-ink); }
.ui-button.color-black.type-tinted:hover { background: var(--il-line-2); border-color: var(--il-line-2); }
.ui-button.color-black.type-plain { background: transparent; border-color: transparent; color: var(--il-ink); }
.ui-button.color-black.type-plain:hover { background: var(--il-wash); border-color: var(--il-wash); }
/* GRAY = the quiet one (Back to properties list) */
.ui-button.color-gray.type-plain { background: transparent; border-color: transparent; color: var(--il-ink-2); }
.ui-button.color-gray.type-plain:hover { background: var(--il-wash); border-color: var(--il-wash); color: var(--il-ink); }
.ui-button.color-gray.type-gray { background: var(--il-wash); border-color: var(--il-wash); color: var(--il-ink); }
.ui-button.color-gray.type-gray:hover { background: var(--il-line); border-color: var(--il-line); }
.ui-button.color-gray.type-outline { background: #fff; border-color: var(--il-line-2); color: var(--il-ink); }
.ui-button.color-gray.type-outline:hover { background: var(--il-wash); }
/* MINT = "Post a Deal", the one header control that is not navigation.
   2026-09-20: it was a mint TINT (#edfbf4 on #0f7a3d), which is a pastel face --
   the same family as the walkthrough button that came off gold. Green is still what
   marks it out from the nav beside it; it is the rim and the word now, not the fill,
   which also stops a pale chip competing with the navy actions on the page below. */
.ui-button.color-mint.type-tinted { background: #fff; border-color: var(--il-green); color: var(--il-green); }
.ui-button.color-mint.type-tinted:hover { background: var(--il-mint-05); border-color: var(--il-green-ink); color: var(--il-green-ink); }
.ui-button.color-mint.type-filled { background: var(--il-green); border-color: var(--il-green); color: #fff; }
/* GOLD = the walkthrough / the highlight, navy ink on it (white on gold is ~2:1) */
.ui-button.color-gold.type-filled { background: var(--il-gold); border-color: var(--il-gold); color: #0b2a46; }
.ui-button.color-gold.type-filled:hover { background: #ffc933; border-color: #ffc933; }
.ui-button.color-gold.type-tinted { background: var(--il-gold-05); border-color: var(--il-gold-05); color: var(--il-gold-ink); }
/* RED = destructive / the bright alert */
.ui-button.color-red.type-filled { background: var(--il-bright); border-color: var(--il-bright); color: #fff; }
.ui-button.color-red.type-tinted { background: var(--il-crimson-05); border-color: var(--il-crimson-05); color: var(--il-crimson); }
.ui-button.color-red.type-outline { background: #fff; border-color: var(--il-bright); color: var(--il-bright); }

/* ------------------------------------------------------------------ premium glow, filled buttons only
   The same lifted, colour-tinted container the operator admin's HOPE skin gives its solid
   controls -- an ambient glow the colour of the fill, a firmer glow plus a 1px lift on hover,
   a quick press-down on click -- recoloured to the site's own JHB palette rather than HOPE's
   blue. `.ui-button` already carries `transition: all .3s ease` (above), so nothing here needs
   its own transition. OUTLINE / TINTED / PLAIN stay flat on purpose: a bordered button lifted
   off the page with a glow under it reads as a mistake, not polish -- the glow is reserved for
   a SOLID fill, where it reads as depth under the colour that is already there. */
.ui-button.color-primary.type-filled, .ui-button.color-navy.type-filled {
  box-shadow: 0 8px 20px -9px rgba(var(--il-navy-rgb), .45);
}
.ui-button.color-primary.type-filled:hover, .ui-button.color-navy.type-filled:hover {
  box-shadow: 0 12px 26px -8px rgba(var(--il-navy-rgb), .6); transform: translateY(-1px);
}
.ui-button.color-primary.type-filled:active, .ui-button.color-navy.type-filled:active {
  transform: translateY(0) scale(.98);
}
.ui-button.color-black.type-filled { box-shadow: 0 8px 20px -9px rgba(var(--il-ink-rgb), .35); }
.ui-button.color-black.type-filled:hover { box-shadow: 0 12px 26px -8px rgba(var(--il-ink-rgb), .5); transform: translateY(-1px); }
.ui-button.color-black.type-filled:active { transform: translateY(0) scale(.98); }
.ui-button.color-mint.type-filled { box-shadow: 0 8px 20px -9px rgba(var(--il-green-rgb), .4); }
.ui-button.color-mint.type-filled:hover { box-shadow: 0 12px 26px -8px rgba(var(--il-green-rgb), .55); transform: translateY(-1px); }
.ui-button.color-mint.type-filled:active { transform: translateY(0) scale(.98); }
.ui-button.color-gold.type-filled { box-shadow: 0 8px 20px -9px rgba(var(--il-gold-rgb), .4); }
.ui-button.color-gold.type-filled:hover { box-shadow: 0 12px 26px -8px rgba(var(--il-gold-rgb), .55); transform: translateY(-1px); }
.ui-button.color-gold.type-filled:active { transform: translateY(0) scale(.98); }
.ui-button.color-red.type-filled { box-shadow: 0 8px 20px -9px rgba(var(--il-bright-rgb), .4); }
.ui-button.color-red.type-filled:hover { box-shadow: 0 12px 26px -8px rgba(var(--il-bright-rgb), .55); transform: translateY(-1px); }
.ui-button.color-red.type-filled:active { transform: translateY(0) scale(.98); }
/* the disabled face keeps the "no shadow" refusal it already carries (line 103) */

/* ------------------------------------------------------------------ inputs (.ui-input) */
.ui-input {
  align-items: center; background: #fff; border: 1px solid var(--il-line-2); color: var(--il-ink);
  display: inline-flex; transition: border .3s ease, box-shadow .32s cubic-bezier(.13, .27, 0, 2.08); font-family: var(--il-font);
}
.ui-input:hover { border-color: #999; }
.ui-input:has(input:focus), .ui-input:has(select:focus), .ui-input:has(textarea:focus), .ui-input:focus-within { border: 1px solid var(--il-navy); box-shadow: 0 0 0 2px rgba(19, 67, 107, .12); }
.ui-input.size-sm { border-radius: 6px; gap: 6px; padding: 0 8px; min-height: 36px; font-size: .875rem; }
.ui-input.size-md { border-radius: 6px; gap: 8px; min-height: 44px; padding: 0 12px; font-size: 1rem; }
.ui-input.size-lg { border-radius: 8px; gap: 8px; min-height: 52px; padding: 0 14px; font-size: 1rem; }
.ui-input_input-container { align-items: center; display: flex; flex: 1; flex-wrap: wrap; gap: 3px; position: relative; min-width: 0; }
.ui-input_input-container :is(input, select, textarea) { background: transparent; border: none; display: flex; flex: 1; width: 100%; padding: 0; font: inherit; color: inherit; outline: none; min-width: 0; }
.ui-input_input-container input::placeholder { color: var(--il-ink-3); }
/* ONE BOX. The .ui-input wrapper IS the field: it draws the border and its own
   focus ring (the :has() rule above). The control inside it must draw nothing in
   any state -- public-ui.css paints every input:focus with a 3px ring and a 12px
   corner (!important), which put a second, rounded box inside the first the moment
   anybody clicked in to type. Pinned in every state, at the weight that beats it. */
html body.public-body .ui-input_input-container :is(input, select, textarea),
html body.public-body .ui-input_input-container :is(input, select, textarea):is(:hover, :focus, :focus-visible, :active) {
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; background: transparent !important; min-height: 0 !important; padding: 0 !important;
}
.ui-input .icon-wrapper, .ui-input .slot-left, .ui-input .slot-right { display: flex; align-items: center; color: var(--il-ink-2); flex: none; }
.ui-input .icon-wrapper svg, .ui-input .slot-left svg { width: 20px; height: 20px; }
.ui-input.has-slot-left { padding-left: 6px; }
.textarea, .ui-textarea {
  border: 1px solid var(--il-line-2); border-radius: 6px; color: var(--il-ink); height: 84px; outline: none; padding: 12px; resize: none;
  transition: border .3s ease, box-shadow .32s cubic-bezier(.13, .27, 0, 2.08); width: 100%; font: inherit; font-family: var(--il-font); background: #fff;
}
.textarea::placeholder { color: var(--il-ink-3); }
.textarea:hover { border-color: var(--il-line-3); }
.textarea:focus { border: 1px solid var(--il-navy); box-shadow: 0 0 0 2px rgba(19, 67, 107, .12); }
.withLabel-wrapper { display: grid; row-gap: 8px; align-content: start; }
.withLabel-label { color: var(--il-ink-2); font-size: 14px; font-weight: 400; line-height: 20px; }
.ui-form-input { display: flex; flex-direction: column; position: relative; }
.il-field-hint { color: var(--il-ink-2); font-size: 12px; line-height: 16px; margin-top: 6px; }
.il-field-error { color: var(--il-bright); font-size: 12px; line-height: 16px; margin-top: 6px; }
/* the pill switch (Cash | Lender Financing, Available | Sold) */
.switch-wrapper { background-color: var(--il-wash-2); border-radius: 30px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.switch-option { border: 1px solid var(--il-wash); border-radius: 30px; color: var(--il-ink-2); cursor: pointer; font-size: 14px; font-weight: 500; line-height: 20px; padding: 8px; text-align: center; transition: all .3s ease; background: transparent; font-family: var(--il-font); }
.switch-option:not(.switch-optionActive):hover { background-color: var(--il-line); border-color: var(--il-line); }
.switch-optionActive { background-color: var(--il-navy-05); border: 1px solid var(--il-navy); color: var(--il-navy); }
/* checkbox + radio */
.ui-checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 20px; color: var(--il-ink-2); cursor: pointer; }
.ui-checkbox-row input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--il-navy); flex: none; }
.ui-checkbox-switch { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--il-line-2); transition: background .2s ease; flex: none; cursor: pointer; }
.ui-checkbox-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.ui-checkbox-switch.is-on { background: var(--il-navy); }
.ui-checkbox-switch.is-on::after { transform: translateX(18px); }

/* ------------------------------------------------------------------ badges + status */
.ui-deal-card-badge { align-items: center; border-radius: 4px; display: inline-flex; font-size: 10px; font-weight: 600; gap: 4px; justify-content: center; line-height: 12px; padding: 5px 8px; white-space: nowrap; text-transform: uppercase; letter-spacing: .02em; }
.ui-deal-card-badge.state-for-sale, .ui-deal-card-badge.is-active { background: var(--il-navy); color: #fff; }
.ui-deal-card-badge.state-expired, .ui-deal-card-badge.is-sold { background: var(--il-bright); color: #fff; }
.ui-deal-card-badge.state-pending, .ui-deal-card-badge.is-pending { background: var(--il-gold); color: #0b2a46; }
.ui-deal-card-badge.state-unknown, .ui-deal-card-badge.is-unknown { background: #64748b; color: #fff; }
.ui-deal-card-badge.good { background: var(--il-green); color: #fff; }
.ui-deal-card-badge.mid { background: #e6ae06; color: #fff; }
.ui-deal-card-badge.hot { background: var(--il-crimson); color: #fff; }
.ui-message-status-badge { align-items: center; border-radius: 12px; display: inline-flex; gap: 4px; justify-content: center; white-space: nowrap; font-size: 12px; font-weight: 500; line-height: 16px; padding: 3px 8px; color: var(--il-ink-2); }
.ui-message-status-badge.scheme-gray-10 { background: var(--il-line); }
.ui-message-status-badge.scheme-white { background: rgba(255, 255, 255, .92); }
.status-badge-pill { align-items: center; border: 1px solid; border-radius: 9999px; display: inline-flex; font-size: 12px; font-weight: 600; gap: 6px; height: 20px; line-height: 1; padding: 0 8px; white-space: nowrap; }
.status-badge-pill.scheme-green { color: var(--il-green); border-color: var(--il-mint); background: var(--il-mint-05); }
.status-badge-pill.scheme-gray { color: var(--il-ink-2); border-color: var(--il-line-2); background: var(--il-wash); }
.status-badge-pill.scheme-gold { color: var(--il-gold-ink); border-color: var(--il-gold); background: var(--il-gold-05); }
.status-badge-pill.scheme-navy { color: var(--il-navy); border-color: var(--il-navy-15); background: var(--il-navy-05); }
.il-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--il-wash); color: var(--il-ink-2); font-size: 13px; font-weight: 500; line-height: 18px; }
.il-chip--navy { background: var(--il-navy-05); color: var(--il-navy); }
.il-chip--gold { background: var(--il-gold-05); color: var(--il-gold-ink); }
.il-chip--mint { background: var(--il-mint-05); color: var(--il-green); }
.il-chip--crimson { background: var(--il-crimson-05); color: var(--il-crimson); }
.il-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--il-navy); }

/* ------------------------------------------------------------------ the site header (their .site-header) */
.site-header {
  background: #fff; display: flex; height: var(--il-header); justify-content: space-between; align-items: center;
  padding: 12px 24px; position: sticky; top: 0; z-index: 80; border-bottom: 1px solid var(--il-line); gap: 16px;
}
.site-header_left { align-items: center; display: flex; min-width: 0; }
.site-header_logo { display: flex; align-items: center; height: 38px; }
.site-header_logo img { height: 38px; width: auto; display: block; }
.site-header_search { margin-left: 24px; min-width: 360px; }
.site-header_search .ui-input { width: 100%; }
.site-header_search form { display: flex; width: 100%; }
.site-header_left > .ui-button { margin-left: 12px; }
.site-header_nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.site-header_nav .ui-button.is-active { background: var(--il-wash); border-color: var(--il-wash); color: var(--il-ink); }
.header-user-nav-bar { align-items: center; display: flex; gap: 12px; }
/* the kit rule above decides the shape; this one only has to out-specify the
   header's own reset. Both were the mint TINT until 2026-09-20 -- keep the two in
   step, or the chip is a pastel in the bar and an outline in the drawer. */
.header-user-nav-bar_post_deal_btn { background: #fff !important; border: 1px solid var(--il-green) !important; color: var(--il-green) !important; }
.header-user-nav-bar_post_deal_btn:hover { background: var(--il-mint-05) !important; border-color: var(--il-green-ink) !important; }
.header-user-nav-bar_post_deal_btn .content { color: var(--il-green); }
.header-user-nav-bar_icon_btn { padding: 7px !important; }
.header-user-nav-bar_icon_btn svg { width: 22px; height: 22px; }
.icon-with-badge-notification { display: flex; flex-direction: column; position: relative; }
.icon-with-badge-notification_badge { align-items: center; display: flex; justify-content: center; position: absolute; right: -10px; top: -8px; }
.header-user-nav-bar_badge_label { align-items: center; aspect-ratio: 1 / 1; background-color: var(--il-bright); border: 1px solid #fff; border-radius: 50%; color: #fff; display: flex; font-size: 10px; font-weight: 500; justify-content: center; min-width: 16px; padding: 3px; line-height: 1; }
/* the profile menu (their .ui-menu) */
.ui-menu { border-radius: 6px; color: var(--il-ink-2); font-size: 14px; font-weight: 500; line-height: 20px; position: relative; transition: all .2s ease; }
.ui-menu.ui-menu_basic { margin-left: 12px; padding: 3px 6px 3px 3px; }
.ui-menu_basic:hover { background: var(--il-wash); }
.ui-menu_row { align-items: center; cursor: pointer; display: flex; gap: 6px; background: transparent; border: 0; padding: 0; font: inherit; color: inherit; }
.ui-menu_row_chevron { align-self: stretch; display: flex; align-items: center; }
.ui-menu_row_chevron svg { width: 16px; height: 16px; transition: transform .2s ease; }
.ui-menu.is-open .ui-menu_row_chevron svg { transform: rotate(180deg); }
.ui-user-navbar { display: flex; align-items: center; }
.ui-user-navbar.scheme-full { padding: 8px 12px; }
.ui-user-navbar_content { display: flex; flex-direction: column; margin-left: 10px; min-width: 0; }
.ui-user-navbar_content_label { color: var(--il-ink); font-size: 13px; font-weight: 500; line-height: 18px; }
.ui-user-navbar_content_sublabel { color: var(--il-ink-2); font-size: 12px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-user-nav-bar_user-menu_name { align-items: center; color: var(--il-ink-2); display: flex; font-size: 14px; font-weight: 500; line-height: 20px; margin-left: 10px; gap: 4px; }
.ui-avatar { align-items: center; aspect-ratio: 1 / 1; border-radius: 50%; display: flex; justify-content: center; position: relative; overflow: hidden; background: var(--il-navy-10); color: var(--il-navy); font-weight: 600; font-size: 13px; line-height: 18px; flex: none; }
.ui-avatar.size-xs { height: 32px; width: 32px; }
.ui-avatar.size-sm { height: 40px; width: 40px; font-size: 15px; }
.ui-avatar.size-md { height: 48px; width: 48px; font-size: 17px; }
.ui-avatar.size-lg { height: 96px; width: 96px; font-size: 32px; }
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-menu_list {
  background-color: #fff; border: 1px solid var(--il-line); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, .29); display: flex; flex-direction: column;
  margin-top: 6px; opacity: 0; overflow-y: auto; position: absolute; right: 0; top: 100%; transform: scaleY(0); transform-origin: top left; transition: all .2s ease; z-index: 100; min-width: 248px; padding: 6px 0; pointer-events: none;
}
.ui-menu.is-open .ui-menu_list { opacity: 1; transform: scaleY(1); pointer-events: auto; }
.ui-menu_divider { margin: 4px 0; position: relative; width: 100%; height: 1px; }
.ui-menu_divider::before { background: var(--il-line); content: ""; height: 1px; position: absolute; width: 100%; left: 0; top: 0; }
.ui-dropdown-option { align-items: center; color: var(--il-ink); cursor: pointer; display: flex; justify-content: space-between; transition: all .2s ease; padding: 8px 12px; font-size: .875rem; line-height: 1.25rem; text-decoration: none; background: transparent; border: 0; width: 100%; text-align: left; font-family: var(--il-font); gap: 8px; }
.ui-dropdown-option:hover { background: var(--il-wash); color: var(--il-ink); }
.ui-dropdown-option.is-primary { color: var(--il-crimson); font-weight: 600; }
.ui-dropdown-option .content { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ui-dropdown-option .content svg { width: 18px; height: 18px; color: var(--il-ink-2); flex: none; }
/* mobile: hamburger + drawer */
.site-header_menu_btn { display: none; }
.site-header_drawer { display: none; }
@media (max-width: 1100px) {
  .site-header_search { min-width: 0; margin-left: 12px; flex: 1; }
  .site-header_nav { display: none; }
}
@media (max-width: 760px) {
  .site-header { padding: 10px 14px; }
  .site-header_search { display: none; }
  .site-header_left > .ui-button { display: none; }
  .header-user-nav-bar { gap: 6px; }
  .header-user-nav-bar_user-menu_name, .header-user-nav-bar .ui-menu_row_chevron { display: none; }
  .header-user-nav-bar_post_deal_btn .content { display: none; }
  .site-header_menu_btn { display: inline-flex; }
  .site-header_drawer { display: block; position: fixed; inset: var(--il-header) 0 0 0; background: #fff; z-index: 79; padding: 12px 16px 24px; overflow-y: auto; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
  .site-header_drawer.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .site-header_drawer .ui-button { width: 100%; justify-content: flex-start; margin: 0 0 4px; }
  .site-header_drawer .ui-button .front-layer { justify-content: flex-start; }
  .site-header_drawer_search { margin-bottom: 12px; }
  .site-header_drawer_search .ui-input { width: 100%; }
  .site-header_drawer_actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--il-line); }
  .site-header_drawer_actions .ui-button { width: 100%; }
  body.il-drawer-open { overflow: hidden; }
}

/* ------------------------------------------------------------------ the page frame */
.layout-default { display: flex; flex: 1; flex-direction: column; min-height: 100vh; }
.layout-default_content { border-top: 1px solid var(--il-line); display: flex; flex: 1; flex-direction: column; position: relative; background: var(--il-ground); }
.il-page { box-sizing: content-box; margin: 0 auto; max-width: var(--il-content); padding: 0 24px 40px; width: auto; }
.il-page--narrow { max-width: 960px; }
.il-page-head { padding: 24px 0 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.il-page-title { font-size: 24px; font-weight: 700; line-height: 32px; color: var(--il-ink); margin: 0; }
.il-page-sub { color: var(--il-ink-2); font-size: 15px; line-height: 22px; margin: 4px 0 0; }
.il-back-row { padding: 12px 0; }
.il-back-row a { display: inline-block; text-decoration: none; width: max-content; }
/* the card every section is */
.il-card { background: #fff; border: 1px solid var(--il-line); border-radius: var(--il-radius); padding: 24px; }
.il-card--flush { padding: 0; overflow: hidden; }
.il-card-title { font-size: 20px; font-weight: 600; line-height: 28px; margin: 0 0 16px; color: var(--il-ink); }
.il-card-title--navy { color: var(--il-navy); }
.il-card-sub { color: var(--il-ink-2); font-size: 14px; line-height: 20px; margin: -8px 0 16px; }
.il-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.il-card-head .il-card-title { margin: 0; }
.il-card-note { color: var(--il-ink-2); font-size: 13px; line-height: 18px; margin: 16px 0 0; }
.il-stack { display: grid; row-gap: 24px; }
.il-stack > * { height: max-content; }
/* the detail grid every fact section is (their additionalDetails-grid) */
.il-detail-grid { column-gap: 16px; row-gap: 20px; display: grid; grid-template-columns: repeat(4, 1fr); }
.il-detail-grid--2 { grid-template-columns: repeat(2, 1fr); }
.il-detail-grid--3 { grid-template-columns: repeat(3, 1fr); }
.il-detail-item { column-gap: 8px; display: grid; grid-template-columns: max-content 1fr; align-items: start; min-width: 0; }
.il-detail-item > div:first-child svg, .il-detail-item > .il-detail-icon svg, .il-detail-item > .il-detail-icon { color: var(--il-ink-2); display: flex; height: 18px; width: 18px; margin-top: 1px; }
.il-detail-label { color: var(--il-ink-2); font-size: 15px; font-weight: 500; line-height: 20px; }
.il-detail-value { color: var(--il-ink); font-size: 15px; font-weight: 400; line-height: 20px; word-break: break-word; }
.il-detail-value b, .il-detail-value strong { font-weight: 600; }
/* the fact row (a two-column key/value list) */
.il-row-list { display: grid; row-gap: 12px; }
.il-row-list > * { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.il-row-list > * > :first-child { color: var(--il-ink-2); font-size: 14px; font-weight: 500; line-height: 20px; }
.il-row-list > * > :last-child { color: var(--il-ink); font-size: 14px; font-weight: 600; line-height: 20px; text-align: right; }
/* their dealsNearby-grid */
.il-card-grid { column-gap: 24px; row-gap: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.il-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.il-section { padding: 36px 0; }
.il-section-top { align-items: center; display: grid; grid-template-columns: 1fr max-content; margin-bottom: 24px; gap: 16px; }
.il-section-title { font-size: 24px; font-weight: 700; line-height: 32px; margin: 0; color: var(--il-ink); }
.il-section-sub { color: var(--il-ink-2); font-size: 15px; line-height: 22px; margin: 4px 0 0; }
@media (max-width: 1100px) { .il-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .il-card-grid, .il-card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .il-detail-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .il-card-grid, .il-card-grid--3 { grid-template-columns: 1fr; } .il-page { padding: 0 16px 32px; } .il-card { padding: 16px; } .il-detail-grid, .il-detail-grid--3 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ the deal card (their .ui-deal-card) */
.ui-deal-card { background: #fff; border-radius: 8px; display: flex; flex-direction: column; font-family: var(--il-font); transition: all .2s ease; position: relative; text-decoration: none; color: var(--il-ink); }
@media (hover: hover) { .ui-deal-card:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, .12); } }
.ui-deal-card_img-container { align-items: center; align-self: stretch; border: 1px solid var(--il-line); border-bottom: 0; border-top-left-radius: 8px; border-top-right-radius: 8px; display: flex; flex-direction: column; height: 186px; justify-content: center; overflow: hidden; position: relative; background: var(--il-wash); }
.ui-deal-card_img-container img { min-height: 100%; min-width: 100%; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease-in-out; display: block; }
.ui-deal-card_img-container_overlay { border-top-left-radius: 8px; border-top-right-radius: 8px; height: 100%; left: 0; position: absolute; text-decoration: none; top: 0; width: 100%; }
.ui-deal-card-link { height: 100%; left: 0; position: absolute; text-decoration: none; top: 0; width: 100%; z-index: 1; }
.ui-deal-card-overlay { cursor: pointer; height: 100%; position: relative; width: 100%; pointer-events: none; }
.ui-deal-card-overlay_top { display: flex; flex: 1; gap: 4px; justify-content: flex-start; left: 0; padding: 10px; position: absolute; top: 0; width: 100%; }
.ui-deal-card-overlay_bottom { bottom: 0; display: flex; gap: 4px; justify-content: flex-end; left: 0; padding: 6px; position: absolute; width: 100%; }
.ui-deal-card_info { border: 1px solid var(--il-line); border-radius: 0 0 8px 8px; color: var(--il-ink); display: flex; flex-direction: column; position: relative; flex: 1; }
.ui-deal-card_info_controls { height: 100%; position: absolute; width: 100%; pointer-events: none; }
.ui-deal-card_info_controls_top { display: flex; justify-content: flex-end; left: 0; padding: 16px; position: absolute; top: 0; width: 100%; }
.ui-deal-card_info_controls_top_btn { cursor: pointer; display: flex; pointer-events: auto; background: none; border: 0; padding: 0; color: var(--il-ink-3); z-index: 2; position: relative; }
.ui-deal-card_info_controls_top_btn svg { width: 22px; height: 22px; transition: all .2s ease; }
.ui-deal-card_info_controls_top_btn:hover svg { color: var(--il-crimson); }
.ui-deal-card_info_controls_top_btn.is-saved svg { color: var(--il-crimson); fill: var(--il-crimson); }
.ui-deal-card_info_content { overflow-x: hidden; padding: 16px; }
.ui-deal-card-property-price-and-arv { align-items: center; display: flex; padding-right: 28px; }
.ui-deal-card-property-price-and-arv_value { color: var(--il-ink); font-size: 18px; font-weight: 600; line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-deal-card-property-price-and-arv_avg { color: var(--il-ink); font-size: 13px; font-weight: 500; line-height: 18px; margin-left: 8px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.ui-deal-card-property-address { align-items: center; color: var(--il-ink); display: flex; font-size: 13px; font-weight: 400; gap: 4px; line-height: 18px; max-width: 100%; margin-top: 8px; }
.ui-deal-card-property-address svg { width: 14px; height: 14px; color: var(--il-ink-2); flex: none; }
.ui-deal-card-property-details-row { align-items: center; display: flex; margin-top: 16px; flex-wrap: wrap; row-gap: 6px; color: var(--il-ink); font-size: 14px; line-height: 20px; }
.ui-deal-card-property-details-row > div { align-items: center; display: flex; }
.ui-deal-card-property-details-row > div svg { margin-right: 4px; width: 18px; height: 18px; color: var(--il-ink-2); }
.ui-deal-card-property-details-row > div:not(:first-child) { margin-left: 12px; }
/* our twist: a spread line and a deadline line under the details, in the same quiet type */
.ui-deal-card-spread { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--il-line); font-size: 13px; line-height: 18px; color: var(--il-ink-2); gap: 8px; }
.ui-deal-card-spread b { color: var(--il-green); font-weight: 600; }
.ui-deal-card-spread .il-chip { font-size: 12px; padding: 2px 8px; }
.ui-deal-card-deadline { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 12px; line-height: 16px; color: var(--il-gold-ink); font-weight: 500; }
.ui-deal-card-deadline svg { width: 14px; height: 14px; }
.ui-deal-card-deadline.is-urgent { color: var(--il-crimson); }
.ui-deal-card-views { pointer-events: none; }
/* skeleton */
.ui-deal-card-skeleton { border: 1px solid var(--il-line); border-radius: 8px; overflow: hidden; background: #fff; }
.ui-deal-card-skeleton > div:first-child { height: 186px; background: linear-gradient(90deg, #f2f2f2 25%, #e9e9e9 37%, #f2f2f2 63%); background-size: 400% 100%; animation: il-shimmer 1.4s ease infinite; }
.ui-deal-card-skeleton > div:last-child { padding: 16px; display: grid; gap: 10px; }
.ui-deal-card-skeleton > div:last-child > span { display: block; height: 12px; border-radius: 6px; background: var(--il-wash); }
@keyframes il-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ------------------------------------------------------------------ the deal page */
.dealContent-wrapper { background: var(--il-ground); width: 100%; }
.dealContent { box-sizing: content-box; margin: 0 auto; max-width: var(--il-content); padding: 0 24px 24px; }
.dealContent-backRow { padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dealContent-backRow a { display: block; text-decoration: none; width: max-content; }
.dealContent-crumbs { display: flex; align-items: center; gap: 6px; color: var(--il-ink-3); font-size: 13px; line-height: 18px; }
.dealContent-crumbs a { color: var(--il-ink-2); text-decoration: none; }
.dealContent-crumbs a:hover { color: var(--il-navy); }
.dealContent-crumbs svg { width: 14px; height: 14px; }
.dealContent-body { display: grid; grid-template-columns: 1fr 320px; grid-gap: 24px; align-items: start; grid-template-rows: max-content; }
.dealContent-left, .dealContent-right { display: grid; grid-template-columns: 100%; row-gap: 24px; min-width: 0; }
.dealContent-left > *, .dealContent-right > * { height: max-content; }
.dealContent-right { position: sticky; top: calc(var(--il-header) + 24px); }
/* the verified banner */
.idvBanner-wrapper { align-items: center; background: var(--il-navy-05); border: 1px solid var(--il-line); border-radius: 8px; display: grid; gap: 8px; grid-template-columns: 1fr max-content; padding: 12px 16px; margin: 12px 0 0; }
.idvBanner-left { align-items: center; column-gap: 10px; display: grid; grid-template-columns: max-content 1fr; }
.idvBanner-icon { color: var(--il-navy); height: 36px; width: 36px; }
.idvBanner-copy { color: var(--il-ink); font-size: 16px; line-height: 20px; margin: 0; }
.idvBanner-copyStrong { font-weight: 600; margin-right: 4px; }
.idvBanner-cta { background: var(--il-navy); border-radius: 8px; color: #fff; cursor: pointer; font-family: var(--il-font); font-size: 15px; font-weight: 600; padding: 8px 14px; transition: background-color .15s ease; border: 0; text-decoration: none; white-space: nowrap; }
.idvBanner-cta:hover { background: var(--il-navy-hover); }
/* the gallery (their dealGallery-wrapper-6-withMaps: "main walkthrough streetview streetview" / "main mapview video more") */
.dealGallery-wrapper { background: #fff; border-radius: 12px; display: grid; gap: 8px; overflow: hidden; position: relative; border: 1px solid var(--il-line); }
.dealGallery-wrapper > * { align-items: center; background-position: 50%; background-repeat: no-repeat; background-size: cover; display: flex; justify-content: center; position: relative; overflow: hidden; background-color: var(--il-wash); min-width: 0; min-height: 0; }
.dealGallery-wrapper > * > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dealGallery-wrapper > button, .dealGallery-wrapper > a { cursor: pointer; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: none; }
.dealGallery-wrapper { grid-template: "main s1 s2 s2" 236px "main s3 map more" 236px / 2.75fr 1fr 1.36fr 1.36fr; }
.dealGallery-main { grid-area: main; }
.dealGallery-side-1 { grid-area: s1; }
.dealGallery-side-2 { grid-area: s2; }
.dealGallery-side-3 { grid-area: s3; }
.dealGallery-mapview { grid-area: map; }
.dealGallery-more { grid-area: more; }
/* fewer photos: the grid folds itself so no cell is ever a grey box */
.dealGallery-wrapper[data-cells="3"] { grid-template: "main s1 s2 s2" 236px "main map map more" 236px / 2.75fr 1fr 1.36fr 1.36fr; }
.dealGallery-wrapper[data-cells="2"] { grid-template: "main s1 s1 s1" 236px "main map map more" 236px / 2.75fr 1fr 1.36fr 1.36fr; }
.dealGallery-wrapper[data-cells="1"] { grid-template: "main main map more" 236px "main main map more" 236px / 1.4fr 1.35fr 1.36fr 1.36fr; }
.dealGallery-wrapper[data-cells="1"] .dealGallery-side-1, .dealGallery-wrapper[data-cells="1"] .dealGallery-side-2, .dealGallery-wrapper[data-cells="1"] .dealGallery-side-3,
.dealGallery-wrapper[data-cells="2"] .dealGallery-side-2, .dealGallery-wrapper[data-cells="2"] .dealGallery-side-3,
.dealGallery-wrapper[data-cells="3"] .dealGallery-side-3 { display: none; }
.dealGallery-wrapper.is-nomap { grid-template: "main s1 s2 s2" 236px "main s3 more more" 236px / 2.75fr 1fr 1.36fr 1.36fr; }
.dealGallery-wrapper.is-nomap .dealGallery-mapview { display: none; }
.dealGallery-badge { align-items: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); background: rgba(0, 0, 0, .5); border: 0; border-radius: 4px; color: #fff; display: grid; font-size: 10px; font-weight: 600; gap: 4px; grid-template-columns: max-content 1fr; justify-content: center; left: 4px; line-height: 12px; padding: 6px 8px; pointer-events: none; position: absolute; top: 4px; z-index: 1; text-transform: uppercase; letter-spacing: .02em; }
.dealGallery-badge svg { width: 12px; height: 12px; }
.dealGallery-badge--right { left: auto; right: 4px; }
.dealGallery-badge--bottom { top: auto; bottom: 4px; }
.dealGallery-more-blacked::before { background-color: rgba(0, 0, 0, .52); content: ""; height: 100%; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 100%; z-index: 1; }
.dealGallery-more > .ui-button, .dealGallery-more > .dealGallery-moreUnloged { position: relative; z-index: 2; }
.dealGallery-moreUnloged { display: grid; row-gap: 10px; justify-items: center; color: #fff; font-size: 14px; font-weight: 500; line-height: 20px; text-align: center; padding: 12px; }
.dealGallery-mapview .il-map-static { width: 100%; height: 100%; object-fit: cover; display: block; }
.dealGallery-mapview .il-map-fallback { width: 100%; height: 100%; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #eef3f8 0 12px, #e6edf4 12px 24px); color: var(--il-navy); }
.dealGallery-mapview .il-map-fallback svg { width: 42px; height: 42px; }
.dealGallery-statusChip { position: absolute; left: 12px; top: 12px; z-index: 2; }
.dealGallery-viewChip { position: absolute; right: 12px; bottom: 12px; z-index: 2; }
.google-map-fullscreen-control { align-items: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); background: rgba(0, 0, 0, .5); border: 0; border-radius: 8px; bottom: 4px; cursor: pointer; display: flex; height: 36px; justify-content: center; position: absolute; right: 4px; user-select: none; width: 36px; z-index: 2; color: #e5e5e8; opacity: 0; transition: opacity .2s ease-in-out; }
.dealGallery-wrapper > *:hover > .google-map-fullscreen-control { opacity: 1; }
.google-map-fullscreen-control svg { width: 18px; height: 18px; }
@media (max-width: 960px) {
  .dealGallery-wrapper, .dealGallery-wrapper[data-cells], .dealGallery-wrapper.is-nomap { grid-template: "main main" 240px "s1 s2" 120px "map more" 120px / 1fr 1fr; }
  .dealGallery-wrapper .dealGallery-side-3 { display: none; }
  .dealGallery-wrapper[data-cells="1"] { grid-template: "main main" 240px "map more" 120px / 1fr 1fr; }
  .dealGallery-wrapper[data-cells="2"] { grid-template: "main main" 240px "s1 map" 120px "more more" 96px / 1fr 1fr; }
}
/* the address row */
.dealRow-row { display: flex; justify-content: space-between; padding: 24px 0; gap: 16px; flex-wrap: wrap; }
.dealRow-row > * { align-items: center; display: flex; }
.dealRow-addressContainer { align-items: center; display: flex; flex-direction: row; gap: 16px; justify-content: space-between; width: 100%; flex-wrap: wrap; }
.dealRow-addressLine { align-items: center; display: flex; min-width: 0; }
.dealRow-addressLine > svg { width: 22px; height: 22px; color: var(--il-navy); flex: none; }
.dealRow-address { color: var(--il-ink); font-size: 20px; font-weight: 600; line-height: 28px; padding: 0 8px; }
.dealRow-address h1 { font: inherit; margin: 0; display: inline; }
.dealRow-title { color: var(--il-ink-2); font-size: 14px; line-height: 20px; padding: 0 8px 0 30px; display: block; }
/* Column, right-aligned: the unlock chip stacks ABOVE the "Listed recently /
   Investors are viewing" line, and both edges land on the price rail's own
   right edge two columns over -- .dealRow-row's generic `align-items: center`
   would otherwise centre these horizontally once the direction flips. */
.dealRow-rowRight { display: flex; flex-direction: column; align-items: flex-end; row-gap: 10px; }
.dealRow-metaRow { display: flex; column-gap: 16px; flex-wrap: wrap; row-gap: 6px; justify-content: flex-end; }
.dealRow-metaRow > * { align-items: center; color: var(--il-ink-2); column-gap: 4px; display: grid; font-size: 14px; font-weight: 400; grid-template-columns: max-content max-content; line-height: 20px; }
.dealRow-metaRow svg { width: 18px; height: 18px; }
.dealRow-viewAddress { flex-shrink: 0; width: fit-content; }
.dealRow-kicker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; width: 100%; }
/* overview card */
.overview-wrapper { background: #fff; border: 1px solid var(--il-line); border-radius: 12px; }
.overview-top { display: grid; gap: 24px; grid-template-columns: repeat(4, 1fr); padding: 16px 24px; }
.overview-topItem { align-items: center; display: grid; gap: 12px; grid-template-columns: max-content 1fr; }
.overview-topItem > svg, .overview-topItem > i { width: 28px; height: 28px; color: var(--il-navy); }
.overview-topItemTitle { color: var(--il-ink-2); font-size: 14px; font-weight: 400; line-height: 20px; }
.overview-topItemDescription { color: var(--il-ink); font-size: 18px; font-weight: 600; line-height: 24px; }
.overview-bottom { border-top: 1px solid var(--il-line); padding: 16px 24px; }
.overview-bottomTitle { color: var(--il-ink); font-size: 20px; font-weight: 600; line-height: 28px; }
.overview-bottomDescription { color: var(--il-ink); display: grid; font-size: 16px; font-weight: 400; gap: 16px; line-height: 26px; max-height: 210px; overflow: hidden; padding: 16px 0 12px; position: relative; transition: max-height .3s ease; }
.overview-bottomDescription.is-open { max-height: none; }
.overview-bottomDescription:not(.is-open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.overview-bottomDescription ul { list-style: none; padding: 0; margin: 0; }
.overview-bottomDescription ul > li::before { content: "•"; margin: 0 7px; }
.overview-bottomDescription > * { word-break: break-word; margin: 0; }
.overview-bottomDescription p { margin: 0; }
.overview-readMore { height: 28px; padding: 4px 0 !important; }
.overview-highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; padding: 0; margin: 0 0 16px; list-style: none; }
.overview-highlights li { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 22px; color: var(--il-ink); }
.overview-highlights li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--il-navy); margin-top: 7px; flex: none; }
/* the section cards (additional details / condition / financing) */
.additionalDetails-wrapper, .propertyCondition-wrapper, .financingInfo-wrapper, .il-section-card { background: #fff; border: 1px solid var(--il-line); border-radius: 12px; padding: 24px; }
.additionalDetails-title, .propertyCondition-title, .financingInfo-title { font-size: 20px; font-weight: 600; line-height: 28px; margin: 0 0 16px; color: var(--il-ink); }
.additionalDetails-grid, .propertyCondition-grid, .financingInfo-grid { column-gap: 16px; row-gap: 20px; display: grid; grid-template-columns: repeat(4, 1fr); }
.additionalDetails-gridItem, .propertyCondition-gridItem, .financingInfo-gridItem { column-gap: 8px; display: grid; grid-template-columns: max-content 1fr; min-width: 0; }
.additionalDetails-gridItem > div:first-child svg, .propertyCondition-gridItem > div:first-child svg, .financingInfo-gridItem > div:first-child svg { color: var(--il-ink-2); display: flex; height: 18px; width: 18px; }
.additionalDetails-gridItemTitle, .propertyCondition-gridItemTitle, .financingInfo-gridItemTitle { color: var(--il-ink-2); font-size: 15px; font-weight: 500; line-height: 20px; }
.additionalDetails-gridItemDescription, .propertyCondition-gridItemDescription, .financingInfo-gridItemDescription { color: var(--il-ink); font-size: 15px; font-weight: 400; line-height: 20px; word-break: break-word; }
.financingInfo-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .overview-top { grid-template-columns: repeat(2, 1fr); gap: 16px; } .additionalDetails-grid, .propertyCondition-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .additionalDetails-grid, .propertyCondition-grid, .financingInfo-grid { grid-template-columns: 1fr; } .overview-top { padding: 16px; } .overview-bottom { padding: 16px; } }
/* the price block (their priceBlock-wrapper: the one tinted-rim card) */
.priceBlock-wrapper { background: #fff; border: 1px solid var(--il-navy-15); border-radius: 12px; display: grid; padding: 24px; position: relative; row-gap: 24px; }
.priceBlock-costList { display: grid; row-gap: 12px; }
.priceBlock-costList > * { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.priceBlock-costList > * > :first-child { align-self: flex-end; color: var(--il-ink-2); }
.priceBlock-costList-label { font-weight: 500; line-height: 22px; font-size: 15px; }
.priceBlock-label { font-size: 14px; font-weight: 500; line-height: 20px; }
.priceBlock-cost { font-size: 24px; font-weight: 700; line-height: 32px; color: var(--il-ink); font-variant-numeric: tabular-nums; }
.priceBlock-arv { font-size: 18px; font-weight: 600; line-height: 24px; color: var(--il-ink); font-variant-numeric: tabular-nums; }
.priceBlock-gross { border-top: 1px solid var(--il-line); padding-top: 12px; }
.priceBlock-gross-label { font-size: 14px; font-weight: 400; line-height: 20px; }
.priceBlock-grossValue { color: var(--il-green); font-size: 14px; font-weight: 600; line-height: 20px; font-variant-numeric: tabular-nums; }
/* a spread at or under zero is not a gain -- the page script toggles text-red-600 on the value */
.priceBlock-grossValue.text-red-600 { color: var(--il-crimson); }
.priceBlock-sub { font-size: 12px; line-height: 16px; color: var(--il-ink-3); text-align: right; }
.priceBlock-actions { display: grid; row-gap: 12px; }
.priceBlock-actions .ui-button { width: 100%; }
.priceBlock-financingAction { border-top: 1px solid var(--il-line); display: grid; padding-top: 20px; row-gap: 12px; }
.priceBlock-financingAction .ui-button { width: 100%; }
.priceBlock-extraActions { display: flex; justify-content: space-between; position: relative; gap: 8px; flex-wrap: wrap; }
.priceBlock-extraActions .ui-button { flex: 1; }
.priceBlock-extraActionsButtons { font-size: 14px; font-weight: 500; line-height: 20px; }
.priceBlock-extraButtonIconWrapper { height: 22px; }
.priceBlock-countdown { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--il-gold-05); color: var(--il-gold-ink); font-size: 13px; font-weight: 600; line-height: 18px; }
.priceBlock-countdown.is-urgent { background: var(--il-crimson-05); color: var(--il-crimson); }
.priceBlock-countdown svg { width: 16px; height: 16px; flex: none; }
.priceBlock-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--il-wash); font-size: 12px; line-height: 17px; color: var(--il-ink-2); }
.priceBlock-note-icon { width: 15px; height: 15px; margin-top: 1px; flex: none; color: var(--il-ink-3); }
.priceBlock-note-text { margin: 0; }
.priceBlock-note-sep { color: var(--il-ink-3); }

/* ------------------------------------------------------------------ the premium layer
   ONE idea, three surfaces: this page, the deal flyer (lib/hope-flyer.js) and the deal
   blast email (lib/deal-blast-email.js). A buyer reads the email, opens the sheet it
   links to and lands here, in that order, inside about a minute — so whatever "premium"
   means has to mean the same thing in a printed PDF and in Outlook as it does here.
   That rules out hover, transitions and anything that needs a real layout engine, and
   leaves three things all three can render: a GOLD INLAY RULE, a wide low-opacity NAVY
   ELEVATION, and TABULAR, TIGHTLY-TRACKED FIGURES.

   ⚠ IT IS SPENT, NOT SPRINKLED. The calm of this page is a decision — every card is
   identical and nothing competes to look important except the price — so a shadow under
   all nine cards would undo the thing that makes it read as expensive. Exactly two
   surfaces carry it: the gallery (what a buyer looks at first) and the price block (what
   they are deciding on). The section cards stay flat on their hairline.

   ⚠ THE VALUES ARE A STRUCTURALLY FORCED RESTATEMENT of HOPE_PREMIUM in
   lib/hope-marketing.js — a stylesheet cannot call a builder that emits an inline style
   run, the same reason .jhb-ray-band restates the email masthead — so what is guarded is
   the AGREEMENT (tests/one-premium-layer.test.js), never a literal pinned on both sides. */
.dealGallery-wrapper,
.priceBlock-wrapper { box-shadow: var(--il-prem-lift); }

/* The navy inlay across the top of the price block: this page's one piece of decoration,
   on its one already-tinted card. It is drawn INSIDE the radius, which is why the rule
   needs the card's own corner rather than a square 2px bar sitting proud of it.
   ⚠ THIS IS THE PRICE BLOCK'S OWN COLOUR, NOT A READ OF HOPE_PREMIUM.rule. That shared
   token stays gold because it also marks the flyer's navy band, where a navy rule would
   vanish against its own background; this card sits on white, so it reads the page's
   --il-navy directly instead. Height and geometry still match the shared rule. */
.priceBlock-wrapper::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  border-radius: var(--il-radius) var(--il-radius) 0 0;
  background: linear-gradient(90deg, rgba(19, 67, 107, 0) 0%, var(--il-navy-40) 18%, var(--il-navy) 50%, var(--il-navy-40) 82%, rgba(19, 67, 107, 0) 100%);
}

/* ⚠ A FIGURE IS SET AS A FIGURE, BY NAME. Tabular numerals line a column of money up on
   its digits, which is most of why a price list reads as considered rather than typed —
   but applied to everything they turn a street number and a year into table cells, so
   this names the money and nothing else. .priceBlock-cost, -arv and -grossValue already
   asked for tabular-nums; the tracking is what the flyer and the email now match. */
.priceBlock-cost, .priceBlock-arv, .priceBlock-grossValue, .rentRail-value,
.pricing-spread-value, .overview-topItemDescription { letter-spacing: -0.015em; }
.pricing-spread-value, .overview-topItemDescription { font-variant-numeric: tabular-nums; }
/* The permanent process note — present on every deal regardless of whether a
   deadline countdown is running (that one is gated on offerDeadline and can be
   hidden). States the real mechanic (deadline review, strongest offer wins) with
   the same gold treatment .priceBlock-countdown already uses, never a claim about
   how many buyers are looking or how fast deals move — see
   tests/no-competitive-claims.test.js and tests/public-social-proof-vague.test.js. */
.priceBlock-process-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--il-gold-05); color: var(--il-gold-ink); font-size: 12.5px; font-weight: 600; line-height: 17px; }
.priceBlock-process-note svg { width: 15px; height: 15px; margin-top: 1px; flex: none; }
/* The last line before Submit on an offer. Short on purpose (see the markup
   comment over it) — states deadline finality, never a competitive/velocity
   claim. */
.offer-final-push { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--il-gold-05); color: var(--il-gold-ink); font-size: 12.5px; font-weight: 600; line-height: 17px; }
.offer-final-push svg { width: 15px; height: 15px; margin-top: 1px; flex: none; }
/* the contact card */
.contactCard-wrapper { background: #fff; border: 1px solid var(--il-line); border-radius: 12px; display: grid; grid-template-columns: 100%; padding: 24px; row-gap: 16px; }
.contactCard-info { column-gap: 12px; display: grid; justify-items: center; position: relative; }
.contactCard-infoContent { display: grid; flex: 1; min-width: 0; padding-bottom: 4px; padding-top: 10px; justify-items: center; }
.contactCard-infoTitle { color: var(--il-ink-2); font-size: 18px; line-height: 24px; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; text-align: center; }
.contactCard-infoDescription { color: var(--il-ink); font-size: 16px; line-height: 22px; margin-top: 4px; font-weight: 600; text-align: center; }
.contactCard-infoReviewsWrapper { display: grid; justify-items: center; }
.contactCard-infoReviews { align-items: center; column-gap: 4px; display: grid; grid-template-columns: repeat(2, max-content); }
.contactCard-infoReviewsCount { color: var(--il-navy); cursor: pointer; font-size: 12px; font-weight: 400; line-height: 16px; text-decoration: none; }
.rateRow-wrapper { column-gap: 2px; display: grid; grid-template-columns: repeat(5, max-content); }
.rateRow-wrapper svg { width: 16px; height: 16px; color: var(--il-gold); }
.contactCard-bottom { display: grid; row-gap: 12px; }
.contactCard-bottom .ui-button { width: 100%; }
.contactCard-allCompanyDeals { color: var(--il-navy) !important; }
.contactCard-lines { display: grid; row-gap: 2px; font-size: 14px; line-height: 20px; color: var(--il-ink-2); }
/* One shape for all three rows: a small grey label with its value under it. The card
   used to carry a labelled Call row beside a bare "Text the direct line" link and a
   bare address, which read as three unrelated controls stacked. */
.contactCard-lines a { display: grid; grid-template-columns: 32px 1fr; align-items: center; column-gap: 10px; color: var(--il-ink); text-decoration: none; padding: 8px 0; border-radius: var(--il-radius-xs); }
.contactCard-lines a + a { border-top: 1px solid var(--il-line); }
.contactCard-lines a:hover { color: var(--il-navy); }
.contactCard-lines a:hover .contactCard-lineValue { color: var(--il-navy); }
.contactCard-lines a:focus-visible { box-shadow: var(--il-focus); outline: none; }
/* The mark sits in a disc so the three rows share one optical left edge whatever the
   glyph's own width is -- a bare 16px icon makes each row start in a slightly
   different place. */
.contactCard-lines svg { width: 32px; height: 32px; padding: 8px; box-sizing: border-box; border-radius: 50%; background: var(--il-wash); color: var(--il-ink-2); flex: none; }
.contactCard-lines a:hover svg { background: var(--il-navy-05); color: var(--il-navy); }
.contactCard-lineText { display: grid; min-width: 0; }
.contactCard-lineLabel { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--il-ink-3); }
.contactCard-lineValue { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--il-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the rent estimate rail card: the same median-rent figure the old full-width
   section carried, sized for the 320px rail beside the price block rather
   than its own wide report -- the number and the range, not the percentile
   grid or the gradient band. */
.rentRail-wrapper { background: #fff; border: 1px solid var(--il-line); border-radius: var(--il-radius-sm); padding: 16px; }
.rentRail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.rentRail-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--il-ink-2); }
.rentRail-badge { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--il-ink-2); background: var(--il-wash); border-radius: var(--il-radius-xs); padding: 3px 8px; }
.rentRail-value { font-size: 22px; font-weight: 700; line-height: 28px; color: var(--il-ink); font-variant-numeric: tabular-nums; }
.rentRail-permo { margin-left: 2px; font-size: 13px; font-weight: 500; color: var(--il-ink-2); }
.rentRail-sub { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--il-ink-2); }
.rentRail-foot { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--il-line); font-size: 11px; line-height: 16px; color: var(--il-ink-3); }
/* the deals nearby section */
.dealsNearby-wrapper { padding: 36px 0; }
.dealsNearby-top { align-items: center; display: grid; grid-template-columns: 1fr max-content; margin-bottom: 24px; gap: 16px; }
.dealsNearby-title { font-size: 24px; font-weight: 700; line-height: 32px; margin: 0; }
.dealsNearby-switch .switch-option { font-weight: 500; padding: 6px 10px; }
.dealsNearby-switch .switch-optionActive { background: var(--il-navy); border: 1px solid var(--il-navy); color: #fff; }
.dealsNearby-grid { column-gap: 24px; row-gap: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 322px)); }
/* the section tabs on the deal page (ours; anchors only) */
.dealTabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--il-line); margin: 0 0 24px; padding: 0; }
.dealTabs::-webkit-scrollbar { display: none; }
.dealTabs a { padding: 10px 14px; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--il-ink-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.dealTabs a:hover { color: var(--il-ink); }
.dealTabs a.is-active { color: var(--il-navy); border-bottom-color: var(--il-navy); }
/* the timeline card (ours) */
.dealTimeline { display: grid; row-gap: 0; }
.dealTimeline-row { display: grid; grid-template-columns: max-content 1fr max-content; column-gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--il-line); text-align: left; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; color: inherit; width: 100%; cursor: pointer; }
.dealTimeline-row:first-child { border-top: 0; padding-top: 0; }
.dealTimeline-row:last-child { padding-bottom: 0; }
.dealTimeline-row.is-static { cursor: default; }
.dealTimeline-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--il-wash); color: var(--il-ink-2); }
.dealTimeline-dot svg { width: 16px; height: 16px; }
.dealTimeline-dot.is-gold { background: var(--il-gold-05); color: var(--il-gold-ink); }
.dealTimeline-dot.is-crimson { background: var(--il-crimson-05); color: var(--il-crimson); }
.dealTimeline-dot.is-navy { background: var(--il-navy-05); color: var(--il-navy); }
.dealTimeline-label { font-size: 13px; line-height: 18px; color: var(--il-ink-2); }
.dealTimeline-value { font-size: 15px; line-height: 20px; color: var(--il-ink); font-weight: 600; }
.dealTimeline-add { font-size: 12px; line-height: 16px; color: var(--il-navy); font-weight: 500; white-space: nowrap; }
.dealTimeline-add svg { width: 14px; height: 14px; vertical-align: -2px; }
/* the FAQ (details) */
.il-faq { display: grid; row-gap: 0; }
.il-faq details { border-top: 1px solid var(--il-line); }
.il-faq details:first-child { border-top: 0; }
.il-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; font-size: 16px; font-weight: 600; line-height: 22px; color: var(--il-ink); }
.il-faq summary::-webkit-details-marker { display: none; }
.il-faq summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--il-ink-2); border-bottom: 2px solid var(--il-ink-2); transform: rotate(45deg); transition: transform .2s ease; flex: none; margin-right: 4px; }
.il-faq details[open] summary::after { transform: rotate(-135deg); }
.il-faq details > div, .il-faq details > p { padding: 0 0 16px; font-size: 15px; line-height: 24px; color: var(--il-ink-2); }
.il-faq details > div p { margin: 0 0 10px; }
.il-faq details > div p:last-child { margin: 0; }
.il-faq details h3 { font: inherit; margin: 0; }
/* the sticky offer bar on a phone (ours) */
#mobileOfferBar { border-top: 1px solid var(--il-line); background: #fff; }
@media (max-width: 1100px) {
  .dealContent-body { grid-template-columns: 1fr; }
  .dealContent-right { position: static; }
  .dealsNearby-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .dealContent { padding: 0 12px 24px; }
  .dealRow-address { font-size: 18px; line-height: 24px; }
  .dealsNearby-grid { grid-template-columns: 1fr; }
  .priceBlock-wrapper, .contactCard-wrapper { padding: 16px; }
}

/* ------------------------------------------------------------------ the footer (their footer-wrapper) */
.footer-wrapper { background: #fff; border-top: 1px solid var(--il-wash); box-sizing: border-box; display: grid; justify-items: center; padding: 44px 16px; margin-top: auto; }
.footer-container { column-gap: 24px; row-gap: 32px; display: grid; grid-template-columns: repeat(3, 1fr); max-width: var(--il-content); width: 100%; }
.footer-left { display: grid; row-gap: 16px; align-content: start; }
.footer-logo { height: 36px; width: auto; display: block; }
.footer-copyright { color: var(--il-ink-3); font-size: 14px; font-weight: 400; line-height: 20px; padding-top: 4px; }
.footer-copyright a { color: inherit; text-decoration: none; }
.footer-blurb { color: var(--il-ink-2); font-size: 14px; line-height: 20px; max-width: 34ch; margin: 0; }
.footer-middle, .footer-right { display: grid; row-gap: 12px; align-content: start; }
.footer-middleTitle, .footer-rightTitle { color: var(--il-ink); font-size: 16px; font-weight: 600; line-height: 22px; }
.footer-middleEl, .footer-rightMail, .footer-right a { color: var(--il-ink-2); font-size: 14px; font-weight: 400; line-height: 20px; text-decoration: none; }
.footer-middleEl:hover, .footer-rightMail:hover, .footer-right a:hover { color: var(--il-navy); }
.footer-rightLinks { align-items: center; column-gap: 16px; display: grid; grid-template-columns: repeat(4, max-content); height: fit-content; padding-top: 12px; }
.footer-rightLinks a { display: flex; color: var(--il-ink-2); }
.footer-rightLinks a:hover { color: var(--il-navy); }
.footer-rightLinks svg { width: 22px; height: 22px; }
.footer-rightLine { display: flex; align-items: center; gap: 8px; }
.footer-rightLine svg { width: 16px; height: 16px; color: var(--il-ink-3); flex: none; }
.footer-legal { max-width: var(--il-content); width: 100%; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--il-wash); color: var(--il-ink-3); font-size: 12px; line-height: 18px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-legal nav { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-legal a { color: var(--il-ink-2); text-decoration: none; }
.footer-legal a:hover { color: var(--il-navy); }
.footer-store { display: flex; align-items: center; gap: 8px; }
.footer-store a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--il-line); border-radius: 8px; color: var(--il-ink); font-size: 13px; font-weight: 500; line-height: 18px; text-decoration: none; }
.footer-store a:hover { background: var(--il-wash); }
.footer-store svg { width: 16px; height: 16px; }
@media (max-width: 760px) { .footer-container { grid-template-columns: 1fr; } .footer-rightLinks { grid-template-columns: repeat(4, max-content); } }

/* ------------------------------------------------------------------ the modal (their .ui-modal) */
/* `display` lives in its own rule, gated on `:not(.hidden)`. The old single
   rule set `display: flex` unconditionally at the same specificity as
   Tailwind's `.hidden { display: none }` — and this sheet loads AFTER
   tailwind.css, so source order let it win every time regardless of the
   `hidden` class every one of these modals starts with. Every modal wearing
   this class (the address-unlock "Buyer Access" modal, #buyerPromptModal,
   #contactModal) was rendering open on load on every page that mounts it,
   with the JS's own classList.remove('hidden')/add('flex') toggle doing
   nothing because .hidden had already lost the cascade. */
.ui-modal-backdrop, .public-mobile-modal { position: fixed; inset: 0; background-color: rgba(0, 0, 0, .52); z-index: 90; align-items: center; justify-content: center; padding: 16px; animation: il-backdrop-in .3s both; }
.ui-modal-backdrop:not(.hidden), .public-mobile-modal:not(.hidden) { display: flex; }
.ui-modal, .public-mobile-modal-card { background-color: #fff; border: 1px solid var(--il-line-2); border-radius: 12px; overflow: hidden; width: 520px; max-width: 100%; max-height: min(92vh, 100%); display: flex; flex-direction: column; animation: il-modal-in .4s cubic-bezier(.25, 1, .5, 1) both; box-shadow: none; padding: 0; }
.ui-modal-top { align-items: center; border-bottom: 1px solid var(--il-line-2); display: flex; justify-content: space-between; padding: 16px; flex: none; }
.ui-modal-title-wrapper { width: 100%; min-width: 0; }
.ui-modal-title { color: #404040; font-size: 16px; font-weight: 600; line-height: 20px; margin: 0; padding: 0 8px; }
.ui-modal-description { color: var(--il-ink-2); font-size: 14px; font-weight: 400; line-height: 20px; padding: 0 8px; margin: 2px 0 0; }
.ui-modal-close { align-items: center; border: 1px solid transparent; border-radius: 999px; cursor: pointer; display: grid; justify-content: center; min-height: 38px; min-width: 38px; transition: all .2s ease; background: transparent; color: var(--il-ink); flex: none; }
.ui-modal-close:hover { background: var(--il-wash); border-color: var(--il-wash); }
.ui-modal-close svg { width: 20px; height: 20px; }
.ui-modal-content { max-height: calc(80vh - 71px); overflow-y: auto; padding: 24px; scrollbar-width: none; }
.ui-modal-content::-webkit-scrollbar { display: none; }
.steps-wrapper { column-gap: 4px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.steps-stepItem { background: var(--il-wash); border-radius: 2px; height: 4px; overflow: hidden; position: relative; }
.steps-stepItem::before { background: var(--il-navy); content: ""; display: block; height: 100%; position: absolute; transition: all .3s cubic-bezier(.05, .7, .1, 1); width: 0; }
.steps-stepItemActive::before { transition: all .6s cubic-bezier(0, 0, 0, 1); width: 100%; }
.offerDetails-wrapper { display: grid; row-gap: 24px; }
.offerDetails-dealCardWithSwitch { display: grid; row-gap: 8px; }
.offerDetails-emdDescription { color: var(--il-ink-2); font-size: 12px; font-weight: 400; line-height: 16px; margin-top: 6px; }
.cardInfo-wrapper { border: 1px solid var(--il-line); border-radius: 8px; column-gap: 12px; display: grid; grid-template-columns: max-content 1fr; padding: 12px; }
.cardInfo-content { display: grid; row-gap: 6px; min-width: 0; }
.cardInfo-title { align-items: center; color: var(--il-ink); column-gap: 4px; display: flex; font-size: 18px; font-weight: 600; line-height: 24px; flex-wrap: wrap; }
.cardInfo-label { color: var(--il-ink); font-size: 13px; font-weight: 500; line-height: 18px; }
.cardInfo-description { align-items: center; column-gap: 4px; display: grid; font-size: 12px; font-weight: 400; grid-template-columns: max-content 1fr; line-height: 16px; color: var(--il-ink-2); }
.cardInfo-description svg { width: 14px; height: 14px; }
.roundedImage { background-position: 50%; background-repeat: no-repeat; background-size: cover; border-radius: 4px; width: 84px; height: 62px; background-color: var(--il-wash); }
.roundedImage-rounded { border-radius: 50%; }
@keyframes il-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes il-modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ the profile pages (their .profile-page) */
.profile-page {
  align-items: stretch; background: var(--il-ground); column-gap: 24px; display: grid;
  grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: 1fr;
  margin: 0 auto; padding: 12px; width: min(1680px, calc(100% - 24px)); box-sizing: border-box;
}
.profileSideBar-wrapper { background: #fff; border: 1px solid var(--il-line); border-radius: 12px; align-self: stretch; }
.profileSideBar-title { color: var(--il-ink); font-size: 24px; font-weight: 700; line-height: 32px; padding: 16px 16px 12px; margin: 0; }
.profileSideBar-top { display: flex; flex-direction: column; padding: 12px 16px; row-gap: 4px; }
.profileSideBar-item { width: 100%; justify-content: flex-start !important; }
.profileSideBar-item .front-layer { justify-content: start; }
.profileSideBar-item-icon { align-items: center; display: flex; height: 22px; justify-content: center; width: 22px; color: var(--il-ink); }
.profileSideBar-item-icon svg { width: 22px; height: 22px; }
.profileSideBar-itemActive { background: var(--il-wash) !important; border: 1px solid var(--il-wash) !important; }
.profileSideBar-itemLabel { color: var(--il-ink); font-size: 15px; font-weight: 500; line-height: 20px; }
.profileSideBar-bottom { border-top: 1px solid var(--il-line); display: grid; padding: 12px 16px; row-gap: 4px; }
.profileContent-wrapper { background: #fff; border: 1px solid var(--il-line); border-radius: 12px; position: relative; min-width: 0; }
.profileContent-top { border-bottom: 1px solid var(--il-line); padding: 16px 24px; }
.profileContent-title { color: var(--il-ink); font-size: 18px; font-weight: 600; line-height: 24px; margin: 0; }
.profileContent-description { color: var(--il-ink-2); font-size: 13px; font-weight: 400; line-height: 18px; margin: 2px 0 0; }
.profileContent-bottom { padding: 16px 24px; display: grid; row-gap: 20px; }
.profileEdit-row { column-gap: 16px; display: grid; grid-template-columns: 124px 1fr; align-items: baseline; }
.profileEdit-label { color: var(--il-ink-2); font-size: 15px; font-weight: 500; line-height: 20px; padding: 9px 0; }
.profileEdit-content { align-items: center; column-gap: 12px; display: grid; grid-template-columns: 1fr max-content; }
.profileEdit-value { color: var(--il-ink); font-size: 16px; line-height: 22px; }
.profileEdit-description { color: var(--il-ink-2); font-size: 14px; line-height: 20px; }
@media (max-width: 1100px) { .profile-page { grid-template-columns: 1fr; } .profileSideBar-top { flex-direction: row; flex-wrap: wrap; } .profileSideBar-top .ui-button { width: auto; } }
@media (max-width: 640px) { .profileEdit-row { grid-template-columns: 1fr; } .profileContent-bottom, .profileContent-top { padding: 16px; } }

/* The rail row is a .ui-button, and the page's own switcher toggles `is-active` on
   it — that class is what tests/profile-panels-render.test.js pins and what every
   [data-profile-nav] handler writes, so the active LOOK is aliased onto it here
   rather than the markup being taught a second state word. */
.profileSideBar-item.is-active { background: var(--il-wash) !important; border-color: var(--il-wash) !important; }
/* Log out is the one row that is not a place you go. Crimson is this brand's single
   action colour, so it says "this does something" without shouting on a menu. */
.profileSideBar-item--danger .profileSideBar-itemLabel { color: var(--il-crimson); }
.profileSideBar-item--danger .profileSideBar-item-icon { color: var(--il-crimson); }
.profileSideBar-item--danger:hover { background: rgba(var(--il-crimson-rgb), .06) !important; }

/* Their .editProfile-wrapper > *: every panel section is one flat white card on a
   hairline. No shadow and no accent rule — on a page that is a stack of these, an
   edge per card is what keeps them reading as one system. */
.profileCard { background: #fff; border: 1px solid var(--il-line); border-radius: 8px; padding: 24px; min-width: 0; }
.profileCard-title { color: var(--il-ink); font-size: 16px; font-weight: 600; line-height: 22px; margin: 0; }
.profileCard-sub { color: var(--il-ink-2); font-size: 14px; font-weight: 400; line-height: 20px; margin: 4px 0 0; }
.profile-panel-off { display: none !important; }

/* The Edit profile card. One row per fact; the rows share the card, so the rule
   between them is the card's own and not a border per row. */
.profileEdit-rows { display: grid; row-gap: 0; }
.profileEdit-rows > .profileEdit-row { padding: 14px 0; border-bottom: 1px solid var(--il-line); }
.profileEdit-rows > .profileEdit-row:first-child { padding-top: 0; }
.profileEdit-rows > .profileEdit-row:last-of-type { border-bottom: 0; }
.profileEdit-row--avatar { display: block; }
.profileEditAvatar-wrapper { align-items: center; column-gap: 16px; display: flex; flex-wrap: wrap; }
.profileEditAvatar-image {
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; color: #fff; background: var(--il-navy);
}
.profileEditAvatar-image > * { width: 100% !important; height: 100% !important; }
.profileEditAvatar-image img, .profileEditAvatar-image svg { width: 100%; height: 100%; object-fit: cover; }
.profileEdit-stack { display: grid; row-gap: 6px; min-width: 0; }
.profileEdit-valueRow { align-items: center; column-gap: 8px; display: flex; flex-wrap: wrap; }
.profileEdit-content--full { grid-template-columns: 1fr; }
.profileEdit-actions { display: grid; justify-items: end; }
/* A row being edited: the value gives way to its own field, labelled. The label is
   not decoration — "First name" and "Last name" are two boxes and the row above
   showed them as one string. */
.profileEdit-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 2px; }
.profileEdit-fieldLabel { color: var(--il-ink-2); display: block; font-size: 13px; font-weight: 500; line-height: 18px; margin-bottom: 4px; }
.ui-input-el {
  background: #fff; border: 1px solid var(--il-line-2); border-radius: 6px; color: var(--il-ink);
  font: inherit; font-family: var(--il-font); min-height: 40px; outline: none; padding: 0 12px; width: 100%;
  transition: border .3s ease, box-shadow .32s cubic-bezier(.13, .27, 0, 2.08);
}
.ui-input-el::placeholder { color: var(--il-ink-3); }
.ui-input-el:hover { border-color: #999; }
.ui-input-el:focus { border-color: var(--il-navy); box-shadow: 0 0 0 2px rgba(var(--il-navy-rgb), .12); }
.ui-input-el[readonly] { background: var(--il-wash); color: var(--il-ink-2); }
/* A cross-panel jump written as a button so it cannot be middle-clicked into a tab
   that has no panel state — it reads as a link because that is what it does. */
.profileEdit-link { background: 0 0; border: 0; padding: 0; font: inherit; color: var(--il-navy); font-weight: 500; text-decoration: underline; cursor: pointer; }
.profileEdit-link:hover { color: var(--il-navy-hover); }
.profileEdit-consents { display: grid; row-gap: 10px; }
.profileEdit-consent { align-items: start; column-gap: 10px; color: var(--il-ink-2); cursor: pointer; display: grid; font-size: 14px; grid-template-columns: max-content 1fr; line-height: 20px; }
.profileEdit-consent input { accent-color: var(--il-navy); margin-top: 3px; width: 16px; height: 16px; }
.profileEdit-save { align-items: center; column-gap: 12px; display: flex; flex-wrap: wrap; padding-top: 16px; }
.profileEdit-msg { color: var(--il-ink-2); font-size: 14px; line-height: 20px; margin: 0; }
.profileEdit-note { align-items: start; color: var(--il-ink-2); font-size: 14px; line-height: 20px; margin: 16px 0 0; }
/* The verification badge is a button, so it has to be told it is not a .ui-button. */
.profileEdit-valueRow .ui-message-status-badge { border: 0; cursor: pointer; font-family: inherit; }
.profileEdit-valueRow .ui-message-status-badge[disabled] { cursor: default; }
.profile-verify--verified { background: rgba(var(--il-green-rgb), .12); color: var(--il-green); }
.profile-verify--unverified { background: #fff5e0; color: #8a6100; }
@media (max-width: 640px) {
  .profileEdit-content { grid-template-columns: 1fr; row-gap: 10px; }
  .profileEdit-actions { justify-items: start; }
  .profileEditAvatar-image { width: 72px; height: 72px; font-size: 24px; }
}

/* The two states before the member area: the session check, and the gate if it
   said no. One flat card, centred, in the same language as everything behind it —
   a boot screen in a different visual system reads as a different product. */
.profile-boot:not(.hidden) { padding: 48px 16px; display: grid; justify-items: center; }
.profile-boot_card { max-width: 32rem; text-align: center; width: 100%; }
.profile-boot_icon { align-items: center; background: var(--il-navy-05); border-radius: 12px; color: var(--il-navy); display: flex; height: 48px; justify-content: center; margin: 0 auto; width: 48px; }
.profile-boot_icon svg { height: 24px; width: 24px; }
.profile-boot_title { color: var(--il-ink); font-size: 20px; font-weight: 600; line-height: 28px; margin: 16px 0 0; }
.profile-boot_sub { color: var(--il-ink-2); font-size: 14px; line-height: 20px; margin: 6px 0 0; }
.profile-boot_action { margin-top: 20px; }
.profile-boot_alt { border-top: 1px solid var(--il-line); margin-top: 24px; padding-top: 20px; }
.profile-boot_altLabel { color: var(--il-ink-2); font-size: 12px; font-weight: 600; letter-spacing: .08em; margin: 0 0 8px; text-transform: uppercase; }
#magicLinkForm { display: flex; gap: 8px; margin: 0 auto; max-width: 28rem; }
@media (max-width: 520px) { #magicLinkForm { flex-direction: column; } }


/* The member profile's own buttons, taken back from the ROUND 3 blanket.
   public-ui.css paints `body.public-body .btn-navy` / `.btn-ghost` (0,2,0) with
   !important on the fill, the corner, the font, the padding and a 4px glowing
   ::before bar — the previous brand's button, and the reason the buy-box panel
   was a stack of marketplace cards with backend buttons in it. Two ids beat that
   among !important declarations, and only the properties it actually sets are
   taken back: it also owns the ::before/::after it invented, so those are the
   only pseudos switched off. A class rename would have been 26 markup edits with
   a chance of missing one, for the same result. */
body.public-body #profileArea .btn-navy,
body.public-body #profileArea .btn-ghost,
body.public-body #profileSignedOut .btn-navy,
body.public-body #profileSignedOut .btn-ghost {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 6px !important;
  font-family: var(--il-font) !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  font-size: .9375rem !important;
  line-height: 1.25rem !important;
  padding: 9px 14px !important;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease !important;
}
body.public-body #profileArea .btn-navy,
body.public-body #profileSignedOut .btn-navy {
  background: var(--il-navy) !important;
  border: 1px solid var(--il-navy) !important;
  color: #fff !important;
}
body.public-body #profileArea .btn-navy:hover,
body.public-body #profileSignedOut .btn-navy:hover {
  background: var(--il-navy-hover) !important; border-color: var(--il-navy-hover) !important;
  transform: none !important; filter: none !important;
}
body.public-body #profileArea .btn-navy:disabled,
body.public-body #profileSignedOut .btn-navy:disabled {
  background: #d9d9d9 !important; border-color: #d9d9d9 !important; color: var(--il-ink-3) !important;
}
body.public-body #profileArea .btn-ghost,
body.public-body #profileSignedOut .btn-ghost {
  background: #fff !important;
  border: 1px solid var(--il-navy) !important;
  color: var(--il-navy) !important;
}
body.public-body #profileArea .btn-ghost:hover,
body.public-body #profileSignedOut .btn-ghost:hover {
  background: var(--il-navy-05) !important; border-color: var(--il-navy) !important;
  transform: none !important; filter: none !important;
}
/* The bar and its glow are the blanket's own pseudos — nothing in this page's
   markup puts anything there, so switching them off removes a decoration rather
   than hiding content. */
body.public-body #profileArea .btn-navy::before,
body.public-body #profileArea .btn-navy::after,
body.public-body #profileArea .btn-ghost::before,
body.public-body #profileArea .btn-ghost::after,
body.public-body #profileSignedOut .btn-navy::before,
body.public-body #profileSignedOut .btn-navy::after,
body.public-body #profileSignedOut .btn-ghost::before,
body.public-body #profileSignedOut .btn-ghost::after { content: none !important; display: none !important; }

/* The notification rows. public-bell.js injects its own sheet at runtime for the
   bell DROPDOWN, which every page carries — so the rows are re-pointed here under
   #bellPrefsHost rather than in that file, where the edit would follow the bell
   onto eighteen other pages. Id weight because the injected sheet lands after
   this one. Only the shape and the ink move; the switch itself is theirs. */
#bellPrefsHost .ncdd-bell-pref { border-radius: 8px; border-color: var(--il-line); padding: 12px 14px; }
#bellPrefsHost .ncdd-bell-pref:hover { border-color: var(--il-line-3); }
#bellPrefsHost .ncdd-bell-pref:has(input:checked) { border-color: var(--il-navy); background: var(--il-navy-05); }
#bellPrefsHost .ncdd-bell-pref input { accent-color: var(--il-navy); }
#bellPrefsHost .ncdd-bell-pref-title { color: var(--il-ink); font-size: .9375rem; font-weight: 500; line-height: 1.25rem; }
#bellPrefsHost .ncdd-bell-pref-sub { color: var(--il-ink-2); font-size: .8125rem; font-weight: 400; line-height: 1.125rem; margin-top: 2px; }
#bellPrefsHost .ncdd-bell-prefs { gap: 8px; }

/* ------------------------------------------------------------------ the messenger (their .messenger) */
.messenger { background-color: var(--il-ground); display: flex; gap: 24px; justify-content: center; padding: 16px; width: 100%; min-height: calc(100vh - var(--il-header)); }
.messenger__chat-panel { background-color: #fff; border: 1px solid var(--il-line); border-radius: 12px; }
.messenger__chat-list { padding: 16px 0; width: 320px; flex: none; }
.messenger__chat-frame { flex: 1; max-width: 1016px; display: flex; flex-direction: column; }
.chat-list { align-items: stretch; display: flex; flex-direction: column; height: 100%; width: 100%; }
.chat-list__title { color: var(--il-ink); font-size: 24px; font-weight: 700; line-height: 32px; padding: 0 16px; margin: 0; }
.chat-list__search { padding: 22px 16px 12px; }
.chat-list__search .ui-input { width: 100%; }
.chat-list__list { display: flex; flex: 1; flex-direction: column; overflow-y: auto; padding: 0 16px; row-gap: 3px; width: 100%; }
.chat-item { background-color: #fff; border-radius: 8px; column-gap: 8px; cursor: pointer; display: flex; flex-direction: row; height: 64px; padding: 8px; position: relative; width: 100%; border: 0; text-align: left; font: inherit; }
.chat-item:hover, .chat-item.is-active { background-color: var(--il-wash); }
.chat-item__avatar { display: flex; flex: none; height: 48px; width: 48px; }
.chat-item__body { display: flex; flex: auto; flex-direction: column; justify-content: center; min-width: 0; row-gap: 2px; }
.chat-item__recipient, .chat-item__message { align-items: center; column-gap: 4px; display: flex; flex: auto; flex-direction: row; width: 100%; }
.chat-item__name { color: var(--il-ink); flex: auto; font-size: 15px; font-weight: 500; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item__badge { align-items: center; background-color: var(--il-bright); border-radius: 8px; color: #fff; display: flex; flex: none; font-size: 10px; font-weight: 500; height: 16px; justify-content: center; line-height: 12px; padding: 2px 3px; min-width: 16px; }
.chat-item__text { color: var(--il-ink-2); flex: initial; font-size: 13px; font-weight: 400; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item__text--unread { color: var(--il-ink); font-weight: 600; }
.chat-item__date { color: var(--il-ink-3); display: flex; flex: none; font-size: 13px; font-weight: 400; justify-content: end; line-height: 18px; margin-left: auto; white-space: nowrap; }
.chat-thread__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--il-line); }
.chat-thread__body { flex: 1; overflow-y: auto; padding: 20px; display: grid; row-gap: 12px; align-content: start; }
.chat-bubble { max-width: 72%; padding: 10px 14px; border-radius: 12px; font-size: 15px; line-height: 22px; background: var(--il-wash); color: var(--il-ink); }
.chat-bubble--mine { background: var(--il-navy); color: #fff; justify-self: end; }
.chat-bubble__meta { font-size: 11px; line-height: 16px; color: var(--il-ink-3); margin-top: 4px; }
.chat-thread__composer { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--il-line); }
.chat-thread__composer .ui-input { flex: 1; }
.chat-empty { display: grid; place-items: center; text-align: center; color: var(--il-ink-2); padding: 48px 24px; row-gap: 8px; align-content: center; height: 100%; }
.chat-empty svg { width: 40px; height: 40px; color: var(--il-navy); }
@media (max-width: 860px) { .messenger { flex-direction: column; } .messenger__chat-list { width: 100%; } }

/* ------------------------------------------------------------------ the marketplace list page (deals.html) */
.marketplace-head { display: grid; grid-template-columns: 1fr max-content; align-items: end; gap: 16px; padding: 24px 0 16px; }
.marketplace-title { font-size: 24px; font-weight: 700; line-height: 32px; margin: 0; }
.marketplace-sub { color: var(--il-ink-2); font-size: 15px; line-height: 22px; margin: 4px 0 0; }
.marketplace-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 0 20px; }
.marketplace-filters .ui-input { min-width: 260px; }
.marketplace-filters .switch-wrapper { grid-auto-columns: max-content; }
.marketplace-filters .switch-option { padding: 6px 12px; }
.marketplace-filters-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.marketplace-count { color: var(--il-ink-2); font-size: 14px; line-height: 20px; }
.marketplace-empty { background: #fff; border: 1px solid var(--il-line); border-radius: 12px; padding: 48px 24px; text-align: center; display: grid; justify-items: center; row-gap: 10px; }
.marketplace-empty svg { width: 40px; height: 40px; color: var(--il-navy); }
.marketplace-empty h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 24px; }
.marketplace-empty p { margin: 0; color: var(--il-ink-2); font-size: 14px; line-height: 20px; max-width: 40ch; }
@media (max-width: 760px) { .marketplace-head { grid-template-columns: 1fr; } .marketplace-filters .ui-input { min-width: 0; width: 100%; } .marketplace-filters-right { margin-left: 0; width: 100%; } }

/* ------------------------------------------------------------------ the home page */
.home-hero { background: #fff; border-bottom: calc(2px / var(--public-zoom, 1)) solid var(--il-line); padding: 44px 24px 36px; }
.home-hero_inner { max-width: var(--il-content); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.home-hero_kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.home-hero h1 { font-size: 40px; font-weight: 700; line-height: 48px; margin: 0 0 12px; color: var(--il-ink); letter-spacing: -.01em; }
.home-hero h1 em { font-style: normal; color: var(--il-navy); }
.home-hero_sub { font-size: 17px; line-height: 26px; color: var(--il-ink-2); margin: 0 0 20px; max-width: 56ch; }
.home-hero_search { display: grid; grid-template-columns: 1fr max-content; gap: 8px; max-width: 640px; }
.home-hero_search .ui-input { width: 100%; }
.home-hero_quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.home-hero_quick span:first-child { font-size: 13px; color: var(--il-ink-3); }
.home-hero_quick a { text-decoration: none; }
.home-hero_ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.home-hero_serving { margin: 14px 0 0; font-size: 13px; }
.home-hero_stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; max-width: 640px; }
.home-hero_stat { border: 1px solid var(--il-line); border-radius: 12px; padding: 14px 16px; background: #fff; }
.home-hero_stat b { display: block; font-size: 22px; font-weight: 700; line-height: 28px; color: var(--il-ink); }
.home-hero_stat span { font-size: 13px; line-height: 18px; color: var(--il-ink-2); }
/* The hero frame is 2 REAL pixels, which is why the width is divided by the page zoom.
   body.public-body carries `zoom: var(--public-zoom)` -- 0.9 from 768px up (public-ui.css) --
   and Chromium FLOORS a border to whole device pixels, so a declared 2px is used at 1.8 and
   floors straight back to the 1px hairline every other card on this page wears: the frame
   silently does not exist, and the source reads as though it does. Dividing by the SAME
   token the zoom is set from keeps the two in step rather than restating 0.9 here. */
.home-hero_art { position: relative; border-radius: 12px; overflow: hidden; border: calc(2px / var(--public-zoom, 1)) solid var(--il-line); background: var(--il-wash); min-height: 340px; aspect-ratio: 4 / 3; }
/* the carousel over the five most recent live deals. The arrows and the dots are rendered
   hidden and un-hidden by the hero script only when there are two slides to move between --
   an arrow on a one-deal account is a control that visibly does nothing. */
.home-hero_art.is-live { cursor: pointer; }
.home-hero_arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--il-line); background: rgba(255, 255, 255, .94); color: var(--il-ink); cursor: pointer; padding: 0; box-shadow: 0 2px 10px rgba(26, 27, 34, .14); transition: background .15s ease, box-shadow .15s ease, transform .15s ease; }
.home-hero_arrow svg { width: 20px; height: 20px; }
.home-hero_arrow.is-prev { left: 12px; }
.home-hero_arrow.is-next { right: 12px; }
.home-hero_arrow:hover { background: #fff; box-shadow: 0 4px 16px rgba(26, 27, 34, .2); }
.home-hero_arrow:focus-visible { outline: none; box-shadow: var(--il-focus); }
.home-hero_arrow[hidden] { display: none; }
.home-hero_dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 92px; display: flex; justify-content: center; gap: 7px; }
.home-hero_dots[hidden] { display: none; }
.home-hero_dot { width: 8px; height: 8px; border-radius: 999px; padding: 0; border: 1px solid rgba(26, 27, 34, .22); background: rgba(255, 255, 255, .85); cursor: pointer; transition: background .15s ease, transform .15s ease; }
.home-hero_dot.is-on { background: var(--il-navy); border-color: var(--il-navy); transform: scale(1.15); }
.home-hero_dot:focus-visible { outline: none; box-shadow: var(--il-focus); }
.home-hero_art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-hero_art .ui-deal-card-badge { position: absolute; left: 12px; top: 12px; }
.home-hero_artCard { position: absolute; left: 12px; right: 12px; bottom: 12px; background: rgba(255, 255, 255, .96); border: 1px solid var(--il-line); border-radius: 8px; padding: 12px 14px; display: grid; grid-template-columns: 1fr max-content; gap: 6px 12px; align-items: center; }
.home-hero_artCard b { font-size: 18px; line-height: 24px; font-weight: 600; }
.home-hero_artCard small { font-size: 13px; line-height: 18px; color: var(--il-ink-2); grid-column: 1 / -1; }
.home-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.home-step { background: #fff; border: 1px solid var(--il-line); border-radius: 12px; padding: 24px; }
.home-step_n { width: 36px; height: 36px; border-radius: 50%; background: var(--il-navy-05); color: var(--il-navy); display: grid; place-items: center; font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.home-step h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; line-height: 24px; }
.home-step p { margin: 0; color: var(--il-ink-2); font-size: 15px; line-height: 22px; }
.home-band { background: var(--il-navy); color: #fff; border-radius: 12px; padding: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.home-band h2 { margin: 0 0 8px; font-size: 28px; font-weight: 700; line-height: 36px; color: #fff; }
.home-band p { margin: 0; color: rgba(255, 255, 255, .82); font-size: 16px; line-height: 24px; }
.home-band .il-eyebrow { color: var(--il-gold); }
.home-band_signals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.home-band_signals span { padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); font-size: 13px; font-weight: 500; }
.home-band form { background: #fff; border-radius: 12px; padding: 20px; color: var(--il-ink); display: grid; row-gap: 12px; }
.home-band form .ui-input { width: 100%; }
.home-areas { display: flex; flex-wrap: wrap; gap: 8px; }
.home-areas a { text-decoration: none; }
.home-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; color: var(--il-ink-2); font-size: 14px; line-height: 20px; padding: 24px 0; }
.home-trust span { display: inline-flex; align-items: center; gap: 8px; }
.home-trust svg { width: 18px; height: 18px; color: var(--il-navy); }
/* (!) The art is NOT hidden on a narrow screen any more. It was decoration -- one stock
   photo -- and hiding it kept the mobile hero compact at no cost. It is CONTENT now: the
   five most recent live deals with their real price, ARV and city, each one a link. A
   phone is where most buyers meet this page, and hiding the only picture of live inventory
   from them to save scroll is the wrong trade. It stacks UNDER the copy, so the headline
   and the search box are still the first things on screen. */
@media (max-width: 1000px) { .home-hero_inner { grid-template-columns: 1fr; } .home-hero_art { min-height: 0; margin-top: 4px; } .home-steps { grid-template-columns: 1fr; } .home-band { grid-template-columns: 1fr; padding: 24px; } }
/* a coarse pointer gets a real tap target; 36px is a mouse size. Gated on the POINTER, not
   on a width -- a tablet in landscape is wider than every breakpoint here and is still
   operated with a thumb. */
@media (pointer: coarse) {
  .home-hero_arrow { width: 44px; height: 44px; }
  .home-hero_arrow svg { width: 22px; height: 22px; }
  .home-hero_dot { width: 10px; height: 10px; }
  .home-hero_dots { bottom: 84px; gap: 10px; padding: 10px 0; }
}
@media (max-width: 560px) { .home-hero { padding: 28px 16px; } .home-hero h1 { font-size: 30px; line-height: 36px; } .home-hero_search { grid-template-columns: 1fr; } }
/* On a phone the picture of a live deal belongs right under the search box, not under the
   chips, both CTAs and three stat cards -- stacked, that put it roughly a screen and a half
   down, which is the same as not shipping it. `display: contents` dissolves the copy column
   so its children and the art are siblings in ONE column and `order` can interleave them.
   (!) Every child needs an explicit order or it defaults to 0 and jumps above the art. */
@media (max-width: 700px) {
  /* the copy column's own vertical rhythm was its margins; dissolved into the grid it is
     the grid's gap, and the hero's 40px column gap between every element is a screen of
     air. Row gap only -- one column, so the column gap is moot. */
  .home-hero_inner { row-gap: 16px; }
  .home-hero_inner > div:first-child { display: contents; }
  .home-hero_kicker { order: 1; }
  .home-hero h1 { order: 2; }
  .home-hero_sub { order: 3; }
  .home-hero_search { order: 4; }
  .home-hero_art { order: 5; margin-top: 2px; }
  .home-hero_quick { order: 6; }
  .home-hero_ctas { order: 7; }
  .home-hero_stats { order: 8; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .home-hero_stat { padding: 10px 10px; }
  .home-hero_stat b { font-size: 17px; line-height: 22px; }
  .home-hero_stat span { font-size: 11px; line-height: 15px; }
  .home-hero_serving { order: 9; }
}

/* ------------------------------------------------------------------ the auth pages */
.auth-page { min-height: calc(100vh - var(--il-header)); display: grid; place-items: start center; padding: 40px 16px; }
.auth-card { width: 100%; max-width: 460px; background: #fff; border: 1px solid var(--il-line); border-radius: 12px; padding: 32px; }
.auth-card h1 { margin: 0 0 6px; font-size: 24px; font-weight: 700; line-height: 32px; }
.auth-card > p { margin: 0 0 20px; color: var(--il-ink-2); font-size: 15px; line-height: 22px; }

/* =====================================================================================
   LEGACY RE-SKIN. Every public page still carries markup its own scripts write into — the
   brand button (.email-btn), the status badges, the Tailwind card classes, the section
   eyebrows, the filter pills — and each of those has to wear THIS language or a JS-rendered
   panel looks like a different site inside a card. Two ids on the body selector so these
   outrank every legacy sheet without !important on the properties that matter.
   ===================================================================================== */
html body.public-body { background: var(--il-ground) !important; background-image: none !important; }
html body.public-body [style*="Outfit"] { font-family: var(--il-font) !important; }
html body.public-body :is(h1, h2, h3, h4) { font-family: var(--il-font) !important; letter-spacing: 0; }
html body.public-body .site-page-frame { padding-top: 0; }
html body.public-body main#main { padding-top: 0; }
/* buttons. `.btn-navy` is deliberately NOT in these lists (or in the two below that
   mention `.btn-navy`'s siblings): it is one of five page-local classes
   (`.btn-navy`/`.btn-email`/`.btn-ghost`/`.wci-btn`/`.investor-news-subscribe`,
   public-ui.css ~10330) that ALREADY carry a complete, self-contained premium
   gradient-fill-and-glow system of their own -- catching it here would replace that
   richer treatment with this file's plainer one, which is a downgrade, not the fix. */
html body.public-body :is(.email-btn, .btn-primary, .btn-secondary, .btn-outline, .site-button-primary, .site-button-secondary, .site-footer-button, .idvBanner-cta) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 6px !important; padding: 10px 14px !important; font-family: var(--il-font) !important;
  font-size: 15px !important; font-weight: 500 !important; line-height: 20px !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none;
  box-shadow: none !important; border: 1px solid transparent !important;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .28s ease, transform .18s ease !important;
  cursor: pointer; background-image: none !important;
}
/* the same premium, colour-tinted glow the .ui-button system got above -- filled/solid
   brand buttons only. Outline stays flat: a bordered button lifted off the page with a
   glow under it reads as a mistake rather than the depth it is meant to add. */
html body.public-body :is(.email-btn--red, .email-btn--navy, .email-btn--gold, .email-btn--green, .btn-primary, .btn-secondary, .site-button-primary, .site-button-secondary, .site-footer-button, .idvBanner-cta):hover {
  transform: translateY(-1px) !important;
}
html body.public-body :is(.email-btn--red, .email-btn--navy, .email-btn--gold, .email-btn--green, .btn-primary, .btn-secondary, .site-button-primary, .site-button-secondary, .site-footer-button, .idvBanner-cta):active {
  transform: translateY(0) scale(.98) !important;
}
html body.public-body :is(.email-btn--outline, .btn-outline):hover { transform: none !important; box-shadow: none !important; }
html body.public-body :is(.email-btn, .btn-primary, .btn-secondary, .btn-outline)::before, html body.public-body :is(.email-btn, .btn-primary, .btn-secondary, .btn-outline)::after { display: none !important; content: none !important; }
html body.public-body .email-btn .email-btn-label { margin: 0 !important; flex: none !important; }
html body.public-body :is(.email-btn--red, .btn-primary, .site-button-primary, .site-profile-item-primary) { background: var(--il-navy) !important; color: #fff !important; border-color: var(--il-navy) !important; box-shadow: 0 8px 20px -9px rgba(var(--il-navy-rgb), .45) !important; }
html body.public-body :is(.email-btn--red, .btn-primary, .site-button-primary):hover { background: var(--il-navy-hover) !important; border-color: var(--il-navy-hover) !important; box-shadow: 0 12px 26px -8px rgba(var(--il-navy-rgb), .6) !important; }
html body.public-body :is(.email-btn--navy, .btn-secondary, .site-button-secondary, .site-footer-button) { background: var(--il-navy) !important; color: #fff !important; border-color: var(--il-navy) !important; box-shadow: 0 8px 20px -9px rgba(var(--il-navy-rgb), .45) !important; }
html body.public-body :is(.email-btn--navy, .btn-secondary, .site-button-secondary):hover { background: var(--il-navy-hover) !important; border-color: var(--il-navy-hover) !important; box-shadow: 0 12px 26px -8px rgba(var(--il-navy-rgb), .6) !important; }
html body.public-body .email-btn--gold { background: var(--il-gold) !important; color: #0b2a46 !important; border-color: var(--il-gold) !important; box-shadow: 0 8px 20px -9px rgba(var(--il-gold-rgb), .4) !important; }
html body.public-body .email-btn--gold:hover { background: #ffc933 !important; border-color: #ffc933 !important; box-shadow: 0 12px 26px -8px rgba(var(--il-gold-rgb), .55) !important; }
html body.public-body .email-btn--green { background: var(--il-green) !important; color: #fff !important; border-color: var(--il-green) !important; box-shadow: 0 8px 20px -9px rgba(var(--il-green-rgb), .4) !important; }
html body.public-body .email-btn--green:hover { box-shadow: 0 12px 26px -8px rgba(var(--il-green-rgb), .55) !important; }
html body.public-body :is(.email-btn--outline, .btn-outline) { background: #fff !important; color: var(--il-ink) !important; border-color: var(--il-line-3) !important; }
html body.public-body :is(.email-btn--outline, .btn-outline):hover { background: var(--il-wash) !important; border-color: #999 !important; }
html body.public-body .btn-outline-red { color: var(--il-crimson) !important; border-color: var(--il-crimson) !important; }
html body.public-body .btn-outline-red:hover { background: var(--il-navy-05) !important; }
html body.public-body .email-btn--sm { padding: 7px 10px !important; font-size: 14px !important; }
html body.public-body .email-btn--inline { width: auto; }
html body.public-body .email-btn:not(.email-btn--inline) { width: 100%; }
html body.public-body :is(.email-btn, .btn-primary, .btn-secondary, .btn-outline) :is(i, svg) { width: 18px; height: 18px; flex: none; }
/* cards: white, hairline, 12px, no shadow. The radius-utility list is Tailwind's own
   corner classes, which several BUTTONS also carry for their own rounding (.btn-primary
   is `rounded-2xl`) -- without the button exclusions this card rule's `box-shadow: none`
   outranked the premium-glow rules a few hundred lines up (6 class-equivalents here vs.
   2 there), silently flattening every brand button that happens to share a radius class
   with a card. */
html body.public-body :is(.rounded-2xl, .rounded-3xl, .rounded-\[28px\], .rounded-\[24px\], .rounded-\[26px\], .adm-card, .dashboard-card, .site-empty-state, .buyer-pref-card, .cash-buyers-form, .feature-card, .faq-item, .deal-card, .trust-card):not(.ui-modal):not(.public-mobile-modal-card):not(.ui-deal-card):not(.il-card):not(.email-btn):not(.btn-primary):not(.btn-secondary):not(.btn-outline):not(.btn-navy):not(.ui-button) {
  border-radius: 12px !important; box-shadow: none !important; background-image: none !important;
}
html body.public-body :is(.shadow-lg, .shadow-xl, .shadow-2xl, .shadow-md, .shadow) { box-shadow: none !important; }
html body.public-body :is(.bg-white, .adm-card, .dashboard-card):not(.site-header):not(.ui-modal):not(.ui-modal-top) { background-color: #fff; }
html body.public-body .adm-card, html body.public-body .dashboard-card, html body.public-body main .bg-white.rounded-2xl, html body.public-body main .bg-white.rounded-3xl { border: 1px solid var(--il-line) !important; }
html body.public-body .adm-accent { display: none !important; }
html body.public-body :is(.bg-primary, .bg-navy, .section-band-navy, .site-cta-band) { background: var(--il-navy) !important; background-image: none !important; border-radius: 0; }
html body.public-body :is(.bg-primary, .section-band-navy, .site-cta-band) :is(h1, h2, h3, p) { color: #fff; }
html body.public-body .text-primary { color: var(--il-navy) !important; }
html body.public-body .text-secondary { color: var(--il-crimson) !important; }
html body.public-body .text-gray-600, html body.public-body .text-slate-600, html body.public-body .text-gray-500, html body.public-body .text-slate-500 { color: var(--il-ink-2) !important; }
html body.public-body .text-gray-700, html body.public-body .text-slate-700 { color: var(--il-ink) !important; }
/* heroes on the pages not rebuilt: a white page head, not a navy band with orbs */
html body.public-body section.site-hero, html body.public-body .site-hero.hero-pattern, html body.public-body .site-hero.deals-hero {
  background: #fff !important; background-image: none !important; border-bottom: 1px solid var(--il-line); padding-top: 40px !important; padding-bottom: 32px !important;
}
html body.public-body section.site-hero :is(h1, h2) { color: var(--il-ink) !important; font-size: 32px !important; line-height: 40px !important; font-weight: 700 !important; }
html body.public-body section.site-hero p { color: var(--il-ink-2) !important; }
html body.public-body .hero-orb, html body.public-body .hero-orb-1, html body.public-body .hero-orb-2, html body.public-body .auth-page-rays, html body.public-body .hero-stats-seam { display: none !important; }
html body.public-body .site-inline-glass { background: transparent !important; backdrop-filter: none !important; box-shadow: none !important; }
/* eyebrows + pills */
html body.public-body .section-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase; color: var(--il-navy) !important; background: var(--il-navy-05) !important; border: 1px solid var(--il-navy-10) !important; border-radius: 999px !important; padding: 4px 10px !important; box-shadow: none !important; }
html body.public-body .filter-pill { border-radius: 30px !important; border: 1px solid var(--il-wash) !important; background: var(--il-wash-2) !important; color: var(--il-ink-2) !important; font-size: 14px !important; font-weight: 500 !important; padding: 6px 12px !important; box-shadow: none !important; }
html body.public-body .filter-pill.filter-active { background: var(--il-navy-05) !important; border-color: var(--il-navy) !important; color: var(--il-navy) !important; }
html body.public-body .section-underline::after { display: none !important; }
/* the status pills (deal status vocabulary shared with deals.html + index.html) */
html body.public-body :is(.status-badge, .deal-status-ribbon, #statusBadge) { border-radius: 4px !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: .02em !important; line-height: 12px !important; padding: 5px 8px !important; text-transform: uppercase; box-shadow: none !important; }
/* inputs */
html body.public-body main :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="password"], input[type="date"], select, textarea):not(.ui-input_input-container *):not([class*="ui-"]) {
  border: 1px solid var(--il-line-2) !important; border-radius: 6px !important; background: #fff !important; color: var(--il-ink) !important; font-family: var(--il-font) !important; font-size: 15px !important; box-shadow: none !important; padding: 10px 12px !important; min-height: 44px; transition: border .2s ease, box-shadow .2s ease;
}
html body.public-body main :is(input, select, textarea):not(.ui-input_input-container *):focus { border-color: var(--il-navy) !important; box-shadow: 0 0 0 2px rgba(19, 67, 107, .12) !important; outline: none !important; }
html body.public-body main label { font-family: var(--il-font); }
html body.public-body .search-wrap .search-input { padding-left: 36px !important; }
/* the section rail junctions and the old decorative rails */
html body.public-body :is(.dd-section-border-b, .deals-filter-seam, .stats-rail-wrap, .deals-filter-surface) { border: 0 !important; box-shadow: none !important; background: transparent !important; background-image: none !important; }
html body.public-body [data-home-section="trust-bar"] { border-top: calc(2px / var(--public-zoom, 1)) solid var(--il-line) !important; background: #fff !important; background-image: none !important; }
/* tables written by scripts (comps, records) */
html body.public-body table { border-collapse: collapse; width: 100%; font-size: 14px; }
html body.public-body th { color: var(--il-ink-2); font-weight: 500; text-align: left; font-size: 13px; }
/* tooltips + the deal explainer tips keep their own hover mechanics; only their skin moves */
html body.public-body :is(.deal-tip, .deal-status-tip, .deal-price-tip) { font-family: var(--il-font); }

/* =====================================================================================
   THE DEAL PAGE, OVER ITS LEGACY SHEET. deal-detail.css still paints what the page's
   scripts render (the comps table, the condition grid, the photo viewer, the modals) and it
   also carried rules for the OLD shells — the pricing card, the collage grid, the timeline
   slabs, the hero chips. Those shells are re-housed under the reference's classes; this
   block is the id-weight override that stops the old rules reaching them.
   ===================================================================================== */
html body.public-body #propertyContent #dealPriceBlock.pricing-sidebar-card { background: #fff !important; background-image: none !important; border: 1px solid var(--il-navy-15) !important; border-radius: 12px !important; padding: 24px !important; box-shadow: var(--il-prem-lift) !important; display: grid; row-gap: 24px; }
html body.public-body #propertyContent #dealPriceBlock::after { display: none !important; content: none !important; }
/* ⚠ ::before WAS switched off here too, to kill deal-detail.css's legacy 3px navy-to-crimson
   rail — which also killed the inlay declared on .priceBlock-wrapper::before, at
   (0,1,1) against this 2-ID !important rule. Found by asking the browser for the pseudo's
   computed style (content:none) rather than by reading the sheet. This rule owns the pseudo,
   so it now draws the inlay instead of the rail. ⚠ Navy, not HOPE_PREMIUM's gold — see the
   comment on .priceBlock-wrapper::before for why this one card diverges. */
html body.public-body #propertyContent #dealPriceBlock::before {
  display: block !important; content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important;
  height: 2px !important; border-radius: var(--il-radius) var(--il-radius) 0 0 !important;
  background: linear-gradient(90deg, rgba(19, 67, 107, 0) 0%, var(--il-navy-40) 18%, var(--il-navy) 50%, var(--il-navy-40) 82%, rgba(19, 67, 107, 0) 100%) !important;
}
html body.public-body #priceDisplay.priceBlock-cost { font-size: 24px !important; line-height: 32px !important; font-weight: 700 !important; color: var(--il-ink) !important; -webkit-text-fill-color: var(--il-ink) !important; background: none !important; text-shadow: none !important; letter-spacing: -0.015em !important; margin: 0 !important; padding: 0 !important; }
html body.public-body #dealHeroStats, html body.public-body #imageOverlay, html body.public-body #dealCollage .deal-collage-more { display: none !important; }
html body.public-body #propertyContent .pricing-quick-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin: 0 !important; }
html body.public-body #propertyContent .pricing-quick-btn { border: 1px solid var(--il-line-3) !important; background: #fff !important; color: var(--il-ink) !important; border-radius: 6px !important; padding: 7px 8px !important; font-size: 14px !important; font-weight: 500 !important; box-shadow: none !important; width: 100% !important; margin: 0 !important; justify-content: center; }
html body.public-body #propertyContent .pricing-quick-btn:hover { background: var(--il-wash) !important; }
html body.public-body #propertyContent .pricing-quick-btn::before, html body.public-body #propertyContent .pricing-quick-btn::after { display: none !important; content: none !important; }
html body.public-body #propertyContent .pricing-quick-btn .email-btn-label { color: inherit !important; }
html body.public-body #propertyContent .priceBlock-countdown { display: flex !important; }
html body.public-body #propertyContent .priceBlock-countdown.hidden { display: none !important; }
html body.public-body #propertyContent .zillow-zestimate { display: flex !important; justify-content: flex-end; gap: 6px; margin: 0; color: var(--il-ink-3); font-size: 12px; }
html body.public-body #propertyContent .zillow-zestimate.hidden { display: none !important; }
/* the gallery: the old collage grid must not lay these cells out */
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper { display: grid !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; border-radius: 12px !important; background: #fff !important; box-shadow: var(--il-prem-lift) !important; aspect-ratio: auto !important; height: auto !important; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper { grid-template: "main s1 s2 s2" 236px "main s3 map more" 236px / 2.75fr 1fr 1.36fr 1.36fr !important; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper[data-cells="3"] { grid-template: "main s1 s2 s2" 236px "main map map more" 236px / 2.75fr 1fr 1.36fr 1.36fr !important; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper[data-cells="2"] { grid-template: "main s1 s1 s1" 236px "main map map more" 236px / 2.75fr 1fr 1.36fr 1.36fr !important; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper[data-cells="1"] { grid-template: "main main map more" 236px "main main map more" 236px / 1.4fr 1.35fr 1.36fr 1.36fr !important; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper.is-nomap { grid-template: "main s1 s2 s2" 236px "main s3 more more" 236px / 2.75fr 1fr 1.36fr 1.36fr !important; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper.is-nomap[data-cells="1"] { grid-template: "main main more more" 236px "main main more more" 236px / 1fr 1fr 1fr 1fr !important; }
/* Each cell rounds on its OWN corners now, not just the wrapper's outer edge --
   the wrapper's `overflow: hidden` clips every child to whatever radius it
   carries, so giving the cell its own radius (rather than the wrapper's alone)
   is what makes the gap between cells read as padding around rounded tiles
   instead of a flat grid with square internal seams. */
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper > * { aspect-ratio: auto !important; border-radius: 10px !important; height: 100% !important; min-height: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background-color: var(--il-wash) !important; overflow: hidden !important; position: relative !important; display: flex !important; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper > *[hidden] { display: none !important; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper > * > img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0 !important; position: absolute !important; inset: 0 !important; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper .dealGallery-statusChip { position: absolute !important; left: 12px !important; top: 12px !important; right: auto !important; z-index: 2; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper .dealGallery-viewChip { position: absolute !important; right: 12px !important; bottom: 12px !important; left: auto !important; top: auto !important; z-index: 2; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper .dealGallery-more { background-color: var(--il-ink) !important; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper .dealGallery-more::before { content: "" !important; display: block !important; }
@media (max-width: 960px) {
  html body.public-body #propertyContent #dealCollage.dealGallery-wrapper, html body.public-body #propertyContent #dealCollage.dealGallery-wrapper[data-cells], html body.public-body #propertyContent #dealCollage.dealGallery-wrapper.is-nomap { grid-template: "main main" 240px "s1 s2" 120px "map more" 120px / 1fr 1fr !important; }
  html body.public-body #propertyContent #dealCollage.dealGallery-wrapper .dealGallery-side-3 { display: none !important; }
  html body.public-body #propertyContent #dealCollage.dealGallery-wrapper[data-cells="1"] { grid-template: "main main" 240px "map more" 120px / 1fr 1fr !important; }
  html body.public-body #propertyContent #dealCollage.dealGallery-wrapper[data-cells="2"] { grid-template: "main main" 240px "s1 map" 120px "more more" 96px / 1fr 1fr !important; }
}
html body.public-body #galleryThumbs { display: flex !important; gap: 6px; padding: 8px 0 0 !important; margin: 0 !important; overflow-x: auto; }
html body.public-body #galleryThumbs:empty { display: none !important; }
html body.public-body #galleryThumbs img, html body.public-body #galleryThumbs button { border-radius: 6px !important; }
/* the address row: the old hero rules must not size the h1 */
html body.public-body .dealRow-address .dealRow-h1 { font-size: 20px !important; line-height: 28px !important; font-weight: 600 !important; color: var(--il-ink) !important; margin: 0 !important; }
html body.public-body .dealRow-title { font-size: 14px !important; line-height: 20px !important; color: var(--il-ink-2) !important; margin: 4px 0 0 !important; padding-left: 30px; }
html body.public-body .dealRow-title [data-deal-address-block] { display: inline; }
html body.public-body #statusChip { display: inline-flex; align-items: center; gap: 6px; }
html body.public-body #statusChip #statusBadge { border-radius: 4px !important; font-size: 10px !important; font-weight: 600 !important; line-height: 12px !important; padding: 5px 8px !important; text-transform: uppercase; letter-spacing: .02em; }
/* the overview card: the old highlight rows keep their check icons and lose their tiles */
html body.public-body .overview-highlights li { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; font-size: 15px !important; line-height: 22px !important; color: var(--il-ink) !important; }
html body.public-body .overview-highlights li::before { display: none; }
html body.public-body .overview-highlights li :is(i, svg) { width: 18px !important; height: 18px !important; color: var(--il-green) !important; flex: none; margin-top: 2px; }
html body.public-body .overview-description, html body.public-body .overview-investor-copy { color: var(--il-ink) !important; font-size: 16px !important; line-height: 26px !important; white-space: pre-line; }
html body.public-body .overview-investor-copy:empty, html body.public-body .overview-description:empty { display: none; }
html body.public-body .overview-topIcon { width: 28px !important; height: 28px !important; color: var(--il-navy) !important; }
html body.public-body .overview-topValue { font-size: 18px !important; line-height: 24px !important; font-weight: 600 !important; color: var(--il-ink) !important; margin: 0 !important; }
/* the section cards the scripts fill: one title voice */
html body.public-body #propertyContent .il-section-card > h2, html body.public-body #propertyContent .il-section-card > h3, html body.public-body #propertyContent .il-section-card > div > h2, html body.public-body #propertyContent .il-section-card > div > h3, html body.public-body #propertyContent .il-section-card .il-card-title { font-size: 20px !important; line-height: 28px !important; font-weight: 600 !important; color: var(--il-ink) !important; margin: 0 0 16px !important; display: flex; align-items: center; gap: 8px; }
html body.public-body #propertyContent .il-section-card :is(h2, h3) :is(i, svg) { width: 20px; height: 20px; color: var(--il-navy); }
html body.public-body #propertyContent .il-section-card { background: #fff !important; border: 1px solid var(--il-line) !important; border-radius: 12px !important; padding: 24px !important; box-shadow: none !important; margin: 0 !important; }
html body.public-body #propertyContent .il-section-card.hidden { display: none !important; }
html body.public-body #propertyContent .valueBand-card { display: block !important; }
html body.public-body #propertyContent .valueBand-card.hidden { display: none !important; }
/* the timeline: flat rows on a hairline, the old gold/red/navy slabs retired */
/* ---------------------------------------------------------------- the deal timeline
   A vertical PATH rather than a stack of ruled rows: one rail down the markers, a
   filled dot for a stage that has happened, a ringed dot for the one that is next,
   and a hollow dot for everything still ahead.

   ⚠️ LIGHT GREY IS THE DEFAULT AND COLOUR IS THE EXCEPTION. Four saturated tints
   stacked in one card (gold walkthrough, crimson deadline, navy close) made every
   stage look equally loud, which is the same as none of them being loud. Exactly ONE
   stage is coloured at a time -- the one that is next -- so the eye lands on the thing
   that has not happened yet.

   ⚠️ The connector is drawn DOWNWARD from each marker and suppressed on the last
   VISIBLE row. ':last-of-type' cannot be used: a stage with no date carries '.hidden',
   and the last element is very often one of those, which would leave the rail running
   past the final dot into empty space. */
html body.public-body #datesSection .deal-timeline { position: relative; display: grid; row-gap: 0; }
html body.public-body #datesSection .deal-timeline-row { background: #fff !important; background-image: none !important; color: var(--il-ink) !important; border: 0 !important; border-radius: var(--il-radius-xs) !important; padding: 10px 0 !important; margin: 0 !important; box-shadow: none !important; display: grid !important; grid-template-columns: 28px 1fr max-content; column-gap: 14px; align-items: start; text-align: left !important; width: 100%; justify-content: start; transform: none !important; position: relative; }
html body.public-body #datesSection .deal-timeline-row::before { display: none !important; content: none !important; }
/* the rail segment between this marker and the next visible one */
html body.public-body #datesSection .deal-timeline-row::after { content: '' !important; display: block !important; position: absolute; left: 13px; top: 36px; bottom: -8px; width: 2px; background: var(--il-line-2) !important; border-radius: 1px; }
html body.public-body #datesSection .deal-timeline-row:not(:has(~ .deal-timeline-row:not(.hidden)))::after { display: none !important; }
/* The rows still carry .email-btn (deal-detail.css keys its .hidden rule on that
   class, and dropping it would leave an undated stage rendering as an empty row).
   What comes with it is a button FACE: body.public-body #propertyContent
   .email-btn--outline:not(.email-btn--on-dark) paints an inset 1px rim at (1,3,1)
   with !important, which outranks the row rule above at (1,2,2) -- measured, the
   Listed stage drew a rounded box around itself while the three below it did not.
   Taken back at (2,2,3) on exactly the properties that rule sets. */
html body.public-body #propertyContent #datesSection .deal-timeline-row { box-shadow: none !important; border: 0 !important; background-image: none !important; font-weight: 500 !important; }
html body.public-body #propertyContent #datesSection .deal-timeline-row::before { display: none !important; content: none !important; }
/* ...and the same arithmetic the other way: this file sets display:grid !important at
   (1,2,2), which beats deal-detail.css .email-btn.hidden at (0,2,0) -- so a stage with
   no date would have rendered as a row reading "Walkthrough -". */
html body.public-body #propertyContent #datesSection .deal-timeline-row.hidden { display: none !important; }
/* the marker: a 28px disc on the rail, the icon inside it */
html body.public-body #datesSection .deal-timeline-row > :is(i, svg), html body.public-body #datesSection .deal-timeline-row .deal-timeline-icon { width: 28px !important; height: 28px !important; padding: 6px !important; border-radius: 50% !important; background: var(--il-wash) !important; border: 1px solid var(--il-line-2) !important; color: var(--il-ink-2) !important; box-sizing: border-box; box-shadow: 0 0 0 3px #fff !important; position: relative; z-index: 1; }
html body.public-body #datesSection .deal-timeline-body { min-width: 0; padding-top: 3px; }
html body.public-body #datesSection .deal-timeline-label { font-size: 11px !important; line-height: 14px !important; color: var(--il-ink-2) !important; opacity: 1 !important; text-transform: uppercase; letter-spacing: .08em; font-weight: 700 !important; margin: 0 !important; }
html body.public-body #datesSection .deal-timeline-value { font-size: 15px !important; line-height: 20px !important; color: var(--il-ink) !important; font-weight: 600 !important; margin: 2px 0 0 !important; }
html body.public-body #datesSection .deal-timeline-add { font-size: 12px !important; color: var(--il-ink-3) !important; background: none !important; border: 0 !important; padding: 4px 0 0 !important; }
html body.public-body #datesSection button.deal-timeline-row:hover .deal-timeline-add { color: var(--il-navy) !important; }
html body.public-body #datesSection button.deal-timeline-row:hover .deal-timeline-value { color: var(--il-navy) !important; }
/* DONE -- it happened. A solid grey dot, and the words step back so the stages still
   ahead are what the card is about. */
html body.public-body #datesSection .deal-timeline-row.is-done > :is(i, svg) { background: var(--il-line-3) !important; border-color: var(--il-line-3) !important; color: var(--il-white) !important; }
html body.public-body #datesSection .deal-timeline-row.is-done .deal-timeline-value { color: var(--il-ink-2) !important; font-weight: 500 !important; }
html body.public-body #datesSection .deal-timeline-row.is-done::after { background: var(--il-line-3) !important; }
/* NEXT -- the only coloured thing in the card. */
html body.public-body #datesSection .deal-timeline-row.is-next > :is(i, svg) { background: var(--il-navy-05) !important; border-color: var(--il-navy-15) !important; color: var(--il-navy) !important; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--il-navy-10) !important; }
html body.public-body #datesSection .deal-timeline-row.is-next .deal-timeline-label { color: var(--il-navy) !important; }
/* The deadline is the one stage whose lateness costs money, so it keeps a crimson
   value when it is the stage in play -- the tint stays off the marker, which is what
   kept the card from reading as an alarm. */
html body.public-body #datesSection #deadlineRow.is-next .deal-timeline-value { color: var(--il-crimson) !important; }
html body.public-body #datesSection #deadlineRow.is-next > :is(i, svg) { background: var(--il-crimson-05) !important; border-color: var(--il-crimson-15) !important; color: var(--il-crimson) !important; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--il-crimson-10) !important; }
html body.public-body #datesSection #deadlineRow.is-next .deal-timeline-label { color: var(--il-crimson) !important; }
html body.public-body #datesSection .deal-timeline-row.is-next .deal-timeline-label::after { background: var(--il-navy-05) !important; border: 1px solid var(--il-navy-15) !important; color: var(--il-navy) !important; font-size: 9px !important; letter-spacing: .1em; padding: 1px 6px !important; }
html body.public-body #datesSection #deadlineRow.is-next .deal-timeline-label::after { background: var(--il-crimson-05) !important; border-color: var(--il-crimson-15) !important; color: var(--il-crimson) !important; }
/* closing details: tiles become rows */
html body.public-body #closingDetailsSection > div > div { background: #fff !important; border: 0 !important; border-top: 1px solid var(--il-line) !important; border-radius: 0 !important; padding: 12px 0 !important; box-shadow: none !important; }
html body.public-body #closingDetailsSection > div > div:first-child { border-top: 0 !important; padding-top: 0 !important; }
/* the contact card's old line tiles */
html body.public-body #dealContactCard .contactCard-line { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--il-ink) !important; }
html body.public-body #dealContactCard .contactCard-line + .contactCard-line { border-top: 1px solid var(--il-line) !important; }
/* the FAQ: the old details cards flatten into one list */
html body.public-body .dealFaq-card details { background: none !important; border: 0 !important; border-top: 1px solid var(--il-line) !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; margin: 0 !important; }
html body.public-body .dealFaq-card details:first-of-type { border-top: 0 !important; }
html body.public-body .dealFaq-card summary { padding: 14px 0 !important; font-size: 16px !important; font-weight: 600 !important; color: var(--il-ink) !important; list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
html body.public-body .dealFaq-card summary h3 { font: inherit !important; margin: 0 !important; color: inherit !important; }
html body.public-body .dealFaq-card summary::-webkit-details-marker { display: none; }
html body.public-body .dealFaq-card details > :not(summary) { padding: 0 0 16px !important; font-size: 15px !important; line-height: 24px !important; color: var(--il-ink-2) !important; }
html body.public-body .dealFaq-card > div:first-child p { display: none; }
html body.public-body .dealFaq-card > div:first-child h2 { font-size: 20px !important; line-height: 28px !important; margin: 0 0 8px !important; }
/* the deals-nearby section head */
html body.public-body #relatedDealsSection > div:first-child h2 { font-size: 24px !important; line-height: 32px !important; font-weight: 700 !important; margin: 0 !important; color: var(--il-ink) !important; }
html body.public-body #relatedDealsSection > div:first-child p { color: var(--il-ink-2) !important; font-size: 14px !important; margin: 4px 0 0 !important; }
html body.public-body #relatedDealsSection > div:first-child > div > p:first-child { display: none; }
html body.public-body #relatedDealsSection > div:first-child > a { align-self: center; }
/* the cash-buyers card in the rail */
html body.public-body #dealCashBuyersCard { background: var(--il-navy-05) !important; }
html body.public-body #dealCashBuyersCard :is(h3, h2) { font-size: 18px !important; line-height: 24px !important; }
/* the footer: white on a hairline, whatever public-ui.css says about .site-footer */
html body.public-body footer.footer-wrapper.site-footer { background: #fff !important; background-image: none !important; border-top: 1px solid var(--il-wash) !important; padding: 44px 16px !important; color: var(--il-ink-2) !important; box-shadow: none !important; }
html body.public-body footer.footer-wrapper.site-footer::before, html body.public-body footer.footer-wrapper.site-footer::after { display: none !important; content: none !important; }
html body.public-body footer.footer-wrapper.site-footer > * { position: static; }
html body.public-body footer.footer-wrapper.site-footer a { color: var(--il-ink-2) !important; text-decoration: none; }
html body.public-body footer.footer-wrapper.site-footer a:hover { color: var(--il-navy) !important; }
html body.public-body footer.footer-wrapper.site-footer .footer-middleTitle, html body.public-body footer.footer-wrapper.site-footer .footer-rightTitle { color: var(--il-ink) !important; }
html body.public-body footer.footer-wrapper.site-footer .footer-store a { color: var(--il-ink) !important; }
/* the header: nothing the legacy nav rules say about .site-nav-link applies here */
html body.public-body .site-header .site-nav-link { border-bottom: 0 !important; padding: 7px 8px !important; }
html body.public-body .site-header .site-nav-link::after { display: none !important; }
/* the trust bar below the page */
html body.public-body [data-home-section="trust-bar"] { padding: 24px 0 !important; }
html body.public-body [data-home-section="trust-bar"] > div { max-width: var(--il-content); }
html body.public-body [data-home-section="trust-bar"] > div > div { background: none !important; border: 0 !important; box-shadow: none !important; }
/* the address row's main column is a block, not the flex row its siblings are */
.dealRow-row > .dealRow-main { display: block; flex: 1; min-width: 0; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper > .dealGallery-main > #mainImage { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover !important; border-radius: 0 !important; aspect-ratio: auto !important; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper > button[data-collage-extra] { display: flex !important; opacity: 1 !important; visibility: visible !important; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper > button[data-collage-extra]:not(.dealGallery-side-1):not(.dealGallery-side-2):not(.dealGallery-side-3) { display: none !important; }
html body.public-body #galleryThumbs { display: none !important; }
@media (min-width: 1101px) { html body.public-body #mobileOfferBar { display: none !important; } }
html body.public-body header.site-header { height: var(--il-header) !important; min-height: var(--il-header); padding: 12px 24px !important; box-sizing: border-box; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper > div:not(.dealGallery-mapview) { display: none !important; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper { max-height: none !important; grid-auto-rows: 236px; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper > .dealGallery-main { grid-area: main !important; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper > .dealGallery-side-1 { grid-area: s1 !important; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper > .dealGallery-side-2 { grid-area: s2 !important; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper > .dealGallery-side-3 { grid-area: s3 !important; display: flex !important; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper > .dealGallery-mapview { grid-area: map !important; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper > .dealGallery-more { grid-area: more !important; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper[data-cells="3"] > .dealGallery-side-3, html body.public-body #propertyContent #dealCollage.dealGallery-wrapper[data-cells="2"] > .dealGallery-side-3, html body.public-body #propertyContent #dealCollage.dealGallery-wrapper[data-cells="2"] > .dealGallery-side-2, html body.public-body #propertyContent #dealCollage.dealGallery-wrapper[data-cells="1"] > button[data-collage-extra] { display: none !important; }
@media (max-width: 960px) { html body.public-body #propertyContent #dealCollage.dealGallery-wrapper > .dealGallery-side-3 { display: none !important; } }
/* every button inside the deal page is the kit button; the legacy sheet's onclick-keyed paint is retired */
html body.public-body #propertyContent .ui-button, html body.public-body #propertyContent button[onclick].ui-button { box-shadow: none !important; background-image: none !important; text-shadow: none !important; letter-spacing: 0 !important; text-transform: none !important; transform: none !important; margin: 0 !important; font-family: var(--il-font) !important; }
html body.public-body #propertyContent .ui-button::before, html body.public-body #propertyContent .ui-button::after { display: none !important; content: none !important; }
html body.public-body #propertyContent :is(#dealPriceBlock, #dealContactCard, #dealFeedbackCard) .ui-button { width: 100% !important; }
html body.public-body #propertyContent .ui-button.size-lg { padding: 11px 12px !important; font-size: 16px !important; }
html body.public-body #propertyContent .ui-button.size-md { padding: 10px 11px !important; font-size: 15px !important; }
html body.public-body #propertyContent .ui-button.color-primary.type-filled { background: var(--il-navy) !important; color: #fff !important; border-color: var(--il-navy) !important; }
html body.public-body #propertyContent .ui-button.color-gold.type-filled { background: var(--il-gold) !important; color: #0b2a46 !important; border-color: var(--il-gold) !important; }
html body.public-body #propertyContent .ui-button.color-navy.type-filled { background: var(--il-navy) !important; color: #fff !important; border-color: var(--il-navy) !important; }
html body.public-body #propertyContent .ui-button.color-black.type-filled { background: var(--il-ink) !important; color: #fff !important; border-color: var(--il-ink) !important; }
/* the premium glow, restated at this scope's own specificity: the box-shadow/transform
   reset two rules up (line 1121) is `!important` on `#propertyContent .ui-button` as a
   whole -- a bare 2-class selector -- so a 3-class glow rule declared at the sheet's root
   loses here even though it reads correctly everywhere else on the site. Every CTA on the
   deal page (Make offer, View Full Address, Send inquiry, View Flyer, All photos) is one
   of these four, so this is the button the operator meant "the deal page where we can use
   this most". */
html body.public-body #propertyContent .ui-button.color-primary.type-filled,
html body.public-body #propertyContent .ui-button.color-navy.type-filled {
  box-shadow: 0 8px 20px -9px rgba(var(--il-navy-rgb), .45) !important;
}
html body.public-body #propertyContent .ui-button.color-primary.type-filled:hover,
html body.public-body #propertyContent .ui-button.color-navy.type-filled:hover {
  box-shadow: 0 12px 26px -8px rgba(var(--il-navy-rgb), .6) !important; transform: translateY(-1px) !important;
}
html body.public-body #propertyContent .ui-button.color-primary.type-filled:active,
html body.public-body #propertyContent .ui-button.color-navy.type-filled:active {
  transform: translateY(0) scale(.98) !important;
}
html body.public-body #propertyContent .ui-button.color-gold.type-filled { box-shadow: 0 8px 20px -9px rgba(var(--il-gold-rgb), .4) !important; }
html body.public-body #propertyContent .ui-button.color-gold.type-filled:hover { box-shadow: 0 12px 26px -8px rgba(var(--il-gold-rgb), .55) !important; transform: translateY(-1px) !important; }
html body.public-body #propertyContent .ui-button.color-gold.type-filled:active { transform: translateY(0) scale(.98) !important; }
html body.public-body #propertyContent .ui-button.color-black.type-filled { box-shadow: 0 8px 20px -9px rgba(var(--il-ink-rgb), .35) !important; }
html body.public-body #propertyContent .ui-button.color-black.type-filled:hover { box-shadow: 0 12px 26px -8px rgba(var(--il-ink-rgb), .5) !important; transform: translateY(-1px) !important; }
html body.public-body #propertyContent .ui-button.color-black.type-filled:active { transform: translateY(0) scale(.98) !important; }
/* The last brand-button holdouts: markup the page's own scripts still render as
   `.email-btn` rather than `.ui-button` (Join Cash Buyers, the investor-summary
   CTAs, the mobile offer bar, the contact/member-prompt modals). deal-detail.css
   samples brand-assets/brand-buttons.png onto these -- a gradient face, an inset
   rim, a glowing 4x20 accent bar -- which is the exact loud "brand button" look
   the kit buttons above were retired away from. Flattened the same way, so a
   script-rendered CTA reads as the same kit button as everything beside it.
   `:not(.deal-timeline-row)` matters: the timeline rows carry `.email-btn--gold`
   /`--red`/`--navy` too (for their icon-circle tint only) and already render as
   flat white rows one rule up -- without the guard this block would be declared
   AFTER that rule at equal specificity and silently repaint the timeline. */
html body.public-body #propertyContent .email-btn:not(.deal-timeline-row) {
  background-image: none !important; box-shadow: none !important; border-radius: 6px !important;
  border: 1px solid transparent !important; font-weight: 500 !important; letter-spacing: 0 !important;
}
html body.public-body #propertyContent .email-btn:not(.deal-timeline-row)::before,
html body.public-body #propertyContent .email-btn:not(.deal-timeline-row)::after { display: none !important; content: none !important; }
/* the same premium glow the .ui-button system got above, for the last script-rendered
   solid buttons on the deal page (investor-summary CTAs, the mobile offer bar). the
   base rule above already zeroes box-shadow, so filled colours restate it themselves;
   the :hover reset stays for the outline face only -- a bordered button should not lift. */
html body.public-body #propertyContent .email-btn--outline:not(.deal-timeline-row):hover { transform: none !important; box-shadow: none !important; filter: none !important; }
html body.public-body #propertyContent .email-btn--red:not(.deal-timeline-row) { background: var(--il-navy) !important; color: #fff !important; border-color: var(--il-navy) !important; box-shadow: 0 8px 20px -9px rgba(var(--il-navy-rgb), .45) !important; }
html body.public-body #propertyContent .email-btn--red:not(.deal-timeline-row):hover { background: var(--il-navy-hover) !important; box-shadow: 0 12px 26px -8px rgba(var(--il-navy-rgb), .6) !important; transform: translateY(-1px) !important; }
html body.public-body #propertyContent .email-btn--red:not(.deal-timeline-row):active { transform: translateY(0) scale(.98) !important; }
html body.public-body #propertyContent .email-btn--navy:not(.deal-timeline-row) { background: var(--il-navy) !important; color: #fff !important; border-color: var(--il-navy) !important; box-shadow: 0 8px 20px -9px rgba(var(--il-navy-rgb), .45) !important; }
html body.public-body #propertyContent .email-btn--navy:not(.deal-timeline-row):hover { background: var(--il-navy-hover) !important; box-shadow: 0 12px 26px -8px rgba(var(--il-navy-rgb), .6) !important; transform: translateY(-1px) !important; }
html body.public-body #propertyContent .email-btn--navy:not(.deal-timeline-row):active { transform: translateY(0) scale(.98) !important; }
html body.public-body #propertyContent .email-btn--gold:not(.deal-timeline-row) { background: var(--il-gold) !important; color: #0b2a46 !important; border-color: var(--il-gold) !important; box-shadow: 0 8px 20px -9px rgba(var(--il-gold-rgb), .4) !important; }
html body.public-body #propertyContent .email-btn--gold:not(.deal-timeline-row):hover { background: #ffc933 !important; box-shadow: 0 12px 26px -8px rgba(var(--il-gold-rgb), .55) !important; transform: translateY(-1px) !important; }
html body.public-body #propertyContent .email-btn--gold:not(.deal-timeline-row):active { transform: translateY(0) scale(.98) !important; }
html body.public-body #propertyContent .email-btn--gold:not(.deal-timeline-row) :is(i, svg) { color: #0b2a46 !important; }
html body.public-body #propertyContent .email-btn--green:not(.deal-timeline-row) { background: var(--il-green) !important; color: #fff !important; border-color: var(--il-green) !important; box-shadow: 0 8px 20px -9px rgba(var(--il-green-rgb), .4) !important; }
html body.public-body #propertyContent .email-btn--green:not(.deal-timeline-row):hover { box-shadow: 0 12px 26px -8px rgba(var(--il-green-rgb), .55) !important; transform: translateY(-1px) !important; }
html body.public-body #propertyContent .email-btn--green:not(.deal-timeline-row):active { transform: translateY(0) scale(.98) !important; }
html body.public-body #propertyContent .email-btn--outline:not(.deal-timeline-row) { background: #fff !important; color: var(--il-ink) !important; border-color: var(--il-line-3) !important; }
html body.public-body #propertyContent .email-btn--outline:not(.deal-timeline-row):hover { background: var(--il-wash) !important; }
html body.public-body #propertyContent .email-btn--outline:not(.deal-timeline-row) :is(i, svg) { color: var(--il-ink) !important; }
/* View Flyer / View All Photos / View on Zillow are three ways to look at the
   SAME thing (more pictures of this house) and used to render as three
   different button styles -- Flyer solid navy, Photos a leftover
   `#viewAllMediaBtn` id-rule at a different radius than its two siblings,
   Zillow the plain kit outline. One shape, one surface, for all three. */
html body.public-body #propertyContent :is(#viewFlyerBtn, #viewAllMediaBtn, #viewOnZillowBtn) {
  background: #fff !important; background-image: none !important; color: var(--il-ink) !important;
  border: 1px solid var(--il-line-3) !important; border-radius: 6px !important; box-shadow: none !important;
}
html body.public-body #propertyContent :is(#viewFlyerBtn, #viewAllMediaBtn, #viewOnZillowBtn):hover { background: var(--il-wash) !important; }
html body.public-body #propertyContent #viewFlyerBtn :is(i, svg):not(.zillow-mark) { color: var(--il-ink) !important; }

/* `#dealCashBuyersCard a[href^="/join"]` (Join Our Cash Buyers List) carries a
   2-ID rule in deal-detail.css (rules 11-15 of its "premium pass") that
   out-specifies the generic `.email-btn--red` reset above -- so it is named
   here directly, at matching specificity, whichever class the markup happens
   to render (`.email-btn` today; `.ui-button` is the same fix if it is ever
   migrated onto the kit instead). */
html body.public-body #propertyContent #dealCashBuyersCard a[href^="/join"].email-btn,
html body.public-body #propertyContent #dealCashBuyersCard a[href^="/join"] {
  background: var(--il-navy) !important; background-image: none !important; box-shadow: none !important;
  border: 1px solid var(--il-navy) !important; border-radius: 6px !important; color: #fff !important;
}
html body.public-body #propertyContent #dealCashBuyersCard a[href^="/join"].email-btn:hover,
html body.public-body #propertyContent #dealCashBuyersCard a[href^="/join"]:hover { background: var(--il-navy-hover) !important; }
html body.public-body #propertyContent #dealCashBuyersCard a[href^="/join"].email-btn::before,
html body.public-body #propertyContent #dealCashBuyersCard a[href^="/join"].email-btn::after,
html body.public-body #propertyContent #dealCashBuyersCard a[href^="/join"]::before,
html body.public-body #propertyContent #dealCashBuyersCard a[href^="/join"]::after { display: none !important; content: none !important; }
/* Attend walkthrough is the SECOND action on the price card, not a second
   loud one -- a soft gold wash rather than a solid gold fill, so the one bold
   colour on the card is the red Make Offer button. Forced on `.pricing-
   secondary-cta` itself (rather than relying on a `type-tinted` class in the
   markup) so it holds regardless of which `type-*` variant is rendered.
   Two IDs (#propertyContent + #dealPriceBlock, the button's own card) rather
   than piling on classes to out-count `.ui-button.color-gold.type-filled`
   (four classes at 1-id depth) -- an id-count fight is a class-count fight
   this file keeps losing by one, and CSS compares ids before it ever counts
   classes, so two of them settles it regardless of how the matrix rule reads. */
/* 2026-09-20: this was `--il-gold-05` on `--il-gold-ink`, i.e. #fff8e1 -- a PASTEL
   face on the second-biggest control on the page, and a different hue from the
   primary directly above it, so the pair read as two unrelated offers rather than
   as a primary and its alternate. A second action is the SAME colour as the first,
   outlined. Gold survives where it is an ACCENT (the timeline's walkthrough row
   icon, the countdown strip) rather than a 100%-wide button face. */
html body.public-body #propertyContent #dealPriceBlock .pricing-secondary-cta {
  background: #fff !important; background-image: none !important; box-shadow: none !important;
  border: 1px solid var(--il-navy) !important; color: var(--il-navy) !important;
}
html body.public-body #propertyContent #dealPriceBlock .pricing-secondary-cta:hover { background: var(--il-navy-05) !important; border-color: var(--il-navy-hover) !important; }
html body.public-body #propertyContent #dealPriceBlock .pricing-secondary-cta :is(i, svg) { color: var(--il-navy) !important; }
html body.public-body #propertyContent .ui-button.type-outline { background: #fff !important; border: 1px solid var(--il-line-3) !important; color: var(--il-ink) !important; }
html body.public-body #highlightsSection, html body.public-body #highlightsList { background: none !important; background-image: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
/* the profile menu public-nav.js renders, in the reference's menu language */
.site-profile-menu { position: relative; border-radius: 6px; margin-left: 4px; }
.site-profile-menu:hover { background: var(--il-wash); }
.site-profile-trigger { display: flex; align-items: center; gap: 8px; padding: 3px 6px 3px 3px; text-decoration: none; color: var(--il-ink-2); font-size: 14px; font-weight: 500; line-height: 20px; border-radius: 6px; }
.site-profile-trigger-name { white-space: nowrap; }
.site-profile-trigger-chevron { width: 16px; height: 16px; transition: transform .2s ease; }
.site-profile-menu.is-open .site-profile-trigger-chevron { transform: rotate(180deg); }
.site-profile-avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--il-navy-10); color: var(--il-navy); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex: none; position: relative; }
.site-profile-avatar img, .site-profile-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-profile-avatar-gloss { display: none; }
.site-profile-avatar svg, .site-profile-icon { width: 18px; height: 18px; }
.site-profile-trigger-badge { display: inline-flex; }
.site-profile-panel { position: absolute; right: 0; top: 100%; margin-top: 6px; min-width: 248px; background: #fff; border: 1px solid var(--il-line); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, .29); padding: 6px 0; opacity: 0; transform: scaleY(0); transform-origin: top left; transition: all .2s ease; pointer-events: none; z-index: 100; display: flex; flex-direction: column; }
.site-profile-menu.is-open .site-profile-panel { opacity: 1; transform: scaleY(1); pointer-events: auto; }
.site-profile-panel-head { padding: 8px 12px 10px; border-bottom: 1px solid var(--il-line); margin-bottom: 4px; }
.site-profile-panel-title { color: var(--il-ink); font-size: 13px; font-weight: 500; line-height: 18px; }
.site-profile-panel-subtitle { color: var(--il-ink-2); font-size: 12px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-profile-item { display: flex; align-items: center; padding: 8px 12px; font-size: 14px; line-height: 20px; color: var(--il-ink); text-decoration: none; background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer; font-family: var(--il-font); }
.site-profile-item:hover { background: var(--il-wash); }
.site-profile-item-primary { color: var(--il-crimson); font-weight: 600; }
.site-profile-item-danger { color: var(--il-ink-2); border-top: 1px solid var(--il-line); margin-top: 4px; }
.site-profile-menu-mobile .site-profile-panel { position: static; opacity: 1; transform: none; pointer-events: auto; box-shadow: none; border: 0; padding: 0; }
.site-profile-menu-mobile .site-profile-trigger { padding: 10px 11px; }
/* the buyer bell public-bell.js mounts into the same slot */
.ncdd-bell { position: relative; }
.ncdd-bell-trigger { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--il-ink); cursor: pointer; }
.ncdd-bell-trigger:hover { background: var(--il-wash); }
.ncdd-bell-trigger svg { width: 22px; height: 22px; }
.ncdd-bell-count { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: var(--il-bright); color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; border: 1px solid #fff; }
.ncdd-bell-panel { position: absolute; right: 0; top: 100%; margin-top: 8px; width: 340px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid var(--il-line); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, .29); z-index: 100; overflow: hidden; }
.ncdd-bell-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--il-line); font-size: 14px; }
.ncdd-bell-head a { color: var(--il-navy); font-size: 13px; text-decoration: none; }
.ncdd-bell-empty { padding: 20px 14px; color: var(--il-ink-2); font-size: 13px; line-height: 18px; text-align: center; }
.ncdd-bell-item { border-bottom: 1px solid var(--il-line); }
.ncdd-bell-hit { display: grid; grid-template-columns: max-content 1fr; gap: 10px; padding: 10px 14px; text-decoration: none; color: var(--il-ink); }
.ncdd-bell-item[data-unread="1"] .ncdd-bell-hit { background: var(--il-navy-05); }
.ncdd-bell-title { display: block; font-size: 14px; font-weight: 600; line-height: 18px; }
.ncdd-bell-sub { display: block; font-size: 13px; color: var(--il-ink-2); line-height: 18px; }
.ncdd-bell-meta { display: block; font-size: 12px; color: var(--il-ink-3); line-height: 16px; margin-top: 2px; }
.ncdd-bell-thumb { width: 44px; height: 44px; border-radius: 6px; background-size: cover; background-position: 50%; }
.ncdd-bell-actions { display: flex; gap: 8px; padding: 0 14px 10px; }
.ncdd-bell-act { display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; line-height: 1; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--il-line); background: #f7f9fb; color: var(--il-navy); text-decoration: none; }
.ncdd-bell-act--primary { background: #f7f9fb; border-color: var(--il-line); color: var(--il-navy); }
/* the header's action slot: the CTA + the menu the shared script writes, in one row */
.header-user-nav-bar_actions { display: flex; align-items: center; gap: 12px; }
html body.public-body .header-user-nav-bar_actions > a.btn-primary, html body.public-body .header-user-nav-bar_actions > a.btn-secondary { padding: 7px 8px !important; font-size: 14px !important; border-radius: 6px !important; }
html body.public-body .dealFaq-card details::before, html body.public-body .dealFaq-card details::after, html body.public-body .dealFaq-card summary::before, html body.public-body .dealFaq-card summary h3::after, html body.public-body .dealFaq-card summary h3::before { display: none !important; content: none !important; }
html body.public-body .dealFaq-card details { padding: 0 4px !important; border-left: 0 !important; }
html body.public-body .dealFaq-card details[open] { background: none !important; }
html body.public-body .dealFaq-card summary h3 { background: none !important; box-shadow: none !important; border: 0 !important; }
/* FAQ upgrade: a real hover affordance and a tinted chevron chip in place of
   a bare glyph at the end of a plain row -- the shell (one flat divided list,
   no per-card shadow) stays; only the interaction reads as premium now. */
html body.public-body .dealFaq-card summary {
  border-radius: 10px !important; padding-left: 10px !important; padding-right: 10px !important;
  margin: 0 -10px !important; transition: background 160ms ease !important;
}
html body.public-body .dealFaq-card summary:hover { background: var(--il-wash) !important; }
html body.public-body .dealFaq-card details[open] > summary h3 { color: var(--il-navy) !important; }
html body.public-body .dealFaq-card summary :is(i, svg) {
  width: 34px !important; height: 34px !important; padding: 8px !important; flex: none !important;
  border-radius: 999px !important; background: var(--il-wash) !important; color: var(--il-ink-2) !important;
  box-sizing: border-box !important; transition: background 160ms ease, color 160ms ease !important;
}
html body.public-body .dealFaq-card details[open] > summary :is(i, svg) {
  background: var(--il-navy-05) !important; color: var(--il-navy) !important;
}
html body.public-body .dealFaq-card details > :not(summary) { padding-left: 10px !important; padding-right: 10px !important; }
html body.public-body [data-home-section="trust-bar"] > div > div { background: none !important; }
html body.public-body #propertyContent #dealCollage.dealGallery-wrapper { grid-auto-rows: 0 !important; }
@media (max-width: 760px) { .header-user-nav-bar_actions .header-user-nav-bar_post_deal_btn { display: none !important; } }
@media (max-width: 560px) { .dealRow-addressContainer { flex-direction: column; align-items: stretch; } .dealRow-viewAddress { width: 100% !important; } .dealRow-addressLine { align-items: flex-start; } .dealRow-addressLine > svg { margin-top: 3px; } .dealRow-rowRight { width: 100%; } }
/* the marketplace's lower sections, re-housed inside the page column */
html body.public-body .il-band-card { border-radius: 12px !important; overflow: hidden; padding: 40px !important; margin: 0 !important; }
html body.public-body .il-band-card > div { max-width: none !important; padding: 0 !important; }
html body.public-body .il-faq-page, html body.public-body .il-areas-page { padding-top: 24px !important; padding-bottom: 24px !important; background: transparent !important; border: 0 !important; }
html body.public-body .il-faq-page > div, html body.public-body .il-areas-page > div { max-width: none !important; padding: 0 !important; }
html body.public-body .il-faq-page :is(details, .faq-item) { background: #fff !important; border: 1px solid var(--il-line) !important; border-radius: 12px !important; box-shadow: none !important; }
html body.public-body .il-areas-page h2 { font-size: 20px !important; line-height: 28px !important; font-weight: 600 !important; color: var(--il-ink) !important; }
html body.public-body .marketplace-filters .ui-input select { appearance: auto; -webkit-appearance: menulist; font-size: 14px; padding-right: 4px; border: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 0; }
html body.public-body .marketplace-filters .ui-input input.search-input { padding-left: 0 !important; border: 0 !important; box-shadow: none !important; min-height: 0; background: transparent !important; }
html body.public-body .marketplace-filters .switch-option.filter-pill { border-radius: 30px !important; }
html body.public-body .marketplace-filters .switch-option.filter-pill.switch-optionActive { background: var(--il-navy-05) !important; border-color: var(--il-navy) !important; color: var(--il-navy) !important; }
html body.public-body .marketplace-empty { display: grid; }
html body.public-body .marketplace-empty.hidden { display: none !important; }
html body.public-body .marketplace-empty .btn-primary { width: auto; }
html body.public-body #dealsSkeleton.hidden { display: none !important; }
html body.public-body, html body.public-body.font-sans, html body.public-body .font-sans { font-family: var(--il-font) !important; }
/* the grid's old card decoration (a crimson rule, corner brackets) never reaches the kit card */
html body.public-body :is(.deals-grid, .il-card-grid, .dealsNearby-grid) > .ui-deal-card { border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; transform: none !important; overflow: visible !important; }
html body.public-body :is(.deals-grid, .il-card-grid, .dealsNearby-grid) > .ui-deal-card::before, html body.public-body :is(.deals-grid, .il-card-grid, .dealsNearby-grid) > .ui-deal-card::after { display: none !important; content: none !important; }
html body.public-body :is(.deals-grid, .il-card-grid, .dealsNearby-grid) > .ui-deal-card > * { border-radius: 0; }
html body.public-body :is(.deals-grid, .il-card-grid, .dealsNearby-grid) > .ui-deal-card > .ui-deal-card_img-container { border-radius: 8px 8px 0 0 !important; }
html body.public-body :is(.deals-grid, .il-card-grid, .dealsNearby-grid) > .ui-deal-card > .ui-deal-card_info { border-radius: 0 0 8px 8px !important; }
@media (hover: hover) { html body.public-body :is(.deals-grid, .il-card-grid, .dealsNearby-grid) > .ui-deal-card:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, .12) !important; } }
.ui-deal-card-property-address :is(span, b, strong, em) { margin-right: .28em; }
.ui-deal-card-property-address :is(span, b, strong, em):last-child { margin-right: 0; }
html body.public-body .ui-deal-card-views.hidden { display: none !important; }
html body.public-body .ui-deal-card-views.flex, html body.public-body .ui-deal-card-views:not(.hidden) { display: inline-flex !important; }
html body.public-body .ui-deal-card-views :is(i, svg) { width: 14px; height: 14px; color: var(--il-gold-ink); }
/* the grid is the page column: four across at 1360, never a percentage stage inside a stage */
html body.public-body .deals-grid-stage { padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body.public-body .deals-grid-stage-muted { opacity: 1 !important; filter: none !important; }
html body.public-body .deals-results-stack { display: block !important; gap: 0 !important; }

/* The search acknowledgement. A term carried here from another page's header used to
   land with the box quietly pre-filled and a shorter grid, and nothing on screen said a
   search had been run -- so a buyer reading four cards had no way to tell a short list
   from a filtered one. Flat on a hairline like every other surface on this page: it is a
   statement of fact, not a thing to press, and the one control on it is the way out.
   (!) `:not(.hidden)` on the display, never a bare `display:flex` -- this class and
       Tailwind's `.hidden` are both single-class selectors, so they TIE and source order
       decides; a bare display here paints the strip over every unsearched page load. */
html body.public-body .deals-search-note { display: none; }
html body.public-body .deals-search-note:not(.hidden) {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--il-line); border-radius: 10px;
  background: #fff; color: var(--il-ink-2); font-size: 14px; line-height: 20px;
}
html body.public-body .deals-search-note_text { min-width: 0; }
html body.public-body .deals-search-note strong { color: var(--il-ink); font-weight: 600; }
html body.public-body .deals-search-note_term { color: var(--il-navy); }
/* (!) The clear control is a real <button> and is named as one. It sits inside
       .section-content-free public markup, so it carries its own face rather than
       inheriting a kit button's fill -- a filled pill here would be the loudest thing
       on a row whose whole job is to be read and moved past. */
html body.public-body .deals-search-note_clear {
  flex: none; appearance: none; background: none; border: 0; padding: 4px 2px; cursor: pointer;
  color: var(--il-navy); font-size: 13px; font-weight: 600; line-height: 18px;
  text-decoration: underline; text-underline-offset: 3px; border-radius: 6px;
}
html body.public-body .deals-search-note_clear:hover { color: var(--il-navy-hover); }
@media (pointer: coarse) {
  /* a thumb, not a mouse: the one control on this strip has to be reachable */
  html body.public-body .deals-search-note_clear { min-height: 44px; padding: 4px 8px; }
}
html body.public-body .il-page { overflow-x: clip; }
html body.public-body .ui-deal-card :is(div, a, span)::before, html body.public-body .ui-deal-card :is(div, a, span)::after { display: none !important; content: none !important; }
html body.public-body .ui-deal-card img { filter: none !important; transform: none !important; }
html body.public-body :is(.deals-grid, .il-card-grid) { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 24px !important; max-width: none !important; margin: 0 !important; padding: 0 !important; justify-content: stretch !important; }
@media (max-width: 1100px) { html body.public-body :is(.deals-grid, .il-card-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 860px) { html body.public-body :is(.deals-grid, .il-card-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; } }
@media (max-width: 520px) { html body.public-body :is(.deals-grid, .il-card-grid) { grid-template-columns: 1fr !important; } }
html body.public-body .ui-deal-card_img-container, html body.public-body .ui-deal-card_img-container img { border-top: 0 !important; outline: 0 !important; }
html body.public-body .ui-deal-card_img-container { border: 1px solid var(--il-line) !important; border-bottom: 0 !important; }
/* ------------------------------------------------------------------ the home page's CMS sections: white ground, hairline cards, no navy bands */
html body.public-body .il-home :is(.how-buying-section, .recently-sold-section, .site-hero.hero-pattern, [data-home-section="why-us"], [data-home-section="faq"]) { background: var(--il-ground) !important; background-image: none !important; color: var(--il-ink) !important; border: 0 !important; box-shadow: none !important; padding-top: 48px !important; padding-bottom: 48px !important; }
html body.public-body .il-home :is(.how-buying-section, .recently-sold-section) :is(h2, h3, p, span, li, a):not(.section-eyebrow):not(.ui-button):not(.email-btn):not(.btn-primary):not(.btn-secondary):not(.home-how_num) { color: var(--il-ink) !important; text-shadow: none !important; }
html body.public-body .il-home :is(.how-buying-section, .recently-sold-section) p { color: var(--il-ink-2) !important; }
html body.public-body .il-home :is(.how-buying-section, .recently-sold-section, [data-home-section="why-us"]) h2 { font-size: 24px !important; line-height: 32px !important; font-weight: 700 !important; }
html body.public-body .il-home .how-buying-section .hero-stats-seam, html body.public-body .il-home :is(.how-buying-section, .recently-sold-section)::before, html body.public-body .il-home :is(.how-buying-section, .recently-sold-section)::after { display: none !important; }
html body.public-body .il-home :is(.how-buying-section, .recently-sold-section) [class*="rounded"], html body.public-body .il-home [data-home-section="why-us"] [class*="rounded"] { background: #fff !important; border: 1px solid var(--il-line) !important; border-radius: 12px !important; box-shadow: none !important; background-image: none !important; }
html body.public-body .il-home .how-buying-section [class*="rounded-full"] { border-radius: 50% !important; background: var(--il-navy-05) !important; color: var(--il-navy) !important; }
html body.public-body .il-home .site-cta-band { margin: 0 24px; border-radius: 12px !important; max-width: var(--il-content); margin-left: auto; margin-right: auto; padding: 40px !important; }
html body.public-body .il-home .deal-rail-shell, html body.public-body .il-home .deal-rail-card { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 8px !important; }
html body.public-body .il-home .deal-rail-slide { text-decoration: none; }
html body.public-body .il-home .deal-rail-nav { background: #fff !important; color: var(--il-ink) !important; border: 1px solid var(--il-line) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .12) !important; }
html body.public-body .il-home section.py-16 h2, html body.public-body .il-home #areas-heading { font-size: 24px !important; line-height: 32px !important; font-weight: 700 !important; color: var(--il-ink) !important; }
html body.public-body .il-home .section-eyebrow { background: transparent !important; border: 0 !important; padding: 0 !important; }
html body.public-body .deal-rail-slide::before, html body.public-body .deal-rail-slide::after, html body.public-body .deal-rail-shell::before, html body.public-body .deal-rail-shell::after { display: none !important; content: none !important; }
html body.public-body .il-home section::before, html body.public-body .il-home section::after, html body.public-body .il-home [data-home-section] > div::before { background-image: none !important; }
html body.public-body .il-home .faq-item, html body.public-body .il-home .faq-trigger { background: #fff !important; border-radius: 12px !important; box-shadow: none !important; }
html body.public-body .il-home .faq-item { border: 1px solid var(--il-line) !important; }

/* ============================================================================
   The home page's own sections (2026-09-20 pass)
   ============================================================================
   ONE light-gray seam between sections. The page is white cards on a near-white
   ground, so the only thing separating one block of it from the next was the
   padding -- which reads as a single long page rather than as sections. The 3px
   navy-to-red rail public-ui.css draws at a junction is a DIFFERENT device and
   is the wrong one here: it is loud, and on this page it was already being
   cancelled by the `border: 0 !important` above.
   (!) border-image is reset with it: the rail is drawn as a transparent border
       plus a border-image, so setting only border-top leaves the gradient. */
html body.public-body .il-home #homeSectionsHost > section + section,
html body.public-body .il-home #homeSectionsHost + section,
html body.public-body .il-home > section + section { border-top: calc(2px / var(--public-zoom, 1)) solid var(--il-line) !important; border-image: none !important; }
/* the first section already has the hero's own bottom hairline above it */
html body.public-body .il-home #homeSectionsHost > section:first-child { border-top: 0 !important; }

/* the shared inner column, so every section lines up with the hero and the header */
html body.public-body .il-home .home-sect { max-width: var(--il-content); margin: 0 auto; padding: 0 24px; }
html body.public-body .il-home .home-sect_head { text-align: center; max-width: 60ch; margin: 0 auto 32px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
html body.public-body .il-home .home-sect_head h2 { font-size: 24px !important; line-height: 32px !important; font-weight: 700 !important; color: var(--il-ink) !important; margin: 0 !important; }
html body.public-body .il-home .home-sect_head p { font-size: 15px !important; line-height: 23px !important; color: var(--il-ink-2) !important; margin: 0 !important; }
html body.public-body .il-home .home-sect_head .section-eyebrow { background: var(--il-navy-05) !important; border: 1px solid var(--il-navy-10) !important; color: var(--il-navy) !important; padding: 4px 10px !important; border-radius: 999px !important; box-shadow: none !important; }
html body.public-body .il-home .home-sect_head .section-eyebrow svg { width: 13px; height: 13px; }

/* ---- How Buying Works -----------------------------------------------------
   Five plain cards rather than five circles on a rail. The old version wore a
   22px GOLD glow on the number and on its eyebrow -- a navy-band accent left
   behind on a section that has not been a navy band since the page was
   re-grounded. Nothing here glows; the hover is a light-gray lift. */
html body.public-body .il-home .home-how-section { background: var(--il-ground) !important; padding: 48px 0 !important; }
html body.public-body .il-home .home-how { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; counter-reset: none; }
html body.public-body .il-home .home-how_step { background: #fff; border: 1px solid var(--il-line); border-radius: 12px; padding: 20px 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; transition: border-color .15s ease, box-shadow .15s ease; }
html body.public-body .il-home .home-how_step:hover { border-color: var(--il-line-2); box-shadow: 0 4px 14px rgba(26, 27, 34, .07); }
html body.public-body .il-home .home-how_num { width: 32px; height: 32px; border-radius: 999px; background: var(--il-navy); color: #fff !important; font-size: 14px; font-weight: 700; line-height: 32px; text-align: center; display: block; flex: none; margin-bottom: 2px; box-shadow: none !important; }
html body.public-body .il-home .home-how_title { font-size: 16px !important; line-height: 22px !important; font-weight: 700 !important; color: var(--il-ink) !important; margin: 0 !important; }
html body.public-body .il-home .home-how_body { font-size: 14px !important; line-height: 21px !important; color: var(--il-ink-2) !important; margin: 0 !important; }
@media (max-width: 1100px) { html body.public-body .il-home .home-how { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { html body.public-body .il-home .home-how { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } html body.public-body .il-home .home-sect { padding: 0 16px; } }
@media (max-width: 430px) { html body.public-body .il-home .home-how { grid-template-columns: 1fr; } }

/* ---- How Buying Works carries the light ray effect back ------------------
   The section is deliberately given the .il-rays-band class on the page (index.html),
   never picked up automatically -- "some sections use the transparent ray effect", not
   every section, and this is one of them.
   TWO blanket kills have to be beaten, not one: .how-buying-section::before's own
   { display:none !important } (section 17 above), AND a SECOND, wider blanket a few
   lines below it -- ".il-home section::before, ...::after { background-image: none
   !important }" -- written to strip the old gold-glow/scanline decorations off every
   section on the home page. That second one matches ANY ::before inside .il-home,
   including this one, and its specificity (2 classes, 4 type selectors) beats
   .il-rays-band::before's own background declaration (1 class, 1 type, no !important)
   outright -- so .il-rays-band alone rendered a correctly DISPLAYED but completely
   IMAGELESS pseudo here (measured: display:block, opacity applied, background-image:
   none). The background has to be restated, !important, at THIS selector's specificity
   (4 classes beats the blanket's 2) rather than left to the shared .il-rays-band base
   rule to supply. Nothing else about the section moves: the ground stays --il-ground,
   the cards stay white on a hairline, the rays sit behind both. */
html body.public-body .il-home .home-how-section.il-rays-band::before {
  display: block !important;
  background-image: url('/branding/rayeffect-m-fade.webp') !important;
  background-position: 50% 50% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  opacity: .24 !important;
}

/* ---- the buy-box band ------------------------------------------------------
   ONE hairline panel in the page's own language, in place of a navy slab that
   carried a white card inside it and a 34px gold glow around the whole thing.
   This is now the ONE buy-box capture used sitewide -- the home page, the
   marketplace page (deals.html, its embedded signup form kept intact inside
   .home-join_act) and the promo band public-cta-band.js injects on every
   other public page -- so the scope can no longer be ".il-home": that class
   is the home page's own <main> marker and none of those other pages carry
   it. Every selector below is scoped to the class doubled on itself instead
   (".home-join-section.home-join-section" etc.) -- the same specificity the
   ".il-home" ancestor used to buy (one extra class), reusable anywhere.
   (!) The section keeps .site-cta-band, so public-cta-band.js still sees that
       a page already has one and does not inject a second. Which is also why
       every legacy paint rule for that class has to be taken back HERE, at a
       specificity that wins. */
html body.public-body .home-join-section.home-join-section { background: var(--il-ground) !important; background-image: none !important; padding: 48px 0 !important; margin: 0 !important; max-width: none !important; border-radius: 0 !important; box-shadow: none !important; color: var(--il-ink) !important; }
html body.public-body .home-join-section.home-join-section::before, html body.public-body .home-join-section.home-join-section::after { display: none !important; content: none !important; }
/* ---- and re-lit, on purpose, with the light ray effect --------------------
   This is the ONE buy-box capture used sitewide (the comment on ilCtaBandHtml above
   explains why the class is doubled rather than scoped to .il-home): the home page, the
   marketplace page and the promo band public-cta-band.js injects on every OTHER public
   page that does not already carry its own .site-cta-band. Giving it .il-rays-band here
   reaches all of them from one place -- the SAME reason the newsletter band on the
   worker-rendered pages (.il-ssr-band.il-rays) already carries rays, so the two "join our
   list" moments across the whole site now read as one family rather than two. The join
   card itself (.home-join.home-join) is still an opaque white panel on the rays, same as
   every other .il-rays/.il-rays-band panel on the site.
   (!) background/opacity are restated here rather than left to the shared .il-rays-band
   base rule, and for TWO reasons that only show up on different pages: (a) on the home
   page this class sits inside .il-home, which carries its OWN blanket
   ".il-home section::before { background-image: none !important }" (written to strip the
   retired gold-glow decorations) -- at higher specificity than .il-rays-band's own,
   un-!important background, so the base rule alone renders a correctly-displayed but
   completely imageless pseudo there; (b) .site-cta-band ALSO carries its own pre-existing
   ray treatment from public-ui.css (parallax custom properties and all) wherever this
   class appears, and restating the values here keeps the join band's rays looking IDENTICAL
   on every page rather than one look on the home page and a different, older one elsewhere. */
html body.public-body .home-join-section.home-join-section.il-rays-band::before {
  display: block !important;
  content: "" !important;
  background-image: url('/branding/rayeffect-m-fade.webp') !important;
  background-position: 50% 50% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  opacity: .24 !important;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 75%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 75%, transparent 100%) !important;
}
html body.public-body .home-join.home-join { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 0; background: #fff !important; border: 1px solid var(--il-line); border-radius: 12px; overflow: hidden; }
html body.public-body .home-join_copy.home-join_copy { padding: 28px 28px 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
html body.public-body .home-join_copy.home-join_copy .section-eyebrow { background: var(--il-navy-05) !important; border: 1px solid var(--il-navy-10) !important; color: var(--il-navy) !important; padding: 4px 10px !important; border-radius: 999px !important; box-shadow: none !important; }
html body.public-body .home-join_copy.home-join_copy .section-eyebrow svg { width: 13px; height: 13px; }
html body.public-body .home-join_copy.home-join_copy h2 { font-size: 24px !important; line-height: 32px !important; font-weight: 700 !important; color: var(--il-ink) !important; margin: 0 !important; text-align: left !important; }
html body.public-body .home-join_copy.home-join_copy > p { font-size: 15px !important; line-height: 23px !important; color: var(--il-ink-2) !important; margin: 0 !important; max-width: 62ch; text-align: left !important; }
html body.public-body .home-join_note.home-join_note { font-size: 13px !important; line-height: 20px !important; color: var(--il-ink-2) !important; margin: 2px 0 0 !important; max-width: 62ch; }
html body.public-body .home-join_tiles.home-join_tiles { display: grid; gap: 8px; list-style: none; margin: 6px 0 0 !important; padding: 0 !important; width: 100%; }
html body.public-body .home-join_tile.home-join_tile { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 12px; background: var(--il-ground); border: 1px solid var(--il-line); border-radius: 10px; padding: 10px 12px; }
html body.public-body .home-join_tileIcon.home-join_tileIcon { width: 30px; height: 30px; border-radius: 8px; background: var(--il-navy-05); color: var(--il-navy); display: inline-flex; align-items: center; justify-content: center; }
html body.public-body .home-join_tileIcon.home-join_tileIcon svg { width: 16px; height: 16px; }
html body.public-body .home-join_tileText.home-join_tileText { font-size: 14px !important; line-height: 20px !important; color: var(--il-ink) !important; font-weight: 500 !important; }
html body.public-body .home-join_act.home-join_act { padding: 28px 28px 26px; background: var(--il-navy-05) !important; border-left: 1px solid var(--il-line); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; justify-content: center; }
/* (!) WHITE, not --il-navy-05: the panel this chip sits on IS --il-navy-05, so the navy chip
   was the exact colour of its own ground and read as bare text. */
html body.public-body .home-join_chip.home-join_chip { background: #fff !important; color: var(--il-navy) !important; border: 1px solid var(--il-navy-10); font-weight: 600; }
html body.public-body .home-join_actLead.home-join_actLead { font-size: 14px !important; line-height: 21px !important; color: var(--il-ink-2) !important; margin: 0 !important; }
html body.public-body .home-join_cta.home-join_cta { width: 100%; }
html body.public-body .home-join_signals.home-join_signals { display: flex; flex-wrap: wrap; gap: 6px; }
html body.public-body .home-join_signals.home-join_signals .buyer-network-home-signal { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .04em; text-transform: uppercase; color: var(--il-ink-2) !important; background: #fff !important; border: 1px solid var(--il-line) !important; border-radius: 999px !important; padding: 4px 9px !important; box-shadow: none !important; }
@media (max-width: 900px) { html body.public-body .home-join.home-join { grid-template-columns: 1fr; } html body.public-body .home-join_act.home-join_act { border-left: 0; border-top: 1px solid var(--il-line); } }

/* (!) NOTHING ON THIS PANEL GLOWS GOLD. public-ui.css paints a 22px gold glow on an eyebrow
   inside .site-cta-band -- right for a page still carrying an actual navy band, wrong for
   this light panel -- and the eyebrow here is always inside .home-join_copy, which the
   doubled rule above already beats it with. */
html body.public-body .il-home .site-cta-band .section-eyebrow i, html body.public-body .il-home .site-cta-band .section-eyebrow svg { color: var(--il-navy) !important; }

/* ---- a hidden control is hidden. `.ui-button { display:inline-flex }` ties Tailwind's `.hidden`
   at (0,1,0) and this sheet loads later, so the class silently lost -- the sold-deal gate hides
   the walkthrough button with exactly that class. Pinned per family, never a blanket `.hidden`
   (the `hidden md:flex` idiom is still legal on the pages that carry it). */
html body.public-body .ui-button.hidden,
html body.public-body .ui-deal-card-badge.hidden,
html body.public-body .il-chip.hidden { display: none !important; }

/* ---- the skip link: the first tab stop on every page, visible only while focused. */
.il-skip-link { position: absolute; left: 8px; top: -60px; z-index: 200; padding: 10px 14px; background: #fff; color: var(--il-navy, #13436B); font-weight: 600; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.12); text-decoration: none; }
.il-skip-link:focus { top: 8px; outline: 2px solid var(--il-navy, #13436B); }

/* =====================================================================================
   ROLL-OUT PASS 2 — what the invisible-text scan found on the shelled pages.
   A band re-grounded from navy to white keeps its ink, and a section that carries a
   ray sheet or a radial wash is a texture this language does not have. Every rule here
   is scoped to the public body and out-weighs the page's own <style> at id weight.
   ===================================================================================== */
/* the navy bands are WHITE sections now (the reference has no dark band anywhere), and
   every word in them is ink. The rule names the text elements so a button's own white
   label inside the band is untouched. */
html body.public-body :is(.section-band-navy, .stats-band-premium, .how-buying-section, .recently-sold-section) { background: var(--il-ground) !important; background-image: none !important; color: var(--il-ink) !important; border: 0 !important; box-shadow: none !important; }
/* (!) .how-buying-section / .recently-sold-section exist ONLY inside .il-home, whose own
   #homeSectionsHost rule (below) draws a flat 1px seam instead -- their pseudo rail stays
   off there. .section-band-navy / .stats-band-premium exist on every OTHER public page
   (coaching, cash-buyers, advertise-your-deal, launch, deals), where the section-to-section
   junction rule in public-ui.css still EXCLUDES them from its own border-image rail on the
   assumption that the band draws its own top/bottom rail (tests/public-section-rails.test.js
   pins that exclusion, on purpose, to avoid a doubled line) -- so disabling the pseudo here
   left a naked seam on BOTH sides of every band on those pages, including right under the
   hero. The rail comes back for those two classes; only the navy FILL above stays gone. */
html body.public-body :is(.how-buying-section, .recently-sold-section)::before,
html body.public-body :is(.how-buying-section, .recently-sold-section)::after { display: none !important; }
html body.public-body :is(.section-band-navy, .stats-band-premium, .how-buying-section, .recently-sold-section) :is(h1, h2, h3, h4, p, li, dt, dd, small, strong, em, .section-eyebrow, .step-title, .step-body, .stats-band-label, .stats-band-value):not(.ui-button *):not(.email-btn *):not(button *) { color: var(--il-ink) !important; }
html body.public-body :is(.section-band-navy, .stats-band-premium) :is(p, .step-body, .stats-band-label, .section-copy-tight):not(.ui-button *):not(.email-btn *) { color: var(--il-ink-2) !important; }
html body.public-body :is(.section-band-navy, .stats-band-premium) .text-white { color: var(--il-ink) !important; }
/* the translucent white cards those bands carried become real cards */
html body.public-body .section-band-navy :is([class*="bg-white/"], .step-card, .jv-step) { background: #fff !important; border: 1px solid var(--il-line) !important; border-radius: 12px !important; box-shadow: none !important; }
html body.public-body .stats-band-premium .stats-band-value { color: var(--il-navy) !important; }
/* textures on white sections: the dot grid, the ray sheet and the radial washes */
html body.public-body main section.bg-white, html body.public-body main section[class*="bg-white"] { background-image: none !important; }
html body.public-body main .hero-pattern, html body.public-body main.hero-pattern, html body.public-body #main.hero-pattern { background-image: none !important; background-color: var(--il-ground) !important; }
html body.public-body main .hero-pattern > .absolute.inset-0, html body.public-body section.site-hero > .absolute.inset-0 { display: none !important; }
html body.public-body :is(.deal-tracker-shell, .deal-analyzer-shell, .jv-guidance-shell, .legal-hero-card, .install-hero-card, .buyer-network-preview-shell, .investor-news-shell, .verify-card) { background: #fff !important; background-image: none !important; border: 1px solid var(--il-line) !important; border-radius: 12px !important; box-shadow: none !important; }
html body.public-body :is(.investor-news-shell) :is(h2, h3, p, li):not(.ui-button *) { color: var(--il-ink) !important; }
html body.public-body :is(.investor-news-shell) p { color: var(--il-ink-2) !important; }
html body.public-body .buyer-network-preview-card { background: #fff !important; background-image: none !important; }
html body.public-body :is(.vip-pick, .vip-banner) { background: #fff !important; background-image: none !important; border: 1px solid var(--il-line) !important; }
/* the CTA panels stay navy (they are the one dark surface a page may keep) but flat */
html body.public-body .site-cta-panel { background: var(--il-navy) !important; background-image: none !important; border-radius: 12px; }
/* ------------------------------------------------- the "call me about this" sheet
   The shared modal card is sized for the OFFER form -- body.public-body
   .public-mobile-modal-card is width: min(96vw, 70rem) with padding 0, because that
   form supplies its own section padding. This sheet is one question, and inheriting
   that made it 1120px wide with its fields running edge to edge: it read as a broken
   page rather than a dialog. Scoped to this modal so the offer form is untouched. */
html body.public-body #dealInquiryModal .public-mobile-modal-card { width: min(94vw, 26rem) !important; padding: 24px !important; }
html body.public-body #dealInquiryModal :is(input, textarea) { border: 1px solid var(--il-line-2) !important; border-radius: var(--il-radius-sm) !important; background: #fff !important; box-shadow: none !important; font-size: 15px !important; }
html body.public-body #dealInquiryModal :is(input, textarea):focus { border-color: var(--il-navy) !important; box-shadow: var(--il-focus) !important; outline: none !important; }
html body.public-body #dealInquiryModal button[type="submit"] { border-radius: var(--il-radius-xs) !important; background: var(--il-navy) !important; color: #fff !important; }
html body.public-body #dealInquiryModal button[type="submit"]:hover { background: var(--il-navy-hover) !important; }
html body.public-body #dealInquiryModal button[type="submit"]:disabled { opacity: .6 !important; cursor: default; }
/* the auth pages: the ray-band hero becomes the reference's plain white panel, navy ink */
html body.public-body .auth-hero.jhb-ray-band { background: #fff !important; background-image: none !important; border: 1px solid var(--il-line) !important; border-radius: 12px !important; box-shadow: none !important; color: var(--il-ink) !important; }
html body.public-body .auth-hero.jhb-ray-band::before, html body.public-body .auth-hero.jhb-ray-band::after { display: none !important; }
html body.public-body .auth-hero :is(h1, h2, h3, p, li, span, .auth-hero-title, .auth-hero-sub, .auth-hero-foot, .auth-hero-kicker) { color: var(--il-ink) !important; }
html body.public-body .auth-hero :is(.auth-hero-sub, .auth-hero-foot, p) { color: var(--il-ink-2) !important; }
html body.public-body .auth-hero :is(.auth-hero-kicker, .auth-hero-eyebrow) { color: var(--il-navy) !important; }
html body.public-body .auth-hero :is(.auth-hero-icon, .auth-feature-icon, [class*="icon"]) { background: var(--il-wash) !important; color: var(--il-navy) !important; border-color: var(--il-line) !important; }
html body.public-body :is(.auth-card, .auth-card-col > div, .verify-card) { border-radius: 12px !important; box-shadow: none !important; border: 1px solid var(--il-line) !important; }
html body.public-body :is(.auth-card, .auth-card-col > div)::before, html body.public-body :is(.auth-card, .auth-card-col > div)::after { display: none !important; }
html body.public-body .auth-page-rays, html body.public-body .auth-hero-rays { display: none !important; }
/* `.btn-email`/`.btn-navy` already carry public-ui.css's own premium gradient-and-glow
   treatment (a colour-matched shadow, an inset highlight, a hover lift) -- a plain
   `button[type="submit"]` reset was catching them too and silently flattening it, since
   the sign-in button IS a submit button inside .auth-card. */
html body.public-body .auth-card .btn-primary, html body.public-body .auth-card button[type="submit"]:not(.btn-email):not(.btn-navy) { background: var(--il-navy) !important; background-image: none !important; box-shadow: none !important; border-radius: 8px !important; }
/* the coaching bundle card carried its navy as a gradient; the texture rule left it white */
html body.public-body .coaching-bundle-card { background: var(--il-navy) !important; background-image: none !important; border-radius: 12px; }
html body.public-body .coaching-bundle-card :is(h3, p, span):not(.ui-button *) { color: #fff !important; }
html body.public-body .coaching-bundle-card .line-through { color: rgba(255, 255, 255, .7) !important; }
/* the dot-grid overlay some heroes float over their photo */
html body.public-body .absolute.inset-0.opacity-10 { display: none !important; }
/* the deal page's investor summary rode a ray sheet and its own washes */
html body.public-body #propertyContent #investorSummarySection { background: #fff !important; background-image: none !important; }
html body.public-body #propertyContent :is(.investor-summary-urgency, .deal-location-lock-shell, .deal-location-lock-card) { background: var(--il-wash) !important; background-image: none !important; }
html body.public-body #propertyContent .deal-location-lock-overlay { background: rgba(255, 255, 255, .55) !important; background-image: none !important; }
/* the header's profile trigger: public-ui draws it as a 3.2rem round avatar button, which
   clips "Hi, Name" and floats the badge outside it. The reference's is a plain row. */
html body.public-body .site-header .site-profile-trigger { width: auto !important; height: 34px !important; min-width: 0 !important; border-radius: 6px !important; border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 6px 0 4px !important; gap: 8px !important; display: inline-flex !important; align-items: center !important; }
html body.public-body .site-header .site-profile-trigger:hover { background: var(--il-wash) !important; }
html body.public-body .site-header .site-profile-trigger-badge { position: static !important; width: 22px !important; height: 22px !important; }
html body.public-body .site-header .site-profile-trigger > svg:last-child { width: 14px !important; height: 14px !important; flex: none; }
/* the stats band's figures were a gradient text fill (white -> light blue) over navy */
html body.public-body :is(.stats-band-premium, .section-band-navy) :is(.stat-gradient-text, .text-gradient, [class*="gradient-text"]) { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: var(--il-navy) !important; color: var(--il-navy) !important; }
html body.public-body :is(.stats-band-premium, .section-band-navy) *:not(.ui-button):not(.email-btn):not(button):not(a) { background-image: none !important; }
html body.public-body :is(.stats-band-premium, .section-band-navy) *::before, html body.public-body :is(.stats-band-premium, .section-band-navy) *::after { background-image: none !important; mix-blend-mode: normal !important; }
html body.public-body .stats-band-premium { padding-top: 40px !important; padding-bottom: 40px !important; border-top: 1px solid var(--il-line) !important; border-bottom: 1px solid var(--il-line) !important; }
/* the price block's ARV / spread labels carry the explainer class, whose legacy rule is
   an uppercase tracked micro-label; here they read as the reference's plain labels */
html body.public-body #propertyContent .priceBlock-costList .pricing-micro-label { text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; font-weight: 500 !important; color: var(--il-ink-2) !important; white-space: nowrap; }
html body.public-body #propertyContent .priceBlock-costList .deal-tip-mark { margin-left: 6px; }
/* the auth pages carry the header now, so their own "Back to site" chip is a second way home */
html body.public-body .auth-back { display: none !important; }
html body.public-body .auth-card :is(.btn-primary, button[type="submit"])::before, html body.public-body .auth-card :is(.btn-primary, button[type="submit"])::after { display: none !important; }
/* the brand rail under every hero section is a hairline here */
html body.public-body .dd-section-border-b::after { background: var(--il-line) !important; height: 1px !important; }
/* headings for pages that load no Tailwind (404, offline): the kit's own sizes */
.kit-h1 { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -.01em; color: var(--il-ink); }
.kit-h2 { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -.01em; color: var(--il-ink); }
.kit-h3 { font-size: 24px; line-height: 32px; font-weight: 600; color: var(--il-ink); }
@media (max-width: 760px) { .kit-h1 { font-size: 30px; line-height: 38px; } .kit-h2 { font-size: 26px; line-height: 34px; } }
/* the legacy brand buttons' accent bar (a 4x20 rule 14px in from the left) is not this language */
html body.public-body :is(.email-btn, .btn-primary, .btn-secondary, .jhbtg-btn-primary, .jhbtg-btn-ghost, .site-button-primary, .site-button-secondary)::before,
html body.public-body :is(.email-btn, .btn-primary, .btn-secondary, .jhbtg-btn-primary, .jhbtg-btn-ghost, .site-button-primary, .site-button-secondary)::after { display: none !important; }
/* box-shadow is NOT reset here -- it duplicated the base flatten rule above and,
   coming later at equal specificity, silently won the tie and wiped the premium
   glow every filled brand button (.btn-primary, .btn-secondary, .email-btn--*)
   is given a few hundred lines up. Padding/radius are this rule's real job. */
html body.public-body :is(.email-btn, .btn-primary, .btn-secondary, .jhbtg-btn-primary, .jhbtg-btn-ghost) { padding-left: 18px !important; border-radius: 8px !important; }
/* the member profile cleared a fixed 6rem nav; the header is in flow now */
html body.public-body :is(#profileArea, #profileLoading, #profileSignedOut) { padding-top: 32px !important; }
/* last of the re-grounded surfaces the scan found */
html body.public-body .investor-news-shell .investor-news-eyebrow { color: var(--il-navy) !important; background: var(--il-wash) !important; }
html body.public-body .investor-news-shell :is(span, li, small):not(.ui-button *):not(.email-btn *) { color: var(--il-ink-2) !important; }
html body.public-body .buyer-network-preview-title { color: var(--il-navy) !important; }
html body.public-body .buyer-network-preview-text { color: var(--il-ink-2) !important; }
html body.public-body .site-cta-panel :is(h2, h3, p, span, li):not(.ui-button *):not(.email-btn *):not(button *) { color: #fff !important; }
html body.public-body .site-cta-panel .site-inline-glass { background: rgba(255, 255, 255, .12) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .2) !important; }
html body.public-body main a.jhb-ray-band { background: #fff !important; background-image: none !important; border: 1px solid var(--il-line) !important; border-radius: 12px !important; box-shadow: none !important; color: var(--il-ink) !important; }
html body.public-body main a.jhb-ray-band :is(span, p, svg, i) { color: var(--il-ink) !important; }
html body.public-body main a.jhb-ray-band::before, html body.public-body main a.jhb-ray-band::after { display: none !important; }
html body.public-body .step-number { background: var(--il-navy) !important; color: #fff !important; }
html body.public-body .step-number.step-number-red { background: var(--il-crimson) !important; color: #fff !important; }
html body.public-body .coaching-bundle-card .email-btn { background: #fff !important; color: var(--il-navy) !important; border-color: #fff !important; }
html body.public-body .coaching-bundle-card .email-btn .email-btn-label { color: var(--il-navy) !important; }
html body.public-body .site-cta-panel .section-eyebrow, html body.public-body .site-cta-panel [class*="eyebrow"] { color: #fff !important; background: rgba(255, 255, 255, .12) !important; }

/* ==================================================================================
   DEAL PAGE, ROUND 2 (2026-09-20) — the frame, the rhythm, and the last of the
   old NCDD surfaces.

   Four things were true of this page and each rendered perfectly, which is why they
   survived the first InvestorLift pass:

   1. THE FRAME WAS 1224px ON A 1600px SCREEN. `--il-content` is 1360, and
      `body.public-body` carries `zoom: .9` on desktop (public-ui.css) -- so the
      declared width is the ZOOMED one and 1360 paints as 1224, leaving 376px of
      empty ground. A fixed px cap cannot see the zoom; a fluid one can, because
      `100%` is resolved inside the zoomed space. The frame is fluid now, capped,
      and the cap is stated in zoomed units with the arithmetic written down.

   2. `rent-estimate-*` HAD ZERO CSS ANYWHERE. The renderer emits a shell, a hero,
      a range bar, a percentile grid and a footer, and not one of those class names
      was declared in any stylesheet the page loads -- so the whole section painted
      as a column of bare text running to the card's edges, which is what made it
      read as touching the FAQ below it. A class that matches nothing throws
      nothing: the section mounts, the markup is correct, and only a browser can
      say it is unstyled.

   3. THE VALUE BAND AND CLOSING DETAILS WERE STILL WEARING THE OLD BRAND.
      `deal-detail-base.css` paints the ARV/Rent/Spread tiles at 26px radius on a
      red-to-blue gradient hairline in `#0f2440`/`#15803d`, and the closing rail is
      raw Tailwind (`bg-slate-50`, `border-primary/20`, `rounded-2xl`, `shadow-sm`)
      on the retired `#1e3a5f`/`#c0303d` pair. Those are the "old ncdealdepot
      assets": every one of them is a near-miss of a palette colour, which is
      exactly the drift the official palette exists to end.

   4. THE ACTION COLOUR WAS RED AND THE SECOND ACTION WAS A PASTEL. Crimson is the
      ACCENT (a deadline, a badge, a chip); it is no longer a button fill -- those
      moved to navy at their own rules above. "Attend walkthrough" was
      `color-gold.type-tinted`, i.e. `#fff8e1` with `#7d5a00` ink, which is the
      pastel. A second action is an OUTLINE of the first, not a different hue.

   SCOPE. Everything here is keyed on `#propertyContent` or `.dealContent`, so it
   cannot reach another page. The Tailwind utilities being re-pointed are single
   class selectors (0,1,0) and these carry an id (1,x,y), so they win without
   `!important` -- which is reserved for the places `deal-detail.css` and
   `deal-detail-base.css` already declare one, and those are marked.
   ================================================================================== */

/* ---------------------------------------------------------------- 1. the frame
   min(cap, 100% - gutter), both in ZOOMED px. At .9 zoom a 1600px screen is a
   1778px zoomed space, so the 1680 cap paints as 1512 and the 96px gutter as 86
   (43 a side). Below the cap it is the gutter that holds, so the frame tracks the
   window down to the one-column breakpoint and never sits in a pool of ground.
   The rail grows with it: a 320px rail beside a 1250px column reads as an
   afterthought, and the closing-details card is the thing that was overflowing. */
html body.public-body .dealContent { max-width: min(1680px, calc(100% - 96px)); }
html body.public-body .dealContent-body { grid-template-columns: minmax(0, 1fr) 348px; grid-gap: 28px; }
@media (max-width: 1280px) {
  html body.public-body .dealContent { max-width: calc(100% - 56px); }
  html body.public-body .dealContent-body { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* ---------------------------------------------------------------- 2. the rhythm
   No two cards touch. The columns are grids, so `row-gap` is the whole mechanism
   and the failure mode is a card that renders with no padding of its own rather
   than a gap that collapsed -- both are closed here: the gap is raised to match
   the new column gap, and every section card is guaranteed its own 24px. */
html body.public-body .dealContent-left,
html body.public-body .dealContent-right { row-gap: 28px; }
html body.public-body #propertyContent :is(.il-card, .il-section-card, .additionalDetails-wrapper, .propertyCondition-wrapper, .financingInfo-wrapper) { padding: 24px; }
html body.public-body #propertyContent .il-card > :last-child,
html body.public-body #propertyContent .il-section-card > :last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  html body.public-body .dealContent-left,
  html body.public-body .dealContent-right { row-gap: 20px; }
  html body.public-body #propertyContent :is(.il-card, .il-section-card) { padding: 18px; }
  /* This narrowing never actually reaches a `.il-section-card` -- line 1317's
     `!important` reset (fighting old inline styles the scripts used to leave
     behind) locks those at 24px on every width. That left exactly ONE card,
     `#dealFeedbackCard` (a bare `.il-card`, no `.il-section-card`), narrowing
     to 18px on a phone while its nine siblings in the same column stayed at
     24px -- the odd one out rather than the one that got it right. Matching
     the siblings, not "fixing" the narrowing everywhere, is the safer
     direction: the phone padding on this column has been 24px for every
     other card the whole time, so 24px is what "matches" here. */
  html body.public-body #propertyContent #dealFeedbackCard { padding: 24px !important; }
}

/* ------------------------------------------------- 3. the legacy palette, converted
   The census of what is actually on this page (64 distinct utilities), mapped onto
   the official palette. `primary`/`secondary` are the RETIRED NCDD navy/crimson --
   near-misses of `--il-navy`/`--il-crimson`, which is why the page reads as two
   brands at once. Slate and gray both collapse onto the three IL inks. */
html body.public-body #propertyContent :is(.text-primary, .text-primary\/60) { color: var(--il-navy); }
html body.public-body #propertyContent :is(.text-secondary, .text-amber-700, .text-amber-900) { color: var(--il-crimson); }
html body.public-body #propertyContent :is(.text-slate-900, .text-slate-800, .text-gray-800, .text-gray-900) { color: var(--il-ink); }
html body.public-body #propertyContent :is(.text-slate-700, .text-slate-600, .text-gray-700, .text-gray-600, .text-blue-100\/90) { color: var(--il-ink-2); }
html body.public-body #propertyContent :is(.text-slate-500, .text-slate-400, .text-slate-300, .text-gray-500, .text-gray-400) { color: var(--il-ink-3); }
html body.public-body #propertyContent :is(.text-emerald-600, .text-emerald-500, .text-green-600) { color: var(--il-green); }
html body.public-body #propertyContent :is(.bg-slate-50, .bg-slate-50\/90, .bg-slate-100, .bg-gray-50, .bg-gray-50\/70, .bg-gray-100, .bg-gray-200) { background-color: var(--il-wash); }
html body.public-body #propertyContent :is(.bg-primary, .bg-gray-900) { background-color: var(--il-navy); }
html body.public-body #propertyContent .bg-secondary { background-color: var(--il-crimson); }
html body.public-body #propertyContent :is(.bg-primary\/10, .bg-primary\/\[0\.04\]) { background-color: var(--il-navy-05); }
html body.public-body #propertyContent :is(.bg-amber-50, .bg-slate-300) { background-color: var(--il-wash); }
html body.public-body #propertyContent :is(.border-slate-200, .border-slate-200\/90, .border-slate-100, .border-gray-200, .border-gray-100, .border-gray-300, .border-slate-300, .ring-slate-200) { border-color: var(--il-line); }
html body.public-body #propertyContent :is(.border-primary\/15, .border-primary\/20, .border-amber-400, .ring-primary) { border-color: var(--il-navy-15); }
html body.public-body #propertyContent :is(.decoration-secondary\/40, .decoration-slate-300) { text-decoration-color: var(--il-navy-25); }
/* shape: the old brand's 16-24px corners and drop shadows, flattened onto the kit's
   12/10/8. A card inside a card gets the smaller radius, never the same one. */
html body.public-body #propertyContent :is(.rounded-3xl, .rounded-2xl) { border-radius: 12px; }
html body.public-body #propertyContent .rounded-xl { border-radius: 10px; }
html body.public-body #propertyContent :is(.rounded-lg, .rounded-md) { border-radius: 8px; }
html body.public-body #propertyContent :is(.shadow-sm, .shadow-md, .shadow-lg, .shadow-2xl) { box-shadow: none; }

/* ---------------------------------------------- 4. the value band (ARV / Rent / Spread)
   Back to the InvestorLift reading: three equal flat tiles, white on one hairline,
   the figure carrying the weight and the label recessed under it. What goes is the
   old brand's whole vocabulary -- the 26px radius, the 48px drop shadow, the
   red-to-blue gradient rule along the top, and the green WASH on the spread tile.
   Money that is a gain is said with the one green as INK (the price rail already
   says the spread that way); a tinted panel behind it is the pastel this round is
   removing, and it also made the third tile read as a different KIND of fact. */
html body.public-body #propertyContent .valueBand-card { padding: 20px 22px; }
html body.public-body #propertyContent .deal-value-band {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
}
html body.public-body #propertyContent .deal-value-band::before { content: none; display: none; }
html body.public-body #propertyContent .deal-value-band-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html body.public-body #propertyContent .deal-value-tile {
  background: #fff; border: 1px solid var(--il-line); border-radius: 10px;
  padding: 16px 18px; display: grid; align-content: start; gap: 2px; min-width: 0;
}
html body.public-body #propertyContent .deal-value-tile-accent { background: #fff; border-color: var(--il-line); }
html body.public-body #propertyContent .deal-value-label {
  font-family: var(--il-font); font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--il-ink-2); margin: 0; line-height: 16px;
}
html body.public-body #propertyContent .deal-value-figure {
  font-family: var(--il-font); font-size: 28px; font-weight: 700; line-height: 36px;
  letter-spacing: -.01em; color: var(--il-ink); margin: 4px 0 0; font-variant-numeric: tabular-nums;
}
html body.public-body #propertyContent .deal-value-tile-accent .deal-value-figure { color: var(--il-green); }
html body.public-body #propertyContent .deal-value-sub { font-size: 12px; font-weight: 400; line-height: 16px; color: var(--il-ink-3); margin: 0; }
html body.public-body #propertyContent .deal-value-source {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--il-line);
  font-size: 12px; line-height: 18px; font-weight: 400; color: var(--il-ink-2); gap: 8px; align-items: flex-start;
}
html body.public-body #propertyContent .deal-value-source :is(svg, i) { color: var(--il-green); width: 15px; height: 15px; margin-top: 1px; }
@media (max-width: 860px) { html body.public-body #propertyContent .deal-value-band-grid { grid-template-columns: 1fr; gap: 12px; } }

/* ------------------------------------------------------------- 5. the rent estimate
   Declared from nothing: every class below was emitted by
   `renderRentEstimateSection` and matched no rule in any sheet this page loads.
   The shape follows what the number IS -- a MEDIAN of a spread, which is why the
   band is a range with a marker on it rather than a gauge with a needle. */
html body.public-body #propertyContent #rentEstimateContent > .mb-5 { margin-bottom: 20px; align-items: center; }
html body.public-body #propertyContent #rentEstimateContent h3 {
  font-family: var(--il-font); font-size: 20px; font-weight: 600; line-height: 28px; color: var(--il-ink); margin: 0;
}
/* the source chip: a hairline chip, not a shadowed pill */
html body.public-body #propertyContent #rentEstimateContent > .mb-5 > span {
  background: #fff; border: 1px solid var(--il-line); border-radius: 999px; box-shadow: none;
  padding: 4px 12px; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--il-ink-2);
}
html body.public-body #propertyContent .rent-estimate-shell { display: grid; gap: 20px; }
html body.public-body #propertyContent .rent-estimate-hero { display: grid; gap: 8px; justify-items: start; }
html body.public-body #propertyContent .rent-estimate-value {
  margin: 0; font-size: 40px; font-weight: 700; line-height: 46px; letter-spacing: -.02em;
  color: var(--il-ink); font-variant-numeric: tabular-nums;
}
html body.public-body #propertyContent .rent-estimate-permo { font-size: 17px; font-weight: 500; color: var(--il-ink-2); margin-left: 4px; letter-spacing: 0; }
html body.public-body #propertyContent .rent-estimate-pill {
  display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--il-line);
  border-radius: 999px; padding: 3px 11px; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--il-ink-2);
}
html body.public-body #propertyContent .rent-estimate-hero-note { margin: 0; max-width: 62ch; font-size: 14px; line-height: 21px; color: var(--il-ink-2); }
/* the band. The track is the whole local spread; the shaded core is the middle
   half (25th-75th), which is the part a landlord can actually plan against; the
   marker is the median. Three facts, one picture, and the aria-label on the
   wrapper already says all three for a reader who cannot see it. */
html body.public-body #propertyContent .rent-estimate-band { display: grid; gap: 12px; padding-top: 4px; }
html body.public-body #propertyContent .rent-estimate-band-track {
  position: relative; height: 10px; border-radius: 999px; background: var(--il-wash); border: 1px solid var(--il-line);
}
html body.public-body #propertyContent .rent-estimate-band-core {
  position: absolute; top: 0; bottom: 0; background: var(--il-navy-15); border-radius: 999px;
}
html body.public-body #propertyContent .rent-estimate-band-marker {
  position: absolute; top: 50%; width: 15px; height: 15px; border-radius: 50%;
  background: var(--il-navy); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--il-navy-25);
  transform: translate(-50%, -50%);
}
html body.public-body #propertyContent .rent-estimate-range-row { display: flex; justify-content: space-between; gap: 16px; }
html body.public-body #propertyContent .rent-estimate-range-stat {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--il-ink-3);
}
html body.public-body #propertyContent .rent-estimate-range-value {
  margin: 2px 0 0; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--il-ink); font-variant-numeric: tabular-nums;
}
/* the percentiles: detail CELLS, not cards -- no fill, no radius, one rule between
   them, which is the same treatment every other fact grid on this page gets. */
html body.public-body #propertyContent .rent-estimate-stat-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--il-line); border-bottom: 1px solid var(--il-line);
}
html body.public-body #propertyContent .rent-estimate-stat-card { padding: 14px 0 14px 18px; border-left: 1px solid var(--il-line); }
html body.public-body #propertyContent .rent-estimate-stat-card:first-child { padding-left: 0; border-left: 0; }
html body.public-body #propertyContent .rent-estimate-stat-label {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--il-ink-3);
}
html body.public-body #propertyContent .rent-estimate-stat-value {
  margin: 4px 0 0; font-size: 20px; font-weight: 600; line-height: 26px; color: var(--il-ink); font-variant-numeric: tabular-nums;
}
html body.public-body #propertyContent .rent-estimate-footer {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; line-height: 18px; color: var(--il-ink-2);
}
html body.public-body #propertyContent .rent-estimate-footer p { margin: 0; }
html body.public-body #propertyContent .rent-estimate-footer p + p { margin-top: 3px; }
@media (max-width: 520px) {
  html body.public-body #propertyContent .rent-estimate-value { font-size: 32px; line-height: 38px; }
  html body.public-body #propertyContent .rent-estimate-stat-grid { grid-template-columns: 1fr; }
  html body.public-body #propertyContent .rent-estimate-stat-card { padding: 12px 0; border-left: 0; border-top: 1px solid var(--il-line); }
  html body.public-body #propertyContent .rent-estimate-stat-card:first-child { border-top: 0; }
}

/* ----------------------------------------------------------- 6. the closing details
   Rebuilt. It was three filled pills and a three-column flex card inside a 288px
   rail, so the attorney's name, address, three contact links and a "Visit Site"
   button were all competing for about 150px: the label wrapped, the value
   collided with it and the button sat on top of the address. A rail card is a
   LIST -- label left, value right, wrapping under when it will not fit -- and the
   attorney is a stack, not a row. `!important` here is answering deal-detail.css's
   own id-weighted rules on the same elements. */
html body.public-body #propertyContent #closingDetailsSection > .space-y-4 > * + * { margin-top: 0; }
html body.public-body #propertyContent #closingDetailsSection > .space-y-4 { display: grid; gap: 0; }
html body.public-body #propertyContent #closingDetailsSection :is(#earnestMoneyRow, #closingTimeframeRow) {
  display: flex !important; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: none !important; border: 0 !important; border-top: 1px solid var(--il-line) !important;
  border-radius: 0 !important; padding: 13px 0 !important; margin: 0 !important; box-shadow: none !important;
}
html body.public-body #propertyContent #closingDetailsSection > .space-y-4 > :is(#earnestMoneyRow, #closingTimeframeRow):first-child { border-top: 0 !important; padding-top: 0 !important; }
html body.public-body #propertyContent #closingDetailsSection :is(#earnestMoneyRow, #closingTimeframeRow) > span:first-child {
  font-size: 13px; font-weight: 500; line-height: 18px; color: var(--il-ink-2);
  letter-spacing: 0; text-transform: none;
}
html body.public-body #propertyContent #closingDetailsSection :is(#earnestMoneyRow, #closingTimeframeRow) > span:last-child {
  font-size: 16px !important; font-weight: 600; line-height: 22px; color: var(--il-ink) !important;
  font-variant-numeric: tabular-nums; text-align: right; font-family: var(--il-font) !important; letter-spacing: 0 !important;
}
/* the attorney: a stack. The icon and the name share the first row, everything
   else runs full width under it, and Visit Site is a full-width outline button at
   the foot rather than a third column nothing had room for. */
html body.public-body #propertyContent #closingDetailsSection #closingAttorneyCard,
html body.public-body #propertyContent #closingDetailsSection #closingAttorneyCard:hover {
  background: none !important; background-image: none !important; border: 0 !important;
  border-top: 1px solid var(--il-line) !important; border-radius: 0 !important;
  padding: 16px 0 0 !important; margin: 4px 0 0 !important; box-shadow: none !important; transform: none !important;
}
html body.public-body #propertyContent #closingDetailsSection #closingAttorneyCard > .flex {
  display: grid !important; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start;
}
html body.public-body #propertyContent #closingDetailsSection #closingAttorneyCard > .flex > div:first-child {
  width: 38px !important; height: 38px !important; border-radius: 9px !important;
  background: var(--il-navy-05) !important; background-image: none !important;
  border: 1px solid var(--il-navy-10) !important; box-shadow: none !important;
}
html body.public-body #propertyContent #closingDetailsSection #closingAttorneyCard > .flex > div:first-child :is(i, svg) { color: var(--il-navy) !important; width: 18px; height: 18px; }
/* the favicon <img> is revealed by an inline onload, so it wins on the element and
   has to be sized here rather than hidden -- a 38px pill with a full-bleed logo in
   it is the one place on this card a third-party image is allowed to speak. */
html body.public-body #propertyContent #closingDetailsSection #closingAttorneyCard > .flex > div:first-child img { border-radius: 7px; }
html body.public-body #propertyContent #closingAttorneyCard p.text-xs.uppercase {
  font-size: 10px !important; font-weight: 700; letter-spacing: .14em !important;
  color: var(--il-ink-3) !important; margin: 0 0 3px !important; line-height: 14px;
}
html body.public-body #propertyContent #closingDetailsSection #closingAttorneyOffice {
  font-size: 16px !important; font-weight: 600 !important; line-height: 22px; color: var(--il-ink) !important;
  margin: 0 !important; font-family: var(--il-font) !important; letter-spacing: 0 !important;
}
html body.public-body #propertyContent #closingAttorneyAddress {
  font-size: 13px !important; line-height: 19px; color: var(--il-ink-2) !important; margin: 6px 0 0 !important;
}
html body.public-body #propertyContent #closingAttorneyCard .mt-3 { margin-top: 12px !important; display: grid; gap: 8px; }
html body.public-body #propertyContent #closingAttorneyCard .mt-3 > a:not(.hidden) { display: flex !important; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: var(--il-ink-2) !important; text-decoration: none; word-break: break-word; }
html body.public-body #propertyContent #closingAttorneyCard .mt-3 > a:not(.hidden):hover { color: var(--il-navy) !important; }
html body.public-body #propertyContent #closingAttorneyCard .mt-3 > a :is(i, svg) { color: var(--il-ink-3); width: 15px; height: 15px; flex: none; }
html body.public-body #propertyContent #closingAttorneyWebsiteLink:not(.hidden) {
  display: flex !important; grid-column: 1 / -1; justify-content: center; align-items: center; gap: 8px;
  margin-top: 14px; padding: 9px 12px !important; border-radius: 6px !important;
  background: #fff !important; border: 1px solid var(--il-navy) !important; color: var(--il-navy) !important;
  font-size: 14px; font-weight: 500; box-shadow: none !important; text-decoration: none;
}
html body.public-body #propertyContent #closingAttorneyWebsiteLink:not(.hidden):hover { background: var(--il-navy-05) !important; }
html body.public-body #propertyContent #closingAttorneyWebsiteLink :is(i, svg) { color: var(--il-navy) !important; width: 16px; height: 16px; }

/* ------------------------------------------- 7. "Offers are reviewed at the deadline"
   This is the one line on the page that corrects a buyer's mental model -- the
   offer model is a DEADLINE, and a buyer who believes speed wins sends a worse
   number sooner. It wears InvestorLift's own info banner -- the reference's
   .idvBanner shape: a navy-05 ground on a 1px hairline, 8px corner, 12/16
   padding, a bare navy glyph (no chip, no rail), a 15/600 heading over 14/400
   copy. A rail down one edge and a ringed icon chip were two extra devices
   saying the same "look here" the tinted ground already says; InvestorLift uses
   exactly one. Navy, never crimson: this is a note about the process, and
   crimson is the one action colour. */
html body.public-body #propertyContent .investor-summary-urgency {
  display: grid !important; grid-template-columns: max-content minmax(0, 1fr); align-items: start; column-gap: 12px;
  position: relative; overflow: visible;
  background: var(--il-navy-05) !important; background-image: none !important;
  border: 1px solid var(--il-navy-10) !important;
  border-radius: 8px !important; padding: 12px 16px !important; margin-top: 20px !important; box-shadow: none !important;
}
/* deal-detail.css draws a gold 3px rail on this panel's ::before -- retired with the rest. */
html body.public-body #propertyContent .investor-summary-urgency::before { content: none !important; display: none !important; }
/* ⚠ THE GLYPH IS BARE, NEVER A CHIP. deal-detail-base.css paints an amber gradient chip
   and deal-detail.css a navy tile; both are taken back here on every property they set. */
html body.public-body #propertyContent .investor-summary-urgency-icon {
  width: 20px !important; height: 20px !important; flex: none; margin-top: 0; align-self: start !important;
  border-radius: 0 !important; background: transparent !important; background-image: none !important;
  border: 0 !important; box-shadow: none !important; padding: 0 !important;
}
html body.public-body #propertyContent .investor-summary-urgency-icon :is(i, svg) {
  color: var(--il-navy) !important; stroke: var(--il-navy) !important; width: 20px !important; height: 20px !important;
}
html body.public-body #propertyContent .investor-summary-urgency > div > p:first-child {
  font-size: 15px !important; font-weight: 600; line-height: 20px; color: var(--il-ink) !important; margin: 0;
}
html body.public-body #propertyContent .investor-summary-urgency > div > p + p {
  font-size: 14px !important; line-height: 20px; color: var(--il-ink-2) !important; margin: 2px 0 0 !important;
}

/* ----------------------------------------------------------------- 8. the actions
   One primary per surface, filled navy; the second action is the SAME colour as an
   outline. Gold stays the brand's walkthrough accent on the timeline rows, where
   it is an icon tint rather than a 100%-wide face. */
html body.public-body #propertyContent .ui-button.color-gold.type-tinted,
html body.public-body #propertyContent .ui-button.color-gold.type-outline,
html body.public-body #propertyContent .email-btn--gold:not(.deal-timeline-row) {
  background: #fff !important; background-image: none !important;
  border: 1px solid var(--il-navy) !important; color: var(--il-navy) !important; box-shadow: none !important;
}
html body.public-body #propertyContent .ui-button.color-gold.type-tinted:hover,
html body.public-body #propertyContent .ui-button.color-gold.type-outline:hover,
html body.public-body #propertyContent .email-btn--gold:not(.deal-timeline-row):hover { background: var(--il-navy-05) !important; border-color: var(--il-navy-hover) !important; }
html body.public-body #propertyContent .ui-button.color-gold.type-tinted :is(i, svg),
html body.public-body #propertyContent .email-btn--gold:not(.deal-timeline-row) :is(i, svg) { color: var(--il-navy) !important; }

/* ------------------------------------------------------------- 9. "Read more"
   It was a 28px transparent text link at the foot of a 210px clamp with a white
   fade running into it -- the control that opens the only long-form description
   on the page, rendered quieter than the body text it reveals. A full-width
   outline button on its own rule reads as a control, and the fade now ends ON
   that rule instead of bleeding past it. */
html body.public-body #propertyContent .overview-bottomDescription { padding-bottom: 4px; }
html body.public-body #propertyContent .overview-readMore {
  height: auto !important; width: 100%; margin-top: 14px; padding: 9px 12px !important;
  background: #fff !important; border: 1px solid var(--il-navy) !important; border-radius: 6px !important;
  color: var(--il-navy) !important; font-size: 14px !important; font-weight: 600 !important;
}
html body.public-body #propertyContent .overview-readMore:hover { background: var(--il-navy-05) !important; }
html body.public-body #propertyContent .overview-readMore .content { padding: 0 !important; }
/* the chevron is drawn here rather than in the markup, because the button's own
   handler only swaps the label -- one attribute (`aria-expanded`) drives the
   arrow, so the glyph and the screen reader can never disagree. */
html body.public-body #propertyContent .overview-readMore .front-layer::after {
  content: ""; width: 9px; height: 9px; margin-left: 9px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg); transition: transform .2s ease;
}
html body.public-body #propertyContent .overview-readMore[aria-expanded="true"] .front-layer::after { transform: translateY(1px) rotate(225deg); }

/* ------------------------------------------------------------------- 10. the FAQ
   Same card, one surface. The first panel was navy-tinted and the rest slate, so
   the list read as one answer that mattered and four that did not; the step
   numbers were the retired crimson. All white on one hairline, the open one
   marked by its rule rather than by a wash. */
html body.public-body #propertyContent #dealFaqSection details {
  background: #fff; border: 1px solid var(--il-line); border-radius: 10px; padding: 18px 20px;
}
html body.public-body #propertyContent #dealFaqSection details[open] { border-color: var(--il-navy-15); }
html body.public-body #propertyContent #dealFaqSection details > summary > h3 { font-size: 16px; font-weight: 600; line-height: 22px; color: var(--il-ink); margin: 0; }
html body.public-body #propertyContent #dealFaqSection details > summary :is(i, svg) { color: var(--il-ink-3); }
/* The zero-out has to stop at the details list itself (already a grid with its
   own `gap`, line below) -- reaching further silently killed the space-y-4 gap
   INSIDE every FAQ answer body too (the outer wrapper div and the "what if my
   offer is accepted" step list both carry that same class), so a step's text
   ran straight into whatever card came next with no room to breathe. */
html body.public-body #propertyContent #dealFaqSection > .space-y-4 > * + * { margin-top: 0; }
html body.public-body #propertyContent #dealFaqSection details .space-y-4 > * + * { margin-top: 16px; }
html body.public-body #propertyContent #dealFaqSection > .space-y-4 { display: grid; gap: 12px; }
html body.public-body #propertyContent #dealFaqSection :is(ol, ul) > li + li { margin-top: 12px; }
/* Step-number badges: always a circle, never the near-square a stripped
   border-radius can leave behind. */
html body.public-body #propertyContent #dealFaqSection li > span:first-child {
  background: var(--il-navy) !important; color: #fff !important; font-size: 11px; font-weight: 700;
  border-radius: 50% !important; box-shadow: 0 1px 2px rgba(10, 20, 36, .12);
}
html body.public-body #propertyContent #dealFaqSection li > span.bg-slate-300 { background: var(--il-line-2) !important; color: var(--il-ink) !important; }
html body.public-body #propertyContent #dealFaqSection .mb-6 > p:first-child { color: var(--il-crimson); }

/* ------------------------------------------------- 11. the cash-buyers card, flattened
   The last old-brand surface in the left column: a centred crimson CTA on a card
   whose heading was a different face from every other card title. */
html body.public-body #propertyContent #dealCashBuyersCard .il-card-title { font-size: 20px; font-weight: 600; line-height: 28px; color: var(--il-ink); margin: 10px 0 0; justify-content: center; text-align: center; }
html body.public-body #propertyContent #dealCashBuyersCard span.text-secondary { color: var(--il-crimson); letter-spacing: .16em; }
html body.public-body #propertyContent #dealCashBuyersCard a[href^="/join"] { display: inline-flex; width: auto; min-width: 260px; justify-content: center; }
html body.public-body #propertyContent #dealCashBuyersCard :is(.text-emerald-600, .text-emerald-500) { color: var(--il-green); }

/* ---------------------------------------------- 12. the one-column fall-back, restated
   THE WIDTH RULE ABOVE BROKE THE PHONE AND NOTHING THREW. `.dealContent-body`'s
   existing one-column rule lives at (0,1,0) inside `@media (max-width: 1100px)`;
   the two-column rule above it carries `html body.public-body` at (0,2,2). A media
   query adds NO specificity, so the wider rule won at every width and a 334px
   phone was still laying out `1fr + 348px` -- measured: the left column resolved
   to 0px and the whole body of the deal rendered 50px wide beside a full-width
   rail. Every breakpoint a higher-specificity rule reaches has to be restated at
   that same specificity, or the fall-back silently stops existing. */
@media (max-width: 1100px) {
  html body.public-body .dealContent-body { grid-template-columns: minmax(0, 1fr); }
  html body.public-body .dealContent-right { position: static; }
}
@media (max-width: 640px) {
  /* the gutter is the frame's own padding here; a 56px calc() gutter on a 390px
     screen spends 14% of the width on nothing. */
  html body.public-body .dealContent { max-width: 100%; }
}

/* ------------------------------------------- 13. the last of the old surfaces, by ROLE
   These are real JHB colours (the navy depth family out of the brand render
   module), so they are not near-misses -- they are the right palette used in the
   wrong ROLE. A field LABEL is grey ink on this page, everywhere else; a detail
   cell is flat, everywhere else. Left as they were, the condition grid reads as a
   different kind of card from the four fact grids around it. */
html body.public-body #propertyContent .cond-tile {
  background: #fff; border: 1px solid var(--il-line); border-radius: 10px;
}
html body.public-body #propertyContent .cond-tile-name { color: var(--il-ink-2); font-family: var(--il-font); }
html body.public-body #propertyContent .cond-tile-val { color: var(--il-ink); font-family: var(--il-font); font-weight: 600; }
html body.public-body #propertyContent .cond-tile-ic { background: var(--il-navy-05); color: var(--il-navy); }
html body.public-body #propertyContent .cond-tile-ic :is(i, svg) { color: var(--il-navy); }

/* `#88a0c2` on white is 2.9:1 -- under the floor for a control's own label, and
   both of these ARE controls (the address unlock is the only thing the gate asks
   anyone to do). Navy for the chip's rim, ink-2 for the feedback toggle. */
html body.public-body #propertyContent .deal-address-chip { border-color: var(--il-navy) !important; }
html body.public-body #propertyContent .deal-pass-toggle-btn { color: var(--il-ink-2) !important; }
html body.public-body #propertyContent .deal-pass-toggle-btn :is(i, svg) { color: var(--il-ink-3) !important; }
html body.public-body #propertyContent .deal-pass-toggle-btn:hover { color: var(--il-navy) !important; }

/* ONE green. `#047857`, `#16a34a` and `#15803d` were all on this page at once --
   three greens for one meaning, which is the drift the palette exists to end. */
html body.public-body #propertyContent :is(.text-emerald-600, .text-emerald-500, .text-emerald-700, .text-green-600, .text-green-700) { color: var(--il-green) !important; }
html body.public-body #propertyContent :is(.text-emerald-600, .text-emerald-500, .text-emerald-700) :is(i, svg),
html body.public-body #propertyContent :is(i, svg).text-emerald-600 { color: var(--il-green) !important; }

/* the leftover gold/slate washes: a pale amber panel inside a card is the pastel
   family again, and it was being used for a NOTE rather than a warning. */
html body.public-body #propertyContent :is(.bg-amber-50, .bg-amber-100) { background-color: var(--il-wash) !important; }
html body.public-body #propertyContent :is(.text-amber-700, .text-amber-800, .text-amber-900) { color: var(--il-ink) !important; }
html body.public-body #propertyContent :is(.border-amber-200, .border-amber-300, .border-amber-400) { border-color: var(--il-line) !important; }

/* ------------------------------------------------------- 14. the rail, at the new width
   The rail grew from 320 to 348, so the price card's two quick-action rows have
   room for three buttons again rather than wrapping to two-and-one. */
html body.public-body #propertyContent #dealPriceBlock { padding: 22px; }
html body.public-body #propertyContent .priceBlock-extraActions { gap: 8px; }
html body.public-body #propertyContent .priceBlock-extraActions .ui-button { min-width: 0; }

/* ------------------------------------------- 15. the sticky phone bar, and the last row
   `#mobileOfferBar` is a FIXED element outside `#propertyContent`, so none of the
   deal-page rules above could reach it -- which is why the phone kept a solid gold
   walkthrough button beside a navy offer button while the desktop pair had already
   become navy-filled + navy-outline. The same two actions rendering as two
   different pairs depending on the screen is the inconsistency, not the gold. */
html body.public-body #mobileOfferBar .email-btn--gold {
  background: #fff !important; background-image: none !important; box-shadow: none !important;
  border: 1px solid var(--il-navy) !important; color: var(--il-navy) !important;
}
html body.public-body #mobileOfferBar .email-btn--gold :is(i, svg) { color: var(--il-navy) !important; }
html body.public-body #mobileOfferBar .email-btn--gold:hover { background: var(--il-navy-05) !important; }
html body.public-body #mobileOfferBar :is(.text-primary, .text-slate-900) { color: var(--il-ink); }
html body.public-body #mobileOfferBar { border-top-color: var(--il-line); box-shadow: 0 -6px 20px rgba(26, 27, 34, .08) !important; }

/* the transaction rows share the condition grid's vocabulary and were missed with
   it: `#0f172a` -> navyNight through the transform, which is a FILL colour being
   spent as body ink. */
html body.public-body #propertyContent .deal-detail-row-val { color: var(--il-ink); font-weight: 600; }
html body.public-body #propertyContent .deal-detail-row-val.is-muted { color: var(--il-ink-3); }
html body.public-body #propertyContent .deal-detail-row-label { color: var(--il-ink-2); }

/* the contact card names the person you are about to ring; #0f172a came through the
   transform as navyNight, a FILL being spent as body ink -- the same miss as the
   condition grid and the transaction rows, on the last card that had it.
   The !important answers deal-detail.css's own "body.public-body #agentName" rule,
   which already carries one -- measured with CDP rather than read off the sheet,
   because an id-on-id fight is decided by that keyword and not by the count. */
html body.public-body #propertyContent :is(#agentName, .contactCard-name) { color: var(--il-ink) !important; }
html body.public-body #propertyContent .contactCard-lineLabel { color: var(--il-ink-2); }

/* ================================================== 16. the round-2 polish, measured
   Everything below was found by looking at the rendered section rather than at the
   sheet, and each had no runtime symptom at all. */

/* (a) THE GOLD EDGE ON THE URGENCY PANEL. deal-detail.css draws a 3px gold gradient
   as a ::before on this panel -- so after the panel itself went neutral with a
   crimson rule, the left edge carried BOTH: a gold hairline and a crimson bar, two
   accent colours on one 1085px strip. The panel keeps the crimson (it is about a
   deadline) and the pseudo-element goes. */
html body.public-body #propertyContent .investor-summary-urgency::before,
html body.public-body #propertyContent .investor-summary-urgency::after { content: none !important; display: none !important; }

/* (b) THE PANEL WAS 141px TALL FOR TWO LINES OF TEXT. Its inner wrapper is a BLOCK
   whose children are two <p> separated by newlines in the template; the whitespace
   text nodes each generated a line box at the inherited 26px line-height, so there
   was ~24px of nothing above the heading and ~23px between the two lines, with both
   paragraphs correctly reporting margin 0. Making the wrapper a GRID is the fix
   rather than line-height:0 -- grid and flex containers drop whitespace-only text
   nodes outright, so the gap becomes a declared value instead of a leftover. */
html body.public-body #propertyContent .investor-summary-urgency > div { display: grid; gap: 3px; align-content: center; }
html body.public-body #propertyContent .investor-summary-urgency { align-items: center; padding: 11px 14px !important; }

/* (c) THE OVERVIEW'S PARAGRAPH RHYTHM. `.overview-bottomDescription` is a grid with
   a 16px gap, which spaces its two DIRECT children -- the highlights block and the
   investor-summary block -- and nothing inside them. So the deal description's own
   paragraphs sat 16px apart while the summary copy that follows them ran flush
   against the last one, and the three read as one wall. */
html body.public-body #propertyContent #investorSummarySection { display: grid; gap: 14px; }
html body.public-body #propertyContent #investorSummaryCopy { display: grid; gap: 12px; }
html body.public-body #propertyContent #propertyDescription { margin: 0; }
html body.public-body #propertyContent #investorSummaryCopy > p { margin: 0; }

/* (d) ONE INK FOR BODY TEXT. The highlight list was the only navy prose on the page
   (`#highlightsList li > span`, !important), which made six scannable facts read as
   six links. The green tick is already the accent; the words are ink like every
   other fact here. */
html body.public-body #propertyContent #highlightsList li > span { color: var(--il-ink) !important; }

/* (e) THE RENT CARD'S HEADING. `.text-primary` is mapped to navy globally with
   !important, so this h3 was the only card title on the page that was not ink. */
html body.public-body #propertyContent #rentEstimateContent h3 { color: var(--il-ink) !important; }

/* (f) THE RAIL'S THREE QUICK ACTIONS. Share / Save PDF / Save are one row of three
   equal things, and as flex items with `flex: 1` and a wrap they came out two-up
   then one -- which reads as the third being a different kind of action. A 3-column
   grid says what they are, and the rail is wide enough for it now.
   The grid goes on .pricing-quick-actions, NOT on .priceBlock-extraActions: the
   buttons are ITS children and the outer element holds exactly one wrapper --
   measured, so a three-column grid up there sizes that ONE wrapper to a third of
   the rail and crushes all three buttons into 39px, which is worse than the wrap
   it was meant to fix. */
html body.public-body #propertyContent #dealPriceBlock .priceBlock-extraActions { display: block; }
html body.public-body #propertyContent #dealPriceBlock .pricing-quick-actions {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%;
}
html body.public-body #propertyContent #dealPriceBlock .pricing-quick-actions > * { min-width: 0; width: 100%; }
html body.public-body #propertyContent #dealPriceBlock .pricing-quick-actions .email-btn-label { white-space: nowrap; }

/* ============================================================ 17. the FAQ, evened out
   (a) HALF THE QUESTIONS WERE NAVY AND HALF WERE INK. The markup carries
   `text-primary` on some of the eight <h3> and not on others, and `.text-primary`
   is mapped to navy GLOBALLY with !important -- so which questions were navy was
   decided by which ones somebody happened to type a class on. One ink for all of
   them; the accordion's own chevron is what says which is open. */
html body.public-body #propertyContent #dealFaqSection details > summary > h3,
html body.public-body #propertyContent #dealFaqSection details > summary h3 { color: var(--il-ink) !important; }

/* (b) RED WORDS POINTING AT NAVY BUTTONS. The answers name the page's own controls
   in running text -- "Tap Submit an Offer above" -- and those were crimson while
   the button they name is navy. A cross-reference has to be the colour of the thing
   it refers to, or the reader goes looking for a red button that is not there.
   The section eyebrow keeps crimson: it labels the section rather than pointing at
   a control, and it is the one place on this card the accent still earns its keep. */
html body.public-body #propertyContent #dealFaqSection :is(a, strong, span, b).text-secondary { color: var(--il-navy) !important; }
html body.public-body #propertyContent #dealFaqSection a.text-secondary { text-decoration-color: var(--il-navy-25) !important; }
html body.public-body #propertyContent #dealFaqSection a.text-secondary:hover { text-decoration-color: var(--il-navy) !important; }
html body.public-body #propertyContent #dealFaqSection .mb-6 > p:first-child { color: var(--il-crimson) !important; }

/* (c) the open/closed panels differed only by a tint before; now they differ by the
   rule around them, and a closed one should not carry more vertical weight than the
   answer it hides. */
html body.public-body #propertyContent #dealFaqSection details:not([open]) { padding: 14px 20px; }
html body.public-body #propertyContent #dealFaqSection details > summary { align-items: center; }
html body.public-body #propertyContent #dealFaqSection details > summary :is(i, svg) { flex: none; }

/* (d) "Read more" sat 6px under the CTA row it follows; at that distance it reads as
   part of the button group rather than as the control that opens the text above. */
html body.public-body #propertyContent .overview-readMore { margin-top: 20px; }

/* ====================================================== 18. one card surface, finally
   The cash-buyers card was the only TINTED panel left in the left column
   (`#eef3f9`, the navy wash) while its eight neighbours are white on a hairline --
   so on a page of identical cards it read as a different KIND of thing, and a pale
   blue panel is the pastel family this round is removing. The navy CTA inside it is
   already the loudest object on that card; the surface does not also have to shout.
   Measured with CDP: the fill is a 2-id !important in the skinned sheet, so this
   names three (#propertyContent + the card + the body class chain) to settle it. */
html body.public-body #propertyContent #dealCashBuyersCard {
  background: #fff !important; background-image: none !important;
  border: 1px solid var(--il-line) !important; box-shadow: none !important;
}
/* the signed-in address hint is a NOTICE, not a card -- the same neutral ground the
   urgency strip uses, so the two read as one kind of aside. */
html body.public-body #propertyContent #loggedInAddressHint {
  background: var(--il-wash) !important; background-image: none !important;
  border: 1px solid var(--il-line) !important; color: var(--il-ink-2) !important;
}

/* ====================================================== 19. the offer / contact modal (#contactModal)
   The shared .public-mobile-modal-card sizing (public-ui.css: width min(96vw,70rem),
   overflow-y:auto on the WHOLE card) is built for the wide buyer-unlock dialog and
   scrolls the entire card as one block -- fine for a short dialog, and it loses the
   rounded header and the close button the moment content runs past the viewport.
   This form runs to 900px+ (name/email/entity/phone, close date, financing, EMD,
   proof of funds, contingencies, the terms box, the commitment ledger), so it gets
   its own width and the same pinned .ui-modal-top / scrolling .ui-modal-content
   split every other IL dialog on this page already uses. Scoped by id, which is
   what lets it win over the shared class rule regardless of stylesheet order. */
body.public-body #contactModal .public-mobile-modal-card {
  width: min(94vw, 640px);
  max-height: min(92vh, 780px);
  overflow: hidden;
}
body.public-body #contactModal .ui-modal-content {
  flex: 1 1 auto;
  max-height: none;
  padding: 24px 28px 28px;
}
@media (max-width: 640px) {
  body.public-body #contactModal .ui-modal-content { padding: 18px; }
}
/* The commitment ledger (public-ui.css, .oc-ledger) carries its own margin-top for
   the flow it was designed to drop into; the grid below supplies the same gap, so
   stacking both would double it. Untouched otherwise -- its markup, colours and
   behaviour are a shared, tested contract with the standalone /offer page. */
#contactModal .oc-ledger { margin-top: 0; }

/* One rhythm for the form's own sections. `display` lives in its own :not(.hidden)
   rule (never a bare `display:grid`) because #dealContactForm and #dealOfferFields
   both carry this class AND get Tailwind's `.hidden` toggled on/off directly --
   this sheet loads after tailwind.css, so an ungated rule here would always win
   and the element would never actually hide. Same fix as the modal backdrop above. */
.offer-form-section:not(.hidden) { display: grid; row-gap: 22px; }

/* align-items:start -- without it a grid row stretches every cell to match its
   tallest sibling, and the close-date cell (input + the 5 date chips + the
   read-back note, all inside one .withLabel-wrapper) is taller than "Cash or
   Hard Money?" beside it. The financing <select>'s OWN wrapper is display:grid
   too (see .withLabel-wrapper), so that leftover height doesn't just sit below
   it -- align-content there defaults to stretch and inflates the select box
   itself into an empty ~90px well. Two lines, one bug: this stops the stretch
   at the grid cell, align-content:start on .withLabel-wrapper stops it happening
   again inside any wrapper that ever ends up taller than its own content. */
.offer-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 22px; align-items: start; }
@media (max-width: 640px) { .offer-form-grid { grid-template-columns: 1fr; } }

/* Informational banners (the RSVP / walkthrough-passed intro, the restored-draft
   note). Neither sets `display` -- #dealContactIntro is only ever toggled via
   `.hidden`, and #dealOfferDraftNote's own script toggles Tailwind's `.hidden` /
   `.flex` pair directly, so laying out its row here would fight that exact switch. */
.offer-info-box { background: var(--il-navy-05); border: 1px solid var(--il-navy-15); border-radius: 10px; padding: 16px 18px; font-size: 14px; line-height: 20px; color: var(--il-ink); }
.offer-draft-note { align-items: center; justify-content: space-between; gap: 12px; background: var(--il-wash); border: 1px solid var(--il-line); border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--il-ink-2); }

/* The "Last step" heading above the terms on the deal page's offer form. */
.offer-laststep { display: grid; row-gap: 4px; }
.offer-laststep-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--il-ink); }
.offer-laststep-tag { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--il-navy); background: var(--il-navy-05); border: 1px solid var(--il-navy-15); border-radius: 999px; padding: 3px 10px; }
.offer-laststep-sub { margin: 0; font-size: 14px; line-height: 20px; color: var(--il-ink-2); }
.offer-terms-box { background: var(--il-wash); border: 1px solid var(--il-line); border-radius: 10px; padding: 18px 20px; }
.offer-terms-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--il-ink-2); margin: 0 0 10px; }
/* The list is styled from the UL down (never per-<li>): syncOfferTermsList() (deal-
   detail.html) replaces the <li> children wholesale with a deal's own custom terms,
   which carry no class of their own -- a rule on the <li> would only ever reach the
   five static fallback terms. */
.offer-terms-list { margin: 0; padding-left: 18px; display: grid; row-gap: 6px; font-size: 13px; line-height: 19px; color: var(--il-ink-2); list-style: disc outside; }
/* Real bullets, one short line each: a base reset strips list markers, which is what made
   the list read as a wall of paragraphs. */
.offer-terms-list li { display: list-item; }
.offer-terms-list li::marker { color: var(--il-navy); }
/* The scannable caption in front of each term (see syncOfferTermsList / offerTermsItems).
   Bold alone reads as emphasis on the same sentence -- the stronger ink is what makes it
   read as a LABEL, the same "caption, then the sentence" split .oc-title/.oc-statement
   already use two panels down, so a buyer can skim twelve captions instead of reading
   twelve paragraphs. */
.offer-terms-list li b { color: var(--il-ink); font-weight: 700; }

.offer-turnstile-slot { background: var(--il-wash); border: 1px solid var(--il-line); border-radius: 10px; padding: 14px 16px; }

/* The advisory note on a below-floor offer amount (never a block -- see the comment
   over #dealOfferAmountNote in the markup). Gold rather than crimson: the form still
   submits, this is a heads-up, not a refusal. */
.il-field-hint--warn { color: var(--il-gold-ink); font-weight: 600; }

/* The post-submit receipt. Navy, never the success-ramp green -- this is the
   biggest moment on the page and the brand receiving an offer, not a form
   validating (guarded: tests/deal-detail-brand-surface.test.js). */
.offer-success-panel { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; background: var(--il-navy-05); border: 1px solid var(--il-navy-15); border-radius: 12px; padding: 28px 24px; }
.offer-success-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--il-navy); color: #fff; flex: none; }
.offer-success-icon svg { width: 26px; height: 26px; }
.offer-success-title { font-size: 19px; font-weight: 700; color: var(--il-navy); margin: 0; }
.offer-success-summary { font-size: 14px; font-weight: 600; color: var(--il-ink-2); margin: 0; }
.offer-success-points { display: grid; row-gap: 14px; margin-top: 22px; }
.offer-success-point { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 20px; color: var(--il-ink); margin: 0; }
.offer-success-point svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--il-crimson); }

/* ====================================================== 20. the FAQ card: the missing gap, and a left accent
   `#dealFaqSection` sits OUTSIDE `.dealContent-body`'s grid -- a plain sibling
   block inside `#propertyContent`, not a grid item -- so the row-gap mechanism
   that guarantees "no two cards touch" inside the grid (section 2, above) never
   reaches it. Worse, it also carries `.il-section-card`, and THAT class is
   zeroed with `margin: 0 !important` a thousand lines up (correct for a card
   living in the grid, where row-gap is the only spacing mechanism that is
   supposed to run) -- so the FAQ card's own top edge was pinned flush against
   whichever card happened to be last in the left column, and no margin
   declared here without `!important` could ever move it. `.dealsNearby-
   wrapper`, the section right after this one, already earns its own breathing
   room from `padding: 36px 0` (a property the reset does not touch); the FAQ
   card gets the matching margin here so the same rhythm holds on both sides.
   No container-level left accent: section 21 already marks each QUESTION with
   its own crimson rail, and a second, paler bar running the height of the
   whole card on top of that read as a stray gray line rather than a second
   signal -- one accent per idea, not two for one. */
html body.public-body #propertyContent #dealFaqSection {
  margin-top: 36px !important;
  border-color: var(--il-navy-15) !important;
}
@media (max-width: 640px) {
  html body.public-body #propertyContent #dealFaqSection { margin-top: 24px !important; }
}
/* A closed question previews the open look on hover -- the summary row inside it
   already washes on hover; the card around it should agree, or the row changes
   and the box it sits in does not. */
html body.public-body #propertyContent #dealFaqSection details:not([open]):hover {
  border-color: var(--il-navy-15);
}
/* A hair more room between questions now that they are full bordered cards
   rather than a divided list -- 12px read as tight at that weight. */
html body.public-body #propertyContent #dealFaqSection > .space-y-4 { gap: 14px; }

/* ==================================================== 21. Job Market / Market Strength, flattened
   The tone map on these two cards ('bg-sky-50 text-sky-800 border-sky-200', the
   emerald/rose siblings) never went through the palette conversion in section 3
   -- it is Tailwind's stock scale, straight from tailwind.css, and none of the
   three is a colour this page uses anywhere else. It is also the exact
   tinted-panel pattern section 13 already removed from the amber "note" card for
   reading as a competing colour rather than as content -- these two are asides
   in the same register (a labor-market rate, a neighbourhood score), not a
   verdict, so they get the identical neutral treatment: flat wash, ink text, no
   colour-coded status. */
html body.public-body #propertyContent :is(.bg-sky-50, .bg-emerald-50, .bg-rose-50) { background-color: var(--il-wash) !important; }
html body.public-body #propertyContent :is(.border-sky-200, .border-emerald-200, .border-rose-200) { border-color: var(--il-line) !important; }
html body.public-body #propertyContent :is(.text-sky-800, .text-emerald-800, .text-rose-800) { color: var(--il-ink) !important; }

/* ==================================================== 22. The Worker-rendered pages (main.il-ssr)
   /market-index, /locations, /deals/<area>, /cash-buyers/<area>, the strategy pages,
   /match and /offer are built in worker.js, not from a file, so they never went through
   the rebuild scripts the static pages did. Their markup is the kit now (worker.js:
   ilBtn / ilSsrHero / ilSsrHead / ilSsrCta and the seo* section helpers); this block is
   the handful of layouts the kit did not already have.
   THE ONE TEXTURE KEPT is the ray sheet (.il-rays) — it is the ground behind the hero and
   the newsletter card, the look the operator asked to keep. It rides a ::before so it can
   be masked and faded without touching the text, and it is never behind body copy on its
   own: every block of copy on a ray panel sits on a white card or on the panel's own
   near-white wash. */
html body.public-body main.il-ssr section { border-image: none !important; }
html body.public-body main.il-ssr + [data-home-section="trust-bar"] { border-top: 1px solid var(--il-line) !important; border-image: none !important; }
main.il-ssr .il-page { display: grid; row-gap: 0; padding-top: 24px; }
main.il-ssr svg.lucide { width: 16px; height: 16px; flex: none; }
main.il-ssr .ui-button svg.lucide { width: 20px; height: 20px; }

.il-rays { position: relative; isolation: isolate; overflow: hidden; background: #fff; border: 1px solid var(--il-line); border-radius: var(--il-radius); }
.il-rays::before {
  content: ""; position: absolute; inset: 0 0 -140px 0; z-index: -1; pointer-events: none;
  background:
    url('/branding/rayeffect-m-fade.webp') 50% 100% / cover no-repeat,
    url('/branding/rayeffect-m-fade.webp') 30% 100% / 160% auto no-repeat;
  opacity: .72;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 42%, transparent 82%);
  mask-image: linear-gradient(to top, #000 0%, #000 42%, transparent 82%);
}

/* .il-rays-band: the SAME light, transparent ray sheet, for a section that is already
   full-bleed (no card border/radius of its own to draw) -- the "How Buying Works" band
   and the shared buy-box CTA band below. It is the site's version of the veiled ray
   field the new HOPE emails wear top and bottom (RAY_LAYERS in
   hope-marketing/emails/shell.mjs): a low-opacity wash rather than a loud texture, faded
   at BOTH edges (not just the top, the way the hero's bleed-off-the-bottom mask is) so a
   short mid-page section blends into the plain white ones on either side of it instead
   of being cropped into near-invisibility by a mask tuned for a tall hero. Nothing here
   sets a background colour of its own -- the section keeps whatever ground it already
   painted (often --il-ground, near-white), and the rays ride on TOP of that as a second,
   z-index:-1 layer, behind the section's own copy and cards. */
.il-rays-band { position: relative; isolation: isolate; overflow: hidden; }
.il-rays-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('/branding/rayeffect-m-fade.webp') 50% 50% / cover no-repeat;
  opacity: .24;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 75%, transparent 100%);
}

/* the hero */
.il-ssr-hero { padding: 56px 40px; display: grid; gap: 32px; text-align: center; }
.il-ssr-hero_copy { display: grid; justify-items: center; row-gap: 16px; max-width: 760px; margin: 0 auto; }
.il-ssr-hero--split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; text-align: left; }
.il-ssr-hero--split .il-ssr-hero_copy { justify-items: start; margin: 0; }
.il-ssr-hero .il-chip { background: #fff; border: 1px solid var(--il-line); color: var(--il-navy); }
html body.public-body main.il-ssr .il-ssr-title { margin: 0; font-family: var(--il-font) !important; font-size: 40px; font-weight: 700; line-height: 48px; letter-spacing: -.01em; color: var(--il-ink) !important; }
.il-ssr-sub { margin: 0; color: var(--il-ink-2); font-size: 17px; line-height: 26px; max-width: 680px; }
.il-ssr-note { margin: 0; color: var(--il-ink-2); font-size: 14px; line-height: 20px; }
.il-ssr-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.il-ssr-hero--split .il-ssr-actions { justify-content: flex-start; }
.il-ssr-hero_aside { min-width: 0; }

/* the four-number strip under the hero: one card, four cells on hairlines */
.il-ssr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 !important; margin-top: 24px; overflow: hidden; }
.il-ssr-stat { padding: 20px 16px; text-align: center; }
.il-ssr-stat + .il-ssr-stat { border-left: 1px solid var(--il-line); }
.il-ssr-stat_v { color: var(--il-navy); font-size: 24px; font-weight: 700; line-height: 32px; font-variant-numeric: tabular-nums; }
.il-ssr-stat_l { color: var(--il-ink-2); font-size: 13px; font-weight: 500; line-height: 18px; margin-top: 2px; }

/* a section heading */
.il-ssr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.il-ssr-head .il-eyebrow { display: block; margin-bottom: 6px; }
html body.public-body main.il-ssr .il-section-title { font-family: var(--il-font) !important; color: var(--il-ink) !important; }
/* .il-section-sub never got the same guarantee -- only the heading did -- so a body
   paragraph on this scope was one stray higher-specificity rule away from reading as
   near-white on white (the closing CTA's own copy, e.g.). Pin it the same way. */
html body.public-body main.il-ssr .il-section-sub { color: var(--il-ink-2) !important; }

/* feature cards */
.il-ssr-feature { display: grid; row-gap: 10px; align-content: start; }
.il-ssr-feature_icon { width: 40px; height: 40px; border-radius: 10px; background: var(--il-navy-05); color: var(--il-navy); display: grid; place-items: center; }
.il-ssr-feature_icon svg.lucide { width: 20px; height: 20px; }
.il-ssr-feature h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 24px; color: var(--il-ink); }
.il-ssr-feature p { margin: 0; color: var(--il-ink-2); font-size: 15px; line-height: 22px; }

/* the five buying steps */
.il-ssr-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* metric cards (market index) */
.il-ssr-metric { display: grid; row-gap: 4px; }
.il-ssr-metric_v { color: var(--il-navy); font-size: 32px; font-weight: 700; line-height: 40px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.il-ssr-metric_l { color: var(--il-ink); font-size: 15px; font-weight: 600; line-height: 20px; }
.il-ssr-metric_s { color: var(--il-ink-2); font-size: 13px; line-height: 18px; }
.il-ssr-where { display: grid; row-gap: 12px; margin-top: 24px; }
.il-ssr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.il-ssr-empty { text-align: center; display: grid; justify-items: center; row-gap: 8px; padding: 40px 24px; }
.il-ssr-empty .il-card-title { margin: 0; }
a.il-chip.il-ssr-chip { text-decoration: none; transition: background .15s ease; }
a.il-chip.il-ssr-chip:hover { background: var(--il-navy-10); }

/* the newsletter band: the ray panel, one white card on it */
.il-ssr-band { padding: 48px 24px; margin: 36px 0; }
.il-ssr-news { max-width: 640px; margin: 0 auto; text-align: center; display: grid; justify-items: center; row-gap: 12px; padding: 32px; }
.il-ssr-news_title { margin: 0; font-size: 28px; font-weight: 700; line-height: 36px; color: var(--il-ink); }
.il-ssr-news_form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; width: 100%; max-width: 480px; margin-top: 8px; }
.il-ssr-news_proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; color: var(--il-ink-2); font-size: 13px; line-height: 18px; }
.il-ssr-news_proof span { display: inline-flex; align-items: center; gap: 6px; }
.il-ssr-news_proof svg.lucide { width: 14px; height: 14px; color: var(--il-navy); }

/* the closing call to action */
.il-ssr-cta { text-align: center; display: grid; justify-items: center; row-gap: 12px; padding: 40px 24px; }
/* Belt-and-braces on top of the main.il-ssr rules above: this card's own heading and
   copy are pinned to ink here too, so the CTA can never again render as the faint,
   near-invisible text an operator reported (a screenshot showed it reading as barely
   more than white-on-white). */
.il-ssr-cta .il-section-title { color: var(--il-ink) !important; }
.il-ssr-cta .il-section-sub { color: var(--il-ink-2) !important; max-width: 620px; }
.il-ssr-cta .il-ssr-actions { margin-top: 8px; }

@media (max-width: 1000px) {
  .il-ssr-hero--split { grid-template-columns: 1fr; text-align: center; }
  .il-ssr-hero--split .il-ssr-hero_copy { justify-items: center; margin: 0 auto; }
  .il-ssr-hero--split .il-ssr-actions { justify-content: center; }
  .il-ssr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .il-ssr-hero { padding: 36px 20px; }
  html body.public-body main.il-ssr .il-ssr-title { font-size: 30px; line-height: 38px; }
  .il-ssr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .il-ssr-stat:nth-child(3) { border-left: 0; }
  .il-ssr-stat:nth-child(n+3) { border-top: 1px solid var(--il-line); }
  .il-ssr-steps { grid-template-columns: 1fr; }
  .il-ssr-news { padding: 24px 16px; }
  .il-ssr-news_form { grid-template-columns: 1fr; }
  .il-ssr-band { padding: 24px 12px; }
  .il-ssr-actions .ui-button { width: 100%; }
}
/* the --3 variant has to be restated at the same weight as the blanket grid rule in
   section 13, which pins every .il-card-grid to four columns with !important. */
html body.public-body .il-card-grid.il-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 860px) { html body.public-body .il-card-grid.il-card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 520px) { html body.public-body .il-card-grid.il-card-grid--3 { grid-template-columns: 1fr !important; } }

/* the server-printed deal card (replaced by ILCards.deal once il-shell.js runs) */
a.il-ssr-dealcard { display: grid; padding: 0 !important; overflow: hidden; text-decoration: none; color: var(--il-ink); }
.il-ssr-dealcard_img { display: block; height: 186px; background: var(--il-wash) center / cover no-repeat; border-bottom: 1px solid var(--il-line); }
.il-ssr-dealcard_body { display: grid; row-gap: 4px; padding: 14px 16px 16px; }
.il-ssr-dealcard_body b { font-size: 18px; line-height: 24px; color: var(--il-ink); }
.il-ssr-dealcard_body span { color: var(--il-ink-2); font-size: 14px; line-height: 20px; }

/* regions and strategy link cards (/locations) */
.il-ssr-regions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.il-ssr-region_head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.il-ssr-region_head h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 24px; color: var(--il-ink); }
.il-ssr-region .il-ssr-chips { margin-top: 0; }
a.il-ssr-linkcard { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: 14px; text-decoration: none; color: var(--il-ink); transition: border-color .15s ease; }
a.il-ssr-linkcard:hover { border-color: var(--il-navy-25); }
.il-ssr-linkcard_body { display: grid; row-gap: 2px; }
.il-ssr-linkcard_body b { font-size: 16px; font-weight: 600; line-height: 22px; }
.il-ssr-linkcard_body span { color: var(--il-ink-2); font-size: 14px; line-height: 20px; }
a.il-ssr-linkcard > svg.lucide { color: var(--il-ink-3); }
.il-ssr-coverage { display: grid; row-gap: 16px; text-align: left; }
.il-ssr-coverage_head { display: flex; align-items: center; gap: 12px; }
.il-ssr-coverage_head p { margin: 0; }
.il-ssr-coverage_n { color: var(--il-navy); font-size: 22px; font-weight: 700; line-height: 28px; }
.il-ssr-coverage_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.il-ssr-coverage_grid span { display: flex; align-items: center; gap: 8px; border: 1px solid var(--il-line); border-radius: 8px; padding: 10px 12px; font-size: 14px; font-weight: 500; color: var(--il-ink); }
.il-ssr-coverage_grid svg.lucide { color: var(--il-navy); }
.il-ssr-elsewhere { display: grid; justify-items: center; row-gap: 10px; text-align: center; margin-top: 24px; }
.il-ssr-elsewhere .ui-button .content { white-space: normal; text-align: left; }

/* the area-alert form, on a white card beside its heading */
.il-ssr-leadcard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; padding: 32px; }
.il-ssr-leadcard_copy { display: grid; row-gap: 8px; }
.il-ssr-actions--start { justify-content: flex-start; margin-top: 8px; }
.il-ssr-lead { display: grid; row-gap: 12px; position: relative; }
.il-ssr-lead .ui-input { width: 100%; }
.il-ssr-check { display: flex; gap: 10px; align-items: flex-start; color: var(--il-ink-2); font-size: 14px; line-height: 20px; }
.il-ssr-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--il-navy); flex: none; }
.il-ssr-lead_msg { font-size: 14px; line-height: 20px; color: var(--il-ink-2); text-align: center; min-height: 20px; }
.il-ssr-lead_msg.is-error { color: var(--il-crimson); }
.il-ssr-lead_done { text-align: center; padding: 20px; font-weight: 600; color: var(--il-green); background: var(--il-mint-05); border-radius: 8px; }

/* /match: the quiz card in the kit's language */
html body.public-body main.il-ssr .quiz-shell { max-width: 760px; margin: 0 auto; }
html body.public-body main.il-ssr .quiz-card { background: #fff !important; border: 1px solid var(--il-line) !important; border-radius: var(--il-radius) !important; box-shadow: none !important; }
html body.public-body main.il-ssr .quiz-card::before, html body.public-body main.il-ssr .quiz-card::after { display: none !important; }

/* the old fixed header needed 128-160px of clearance; the IL header is in flow */
html body.public-body main.il-ssr .pt-32 { padding-top: 24px !important; }

@media (max-width: 860px) {
  .il-ssr-regions, .il-ssr-leadcard { grid-template-columns: 1fr; }
  .il-ssr-leadcard { padding: 20px; gap: 20px; }
}
html body.public-body main.il-ssr :is(.quiz-step-label, .quiz-step-count, .quiz-q-title, .quiz-bulk button, .quiz-chip, .quiz-opt, .quiz-back, .quiz-count, .quiz-count-label) { font-family: var(--il-font) !important; }
html body.public-body main.il-ssr .quiz-step-label { color: var(--il-navy); letter-spacing: .08em; font-weight: 600; }
html body.public-body main.il-ssr .quiz-seg { background: var(--il-line); }
html body.public-body main.il-ssr .quiz-seg::after { background: var(--il-navy); }
html body.public-body main.il-ssr .quiz-q-title { color: var(--il-ink); font-size: 20px; line-height: 28px; font-weight: 600; }
html body.public-body main.il-ssr :is(.quiz-chip, .quiz-opt, .quiz-bulk button) { box-shadow: none; transform: none; border-width: 1px; border-color: var(--il-line-2); border-radius: 8px; }
html body.public-body main.il-ssr :is(.quiz-chip, .quiz-opt):hover { transform: none; box-shadow: none; border-color: var(--il-navy-25); }
html body.public-body main.il-ssr .quiz-chip[aria-pressed="true"], html body.public-body main.il-ssr .quiz-opt[aria-pressed="true"] { background: var(--il-navy-05); border-color: var(--il-navy); color: var(--il-navy); box-shadow: none; }
/* the offer commitment ledger (public-ui.css .oc-ledger) wore the retired 3px red-to-navy
   rail and a drop shadow; in this language it is one more hairline card. */
html body.public-body .oc-ledger { border-radius: var(--il-radius); box-shadow: none; border-color: var(--il-line); }
html body.public-body .oc-ledger::before { display: none; }

/* ==================================================== 23. The last of the retired kit, site-wide
   Found by scratch/front-audit.mjs walking every public page in Chromium — each one
   rendered, threw nothing, and still wore the old brand. */
/* (1) public-ui.css sets `body.public-body * { font-family: Outfit }`, so any element this
   sheet did not name explicitly — a <strong>, a <legend>, a <dt>, a filter pill — stayed
   Outfit inside an Inter page. Answered at the same breadth, one class heavier. */
html body.public-body *:not(svg):not(svg *):not(code):not(pre):not(kbd):not(.font-mono) { font-family: var(--il-font) !important; }
/* (2) the five button families an earlier round left on their own gradient-and-glow system.
   The kit has one primary action and it is flat navy; a second action is the same colour
   outlined. */
html body.public-body :is(.btn-email, .wci-btn, .investor-news-subscribe) {
  background: var(--il-navy) !important; background-image: none !important; color: #fff !important;
  border: 1px solid var(--il-navy) !important; border-radius: 8px !important; box-shadow: none !important;
  font-family: var(--il-font) !important; font-weight: 500 !important; font-size: 1rem !important; line-height: 1.375rem !important;
  letter-spacing: 0 !important; text-transform: none !important; text-shadow: none !important; transform: none !important;
  padding: 11px 20px !important; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
html body.public-body :is(.btn-email, .wci-btn, .investor-news-subscribe):hover { background: var(--il-navy-hover) !important; border-color: var(--il-navy-hover) !important; box-shadow: none !important; transform: none !important; }
html body.public-body :is(.btn-email, .wci-btn, .investor-news-subscribe):disabled { background: #d9d9d9 !important; border-color: #d9d9d9 !important; color: var(--il-ink-3) !important; }
html body.public-body :is(.btn-email, .wci-btn, .investor-news-subscribe)::before,
html body.public-body :is(.btn-email, .wci-btn, .investor-news-subscribe)::after { display: none !important; content: none !important; }
/* the "white" outline is the kit's outline wherever it sits: a white face, navy ink and
   rim. It reads on the navy CTA panel and on a white card alike, which the old glass
   variant (white ink on transparent) did not once the panels went light. */
html body.public-body :is(.site-cta-panel, [style*="#0f2440"], main) .btn-outline.btn-outline-white { background: #fff !important; background-image: none !important; color: var(--il-navy) !important; border: 1px solid var(--il-navy) !important; box-shadow: none !important; }
html body.public-body :is(.site-cta-panel, [style*="#0f2440"], main) .btn-outline.btn-outline-white:hover { background: var(--il-navy-05) !important; }
html body.public-body :is(.site-cta-panel, [style*="#0f2440"], main) .btn-outline.btn-outline-white::before, html body.public-body :is(.site-cta-panel, [style*="#0f2440"], main) .btn-outline.btn-outline-white::after { display: none !important; }
/* (3) the red-to-navy rule under section headings */
html body.public-body .section-underline::after { display: none !important; content: none !important; }
/* (4) the red/navy step discs */
html body.public-body :is(.step-number, .step-number-red, .step-number-navy) { background: var(--il-navy-05) !important; background-image: none !important; color: var(--il-navy) !important; box-shadow: none !important; border: 0 !important; }
html body.public-body :is(.step-number, .step-number-red, .step-number-navy)::before, html body.public-body :is(.step-number, .step-number-red, .step-number-navy)::after { display: none !important; }
/* (5) the walkthrough check-in card's head rail */
html body.public-body .wci-head::after { display: none !important; }
/* (6) the newsletter band keeps its ray sheet (the texture the operator asked to keep)
   and loses the two red-to-navy rails drawn above and below it. */
html body.public-body .investor-news-band::before { display: none !important; }
/* (7) the walkthrough check-in card's head and trust strip were a navy GRADIENT; the
   brand's navy band is flat everywhere else (the flyer, the email masthead) */
html body.public-body :is(.wci-head, .wci-trust) { background: var(--il-navy) !important; background-image: none !important; }

/* Offer form: contingencies are opt-in. A tick opens the box, and the warning
   is the first thing read inside it. The warning is a rule down the edge, not
   a filled slab -- it is a caution, not an error. */
.oc-contingency-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--il-ink); min-height: 44px; }
.oc-contingency-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--il-navy); flex: none; cursor: pointer; }
.oc-contingency-panel { display: grid; gap: 8px; margin-top: 4px; }
.oc-contingency-panel[hidden] { display: none; }
.oc-contingency-warn { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--il-line); border-left: 3px solid var(--il-gold); border-radius: 8px; background: #fff; font-size: 13px; line-height: 18px; color: var(--il-ink-2); }
.oc-contingency-warn b { color: var(--il-gold-ink); font-weight: 600; font-size: 14px; }
/* (8) the static pages' newsletter card (deals.html and the pages that copy it) reads the
   same as the Worker-rendered one: a navy chip, navy proof icons, the kit's heading weight. */
html body.public-body .investor-news-shell .investor-news-eyebrow { background: var(--il-navy-05) !important; color: var(--il-navy) !important; border: 0 !important; box-shadow: none !important; letter-spacing: 0 !important; text-transform: none !important; font-size: 13px !important; font-weight: 500 !important; padding: 4px 10px !important; border-radius: 999px !important; }
html body.public-body .investor-news-shell h2 { font-size: 28px !important; line-height: 36px !important; font-weight: 700 !important; }
html body.public-body .investor-news-shell .investor-news-proof :is(span, li) { font-weight: 400 !important; font-size: 13px !important; }
html body.public-body .investor-news-shell .investor-news-proof :is(i, svg) { color: var(--il-navy) !important; background: none !important; box-shadow: none !important; }

/* ====================================================== 21. the deal FAQ wears the HOME page's FAQ
   The deal page and the home page each had their own FAQ look, one a divided
   list with a bare chevron and one a stack of hairline cards with a crimson rail,
   a round chevron chip and a navy question. They are the same kind of thing, so
   they wear the same thing. Every value here was measured off the home page's
   computed style (.faq-item / .faq-trigger / .faq-trigger-icon / .faq-answer) rather
   than read off public-ui.css, which layers five passes of that component.
   The deal FAQ is native <details>, so the chip is the chevron itself and the
   open state is [open] rather than .is-open. Two ids plus !important, last in
   the last sheet: every earlier dealFaq rule sets these same properties. */
html body.public-body #propertyContent #dealFaqSection details {
  position: relative !important; overflow: hidden !important;
  background: #fff !important; border: 1px solid var(--il-line) !important;
  border-radius: 12px !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important;
}
html body.public-body #propertyContent #dealFaqSection details:hover,
html body.public-body #propertyContent #dealFaqSection details[open] { border-color: var(--il-line) !important; background: #fff !important; }
/* no rail: the home FAQ it mirrors no longer draws one (2026-09-24, the crimson rails pass) */
html body.public-body #propertyContent #dealFaqSection details::before { display: none !important; content: none !important; }
html body.public-body #propertyContent #dealFaqSection details > summary {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important;
  margin: 0 !important; padding: 20px 24px !important; border-radius: 12px !important;
  background: #fff !important; transition: background-color 180ms ease !important;
}
html body.public-body #propertyContent #dealFaqSection details > summary:hover { background: var(--il-wash) !important; }
html body.public-body #propertyContent #dealFaqSection details > summary h3 {
  font-size: 16px !important; line-height: 24px !important; font-weight: 600 !important;
  color: var(--il-navy) !important; margin: 0 !important;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1) !important;
}
html body.public-body #propertyContent #dealFaqSection details > summary:hover h3,
html body.public-body #propertyContent #dealFaqSection details[open] > summary h3 { transform: translateX(4px) !important; }
html body.public-body #propertyContent #dealFaqSection details > summary :is(i, svg) {
  flex: none !important; box-sizing: border-box !important;
  width: 29px !important; height: 29px !important; padding: 6px !important; border-radius: 999px !important;
  border: 1px solid rgba(223, 232, 243, .6) !important;
  background: linear-gradient(180deg, rgba(238, 243, 249, .95), rgba(223, 232, 243, .6)) !important;
  color: #36598d !important; box-shadow: none !important;
  transition: transform 300ms cubic-bezier(.22, 1, .36, 1), background 200ms ease, color 200ms ease, box-shadow 200ms ease !important;
}
html body.public-body #propertyContent #dealFaqSection details[open] > summary :is(i, svg) {
  transform: rotate(180deg) !important;
  background: linear-gradient(135deg, rgba(177, 29, 41, .14), rgba(177, 29, 41, .08)) !important;
  color: var(--il-crimson) !important; box-shadow: 0 0 0 3px rgba(177, 29, 41, .08) !important;
}
html body.public-body #propertyContent #dealFaqSection details > :not(summary) {
  margin: 0 !important; padding: 17px 24px 20px !important;
  border-top: 1px solid rgba(10, 20, 36, .06) !important;
  font-size: 15.36px !important; line-height: 25.34px !important; color: var(--il-navy) !important;
}
html body.public-body #propertyContent #dealFaqSection > .space-y-4 { gap: 12px !important; }

/* ==================================================== 23. Section dividers, sitewide
   The home page already carries a hand-tuned, !important divider between its own
   top-level sections (section 17 above, with its own :first-child exception and the
   #homeSectionsHost cases the SPA-style host wrapper needs). This is the DEFAULT for
   every OTHER front-end page: a plain 1px seam between one full-page section and the
   next -- what turns "one long scroll of padding" into readable, bordered blocks, the
   same way the 2026-09-20 home-page pass did for the home page alone.

   (!) IT HAS TO BE !important, and not by choice: public-ui.css still carries the
   RETIRED brand's own section boundary --
     body.public-body main section:not(.section-band-navy):not(...6 more) + section:not(...)
   -- a 3px navy-to-crimson border-image rail, on every static marketing page that was
   never rebuilt into the new structure (measured live on faq.html: every section
   boundary there was STILL PAINTING it). Its six chained :not() clauses per side count
   as six classes each for specificity, so that ONE selector sits at roughly 13 classes
   -- there is no plausible number of classes an ordinary override selector could add to
   outrank it honestly, which is exactly the situation !important exists for. Both the
   width/colour (border-top) and the gradient (border-image) have to be restated, or
   killing only one leaves the other: main.il-ssr's own existing
   "border-image: none !important" reset (section 22 above) neutralises the GRADIENT on
   worker-rendered pages already, but leaves the retired rule's transparent
   border-top-color sitting underneath it -- a border with a real width and no colour,
   which is why the seam was invisible there until this rule supplied its own colour too.
   This is also, deliberately, a CONSISTENCY fix and not only an addition: it retires the
   old gradient rail on the dozen marketing pages that were never rebuilt, the same
   decision the IL redesign already made for the home page, the deal page and the
   worker-rendered pages -- one seam, one look, everywhere.

   Scoped to DIRECT CHILDREN of <main> only, which is why it reaches:
     - the ~12 static marketing pages (faq, install, coaching, submit-your-deal,
       cash-buyers, advertise-your-deal, launch, terms-of-service, privacy-policy,
       deals.html) whose <main id="main"> stacks its <section>s directly, and
   and why it does NOT reach deal-detail.html or submit-your-deal.html's <main>, whose
   own content is built from cards inside a column rather than stacked page sections --
   there is no direct-child <section> there for this selector to match, so it is a no-op
   on those two by construction, not by exclusion. */
body.public-body main > section + section { border-top: 1px solid var(--il-line) !important; border-image: none !important; }

/* The worker-rendered pages nest their sections one level deeper, inside the .il-page
   wrapper div main.il-ssr always emits (see the SSR block above) -- so the direct-child
   rule above never reaches them, and they need their own copy of it. This is what carries
   the same seam onto /market-index, /locations, /deals/<area>, /cash-buyers/<area>, the
   strategy pages, /match and the quiz (/offer). Same !important, same reason: the
   retired rail's transparent border-top-color is still the thing this beats. */
body.public-body main.il-ssr .il-page > section + section { border-top: 1px solid var(--il-line) !important; border-image: none !important; }

/* ==================================================== 24. The "VIP Buyer" pitch on the
   Browse Deals sidebar card never went through the palette conversion -- it is still the
   retired brand's own hand-typed gold, a full gradient wash (rgba(250,204,21,.18) --
   Tailwind's yellow-400 -- fading into rgba(253,230,138,.08)) plus two more invented
   hexes for the badge chip (#d4a017/#b8860b, a CSS "goldenrod" pair) and the body text
   (#5c4708/#7a5c00), none of which is a colour this page uses anywhere else. il.css
   already has the token this box wants -- the flat gold wash every other badge and
   deadline chip on the site reads (--il-gold-05 / --il-gold / --il-gold-ink) -- so this
   is the same swap the sky/emerald/rose asides got in section 21: flat fill, no
   gradient, the one gold the rest of the page already agrees on. */
body.public-body .buyer-network-vip-pitch {
  background: var(--il-gold-05) !important;
  border-color: var(--il-gold-10) !important;
  box-shadow: none !important;
}
body.public-body .buyer-network-vip-badge {
  background: var(--il-gold) !important;
  color: #0b2a46 !important;
  box-shadow: none !important;
}
body.public-body .buyer-network-vip-text { color: var(--il-ink) !important; }
body.public-body .buyer-network-vip-text strong { color: var(--il-gold-ink) !important; }

/* ---------------------------------------------------------- deals search autofill (public-nav.js)
   One dropdown, appended into whichever .ui-input_input-container it belongs to (already
   position:relative), so each of the header/drawer/hero search boxes gets its own panel
   anchored to itself rather than one shared panel guessing which input is focused. */
.ncdd-search-autofill {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 120;
  background: #fff; border: 1px solid var(--il-line); border-radius: var(--il-radius-sm);
  box-shadow: 0 10px 30px rgba(26, 27, 34, .16); padding: 6px; max-height: 320px; overflow-y: auto;
}
.ncdd-search-autofill_opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 10px; border-radius: var(--il-radius-xs); cursor: pointer;
  font-size: 14px; line-height: 20px; color: var(--il-ink);
}
.ncdd-search-autofill_opt:hover, .ncdd-search-autofill_opt.is-active { background: var(--il-navy-05); }
.ncdd-search-autofill_opt-label { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncdd-search-autofill_opt-type {
  flex: none; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--il-ink-3);
}

/* ---- the deal page's buy-box capture IS the home page's panel (.home-join, above).
   #dealCashBuyersCard keeps its id -- the page's scripts move it to the bottom of the details
   column and re-point its button for a signed-in member -- but it stops being a card of its own:
   .home-join is the card, and a wrapper that still drew padding, a hairline and a navy wash
   would put the panel inside a second box. The id-weight rules that styled the OLD centered card
   (a 20px/18px heading, a 16px title margin, an email-btn reset on its button) out-rank the
   panel's own two-class rules, so the panel's values are restated here at id weight -- exactly
   the ones those rules touch and nothing else. */
html body.public-body #propertyContent #dealCashBuyersCard.deal-buybox-card {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; box-shadow: none !important;
}
html body.public-body #propertyContent #dealCashBuyersCard.deal-buybox-card .home-join_copy h2 {
  font-size: 24px !important; line-height: 32px !important; font-weight: 700 !important;
  color: var(--il-ink) !important; margin: 0 !important; text-align: left !important; display: block; max-width: none !important;
}
html body.public-body #propertyContent #dealCashBuyersCard.deal-buybox-card a.home-join_cta {
  border-radius: 6px !important; font-weight: 500 !important;
  min-height: 0 !important; /* a phone rule gives every deal-page action a 52px floor; the home CTA has none */
  width: 100% !important;
  box-shadow: 0 8px 20px -9px rgba(var(--il-navy-rgb), .45) !important;
}

/* ---- THE CLOSING CTA PANEL (.site-cta-panel -- advertise, coaching, faq), IN HOPE.
   It stays the one navy surface a page may keep (see above), but three things on it were
   still the retired brand, measured in Chromium 2026-09-24:
   (1) the panel wore public-ui.css's old glow -- a conic gradient with a violet stop on
       ::before, a white shine line on ::after, an inset highlight -- over the flat navy;
   (2) the PRIMARY button was navy filled on a navy panel (1.0:1 against its own ground --
       it read as a hole in the card, not as the action), and so was coaching/faq's second one;
   (3) the tags were a sky-blue glass gradient and a near-white 85% pill with black ink.
   On navy the kit's own answer is the one the listing poster already uses: the primary is
   WHITE with navy ink, the second action is the same shape OUTLINED in white, and the tags
   are flat white-outlined pills. No gradient, no glow, no lift, the kit's 6px corner. */
html body.public-body main .site-cta-panel.site-cta-panel { box-shadow: none !important; border: 0 !important; }
html body.public-body main .site-cta-panel.site-cta-panel::before,
html body.public-body main .site-cta-panel.site-cta-panel::after { display: none !important; content: none !important; }
html body.public-body main .site-cta-panel.site-cta-panel :is(a, button):is(.btn-primary, .site-button-primary, .email-btn--navy, .email-btn--red, .ui-button.type-filled) {
  background: #fff !important; background-image: none !important; color: var(--il-navy) !important;
  border: 1px solid #fff !important; border-radius: 6px !important; box-shadow: none !important;
  font-family: var(--il-font, Inter, system-ui, sans-serif) !important; font-weight: 600 !important; transform: none !important;
}
html body.public-body main .site-cta-panel.site-cta-panel :is(a, button):is(.btn-primary, .site-button-primary, .email-btn--navy, .email-btn--red, .ui-button.type-filled) :is(span, i, svg) { color: var(--il-navy) !important; }
html body.public-body main .site-cta-panel.site-cta-panel :is(a, button):is(.btn-primary, .site-button-primary, .email-btn--navy, .email-btn--red, .ui-button.type-filled):hover { background: var(--il-navy-05) !important; }
html body.public-body main .site-cta-panel.site-cta-panel :is(a, button):is(.btn-outline, .btn-outline-white, .site-button-secondary, .email-btn--outline, .ui-button.type-outline) {
  background: transparent !important; background-image: none !important; color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .7) !important; border-radius: 6px !important; box-shadow: none !important;
  font-family: var(--il-font, Inter, system-ui, sans-serif) !important; font-weight: 600 !important; transform: none !important;
}
html body.public-body main .site-cta-panel.site-cta-panel :is(a, button):is(.btn-outline, .btn-outline-white, .site-button-secondary, .email-btn--outline, .ui-button.type-outline) :is(span, i, svg) { color: #fff !important; }
html body.public-body main .site-cta-panel.site-cta-panel :is(a, button):is(.btn-outline, .btn-outline-white, .site-button-secondary, .email-btn--outline, .ui-button.type-outline):hover { background: rgba(255, 255, 255, .1) !important; border-color: #fff !important; }
html body.public-body main .site-cta-panel.site-cta-panel :is(a, button)::before,
html body.public-body main .site-cta-panel.site-cta-panel :is(a, button)::after { display: none !important; content: none !important; }
html body.public-body main .site-cta-panel.site-cta-panel :is(span.btn-outline, .site-inline-glass, .site-badge, .section-eyebrow) {
  background: transparent !important; background-image: none !important; color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .3) !important; border-radius: 999px !important; box-shadow: none !important;
  font-weight: 500 !important;
}
html body.public-body main .site-cta-panel.site-cta-panel :is(span.btn-outline, .site-inline-glass, .site-badge, .section-eyebrow) :is(i, svg) { color: #fff !important; }
html body.public-body main .site-cta-panel.site-cta-panel span.btn-outline { cursor: default; }
html body.public-body main .site-cta-panel.site-cta-panel span.btn-outline:hover { background: transparent !important; }

/* ---- THE WALKTHROUGH CHECK-IN'S NEXT STEPS, IN HOPE (2026-09-24).
   After "Check me in" the page offers three actions and a save-my-contact button, and all
   four were the retired brand: a red gradient primary, a navy gradient call button, a gold
   gradient, 16px pills with a 2px hover lift and a glow. Worse, their white ink never
   applied -- `body.public-body a { color: inherit }` (0,1,1) outranks the page's own
   `.wci-act-primary { color:#fff }` (0,1,0), so "Submit your offer" and "Call Austin" were
   DARK text on red and on navy, i.e. unreadable, on a page somebody opens standing in a
   driveway on a phone. One primary (navy, white ink); every other action is the same shape
   outlined; the deadline is a flat card whose crimson is an accent on its edge, not a pink
   wash. Inter, the kit's 6px corner, no lift. */
html body.public-body :is(.wci-title, .wci-brand-fallback, .wci-success h2, .wci-act) { font-family: var(--il-font) !important; }
html body.public-body .wci-act {
  border-radius: 6px !important; font-weight: 600 !important; box-shadow: none !important;
  background-image: none !important; transform: none !important; min-height: 48px !important;
  transition: background-color 140ms ease, border-color 140ms ease !important;
}
html body.public-body .wci-act :is(svg, span) { color: inherit !important; }
html body.public-body .wci-act.wci-act-primary { background: var(--il-navy) !important; color: #fff !important; border: 1px solid var(--il-navy) !important; }
html body.public-body .wci-act.wci-act-primary:hover { background: var(--il-navy-hover) !important; border-color: var(--il-navy-hover) !important; }
html body.public-body .wci-act:is(.wci-act-secondary, .wci-act-call, .wci-act-gold) { background: #fff !important; color: var(--il-navy) !important; border: 1px solid var(--il-navy) !important; }
html body.public-body .wci-act.wci-act-secondary { color: var(--il-ink) !important; border-color: var(--il-line-3) !important; }
html body.public-body .wci-act:is(.wci-act-secondary, .wci-act-call, .wci-act-gold):hover { background: var(--il-navy-05) !important; }
html body.public-body .wci-deadline {
  background: #fff !important; background-image: none !important; box-shadow: none !important;
  border: 1px solid var(--il-line) !important; border-left: 3px solid var(--il-crimson) !important; border-radius: 8px !important;
}
html body.public-body .wci-deadline svg { color: var(--il-crimson) !important; }
html body.public-body .wci-deadline-label { color: var(--il-crimson) !important; }
html body.public-body .wci-deadline-val { color: var(--il-ink) !important; }
html body.public-body :is(.wci-card, .wci-trust, .wci-check) { box-shadow: none !important; }
html body.public-body .wci-card { border-radius: 12px !important; border-color: var(--il-line) !important; }
html body.public-body .wci-input { border-radius: 6px !important; }
html body.public-body .wci-trust-item svg { color: #fff !important; }
html body.public-body .wci-scanframe { filter: none !important; }

/* ---- TAILWIND'S `secondary` IS CRIMSON, AND ON THE PUBLIC PAGES IT WAS STILL DOING
   INTERACTION WORK (2026-09-24). In HOPE crimson is an ACCENT -- a deadline, a required-field
   asterisk, a chip -- and navy is the one action colour. Swept by utility rather than page by
   page, because the same classes sit on ~25 sites across the static pages:
   - `hover:bg-secondary` turned the deal page's navy "call me" submit RED on hover;
   - `hover:text-secondary` turned navy links red on hover (sign in, all deals, view map);
   - `a.text-secondary` links, and a `span.font-semibold.text-secondary` that NAMES the navy
     "Submit an Offer" button in prose -- a reference must be the colour of what it names;
   - `bg-secondary/10` icon tiles, a pink wash that read as pastel on a white card;
   - a crimson filled step disc beside a slate one;
   - crimson eyebrows ("Deal FAQ", "Keep Looking"), a tagline and legacy-card labels.
   Deliberately NOT swept: a bare `span.text-secondary` (the required-field asterisk) and
   `bg-secondary` chips/badges ("Offers Close Soon", "Save $997") -- accents, not actions. */
html body.public-body :is(a, button, strong, p, div, span.font-semibold).text-secondary { color: var(--il-navy) !important; }
html body.public-body :is(a, button).hover\:text-secondary:hover { color: var(--il-navy-hover) !important; }
html body.public-body .hover\:bg-secondary:hover { background-color: var(--il-navy-hover) !important; }
html body.public-body [class*="decoration-secondary"] { text-decoration-color: rgba(var(--il-navy-rgb), .4) !important; }
html body.public-body .bg-secondary\/10 { background-color: var(--il-navy-05) !important; color: var(--il-navy) !important; }
html body.public-body .bg-secondary\/10 :is(i, svg, .text-secondary) { color: var(--il-navy) !important; }
html body.public-body span.rounded-full.bg-secondary.text-white { background-color: var(--il-navy) !important; }

/* ---- THE RETIRED BRAND'S RED RAILS AND WASHES, ANYWHERE THEY SURVIVED (2026-09-24).
   Found by scanning every public page's computed styles (elements AND pseudo-elements) for a
   red border, border-image, gradient or glow -- not by reading selectors, which is how these
   outlived four rounds that each fixed the ones somebody remembered. None is an accent the
   HOPE palette keeps (a deadline, a required-field asterisk, a chip); every one is decoration
   from the old brand, and in HOPE crimson that is not saying something is noise.
   (1) The navy-to-red 3px rail at every section junction (a transparent top border plus a
       border-image) -- the plain hairline under it is kept. Also on legal/install/faq cards.
   (2) The same rail drawn top and bottom of every navy band and stats band, on ::before.
   (3) The red gradient rail down the left edge of every FAQ item.
   (4) The steps track's red-to-blue connector -- a plain hairline now.
   (5) A navy-to-crimson wash on every feature card (::after), and red-tinted icon tiles.
   (6) A pink 8px ring round the hero stat cards.
   (7) Crimson gradient CHIPS keep crimson (a chip is an accent) but go flat.
   (8) Two callouts with a crimson frame -- a navy rule down the edge, like the others.
   Deliberately LEFT: the deal page's urgency panel (its crimson edge IS the deadline accent)
   and install.html's red phone-screen markers (they point at where to tap, a function). */
html body.public-body section { border-image: none !important; }
html body.public-body :is(.section-band-navy, .stats-band-premium, .how-buying-section, .recently-sold-section)::before { background-image: none !important; }
html body.public-body :is(.faq-item, .site-faq-item, details.group)::before { display: none !important; content: none !important; }
html body.public-body :is(.faq-item, .site-faq-item, details.group) { box-shadow: none !important; }
html body.public-body .steps-track::before { background: var(--il-line) !important; background-image: none !important; opacity: 1 !important; }
html body.public-body .feature-card::after { display: none !important; content: none !important; }
html body.public-body .feature-icon-wrap-red { background: var(--il-navy-05) !important; background-image: none !important; border-color: var(--il-navy-10) !important; color: var(--il-navy) !important; box-shadow: none !important; }
html body.public-body .feature-icon-wrap-red :is(i, svg) { color: var(--il-navy) !important; }
html body.public-body .site-hero-stat::before { box-shadow: none !important; }
html body.public-body .bg-secondary:not(.bg-secondary\/10) { background-image: none !important; background-color: var(--il-crimson) !important; }
html body.public-body :is(.sop-callout, .legal-callout) { border-color: var(--il-line) !important; border-left: 3px solid var(--il-navy) !important; box-shadow: none !important; }
/* the four the first pass did not out-rank (an id rule on the deal page's FAQ, a doubled
   class on the steps track and the icon tiles) -- same fixes, at the weight they need */
html body.public-body #propertyContent details.group.group::before { display: none !important; content: none !important; background-image: none !important; box-shadow: none !important; }
html body.public-body main .steps-track.steps-track::before { background: var(--il-line) !important; background-image: none !important; opacity: 1 !important; }
html body.public-body main .feature-icon-wrap.feature-icon-wrap-red { background: var(--il-navy-05) !important; background-image: none !important; border: 1px solid var(--il-navy-10) !important; color: var(--il-navy) !important; box-shadow: none !important; }