/* =====================================================================================
   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-green); 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 "live" radar orb: an 8px green dot (the size the old ● glyph drew at 12px) with two
   rings sweeping out of it. The rings are absolutely positioned, so they never move the text. */
.il-live-dot { position: relative; display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--il-mint), var(--il-green) 70%); box-shadow: 0 0 6px rgba(15, 122, 61, .55); }
.il-live-dot::before, .il-live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--il-green); opacity: 0; animation: il-radar 2.4s cubic-bezier(.2, .6, .3, 1) infinite; pointer-events: none; }
.il-live-dot::after { animation-delay: 1.2s; }
@keyframes il-radar { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(3.2); opacity: 0; } }
html.il-calm .il-live-dot::before, html.il-calm .il-live-dot::after { animation: none; }
.marketplace-head #dealsLiveEyebrow { margin-bottom: 6px; }

/* ------------------------------------------------------------------ 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 .site-mobile-link .content { display: flex; align-items: center; gap: 14px; }
  .site-mobile-link_icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: #f1f3f6; color: var(--il-ink-2); }
  .site-mobile-link_icon svg { width: 19px; height: 19px; }
  .site-mobile-link.is-active .site-mobile-link_icon { background: #0f2a4a; color: #fff; }
  .site-profile-trigger-mobile .site-profile-trigger-cog { display: inline-flex; width: 20px; height: 20px; color: var(--il-ink-2); flex: none; }
  .site-profile-trigger-mobile .site-profile-trigger-cog svg { width: 20px; height: 20px; }
  .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; cursor: pointer; }
.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); }
/* The sold band on a SOLD card (il-shell.js soldCardLine): a quiet fact under the price, not a banner. */
.ui-deal-card-sold { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--il-ink-2); }
.ui-deal-card-sold svg { width: 14px; height: 14px; flex: none; color: var(--il-green); }
.ui-deal-card-sold b { color: var(--il-ink); font-weight: 600; }
.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; top: 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; }
/* The SOLD panel at the top of a sold deal's price block (il-shell.js soldPanel). Obvious from
   across the room -- the kicker and the rail -- and level in tone: the band is stated, never sold. */
.il-sold-panel { display: grid; gap: 6px; padding: 14px 16px; border-radius: 10px; background: var(--il-navy-05); border: 1px solid var(--il-navy-10); border-left: 4px solid var(--il-crimson); }
.il-sold-panel_k { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--il-crimson); }
.il-sold-panel_k svg { width: 14px; height: 14px; }
.il-sold-panel_v { margin: 0; font-size: 15px; line-height: 22px; color: var(--il-ink); }
.il-sold-panel_v b { color: var(--il-navy); font-weight: 700; white-space: nowrap; }
.il-sold-panel_sub { margin: 0; font-size: 13px; line-height: 18px; color: var(--il-ink-2); }
.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; } }
/* Focus mode (a dock tab opened one section): no "My profile" menu, content full width. */
.profile-page.profile-focus { grid-template-columns: minmax(0, 1fr); }
.profile-page.profile-focus .profileSideBar-wrapper { display: none; }
@media (max-width: 640px) {
  .profile-page { padding: 12px 0 calc(110px + env(safe-area-inset-bottom)); width: calc(100% - 24px); row-gap: 12px; }
  .profileContent-bottom > .profileCard { border: 0; box-shadow: none; padding: 0; margin: 0; }
  .chat-quick { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}
@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; top: 12px !important; left: auto !important; bottom: 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; }
.il-field-hint--danger { color: #9f1d1d; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 8px 12px; }
.il-field-hint--ok { color: #166534; font-weight: 600; }
.offer-signin-nudge { align-items: center; gap: 8px; background: var(--il-wash); border: 1px solid var(--il-line); border-radius: 10px; padding: 8px 14px; font-size: 13px; color: var(--il-ink-2); }

/* Below the Starting Offer: a box, not a hint (see the comment over #dealOfferBelowBox).
   Crimson, because this one IS a refusal -- the offer cannot be accepted as written --
   and the form still taking it as a backup is why it carries a tick, not a block. */
.offer-below-box { display: grid; gap: 8px; margin-top: 10px; padding: 14px 16px; background: var(--il-crimson-05); border: 1px solid var(--il-crimson-15); border-left: 4px solid var(--il-crimson); border-radius: var(--il-radius-sm); }
.offer-below-box.hidden { display: none; }
.offer-below-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--il-crimson-active); }
.offer-below-body { margin: 0; font-size: 14px; line-height: 20px; color: var(--il-ink); }
.offer-below-raise { justify-self: start; padding: 7px 14px; border: 0; border-radius: var(--il-radius-xs); background: var(--il-navy); color: var(--il-white); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.offer-below-raise:hover { background: var(--il-navy-hover); }
.offer-below-raise:focus-visible { outline: none; box-shadow: var(--il-focus); }
.offer-below-ack { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--il-ink); cursor: pointer; }
.offer-below-ack input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--il-crimson); }

/* 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); }
/* The receipt's two next moves (calendar, raise) and the deadline line under the amount box.
   :not(.hidden) so the display never outranks the page's own hide. */
.offer-success-actions { display: grid; row-gap: 10px; margin-top: 20px; }
.offer-success-action:not(.hidden) { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--il-navy-15); border-radius: 10px; background: var(--il-navy-05); color: var(--il-navy); font-size: 14px; font-weight: 600; cursor: pointer; }
.offer-success-action:hover { background: var(--il-navy-10); }
.offer-success-action svg { width: 18px; height: 18px; flex: none; }
.offer-deadline-line { font-weight: 600; color: var(--il-navy); }

/* ====================================================== 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; }

/* ---- deal page touch-ups (2026-09-26) ----------------------------------------------------
   (1) The offer / spread bar under the value tiles: navy is the Starting Offer's share of the
   ARV, mint is what is left. It never sets `display`, so the `hidden` class still hides it. */
html body.public-body #propertyContent .deal-spreadbar { margin: 16px 0 0; }
html body.public-body #propertyContent .deal-spreadbar-track { height: 8px; border-radius: 999px; background: var(--il-mint); overflow: hidden; }
html body.public-body #propertyContent .deal-spreadbar-fill { display: block; height: 100%; width: 0; background: var(--il-navy); transition: width .7s cubic-bezier(.2, .7, .2, 1); }
html body.public-body #propertyContent .deal-spreadbar-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--il-ink-2); font-variant-numeric: tabular-nums; }
html body.public-body #propertyContent .deal-spreadbar-legend strong { color: var(--il-ink); font-weight: 600; }
html body.public-body #propertyContent .deal-spreadbar-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 6px; vertical-align: 1px; }
html body.public-body #propertyContent .deal-spreadbar-dot-offer { background: var(--il-navy); }
html body.public-body #propertyContent .deal-spreadbar-dot-spread { background: var(--il-mint); }
/* (2) Figures line up down a column: every value cell in the record / detail cards. */
html body.public-body #propertyContent :is(#propertyRecordsBody .text-right, .deal-detail-row-val, .deal-timeline-value, .additionalDetails-gridItemDescription, .comp-price, .comp-meta) { font-variant-numeric: tabular-nums; }
/* (3) Property records: every other row gets a white band so a long table tracks across. */
html body.public-body #propertyContent #propertyRecordsBody details > div > div.justify-between { padding-left: 10px; padding-right: 10px; border-radius: var(--il-radius-xs); border-bottom-color: transparent !important; }
html body.public-body #propertyContent #propertyRecordsBody details > div > div.justify-between:nth-child(odd) { background: var(--il-white); }
/* (4) Gallery: the photo eases in a touch on hover; a keyboard focus gets an inset navy ring
   (inset because the cells butt against each other and the wrapper clips). */
@media (hover: hover) {
  html body.public-body #propertyContent #dealCollage .deal-collage-cell > img { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
  html body.public-body #propertyContent #dealCollage .deal-collage-cell:hover > img { transform: scale(1.04); }
  html body.public-body #propertyContent #dealCollage .dealGallery-more { transition: filter .2s ease; }
  html body.public-body #propertyContent #dealCollage .dealGallery-more:hover { filter: brightness(1.25); }
}
html body.public-body #propertyContent #dealCollage :is(.deal-collage-cell, .dealGallery-more, #mainImage):focus-visible { outline: 3px solid rgba(var(--il-navy-rgb), .7); outline-offset: -3px; }
/* (5) Blur-up: the cell paints its 240px variant blurred (set as --dd-photo-ph by the page,
   our own /media photos only) and the real photo loads over it. A cell without the variable
   paints nothing extra. scale() pushes the blur's soft edge outside the clipped cell. */
html body.public-body #propertyContent #dealCollage .deal-collage-cell::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--dd-photo-ph, none) center / cover no-repeat;
  filter: blur(14px); transform: scale(1.12);
}
/* (6) The sticky offer bar's deadline line, under the price. */
html body.public-body #mobileOfferBar .offer-bar-deadline { margin: 2px 0 0; font-size: 11px; font-weight: 600; line-height: 14px; color: var(--il-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.public-body #mobileOfferBar .offer-bar-deadline.is-urgent { color: var(--il-crimson); }
/* (8) The rent tile's 1% rule line, and the buyer's own rehab-number check under the bar. */
html body.public-body #propertyContent .deal-value-rule { margin: 6px 0 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--il-ink-2); font-variant-numeric: tabular-nums; }
html body.public-body #propertyContent .deal-value-rule.is-good { color: var(--il-green); }
html body.public-body #propertyContent .deal-rehabcalc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--il-line); border-radius: var(--il-radius-sm); background: var(--il-ground); }
html body.public-body #propertyContent .deal-rehabcalc.hidden { display: none; }
html body.public-body #propertyContent .deal-rehabcalc-label { font-size: 13px; font-weight: 600; color: var(--il-ink); }
html body.public-body #propertyContent .deal-rehabcalc-field { display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; height: 36px; border: 1px solid var(--il-line-2); border-radius: var(--il-radius-xs); background: var(--il-white); color: var(--il-ink-2); font-size: 14px; }
html body.public-body #propertyContent .deal-rehabcalc-field:focus-within { border-color: var(--il-navy); box-shadow: var(--il-focus); }
html body.public-body #propertyContent .deal-rehabcalc-field input { width: 7.5rem; border: 0; outline: 0; background: transparent; padding: 0; font: 600 14px/1 var(--il-font); color: var(--il-ink); font-variant-numeric: tabular-nums; box-shadow: none; }
html body.public-body #propertyContent .deal-rehabcalc-out { flex: 1 1 16rem; margin: 0; font-size: 13px; line-height: 18px; color: var(--il-ink-2); font-variant-numeric: tabular-nums; }
html body.public-body #propertyContent .deal-rehabcalc-out.is-good { color: var(--il-green); font-weight: 600; }
html body.public-body #propertyContent .deal-rehabcalc-out.is-bad { color: var(--il-crimson); font-weight: 600; }
/* (7) Print: a one-sheet deal summary to carry to the walkthrough. The page's beforeprint
   handler adds #dealPrintHead (Starting Offer + deadline) and #dealPrintNotes (a notes box
   and the listing URL); neither is ever on screen. Everything interactive, promotional or
   map-shaped is dropped; the fact cards stack in one column and do not split across pages. */
#dealPrintHead, #dealPrintNotes { display: none; }
@media print {
  @page { margin: 12mm; }
  html body.public-body { background: #fff !important; padding: 0 !important; }
  html body.public-body :is(.il-skip-link, header.site-header, footer, .dealContent-backRow, .public-mobile-modal, #mobileOfferBar, #toast, chat-widget, .ncdd-scroll-progress, .public-chat-launcher, .public-chat-assistant, body > iframe),
  html body.public-body #propertyContent :is(nav.dealTabs, #galleryThumbs, .dealGallery-statusChip, .dealGallery-viewChip, .dd-fire-fx, .dealRow-rowRight, #addressLockNotice, #loggedInAddressHint, #mapSection, #videoSection, #laborMarketSection, #downloadsSection, #dealCashBuyersCard, #dealContactCard, #dealFeedbackCard, #dealFaqSection, #relatedDealsSection, #vbRehabCalc, [data-il-readmore], button:not(.deal-collage-cell), .ui-button),
  /* the gallery prints its hero photo only; its other cells are shown by id-weight
     !important rules, so this out-ranks them (the extra #dealCollage is the weight) */
  html body.public-body #propertyContent #dealCollage#dealCollage.dealGallery-wrapper > :not(.dealGallery-main) { display: none !important; }
  html body.public-body #propertyContent #dealCollage.dealGallery-wrapper { display: block !important; max-height: none !important; margin: 0 0 12px !important; }
  html body.public-body #propertyContent #dealCollage.dealGallery-wrapper > .dealGallery-main { display: block !important; position: relative !important; width: 100% !important; height: 3.2in !important; aspect-ratio: auto !important; border-radius: 8px; overflow: hidden; }
  html body.public-body #propertyContent #dealOverviewBody { max-height: none !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; }
  html body.public-body #propertyContent .dealContent-body { display: block !important; }
  html body.public-body #propertyContent :is(.dealContent-left, .dealContent-right, #dealShowcaseRail) { width: auto !important; max-width: none !important; position: static !important; }
  /* no box-shadow here: the ordinary cards are flat already, and tests/one-premium-layer
     reads any shadow declaration on them as an elevation */
  html body.public-body #propertyContent :is(.il-card, .overview-wrapper, .additionalDetails-wrapper, details, .deal-value-tile) { break-inside: avoid; }
  html body.public-body #propertyContent :is(.il-card, .overview-wrapper, .additionalDetails-wrapper) { border: 1px solid #d9d9d9 !important; margin: 0 0 10px !important; padding: 12px 14px !important; }
  html body.public-body #propertyContent .deal-spreadbar-fill { transition: none; }
  html body.public-body #propertyContent :is(.deal-spreadbar-track, .deal-spreadbar-fill, .deal-spreadbar-dot, #dealCollage) { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #dealPrintHead { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; margin: 0 0 10px; padding: 0 0 8px; border-bottom: 2px solid #13436b; color: #1a1b22; font: 13px/1.4 var(--il-font); }
  #dealPrintHead p { margin: 0; }
  #dealPrintHead .deal-print-brand { flex-basis: 100%; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #13436b; }
  #dealPrintHead strong { font-weight: 700; }
  #dealPrintNotes { display: block !important; break-inside: avoid; margin: 14px 0 0; padding: 12px 14px; border: 1px solid #b3b3b3; border-radius: 8px; color: #1a1b22; font: 12px/1.4 var(--il-font); }
  #dealPrintNotes p { margin: 0; }
  #dealPrintNotes .deal-print-notes-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
  #dealPrintNotes .deal-print-notes-row { padding: 16px 0 3px; border-bottom: 1px solid #b3b3b3; color: #4f5366; }
  #dealPrintNotes .deal-print-url { margin-top: 10px; font-size: 10px; color: #4f5366; }
}
html.il-calm body.public-body #propertyContent #dealCollage .deal-collage-cell > img,
html.il-calm body.public-body #propertyContent .deal-spreadbar-fill { transition: none; }
html.il-calm body.public-body #propertyContent #dealCollage .deal-collage-cell:hover > img { transform: none; }

/* ---------------------------------------------- deal page touch-ups, round 3 (2026-09-27)
   (1) The "Map view" chip moves to the tile's top-RIGHT: top-left is where Google's
   embed draws its own "Open in Maps" card, and the chip sat on top of it. */
html body.public-body #propertyContent .dealGallery-mapview > .dealGallery-badge { left: auto; right: 4px; }
/* A phone's map tile is narrower than Google's own card, so there is no free corner: the
   map says what it is by itself. */
@media (max-width: 640px) { html body.public-body #propertyContent .dealGallery-mapview > .dealGallery-badge { display: none; } }
/* (2) On a phone the breadcrumb only repeated the title under "Back to properties list". */
@media (max-width: 640px) { html body.public-body .dealContent-backRow > .dealContent-crumbs { display: none; } }
/* (3) Job-market heading: the same card-title voice as the rent card beside it. */
html body.public-body #propertyContent #laborMarketContent h3.deal-card-h3 {
  font-family: var(--il-font); font-size: 20px; font-weight: 600; line-height: 28px; color: var(--il-ink); margin: 0;
}
html body.public-body #propertyContent #laborMarketContent > .mb-5 { margin-bottom: 20px; align-items: center; }
html body.public-body #propertyContent #laborMarketContent > .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);
}
/* (4) Phone value band: three label / figure ROWS in one hairline box instead of three
   150px tiles stacked -- the same facts in about a third of the scroll. */
@media (max-width: 640px) {
  html body.public-body #propertyContent .deal-value-band-grid { gap: 0; border: 1px solid var(--il-line); border-radius: 10px; overflow: hidden; }
  html body.public-body #propertyContent .deal-value-tile {
    grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center;
    padding: 12px 14px; border: 0; border-radius: 0; border-top: 1px solid var(--il-line);
  }
  html body.public-body #propertyContent .deal-value-tile:first-child { border-top: 0; }
  html body.public-body #propertyContent .deal-value-tile > :not(.deal-value-figure) { grid-column: 1; }
  html body.public-body #propertyContent .deal-value-figure { grid-column: 2; grid-row: 1 / span 3; margin: 0; font-size: 22px; line-height: 28px; text-align: right; white-space: nowrap; }
}
/* (5) The timeline's value keeps its no-break spaces from wrapping mid-time. */
html body.public-body #datesSection .deal-timeline-value { overflow-wrap: normal; }

/* ==================================================== 25. One 1px seam between every page
   section, sitewide (2026-09-27). Measured in Chromium across every public page, the seams
   were the patchwork sections 17 and 23 left: MISSING wherever a section carried a class
   that an earlier IL rule strips every border from (.section-band-navy, .dd-section-border-b,
   .il-faq-page, .il-areas-page -- advertise-your-deal lost six seams, deals four), HIDDEN
   under a band pulled up 1px by public-ui.css's retired "navy seam fix" (the band is light
   now, so the 1px it overlapped was the hero's own border -- cash-buyers, launch), DOUBLED
   to 2px where a hero's border-bottom met the next section's border-top (coaching, faq,
   sell), and 2px on purpose on the home page. The rule now: a section owns its TOP seam
   only; no top-level section draws a bottom one (the footer draws its own top).
   `~`, not `+`: a hidden element or <script> between two sections broke the adjacent
   combinator (coaching's FAQ had no seam at all). The :is() lists carry #homeSectionsHost,
   which lends each one an id's weight -- that is what out-ranks the border-zeroing rules
   above without a selector arms race. */
html body.public-body main :is(.section-band-navy, .how-buying-section, .recently-sold-section) { margin-top: 0 !important; }
html body.public-body main > :is(section, .il-page, #homeSectionsHost):has(~ :is(section, .il-page, #homeSectionsHost)) { border-bottom-width: 0 !important; }
html body.public-body main > :is(section, .il-page, #homeSectionsHost) ~ :is(section, .il-page, #homeSectionsHost),
html body.public-body main.il-home #homeSectionsHost > section + section {
  border-top: 1px solid var(--il-line) !important; border-image: none !important;
}
/* The "How it works" eyebrow chip inside a band wore public-ui.css's gold ring and glow
   (0,3,1 with !important beat section 21's navy chip). Navy, translucent, like the chip everywhere else. */
html body.public-body main :is(.section-band-navy, .how-buying-section, .recently-sold-section) .section-eyebrow {
  background: var(--il-navy-05) !important; background-image: none !important;
  border: 1px solid rgba(19, 67, 107, .22) !important;
  box-shadow: inset 0 0 0 1px rgba(19, 67, 107, .06), 0 0 22px -2px rgba(19, 67, 107, .32) !important;
}
/* The navy icon tile (step 2) kept public-ui.css's sky-blue band variant while the red
   ones (steps 1 and 3) were flattened to the navy tile in section 22 -- one tile, every variant. */
html body.public-body main .feature-icon-wrap.feature-icon-wrap-navy { 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; }
html body.public-body main .feature-icon-wrap.feature-icon-wrap-navy :is(i, svg) { color: var(--il-navy) !important; }

/* ==================================================== 26. Phone form fields never zoom the page
   (2026-09-27). Measured at 390px across every public form, fields rendered at 14-15px
   (checkboxes at 11-12px) -- and iOS Safari zooms the whole page in on focus of any field under
   16px, leaving the buyer pinch-zooming back out mid-form on sell, register, launch, cash-buyers
   and submit-your-deal. 16px is the floor on a phone; desktop keeps its sizes. #homeSectionsHost
   in the :is() lends an id's weight over the per-form !important sizes above. */
@media (max-width: 767px) {
  html body.public-body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]), select, textarea, #homeSectionsHost) { font-size: 16px !important; }
}
/* The header search's magnifier button is a 20x20 target (WCAG 2.2 asks 24). The hit area grows
   by 6px a side through a pseudo-element, so the field's layout does not move. */
html body.public-body .ui-input button.icon-wrapper[type="submit"] { position: relative; }
html body.public-body .ui-input button.icon-wrapper[type="submit"]::after { content: ""; position: absolute; inset: -6px; }
/* launch.html's signup panel ran 444px of fields inside a 373px phone (the hero's overflow:hidden
   clipped the right edge off every input): a grid item's min-width:auto let the one nowrap pill
   ("Or try our Smart Buy Box, built from what you actually buy") widen the whole track to 510px.
   Grid items shrink to their track; on a phone a pill with a sentence in it wraps. */
html body.public-body main .grid > * { min-width: 0; }
@media (max-width: 767px) {
  html body.public-body main .email-btn { white-space: normal !important; height: auto !important; max-width: 100%; text-align: center; }
  html body.public-body main .email-btn .email-btn-label { white-space: normal !important; min-width: 0; flex-shrink: 1 !important; }
}

/* ==================================================== 27. The motion layer: one feel, every public page
   (2026-10-19.) The operator asked for the public site to FEEL premium -- glide in, glide out,
   presses that answer the finger -- without a redesign and without new heavy components. Every
   idea here is a CSS-only (or one-delegated-listener) rendering of a reactbits.dev pattern on a
   surface that already exists: Glare Hover on the filled navy actions, Spotlight Card on the deal
   card, Animated Content on sections and cards as they scroll in, Swipe Toast on the three toasts,
   and an accordion that opens and CLOSES on a curve instead of snapping.
   Rules of the layer:
   - It moves things; it never re-colours them. The flat-navy controls stay flat navy -- the glare
     is a 20% white band that is off the button at rest and crosses it once on hover.
   - `translate` / `scale` (the individual properties), never `transform`: they COMPOSE with any
     transform a page already sets, and several families pin `transform: none !important`.
   - Everything that moves is scoped to html:where(:not(.il-calm)) -- ON BY DEFAULT for every
     visitor (operator decision 2026-10-19, section 28). `html.il-calm` is the footer's "Reduce
     motion" switch (il-shell.js, remembered per browser); calm = the site before this layer.
   - Nothing is hidden by CSS alone: `.il-reveal` is added by il-shell.js only to elements BELOW
     the fold, and only when IntersectionObserver exists, so no-JS / old browsers / print render
     everything. */
:root {
  --il-ease-out: cubic-bezier(.22, 1, .36, 1);
  --il-ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --il-dur-press: 140ms;
  --il-dur-ui: 260ms;
  --il-dur-glide: 560ms;
}
@keyframes il-glide-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes il-glide-down { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
@keyframes il-rise { from { opacity: 0; translate: 0 18px; scale: .985; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes il-fuse { from { scale: 1 1; } to { scale: 0 1; } }
@keyframes il-spin { to { rotate: 360deg; } }

/* ---- form fields: focus eases in rather than flashing on */
html body.public-body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), textarea, select, .auth-input) {
  transition: border-color var(--il-dur-ui) var(--il-ease-out), box-shadow var(--il-dur-ui) var(--il-ease-out), background-color var(--il-dur-ui) var(--il-ease-out);
}

/* ---- buttons: every public action family answers the press.
   .ui-button shipped `transition: all .3s ease`, which also eased layout properties and made
   every hover feel late; named properties, a quicker curve, and a 0.97 press. */
html:where(:not(.il-calm)) body.public-body :is(.ui-button, .btn-email, .btn-navy, .email-btn, .email-toggle, .wci-btn, .investor-news-subscribe, .btn-primary, .btn-secondary, .faq-trigger) {
  transition: background-color var(--il-dur-ui) var(--il-ease-out), border-color var(--il-dur-ui) var(--il-ease-out),
    color var(--il-dur-ui) var(--il-ease-out), box-shadow var(--il-dur-ui) var(--il-ease-out),
    translate var(--il-dur-ui) var(--il-ease-out), scale var(--il-dur-press) var(--il-ease-out),
    opacity var(--il-dur-ui) var(--il-ease-out), background-position 0s;
  -webkit-tap-highlight-color: transparent;
}
html:where(:not(.il-calm)) body.public-body :is(.ui-button, .btn-email, .btn-navy, .email-btn, .email-toggle, .wci-btn, .investor-news-subscribe, .btn-primary, .btn-secondary):active:not(:disabled):not(.disabled) {
  scale: .97;
}

/* ---- Glare Hover: the filled navy actions. The band EXISTS only while hovered, so a resting
   button is the flat navy fill and nothing else (scratch/front-audit.mjs reads `gradient` in a
   control's background-image as the retired brand). At rest only the band's geometry is set --
   parked off the left edge, invisible with no image; hover adds the image and the POSITION
   transitions across (a transition outranks the families' `background: ... !important`, an
   animation would not); leaving drops the image and snaps the position back unseen (0s). */
html:where(:not(.il-calm)) body.public-body :is(.ui-button.type-filled, .btn-email, .btn-navy, .wci-btn, .investor-news-subscribe):not(:disabled):not(.disabled):not([aria-busy="true"]) {
  background-size: 260% 100% !important; background-repeat: no-repeat !important; background-position: 120% 0 !important;
}
@media (hover: hover) {
  html:where(:not(.il-calm)) body.public-body :is(.ui-button.type-filled, .btn-email, .btn-navy, .wci-btn, .investor-news-subscribe):not(:disabled):not(.disabled):not([aria-busy="true"]):hover {
    background-image: linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, .2) 50%, transparent 62% 100%) !important;
    background-position: -20% 0 !important;
    translate: 0 -1px;
    box-shadow: 0 8px 18px -10px rgba(var(--il-navy-rgb), .55) !important;
    transition: background-color var(--il-dur-ui) var(--il-ease-out), border-color var(--il-dur-ui) var(--il-ease-out),
      color var(--il-dur-ui) var(--il-ease-out), box-shadow var(--il-dur-ui) var(--il-ease-out),
      translate var(--il-dur-ui) var(--il-ease-out), scale var(--il-dur-press) var(--il-ease-out),
      background-position 750ms var(--il-ease-out);
  }
  html:where(:not(.il-calm)) body.public-body :is(.ui-button.type-filled, .btn-email, .btn-navy, .wci-btn, .investor-news-subscribe):not(:disabled):not(.disabled):active { translate: 0 0; }
}

/* ---- the deal card: a 3px lift, a slow photo push-in, and a Spotlight that follows the
   pointer across the info panel (--il-mx/--il-my are written by il-shell.js, hover devices
   only). The info panel is a div with no background image of its own. */
html:where(:not(.il-calm)) body.public-body .ui-deal-card { transition: box-shadow 350ms var(--il-ease-out), translate 350ms var(--il-ease-out); }
html:where(:not(.il-calm)) body.public-body .ui-deal-card_img-container img { transition: opacity .5s ease-in-out, scale 900ms var(--il-ease-out); }
@media (hover: hover) {
  html:where(:not(.il-calm)) body.public-body .ui-deal-card.ui-deal-card_wrapper:hover {
    translate: 0 -3px;
    box-shadow: 0 14px 32px -18px rgba(var(--il-navy-rgb), .38), 0 2px 6px rgba(0, 0, 0, .06) !important;
  }
  html:where(:not(.il-calm)) body.public-body .ui-deal-card:hover .ui-deal-card_img-container img { scale: 1.045; }
  html:where(:not(.il-calm)) body.public-body .ui-deal-card .ui-deal-card_info {
    background-image: radial-gradient(260px circle at var(--il-mx, 50%) var(--il-my, -40%), rgba(var(--il-navy-rgb), .07), transparent 70%);
    background-repeat: no-repeat;
  }
}
/* the heart answers the tap with a spring */
html:where(:not(.il-calm)) body.public-body [data-il-save-deal] { transition: scale 320ms var(--il-ease-spring), background-color var(--il-dur-ui) var(--il-ease-out), color var(--il-dur-ui) var(--il-ease-out); }
html:where(:not(.il-calm)) body.public-body [data-il-save-deal]:active { scale: .86; }
html:where(:not(.il-calm)) body.public-body [data-il-save-deal][aria-pressed="true"] svg { animation: il-heart-pop 420ms var(--il-ease-spring); }
@keyframes il-heart-pop { 0% { scale: .6; } 60% { scale: 1.18; } 100% { scale: 1; } }

/* ---- Animated Content: below-the-fold sections and cards glide up as they arrive. */
html.il-motion .il-reveal { opacity: 0; translate: 0 18px; }
html.il-motion .il-reveal.il-in {
  opacity: 1; translate: 0 0;
  transition: opacity 600ms var(--il-ease-out), translate 700ms var(--il-ease-out);
  transition-delay: var(--il-d, 0ms);
}

/* ---- accordions. il-shell.js animates the HEIGHT of every native <details> (open AND close);
   the answer itself glides in under the question. The home/deals FAQ (.faq-item) already
   eases its rows; it gets the same answer glide and a springier chevron. */
html:where(:not(.il-calm)) body.public-body details[open] > :not(summary) { animation: il-glide-down 380ms var(--il-ease-out) both; }
html:where(:not(.il-calm)) body.public-body .faq-item.is-open .faq-answer { animation: il-glide-down 380ms var(--il-ease-out) both; }
html:where(:not(.il-calm)) body.public-body .faq-body { transition: grid-template-rows 420ms var(--il-ease-out) !important; }
html:where(:not(.il-calm)) body.public-body .faq-trigger-icon,
html:where(:not(.il-calm)) body.public-body details > summary :is(svg, i) { transition: transform 420ms var(--il-ease-spring), rotate 420ms var(--il-ease-spring), background-color 200ms ease, color 200ms ease, box-shadow 200ms ease !important; }

/* ---- the mobile drawer: a smoother slide, and its rows follow in one after another */
html:where(:not(.il-calm)) body.public-body .site-header_drawer { transition: opacity 280ms var(--il-ease-out), transform 380ms var(--il-ease-out) !important; }
html:where(:not(.il-calm)) body.public-body .site-header_drawer.is-open > * { animation: il-glide-in 420ms var(--il-ease-out) both; }
html:where(:not(.il-calm)) body.public-body .site-header_drawer.is-open > :nth-child(2) { animation-delay: 40ms; }
html:where(:not(.il-calm)) body.public-body .site-header_drawer.is-open > :nth-child(3) { animation-delay: 80ms; }
html:where(:not(.il-calm)) body.public-body .site-header_drawer.is-open > :nth-child(4) { animation-delay: 120ms; }
html:where(:not(.il-calm)) body.public-body .site-header_drawer.is-open > :nth-child(n+5) { animation-delay: 160ms; }

/* ---- toasts (Swipe Toast): glide up on a spring, fade out going down, a thin fuse shows the
   time left, and a downward swipe dismisses (il-shell.js). The deal page's #toast and the
   coaching page's #coachingToast hide with a Tailwind translate class; the shell's #ilNotice
   hides by losing .is-in. */
html:where(:not(.il-calm)) body.public-body :is(#toast, #coachingToast) {
  transition: transform 520ms var(--il-ease-spring), opacity 260ms var(--il-ease-out) !important;
  overflow: hidden; border-radius: 12px !important; touch-action: none;
}
html:where(:not(.il-calm)) body.public-body #toast.translate-y-20,
html:where(:not(.il-calm)) body.public-body #coachingToast.translate-y-24 { opacity: 0; pointer-events: none; transition: transform 420ms var(--il-ease-out), opacity 260ms var(--il-ease-out) !important; }
html:where(:not(.il-calm)) body.public-body :is(#toast, #coachingToast)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(255, 255, 255, .45); transform-origin: left center; scale: 0 1;
}
html:where(:not(.il-calm)) body.public-body #toast:not(.translate-y-20)::after { animation: il-fuse 3000ms linear forwards; }
html:where(:not(.il-calm)) body.public-body #coachingToast:not(.translate-y-24)::after { animation: il-fuse 2600ms linear forwards; }

/* ---- <dialog> (the profile's picture picker): glides in AND out, backdrop fades.
   @starting-style + allow-discrete; a browser without them just opens and closes as before. */
html:where(:not(.il-calm)) body.public-body dialog {
  opacity: 0; translate: 0 14px; scale: .98;
  transition: opacity 260ms var(--il-ease-out), translate 380ms var(--il-ease-out), scale 380ms var(--il-ease-out),
    overlay 380ms allow-discrete, display 380ms allow-discrete;
}
html:where(:not(.il-calm)) body.public-body dialog[open] { opacity: 1; translate: 0 0; scale: 1; }
@starting-style { html:where(:not(.il-calm)) body.public-body dialog[open] { opacity: 0; translate: 0 14px; scale: .98; } }
html:where(:not(.il-calm)) body.public-body dialog::backdrop { opacity: 0; transition: opacity 300ms var(--il-ease-out), overlay 300ms allow-discrete, display 300ms allow-discrete; }
html:where(:not(.il-calm)) body.public-body dialog[open]::backdrop { opacity: 1; }
@starting-style { html:where(:not(.il-calm)) body.public-body dialog[open]::backdrop { opacity: 0; } }

/* ---- sign in / register: the card rises in, its rows follow, the perks list cascades */
html:where(:not(.il-calm)) body.public-body .auth-card { animation: il-rise 640ms var(--il-ease-out) both; }
html:where(:not(.il-calm)) body.public-body .auth-card > * { animation: il-glide-in 520ms var(--il-ease-out) both; }
html:where(:not(.il-calm)) body.public-body .auth-card > :nth-child(2) { animation-delay: 80ms; }
html:where(:not(.il-calm)) body.public-body .auth-card > :nth-child(3) { animation-delay: 140ms; }
html:where(:not(.il-calm)) body.public-body .auth-card > :nth-child(4) { animation-delay: 200ms; }
html:where(:not(.il-calm)) body.public-body .auth-card > :nth-child(n+5) { animation-delay: 260ms; }
html:where(:not(.il-calm)) body.public-body .auth-hero-body > * { animation: il-glide-in 560ms var(--il-ease-out) both; }
html:where(:not(.il-calm)) body.public-body .auth-hero-body > :nth-child(2) { animation-delay: 60ms; }
html:where(:not(.il-calm)) body.public-body .auth-hero-body > :nth-child(3) { animation-delay: 120ms; }
html:where(:not(.il-calm)) body.public-body .auth-perk { animation: il-glide-in 560ms var(--il-ease-out) both; animation-delay: 200ms; }
html:where(:not(.il-calm)) body.public-body .auth-perk:nth-child(2) { animation-delay: 270ms; }
html:where(:not(.il-calm)) body.public-body .auth-perk:nth-child(3) { animation-delay: 340ms; }
html:where(:not(.il-calm)) body.public-body .auth-perk:nth-child(4) { animation-delay: 410ms; }
html:where(:not(.il-calm)) body.public-body .auth-perk-icon { transition: scale 320ms var(--il-ease-spring); }
@media (hover: hover) { html:where(:not(.il-calm)) body.public-body .auth-perk:hover .auth-perk-icon { scale: 1.08; } }
/* "Continue with email" opened on a 540px max-height, so closing waited out the empty part of
   it. Grid rows ease to the content's real height in both directions. */
html:where(:not(.il-calm)) body.public-body .email-form-wrap {
  display: grid !important; grid-template-rows: 0fr; max-height: none !important;
  transition: grid-template-rows 460ms var(--il-ease-out), opacity 320ms var(--il-ease-out) !important;
}
html:where(:not(.il-calm)) body.public-body .email-form-wrap.show { grid-template-rows: 1fr; }
html:where(:not(.il-calm)) body.public-body .email-form-wrap > * { min-height: 0; overflow: hidden; }

/* ---- the profile: panels glide in when the sidebar switches them (display none -> block
   restarts the animation), the active row eases rather than jumping, icons nudge on hover */
html:where(:not(.il-calm)) body.public-body [data-profile-panel]:not(.profile-panel-off) { animation: il-glide-in 420ms var(--il-ease-out) both; }
html:where(:not(.il-calm)) body.public-body .profileSideBar-item { transition: background-color var(--il-dur-ui) var(--il-ease-out), border-color var(--il-dur-ui) var(--il-ease-out), scale var(--il-dur-press) var(--il-ease-out) !important; }
html:where(:not(.il-calm)) body.public-body .profileSideBar-item-icon { transition: translate var(--il-dur-ui) var(--il-ease-spring); }
@media (hover: hover) { html:where(:not(.il-calm)) body.public-body .profileSideBar-item:hover .profileSideBar-item-icon { translate: 2px 0; } }
html:where(:not(.il-calm)) body.public-body .profileSideBar-itemActive .profileSideBar-item-icon { color: var(--il-navy); }

/* ---- busy: a submit that is in flight says so (member-portal.js sets aria-busy on the press).
   Not motion-gated: the spinner is information, and reduced motion slows it rather than hiding it. */
html body.public-body :is(.auth-card, .profileCard) button[aria-busy="true"] { position: relative; cursor: progress; }
html body.public-body :is(.auth-card, .profileCard) button[aria-busy="true"]::after {
  content: "" !important; display: block !important; position: absolute; top: 50%; right: 16px;
  width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; opacity: .85;
  animation: il-spin 700ms linear infinite;
}
html.il-calm body.public-body :is(.auth-card, .profileCard) button[aria-busy="true"]::after { animation-duration: 2s; }

/* ---- the password eye (member-portal.js addPasswordToggles): inside the field's right end,
   a 36px target, the field keeps room for it. Replaces an 11px underlined "Show" under the box. */
/* `:is(#main, ...)` lends an id's weight (the kit's per-field padding and the auth-card button rules are
   !important at 0,3,x); #main never matches an input or a button, the second argument does. */
html body.public-body .auth-pass-wrap > input:is(#main, [type]) { padding-right: 44px !important; }
html body.public-body .auth-pass-wrap > .auth-show-password:is(#main, button) {
  position: absolute; top: 50%; right: 4px; translate: 0 -50%;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px !important; height: 36px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0; border-radius: 8px;
  background: transparent; color: var(--il-ink-2); cursor: pointer;
  transition: background-color var(--il-dur-ui) var(--il-ease-out), color var(--il-dur-ui) var(--il-ease-out);
}
html body.public-body .auth-pass-wrap > .auth-show-password:hover { background: var(--il-wash); color: var(--il-navy); }
html body.public-body .auth-pass-wrap > .auth-show-password:focus-visible { box-shadow: var(--il-focus); }
html body.public-body .auth-pass-wrap > .auth-show-password[aria-pressed="true"] { color: var(--il-navy); }
html:where(:not(.il-calm)) body.public-body .auth-pass-wrap > .auth-show-password svg { transition: scale 260ms var(--il-ease-spring); }
html:where(:not(.il-calm)) body.public-body .auth-pass-wrap > .auth-show-password:active svg { scale: .85; }
/* sign-in / sign-up status: glides in under the form; an error gives one short shake */
html:where(:not(.il-calm)) body.public-body .auth-status-wrap > :not(.hidden) { animation: il-glide-down 360ms var(--il-ease-out) both; }
html:where(:not(.il-calm)) body.public-body .auth-status-wrap > .bg-red-50:not(.hidden) { animation: il-glide-down 360ms var(--il-ease-out) both, il-shake 420ms var(--il-ease-out) 80ms; }
@keyframes il-shake { 0%, 100% { translate: 0 0; } 20% { translate: -6px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }

/* the shell's own notice (#ilNotice, built by il-shell.js) */
.il-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 9999; max-width: calc(100% - 32px);
  translate: -50% 0; box-sizing: border-box; overflow: hidden; touch-action: none;
  background: rgba(17, 24, 39, .94); color: #fff; padding: 11px 18px; border-radius: 12px;
  font: 500 14px/20px var(--il-font); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
}
.il-toast.is-in { opacity: 1; pointer-events: auto; }
.il-toast::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .45); transform-origin: left center; scale: 0 1; }
html:where(:not(.il-calm)) .il-toast { translate: -50% 24px; scale: .96; transition: opacity 240ms var(--il-ease-out), translate 420ms var(--il-ease-out), scale 420ms var(--il-ease-out); }
html:where(:not(.il-calm)) .il-toast.is-in { translate: -50% 0; scale: 1; transition: opacity 260ms var(--il-ease-out), translate 520ms var(--il-ease-spring), scale 520ms var(--il-ease-spring); }
html:where(:not(.il-calm)) .il-toast.is-in::after { animation: il-fuse 2800ms linear forwards; }
@media print { .il-reveal { opacity: 1 !important; translate: none !important; } }

/* ==================================================== 28. The wow layer: motion every visitor sees
   (2026-10-19, round 2 of section 27.) The operator asked for the layer ON BY DEFAULT and for a
   wow factor every visitor sees -- still by upgrading surfaces that exist, still CSS first:
   - Page to page: cross-document view transitions. A click crossfades and rises instead of
     flashing white, the header is held still, and a deal card's photo dives toward the
     visitor as the deal page rises in (il-shell.js names the card's photo on the way out; it
     morphs into the page's photo frame instead whenever that frame is on the first frame).
     A browser without view transitions just navigates.
   - Hero entrance (reactbits Blur Text): the hero's headline lines, sub-line, search and stats
     arrive one after another out of a soft blur. CSS alone, so it plays on the very first
     frame and never flashes the content first.
   - Scroll progress + header lift: a 2px navy line under the sticky header fills as the page
     scrolls, and the header takes a soft shadow once the page moves. Scroll-driven CSS (no
     listener); a browser without animation-timeline shows neither.
   - Reveal, deepened: below-the-fold sections and cards now arrive out of a light blur.
   - Tap glint: phones have no hover, so the glare band crosses a filled button on the tap.
   - The deal card answers a press; the home hero photo settles in.
   - In il-shell.js: CountUp on the hero stats and the deal page's money figures, and the
     photo glide when the home carousel or the deal gallery swaps its photo.
   Every moving rule is scoped by html:where(:not(.il-calm)), the footer's "Reduce motion". */

@view-transition { navigation: auto; }
html:where(:not(.il-calm)) body.public-body header.site-header { view-transition-name: il-header; }
html:where(:not(.il-calm)) body.public-body #dealCollage .deal-collage-main { view-transition-name: il-deal-photo; }
::view-transition-old(root) { animation: 220ms var(--il-ease-out) both il-vt-out; }
::view-transition-new(root) { animation: 480ms var(--il-ease-out) both il-vt-in; }
@keyframes il-vt-out { to { opacity: 0; } }
@keyframes il-vt-in { from { opacity: 0; translate: 0 14px; } }
::view-transition-group(il-deal-photo) { animation-duration: 600ms; animation-timing-function: var(--il-ease-out); }
::view-transition-old(il-deal-photo),
::view-transition-new(il-deal-photo) { width: 100%; height: 100%; object-fit: cover; }
/* no frame on the new page's first frame (the deal is still loading): the photo dives */
::view-transition-old(il-deal-photo):only-child { animation: 560ms var(--il-ease-out) both il-photo-dive; }
@keyframes il-photo-dive { to { opacity: 0; scale: 1.4; filter: blur(6px); } }

/* ---- hero entrance */
@keyframes il-blur-rise { from { opacity: 0; translate: 0 16px; filter: blur(10px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes il-art-in { from { opacity: 0; scale: .95; filter: blur(8px); } to { opacity: 1; scale: 1; filter: blur(0); } }
html:where(:not(.il-calm)) body.public-body .home-hero_inner h1 > span { display: inline-block; }
html:where(:not(.il-calm)) body.public-body :is(.home-hero_inner > div:first-child > :not(h1), .home-hero_inner h1 > span, .marketplace-head > *, .site-hero h1, .site-hero h1 ~ *):not(.animate-fade-up *) {
  animation: il-blur-rise 820ms var(--il-ease-out) backwards;
}
html:where(:not(.il-calm)) body.public-body .home-hero_inner h1 > span:nth-of-type(1) { animation-delay: 90ms; }
html:where(:not(.il-calm)) body.public-body .home-hero_inner h1 > span:nth-of-type(2) { animation-delay: 180ms; }
html:where(:not(.il-calm)) body.public-body .home-hero_inner h1 > span:nth-of-type(n+3) { animation-delay: 270ms; }
html:where(:not(.il-calm)) body.public-body .home-hero_inner > div:first-child > :nth-child(3) { animation-delay: 380ms; }
html:where(:not(.il-calm)) body.public-body .home-hero_inner > div:first-child > :nth-child(4) { animation-delay: 460ms; }
html:where(:not(.il-calm)) body.public-body .home-hero_inner > div:first-child > :nth-child(5) { animation-delay: 520ms; }
html:where(:not(.il-calm)) body.public-body .home-hero_inner > div:first-child > :nth-child(6) { animation-delay: 580ms; }
html:where(:not(.il-calm)) body.public-body .home-hero_inner > div:first-child > :nth-child(7) { animation-delay: 640ms; }
html:where(:not(.il-calm)) body.public-body .home-hero_inner > div:first-child > :nth-child(n+8) { animation-delay: 700ms; }
html:where(:not(.il-calm)) body.public-body .home-hero_art { animation: il-art-in 1000ms var(--il-ease-out) 140ms backwards; }
html:where(:not(.il-calm)) body.public-body .marketplace-head > :nth-child(2) { animation-delay: 90ms; }
html:where(:not(.il-calm)) body.public-body .marketplace-head > :nth-child(3) { animation-delay: 180ms; }
html:where(:not(.il-calm)) body.public-body .marketplace-head > :nth-child(n+4) { animation-delay: 260ms; }
html:where(:not(.il-calm)) body.public-body .site-hero h1 { animation-delay: 60ms; }
html:where(:not(.il-calm)) body.public-body .site-hero h1 + * { animation-delay: 160ms; }
html:where(:not(.il-calm)) body.public-body .site-hero h1 + * + * { animation-delay: 250ms; }
html:where(:not(.il-calm)) body.public-body .site-hero h1 + * + * ~ * { animation-delay: 330ms; }

/* ---- scroll progress + header lift */
@keyframes il-progress { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes il-header-lift { from { box-shadow: 0 0 0 rgba(var(--il-navy-rgb), 0); } to { box-shadow: 0 12px 30px -20px rgba(var(--il-navy-rgb), .5); } }
@supports (animation-timeline: scroll()) {
  html:where(:not(.il-calm)) body.public-body header.site-header {
    animation: il-header-lift linear both; animation-timeline: scroll(root block); animation-range: 0 140px;
  }
  html:where(:not(.il-calm)) body.public-body header.site-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
    background: var(--il-navy); transform-origin: 0 50%; scale: 0 1;
    animation: il-progress linear both; animation-timeline: scroll(root block);
  }
}

/* ---- the reveal, deepened (section 27's glide, out of a light blur). No scale: a scale on a
   full-width section re-rasters it every frame -- measured on a 4x-throttled phone, a .985
   scale took the home page's scroll from 4 slow frames to 15; the blur alone costs nothing. */
html.il-motion .il-reveal { filter: blur(6px); }
html.il-motion .il-reveal.il-in {
  filter: blur(0);
  transition: opacity 600ms var(--il-ease-out), translate 700ms var(--il-ease-out), filter 700ms var(--il-ease-out);
  transition-delay: var(--il-d, 0ms);
}

/* ---- tap glint: the hover band, crossed once on a tap (il-shell.js adds .il-glint, no-hover
   devices only). The :not() chain matches the resting rule's so this one outranks it. */
html:where(:not(.il-calm)) body.public-body :is(.ui-button.type-filled, .btn-email, .btn-navy, .wci-btn, .investor-news-subscribe):not(:disabled):not(.disabled):not([aria-busy="true"]).il-glint {
  background-image: linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, .28) 50%, transparent 62% 100%) !important;
  background-position: -20% 0 !important;
  transition: background-color var(--il-dur-ui) var(--il-ease-out), box-shadow var(--il-dur-ui) var(--il-ease-out),
    scale var(--il-dur-press) var(--il-ease-out), background-position 750ms var(--il-ease-out);
}

/* ---- the deal card answers a press (hover lift stays section 27's) */
html:where(:not(.il-calm)) body.public-body .ui-deal-card { transition: box-shadow 350ms var(--il-ease-out), translate 350ms var(--il-ease-out), scale 180ms var(--il-ease-out); }
html:where(:not(.il-calm)) body.public-body .ui-deal-card.ui-deal-card_wrapper:active { scale: .985; }

/* ---- the calm switch (il-shell.js puts it at the end of the footer's legal line) */
.footer-copyright .il-calm-switch {
  appearance: none; background: none; border: 0; margin: 6px 0 0; padding: 4px 0; min-height: 0;
  font: inherit; color: inherit; opacity: .8; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.footer-copyright .il-calm-switch:hover { opacity: 1; }
.footer-copyright .il-calm-switch:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
@media print { .il-calm-switch { display: none; } html.il-motion .il-reveal { filter: none !important; } }

/* ==================================================== 29. The wow layer, round 2: light, depth, reply
   (2026-10-19.) The operator asked for the next round of wow, on by default like section 28.
   Same rules: surfaces that exist, compositor-friendly properties, every rule scoped by
   html:where(:not(.il-calm)), and nothing that can leave content hidden.
   - Hero aurora: two soft light pools (navy, crimson) drift behind the home hero. Radial
     gradients on two pseudo layers that only translate/scale -- painted once, never re-rastered
     -- and kept INSIDE the hero's box at the far end of their drift, so nothing overflows.
   - Shine: a light band sweeps across "Across NC" every few seconds (reactbits Shiny Text).
   - The hero photo pushes in slowly (Ken Burns), under section 28's photo glide.
   - Scroll-linked (reactbits Scroll Reveal): the home page's section headings rise as they
     scroll in, and the how-it-works numbers spin up into place. These are tied to the scroll
     position (animation-timeline: view()), so content is never waiting on a timer; a browser
     without view timelines shows them as they always were.
   - Depth: a deal card tilts toward the pointer (reactbits Tilted Card) under its Spotlight,
     and the main calls to action lean toward the pointer (Magnet) -- hover devices only.
   - Reply: a press throws a small spark burst from the finger (reactbits Click Spark), every
     device; the deal page's main offer button breathes a halo so the next step is obvious.
   il-shell.js owns the spark, the magnet and the tilt angles; this section owns the looks. */

/* ---- hero aurora */
@keyframes il-aurora-a { 0%, 100% { translate: 0 0; scale: 1; } 50% { translate: 8% 5%; scale: 1.06; } }
@keyframes il-aurora-b { 0%, 100% { translate: 0 0; scale: 1.04; } 50% { translate: -8% -5%; scale: .96; } }
html:where(:not(.il-calm)) body.public-body .il-home .home-hero.home-hero { position: relative; }
html:where(:not(.il-calm)) body.public-body .il-home .home-hero .home-hero_inner { position: relative; z-index: 1; }
html:where(:not(.il-calm)) body.public-body .il-home .home-hero.home-hero::before,
html:where(:not(.il-calm)) body.public-body .il-home .home-hero.home-hero::after {
  content: "" !important; display: block !important; position: absolute; z-index: 0; pointer-events: none;
  top: 8%; bottom: 8%; width: 48%; background-repeat: no-repeat !important; will-change: translate, scale;
}
html:where(:not(.il-calm)) body.public-body .il-home .home-hero.home-hero::before {
  left: 4%; background-image: radial-gradient(closest-side, rgba(var(--il-navy-rgb), .13), rgba(var(--il-navy-rgb), 0)) !important;
  animation: il-aurora-a 18s ease-in-out infinite;
}
html:where(:not(.il-calm)) body.public-body .il-home .home-hero.home-hero::after {
  right: 4%; background-image: radial-gradient(closest-side, rgba(var(--il-crimson-rgb), .09), rgba(var(--il-crimson-rgb), 0)) !important;
  animation: il-aurora-b 23s ease-in-out infinite;
}

/* ---- shine on "Across NC". The colour stays the span's own (currentColor); only the fill is
   handed to the background so a light band can cross it. Restates section 28's entrance, and
   outranks it (its :is() list carries 4 classes; the doubled attribute makes this 5). */
/* The band image is 250% of the span, so a position outside 0..100% leaves part of the span with
   no fill at all -- and the text fill is transparent, so that part vanished ("Acros" on a phone,
   where "NC" wraps into the uncovered end). 0% and 100% keep the image covering the whole span
   and still park the band just off either edge. */
@keyframes il-shine { 0%, 64% { background-position: 0% 0; } 100% { background-position: 100% 0; } }
html:where(:not(.il-calm)) body.public-body .home-hero .home-hero_inner h1 > span[data-brand-across-state][data-brand-across-state] {
  background-image: linear-gradient(105deg, currentColor 0 40%, rgba(255, 255, 255, .9) 50%, currentColor 60% 100%);
  background-size: 250% 100%; background-repeat: no-repeat; background-position: 0% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: il-blur-rise 820ms var(--il-ease-out) 270ms backwards, il-shine 5.5s ease-in-out 1.4s infinite;
}

/* ---- the hero photo pushes in */
@keyframes il-kenburns { from { scale: 1; } to { scale: 1.07; } }
html:where(:not(.il-calm)) body.public-body .home-hero_art > img { transform-origin: 60% 45%; animation: il-kenburns 16s ease-in-out infinite alternate; }

/* ---- scroll-linked headings and step numbers */
@keyframes il-head-rise { from { opacity: 0; translate: 0 24px; } }
@keyframes il-num-pop { from { opacity: 0; scale: .3; rotate: -120deg; } }
/* .il-rise is added by il-shell.js, and only to an element with NO clipping ancestor: a view
   timeline binds to the nearest scroll container, and an `overflow: hidden` section is one that
   never scrolls -- the heading would sit frozen on its first frame (measured: opacity 0). */
/* Most home sections clip with `overflow: hidden` only to trim their decorations; `clip` cuts
   the same edge without making them scroll containers, so their headings can rise too. A
   browser without `clip` keeps `hidden` (the declaration is dropped) and its headings stay put.
   scratch/wow2-probe.mjs measures every section's box the same with the switch on and off. */
@supports (animation-timeline: view()) and (overflow: clip) {
  html:where(:not(.il-calm)) body.public-body .il-home :is(.how-buying-section, .site-hero, .home-join-section, .home-join) { overflow: clip !important; }
}
@supports (animation-timeline: view()) {
  html:where(:not(.il-calm)) body.public-body .il-home h2.il-rise {
    animation: il-head-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 18%;
  }
  html:where(:not(.il-calm)) body.public-body .il-home .home-how_num.il-rise {
    animation: il-num-pop linear both; animation-timeline: view(); animation-range: entry 0% cover 28%;
  }
}

/* ---- depth: the deal card tilts toward the pointer (--il-rx/--il-ry from il-shell.js). The
   grids pin `transform: none !important`, so the tilt restates !important on hover only. */
html:where(:not(.il-calm)) body.public-body .ui-deal-card {
  transition: box-shadow 350ms var(--il-ease-out), translate 350ms var(--il-ease-out), scale 180ms var(--il-ease-out), transform 450ms var(--il-ease-out);
}
@media (hover: hover) {
  html:where(:not(.il-calm)) body.public-body .ui-deal-card.ui-deal-card_wrapper:hover {
    transform: perspective(900px) rotateX(var(--il-rx, 0deg)) rotateY(var(--il-ry, 0deg)) !important;
  }
}

/* ---- reply: the spark burst (built by il-shell.js at the press point) */
html:where(:not(.il-calm)) .il-spark { position: fixed; z-index: 2147483000; width: 0; height: 0; pointer-events: none; }
html:where(:not(.il-calm)) .il-spark > i { position: absolute; left: -1px; top: -4px; width: 2px; height: 8px; border-radius: 1px; }

/* ---- the offer button breathes a halo (never over a keyboard focus ring) */
@keyframes il-halo {
  0% { outline-offset: 0; outline-color: rgba(var(--il-navy-rgb), .5); }
  45%, 100% { outline-offset: 12px; outline-color: rgba(var(--il-navy-rgb), 0); }
}
html:where(:not(.il-calm)) body.public-body .pricing-primary-cta:not(:focus-visible):not(:disabled) {
  outline: 2px solid transparent; animation: il-halo 3.2s var(--il-ease-out) 1.5s infinite;
}
@media print { html body.public-body .home-hero.home-hero::before, html body.public-body .home-hero.home-hero::after, .il-spark { display: none !important; } }

/* ==================================================== 30. Solid controls: filled buttons, filled icon tiles
   (2026-10-24.) Operator: "solid buttons, and solid icons (solid navy with a solid white icon),
   everywhere it makes sense", on the phone and the desktop. The site had grown outline buttons
   (white face, coloured rim) and bare or ringed icons beside its filled ones; this section is
   the one place that turns them solid, so no page and no generated file was edited for it.
   - SOLID ACTIONS: the main action of a group is a navy face with a white label and glyph; a
     helper beside it is SOFT SOLID (light gray face, navy label, no rim) so the row still has a
     first choice. The green "List Your Deal" goes solid green; nothing else changes hue.
   - SOLID ICON TILES: the alerts bell and the call/text/email glyphs sit on navy; arrows that
     float on a photo are solid white discs. Menu, card heart, viewer buttons stay transparent.
   - TOGGLES stay readable: a two-state control (Near me, List/Map) keeps its "on" as solid navy,
     and its "off" becomes a solid light tint instead of a rim -- solid, but still two states.
   - Left alone on purpose: plain text links, the drawer's menu rows, anything on a dark band
     (`.email-btn--on-dark`), and controls whose colour is a status (the saved heart is crimson).
   Weight: these surfaces are painted by rules up to two ids deep with !important (the deal
   page's #propertyContent / #mobileOfferBar passes). Rather than chase each one, every rule here
   carries THREE never-matching id negations on `html` -- `:not(#il-s30a)` weighs one id and
   matches every document -- so the section outranks them by construction and stays one block. */
:root { --il-solid: var(--il-navy); --il-solid-hover: var(--il-navy-hover); --il-solid-active: var(--il-navy-active); }

/* ---- solid actions (navy): the ONE main action of a group */
html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body :is(
  .ui-button.type-outline:is(.color-navy, .color-primary), .btn-primary, #mobileOfferBar .email-btn--gold
) {
  background: var(--il-solid) !important; background-color: var(--il-solid) !important; background-image: none !important;
  border-color: var(--il-solid) !important; color: #fff !important;
  box-shadow: 0 8px 20px -10px rgba(var(--il-navy-rgb), .55) !important;
}
html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body :is(
  .ui-button.type-outline:is(.color-navy, .color-primary), .btn-primary, #mobileOfferBar .email-btn--gold
) :is(svg, i, span, .email-btn-label) { color: #fff !important; }
@media (hover: hover) {
  html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body :is(
    .ui-button.type-outline:is(.color-navy, .color-primary), .btn-primary, #mobileOfferBar .email-btn--gold
  ):hover {
    background-color: var(--il-solid-hover) !important; border-color: var(--il-solid-hover) !important;
    box-shadow: 0 12px 26px -10px rgba(var(--il-navy-rgb), .65) !important;
  }
}

/* ---- soft solid (light gray face, navy label, no rim): the helper actions beside a main one.
   Round 2 (same day): the operator liked solid but not EVERYTHING navy -- a row of equal navy
   buttons has no first choice. Secondary actions are filled, just not loud. */
html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body :is(
  .ui-button.type-outline:is(.color-black, .color-gray), .ui-button.pricing-secondary-cta,
  #viewFlyerBtn.ui-button, #viewFlyerBtn .ui-button,
  .email-btn--outline:not(.email-btn--on-dark):not(.deal-timeline-row), .btn-outline:not(.email-btn--on-dark):not(.deal-timeline-row),
  .email-btn--gold:not(#mobileOfferBar .email-btn--gold):not(.deal-timeline-row), .ncdd-tool-filters
) {
  background: var(--il-navy-05) !important; background-color: var(--il-navy-05) !important; background-image: none !important;
  border-color: var(--il-navy-05) !important; color: var(--il-navy) !important; box-shadow: none !important;
}
html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body :is(
  .ui-button.type-outline:is(.color-black, .color-gray), .ui-button.pricing-secondary-cta,
  #viewFlyerBtn.ui-button, #viewFlyerBtn .ui-button,
  .email-btn--outline:not(.email-btn--on-dark):not(.deal-timeline-row), .btn-outline:not(.email-btn--on-dark):not(.deal-timeline-row),
  .email-btn--gold:not(#mobileOfferBar .email-btn--gold):not(.deal-timeline-row), .ncdd-tool-filters
) :is(svg, i, span, .email-btn-label) { color: var(--il-navy) !important; }
@media (hover: hover) {
  html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body :is(
    .ui-button.type-outline:is(.color-black, .color-gray), .ui-button.pricing-secondary-cta,
  #viewFlyerBtn.ui-button, #viewFlyerBtn .ui-button,
  .email-btn--outline:not(.email-btn--on-dark):not(.deal-timeline-row), .btn-outline:not(.email-btn--on-dark):not(.deal-timeline-row),
  .email-btn--gold:not(#mobileOfferBar .email-btn--gold):not(.deal-timeline-row), .ncdd-tool-filters
  ):hover { background-color: var(--il-navy-10) !important; border-color: var(--il-navy-10) !important; }
}
html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body .ncdd-tool-filters .ncdd-tool-count { background: var(--il-solid) !important; color: #fff !important; }

/* ---- "Read more" is a text link, not a button: transparent, navy, underline on hover */
html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body .ui-button.overview-readMore { background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--il-navy) !important; }
@media (hover: hover) { html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body .ui-button.overview-readMore:hover { text-decoration: underline !important; } }

/* ---- solid green: the one green action keeps its hue, now filled */
html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body .ui-button.color-mint.type-tinted {
  background: var(--il-green) !important; border-color: var(--il-green) !important; color: #fff !important;
  box-shadow: 0 8px 20px -10px rgba(15, 122, 61, .55) !important;
}
html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body .ui-button.color-mint.type-tinted :is(svg, span) { color: #fff !important; }
@media (hover: hover) {
  html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body .ui-button.color-mint.type-tinted:hover { background: var(--il-green-ink) !important; border-color: var(--il-green-ink) !important; }
}

/* ---- toggles: "off" is a solid light tint, "on" is solid navy */
html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body .ncdd-tool:not(.ncdd-tool-filters) {
  background: var(--il-navy-05) !important; border-color: var(--il-navy-05) !important; color: var(--il-navy) !important;
}
html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body .ncdd-tool:not(.ncdd-tool-filters)[aria-pressed="true"] {
  background: var(--il-solid) !important; border-color: var(--il-solid) !important; color: #fff !important;
}

/* ---- link pills (city lists): solid tint, no rim -- a wall of navy pills would shout */
html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body .site-link-pill {
  background: var(--il-navy-05) !important; border-color: var(--il-navy-05) !important; color: var(--il-navy) !important;
}
@media (hover: hover) {
  html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body .site-link-pill:hover { background: var(--il-solid) !important; border-color: var(--il-solid) !important; color: #fff !important; }
}

/* ---- solid navy icon tiles: the alerts bell (a call to look) */
html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body .ncdd-bell-trigger {
  background: var(--il-solid) !important; border-color: var(--il-solid) !important; color: #fff !important;
  box-shadow: 0 8px 18px -8px rgba(var(--il-navy-rgb), .6) !important;
}
html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body .ncdd-bell-trigger :is(svg, i) { color: #fff !important; }
@media (hover: hover) { html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body .ncdd-bell-trigger:hover { background: var(--il-solid-hover) !important; border-color: var(--il-solid-hover) !important; } }
/* arrows that sit ON a photo or a card row: a solid WHITE disc with a navy glyph and a soft
   shadow, no rim -- navy on a photo fights the photo; white floats over it */
html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body :is(.home-hero_arrow, .deal-rail-nav) {
  background: #fff !important; border-color: #fff !important; color: var(--il-navy) !important;
  box-shadow: 0 6px 18px -6px rgba(15, 23, 42, .35) !important;
}
html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body :is(.home-hero_arrow, .deal-rail-nav) :is(svg, i) { color: var(--il-navy) !important; }
html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body .deal-rail-nav:disabled { opacity: .35 !important; box-shadow: none !important; }
/* call / text / email on the contact card: the glyph sits on a navy disc */
html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body .contactCard-line > svg {
  box-sizing: content-box; flex: none; width: 18px !important; height: 18px !important; padding: 9px; border-radius: 999px;
  background: var(--il-solid); color: #fff !important; stroke: #fff; box-shadow: 0 6px 14px -8px rgba(var(--il-navy-rgb), .6);
}
/* the gallery's "N more" tile reads as a button on a photo: solid navy pill */
html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body #dealCollage .dealGallery-more .ui-button {
  background: var(--il-solid) !important; border-color: var(--il-solid) !important; color: #fff !important; border-radius: 999px !important;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6) !important;
}
/* Left as they were, on purpose: the header menu button and the card heart (transparent -- the
   heart's own crimson fill is its saved state), the photo viewer's glass buttons (on a black
   backdrop), and the footer's Get the App / Translate (utility links, not actions). */

/* ---- the deal page on a phone: the photo grid is centred, and the bar has no dead gutter
   (1) THE GRID. The phone template names two columns ("main main" / "s1 s2" / "map more"), and
   a fourth photo is meant to hide. The hide (section above, `> .dealGallery-side-3`) LOST to
   `> button[data-collage-extra] { display: flex !important }` -- the attribute + element made
   that selector heavier -- so the fourth cell stayed in the grid, named an area the template does
   not have, and the browser added two implicit columns for it: the photos stopped ~14px short of
   the frame's right edge, which is the off-centre look on a phone. The hide is restated here
   heavier than both. The tile it hides lends its photo to the "N more" tile behind a navy veil,
   so the last cell shows a house instead of a black slab (il-shell.js sets --il-more-photo).
   (2) THE BAR. `#mobileOfferBar > div` reserved 5.75rem on the right so its buttons stayed out
   from under the GoHighLevel chat bubble -- 92px of empty bar until the bubble loads (first
   touch, or 1.5s after load), and on a phone that is a third of the row. The bubble is lifted
   OVER the bar instead now (public-mobile.js `liftChat(88)` on a deal page, the same shadow-root
   rule that lifts it over the tab bar elsewhere), so the bar takes its full width back. */
@media (max-width: 960px) {
  html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body #propertyContent #dealCollage.dealGallery-wrapper > .dealGallery-side-3 { display: none !important; }
  html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body #propertyContent #dealCollage.dealGallery-wrapper[style*="--il-more-photo"] > .dealGallery-more {
    background-image: linear-gradient(rgba(var(--il-navy-rgb), .55), rgba(11, 42, 70, .78)), var(--il-more-photo, none) !important;
    background-size: cover !important; background-position: center !important;
  }
}
@media (max-width: 767px) {
  html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body #mobileOfferBar > div { padding-right: 1rem !important; }
}

/* ---- the phone offer bar: both actions solid (the walkthrough glyph white on navy) */
html:not(#il-s30a):not(#il-s30b):not(#il-s30c) body.public-body #mobileOfferBar .email-btn { min-width: 48px; justify-content: center; border-radius: 12px !important; }

/* ==================================================== 31. The wow layer, round 3: arrival, glass, answer
   (2026-10-24, with section 30.) Same rules as 28 and 29: on by default, every moving rule under
   html:where(:not(.il-calm)), compositor-friendly properties, nothing that can leave content hidden.
   - Photo arrival: a deal-card / gallery photo still on the wire shimmers on its frame, then
     fades up out of a light blur (il-shell.js `photoArrive` owns the class and the fade).
   - Glass header: the sticky header turns to frosted glass, so content slides under it instead
     of being cut by a white slab (section 28's lift shadow still grows with the scroll).
   - The phone offer bar rises into place when it appears, instead of popping.
   - Solid tiles answer the finger: a press sinks them, release springs back.
   - Arrows point the way: the arrow glyph inside an action slides forward on hover.
   - The deal gallery's side photos push in on hover, like the deal cards already do. */
@keyframes il-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
html:where(:not(.il-calm)) body.public-body .il-img-loading {
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 70%) !important;
  background-size: 200% 100% !important; background-repeat: no-repeat !important;
  animation: il-shimmer 1.3s linear infinite;
}

/* glass header (a look, not a motion: it is the same under il-calm) */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html body.public-body header.site-header {
    background: rgba(255, 255, 255, .86) !important;
    -webkit-backdrop-filter: saturate(1.7) blur(16px); backdrop-filter: saturate(1.7) blur(16px);
  }
}

@keyframes il-bar-rise { from { translate: 0 100%; opacity: .4; } to { translate: 0 0; opacity: 1; } }
@media (max-width: 1100px) {
  html:where(:not(.il-calm)) body.public-body #mobileOfferBar:not(.hidden) { animation: il-bar-rise 520ms var(--il-ease-out) both; }
}

html:where(:not(.il-calm)) body.public-body :is(.ncdd-bell-trigger, .home-hero_arrow, .deal-rail-nav, .site-header_menu_btn, .ui-deal-card_info_controls_top_btn[data-il-save-deal], #photoSliderModal button.rounded-full, .contactCard-line > svg) {
  transition: scale 260ms var(--il-ease-spring), background-color 200ms ease, box-shadow 200ms ease;
}
html:where(:not(.il-calm)) body.public-body :is(.ncdd-bell-trigger, .home-hero_arrow, .deal-rail-nav, .site-header_menu_btn, .ui-deal-card_info_controls_top_btn[data-il-save-deal], #photoSliderModal button.rounded-full):active { scale: .9; transition-duration: 90ms; }
html:where(:not(.il-calm)) body.public-body .contactCard-line:active > svg { scale: .88; }
@media (hover: hover) {
  html:where(:not(.il-calm)) body.public-body .contactCard-line:hover > svg { scale: 1.08; }
  html:where(:not(.il-calm)) body.public-body :is(.ui-button, .email-btn, .btn-primary) :is(.lucide-arrow-right, .lucide-arrow-up-right, .lucide-chevron-right) { transition: translate 260ms var(--il-ease-spring); }
  html:where(:not(.il-calm)) body.public-body :is(.ui-button, .email-btn, .btn-primary):hover :is(.lucide-arrow-right, .lucide-chevron-right) { translate: 3px 0; }
  html:where(:not(.il-calm)) body.public-body :is(.ui-button, .email-btn, .btn-primary):hover .lucide-arrow-up-right { translate: 2px -2px; }
  html:where(:not(.il-calm)) body.public-body #propertyContent #dealCollage > button[data-collage-extra] img { transition: scale 900ms var(--il-ease-out), filter 300ms ease !important; }
  html:where(:not(.il-calm)) body.public-body #propertyContent #dealCollage > button[data-collage-extra]:hover img { scale: 1.05; }
}
@media print { html:where(:not(.il-calm)) body.public-body .il-img-loading { background-image: none !important; animation: none !important; } }