/* =====================================================================================
   JHB roles - HOPE's structure wearing the official JHBTG palette.
   Loaded after hope-reskin.css and hope-layout.css.

   Palette (brand-assets/JHBTG Color Palette.txt + branding/jhb-brand-render.js):
     navy    #13436B  structure: headings, the banner, the active tab, links
     crimson #B11D29  the ONE action colour: submit an offer, browse deals, join
     bright  #D93240  alerts and deadlines
     yellow  #F5B301  the ONE highlight: the price label, the eyebrow on a band, the
                      walkthrough. It is the star the brand prints on 'Exclusive Deals'.
     mint    #44D792  good numbers; #16A34A / #047857 when it must carry white or be read
     gray    #EBEBEB  plus the render module's #F2F6FB panel ground
   ===================================================================================== */
:root {
  --jhb-navy: #13436b; --jhb-navy-deep: #0b1f3d; --jhb-navy-night: #0a1424; --jhb-navy-support: #36598d;
  --jhb-crimson: #b11d29; --jhb-crimson-hi: #cf1f2e; --jhb-crimson-lo: #8f0f1c; --jhb-bright: #d93240;
  /* ONE yellow. #f5b301 is the star the brand already prints on 'Exclusive Deals'; the three
     near-misses it replaces (sand #e7c277, amber #fbbf24, mustard #cba24f) put three accents
     on one screen. -hi is the hover/tint face, -lo the one that can be read as text. */
  --jhb-gold: #f5b301; --jhb-gold-hi: #ffc933; --jhb-gold-lo: #a86f00;
  --jhb-gold-wash: #fff5e0; --jhb-gold-edge: rgba(245, 179, 1, .55);
  --jhb-mint: #44d792; --jhb-green: #16a34a; --jhb-good: #047857;
  --jhb-crimson-soft: rgba(177, 29, 41, .09); --jhb-gold-soft: rgba(245, 179, 1, .16);
  --jhb-shadow-crimson: 0 10px 22px -10px rgba(177, 29, 41, .6);
  --jhb-rays: url('/branding/black-ray-effect.webp');
}

/* ---------------------------------------------------------------- the banner: brand navy, ONE texture
   The classic ray sheet and HOPE's own swirl are two different pieces of art about the same
   thing, and stacked they read as a rendering fault rather than as depth - two diagonals
   crossing at different angles over one navy. HOPE's band is the one that stays on every hero
   and band; the ray sheet keeps the footer, where no swirl sits under it. */
html body.public-body section.site-hero:not([data-home-section]),
html body.public-body :is(.site-cta-band, .section-band-navy) {
  background: #13436b var(--hope-band) center / 100% 100% no-repeat !important;
}
html body.public-body.public-body:has(#propertyContent) {
  background: var(--hope-ground) var(--hope-band) 0 0 / 100% 440px no-repeat !important;
}

/* ---------------------------------------------------------------- one action colour: crimson */
html body :is(.btn-primary, .email-btn--red, .site-profile-item-primary, .site-button-primary),
html body.public-body #propertyContent .pricing-sidebar-card .pricing-primary-cta,
html body.public-body .recently-sold-section .btn-primary {
  background: var(--jhb-crimson) !important; color: #fff !important; box-shadow: var(--jhb-shadow-crimson) !important; border: 0 !important;
}
html body :is(.btn-primary, .email-btn--red, .site-profile-item-primary, .site-button-primary):hover,
html body.public-body #propertyContent .pricing-sidebar-card .pricing-primary-cta:hover {
  background: var(--jhb-crimson-lo) !important; box-shadow: 0 14px 26px -12px rgba(177, 29, 41, .7) !important;
}
/* navy is the second voice - the same solid button, never a second red */
html body :is(.btn-secondary, .site-button-secondary, .email-btn--navy) {
  background: var(--jhb-navy) !important; color: #fff !important; box-shadow: 0 10px 22px -12px rgba(11, 31, 61, .55) !important; border: 0 !important;
}
html body :is(.btn-secondary, .site-button-secondary, .email-btn--navy):hover { background: var(--jhb-navy-deep) !important; }
/* Navy ink, never white: white on #f5b301 is about 2:1 and unreadable, navy is about 8:1.
   The HOVER goes LIGHTER rather than darker - the deep yellow is the text tone and would put
   navy ink on a brown button. */
html body .email-btn--gold { background: var(--jhb-gold) !important; color: var(--jhb-navy-deep) !important; }
html body .email-btn--gold:hover { background: var(--jhb-gold-hi) !important; }
html body .email-btn--green { background: var(--jhb-green) !important; color: #fff !important; }

/* The JHB button DNA - the short accent bar (brand-assets/brand-buttons-system.png) - returns as a
   quiet 3px mark, drawn in the button's own tint, so the flat HOPE button still reads as ours. It
   is an inset box-shadow, not a pseudo-element, so none of the old pseudo rules can resurrect the
   glow that came with it.

   EVERY variant carries it, which is the point of this block. It used to sit on red and navy
   only, so a row of four buttons - Submit an Offer, View Flyer, Share, Save PDF - had the mark on
   two of them and not the other two, which reads as two of the buttons being unfinished rather
   than as a hierarchy. The bar says "this is a control"; the FILL says how important it is. */
html body.public-body :is(.email-btn--red, .pricing-primary-cta):not(#_h1):not(#_h2):not(#_h3) {
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, .55), var(--jhb-shadow-crimson) !important;
}
html body.public-body .email-btn--navy:not(#_h1):not(#_h2):not(#_h3) {
  box-shadow: inset 3px 0 0 rgba(125, 211, 252, .7), 0 10px 22px -12px rgba(11, 31, 61, .55) !important;
}
/* The yellow button's bar is a LIGHT yellow - white on #f5b301 is invisible and a dark one reads
   as a crack down the edge. */
html body.public-body :is(.email-btn--gold, .pricing-secondary-cta):not(#_h1):not(#_h2):not(#_h3) {
  box-shadow: inset 3px 0 0 var(--jhb-gold-hi), 0 8px 18px -10px rgba(168, 111, 0, .55) !important;
}
html body.public-body .email-btn--green:not(#_h1):not(#_h2):not(#_h3) {
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, .6), 0 10px 22px -12px rgba(4, 120, 87, .5) !important;
}
/* The quiet variants keep the rim they need to be a button at all, and take the bar in the brand
   navy - so Share and Save PDF are visibly the same family as the buttons above them. */
html body.public-body :is(.email-btn--outline, .pricing-quick-btn):not(#_h1):not(#_h2):not(#_h3) {
  box-shadow: inset 3px 0 0 var(--jhb-navy), inset 0 0 0 1px var(--hope-border) !important;
}
html body.public-body :is(.email-btn--outline, .pricing-quick-btn):not(#_h1):not(#_h2):not(#_h3):hover {
  box-shadow: inset 3px 0 0 var(--jhb-crimson), inset 0 0 0 1px rgba(177, 29, 41, .35) !important;
}
/* On a navy surface the rim and the bar both have to invert or the button disappears into it. */
html body.public-body .email-btn--on-dark:not(#_h1):not(#_h2):not(#_h3) {
  box-shadow: inset 3px 0 0 var(--jhb-gold), inset 0 0 0 1px rgba(255, 255, 255, .28) !important;
}
html body.public-body .email-btn--on-dark:not(#_h1):not(#_h2):not(#_h3):hover {
  box-shadow: inset 3px 0 0 var(--jhb-gold-hi), inset 0 0 0 1px rgba(255, 255, 255, .5) !important;
}

/* on the navy banner: crimson stays the action, the second button goes glass */
html body.public-body section.site-hero:not([data-home-section]) .btn-primary {
  background: var(--jhb-crimson) !important; color: #fff !important; box-shadow: 0 14px 30px -12px rgba(177, 29, 41, .75) !important;
}
html body.public-body section.site-hero:not([data-home-section]) .btn-primary:hover { background: var(--jhb-crimson-hi) !important; }
html body.public-body :is(section.site-hero:not([data-home-section]), .site-cta-band) :is(.btn-secondary, .email-btn--outline) {
  background: rgba(255, 255, 255, .12) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .32) !important; box-shadow: none !important;
}

/* ---------------------------------------------------------------- nav */
html body.public-body .site-nav-link.site-nav-link-active { background: var(--jhb-navy) !important; color: #fff !important; box-shadow: 0 10px 20px -12px rgba(11, 31, 61, .6) !important; }
html body.public-body .site-nav-link:hover { background: rgba(19, 67, 107, .08) !important; color: var(--jhb-navy) !important; }

/* ---------------------------------------------------------------- eyebrows, steps, icons - red and navy, as the brand alternates them */
html body.public-body .section-eyebrow { background: var(--jhb-crimson-soft) !important; color: var(--jhb-crimson) !important; }
html body.public-body .section-eyebrow i { color: var(--jhb-crimson) !important; }
html body.public-body :is(.site-cta-band, .section-band-navy, section.site-hero:not([data-home-section])) .section-eyebrow { background: var(--jhb-gold-soft) !important; color: var(--jhb-gold) !important; }
html body.public-body :is(.site-cta-band, .section-band-navy) .section-eyebrow i { color: var(--jhb-gold) !important; }
html body.public-body .section-underline::after { background: linear-gradient(90deg, var(--jhb-crimson) 0 55%, var(--jhb-navy) 55% 100%) !important; }
html body.public-body :is(.step-number-red) { background: var(--jhb-crimson) !important; box-shadow: var(--jhb-shadow-crimson) !important; }
html body.public-body :is(.step-number-navy) { background: var(--jhb-navy) !important; box-shadow: 0 10px 20px -10px rgba(11, 31, 61, .6) !important; }
html body.public-body .feature-icon-wrap-red { background: var(--jhb-crimson-soft) !important; color: var(--jhb-crimson) !important; }
html body.public-body .feature-icon-wrap-navy { background: rgba(19, 67, 107, .09) !important; color: var(--jhb-navy) !important; }
html body.public-body :is(h1, h2, h3).text-primary, html body.public-body :is(h2, h3) .text-primary { color: var(--jhb-navy) !important; }
html body.public-body :is(h2, h3).section-underline { color: var(--jhb-navy) !important; }

/* ---------------------------------------------------------------- hero */
html body.public-body section.site-hero:not([data-home-section]) h1 .text-secondary { color: var(--jhb-gold) !important; -webkit-text-fill-color: var(--jhb-gold) !important; }
html body.public-body section.site-hero:not([data-home-section]) p.text-secondary { color: var(--jhb-gold) !important; }
html body.public-body section.site-hero:not([data-home-section]) .site-hero-stat .stat-value { color: var(--jhb-crimson) !important; }
html body.public-body .stats-bar .stat-value { color: var(--jhb-navy) !important; }
html body.public-body .stats-bar .stat-item:nth-child(2) .stat-value { color: var(--jhb-crimson) !important; }

/* ---------------------------------------------------------------- deal page */
/* the price card is the flyer's navy poster: gold label, white price, crimson band under it */
html body.public-body #propertyContent .pricing-sidebar-card .pricing-price-header {
  background: #13436b var(--hope-band) center / cover no-repeat !important;
  box-shadow: inset 0 -3px 0 var(--jhb-crimson) !important;
}
html body.public-body #propertyContent .pricing-price-header :is(.pricing-kicker, .pricing-kicker *) { color: var(--jhb-gold) !important; }
html body.public-body #propertyContent #dealHeroStats .deal-stat-chip-price,
html body.public-body #propertyContent .deal-stat-chip-price { background: var(--jhb-crimson) !important; box-shadow: var(--jhb-shadow-crimson) !important; }
html body.public-body #propertyContent .deal-stat-chip-price .deal-stat-chip-label { color: rgba(255, 255, 255, .85) !important; }
html body.public-body #propertyContent .pricing-sidebar-card #offerCountdown { background: rgba(217, 50, 64, .08) !important; color: var(--jhb-crimson) !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-secondary-cta { background: var(--jhb-gold) !important; color: var(--jhb-navy-deep) !important; }
html body.public-body #propertyContent .hope-tab.is-on { background: var(--jhb-navy) !important; box-shadow: 0 10px 20px -12px rgba(11, 31, 61, .6) !important; }
html body.public-body #propertyContent .hope-tab:hover { background: rgba(19, 67, 107, .08); color: var(--jhb-navy); }
html body.public-body #propertyContent #valueBandSection .deal-value-tile::before { background: var(--jhb-navy); }
html body.public-body #propertyContent #valueBandSection .deal-value-tile-accent::before { background: var(--jhb-mint); }
html body.public-body #propertyContent #valueBandSection .deal-value-tile-accent .deal-value-figure { color: var(--jhb-good) !important; }
html body.public-body #propertyContent .deal-top-bar .deal-kind-chip { background: rgba(19, 67, 107, .09) !important; color: var(--jhb-navy) !important; }
html body.public-body #propertyContent .deal-top-bar .deal-header-map-icon { background: var(--jhb-crimson-soft) !important; color: var(--jhb-crimson) !important; }
html body.public-body #propertyContent .deal-top-bar .deal-header-map-icon svg { color: var(--jhb-crimson) !important; }

/* ---------------------------------------------------------------- footer: brand night navy */
html body.public-body .site-footer { background: var(--jhb-rays) left bottom / 130% auto no-repeat, var(--jhb-navy-night) !important; }
html body.public-body .site-footer :is(h2, h3, h4) { color: var(--jhb-gold) !important; }

/* ---------------------------------------------------------------- the deal meter
   Where the Starting Offer sits against the ARV, drawn from the two figures already on the page. */
html body.public-body #propertyContent .hope-meter { margin-top: 14px; background: #fff; border-radius: 14px; box-shadow: var(--hope-shadow); padding: 16px 18px 14px; }
html body.public-body #propertyContent .hope-meter-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13.5px; color: var(--hope-muted); margin-bottom: 10px; }
html body.public-body #propertyContent .hope-meter-head b { color: var(--jhb-navy); font-weight: 700; }
html body.public-body #propertyContent .hope-meter-gap { color: var(--jhb-good); font-weight: 600; }
html body.public-body #propertyContent .hope-meter-bar { position: relative; height: 34px; border-radius: 8px; background: rgba(68, 215, 146, .18); overflow: hidden; }
html body.public-body #propertyContent .hope-meter-bar > i {
  position: absolute; inset: 0 auto 0 0; background: linear-gradient(135deg, var(--jhb-navy) 0%, var(--jhb-navy-deep) 100%);
  border-radius: 8px 0 0 8px; display: flex; align-items: center; padding: 0 12px;
}
html body.public-body #propertyContent .hope-meter-bar em { font-style: normal; font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; }
html body.public-body #propertyContent .hope-meter-bar > u { position: absolute; inset: 0 12px 0 auto; display: flex; align-items: center; text-decoration: none; }
html body.public-body #propertyContent .hope-meter-bar > u em { color: var(--jhb-good); }
html body.public-body #propertyContent .hope-meter-note { margin-top: 8px; font-size: 12px; color: var(--hope-muted); }

/* ---------------------------------------------------------------- home: the five steps as one connected run */
html body.public-body .how-buying-section .steps-track { position: relative; }
html body.public-body .how-buying-section .steps-track::before {
  content: ''; position: absolute; left: 10%; right: 10%; top: 21px; height: 2px;
  background: linear-gradient(90deg, var(--jhb-crimson), var(--jhb-navy)) !important; opacity: .25; z-index: 0;
}
html body.public-body .how-buying-section .step-node { position: relative; z-index: 1; padding-top: 4px !important; background: transparent !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; }
html body.public-body .how-buying-section .step-number { width: 42px !important; height: 42px !important; border-radius: 50% !important; font-size: 15px !important; }

/* ---------------------------------------------------------------- home: areas as map-pin tiles */
html body.public-body section.py-16 .site-link-pill {
  background: #fff !important; border: 0 !important; border-radius: 12px !important; box-shadow: var(--hope-shadow) !important;
  padding: 12px 16px !important; font-weight: 600 !important; color: var(--jhb-navy) !important;
  transition: transform 260ms var(--hope-ease), box-shadow 260ms var(--hope-ease), color 260ms var(--hope-ease) !important;
}
html body.public-body section.py-16 .site-link-pill:hover { transform: translateY(-2px); box-shadow: var(--hope-shadow-lift) !important; color: var(--jhb-crimson) !important; text-decoration: none !important; }
html body.public-body section.py-16 h2 { color: var(--jhb-navy) !important; }

/* ---------------------------------------------------------------- home: the trust strip reads as one brand rule */
html body.public-body section.py-10.bg-white { background: var(--hope-ground) !important; }
html body.public-body section.py-10.bg-white > div { background: #fff; border-radius: 16px; box-shadow: var(--hope-shadow); padding: 22px 26px; max-width: 56rem; }
/* the old "hot metal" rule above the number band has nothing to sit on now the band is cards */
html body.public-body #propertyContent #valueBandSection::before { display: none !important; }

/* =====================================================================================
   ROUND 4 - one yellow, one feedback section, and the small things that read as unfinished
   ===================================================================================== */

/* ---------------------------------------------------------------- the deal timeline
   Four rows, four meanings, and the mark down the left edge is what makes them one set:
   listed (quiet), walkthrough (yellow - the thing you turn up to), offers due (crimson - the
   thing with a clock), close by (navy - the end).

   The mark used to sit on a FILLED row: gold, crimson, navy and white stacked in one card, four
   saturated brand colours in a column, on a page whose whole argument is that every card looks
   the same and only the price is called out. The colour survives and the fill does not - see
   THE TIMELINE in layout.css, which owns the shape now. What is left here is the hover, because
   a row that is a button still has to answer a pointer. */
html body.public-body #propertyContent .deal-timeline-row { border-radius: 10px !important; }
html body.public-body #propertyContent #walkthroughRow:not(#_h1):not(#_h2):not(#_h3):hover {
  background-color: rgba(245, 179, 1, .1) !important;
}

/* ---------------------------------------------------------------- yellow, everywhere it lands
   Every pill, chip and badge that used to be one of the three near-miss golds now takes the
   one yellow with navy ink. Navy on #f5b301 is about 8:1; white on it is about 2:1. */
html body.public-body #propertyContent :is(.rent-estimate-pill, .rent-median-pill, [class*="median"][class*="pill"]) {
  background: var(--jhb-gold) !important; color: var(--jhb-navy-deep) !important; border: 0 !important;
}
html body.public-body #propertyContent .pricing-sidebar-card .pricing-secondary-cta {
  background: var(--jhb-gold) !important; color: var(--jhb-navy-deep) !important;
}
html body.public-body #propertyContent .pricing-sidebar-card .pricing-secondary-cta:hover { background: var(--jhb-gold-hi) !important; }
html body.public-body #propertyContent .pricing-sidebar-card .pricing-secondary-cta svg { color: var(--jhb-navy-deep) !important; }

/* ---------------------------------------------------------------- the contact card
   Crimson is the ONE action colour on this page and it belongs to Submit an Offer. Saving a
   contact card is a keep-in-touch, not a decision, so a second red button - on a navy card,
   directly under the offer rail - made two different asks look equally urgent. Yellow is the
   brand's own highlight ON navy, which is exactly what this is. */
/* :not(#_hN) buys id weight without narrowing what matches. The crimson face and its accent
   bar are already written at three ids of weight further up this sheet, and deal-detail.css
   reaches this card with five-class chains of its own - a plain rule here loses to both and
   the button stays red with no error anywhere. */
html body.public-body #propertyContent .hope-help [data-site-contact-card-link]:not(#_h1):not(#_h2):not(#_h3):not(#_h4),
html body.public-body .site-footer [data-site-contact-card-link]:not(#_h1):not(#_h2):not(#_h3):not(#_h4) {
  background: var(--jhb-gold) !important; background-image: none !important; color: var(--jhb-navy-deep) !important;
  box-shadow: inset 3px 0 0 var(--jhb-gold-hi), 0 8px 18px -12px rgba(168, 111, 0, .55) !important;
}
html body.public-body #propertyContent .hope-help [data-site-contact-card-link]:not(#_h1):not(#_h2):not(#_h3):not(#_h4):hover,
html body.public-body .site-footer [data-site-contact-card-link]:not(#_h1):not(#_h2):not(#_h3):not(#_h4):hover { background: var(--jhb-gold-hi) !important; }
html body.public-body #propertyContent .hope-help [data-site-contact-card-link]:not(#_h1):not(#_h2):not(#_h3) :is(svg, span),
html body.public-body .site-footer [data-site-contact-card-link]:not(#_h1):not(#_h2):not(#_h3) :is(svg, span) { color: var(--jhb-navy-deep) !important; }

/* --on-dark is the variant for a NAVY surface, and the contact card is flattened to white when
   it lands in the reading column - so its glass rim and gold bar were being drawn on paper. */
html body.public-body #propertyContent .hope-help .email-btn--on-dark:not(#_h1):not(#_h2):not(#_h3) {
  box-shadow: inset 3px 0 0 var(--jhb-navy), inset 0 0 0 1px var(--hope-border) !important;
  color: var(--hope-ink) !important;
}
html body.public-body #propertyContent .hope-help .email-btn--on-dark:not(#_h1):not(#_h2):not(#_h3):hover {
  box-shadow: inset 3px 0 0 var(--jhb-crimson), inset 0 0 0 1px rgba(177, 29, 41, .35) !important; color: var(--jhb-crimson) !important;
}

/* ---------------------------------------------------------------- ONE feedback section
   Built by skin/layout.js from the two asks that used to be in two places. */
html body.public-body #propertyContent .hope-feedback {
  margin-top: 24px; padding: 30px; background: #fff; border: 1px solid var(--hope-border);
  border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
html body.public-body #propertyContent .hope-feedback-head { max-width: 46rem; margin-bottom: 22px; }
html body.public-body #propertyContent .hope-feedback-head h2 {
  margin: 0 0 6px; font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; color: var(--hope-ink);
}
html body.public-body #propertyContent .hope-feedback-head p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--hope-muted); }
html body.public-body #propertyContent .hope-feedback-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 767px) { html body.public-body #propertyContent .hope-feedback-grid { grid-template-columns: 1fr; } }
html body.public-body #propertyContent .hope-feedback-col {
  background: var(--hope-ground); border-radius: 10px; padding: 18px; border: 1px solid var(--hope-border);
}
html body.public-body #propertyContent .hope-feedback-kicker {
  margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--jhb-navy);
}
/* The two cards the section is built from arrive wearing their old surfaces - flatten them, or
   the section is a card holding a card holding a card. */
html body.public-body #propertyContent .hope-feedback-col > :is(div, form) {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; margin: 0 !important;
}
html body.public-body #propertyContent .hope-feedback-col .deal-pass-toggle-btn,
html body.public-body #propertyContent .hope-feedback-col .email-btn {
  width: 100%; justify-content: center !important; margin-top: 0 !important;
}
html body.public-body #propertyContent .hope-feedback-col #dealAlertSeedNote {
  margin: 0 0 12px !important; font-size: 13.5px !important; line-height: 1.55 !important; color: var(--hope-muted) !important;
}
html body.public-body #propertyContent .hope-feedback-col .deal-pass-toggle-btn {
  background: #fff !important; border: 1px solid var(--hope-border) !important; border-radius: 8px !important;
  padding: 10px 14px !important; font-weight: 600 !important; color: var(--hope-ink) !important; font-size: 14px !important;
  box-shadow: inset 3px 0 0 var(--jhb-navy) !important;
}
html body.public-body #propertyContent .hope-feedback-col .deal-pass-toggle-btn:hover { box-shadow: inset 3px 0 0 var(--jhb-crimson) !important; color: var(--jhb-crimson) !important; }
html body.public-body #propertyContent .hope-feedback-col .deal-pass-panel { margin-top: 12px !important; }
html body.public-body #propertyContent .hope-feedback-col .deal-pass-field > span { color: var(--hope-muted) !important; }
html body.public-body #propertyContent .hope-feedback-col :is(select, textarea, input) { background: #fff !important; }

/* ---------------------------------------------------------------- the status "?" on the tab
   The circled mark is a CONTROL, so it is sized and coloured like one rather than left as a
   stray glyph beside a solid pill. Its tooltip must clear the pill it hangs off. */
html body.public-body #propertyContent .deal-status-chip { position: relative; }
html body.public-body #propertyContent .deal-status-tip { z-index: 60; }

/* ---------------------------------------------------------------- the strip over the photos
   .deal-image-frame::before drew a 3px gradient rule across the top of the mosaic. On a poster
   that rule sits under a headline and works; laid across four photographs it reads as tape
   over the top of the picture rather than as trim - and it was the one yellow element on the
   page nobody had chosen to put there. The mosaic's own shadow is what frames it. */
html body.public-body #propertyContent .hope-gallery .deal-image-frame::before,
html body.public-body #propertyContent .hope-gallery .deal-image-frame::after { content: none !important; display: none !important; }

/* ---------------------------------------------------------------- the status "?" sat ON the pill
   The mark is absolutely positioned by the page's own sheet, anchored inside .deal-status-chip
   - which is exactly the width of the badge - so the circle landed on top of the first letter
   of AVAILABLE and read as a rendering fault. It is a sibling of the badge, so it lays out as
   one: static, in the chip's flex row, with the gap between them. */
html body.public-body #propertyContent #statusTipMark:not(#_h1):not(#_h2) {
  position: static !important; inset: auto !important; transform: none !important;
  margin: 0 !important; flex: none !important;
}
html body.public-body #propertyContent .deal-status-chip { width: auto !important; }

/* ---------------------------------------------------------------- the sticky offer pill
   It shows on desktop too (its own sheet calls it "the desktop pill"), so it gets the same
   button set and the same corner as everything else rather than a second visual language. */
html body.public-body #mobileOfferBar { border-radius: 12px 12px 0 0 !important; border-color: var(--hope-border) !important; }
html body.public-body #mobileOfferBar .email-btn--gold { background: var(--jhb-gold) !important; color: var(--jhb-navy-deep) !important; }
html body.public-body #mobileOfferBar .email-btn--gold svg { color: var(--jhb-navy-deep) !important; }

/* ---------------------------------------------------------------- the price card reads centred
   Measured: the header's label row IS centred, and the LABEL inside it was 14.5px right of the
   $105,000 under it - because the little "?" link rides in the same flex row and only ever
   takes space on the LEFT. A reader cannot name that, they just see the card leaning. The mark
   is lifted out of the flow and hung off the end of the label, so what centres is the words.
   Same trick on the three micro labels, where a PADDING does the compensating instead: the
   cards are ~96px wide and an absolutely-placed mark would hang off the edge of one. */
html body.public-body #propertyContent .pricing-price-header > .inline-flex { position: relative !important; }
html body.public-body #propertyContent .pricing-price-header > .inline-flex > .pricing-faq-link {
  position: absolute !important; left: 100% !important; top: 50% !important;
  transform: translateY(-50%) !important; margin: 0 0 0 6px !important;
}
/* The 21px padding-left that used to sit here was OPTICAL CENTRING: when the three figures were
   centred tiles, the "?" chip hung off the right of its label and 21px on the left put the words
   back in the middle. They are a left-aligned list now, so the same 21px indented the two labels
   that carry a tooltip and left the one that does not flush - two columns that did not line up,
   in the block whose whole job is that the three figures read together. */

/* ---------------------------------------------------------------- the two feedback columns
   One ask is a toggle and the other is a note plus a button, so left to themselves they end at
   different heights and the pair reads as one finished card beside one unfinished one. */
html body.public-body #propertyContent .hope-feedback-grid { align-items: stretch !important; }
html body.public-body #propertyContent .hope-feedback-col { display: flex; flex-direction: column; }
html body.public-body #propertyContent .hope-feedback-col > :last-child { margin-top: auto !important; }

/* ---------------------------------------------------------------- the eyebrow follows the SURFACE
   Yellow is the highlight ON NAVY. "How Buying Works" used to be a navy band and its own sheet
   still paints its eyebrow gold - but HOPE puts that section on white, so one eyebrow on the
   home page came out cream-on-white while the three around it were crimson. The rule is the
   surface, never the section name: navy band -> yellow, everything else -> crimson. */
html body.public-body .how-buying-section .section-eyebrow:not(#_h1):not(#_h2) {
  background: var(--jhb-crimson-soft) !important; color: var(--jhb-crimson) !important;
}
html body.public-body .how-buying-section .section-eyebrow:not(#_h1):not(#_h2) i,
html body.public-body .how-buying-section .section-eyebrow:not(#_h1):not(#_h2) svg { color: var(--jhb-crimson) !important; }

/* =====================================================================================
   INVESTORLIFT BUTTONS, JHB COLOURS
   Measured off their sheet: .ui-button is `transition: all .3s ease` and nothing else, every
   variant carries `border: 1px solid <its own colour>` even when filled, the radius is 6px at
   size-md and 8px at size-lg, the padding is 10px 11px / 11px 12px, the weight is 500, and
   there is NO box-shadow in the whole system except a 3px focus ring.

   So the drop shadows and the 1px hover lift go. What STAYS is the JHB accent bar, because it
   is the brand's own button DNA and it costs nothing here: it is an INSET shadow, so a button
   can carry the bar, its 1px rim and no drop shadow at the same time.
   ===================================================================================== */
html body.public-body #propertyContent :is(.email-btn, .btn-primary, .btn-secondary),
html body.public-body #mobileOfferBar :is(.email-btn, .btn-primary, .btn-secondary) {
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 11px 16px !important;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease !important;
  transform: none !important;
}
html body.public-body #propertyContent :is(.email-btn, .btn-primary, .btn-secondary):hover,
html body.public-body #mobileOfferBar :is(.email-btn, .btn-primary, .btn-secondary):hover { transform: none !important; }

/* Every fill keeps the bar and gains its own 1px rim; the drop shadow goes. The rim is the same
   colour as the fill on a solid button, which is what makes their filled buttons look crisp
   rather than soft-edged. */
html body.public-body #propertyContent :is(.email-btn--red, .pricing-primary-cta):not(#_h1):not(#_h2):not(#_h3):not(#_h4) {
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, .55), inset 0 0 0 1px var(--jhb-crimson) !important;
}
html body.public-body #propertyContent :is(.email-btn--red, .pricing-primary-cta):not(#_h1):not(#_h2):not(#_h3):not(#_h4):hover {
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, .55), inset 0 0 0 1px var(--jhb-crimson-lo) !important;
}
html body.public-body #propertyContent .email-btn--navy:not(#_h1):not(#_h2):not(#_h3):not(#_h4) {
  box-shadow: inset 3px 0 0 rgba(125, 211, 252, .7), inset 0 0 0 1px var(--jhb-navy) !important;
}
html body.public-body #propertyContent :is(.email-btn--gold, .pricing-secondary-cta):not(#_h1):not(#_h2):not(#_h3):not(#_h4) {
  box-shadow: inset 3px 0 0 var(--jhb-gold-hi), inset 0 0 0 1px var(--jhb-gold) !important;
}
html body.public-body #propertyContent .email-btn--green:not(#_h1):not(#_h2):not(#_h3):not(#_h4) {
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, .6), inset 0 0 0 1px var(--jhb-green) !important;
}
html body.public-body #propertyContent :is(.email-btn--outline, .pricing-quick-btn):not(#_h1):not(#_h2):not(#_h3):not(#_h4) {
  box-shadow: inset 3px 0 0 var(--jhb-navy), inset 0 0 0 1px #ebebeb !important;
}
html body.public-body #propertyContent :is(.email-btn--outline, .pricing-quick-btn):not(#_h1):not(#_h2):not(#_h3):not(#_h4):hover {
  box-shadow: inset 3px 0 0 var(--jhb-crimson), inset 0 0 0 1px var(--jhb-navy) !important;
}
html body.public-body #propertyContent .hope-help [data-site-contact-card-link]:not(#_h1):not(#_h2):not(#_h3):not(#_h4) {
  box-shadow: inset 3px 0 0 var(--jhb-gold-hi), inset 0 0 0 1px var(--jhb-gold) !important;
}

/* The timeline rows carried a white inset rim, which was legible over a saturated fill and is a
   second border over a white one. The stage bar replaces it; layout.css writes it. */

/* The price header keeps its navy, loses the band art: a photograph-free panel at this size
   reads as texture noise behind a number somebody is trying to read. */
html body.public-body #propertyContent .pricing-sidebar-card .pricing-price-header {
  background: var(--jhb-navy) !important; box-shadow: inset 0 -3px 0 var(--jhb-crimson) !important;
}