/* =====================================================================================
   HOPE layout layer - the arrangement skin/layout.js builds, drawn in HOPE.

   DEAL PAGE: the InvestorLift reading order, in HOPE's language. Photos lead full width,
   then one reading column beside a price rail that stays put, a section tab bar, and the
   numbers as flat cards.

   THE ORDER IS THE DESIGN, and it is ordered the way a cash buyer actually decides:

     1  photos ................. ATTENTION. The photo decides whether the page gets read.
     2  title / status / facts .. ORIENTATION. What is it, where is it, is it still live.
     3  ARV / rent / spread ..... VALUE. The reason to care, before anything asks for trust.
     4  the meter ............... FRAMING. Anchors the price against the value just shown,
                                  so the number lands as a discount rather than as a cost.
     5  tabs .................... CONTROL. Hook first, then hand navigation over.
     6  highlights .............. INTEREST. Scannable claims.
     7  investor summary ........ DESIRE. Turns the figures into somebody's plan.
     8  transaction details ..... TERMS. What you are agreeing to - AFTER the value, because
                                  a fee table shown first reads as friction.
     9  timeline + closing ...... URGENCY beside CERTAINTY. A deadline alone is pressure; a
                                  deadline with a closing plan next to it is a schedule.
    10  condition / details ..... DUE DILIGENCE. Now they are checking their own work.
    11  location / market ....... CONFIDENCE. The context that supports the exit.
    12  records / downloads ..... PROOF, and something to take to a partner.
    13  FAQ ..................... OBJECTIONS, answered before the ask.
    14  contact ................. ACTION, where the reading ends.
    15  "not for me" ............ THE EXIT RAMP, and it goes LAST on purpose: it must never
                                  sit above a decision it could talk somebody out of.

   The RAIL carries price, clock and the one primary action, and stays on screen, so the ask
   is a glance away from wherever the reader is.
   ===================================================================================== */

/* =============================================================== DEAL PAGE */
html body.public-body.public-body:has(#propertyContent) {
  background: var(--hope-ground) var(--hope-band) 0 0 / 100% 440px no-repeat !important;
}
html body.public-body:has(#propertyContent) main#main { padding-top: 12px !important; }

/* The page adapts to the screen instead of sitting in a 1280px column with 300px of ground
   either side of it on an ordinary laptop. The cap is a READING cap, not the viewport: past
   ~1560px the line length in the write-up stops being comfortable. */
/* A plain max-width, NEVER a 100vw calc: body carries `zoom: .9`, so the body's own CSS pixel
   is 0.9 of a viewport pixel while `vw` stays viewport-relative - a `calc(100vw - 48px)` cap
   therefore under-measures the room by 10% and leaves a band of dead ground down each side on
   exactly the wide screens it was meant to fill. The parent is already body-width; a cap plus
   the container's own auto margins is all this needs. */
/* Their .dealContent is `max-width:1360px; padding:0 24px 24px` on content-box, i.e. 1408px
   outer. That is the READING cap, and it is narrower than the 1560 this page had been using:
   past it the write-up's line length stops being comfortable and the rail drifts away from
   the column it belongs to. */
/* A plain max-width, NEVER a 100vw calc: body carries `zoom: .9`, so the body's own CSS pixel
   is 0.9 of a viewport pixel while `vw` stays viewport-relative - a `calc(100vw - 48px)` cap
   therefore under-measures the room by 10% and leaves a band of dead ground down each side on
   exactly the wide screens it was meant to fill. The parent is already body-width. */
html body.public-body:has(#propertyContent) main#main > .max-w-7xl { max-width: min(1408px, calc(100% - 24px)) !important; }

/* ---------------------------------------------------------------- 1. the gallery
   One large photo with three beside it; the last tile opens the whole set. */
html body.public-body #propertyContent .hope-gallery { margin-bottom: 24px; }
html body.public-body #propertyContent .hope-gallery .deal-image-frame {
  border-radius: 14px !important; overflow: hidden !important; background: #fff !important;
  box-shadow: 0 18px 44px -20px rgba(10, 20, 36, .38) !important; border: 0 !important;
}
html body.public-body #propertyContent .hope-gallery .deal-collage { gap: 6px !important; background: #fff !important; }
html body.public-body #propertyContent .hope-gallery .deal-collage-cell { border-radius: 0 !important; background: #ebebeb !important; }
html body.public-body #propertyContent .hope-gallery .deal-collage-cell > img { transition: transform 700ms cubic-bezier(.16, 1, .3, 1); }
html body.public-body #propertyContent .hope-gallery .deal-collage-cell:hover > img { transform: scale(1.03); }
@media (min-width: 768px) {
  html body.public-body #propertyContent .hope-gallery .deal-collage-cell { aspect-ratio: auto !important; height: 100% !important; min-height: 0 !important; }
  html body.public-body #propertyContent .hope-gallery .deal-collage[data-cells="4"] {
    grid-template-columns: 2fr 1fr 1fr !important; grid-template-rows: 250px 250px !important;
  }
  html body.public-body #propertyContent .hope-gallery .deal-collage[data-cells="4"] > :nth-child(1) { grid-column: 1 !important; grid-row: 1 / 3 !important; }
  html body.public-body #propertyContent .hope-gallery .deal-collage[data-cells="4"] > :nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
  html body.public-body #propertyContent .hope-gallery .deal-collage[data-cells="4"] > :nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; }
  html body.public-body #propertyContent .hope-gallery .deal-collage[data-cells="4"] > :nth-child(4) { grid-column: 2 / 4 !important; grid-row: 2 !important; }
  html body.public-body #propertyContent .hope-gallery .deal-collage[data-cells="3"] { grid-template-columns: 2fr 1fr !important; grid-template-rows: 250px 250px !important; }
  html body.public-body #propertyContent .hope-gallery .deal-collage[data-cells="3"] > :nth-child(1) { grid-row: 1 / 3 !important; }
  html body.public-body #propertyContent .hope-gallery .deal-collage[data-cells="2"] { grid-template-columns: 2fr 1fr !important; grid-template-rows: 500px !important; }
  html body.public-body #propertyContent .hope-gallery .deal-collage[data-cells="1"] { grid-template-rows: 500px !important; }
  /* the caption and the 80px thumbnail strip both restate the mosaic */
  html body.public-body #propertyContent .hope-gallery :is(#dealPhotoCaption, #galleryThumbs) { display: none !important; }
}
/* "+34 photos" is a white pill in the corner of the last tile, not a wash over it */
html body.public-body #propertyContent .hope-gallery .deal-collage-more {
  inset: auto 14px 14px auto !important; width: auto !important; height: auto !important;
  padding: 9px 14px !important; border-radius: 8px !important;
  background: #fff !important; color: var(--hope-ink) !important; font-weight: 600 !important; font-size: 13px !important;
  box-shadow: 0 8px 20px -6px rgba(10, 20, 36, .35) !important; backdrop-filter: none !important;
}
html body.public-body #propertyContent .hope-gallery .deal-collage-more svg { color: var(--jhb-crimson) !important; }
html body.public-body #propertyContent .hope-gallery #galleryThumbs { background: #fff; }

/* The overlays ON the photo. There is ONE of them by design: a photo carrying a status badge
   AND an activity pill AND a photo count is three claims fighting one image. The activity
   pill is the one that earns its place - it is the only fact on the page that is about other
   buyers - and it is a plain dark glass pill rather than a yellow bar, because yellow over a
   photograph is a warning stripe and this is not a warning. */
html body.public-body #propertyContent .hope-gallery .deal-overlay-pill,
html body.public-body #propertyContent .hope-gallery #dealViewBadge {
  border-radius: 8px !important; background: rgba(10, 20, 36, .66) !important; backdrop-filter: blur(8px) !important;
  color: #fff !important; box-shadow: none !important; border: 1px solid rgba(255, 255, 255, .16) !important;
  font-weight: 600 !important; letter-spacing: 0 !important;
}
html body.public-body #propertyContent .hope-gallery #dealViewBadge svg { color: var(--jhb-gold) !important; }
html body.public-body #propertyContent .hope-gallery #dealStatusBadge {
  border-radius: 8px !important; box-shadow: 0 6px 16px -6px rgba(10, 20, 36, .5) !important; letter-spacing: .04em !important;
}

/* ---------------------------------------------------------------- the two columns */
@media (min-width: 1024px) {
  /* .dealContent-body is `1fr 320px` at a 24px gap, and the rail is `sticky; top:24px`. The
     rail was 372/400px here, which is a third of the reading column on a laptop - theirs is a
     fixed 320 whatever the screen does, so the column keeps the width it grows into. */
  html body.public-body #propertyContent .deal-showcase {
    display: grid !important; grid-template-columns: minmax(0, 1fr) 320px !important; gap: var(--il-gap) !important; align-items: start !important;
  }
  html body.public-body #propertyContent .deal-showcase-rail {
    position: sticky !important; top: 24px !important; align-self: start !important;
    max-height: none !important; height: auto !important;
  }
}
/* .dealContent-left and -right are both `display:grid; grid-template-columns:100%; row-gap:24px`. */
html body.public-body #propertyContent .deal-showcase-media { display: grid !important; grid-template-columns: 100% !important; gap: var(--il-gap) !important; align-content: start; min-width: 0; }
html body.public-body #propertyContent .deal-showcase-media > * { margin: 0 !important; }
html body.public-body #propertyContent .deal-showcase-rail { display: grid !important; grid-template-columns: 100% !important; gap: var(--il-gap) !important; align-content: start; }
html body.public-body #propertyContent .deal-showcase-rail > * { margin: 0 !important; }

/* ---------------------------------------------------------------- 2. the title block
   On the ground rather than in a box: the photos above it are the hero, and a card around
   the title would put a second frame inside the first. */
html body.public-body #propertyContent .deal-showcase-media > .deal-top-bar {
  background: transparent !important; box-shadow: none !important; padding: 2px 0 0 !important; border-radius: 0 !important;
}
html body.public-body #propertyContent .deal-top-bar .deal-hero-meta { gap: 8px !important; margin-bottom: 10px !important; align-items: center !important; }
html body.public-body #propertyContent .deal-top-bar .deal-kind-chip {
  border-radius: 999px !important; box-shadow: none !important; letter-spacing: .06em !important;
  font-size: 11px !important; padding: 5px 12px !important;
  background: rgba(19, 67, 107, .08) !important; color: var(--jhb-navy) !important;
}
html body.public-body #propertyContent .deal-top-bar .deal-kind-chip svg { color: var(--jhb-navy) !important; }
html body.public-body #propertyContent .deal-top-bar .deal-hero-headline h1 {
  font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.4rem) !important; font-weight: 700 !important;
  letter-spacing: -.03em !important; line-height: 1.14 !important; color: var(--hope-ink) !important;
}
html body.public-body #propertyContent .deal-top-bar .deal-header-map-icon {
  background: var(--jhb-crimson-soft) !important; color: var(--jhb-crimson) !important; border-radius: 10px !important; box-shadow: none !important;
}
html body.public-body #propertyContent .deal-top-bar .deal-header-map-icon svg { color: var(--jhb-crimson) !important; }
html body.public-body #propertyContent .deal-top-bar .deal-hero-actionbar {
  border-top: 0 !important; padding-top: 14px !important; margin-top: 2px !important; gap: 12px !important;
}

/* The status pill and its "?" are ONE control, sized together. The mark used to be a bare
   glyph tacked on beside the pill at a different size and weight, which read as a rendering
   fault next to a solid badge rather than as something to press. */
html body.public-body #propertyContent .deal-top-bar .deal-status-chip {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  background: transparent !important; box-shadow: none !important; padding: 0 !important; border: 0 !important;
}
html body.public-body #propertyContent .deal-top-bar .deal-status-chip #statusBadge {
  border-radius: 999px !important; font-size: 11px !important; letter-spacing: .06em !important;
  padding: 5px 12px !important; line-height: 1.35 !important; box-shadow: none !important;
}
html body.public-body #propertyContent .deal-top-bar .deal-status-chip .deal-tip-mark,
html body.public-body #propertyContent .deal-tip-mark,
html body.public-body #propertyContent .deal-chip-tip-mark {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 15px !important; height: 15px !important; min-width: 15px !important; padding: 0 !important;
  border-radius: 50% !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1 !important;
  background: rgba(19, 67, 107, .1) !important; color: var(--jhb-navy) !important;
  border: 0 !important; box-shadow: none !important; cursor: help; vertical-align: middle;
  transition: background-color 180ms var(--hope-ease), color 180ms var(--hope-ease);
}
html body.public-body #propertyContent :is(.deal-tip-mark, .deal-chip-tip-mark):hover,
html body.public-body #propertyContent :is(.deal-tip-mark, .deal-chip-tip-mark):focus-visible {
  background: var(--jhb-navy) !important; color: #fff !important;
}

/* ---- the fact strip: one white bar with hairline dividers */
html body.public-body #propertyContent #dealHeroStats {
  display: flex !important; flex-wrap: wrap; gap: 0 !important; background: #fff; border-radius: 12px;
  border: 1px solid var(--hope-border); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); padding: 2px; overflow: visible;
}
html body.public-body #propertyContent #dealHeroStats .deal-stat-chip {
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 8px !important;
  padding: 10px 18px !important; color: var(--hope-muted) !important; font-weight: 500 !important; font-size: 14px !important;
}
html body.public-body #propertyContent #dealHeroStats .deal-stat-chip + .deal-stat-chip:not(.deal-stat-chip-price) {
  box-shadow: inset 1px 0 0 var(--hope-border) !important; border-radius: 0 !important;
}
html body.public-body #propertyContent #dealHeroStats .deal-stat-chip b { color: var(--hope-ink) !important; font-weight: 700 !important; }
html body.public-body #propertyContent #dealHeroStats .deal-stat-chip svg { color: var(--jhb-navy) !important; }
html body.public-body #propertyContent #dealHeroStats .deal-stat-chip-type { color: var(--jhb-good) !important; }
html body.public-body #propertyContent #dealHeroStats .deal-stat-chip-type svg { color: var(--jhb-green) !important; }
@media (min-width: 1024px) {
  /* the price is in the rail a hand-width away; printing it twice is noise, not emphasis */
  html body.public-body #propertyContent #dealHeroStats #heroPriceChip { display: none !important; }
  html body.public-body #propertyContent .deal-hero-contact-btn { display: none !important; }
}
html body.public-body #propertyContent #loggedInAddressHint {
  background: rgba(19, 67, 107, .07) !important; border: 0 !important; border-radius: 10px !important;
  color: var(--hope-ink) !important; margin-top: 12px !important; box-shadow: none !important;
}

/* ---------------------------------------------------------------- 3. the three numbers */
html body.public-body #propertyContent #valueBandSection { background: transparent !important; box-shadow: none !important; padding: 0 !important; border: 0 !important; }
html body.public-body #propertyContent #valueBandSection .deal-value-band-grid { gap: 12px !important; }
html body.public-body #propertyContent #valueBandSection .deal-value-tile {
  background: #fff !important; border: 1px solid var(--hope-border) !important; border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important; padding: 18px 18px 16px !important; position: relative; overflow: hidden;
}
html body.public-body #propertyContent #valueBandSection .deal-value-tile::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--jhb-navy);
}
html body.public-body #propertyContent #valueBandSection .deal-value-tile-accent::before { background: var(--jhb-green); }
html body.public-body #propertyContent #valueBandSection .deal-value-label {
  color: var(--hope-muted) !important; letter-spacing: .07em !important; font-weight: 600 !important; font-size: 11px !important;
}
html body.public-body #propertyContent #valueBandSection .deal-value-figure {
  color: var(--hope-ink) !important; font-size: 1.75rem !important; font-weight: 700 !important; letter-spacing: -.025em !important;
}
html body.public-body #propertyContent #valueBandSection .deal-value-tile-accent .deal-value-figure { color: var(--jhb-good) !important; }
html body.public-body #propertyContent #valueBandSection .deal-value-source { color: var(--hope-muted) !important; padding: 0 2px; font-size: 11.5px !important; }

/* ---------------------------------------------------------------- 5. section tabs */
html body.public-body #propertyContent .hope-tabs {
  /* 72px is the nav's own height once it has shrunk on scroll. The bar used to sit at 92 and
     left a ~10px window between the two sticky surfaces, which the page scrolled through -
     and a strip of somebody else's text between the header and the tabs reads as a tear in
     the page. The ::before below covers the seam whatever the nav does. */
  position: sticky; top: 72px; z-index: 30; display: flex; gap: 2px; padding: 4px; overflow-x: auto; scrollbar-width: none;
  /* OPAQUE. At .94 with a blur behind it this read as glass, and what scrolled under it printed
     straight through the labels - a section title and a phone number showing between "Overview"
     and "Numbers" at every width. It is the one sticky surface on the page, and the rest of the
     page is flat white on a hairline, so glass here was also the only soft-depth surface left.
     The backdrop-filter goes with it: it makes a stacking context for no visible gain. */
  background: #fff; border: 1px solid var(--hope-border); border-radius: 10px; box-shadow: none;
}
html body.public-body #propertyContent .hope-tabs::-webkit-scrollbar { display: none; }
/* the seam: the page ground, drawn above the bar and moving with it */
html body.public-body #propertyContent .hope-tabs::before {
  content: ''; position: absolute; left: -1px; right: -1px; bottom: 100%; height: 18px;
  background: var(--hope-ground); pointer-events: none;
}
html body.public-body #propertyContent .hope-tab {
  flex: none; padding: 8px 15px; border-radius: 7px; color: var(--hope-muted); font-weight: 600; font-size: 13.5px; text-decoration: none; white-space: nowrap;
  transition: background-color 220ms var(--hope-ease), color 220ms var(--hope-ease);
}
html body.public-body #propertyContent .hope-tab:hover { background: rgba(19, 67, 107, .07); color: var(--jhb-navy); }
html body.public-body #propertyContent .hope-tab.is-on { background: var(--jhb-navy); color: #fff; box-shadow: none; }
html body.public-body #propertyContent .hope-tab[hidden] { display: none; }
html { scroll-padding-top: 168px; }

/* ---------------------------------------------------------------- 6-13. content cards
   Hairline + a 1px shadow rather than a floating one. Twelve stacked cards each casting a
   real shadow reads as clutter; the hairline is what separates them and the page goes quiet. */
html body.public-body #propertyContent .deal-showcase-media :is(.bg-white.rounded-2xl, .hope-duo > div, .rounded-2xl.bg-white) {
  border-radius: 12px !important; border: 1px solid var(--hope-border) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important; padding: 24px !important;
}
html body.public-body #propertyContent .deal-showcase-media :is(.bg-white.rounded-2xl, .hope-duo > div) h2,
html body.public-body #propertyContent .deal-showcase-media :is(.bg-white.rounded-2xl, .hope-duo > div) h3 {
  font-size: 1.15rem !important; letter-spacing: -.02em !important; color: var(--hope-ink) !important;
}
html body.public-body #propertyContent .hope-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
html body.public-body #propertyContent .hope-duo > :only-child,
html body.public-body #propertyContent .hope-duo > :first-child:nth-last-child(2):has(+ .hidden),
html body.public-body #propertyContent .hope-duo > .hidden + :last-child { grid-column: 1 / -1; }
html body.public-body #propertyContent .hope-duo:not(:has(> :not(.hidden))) { display: none; }

/* ---------------------------------------------------------------- the rail */
html body.public-body #propertyContent .pricing-sidebar-card {
  border-radius: 14px !important; box-shadow: 0 14px 38px -18px rgba(10, 20, 36, .35) !important;
  border: 1px solid var(--hope-border) !important; overflow: hidden !important; background: #fff !important;
}
html body.public-body #propertyContent .pricing-sidebar-card .pricing-price-header {
  background: var(--jhb-navy) var(--hope-band) center / cover no-repeat !important; padding: 22px 22px 20px !important;
  text-align: center !important;
}
/* The price block is CENTRED, and that means every line in it is centred against the SAME
   axis. The "?" used to ride inside the kicker as an extra inline glyph on one side only, so
   the label sat a few pixels left of the number under it - which is the kind of misalignment
   a reader feels without being able to name. The kicker is its own centred flex row now. */
html body.public-body #propertyContent .pricing-sidebar-card .pricing-price-header > * { margin-left: auto !important; margin-right: auto !important; }
html body.public-body #propertyContent .pricing-sidebar-card .pricing-kicker {
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 6px !important; text-align: center !important; width: 100% !important;
}
html body.public-body #propertyContent .pricing-sidebar-card .pricing-amount,
html body.public-body #propertyContent .pricing-sidebar-card .pricing-price-value {
  font-family: 'Inter', sans-serif !important; font-size: 2.5rem !important; font-weight: 800 !important;
  letter-spacing: -.03em !important; text-align: center !important; width: 100% !important; display: block !important;
}
html body.public-body #propertyContent .pricing-sidebar-card .pricing-spread-card {
  background: #fff !important; border-radius: 0 !important; box-shadow: none !important; border: 0 !important;
  border-bottom: 1px solid var(--hope-border) !important;
}
/* The three micro cards are one row of equal columns, each centred in its own cell. */
html body.public-body #propertyContent .pricing-sidebar-card .pricing-micro-card {
  background: var(--hope-ground) !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  text-align: center !important; padding: 10px 6px !important; min-width: 0 !important;
}
html body.public-body #propertyContent .pricing-sidebar-card .pricing-micro-label {
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 4px !important; width: 100% !important; text-align: center !important; white-space: nowrap;
}
html body.public-body #propertyContent .pricing-sidebar-card .pricing-micro-value { text-align: center !important; width: 100% !important; }
/* ---- the rail card may not be wider than the rail.
   .pricing-sidebar-card is a grid container, so every child carries `min-width: auto`, which
   resolves to its MIN-CONTENT width - and one nowrap row inside the spread card had a
   min-content of 367px against a 320px track. A grid item cannot shrink below min-content, so
   the card's own `overflow:hidden` simply sliced the last digit off every figure: "$105,00",
   "$180,00", "$75,00", and "Offer window has closed - call to ask" running off the edge.
   Nothing about the numbers was wrong; the card was 47px too wide to print them.

   `min-width: 0` is the remedy for exactly this, and it has to be on the ITEMS rather than on
   the card. Everything inside is then free to wrap, which is what the rules below arrange. */
html body.public-body #propertyContent .pricing-sidebar-card > * { min-width: 0 !important; }
html body.public-body #propertyContent .pricing-sidebar-card :is(.pricing-micro-grid, .pricing-micro-card, .pricing-spread-footer, .offer-countdown, .pricing-quick-actions) { min-width: 0 !important; }

/* ---- the three figures are a LIST, not a row of three tiles.
   This is the change that makes a 320px rail possible at all, and it is theirs:

     .priceBlock-costList      { display:grid; row-gap:12px }
     .priceBlock-costList > *  { display:flex; justify-content:space-between }
     .priceBlock-costList > * > :first-child { color:#4f5366; align-self:flex-end }
     .priceBlock-arv           { 18px / 600 / 24 }
     .priceBlock-gross         { border-top:1px solid #e5e5e5; padding-top:12px }

   Three equal columns inside a 288px card gives each figure ~93px, and "$180,000" does not
   fit in 93px - which is why the spread read "$75,00" with the last digit cut off and the
   rehab level was sliced in half. A label on the left and its figure on the right is the
   shape a narrow rail can actually hold, and it also reads in the order somebody says it
   out loud: starting offer, ARV, spread. */
html body.public-body #propertyContent .pricing-sidebar-card .pricing-micro-grid {
  display: grid !important; grid-template-columns: 100% !important; row-gap: 12px !important;
  text-align: left !important;
}
html body.public-body #propertyContent .pricing-sidebar-card .pricing-micro-card {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  display: flex !important; flex-direction: row !important; align-items: baseline !important;
  justify-content: space-between !important; gap: 12px !important;
  text-align: left !important; padding: 0 !important; min-width: 0 !important;
  /* it carried an 81.6px min-height from when it was a tall centred tile; as a row its
     natural height is the 24px line box, and the leftover floor was printing three figures
     115px apart down a card whose whole point is that they read together */
  min-height: 0 !important;
}
html body.public-body #propertyContent .pricing-sidebar-card .pricing-micro-label {
  display: inline-flex !important; align-items: center !important; justify-content: flex-start !important;
  gap: 4px !important; width: auto !important; text-align: left !important; white-space: nowrap;
  font-size: 14px !important; font-weight: 500 !important; line-height: 22px !important;
  letter-spacing: 0 !important; text-transform: none !important; color: var(--hope-muted) !important;
  /* A 21px padding-left survived from when this was a centred tile whose label sat under an
     icon. As a list row it indented the two labels that carry a tooltip and left the one that
     does not flush, so the three figures read as two columns that did not line up - and the
     label box itself was correctly at the left edge the whole time, which is why it looks like
     a text-alignment problem and is not one. */
  margin: 0 !important; padding: 0 !important;
}
html body.public-body #propertyContent .pricing-sidebar-card .pricing-micro-value {
  text-align: right !important; width: auto !important; white-space: nowrap;
  font-size: 18px !important; font-weight: 600 !important; line-height: 24px !important; margin: 0 !important;
}
/* The tooltip is absolutely positioned off its host, so the host must stay the row rather
   than become a positioning context that collapses. */
html body.public-body #propertyContent .pricing-sidebar-card .pricing-micro-card.deal-tip-host { position: relative !important; }

html body.public-body #propertyContent .pricing-sidebar-card .pricing-spread-card {
  background: #fff !important; background-image: none !important;
}

/* The footer under the list is their .priceBlock-gross: a hairline, then the qualifier at
   14px. It had been overflowing because the title and the rehab level were on one nowrap
   line inside 280px. */
html body.public-body #propertyContent .pricing-sidebar-card .pricing-spread-footer {
  border-top: 1px solid var(--il-line) !important; padding-top: 12px !important; margin-top: 0 !important;
  display: flex !important; flex-wrap: wrap !important; align-items: center !important;
  justify-content: space-between !important; gap: 6px 12px !important;
}
html body.public-body #propertyContent .pricing-sidebar-card .pricing-spread-footer > * { min-width: 0; }
html body.public-body #propertyContent .pricing-sidebar-card :is(.pricing-spread-title, .pricing-spread-rehab) {
  font-size: 14px !important; line-height: 20px !important; white-space: normal !important;
}
html body.public-body #propertyContent .pricing-sidebar-card .pricing-spread-title { font-weight: 500 !important; color: var(--hope-muted) !important; }
html body.public-body #propertyContent .pricing-sidebar-card .pricing-spread-rehab { font-weight: 600 !important; }

/* The quick actions were two columns of 136px holding 13px labels with 20px of left padding,
   which is where "Save PDF" and "Share" were losing their ends. One column, full width. */
html body.public-body #propertyContent .pricing-sidebar-card .pricing-quick-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important;
}
html body.public-body #propertyContent .pricing-sidebar-card .pricing-quick-btn {
  padding-left: 10px !important; padding-right: 10px !important; font-size: 12.5px !important;
  justify-content: center !important; min-width: 0 !important;
}
html body.public-body #propertyContent .pricing-sidebar-card .pricing-quick-btn .email-btn-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The two side-by-side links under the primary CTA were 125 + 146 inside 280 with a gap, so
   the flyer label clipped. They stack at this width. */
html body.public-body #propertyContent .pricing-sidebar-card :is(#viewFlyerBtn, #viewOnZillowBtn) { width: 100% !important; }
/* The countdown line wraps rather than running past the card edge. */
html body.public-body #propertyContent .pricing-sidebar-card #offerCountdown {
  flex-wrap: wrap !important; text-align: left !important; line-height: 1.35 !important;
}

html body.public-body #propertyContent .pricing-sidebar-card #offerCountdown {
  background: rgba(217, 50, 64, .07) !important; border: 0 !important; border-radius: 10px !important;
  color: var(--jhb-crimson) !important; font-weight: 600 !important;
}
html body.public-body #propertyContent .pricing-sidebar-card #offerCountdown svg { color: var(--jhb-bright) !important; }
html body.public-body #propertyContent .pricing-sidebar-card .pricing-primary-cta { min-height: 50px !important; font-size: 16px !important; }
html body.public-body #propertyContent .pricing-sidebar-card :is(#viewAllMediaBtn, #viewFlyerBtn, #viewOnZillowBtn) {
  background: #fff !important; color: var(--hope-ink) !important; border: 0 !important; min-height: 42px !important;
}
html body.public-body #propertyContent .pricing-sidebar-card :is(#viewAllMediaBtn, #viewFlyerBtn, #viewOnZillowBtn):hover { color: var(--jhb-crimson) !important; }

/* ---------------------------------------------------------------- FAQ + related */
html body.public-body #propertyContent :is(#dealFaqSection, #relatedDealsSection) {
  border-radius: 12px !important; border: 1px solid var(--hope-border) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important; padding: 28px !important; margin-top: 24px !important;
}
html body.public-body #propertyContent #dealFaqSection details { border-radius: 10px !important; border-color: var(--hope-border) !important; background: #fff !important; }
html body.public-body #propertyContent #dealFaqSection details[open] { background: var(--hope-ground) !important; }
html body.public-body #propertyContent #relatedDealsGrid > a {
  background: #fff !important; border: 1px solid var(--hope-border) !important; border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
  transition: transform 300ms var(--hope-ease), box-shadow 300ms var(--hope-ease) !important;
}
html body.public-body #propertyContent #relatedDealsGrid > a:hover { transform: translateY(-3px); box-shadow: var(--hope-shadow-lift) !important; }

/* ---------------------------------------------------------------- 14. the help pair
   Contact, and whatever else the rail handed back, as a pair of ordinary cards. */
html body.public-body #propertyContent .hope-help { align-items: stretch; }
html body.public-body #propertyContent .hope-help > * {
  background: #fff !important; background-image: none !important; border: 1px solid var(--hope-border) !important;
  border-radius: 12px !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important; padding: 24px !important; color: var(--hope-ink) !important;
}
html body.public-body #propertyContent .hope-help > .bg-primary :is(h2, h3, p, span, a:not(.email-btn), div) { color: var(--hope-ink) !important; }
html body.public-body #propertyContent .hope-help > .bg-primary :is(p.text-sm, .text-blue-200, .text-blue-100) { color: var(--hope-muted) !important; }
html body.public-body #propertyContent .hope-help > .bg-primary svg { color: var(--jhb-navy) !important; }
html body.public-body #propertyContent .hope-help > .bg-primary [class*="bg-white/"] { background: var(--hope-ground) !important; }

/* ---------------------------------------------------------------- phone */
@media (max-width: 1023px) {
  /* align-items STRETCH is what makes this a column rather than a left-hand strip. The markup
     carries `items-start`, and a flex column whose items do not stretch sizes every child to
     its own content - measured at 900px, the price card came out 520 CSS px inside a 928 one,
     so a third of every tablet screen was empty ground beside the deal. */
  html body.public-body #propertyContent .deal-showcase { display: flex !important; flex-direction: column !important; gap: 18px !important; align-items: stretch !important; }
  html body.public-body #propertyContent .deal-showcase > *,
  html body.public-body #propertyContent .deal-showcase-media > * { width: 100% !important; max-width: 100% !important; }
  html body.public-body #propertyContent .deal-showcase-media { display: contents !important; }
  html body.public-body #propertyContent .deal-showcase-media > * { order: 4; }
  html body.public-body #propertyContent .deal-showcase-media > .deal-top-bar { order: 1; }
  html body.public-body #propertyContent .deal-showcase-media > #valueBandSection { order: 1; }
  html body.public-body #propertyContent .deal-showcase-rail { order: 2; position: static !important; margin: 0 !important; padding: 0 !important; transform: none !important; }
  /* the page's own script moves the price card out of the rail on narrow screens */
  html body.public-body #propertyContent .deal-showcase-media > .pricing-sidebar-card { order: 2 !important; }
  html body.public-body #propertyContent .deal-showcase-rail:empty { display: none !important; }
  html body.public-body #propertyContent .deal-showcase-media > .hope-tabs {
    order: 3; top: 78px; margin: 0 -16px !important; border-radius: 0 !important; width: auto !important; align-self: stretch; border-left: 0 !important; border-right: 0 !important;
  }
  html body.public-body #propertyContent .hope-duo { grid-template-columns: 1fr; }
  html body.public-body #propertyContent #valueBandSection .deal-value-band-grid { grid-template-columns: 1fr 1fr !important; }
  html body.public-body #propertyContent #valueBandSection .deal-value-tile-accent { grid-column: 1 / -1; }
  html body.public-body #propertyContent .hope-gallery { margin-left: -16px; margin-right: -16px; }
  html body.public-body #propertyContent .hope-gallery .deal-image-frame { border-radius: 0 !important; }
  html body.public-body #propertyContent .deal-showcase-media :is(.bg-white.rounded-2xl, .hope-duo > div) { padding: 18px !important; }
}

/* ---------------------------------------------------------------- the pinned card must fit
   Every action stays; the secondary ones pair up so the whole card is visible on a laptop. */
@media (min-width: 1024px) {
  html body.public-body #propertyContent .deal-showcase-rail > .pricing-sidebar-card {
    display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: 10px; align-content: start;
  }
  html body.public-body #propertyContent .deal-showcase-rail > .pricing-sidebar-card > * { grid-column: 1 / -1; margin-bottom: 0 !important; margin-top: 0 !important; }
  html body.public-body #propertyContent .deal-showcase-rail > .pricing-sidebar-card > :is(#viewFlyerBtn, #viewOnZillowBtn) { grid-column: auto; }
  html body.public-body #propertyContent .deal-showcase-rail > .pricing-sidebar-card > :is(#viewAllMediaBtn, #viewFlyerBtn, #viewOnZillowBtn, .pricing-secondary-cta) {
    min-height: 42px !important; padding-top: 9px !important; padding-bottom: 9px !important; font-size: 14px !important;
  }
  /* 2x2, not 4-across: at a quarter of a 372px rail the labels truncate to "Sh…" and "Vie…" */
  html body.public-body #propertyContent .deal-showcase-rail > .pricing-sidebar-card > .pricing-quick-actions {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important;
  }
  html body.public-body #propertyContent .deal-showcase-rail > .pricing-sidebar-card > .pricing-quick-actions > * {
    min-height: 40px !important; padding: 6px 10px !important; font-size: 13px !important; gap: 6px !important;
  }
  html body.public-body #propertyContent .deal-showcase-rail > .pricing-sidebar-card > .pricing-quick-actions .email-btn-label { overflow: hidden; text-overflow: ellipsis; }
  html body.public-body #propertyContent .deal-showcase-rail > .pricing-sidebar-card > .pricing-price-header { padding: 20px 22px 18px !important; }
  html body.public-body #propertyContent .deal-showcase-rail > .pricing-sidebar-card > .pricing-spread-card { padding-top: 14px !important; padding-bottom: 14px !important; }
}

/* =============================================================== HOME PAGE */
/* Section order: live deals straight under the hero, then the story. CSS order, so the
   Genius home builder may keep re-ordering the DOM without fighting this. */
html body.public-body #homeSectionsHost { display: flex !important; flex-direction: column !important; }
html body.public-body #homeSectionsHost > [data-home-section="recently-sold"] { order: 1; }
html body.public-body #homeSectionsHost > [data-home-section="how-it-works"] { order: 2; }
html body.public-body #homeSectionsHost > [data-home-section="why-us"] { order: 3; }
html body.public-body #homeSectionsHost > .site-cta-band { order: 4; }
html body.public-body #homeSectionsHost > [data-home-section="faq"] { order: 5; }

/* hero: a touch shorter, so the first deals show above the fold on a laptop */
html body.public-body section.site-hero:not([data-home-section]) { padding-top: 7.5rem !important; padding-bottom: 7rem !important; }
html body.public-body section.site-hero:not([data-home-section]) h1 { font-size: clamp(2.4rem, 1.4rem + 3vw, 3.9rem) !important; letter-spacing: -.035em !important; line-height: 1.04 !important; }
html body.public-body section.site-hero:not([data-home-section]) .site-hero-card { height: 440px !important; }

/* stats strip, lifted out of "How it works": overlaps the bottom of the hero banner */
html body.public-body .hope-stats { position: relative !important; top: auto !important; left: auto !important; transform: none !important; margin-top: -58px !important; margin-bottom: 0 !important; z-index: 5 !important; width: 100% !important; }
html body.public-body .hope-stats .stats-rail-wrap { transform: none !important; }
html body.public-body .how-buying-section { padding-top: 5rem !important; }

/* live deals on the ground, white cards */
html body.public-body .recently-sold-section { background: var(--hope-ground) !important; padding-top: 4.5rem !important; }
html body.public-body .recently-sold-section :is(h2, .section-underline) { color: var(--hope-ink) !important; }
html body.public-body .recently-sold-section :is(.section-copy-tight, .section-stack > p) { color: var(--hope-muted) !important; }
html body.public-body .recently-sold-section .section-eyebrow { background: var(--jhb-crimson-soft) !important; color: var(--jhb-crimson) !important; }
html body.public-body .recently-sold-section .section-eyebrow i { color: var(--jhb-crimson) !important; }
html body.public-body .recently-sold-section .email-btn--outline { background: #fff !important; color: var(--hope-ink) !important; border-color: var(--hope-border) !important; }
html body.public-body .recently-sold-section .deal-rail .deal-rail-card,
html body.public-body .recently-sold-section .deal-rail-slide { box-shadow: var(--hope-shadow) !important; }
html body.public-body .recently-sold-section .deal-rail .deal-rail-card:hover { box-shadow: var(--hope-shadow-lift) !important; }
html body.public-body .recently-sold-section .deal-rail-nav { box-shadow: var(--hope-shadow-lift) !important; }
html body.public-body .recently-sold-section .deal-rail-viewport::before,
html body.public-body .recently-sold-section .deal-rail-viewport::after { background: linear-gradient(90deg, var(--hope-ground), transparent) !important; }
html body.public-body .recently-sold-section .deal-rail-viewport::after { background: linear-gradient(270deg, var(--hope-ground), transparent) !important; }

/* how it works: white surface band */
html body.public-body .how-buying-section { background: #fff !important; }
html body.public-body .how-buying-section .step-node { background: var(--hope-ground) !important; box-shadow: none !important; }
html body.public-body .how-buying-section .step-node:hover { background: #fff !important; box-shadow: var(--hope-shadow-lift) !important; }

/* why us: icon beside the words, left-aligned */
html body.public-body section.site-hero[data-home-section="why-us"] .feature-card {
  display: grid !important; grid-template-columns: 48px 1fr; column-gap: 16px; text-align: left !important; padding: 24px !important; align-items: start;
}
html body.public-body section.site-hero[data-home-section="why-us"] .feature-card > .feature-icon-wrap { grid-row: 1 / 3; margin: 0 !important; width: 48px !important; height: 48px !important; }
html body.public-body section.site-hero[data-home-section="why-us"] .feature-card > h3 { margin: 2px 0 6px !important; font-size: 1.05rem !important; }
html body.public-body section.site-hero[data-home-section="why-us"] .feature-card > p { font-size: .94rem !important; }

/* FAQ: heading beside the questions */
html body.public-body #faq { background: #fff !important; }
@media (min-width: 1024px) {
  html body.public-body #faq > .hope-faq {
    max-width: 80rem !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 56px; align-items: start;
  }
  html body.public-body #faq > .hope-faq > .section-stack { text-align: left !important; position: sticky; top: 110px; margin: 0 !important; }
  html body.public-body #faq > .hope-faq > .section-stack .section-underline::after { left: 0 !important; transform: none !important; margin-left: 0 !important; }
  html body.public-body #faq > .hope-faq > :not(.section-stack) { grid-column: 2; }
}
html body.public-body #faq .faq-item { background: var(--hope-ground) !important; box-shadow: none !important; }
html body.public-body #faq .faq-item:hover { background: #fff !important; box-shadow: var(--hope-shadow-lift) !important; transform: none; }

/* buyers-list band: its copy was written for a dark navy - on HOPE blue it goes white */
html body.public-body .site-cta-band :is(.section-copy-tight, .section-stack > p, p.text-xl, p.text-lg) { color: rgba(255, 255, 255, .9) !important; }
html body.public-body .site-cta-band .buyer-network-home-benefit {
  background: rgba(255, 255, 255, .14) !important; border: 1px solid rgba(255, 255, 255, .24) !important; box-shadow: none !important; border-radius: 12px !important;
}
html body.public-body .site-cta-band .buyer-network-home-benefit :is(p, span, strong, div) { color: #fff !important; }
html body.public-body .site-cta-band .buyer-network-home-benefit-icon { background: rgba(255, 255, 255, .2) !important; color: #fff !important; border-radius: 8px !important; }
html body.public-body .site-cta-band .buyer-network-home-benefit-icon svg { color: #fff !important; }

@media (max-width: 767px) {
  html body.public-body section.site-hero:not([data-home-section]) { padding-top: 6.5rem !important; padding-bottom: 6rem !important; }
  html body.public-body section.site-hero:not([data-home-section]) .site-hero-card { height: 300px !important; }
  html body.public-body .hope-stats { margin-top: -44px !important; }
}

/* ---------------------------------------------------------------- one offer affordance at a time
   The sticky pill exists because on a phone the price card scrolls away and the offer has to
   stay reachable. On a desktop the RAIL does that job - it is pinned, it carries the price, the
   clock and Submit an Offer, and it never leaves the screen - so the pill was a second copy of
   the same two buttons floating over the reading column. It stays on every width where the rail
   is not pinned; the body padding it reserves goes with it, or the page keeps 84px of dead space
   at the foot for a bar that is not there. */
@media (min-width: 1024px) {
  html body.public-body:has(#propertyContent) #mobileOfferBar { display: none !important; }
  html body.public-body.has-mobile-offer-bar:has(#propertyContent) { padding-bottom: 0 !important; }
}

/* =====================================================================================
   INVESTORLIFT GEOMETRY - measured off their own deal-detail stylesheet, not inferred

   The earlier pass read their MARKETPLACE page (.dealRow / .dealGallery) and concluded the
   write-up ran down one ruled sheet. The saved bundle also carries the DEAL DETAIL rules, and
   they say something different, so this block is the corrected reading:

     .dealContent            max-width:1360px; padding:0 24px 24px  (content-box)
     .dealContent-body       grid-template-columns: 1fr 320px; gap:24px; align-items:start
     .dealContent-right      position:sticky; top:24px
     .dealContent-left/right display:grid; grid-template-columns:100%; row-gap:24px

     .overview-wrapper       #fff; 1px #e5e5e5; radius 12px            <- every section is a CARD
     .additionalDetails-wrapper / .propertyCondition-wrapper /
     .financingInfo-wrapper / .contactCard-wrapper
                             #fff; 1px #e5e5e5; radius 12px; padding:24px

     .priceBlock-wrapper     #fff; 1px #bfcdff; radius 12px; padding:24px; row-gap:24px
                             ^ the ONE card called out, and it is called out with a TINTED
                               BORDER rather than a shadow or a fill.

   So the page is a STACK OF DISCRETE CARDS on a light ground, 24px apart, every one carrying
   the same 1px border and 12px radius, and not one of them casting a shadow. What makes it
   calm is not that the sections are welded together - it is that every card is identical and
   nothing is competing to look important except the price.

   Their type, exactly:
     section title      20px / 600 / 28px, margin-bottom 16px
     a stat's label     14px / 400 / 20px  #4f5366
     a stat's value     18px / 600 / 24px  #1a1b22
     a detail row       15px / 500 / 20px label + 15px / 400 / 20px value, 18px icon
     body copy          16px / 400 / 26px
     the price          24px / 700 / 32px

   The PALETTE stays ours: JHB navy, crimson, the one yellow, mint. Their #2958ff accent maps
   onto our crimson (the single action colour), and their #bfcdff price-card border onto a
   pale crimson. Only the geometry and the restraint are theirs.
   ===================================================================================== */
html body.public-body:has(#propertyContent) {
  /* Their Gray-10 (#e5e5e5) is NOT imported. The official JHBTG palette already carries a
     neutral - light gray #EBEBEB - and this is that colour at two strengths: solid for a
     card's border, 55% over white for a filled cell. What was worth taking from them is that
     the neutral is NEUTRAL: the old fills were #eef3f9, a blue wash, and that blue was most
     of why the two pages did not look alike. */
  --il-line: #ebebeb;                       /* the border every card carries */
  --il-line-soft: rgba(235, 235, 235, .55); /* the same grey, as a filled cell */
  --il-pad: 24px;                           /* .additionalDetails-wrapper padding */
  --il-gap: 24px;                           /* .dealContent-left row-gap */
  --il-radius: 12px;                        /* every card */
}

/* ---- 1. the stack.
   .hope-sheet is no longer a panel - it is the COLUMN, and its children are the cards. It
   keeps its name because layout.js and four other blocks address it, and what it means has
   not changed: this is the reading order. */
html body.public-body #propertyContent .hope-sheet {
  display: grid; grid-template-columns: 100%; row-gap: var(--il-gap);
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
}
html body.public-body #propertyContent .hope-sheet > * {
  background: #fff !important; background-image: none !important;
  border: 1px solid var(--il-line) !important; border-radius: var(--il-radius) !important;
  box-shadow: none !important; margin: 0 !important; padding: var(--il-pad) !important;
  min-width: 0;
}
html body.public-body #propertyContent .hope-sheet > .hidden { display: none !important; }
/* A pair is two CARDS side by side with the column's own gap between them - never one card
   split by a divider, which is what the sheet did and what made a two-column row read as a
   table rather than as two things. */
html body.public-body #propertyContent .hope-sheet > .hope-duo {
  padding: 0 !important; background: transparent !important; border: 0 !important;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--il-gap);
  align-items: start;
}
html body.public-body #propertyContent .hope-sheet > .hope-duo > * {
  background: #fff !important; background-image: none !important;
  border: 1px solid var(--il-line) !important; border-radius: var(--il-radius) !important;
  box-shadow: none !important; margin: 0 !important; padding: var(--il-pad) !important;
  min-width: 0; height: 100%;
}
html body.public-body #propertyContent .hope-sheet > .hope-duo > :only-child { grid-column: 1 / -1; }
@media (max-width: 767px) {
  html body.public-body #propertyContent .hope-sheet > .hope-duo { grid-template-columns: 1fr; }
  html body.public-body #propertyContent .hope-sheet > *,
  html body.public-body #propertyContent .hope-sheet > .hope-duo > * { padding: 18px !important; }
}
/* ---- 2. no drop shadows anywhere on this page */
html body.public-body #propertyContent :is(.bg-white.rounded-2xl, .rounded-2xl.bg-white, #dealFaqSection, #relatedDealsSection, #dealCashBuyersCard, .hope-feedback, .hope-tabs, #dealHeroStats) {
  box-shadow: none !important; border: 1px solid var(--il-line) !important; border-radius: var(--il-radius) !important;
}
html body.public-body #propertyContent .hope-help > * { box-shadow: none !important; border: 1px solid var(--il-line) !important; border-radius: var(--il-radius) !important; }
html body.public-body #propertyContent #valueBandSection .deal-value-tile { box-shadow: none !important; border: 1px solid var(--il-line) !important; border-radius: var(--il-radius) !important; }
html body.public-body #propertyContent #relatedDealsGrid > a { box-shadow: none !important; border: 1px solid var(--il-line) !important; border-radius: var(--il-radius) !important; }
html body.public-body #propertyContent #relatedDealsGrid > a:hover { transform: none !important; border-color: var(--jhb-navy) !important; box-shadow: none !important; }
html body.public-body #propertyContent .hope-gallery .deal-image-frame {
  box-shadow: none !important; border: 1px solid var(--il-line) !important; border-radius: var(--il-radius) !important;
}
/* The price card is the ONE surface that is allowed to look different, and the way it does it
   is theirs: a tinted border (#bfcdff against their #e5e5e5), which is a pale version of the
   action colour. Ours is a pale crimson. No fill, no shadow - the card beside it is identical
   in every other respect, so the tint is the whole signal. */
html body.public-body #propertyContent .pricing-sidebar-card {
  box-shadow: none !important; border: 1px solid rgba(177, 29, 41, .34) !important; border-radius: var(--il-radius) !important;
}
/* the tile's left accent stays: it is what keeps the three numbers apart at a glance */
html body.public-body #propertyContent #valueBandSection .deal-value-tile::before { width: 3px; }

/* ---- 3. the gallery, at their proportions
   2.75fr for the hero against 1.36fr each for the pair, two 208px rows, 4px gaps. */
html body.public-body #propertyContent .hope-gallery .deal-collage { gap: 4px !important; }
@media (min-width: 768px) {
  html body.public-body #propertyContent .hope-gallery .deal-collage[data-cells="4"] {
    grid-template-columns: 2.75fr 1.36fr 1.36fr !important; grid-template-rows: 208px 208px !important;
  }
  html body.public-body #propertyContent .hope-gallery .deal-collage[data-cells="3"] { grid-template-columns: 2.75fr 1.36fr !important; grid-template-rows: 208px 208px !important; }
  html body.public-body #propertyContent .hope-gallery .deal-collage[data-cells="2"] { grid-template-columns: 2.75fr 1.36fr !important; grid-template-rows: 420px !important; }
  html body.public-body #propertyContent .hope-gallery .deal-collage[data-cells="1"] { grid-template-rows: 420px !important; }
}

/* ---- 4. the type comes down
   Their address line is 20px/28px. Ours is a marketing site as well as a listing, so it lands
   between the two rather than all the way down, but it stops being a poster headline. */
html body.public-body #propertyContent .deal-top-bar .deal-hero-headline h1 {
  font-size: clamp(1.35rem, 1.05rem + .85vw, 1.75rem) !important; line-height: 1.28 !important; letter-spacing: -.02em !important;
}
html body.public-body #propertyContent .deal-top-bar #propertyAddress { font-size: .9375rem !important; color: var(--hope-muted) !important; }
html body.public-body #propertyContent .deal-top-bar .deal-header-map-icon { width: 34px !important; height: 34px !important; }
html body.public-body #propertyContent .deal-top-bar .deal-header-map-icon svg { width: 17px !important; height: 17px !important; }

/* the meta line beside the address: 14px, medium ink, the way .dealRow-rowRight reads */
html body.public-body #propertyContent .hope-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
html body.public-body #propertyContent .hope-meta > * {
  position: static !important; inset: auto !important; display: inline-flex !important; align-items: center; gap: 6px;
  background: transparent !important; backdrop-filter: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; border-radius: 0 !important;
  font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--hope-muted) !important;
}
html body.public-body #propertyContent .hope-meta > .hidden { display: none !important; }
html body.public-body #propertyContent .hope-meta svg { color: var(--jhb-gold) !important; width: 15px; height: 15px; }

/* ---- the fact strip and the tabs, flattened to match */
html body.public-body #propertyContent #dealHeroStats .deal-stat-chip { font-size: 14px !important; font-weight: 400 !important; padding: 9px 16px !important; }
html body.public-body #propertyContent #dealHeroStats .deal-stat-chip b { font-weight: 600 !important; }
html body.public-body #propertyContent .hope-tabs { border-radius: 10px; padding: 3px; gap: 0; }
html body.public-body #propertyContent .hope-tab { font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 7px; }
html body.public-body #propertyContent .hope-tab.is-on { font-weight: 600; }

/* ---- the numbers: hairline cells, not shadowed tiles */
html body.public-body #propertyContent #valueBandSection .deal-value-band-grid { gap: 10px !important; }
html body.public-body #propertyContent #valueBandSection .deal-value-figure { font-size: 1.6rem !important; }
html body.public-body #propertyContent #valueBandSection .deal-value-tile { padding: 16px 16px 14px !important; }

/* ---- the meter reads as a row of the document, not a card of its own */
html body.public-body #propertyContent .hope-meter {
  box-shadow: none !important; border: 1px solid var(--il-line) !important; border-radius: 12px !important; padding: 14px 16px 12px !important;
}
html body.public-body #propertyContent .hope-meter-bar { height: 30px; border-radius: 6px; }
html body.public-body #propertyContent .hope-meter-bar > i { border-radius: 6px 0 0 6px; }

/* ---- the filled cells inside a section take their Gray-5, not a blue wash */
/* (retired - see '--il-line-soft IS RETIRED AS A FILL' at the foot of this file) */

/* ---- the sheet's own typography and fills, measured rather than guessed
   Three things were still speaking the old language inside the document:
     - every heading carried its 3px brand underline, which in a sheet already ruled by
       hairlines is a second rule under every title, so the page reads as striped;
     - .cond-tile and the record accordions were on the blue wash (#eef3f9) while the
       detail rows beside them had already moved to Gray-5, so one section looked tinted
       and the next did not;
     - the headings were text-2xl/bold (24px), which is a card title with nothing holding it. */
/* Their .additionalDetails-title / .propertyCondition-title / .financingInfo-title are all the
   same value: 20px / 600 / 28px with 16px under it. An earlier pass set 17px here on the
   theory that a section inside a document wants a label rather than a title - but the page is
   a stack of cards, and on a card it wants a title. */
html body.public-body #propertyContent .hope-sheet :is(h2, h3) {
  font-size: 20px !important; font-weight: 600 !important; line-height: 28px !important;
  letter-spacing: -.01em !important; color: var(--hope-ink) !important; margin: 0 0 16px !important;
}
html body.public-body #propertyContent .hope-sheet :is(h2, h3)::after,
html body.public-body #propertyContent .hope-sheet :is(h2, h3)::before { content: none !important; display: none !important; }
/* and the real underline, which is a 2px border-bottom rather than the pseudo-element. In a
   document already ruled between every section, a second rule under every title is a grid. */
html body.public-body #propertyContent .hope-sheet :is(h2, h3):not(#_h1):not(#_h2) {
  border-bottom: 0 !important; padding-bottom: 0 !important;
}

/* (the cell washes are retired - see the block at the foot of this file) */

/* ---- flat fills only, which is the last thing separating the two pages
   Measured inside the sheet: SIXTEEN distinct gradients - a radial "circle at 100% 0%" wash on
   every card surface, a three-stop face on every button, a 140deg navy on every icon chip. That
   soft-depth language is the opposite of the reference, where a surface is one colour and a 1px
   border and nothing else. The gradients go; the COLOURS they resolved to stay.

   Deliberately NOT swept: anything holding a photograph or a map (the collage cells, the map
   frame, the location lock's own imagery), and the price header's navy, which is the one
   surface on the page that is meant to read as a solid brand panel. */
html body.public-body #propertyContent .hope-sheet :is(
  .rounded-2xl, .rounded-xl, .transaction-mini-stat, .rent-estimate-shell, .rent-estimate-card,
  .deal-detail-row, .cond-tile, .cond-tile-ic, .deal-location-lock-card, .deal-location-lock-overlay,
  .deal-location-lock-shell, .deal-address-chip, .text-center.p-3
) { background-image: none !important; }

/* Every button face on this page is one colour. base.css already did this for a few variants;
   the timeline rows, the investor-summary pair and the quick actions were still on the old
   three-stop face, which is why they read softer than the rail's buttons beside them. */
html body.public-body #propertyContent :is(.email-btn, .btn-primary, .btn-secondary, .deal-timeline-row) {
  background-image: none !important;
}
html body.public-body #propertyContent .email-btn--red { background-color: var(--jhb-crimson) !important; }
html body.public-body #propertyContent .email-btn--navy { background-color: var(--jhb-navy) !important; }
html body.public-body #propertyContent .email-btn--gold { background-color: var(--jhb-gold) !important; }
html body.public-body #propertyContent .email-btn--green { background-color: var(--jhb-green) !important; }
/* .pricing-quick-btn is the GRID CELL, not a colour - one of the four tiles carries the navy
   variant on purpose. Painting the class white swallowed it: white fill under white text,
   an empty-looking tile where 'View Full Address' should be. The variants keep their fills. */
html body.public-body #propertyContent :is(.email-btn--outline, .pricing-quick-btn):not(.email-btn--navy):not(.email-btn--red):not(.email-btn--gold):not(.email-btn--green) { background-color: #fff !important; }
html body.public-body #propertyContent #listedRow { background-color: #fff !important; }

/* The small navy icon chips were 140deg gradients; solid navy at 10% is the sheet's own idiom. */
html body.public-body #propertyContent .hope-sheet :is(.investor-summary-urgency-icon, .w-10.h-10.rounded-xl) {
  background-image: none !important; background-color: var(--jhb-navy) !important;
}

/* (the rent shell and the list rows are flat - see the block at the foot of this file) */

/* ---- and the eight that out-ranked the list above
   Naming the offenders one class at a time was always going to leave a tail: the washes are
   written at three and four classes deep across two stylesheets, and the ninth one ships the
   day somebody adds a section. So the rule is inverted - inside the sheet NOTHING carries a
   background image - and the exceptions are the things that legitimately do:

     [style*="url("]  a deal photo, which this page sets inline;
     collage/map/photo/image/lazy  the media wrappers, by name;
     svg               an icon painting itself.

   :not(#_hN) buys the id weight to out-rank the four-class rules without narrowing the match.
   The COLOURS are re-stated underneath, because removing a gradient removes the fill with it. */
html body.public-body #propertyContent .hope-sheet *:not(#_h1):not(#_h2):not(#_h3):not(svg):not(img):not([style*="url("]):not([class*="collage"]):not([class*="map"]):not([class*="photo"]):not([class*="image"]):not([class*="lazy"]) {
  background-image: none !important;
}
html body.public-body #propertyContent .hope-sheet .investor-summary-urgency:not(#_h1):not(#_h2) {
  background-color: var(--jhb-gold-wash, #fff5e0) !important; border: 1px solid rgba(245, 179, 1, .45) !important; border-radius: 10px !important;
}
html body.public-body #propertyContent .hope-sheet .deal-address-inline-badge:not(#_h1):not(#_h2) {
  background-color: var(--jhb-crimson-soft) !important; color: var(--jhb-crimson) !important;
}
html body.public-body #propertyContent .hope-sheet :is(.w-10.h-10.rounded-xl, .investor-summary-urgency-icon):not(#_h1):not(#_h2) {
  background-color: var(--jhb-navy) !important;
}
/* The four .text-center.p-3.bg-gray-50 boxes are the Property Details stat tiles and nothing
   else on this page, and they are flat cells now - see the stat-tile block at the foot of this
   file. The rule that used to correct their gradient to the soft tint was the one thing still
   painting them, and it outranked that block (3 ids to 2), so it had to go rather than be
   fought: two rules arguing about one surface is how a fill comes back. */
html body.public-body #propertyContent .hope-sheet .investor-summary-primary:not(#_h1):not(#_h2) { background-color: var(--jhb-crimson) !important; }
html body.public-body #propertyContent .hope-sheet .investor-summary-secondary:not(#_h1):not(#_h2) { background-color: var(--jhb-gold) !important; }

/* ---- and the borders, for the same reason
   Thirteen distinct border colours were left inside the sheet, most of them the navy tint
   (#dfe8f3 at four different alphas) that the old soft-depth language used to separate one
   pale surface from another. Against a document ruled in Gray-10 they read as a second, bluer
   grid. Inverted like the fills: everything takes the rule colour except the borders that are
   deliberately BRAND - the deadline callout, a tooltip, the address badge - and the buttons,
   whose rim is the fill itself. */
html body.public-body #propertyContent .hope-sheet *:not(#_h1):not(#_h2):not(#_h3):not(svg):not(img):not(.investor-summary-urgency):not(.deal-tip):not(.deal-address-inline-badge):not(.email-btn):not(.deal-timeline-row):not(.hope-duo) {
  border-color: var(--il-line) !important;
}

/* =====================================================================================
   THE DETAIL GRIDS - measured off their own stylesheet, where three sections are identical

     .propertyCondition-grid / .additionalDetails-grid / .financingInfo-grid
                              { display:grid; grid-template-columns:repeat(4,1fr);
                                column-gap:16px; row-gap:20px }
     .X-gridItem              { display:grid; grid-template-columns:max-content 1fr; column-gap:8px }
     .X-gridItem svg          { width:18px; height:18px; color:#4f5366 }
     .X-gridItemTitle         { 15px / 500 / 20px  #4f5366 }
     .X-gridItemDescription   { 15px / 400 / 20px  gray }

   There is no fill, no radius and no border on a detail cell anywhere on their page. Ours had
   all three on every one: Property Condition was eight light-grey slabs two across at 56px
   tall, Transaction Details eight full-width grey bars, Closing Details three more. So a page
   that is mostly facts read as a form to be filled in rather than a sheet to be read - and the
   fills were carrying no information at all, because every cell had one, so none of them meant
   anything. Four flat columns is the single biggest change left between the two pages.

   ONE DELIBERATE DEVIATION, and it is about what the column is for. Their Description is grey
   and ours is ink. Their grid answers "what kind of thing is this", where every value is a
   category from a fixed list; ours answers "what will I find when I get there" - Shingle,
   Forced Air, Vacant, Thu Oct 1 - and that is the half a buyer came to read. So the LABEL
   recedes to their muted instead, and the value carries the weight.
   ===================================================================================== */
html body.public-body:has(#propertyContent) {
  /* their #4f5366. NOT a new grey: #5b6b82 is the muted ink this skin already carries, and
     a 35th colour introduced to fix a two-colour drift is the drift. */
  --il-cell-label: #5b6b82;
  --il-cell-gap-x: 16px;
  --il-cell-gap-y: 20px;
}

/* ---- Property Condition: their grid exactly. The markup already has the shape - an icon span,
   then a div holding a name and a value - so this is entirely a matter of taking the pill off. */
html body.public-body #propertyContent .hope-sheet .cond-grid {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: var(--il-cell-gap-x) !important; row-gap: var(--il-cell-gap-y) !important;
}
html body.public-body #propertyContent .hope-sheet .cond-tile {
  display: grid !important; grid-template-columns: max-content minmax(0, 1fr) !important;
  column-gap: 8px !important; align-items: start !important;
  background: transparent !important; background-image: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 0 !important; min-width: 0 !important; min-height: 0 !important;
}
/* The icon chip was a filled 32px square. Theirs is an 18px glyph on nothing, and that chip was
   the only reason a one-line fact needed 56px of height. */
html body.public-body #propertyContent .hope-sheet .cond-tile-ic {
  background: transparent !important; background-image: none !important;
  width: 18px !important; height: 18px !important; min-width: 18px !important;
  padding: 0 !important; border-radius: 0 !important; margin: 1px 0 0 !important;
  color: var(--il-cell-label) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
html body.public-body #propertyContent .hope-sheet .cond-tile-ic svg {
  width: 18px !important; height: 18px !important; stroke-width: 1.75 !important;
}
html body.public-body #propertyContent .hope-sheet .cond-tile-name {
  font-size: 15px !important; font-weight: 500 !important; line-height: 20px !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: var(--il-cell-label) !important; margin: 0 !important;
}
html body.public-body #propertyContent .hope-sheet .cond-tile-val {
  font-size: 15px !important; font-weight: 500 !important; line-height: 20px !important;
  color: var(--hope-ink) !important; margin: 2px 0 0 !important;
}

/* ---- Transaction Details: the same cell, two across rather than four.
   Its values are dated - "Wed, Sep 16, 2026, 12:00 PM" - and a date does not fit in a quarter
   of 1360px beside its own label, so the grid is two columns and the cell STACKS. That is still
   their .X-gridItem; the icon column is carried by the key's own inline glyph. */
html body.public-body #propertyContent .hope-sheet .deal-detail-list {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 32px !important; row-gap: var(--il-cell-gap-y) !important;
}
html body.public-body #propertyContent .hope-sheet .deal-detail-row {
  display: grid !important; grid-template-columns: 100% !important; align-items: start !important;
  background: transparent !important; background-image: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 0 !important; min-height: 0 !important; gap: 2px !important;
}
html body.public-body #propertyContent .hope-sheet .deal-detail-row-key {
  font-size: 15px !important; font-weight: 500 !important; line-height: 20px !important;
  color: var(--il-cell-label) !important; text-align: left !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  flex: none !important; margin: 0 !important;
}
html body.public-body #propertyContent .hope-sheet .deal-detail-row-key svg {
  width: 18px !important; height: 18px !important; stroke-width: 1.75 !important;
  color: var(--il-cell-label) !important;
}
html body.public-body #propertyContent .hope-sheet .deal-detail-row-val {
  font-size: 15px !important; font-weight: 500 !important; line-height: 20px !important;
  color: var(--hope-ink) !important; text-align: left !important; margin: 0 !important;
}

/* ---- Closing Details and the Property Details stat tiles: the same cell again. These are
   Tailwind-classed rather than named, so they are addressed by the shape they were given - a
   slate pill carrying its own padding - rather than by a class of their own. */
html body.public-body #propertyContent .hope-sheet :is(.transaction-mini-stat, .rent-estimate-card, .rent-estimate-range > *, .grid > .text-center.p-3),
html body.public-body #propertyContent .hope-sheet .space-y-4 > .flex.justify-between.rounded-xl {
  background: transparent !important; background-image: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
html body.public-body #propertyContent .hope-sheet .space-y-4 > .flex.justify-between.rounded-xl {
  padding: 0 0 12px !important; border-bottom: 1px solid var(--il-line) !important;
}
html body.public-body #propertyContent .hope-sheet .space-y-4 > .flex.justify-between.rounded-xl:last-child {
  border-bottom: 0 !important; padding-bottom: 0 !important;
}
html body.public-body #propertyContent .hope-sheet .space-y-4 > .flex.justify-between.rounded-xl > :first-child {
  font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--il-cell-label) !important;
}
html body.public-body #propertyContent .hope-sheet .space-y-4 > .flex.justify-between.rounded-xl > :last-child {
  font-size: 15px !important; font-weight: 600 !important; color: var(--hope-ink) !important;
}

@media (max-width: 1023px) {
  html body.public-body #propertyContent .hope-sheet .cond-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 639px) {
  html body.public-body #propertyContent .hope-sheet .cond-grid,
  html body.public-body #propertyContent .hope-sheet .deal-detail-list { grid-template-columns: 1fr !important; }
}

/* =====================================================================================
   THE TIMELINE - a tinted border, not a filled block

   The four dated stages were four saturated button faces stacked in one card: gold, crimson,
   navy and white, each 56px tall. On a page whose whole argument is that every card looks the
   same and only the price is called out, four solid brand colours in one column is the loudest
   thing on the screen, and what it is shouting about is a walkthrough date.

   It uses the price card's own device instead: white, one hairline, and the stage colour as a
   3px bar down the left. Same information, same order, still tellable apart at a glance - and
   the one genuinely urgent row (OFFERS DUE) is the only one that keeps a tint.
   ===================================================================================== */
html body.public-body #propertyContent #datesSection .deal-timeline-row:not(#_h1):not(#_h2) {
  background-color: #fff !important; background-image: none !important;
  border: 1px solid var(--il-line) !important; border-radius: 10px !important;
  padding-left: 14px !important;
}
html body.public-body #propertyContent #datesSection #listedRow { --il-stage: #9aa3b2; }
html body.public-body #propertyContent #datesSection #walkthroughRow { --il-stage: var(--jhb-gold); }
html body.public-body #propertyContent #datesSection #deadlineRow {
  --il-stage: var(--jhb-crimson);
  background-color: rgba(177, 29, 41, .05) !important;
  border-color: rgba(177, 29, 41, .28) !important;
}
html body.public-body #propertyContent #datesSection #closingRow { --il-stage: var(--jhb-navy); }
html body.public-body #propertyContent #datesSection .deal-timeline-row :is(.deal-timeline-label, svg) {
  color: var(--il-cell-label) !important; opacity: 1 !important;
}
html body.public-body #propertyContent #datesSection .deal-timeline-row .deal-timeline-value {
  color: var(--hope-ink) !important;
}
html body.public-body #propertyContent #datesSection #deadlineRow .deal-timeline-value { color: var(--jhb-crimson) !important; }
/* The UP NEXT chip was white-on-navy inside a navy row, so it read as a hole punched in it. */
html body.public-body #propertyContent #datesSection .deal-timeline-row.is-next .deal-timeline-label::after {
  background: var(--jhb-navy) !important; color: #fff !important; border-color: transparent !important;
}
/* brand.css paints a white inset rim on every timeline row. That was legible over a saturated
   fill and is a second border over a white one, so the stage bar replaces it - and it has to be
   written HERE, at the same selector, because that rule is the one carrying the !important. */
html body.public-body #propertyContent .deal-timeline-row:not(#_h1):not(#_h2):not(#_h4) {
  box-shadow: inset 3px 0 0 var(--il-stage, var(--jhb-navy)) !important;
}

/* =====================================================================================
   ONE GREEN, AND NO GREEN WASH

   Two radial gradients of rgba(22,163,74,.12) sat on .pricing-spread-card::before - the last
   soft-depth surface left on the page, and the reason the price block looked tinted while every
   card around it was flat white. And the two figures that ARE a gain were two DIFFERENT greens
   (#16a34a and #047857, both Tailwind defaults that arrived with the markup), neither of them
   ours. The palette's mint (#44D792) is a FILL and is far too light to read as text on white,
   and inventing a darker one would put a 35th colour on the page to settle an argument between
   two - so the ONE green is the darker of the two that were already here. Starting is already
   ink and stays ink: it is the price, not a gain.
   ===================================================================================== */
html body.public-body:has(#propertyContent) { --il-gain: #047857; }
html body.public-body #propertyContent .pricing-spread-card::before,
html body.public-body #propertyContent .spread-highlight::before { background-image: none !important; }
html body.public-body #propertyContent .pricing-sidebar-card :is(.text-green-600, .text-green-700, .text-emerald-600, .text-emerald-700) {
  color: var(--il-gain) !important;
}

/* ---- Property Details' four stat tiles are the same cell one more time.
   They were four centred grey boxes two across, each with the icon stacked above a label above
   a value - three lines of vertical rhythm to say "Bedrooms 2". The card has no id of its own,
   so it is reached through the one id inside it, which is what keeps this off the dozen other
   two-column Tailwind grids on the page. */
html body.public-body #propertyContent .hope-sheet .grid:has(> * > #stat1Label) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--il-cell-gap-y) var(--il-cell-gap-x) !important;
}
html body.public-body #propertyContent .hope-sheet .grid:has(> * > #stat1Label) > * {
  display: grid !important; grid-template-columns: max-content minmax(0, 1fr) !important;
  column-gap: 8px !important; align-items: start !important;
  grid-template-areas: "ic label" "ic value" !important;
  text-align: left !important; padding: 0 !important; min-width: 0 !important;
  background: transparent !important; background-image: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
html body.public-body #propertyContent .hope-sheet .grid:has(> * > #stat1Label) > * > svg {
  grid-area: ic !important; width: 18px !important; height: 18px !important;
  stroke-width: 1.75 !important; margin: 1px 0 0 !important;
  color: var(--il-cell-label) !important;
}
html body.public-body #propertyContent .hope-sheet .grid:has(> * > #stat1Label) > * > :nth-child(2) {
  grid-area: label !important;
  font-size: 15px !important; font-weight: 500 !important; line-height: 20px !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: var(--il-cell-label) !important; margin: 0 !important;
}
html body.public-body #propertyContent .hope-sheet .grid:has(> * > #stat1Label) > * > :nth-child(3) {
  grid-area: value !important;
  font-size: 15px !important; font-weight: 500 !important; line-height: 20px !important;
  color: var(--hope-ink) !important; margin: 2px 0 0 !important;
}
@media (max-width: 639px) {
  html body.public-body #propertyContent .hope-sheet .grid:has(> * > #stat1Label) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---- the closing attorney is their .contactCard-wrapper: a CARD, not an inset.
   It was a grey panel sunk inside a white one - a surface inside a surface, which is the one
   shape this page has been taking out everywhere else. White on a hairline is what every other
   card on the page wears, and a person's name and number is exactly the sort of thing that
   earns one. */
html body.public-body #propertyContent .hope-sheet #closingAttorneyCard:not(#_h1):not(#_h2) {
  background: #fff !important; background-image: none !important;
  border: 1px solid var(--il-line) !important; border-radius: var(--il-radius) !important;
  box-shadow: none !important; padding: 16px !important;
}
/* The 40px navy square beside it is a chip on a card that already has a border, so the glyph
   carries it on its own - the same 18px mark every other cell on the page uses. */
html body.public-body #propertyContent .hope-sheet #closingAttorneyCard .w-10.h-10.rounded-xl:not(#_h1):not(#_h2):not(#_h3) {
  background-color: transparent !important; background-image: none !important;
  width: 18px !important; height: 18px !important; min-width: 18px !important;
  border-radius: 0 !important; margin-top: 2px !important;
}
html body.public-body #propertyContent .hope-sheet #closingAttorneyCard .w-10.h-10.rounded-xl svg {
  width: 18px !important; height: 18px !important; stroke-width: 1.75 !important;
  color: var(--il-cell-label) !important;
}
html body.public-body #propertyContent .hope-sheet #closingAttorneyCard .text-xs.uppercase {
  font-size: 15px !important; font-weight: 500 !important; line-height: 20px !important;
  letter-spacing: 0 !important; text-transform: none !important; color: var(--il-cell-label) !important;
}

/* ---- and the comparables footer, the last soft tint left inside the sheet */
html body.public-body #propertyContent .hope-sheet #comparablesFooter:not(#_h1):not(#_h2) {
  background: transparent !important; background-image: none !important;
  border-top: 1px solid var(--il-line) !important; border-radius: 0 !important;
}

/* =====================================================================================
   THE ADDRESS GATE - the one card on the page that has to be MORE legible than its background

   The map behind it is deliberately blurred, and the gate was a glass panel over it:
   background transparent, backdrop-filter blur(10px), sitting inside an overlay carrying its
   own blur(2px). So the one control the gate exists to offer - "View Full Address" - was
   rendered over a blurred photograph at low contrast and read as disabled. A buyer looking at
   a locked address and a greyed-out unlock button concludes the deal is not available to them,
   which is the opposite of what this section is for.

   It is an opaque card on a hairline, like every other card on the page, and the CTA is the
   page's own crimson. The blur stays where it belongs: on the MAP.
   ===================================================================================== */
html body.public-body #propertyContent .deal-location-lock-card:not(#_h1):not(#_h2) {
  background: #fff !important; background-image: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--il-line) !important; border-radius: var(--il-radius) !important;
  box-shadow: none !important;
}
html body.public-body #propertyContent .deal-location-lock-overlay:not(#_h1):not(#_h2) {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background: rgba(255, 255, 255, .55) !important;
}
html body.public-body #propertyContent .deal-location-lock-icon:not(#_h1):not(#_h2) {
  background: #fff !important; border: 1px solid var(--il-line) !important; box-shadow: none !important;
}
/* The unlock button is a real CTA and it had become INVISIBLE, which the glass panel was hiding.
   .deal-address-chip is white-on-a-fill, and its fill was a GRADIENT - so the flat-fill sweep
   that took every background-image off this page left it transparent with white text on it.
   Over a blurred map that read as a ghosted button; over the white card it is nothing at all,
   and "View Full Address" is the only thing the gate is asking anybody to do. A background-image
   removed from a surface that had no background-COLOUR under it does not flatten the surface,
   it deletes it. */
html body.public-body #propertyContent .deal-address-chip:not(#_h1):not(#_h2) {
  background-color: var(--jhb-crimson) !important; color: #fff !important; opacity: 1 !important;
  border-color: transparent !important;
}
html body.public-body #propertyContent .deal-location-lock-card :is(button, a, .deal-address-chip) { opacity: 1 !important; }

/* =====================================================================================
   RECENTLY SOLD - a band that was re-grounded and kept its old ink

   That section used to be a NAVY band, so the original stylesheet sets white ink on the section
   itself and every element under it inherits it. The skin re-grounded it to the light page
   colour and then re-coloured the heading, the eyebrow and the section copy one at a time - so
   everything anybody had thought to name reads correctly and everything else inherits WHITE ON
   NEAR-WHITE.

   What was left invisible: the disclaimer line under the heading - "Estimated numbers use the
   selected rehab level and are provided for marketing purposes only" - which is the one line in
   that section that exists to be read rather than skimmed, at a measured contrast of 1.09:1.
   Its own rule (`.section-stack > p.text-gray-400`) carries a fourth class, so it outranked the
   skin's `.section-stack > p` and nothing on any screen said so.

   The fix is the SECTION's own colour, not another exception: with the band's ink set to the
   page's ink, an element nobody has thought about inherits something readable instead of
   something that is not there. The named exceptions stay for the few that need a different one.
   ===================================================================================== */
html body.public-body .recently-sold-section:not(#_h1):not(#_h2) { color: var(--hope-ink) !important; }
html body.public-body .recently-sold-section :is(p, li, span, dd, dt):not([class*="badge"]):not([class*="pill"]):not([class*="chip"]):not(#_h1):not(#_h2) {
  color: inherit;
}
/* and the disclaimer itself, which is muted by intent rather than by inheritance */
html body.public-body .recently-sold-section .section-stack > p.text-gray-400:not(#_h1):not(#_h2) {
  color: var(--hope-muted) !important;
}

/* =====================================================================================
   --il-line-soft IS RETIRED AS A FILL

   It was the honest first move: the page was covered in tinted insets and this made them all
   ONE tint instead of four. But the argument the detail grids are built on applies to every one
   of them - every cell had a fill, so no fill meant anything, and a page that is mostly facts
   read as a form to be filled in. There is no filled cell anywhere on the reference; separation
   there is a hairline and 24px of air, and that is cheaper to read than a wash.

   So a cell inside a card is FLAT, and a list that needs its rows told apart gets a rule between
   them. The token survives for the two places a wash is still doing work (a disabled field, the
   map's own placeholder) and for anything that resolves to it outside this sheet.
   ===================================================================================== */
html body.public-body #propertyContent .hope-sheet :is(.bg-gray-50, .bg-slate-50, .cond-cell) {
  background: transparent !important; background-image: none !important;
  border-radius: 0 !important; border: 0 !important; box-shadow: none !important;
}
/* An accordion is a CARD - the same white-on-a-hairline every section wears - and its summary is
   part of the card rather than a bar across the top of it. */
html body.public-body #propertyContent .hope-sheet details.rounded-2xl {
  background: #fff !important; background-image: none !important;
  border: 1px solid var(--il-line) !important; border-radius: var(--il-radius) !important; box-shadow: none !important;
}
html body.public-body #propertyContent .hope-sheet details.rounded-2xl > summary {
  background: transparent !important; background-image: none !important; border-radius: 0 !important;
}
/* A row in a list is separated from the next one by a RULE, never by a fill. The last row in a
   list carries none, or the list ends in a line with nothing under it. */
html body.public-body #propertyContent .hope-sheet :is(.flex.justify-between.items-center, .flex.items-center.justify-between, .flex.items-center.gap-5) {
  background-image: none !important; background-color: transparent !important;
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
html body.public-body #propertyContent .hope-sheet .space-y-2 > :is(.flex.items-center.justify-between, .flex.justify-between.items-center),
html body.public-body #propertyContent .hope-sheet .space-y-3 > :is(.flex.items-center.justify-between, .flex.justify-between.items-center) {
  border-bottom: 1px solid var(--il-line) !important; padding-bottom: 10px !important;
}
html body.public-body #propertyContent .hope-sheet .space-y-2 > :is(.flex.items-center.justify-between, .flex.justify-between.items-center):last-child,
html body.public-body #propertyContent .hope-sheet .space-y-3 > :is(.flex.items-center.justify-between, .flex.justify-between.items-center):last-child {
  border-bottom: 0 !important; padding-bottom: 0 !important;
}
/* The rent shell held a wash AND a border around cards that already have their own. */
html body.public-body #propertyContent .hope-sheet .rent-estimate-shell {
  background-color: transparent !important; background-image: none !important;
  border: 0 !important; border-radius: 0 !important; padding: 0 !important;
}
html body.public-body #propertyContent .hope-sheet .rent-estimate-shell :is(.rounded-xl, .rounded-lg, .bg-white) { background-color: #fff !important; }
/* ONE green: the comp legend's dot was still the Tailwind green the two figures used to be. */
html body.public-body #propertyContent .comp-legend-dot--comp { background-color: var(--il-gain) !important; }