@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Typography. Plus Jakarta Sans carries headings and labels — it has the
     tighter apertures and the -0.02em tracking the display sizes want. Inter
     carries body copy, where its larger x-height reads better at 15-16px.
     Montserrat stays loaded because the logo SVG sets it internally. */
  --font-head: 'Plus Jakarta Sans', 'Montserrat', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --bg:         #F8F9FF;
  --surface:    #FFFFFF;
  --surface-2:  #EFF4FF;
  /* Third surface step. The two-step ramp could not separate a tinted field
     inside an already-tinted panel, so inputs on --surface-2 had to fall back
     to white and read as cut-outs. */
  --surface-3:  #E5EEFF;
  --text:       #0B1C30;
  --text-2:     #434655;
  /* 7.4:1 on white. Labels and captions, where the old #64779F was only just
     clearing AA and went muddy against the cooler surfaces below. */
  --muted:      #4D556B;
  /* Cobalt. --primary is the interactive blue (buttons, links, active state),
     --primary-dk its pressed/hover step, and --primary-deep the darker brand
     ink used for headline accents where a saturated button blue would shout. */
  /* The logo pin's own blues: #1A5DD4 (its deep stop) for anything carrying
     white text or read as a link, #62C2FF (its light stop) for highlights.
     The pin's middle stop, #2A7EF2, is 3.9:1 under white text, too low for
     buttons, so it only appears in dark mode where it sits on ink. */
  --primary:    #1A5DD4;
  --primary-2:  #62C2FF;
  --primary-dk: #154BB0;
  --primary-deep: #004AC6;
  /* Filled surfaces are a separate pair from --primary, which is the colour
     of text and icons. In dark mode --primary has to lighten to stay legible
     ON the background, but a filled button is the background, so lightening
     it there would put white text on a pale blue. These stay saturated. */
  --primary-fill:    #1A5DD4;
  --primary-fill-dk: #154BB0;
  --on-primary:      #FFFFFF;
  /* Tinted primary washes, so the ~40 hand-written rgba(26,93,212,.08) calls
     have one source of truth and a dark-mode counterpart. */
  --primary-soft:   #EFF6FF;
  --primary-soft-2: #DBEAFE;
  --accent:     #059669;
  --accent-2:   #10B981;
  --accent-dk:  #006C49;
  --accent-soft:#ECFDF5;
  --accent-fill:    #059669;
  --accent-fill-dk: #047857;
  --on-accent:      #FFFFFF;
  --border:     #E2E8F0;
  --border-2:   #CBD5E1;
  /* The near-black used by the landlord CTA band and other inverted panels. */
  --ink:        #0A0F1D;
  --shadow-xs:  0 1px 2px rgba(11,28,48,.05);
  --shadow-sm:  0 2px 8px rgba(11,28,48,.07), 0 1px 2px rgba(11,28,48,.04);
  --shadow-md:  0 8px 28px rgba(11,28,48,.11), 0 2px 4px rgba(11,28,48,.05);
  --shadow-lg:  0 20px 52px rgba(11,28,48,.14), 0 4px 8px rgba(11,28,48,.06);
  --r:    12px;
  --r-lg: 16px;
  --r-sm:  8px;
  --r-xs:  6px;

  /* Text ramp. --text-3 was referenced 87 times but never defined, so every
     tertiary label silently inherited its parent colour and the hierarchy went
     flat. These three are tuned to clear WCAG AA (4.5:1) on --surface. */
  --text-1:    #081525;   /* 18.1:1 — strongest, for headings */
  --text-3:    #5B6478;   /*  6.0:1 — tertiary labels, captions */

  /* Aliases that templates already reference. Kept as aliases rather than
     new values so there is still one source of truth per surface. */
  --card-bg:   var(--surface);
  --surface-1: var(--surface);

  /* Spacing scale (4px base). Replaces the ~90 hand-nudged rem values. */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;

  /* Motion. Built-in CSS easings are too weak to read as intentional; these
     are the stronger curves. Durations stay under 300ms for UI. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 140ms;
  --dur-fast:  180ms;
  --dur-base:  240ms;

  /* One focus ring for the whole product. */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);

  /* Featured / promoted placement. Warm is the right semantic here — it marks
     paid placement apart from organic results, which is what every ILS does —
     but it was three loose hex literals rather than a token. */
  --featured:   #F59E0B;
  --featured-2: #F97316;

  /* Line-art house used as a mask for the no-photo placeholder, so it takes
     its colour from the surrounding text and needs no separate dark asset. */
  --ph-house: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.2 12 3.5l9 6.7V20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3Cpath d='M9.2 21v-6.2h5.6V21'/%3E%3C/svg%3E");

  /* Height of the sticky header. The map panel sizes itself against it so a
     full-height map still clears the bar. Matches .navbar's 80px. */
  --topbar-h: 80px;
}

/* ── RESET / BASE ───────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  /* The translucent grey box iOS and Android paint over anything tappable.
     It is the loudest "this is a website" tell, and it fights the :active
     feedback defined below, which replaces it. */
  -webkit-tap-highlight-color: transparent;
  /* Stops Safari inflating body text when the phone is rotated. */
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── FOCUS ──────────────────────────────────────────────────────
   There was no focus system: zero :focus-visible rules in the whole
   stylesheet and eight bare `outline: none`, two of them on the homepage
   search inputs. Keyboard users had no way to see where they were.

   :focus-visible rather than :focus so the ring appears for keyboard and
   assistive navigation but never on a mouse click. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-xs);
  /* Above neighbouring cards so the ring is never clipped. */
  position: relative;
  z-index: 1;
}

/* ── TOUCH ──────────────────────────────────────────────────────
   Removes the legacy ~300ms tap delay and stops a long press from
   selecting a control's label or raising the iOS copy callout. Controls
   are chrome, not content; body copy stays selectable. */
:where(button, a, [role="button"], .button, .chip, .pill, .nav-tab, .sb-link) {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ── MOTION PREFERENCE ──────────────────────────────────────────
   There was no prefers-reduced-motion rule anywhere in styles.css, against
   143 transitions and several looping animations. Reduced motion means
   gentler, not none: colour and opacity still resolve so state changes stay
   legible, but nothing moves or scales. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Keep the properties that carry meaning rather than motion. */
  *, *::before, *::after { transition-property: opacity, color, background-color, border-color !important; }
}

body {
  font-family: var(--font-body);
  /* 16px is the readability floor for body copy, and 15px sat under it on an
     app people read listings on for long stretches. Safe to change here: the
     type scale is in rem, which resolves against the html root (untouched at
     16px), so this only moves text that was inheriting from body. */
  font-size: 16px;
  line-height: 1.65;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  /* Plus Jakarta Sans sets loose at display sizes. Negative tracking that
     scales with the size is what makes the headings read as one family
     rather than as a word-spaced banner. */
  letter-spacing: -0.02em;
}
h1 { font-size: 2rem;    letter-spacing: -0.03em; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.0625rem; letter-spacing: -0.015em; }

a { color: var(--primary); text-decoration: none; transition: color .15s; }
a:hover { color: var(--primary-dk); }
p { line-height: 1.65; }

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 1.5rem;
}

/* ── APP SHELL ──────────────────────────────────────────────────
   The 240px left sidebar is gone. Every destination it held now lives in the
   header's account menu, which is what all five reference screens do and what
   an ILS is expected to do: the full width belongs to the listings, not to a
   nav rail that repeated the top bar. */
.site-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid var(--border);
}
/* color-mix is recent enough that a flat fallback has to come first. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-topbar { background: var(--surface); }
}

.site-body { display: block; min-height: calc(100vh - 80px); }

/* ── MAIN CONTENT ─────────────────────────────────────────── */
.app-content {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  min-width: 0;
  padding: 1.75rem 2rem 3rem;
  /* `overflow-x: hidden` forces the computed overflow-y to `auto`, which turns
     this into a scroll container — and a scroll container is what `position:
     sticky` resolves against. That silently broke the results toolbar and the
     map panel, which stuck to a box that never scrolls. `clip` suppresses the
     same horizontal overflow without establishing a scroll box. */
  overflow-x: clip;
}
@media (max-width: 900px) {
  .app-content { padding: 1rem 1rem 2rem; }
}

/* ── HEADER BAR ─────────────────────────────────────────────────
   Was a floating glass pill with a gradient "crown" on its top edge. The
   reference screens use a plain sticky bar that reads as chrome and lets the
   content below carry the colour, so the pill, the blur card and the crown
   all come off. */
.navbar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 80px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
}
.navbar::before, .navbar::after { display: none; }

.nav-left { display: flex; align-items: center; gap: 1rem; min-width: 0; }

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  margin-left: -.2rem;
}

.brand-logo {
  height: 58px;
  width: auto;
  display: block;
  transform: translateY(-1px);
}

/* ── MARKET SELECTOR ──────────────────────────────────────── */
.nav-market { position: relative; flex-shrink: 0; }
.nav-market-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nav-market-btn > svg:first-child { color: var(--primary); flex-shrink: 0; }
.nav-market-caret { color: var(--muted); transition: transform var(--dur-fast) var(--ease-out); }
.nav-market-btn[aria-expanded="true"] .nav-market-caret { transform: rotate(180deg); }
@media (hover:hover) and (pointer:fine) {
  .nav-market-btn:hover { background: var(--surface-3); border-color: var(--border-2); }
}
/* The picker and the tabs share one row; below 1240px they collide, so the
   picker goes first (the hero and results pages still carry a city field). */
@media (max-width: 1240px) { .nav-market { display: none; } }

/* The dropdown keeps its old class names so the switcher JS is untouched. */
.sb-city-dropdown {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  min-width: 232px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  z-index: 300;
  padding: .5rem 0;
}

/* ── PRIMARY NAV ──────────────────────────────────────────── */
.nav-tabs {
  display: flex;
  align-items: center;
  gap: .15rem;
  margin-left: auto;
}
.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .8rem;
  border-radius: var(--r-sm);
  font-family: var(--font-head);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav-tab-ai { color: var(--primary); }
.nav-tab-ai svg { opacity: .9; }
@media (hover:hover) and (pointer:fine) {
  .nav-tab:hover { color: var(--primary); background: var(--primary-soft); }
}
.nav-tab.nav-tab-active {
  color: var(--primary);
  background: var(--primary-soft-2);
  font-weight: 700;
}
@media (max-width: 1020px) { .nav-tabs { display: none; } }

/* ── HEADER ACTIONS ───────────────────────────────────────── */
.nav-links {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: 1.25rem;
  flex-shrink: 0;
}
@media (max-width: 1020px) { .nav-links { margin-left: auto; } }

.nav-icon-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .nav-icon-btn:hover { background: var(--surface-2); color: var(--text); }
}

/* EN | ES switch. Two plain links, not a button: each one is the current
   page in that language, so it works without JS and crawlers can follow it. */
.nav-lang {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-2);
  flex-shrink: 0;
}
.nav-lang-opt {
  min-width: 34px;
  height: 28px;
  padding: 0 .55rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-2);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-lang-opt.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
@media (hover:hover) and (pointer:fine) {
  .nav-lang-opt:not(.is-active):hover { color: var(--text); }
}

.nav-links a.nav-signin {
  font-family: var(--font-head);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  padding: .5rem .75rem;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) { .nav-links a.nav-signin:hover { color: var(--primary); } }
@media (max-width: 640px) { .nav-signin { display: none; } }

.nav-links a.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1rem;
  border-radius: var(--r-sm);
  background: var(--primary-fill);
  color: var(--on-primary);
  font-family: var(--font-head);
  font-size: .9375rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(11,28,48,.08);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .nav-links a.nav-cta:hover { background: var(--primary-fill-dk); color: var(--on-primary); }
}
.nav-links a.nav-cta:active { transform: translateY(1px); }
.nav-cta svg { flex-shrink: 0; }
@media (max-width: 520px) { .nav-cta span, .nav-cta { font-size: .875rem; padding: .5rem .75rem; } }

/* ── ACCOUNT MENU ─────────────────────────────────────────── */
.nav-account { position: relative; }
.nav-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--primary-fill);
  color: var(--on-primary);
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .nav-avatar:hover { box-shadow: 0 0 0 3px var(--primary-soft-2); }
}

.nav-menu {
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;
  width: 264px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  padding: .4rem;
  z-index: 300;
}
.nav-menu[hidden] { display: none; }

.nav-menu-id {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .55rem .7rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .35rem;
}
.nav-menu-avatar {
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--primary-soft-2);
  color: var(--primary-dk);
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-menu-name {
  display: block;
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.nav-menu-role {
  display: block;
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.3;
}

.nav-menu-group { padding: .25rem 0; }
.nav-menu-group + .nav-menu-group { border-top: 1px solid var(--border); margin-top: .25rem; }
.nav-menu-label {
  display: block;
  padding: .45rem .55rem .25rem;
  font-family: var(--font-head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-menu a,
.nav-menu-signout {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .5rem .55rem;
  border: none;
  border-radius: var(--r-sm);
  background: none;
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .nav-menu a:hover, .nav-menu-signout:hover { background: var(--primary-soft); color: var(--primary); }
}
.nav-menu-signout { color: var(--text-2); }
.nav-menu-badge {
  margin-left: auto;
  min-width: 20px;
  padding: 0 .35rem;
  height: 20px;
  border-radius: 999px;
  background: var(--primary-fill);
  color: var(--on-primary);
  font-size: .6875rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .navbar { height: 66px; padding: 0 1rem; gap: .75rem; }
  .brand-logo { height: 46px; }
}

.primary-links, .nav-links { display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; }

.primary-links a:not(.button), .nav-links a:not(.button):not(.nav-cta):not(.nav-signin) {
  text-decoration: none;
  color: var(--text-2);
  font-weight: 600;
  font-size: .875rem;
  padding: .45rem .9rem;
  border-radius: var(--r-sm);
  transition: background .17s, color .17s;
  letter-spacing: .01em;
  position: relative;
}
.primary-links a:not(.button):hover, .nav-links a:not(.button):not(.nav-cta):not(.nav-signin):hover { background: rgba(26,93,212,.08); color: var(--primary); }
.primary-links a:not(.button).nav-active, .nav-links a:not(.button):not(.nav-cta):not(.nav-signin).nav-active {
  background: rgba(26,93,212,.1);
  color: var(--primary);
  font-weight: 700;
}
.nav-text-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-2);
  font-weight: 600;
  font-size: .875rem;
  font-family: inherit;
  padding: .45rem .9rem;
  border-radius: var(--r-sm);
  transition: background .17s, color .17s;
  letter-spacing: .01em;
}
.nav-text-btn:hover { background: rgba(26,93,212,.08); color: var(--primary); }

/* ── BUTTONS ────────────────────────────────────────────────── */
.button, button:not(.nav-text-btn):not(.fav-btn):not(.search-tag-remove):not(.save-pill):not(.tag-input-chip-remove):not(.img-preview-remove):not(.lightbox-close):not(.lightbox-prev):not(.lightbox-next):not(.thumb-nav):not(.lj-tile):not(.lj-collage-nav):not(.lj-collage-count):not(.lb-thumb):not(.quality-chip):not(.fmm-trigger):not(.fmm-opt):not(.fmm-cat-card):not(.fmm-choice-card):not(.fmm-prop-card):not(.fmm-skip-link):not(.fmm-next):not(.fmm-submit):not(.fmm-tag):not(.cl-unit-tab):not(.cl-amenity-btn):not(.sb-city-btn):not(.sb-city-locate):not(.nav-market-btn):not(.nav-icon-btn):not(.nav-avatar):not(.nav-menu-signout):not(.results-view-btn):not(.results-search-btn):not(.cl-draft-btn):not(.cl-publish-btn):not(.cl-step-btn):not(.ld-day):not(.ld-slot):not(.ld-quick-chip):not(.ld-cta):not(.bento-tile):not(.bento-action):not(.alerts-band-btn):not(.ld-icon-btn):not(.gs-btn):not(.ld-type):not(.cd-fp-tab):not(.cd-special-close):not(.ld-match-edit):not(.match-score-chip):not(.match-sheet-close) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: var(--primary-fill);
  color: var(--on-primary);
  border: none;
  border-radius: var(--r-sm);
  padding: .55rem 1.1rem;
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out);
  box-shadow: 0 1px 2px rgba(11,28,48,.08);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
/* Button shine sweep */
.button::after, button:not(.nav-text-btn):not(.fav-btn):not(.search-tag-remove):not(.save-pill):not(.tag-input-chip-remove):not(.img-preview-remove):not(.lightbox-close):not(.lightbox-prev):not(.lightbox-next):not(.thumb-nav):not(.lj-tile):not(.lj-collage-nav):not(.lj-collage-count):not(.lb-thumb):not(.quality-chip):not(.fmm-trigger):not(.fmm-opt):not(.fmm-cat-card):not(.fmm-choice-card):not(.fmm-prop-card):not(.fmm-skip-link):not(.fmm-next):not(.fmm-submit):not(.fmm-tag):not(.cl-unit-tab):not(.cl-amenity-btn):not(.sb-city-btn):not(.sb-city-locate):not(.nav-market-btn):not(.nav-icon-btn):not(.nav-avatar):not(.nav-menu-signout):not(.results-view-btn):not(.results-search-btn):not(.cl-draft-btn):not(.cl-publish-btn):not(.cl-step-btn):not(.ld-day):not(.ld-slot):not(.ld-quick-chip):not(.ld-cta):not(.bento-tile):not(.bento-action):not(.alerts-band-btn):not(.ld-icon-btn):not(.gs-btn):not(.ld-type):not(.cd-fp-tab):not(.cd-special-close):not(.ld-match-edit):not(.match-score-chip):not(.match-sheet-close)::after {
  /* The sweeping highlight went with the gradient it was lighting. */
  content: none;
}

.button:hover, button:not(.nav-text-btn):not(.fav-btn):not(.search-tag-remove):not(.save-pill):not(.tag-input-chip-remove):not(.img-preview-remove):not(.lightbox-close):not(.lightbox-prev):not(.lightbox-next):not(.thumb-nav):not(.lj-tile):not(.lj-collage-nav):not(.lj-collage-count):not(.lb-thumb):not(.quality-chip):not(.fmm-trigger):not(.fmm-opt):not(.fmm-cat-card):not(.fmm-choice-card):not(.fmm-prop-card):not(.fmm-skip-link):not(.fmm-next):not(.fmm-submit):not(.fmm-tag):not(.cl-unit-tab):not(.cl-amenity-btn):not(.sb-city-btn):not(.sb-city-locate):not(.nav-market-btn):not(.nav-icon-btn):not(.nav-avatar):not(.nav-menu-signout):not(.results-view-btn):not(.results-search-btn):not(.cl-draft-btn):not(.cl-publish-btn):not(.cl-step-btn):not(.ld-day):not(.ld-slot):not(.ld-quick-chip):not(.ld-cta):not(.bento-tile):not(.bento-action):not(.alerts-band-btn):not(.ld-icon-btn):not(.gs-btn):not(.ld-type):not(.cd-fp-tab):not(.cd-special-close):not(.ld-match-edit):not(.match-score-chip):not(.match-sheet-close):hover {
  background: var(--primary-fill-dk);
  box-shadow: 0 2px 6px rgba(11,28,48,.12);
}
.button:active, button:not(.nav-text-btn):not(.fav-btn):not(.search-tag-remove):not(.save-pill):not(.tag-input-chip-remove):not(.img-preview-remove):not(.lightbox-close):not(.lightbox-prev):not(.lightbox-next):not(.thumb-nav):not(.lj-tile):not(.lj-collage-nav):not(.lj-collage-count):not(.lb-thumb):not(.quality-chip):not(.fmm-trigger):not(.fmm-opt):not(.fmm-cat-card):not(.fmm-choice-card):not(.fmm-prop-card):not(.fmm-skip-link):not(.fmm-next):not(.fmm-submit):not(.fmm-tag):not(.cl-unit-tab):not(.cl-amenity-btn):not(.sb-city-btn):not(.sb-city-locate):not(.nav-market-btn):not(.nav-icon-btn):not(.nav-avatar):not(.nav-menu-signout):not(.results-view-btn):not(.results-search-btn):not(.cl-draft-btn):not(.cl-publish-btn):not(.cl-step-btn):not(.ld-day):not(.ld-slot):not(.ld-quick-chip):not(.ld-cta):not(.bento-tile):not(.bento-action):not(.alerts-band-btn):not(.ld-icon-btn):not(.gs-btn):not(.ld-type):not(.cd-fp-tab):not(.cd-special-close):not(.ld-match-edit):not(.match-score-chip):not(.match-sheet-close):active { transform: none; box-shadow: 0 2px 8px rgba(26,93,212,.2); }

/* ── PRESS FEEDBACK & HOVER GATING ──────────────────────────────
   Touch devices have no hover, so the browser fakes one: the first tap
   applies :hover and leaves it stuck until the user taps elsewhere. The
   button lift above (translateY(-1px) plus a deeper shadow) therefore stayed
   applied after every tap on a phone. Undo it where hover is not real. */
@media (hover: none) {
  .button:hover,
  .sb-link:hover,
  .nav-tab:hover,
  .listing-card:hover,
  .testimonial-v2:hover,
  .home-city-pill:hover,
  .card:hover,
  .fmm-cta-btn:hover,
  .hero-ghost-btn:hover {
    transform: none;
  }
}

/* Native controls respond the instant a finger lands; a web button that only
   reacts on click responds when the finger leaves, which reads as lag even at
   0ms. 140ms ease-out, and a 0.97 scale subtle enough to feel like pressure
   rather than a bounce. */
.button:active,
.hero-search-btn:active,
.home-quick-search-btn:active,
.nav-tab:active,
.quality-chip:active {
  transform: scale(.97);
  transition-duration: var(--dur-press);
}

.button.secondary {
  background: transparent;
  color: var(--text-2);
  border: 1.5px solid var(--border);
  box-shadow: none;
}
.button.secondary::after { display: none; }
.button.secondary:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}

/* Green accent button */
.button.accent {
  background: linear-gradient(135deg, #2E9B3E, var(--accent), var(--accent-2));
  box-shadow: 0 2px 10px rgba(61,181,73,.3);
}
.button.accent:hover { box-shadow: 0 6px 22px rgba(61,181,73,.4); }

/* ── CARDS ──────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.35rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .22s, transform .2s, border-color .2s;
  position: relative;
  overflow: hidden;
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--border-2);
}
/* Card hover shine sweep */
.card:not(.hero)::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  transform: skewX(-20deg);
  transition: left .7s ease;
  pointer-events: none;
}
.card:not(.hero):hover::after { left: 160%; }

/* ── HERO — Animated Gradient ───────────────────────────────── */
@keyframes gradientFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero {
  padding: 4rem 3.5rem 3.25rem;
  min-height: 370px;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, var(--text) 0%, var(--primary-dk) 60%, #1e6fd4 100%);
  border: none;
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: 0 8px 32px rgba(11,28,48,.22), 0 2px 6px rgba(11,28,48,.12);
}

/* Decorative circles */
.hero::before {
  content: '';
  position: absolute;
  top: -40px; right: 120px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -60px; right: 20px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  pointer-events: none;
}
.hero:hover { transform: none; box-shadow: 0 8px 32px rgba(11,28,48,.22); }
.app-content > .hero:first-child {
  margin-top: -1.5rem;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-18px); }
}

.hero h1 {
  font-size: 1.9rem;
  font-weight: 800;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  background: none;
  margin-bottom: .4rem;
}

/* ── STAT CARDS ─────────────────────────────────────────────── */
.stat-card {
  border-top: 3px solid var(--primary);
  text-align: center;
  padding: 1.1rem;
}
.stat-card:nth-child(2) { border-top-color: var(--accent); }
.stat-card:nth-child(3) { border-top-color: var(--primary-2); }
.stat-card .muted { font-size: .82rem; margin-top: .2rem; }

/* ── GRID ───────────────────────────────────────────────────── */
.grid { display: grid; gap: 1rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid-listings { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ── KPI ────────────────────────────────────────────────────── */
.kpi {
  font-size: 1.9rem;
  font-weight: 800;
  font-family: var(--font-head);
  background: linear-gradient(135deg, var(--primary-dk), var(--primary-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.15;
}

/* ── LISTING CARDS ──────────────────────────────────────────── */
.listing-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; border-radius: var(--r); }
.listing-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

/* Featured listing — golden glow */
.listing-featured {
  border-color: rgba(245,158,11,.45);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(245,158,11,.2);
}
.listing-featured:hover {
  border-color: rgba(245,158,11,.65);
  box-shadow: var(--shadow-lg), 0 0 24px rgba(245,158,11,.2);
}

.listing-thumb-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 28px 28px 0 0;
}

/* ── Slide track ── */
.listing-thumb-track {
  display: flex;
  width: 100%;
  height: 210px;
  transition: transform .38s cubic-bezier(.25,.8,.25,1);
  will-change: transform;
}

.listing-thumb {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 0;
  border: none;
  display: block;
  flex: 0 0 100%;
  transition: transform .45s cubic-bezier(.25,.8,.25,1);
  background: linear-gradient(145deg,
    rgba(26,93,212,.12) 0%,
    rgba(98,194,255,.09) 50%,
    rgba(61,181,73,.08) 100%);
}
.listing-card:hover .listing-thumb { transform: scale(1.06); }

/* ── Prev / Next arrows ── */
.thumb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #222;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 1px 6px rgba(0,0,0,.18);
  transition: background .15s, transform .15s;
  /* always visible when present */
  opacity: 1;
}
.thumb-nav:hover {
  background: rgba(255,255,255,1);
  transform: translateY(-50%) scale(1.08);
}
.thumb-nav:active { transform: translateY(-50%) scale(.95); }
.thumb-nav-prev { left: 8px; }
.thumb-nav-next { right: 8px; }

/* ── Dot indicators ── */
.thumb-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 4;
  opacity: 0;
  transition: opacity .2s;
}
.listing-card:hover .thumb-dots { opacity: 1; }
.thumb-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  transition: background .2s, transform .2s;
}
.thumb-dot.active {
  background: #fff;
  transform: scale(1.35);
}

/* No-photo state. This was a 3rem emoji (a key or a house) on a blue-green
   gradient. Photos are the product on a listing site, so the fallback has two
   jobs: say plainly that a photo is missing, and stay quiet enough that
   listings which do have photos win the eye. A bright emoji did the opposite,
   and emoji-as-imagery is one of the clearest generated-UI tells. */
.listing-thumb-placeholder {
  width: 100%;
  height: 210px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  color: var(--text-3);
  font-size: .75rem;
  font-weight: 500;
  /* Overrides the emoji left in any template not yet migrated. */
  text-indent: -9999px;
  overflow: hidden;
}
.listing-thumb-placeholder::before {
  content: '';
  width: 30px;
  height: 30px;
  opacity: .5;
  background: currentColor;
  /* Line-art house, masked so it inherits the text colour in both themes. */
  -webkit-mask: var(--ph-house) center / contain no-repeat;
  mask: var(--ph-house) center / contain no-repeat;
}
.listing-thumb-placeholder::after {
  content: 'No photo yet';
  text-indent: 0;
  float: left;
}

/* Badges — both top */
.featured-badge {
  position: absolute;
  top: .75rem; right: .75rem;
  background: linear-gradient(135deg, var(--featured), var(--featured-2));
  color: #fff;
  padding: .28rem .75rem;
  border-radius: 999px;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .03em;
  box-shadow: 0 2px 8px rgba(249,115,22,.4);
}
.inline-featured-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  background: linear-gradient(135deg, var(--featured), var(--featured-2));
  color: #fff; padding: .22rem .65rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  box-shadow: 0 2px 8px rgba(249,115,22,.4); vertical-align: middle;
}
.new-badge {
  position: absolute;
  top: .75rem; left: .75rem;
  background: var(--primary);
  color: #fff;
  padding: .28rem .7rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  box-shadow: 0 2px 8px rgba(26,93,212,.4);
}
.category-badge {
  position: absolute;
  top: .75rem; left: .75rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  padding: .28rem .75rem;
  border-radius: 999px;
  font-size: .73rem;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 2px 6px rgba(11,28,48,.12);
}
/* When both New + category badge exist, offset New badge */
.new-badge + .category-badge { display: none; }

/* Card body */
.listing-body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; }

/* Title row — title left, save pill right */
.card-title-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  margin-bottom: .3rem;
}
.card-title-row h3 { font-size: 1.05rem; font-weight: 800; font-family: var(--font-head); line-height: 1.3; flex: 1; }
.card-title-row h3 a { color: var(--text); text-decoration: none; }
.card-title-row h3 a:hover { color: var(--primary); }

/* Save pill button */
.save-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1.5px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-2);
  padding: .28rem .7rem; font-size: .78rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: all .17s; line-height: 1;
}
.save-pill:hover { border-color: #ef4444; color: #ef4444; background: #fff5f5; }
.save-pill.save-pill-active { border-color: #ef4444; color: #ef4444; background: #fee2e2; }

/* Desktop: hide the thumb-wrap overlay pill, show only the card-title-row one */
.listing-thumb-wrap .save-pill { display: none; }

/* Location + time row */
.card-location-time {
  font-size: .8rem; color: var(--muted); font-weight: 500; margin-bottom: .65rem;
}

/* Price */
.listing-body .price {
  font-size: 1.85rem;
  font-weight: 800;
  font-family: var(--font-head);
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: .85rem;
}
.price-unit {
  font-size: 1rem; font-weight: 600; letter-spacing: 0;
  opacity: .55; -webkit-text-fill-color: var(--muted);
  background: none;
}

/* Action buttons row */
.card-actions { display: flex; gap: .65rem; margin-top: auto; }
.card-btn-primary {
  flex: 1; background: var(--text); color: #fff;
  border: none; border-radius: 14px; padding: .65rem 1rem;
  font-size: .85rem; font-weight: 700; font-family: inherit;
  cursor: pointer; text-align: center; text-decoration: none;
  transition: background .17s, transform .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.card-btn-primary:hover { background: var(--primary-dk); color: #fff; transform: none; }
.card-btn-secondary {
  flex: 1; border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text-2); border-radius: 14px; padding: .65rem 1rem;
  font-size: .85rem; font-weight: 700; font-family: inherit;
  cursor: pointer; text-decoration: none;
  transition: border-color .17s, color .17s;
  display: inline-flex; align-items: center; justify-content: center;
}
.card-btn-secondary:hover { border-color: var(--primary); color: var(--primary); }

.listing-desc {
  font-size: .82rem; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.5;
}

/* ── SCROLL REVEAL ──────────────────────────────────────────── */
.js-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .38s ease, transform .38s cubic-bezier(.25,.8,.25,1);
}
.js-reveal.visible { opacity: 1; transform: translateY(0); }

/* ── MISC ───────────────────────────────────────────────────── */
.muted { color: var(--muted); }

.chips { display: flex; gap: .5rem; flex-wrap: wrap; }

.chip {
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  border-radius: 999px;
  padding: .3rem .9rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  transition: all .17s;
  letter-spacing: .02em;
  cursor: pointer;
}
.chip:hover, .chip.chip-active {
  background: rgba(26,93,212,.1);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(26,93,212,.14);
  transform: translateY(-1px);
}

/* Category chip colours */
.chip[data-cat="roommates"]     { --cc: #6366F1; }
.chip[data-cat="rentals"]       { --cc: #059669; }
.chip[data-cat="local_services"]{ --cc: #D97706; }
.chip[data-cat="jobs"]          { --cc: var(--primary); }
.chip[data-cat="buy_sell"]      { --cc: #DB2777; }
.chip[data-cat="events"]        { --cc: #7C3AED; }

.chip[data-cat]:hover, .chip[data-cat].chip-active {
  background: color-mix(in srgb, var(--cc) 12%, transparent);
  border-color: var(--cc);
  color: var(--cc);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--cc) 25%, transparent);
}

.filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: .6rem;
  margin-top: 0;
}

/* ── FORMS ──────────────────────────────────────────────────── */
/* Checkboxes, radios and the button-like input types are excluded: the
   `width: 100%` below is meant for text fields, and on a checkbox it stretches
   the box to the width of its container. A visually-hidden absolutely
   positioned one then stretched the document itself — that is what was giving
   the post-listing page 400px of horizontal overflow. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="color"]),
select, textarea {
  width: 100%;
  padding: .65rem .9rem;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .88rem;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow   var(--dur-fast) var(--ease-out),
              background   var(--dur-fast) var(--ease-out);
}
/* iOS Safari zooms the page whenever focus lands on an input under 16px, and
   it does not zoom back out on blur: the user is left on a cropped, drifted
   layout. .88rem is 14.08px, so every field on the site did this. Raising it
   only for coarse pointers keeps the tighter desktop scale, and fixes the
   cause rather than reaching for user-scalable=no. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26,93,212,.11);
  background: var(--surface);
}
/* Keyboard focus gets the full ring on top of the field's own treatment. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  box-shadow: var(--focus-ring);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
form p { margin-bottom: 1rem; }
form p label {
  display: block;
  font-weight: 600;
  font-size: .85rem;
  color: var(--text-2);
  margin-bottom: .35rem;
  letter-spacing: .01em;
}

/* ── PRICE ──────────────────────────────────────────────────── */
.price {
  font-size: 1.45rem;
  font-weight: 800;
  font-family: var(--font-head);
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--primary-dk), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }

/* ── FLASH MESSAGES ─────────────────────────────────────────── */
.messages { list-style: none; padding: 0; margin-bottom: 1rem; }
.messages li {
  background: linear-gradient(135deg, #EBF3FF, #F2F8FF);
  color: #1A58C8;
  padding: .75rem 1rem;
  border-radius: var(--r-sm);
  margin: .5rem 0;
  border: 1.5px solid #C2D9FF;
  font-weight: 500;
  font-size: .875rem;
}

/* ── FOOTER ─────────────────────────────────────────────────── */
footer {
  text-align: center;
  padding: 1.5rem 0 .75rem;
  font-size: .78rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  margin-top: 2.5rem;
}

/* ── BACK TO TOP ────────────────────────────────────────────── */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, var(--primary-dk), var(--primary)) !important;
  border: none;
  box-shadow: 0 4px 16px rgba(26,93,212,.45);
  opacity: 0;
  transform: translateY(12px) scale(.85);
  transition: opacity .3s, transform .3s, box-shadow .2s;
  pointer-events: none;
  z-index: 9999;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}
#back-to-top:hover { box-shadow: 0 6px 24px rgba(26,93,212,.55); transform: translateY(-1px) scale(1); }
#back-to-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ── FIND MY MATCH WIZARD ───────────────────────────────────── */
.fmm-wizard {
  margin-top: 1.5rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 1.5rem 1.75rem 1.25rem;
  box-shadow: 0 4px 24px rgba(26,93,212,.07);
}

.fmm-wizard-q {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 1rem;
}

/* ── Category cards (step 1) ── */
.fmm-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .6rem;
  margin-bottom: .5rem;
}
.fmm-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .85rem .5rem;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.fmm-cat-card:hover {
  border-color: var(--primary);
  background: rgba(26,93,212,.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(26,93,212,.12);
}
.fmm-cat-card.selected {
  border-color: var(--primary);
  background: rgba(26,93,212,.1);
  box-shadow: 0 0 0 3px rgba(26,93,212,.18);
}
/* Two-column large card variant for Rent/Buy step */
.fmm-cat-grid-2 {
  grid-template-columns: 1fr 1fr;
  max-width: 480px;
  gap: .85rem;
}
.fmm-cat-grid-2 .fmm-cat-card {
  padding: 1.4rem 1rem 1.1rem;
  border-radius: var(--r);
}
.fmm-cat-grid-2 .fmm-cat-icon { font-size: 2.2rem; }
.fmm-cat-grid-2 .fmm-cat-label { font-size: .92rem; font-weight: 800; margin-top: .1rem; }

.fmm-cat-icon  { font-size: 1.6rem; line-height: 1; }
.fmm-cat-label { font-size: .75rem; font-weight: 700; color: var(--text-2); text-align: center; }
.fmm-cat-sublabel { font-size: .72rem; font-weight: 400; color: var(--muted); text-align: center; line-height: 1.35; }
.fmm-cat-card.selected .fmm-cat-label    { color: var(--primary); }
.fmm-cat-card.selected .fmm-cat-sublabel { color: var(--primary-dk); opacity: .8; }

/* ── Room vs whole place cards (step 2) ── */
.fmm-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: .75rem;
  max-width: 480px;
}
.fmm-choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  padding: 1.2rem 1rem 1rem;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border-2);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
  text-align: center;
}
.fmm-choice-card:hover {
  border-color: var(--primary);
  background: rgba(26,93,212,.04);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(26,93,212,.12);
}
.fmm-choice-card.selected {
  border-color: var(--primary);
  background: rgba(26,93,212,.1);
  box-shadow: 0 0 0 3px rgba(26,93,212,.15);
}
.fmm-choice-icon  { font-size: 2rem; line-height: 1; }
.fmm-choice-title { font-size: .9rem; font-weight: 700; color: var(--text); }
.fmm-choice-desc  { font-size: .75rem; color: var(--muted); font-weight: 400; line-height: 1.4; }
.fmm-choice-card.selected .fmm-choice-title { color: var(--primary); }

/* ── Property type cards (step 3) ── */
.fmm-prop-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
}
.fmm-prop-card {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  border: 1.5px solid var(--border-2);
  background: var(--surface);
  color: var(--text-2);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.fmm-prop-card:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(26,93,212,.05);
}
.fmm-prop-card.selected {
  border-color: var(--primary);
  background: rgba(26,93,212,.12);
  color: var(--primary);
  box-shadow: 0 0 0 2px rgba(26,93,212,.18);
}
.fmm-prop-any {
  border-style: dashed;
  color: var(--muted);
}
.fmm-prop-any:hover { border-style: solid; }

/* ── Skip link (steps 2 & 3) ── */
.fmm-skip-link {
  background: none;
  border: none;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  padding: .25rem 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color .15s, text-decoration-color .15s;
  display: block;
  margin-top: .25rem;
}
.fmm-skip-link:hover { color: var(--primary); text-decoration-color: var(--primary); }

/* ── Text / number inputs ── */
.fmm-input {
  padding: .6rem .85rem;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border-2);
  background: var(--surface);
  color: var(--text);
  font-size: .95rem;
  font-family: inherit;
  width: 100%;
  max-width: 340px;
  margin-bottom: .75rem;
  display: block;
}
.fmm-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,93,212,.12); }

.fmm-budget-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .25rem;
}
.fmm-budget-symbol { font-size: 1.15rem; font-weight: 800; color: var(--text); }
.fmm-budget-row .fmm-input { margin-bottom: 0; flex: 1; max-width: 260px; }

/* ── Next / Submit buttons ── */
.fmm-next, .fmm-submit {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  padding: .55rem 1.4rem;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: .75rem;
  transition: opacity .15s, transform .15s;
}
.fmm-next:hover, .fmm-submit:hover { opacity: .9; transform: translateY(-1px); }
.fmm-submit {
  background: linear-gradient(135deg, var(--primary-dk), var(--primary));
  padding: .65rem 1.75rem;
  font-size: .95rem;
  box-shadow: 0 4px 16px rgba(26,93,212,.3);
}

/* ── Must-have tags ── */
.fmm-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: .5rem;
}
.fmm-tag {
  padding: .32rem .8rem;
  border-radius: 999px;
  border: 1.5px solid var(--border-2);
  background: var(--surface);
  color: var(--text-2);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.fmm-tag:hover { border-color: var(--primary); color: var(--primary); background: rgba(26,93,212,.05); }
.fmm-tag.selected { border-color: var(--primary); background: rgba(26,93,212,.1); color: var(--primary); }

/* ── Step progress bar ── */
.fmm-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.fmm-prog-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  flex-shrink: 0;
}
.fmm-prog-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 800;
  background: var(--border);
  color: var(--muted);
  transition: background .2s, color .2s;
}
.fmm-prog-lbl {
  font-size: .65rem;
  font-weight: 600;
  color: var(--muted);
  transition: color .2s;
}
.fmm-prog-step.active .fmm-prog-num   { background: var(--primary); color: #fff; }
.fmm-prog-step.active .fmm-prog-lbl   { color: var(--primary); }
.fmm-prog-step.completed .fmm-prog-num { background: rgba(61,181,73,.15); color: var(--accent); }
.fmm-prog-step.completed .fmm-prog-lbl { color: var(--accent); }
.fmm-prog-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 .35rem;
  margin-bottom: 1rem; /* align with circle center */
}

/* ── Match explanation sentence ── */
.match-explanation {
  font-size: .8rem;
  color: var(--text-2);
  font-style: italic;
  margin: .4rem 0 .35rem;
  line-height: 1.5;
  padding-left: .5rem;
  border-left: 2px solid rgba(26,93,212,.3);
}

/* ── FMM active banner (search summary above results) ── */
.fmm-active-banner {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: linear-gradient(135deg, rgba(26,93,212,.06), rgba(61,181,73,.05));
  border: 1.5px solid rgba(26,93,212,.2);
  border-radius: 14px;
  padding: .75rem 1.1rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}
.fmm-active-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  flex: 1;
}
.fmm-active-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: .25rem;
}
.fmm-active-chip {
  display: inline-flex;
  align-items: center;
  padding: .28rem .7rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-2);
}
.fmm-active-chip-tag {
  background: rgba(26,93,212,.09);
  border-color: rgba(26,93,212,.25);
  color: var(--primary);
}

/* ── FMM market context strip ── */
.fmm-market-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 2rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: .9rem 1.25rem;
  margin-bottom: 1.25rem;
}
.fmm-market-stat {
  display: flex;
  flex-direction: column;
  gap: .05rem;
}
.fmm-market-num {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  font-family: var(--font-head);
}
.fmm-market-lbl {
  font-size: .72rem;
  color: var(--muted);
  font-weight: 500;
}
.fmm-market-insight {
  flex: 1;
  min-width: 220px;
  font-size: .82rem;
  font-weight: 600;
  padding: .45rem .9rem;
  border-radius: 10px;
}
.fmm-insight-good { background: #ecfdf3; color: #047857; }
.fmm-insight-ok   { background: rgba(26,93,212,.07); color: var(--primary); }
.fmm-insight-warn { background: #fff7ed; color: #b45309; }

/* ── Near matches section ── */
.fmm-near-matches { margin-top: 2rem; }
.fmm-near-header  { margin-bottom: 1rem; }
.fmm-near-title   { font-size: 1.1rem; font-weight: 700; margin: 0 0 .25rem; }
.fmm-near-sub     { font-size: .82rem; margin: 0; }

/* ── Match score badge on listing card ── */
.match-score-badge {
  display: inline-flex;
  align-items: center;
  padding: .3rem .75rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}
.match-score-high { background: #ecfdf3; color: #047857; }
.match-score-mid  { background: #fff7ed; color: #b45309; }
.match-score-low  { background: var(--surface-2); color: var(--muted); }

/* Offered in place of a score when we know nothing about the visitor yet:
   opens the match-score sheet rather than showing a made-up number. */
.match-score-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px dashed var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
.match-score-chip:hover { background: var(--primary-soft-2); }
.match-score-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Match reason pills ── */
.match-reason-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .45rem;
  margin-bottom: .1rem;
}
.match-reason-pill {
  padding: .2rem .6rem;
  border-radius: 999px;
  background: rgba(26,93,212,.08);
  border: 1px solid rgba(26,93,212,.15);
  color: var(--primary);
  font-size: .72rem;
  font-weight: 600;
}

/* ── Card availability + income hints ── */
.card-avail {
  font-size: .7rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: .1rem;
}
.card-income-hint {
  font-size: .68rem;
  color: var(--muted);
  margin-bottom: .2rem;
}

/* ── QUALITY FILTER CHIPS ───────────────────────────────────── */
.quality-chips-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-top: .75rem;
}
.quality-chip {
  padding: .25rem .7rem;
  border-radius: 999px;
  border: 1.5px solid var(--border-2);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.quality-chip:hover { border-color: var(--primary); color: var(--primary); }
.quality-chip-active {
  border-color: var(--primary);
  background: rgba(26,93,212,.1);
  color: var(--primary);
}

/* ── TAG SEARCH INPUT ───────────────────────────────────────── */
.tag-search-wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-sm); padding: .35rem .65rem;
  cursor: text; flex: 1; min-width: 220px;
}
.tag-search-wrap:focus-within { border-color: var(--primary); outline: 2px solid rgba(26,93,212,.15); }
.search-tag-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  background: var(--primary); color: #fff;
  padding: .18rem .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600;
}
.search-tag-remove {
  background: none; border: none; color: rgba(255,255,255,.8);
  cursor: pointer; font-size: .85rem; padding: 0; line-height: 1;
}
.search-tag-remove:hover { color: #fff; }

/* ── TAG INPUT (create/edit listing) ───────────────────────── */
.tag-input-wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .35rem; padding: .45rem .65rem;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); cursor: text; min-height: 42px;
  transition: border-color .17s, outline .17s;
}
.tag-input-wrap:focus-within { border-color: var(--primary); outline: 2px solid rgba(26,93,212,.15); }
.tag-input-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(26,93,212,.1); color: var(--primary-dk);
  border: 1px solid rgba(26,93,212,.25); border-radius: 999px;
  padding: .18rem .55rem; font-size: .75rem; font-weight: 600;
  white-space: nowrap;
}
.tag-input-chip-remove {
  background: none; border: none; cursor: pointer;
  color: var(--primary-dk); font-size: .8rem; padding: 0;
  line-height: 1; opacity: .7; display: flex; align-items: center;
}
.tag-input-chip-remove:hover { opacity: 1; }
.tag-input-field {
  border: none; outline: none; background: transparent;
  font: inherit; font-size: .875rem; color: var(--text);
  flex: 1; min-width: 120px; padding: .1rem 0;
}
.tag-input-hint {
  font-size: .78rem; color: var(--muted); margin-top: .35rem;
}

/* ── MULTI-IMAGE UPLOAD ─────────────────────────────────────── */
.img-upload-zone {
  border: 2px dashed var(--border-2); border-radius: var(--r-sm);
  padding: 1.5rem 1rem; text-align: center; cursor: pointer;
  transition: border-color .17s, background .17s; background: var(--surface-2);
  position: relative;
}
.img-upload-zone:hover, .img-upload-zone.drag-over {
  border-color: var(--primary); background: rgba(26,93,212,.04);
}
.img-upload-zone input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.img-upload-icon { font-size: 2rem; margin-bottom: .4rem; }
.img-upload-label { font-size: .88rem; font-weight: 600; color: var(--text-2); }
.img-upload-hint  { font-size: .75rem; color: var(--muted); margin-top: .25rem; }
.img-upload-count { font-size: .78rem; font-weight: 700; color: var(--primary); margin-top: .4rem; }
.img-upload-count.at-limit { color: #ef4444; }

.img-preview-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: .6rem; margin-top: .75rem;
}
.img-preview-item {
  position: relative; border-radius: 10px; overflow: hidden;
  aspect-ratio: 1; background: var(--surface-2);
  border: 1.5px solid var(--border);
}
.img-preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-preview-remove {
  position: absolute; top: .3rem; right: .3rem; z-index: 10;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.72); color: #fff;
  border: 2px solid rgba(255,255,255,.6);
  cursor: pointer; font-size: .78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; padding: 0; box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: background .15s, transform .12s;
}
.img-preview-remove:hover { background: #ef4444; transform: scale(1.15); border-color: #fff; }
.img-preview-error { border-color: #ef4444; }
.img-preview-error-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(239,68,68,.85); color: #fff;
  font-size: .62rem; font-weight: 700; text-align: center; padding: .15rem;
}
.img-upload-errors { margin-top: .5rem; }
.img-upload-errors p {
  color: #ef4444; font-size: .82rem; font-weight: 600; margin: .2rem 0;
}

/* Existing images (edit page) */
.existing-images-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: .6rem; margin-bottom: .75rem;
}
.existing-img-item {
  position: relative; border-radius: 10px; overflow: hidden;
  aspect-ratio: 1; border: 1.5px solid var(--border);
}
.existing-img-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.existing-img-item input[type="checkbox"] { display: none; }
.existing-img-delete {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(239,68,68,0); cursor: pointer; transition: background .17s;
}
.existing-img-delete:hover { background: rgba(239,68,68,.65); }
.existing-img-delete:hover::after { content: '🗑'; font-size: 1.4rem; }
.existing-img-item.marked-delete { opacity: .45; }
.existing-img-item.marked-delete .existing-img-delete { background: rgba(239,68,68,.55); }
.existing-img-item.marked-delete .existing-img-delete::after { content: '🗑'; font-size: 1.4rem; }

/* ── LISTING GALLERY (detail page) ─────────────────────────── */
/* Collage: pages of a 4x2 mosaic that the arrows slide through. A tile's span
   comes from how many photos are on its page — see Listing.COLLAGE_SPANS — so
   every page covers all eight cells, including a short last one. Clicking any
   tile opens the full-screen viewer on that photo. */
.lj-collage {
  position: relative;
  height: 420px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
}
.lj-collage-track {
  display: flex;
  height: 100%;
  transition: transform .35s ease;
}
.lj-collage-page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 6px;
  height: 100%;
}
.lj-tile {
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 4px;
  overflow: hidden;
  min-width: 0;
  display: block;
  cursor: zoom-in;
  background: var(--surface-2);
}
.lj-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease, opacity .2s;
}
.lj-tile:hover img { transform: scale(1.04); opacity: .93; }

.lj-collage-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: #1f2937;
  font-size: 1.6rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: .88;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  transition: opacity .15s;
}
.lj-collage-nav:hover { opacity: 1; }
.lj-collage-nav.prev { left: .6rem; }
.lj-collage-nav.next { right: .6rem; }

/* Photo count — the shortcut into the viewer for anyone who does not want to
   pick a specific photo first. */
.lj-collage-count {
  position: absolute;
  bottom: .75rem; left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: var(--text);
  border: none; border-radius: 999px;
  padding: .45rem 1.15rem;
  font-size: .85rem; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.22);
}
.lj-collage-count:hover { background: var(--surface-2); }

/* Lightbox */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.92); flex-direction: column;
}
.lightbox.open { display: flex; }
.lb-stage {
  position: relative; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 4.5rem 1rem;
}
.lb-stage img { max-width: 100%; max-height: 100%; border-radius: 10px; object-fit: contain; }

/* Filmstrip — same role as the thumbnail rail the collage replaced: it shows
   where you are in the gallery and lets you jump instead of stepping. */
.lb-filmstrip { flex-shrink: 0; padding: .5rem .9rem 1rem; background: rgba(0,0,0,.55); }
.lb-counter { color: #fff; font-size: .8rem; font-weight: 700; opacity: .9; text-align: right; margin: 0 .2rem .4rem; }
.lb-thumbs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.lb-thumbs::-webkit-scrollbar { display: none; }
.lb-thumb {
  flex: 0 0 auto; width: 104px; height: 72px;
  padding: 0; background: none; cursor: pointer;
  border: 2.5px solid transparent; border-radius: 6px;
  overflow: hidden; opacity: .6;
  transition: opacity .15s, border-color .15s;
}
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-thumb:hover { opacity: 1; }
.lb-thumb.active { border-color: var(--primary); opacity: 1; }
.lightbox-close {
  position: absolute; top: 1rem; right: 1.25rem;
  color: #fff; font-size: 2rem; cursor: pointer; background: none;
  border: none; line-height: 1; opacity: .8;
  /* Above .lb-stage: the stage is positioned and comes later in the DOM, so
     without this it paints over the close button and swallows the click. */
  z-index: 2;
  width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-prev, .lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: #fff; font-size: 2rem; background: rgba(255,255,255,.15);
  border: none; cursor: pointer; border-radius: 50%; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center; opacity: .8;
}
.lightbox-prev:hover, .lightbox-next:hover { opacity: 1; background: rgba(255,255,255,.25); }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

/* ── TAGS ───────────────────────────────────────────────────── */
.listing-tags { display: flex; flex-wrap: wrap; gap: .28rem; margin-top: .45rem; margin-bottom: .6rem; }
.tag-chip {
  display: inline-block;
  padding: .13rem .45rem;
  border-radius: 20px;
  font-size: .67rem;
  font-weight: 600;
  background: rgba(26,93,212,.08);
  color: var(--primary-dk);
  border: 1px solid rgba(26,93,212,.2);
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
  letter-spacing: .01em;
}
.tag-chip:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.tag-chip-active { background: var(--primary); color: #fff !important; border-color: var(--primary); }

/* ── LIVE CHAT PANEL ────────────────────────────────────────── */
.live-chat-panel[hidden] { display: none !important; }
.live-chat-panel {
  position: fixed;
  right: 1.25rem; bottom: 1.25rem;
  width: min(380px, calc(100vw - 2rem));
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
}

.live-chat-header {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding-bottom: .65rem; border-bottom: 1px solid var(--border);
}
.live-chat-messages {
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: .75rem;
  min-height: 200px; max-height: 360px;
  overflow-y: auto;
  background: var(--surface-2);
  display: flex; flex-direction: column; gap: .4rem;
}
.live-chat-bubble { display: flex; flex-direction: column; max-width: 80%; }
.live-chat-bubble.mine  { align-self: flex-end;  align-items: flex-end; }
.live-chat-bubble.other { align-self: flex-start; align-items: flex-start; }
.live-chat-bubble .bubble-text {
  padding: .45rem .72rem; border-radius: 12px;
  font-size: .875rem; line-height: 1.4; word-break: break-word;
}
.live-chat-bubble.mine .bubble-text {
  background: linear-gradient(135deg, var(--primary-dk), var(--primary));
  color: #fff; border-radius: 12px 12px 4px 12px;
}
.live-chat-bubble.other .bubble-text {
  background: var(--bg); border: 1.5px solid var(--border);
  color: var(--text); border-radius: 12px 12px 12px 4px;
}
.live-chat-bubble .bubble-time { font-size: .7rem; color: var(--muted); margin-top: .15rem; padding: 0 .15rem; }
.live-chat-form { display: grid; gap: .5rem; }

/* ── HERO HEADLINE ──────────────────────────────────────────── */
.hero-headline {
  font-size: 2.75rem;
  line-height: 1.15;
  font-weight: 800;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  background: none;
  margin: .5rem 0 1rem;
  letter-spacing: -.03em;
}
.hero-sub {
  font-size: 1.1rem;
  color: rgba(255,255,255,.8);
  -webkit-text-fill-color: rgba(255,255,255,.8);
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 560px;
}

/* ── HERO INLINE STATS ──────────────────────────────────────── */
/* Hero CTAs */
.hero-ctas { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-bottom: 0; }
/* The primary hero CTA was the same orange as the Featured badge. That made
   orange mean two unrelated things, and put a third brand colour next to a
   blue-and-green logo. Brand green keeps the contrast that made orange
   attractive against the blue hero, stays in the palette, and matches the
   "Go" in the wordmark. Worth an A/B before taking as final: this is a
   conversion surface, and the old colour may have been chosen for pop. */
.fmm-cta-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-size: 1rem; font-weight: 700;
  padding: .85rem 1.9rem; border-radius: 12px;
  text-decoration: none; border: none; cursor: pointer;
  box-shadow: 0 4px 20px rgba(5,150,105,.42);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .fmm-cta-btn:hover { opacity: .93; transform: translateY(-1px); color: #fff; }
}
.fmm-cta-btn:active { transform: scale(.97); transition-duration: var(--dur-press); }
.hero-ghost-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.1); color: #fff;
  border: 1.5px solid rgba(255,255,255,.35);
  font-size: 1rem; font-weight: 600;
  padding: .85rem 1.9rem; border-radius: 12px;
  text-decoration: none; cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background .17s, border-color .17s;
  white-space: nowrap;
}
.hero-ghost-btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); color: #fff; }

/* Hero stats */
.hero-stats-row { display: flex; gap: 2rem; margin: 0 0 1.5rem; flex-wrap: wrap; }
.hero-stat { display: flex; flex-direction: column; gap: .1rem; }
.hero-stat-num { font-family: var(--font-head); font-size: 1.45rem; font-weight: 800; color: #ffffff; -webkit-text-fill-color: #ffffff; }
.hero-stat-lbl { font-size: .75rem; color: rgba(255,255,255,.65); font-weight: 500; }

/* Search card — separate surface below hero */
.search-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

/* ── COLOUR-CODED CATEGORY CHIPS ────────────────────────────── */
.cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; margin-right: .3rem; vertical-align: middle; }
.cat-dot-roommates  { background: #8b5cf6; }
.cat-dot-rentals    { background: var(--primary); }
.cat-dot-properties { background: #0891b2; }
.cat-dot-local_services { background: #0F6E56; }
.cat-dot-jobs       { background: #f59e0b; }
.cat-dot-buy_sell   { background: #ef4444; }
.cat-dot-events     { background: var(--accent); }
.cat-chip-roommates.chip-active,  .cat-chip-roommates:hover  { background: #ede9fe; color: #5b21b6; border-color: #8b5cf6; }
.cat-chip-rentals.chip-active,    .cat-chip-rentals:hover    { background: #dbeafe; color: #1e40af; border-color: var(--primary); }
.cat-chip-properties.chip-active, .cat-chip-properties:hover { background: #cffafe; color: #164e63; border-color: #0891b2; }
.cat-chip-local_services.chip-active, .cat-chip-local_services:hover { background: #d1fae5; color: #065f46; border-color: #0F6E56; }
.cat-chip-jobs.chip-active,       .cat-chip-jobs:hover       { background: #fef3c7; color: #78350f; border-color: #f59e0b; }
.cat-chip-buy_sell.chip-active,   .cat-chip-buy_sell:hover   { background: #fee2e2; color: #991b1b; border-color: #ef4444; }
.cat-chip-events.chip-active,     .cat-chip-events:hover     { background: #e4f5ee; color: #0c3d27; border-color: var(--accent); }

/* ── NEW BADGE ──────────────────────────────────────────────── */
.new-badge {
  position: absolute; top: .65rem; left: .65rem;
  background: #ef4444; color: #fff;
  padding: .2rem .55rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
}

/* ── CHIP COUNT BADGE ───────────────────────────────────────── */
.chip-count {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--border); color: var(--muted);
  font-size: .68rem; font-weight: 700;
  border-radius: 999px; padding: .05rem .42rem;
  min-width: 1.4em; margin-left: .25rem;
  transition: background .17s, color .17s;
}
.chip-active .chip-count, .chip:hover .chip-count { background: rgba(26,93,212,.2); color: var(--primary-dk); }

/* ── TRENDING PILLS ─────────────────────────────────────────── */
.trending-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .85rem; }
.trending-label { font-size: .78rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.trending-pill {
  border: 1.5px solid var(--border); background: var(--surface);
  border-radius: 999px; padding: .22rem .7rem;
  font-size: .78rem; font-weight: 600; color: var(--text-2);
  cursor: pointer; transition: all .15s; text-decoration: none;
}
.trending-pill:hover { border-color: var(--primary); color: var(--primary); background: rgba(26,93,212,.07); transform: translateY(-1px); }

/* ── SUB-TAB BAR ─────────────────────────────────────────────── */
.sub-tab-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; flex-wrap: wrap; gap: .75rem;
}
.sub-tabs {
  display: flex; gap: 0;
  background: var(--surface-2); border-radius: 12px; padding: 4px;
}
.sub-tab {
  padding: .4rem .9rem; border-radius: 9px;
  font-family: inherit; font-size: .83rem; font-weight: 600;
  text-decoration: none; color: var(--text-2);
  background: transparent;
  transition: all .17s;
  white-space: nowrap;
}
.sub-tab.sub-tab-active {
  background: var(--surface); color: var(--primary);
  box-shadow: var(--shadow-xs);
}
.sub-tab:hover:not(.sub-tab-active) { color: var(--text); }

/* ── LISTINGS HEADER ────────────────────────────────────────── */
.listings-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; }
.listings-header-title { font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; color: var(--text); }
.listings-header-sub { font-size: .8rem; color: var(--muted); margin-top: .15rem; }

/* ── LISTING TAG PILLS ──────────────────────────────────────── */
.listing-tag-pills { display: flex; flex-wrap: wrap; gap: .28rem; margin-bottom: .75rem; }
.listing-tag-pill {
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  background: rgba(26,93,212,.08);
  color: var(--primary);
  border: 1px solid rgba(26,93,212,.15);
}
.sort-select {
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: .4rem .75rem; font-size: .82rem; color: var(--text);
  background: var(--surface); cursor: pointer;
  font-family: inherit;
}
.sort-select:focus { outline: 2px solid var(--primary); }

/* ── TIME AGO + CARD FOOTER ─────────────────────────────────── */
.card-footer-row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .65rem; border-top: 1px solid var(--border); }
.card-time-row { font-size: .72rem; color: var(--muted); }

/* ── FAVOURITE BUTTON ───────────────────────────────────────── */
.fav-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem; color: var(--muted);
  transition: all .15s; line-height: 1; padding: 0;
  box-shadow: none;
}
.fav-btn:hover { border-color: #ef4444; color: #ef4444; background: #fee2e2; transform: scale(1.1); }
.fav-btn-active { color: #ef4444 !important; border-color: #ef4444 !important; background: #fee2e2 !important; }

/* ── TRUST STRIP ────────────────────────────────────────────── */
.trust-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem; margin-top: 2rem;
}
.trust-item {
  display: flex; flex-direction: row; gap: .75rem; align-items: flex-start;
  padding: 1rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-xs);
}
.trust-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.trust-title { font-family: var(--font-head); font-size: .88rem; font-weight: 700; color: var(--text); margin-bottom: .2rem; }
.trust-desc  { font-size: .78rem; color: var(--muted); line-height: 1.5; }

/* ── CITY BROWSE ──────────────────────────────────────────────── */
.city-browse-section {
  margin: 2.5rem 0 1.5rem;
}
.city-browse-banner {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 260px;
  background: linear-gradient(160deg, #07142e 0%, #0b2050 35%, #0f3070 60%, #092040 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* Star field */
.city-browse-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 8%, rgba(255,255,255,.35) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 45% 22%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 63% 10%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 19%, rgba(255,255,255,.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 7%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 35%, rgba(255,255,255,.25) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 40%, rgba(255,255,255,.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 33%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 38%, rgba(255,255,255,.25) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
/* Blue glow along horizon */
.city-browse-banner::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100px;
  background: linear-gradient(to top, rgba(26,93,212,.22) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
/* Skyline SVG */
.cbb-skyline {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 1;
  pointer-events: none;
  line-height: 0;
}
.cbb-skyline-svg {
  width: 100%;
  height: auto;
  display: block;
  fill: rgba(2,8,22,.92);
}
/* Content sits above skyline */
.cbb-content {
  position: relative;
  z-index: 2;
  padding: 2rem 2.25rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.cbb-title {
  font-size: 1.65rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 .3rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.cbb-sub {
  font-size: .875rem;
  color: rgba(255,255,255,.6);
  margin: 0;
}
.cbb-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.cbb-pill {
  padding: .5rem 1.15rem;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.55);
  color: rgba(255,255,255,.88);
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s ease;
  background: rgba(255,255,255,.06);
  letter-spacing: .01em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cbb-pill:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255,255,255,.16);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
@media (max-width: 600px) {
  .cbb-content { padding: 1.5rem 1.25rem 1.75rem; }
  .cbb-title { font-size: 1.3rem; }
}

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer {
  margin-top: 2rem; background: var(--surface);
  border-top: 1px solid var(--border); padding: 1.25rem 0;
}
/* old footer inner — overridden by enterprise footer below */
.site-footer-brand { display: flex; align-items: center; gap: .45rem; }
.site-footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-footer-links a { font-size: .82rem; color: rgba(255,255,255,.55); text-decoration: none; transition: color .15s; }
.site-footer-links a:hover { color: #fff; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET  (≤ 860px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .brand-logo { height: 65px; }
  .navbar { height: auto; padding: .75rem 1rem; border-radius: var(--r); }
  .nav-left { gap: .75rem; }
  .hero { min-height: 320px; }
  .hero h1 { font-size: 1.6rem; }
  .hero-headline { font-size: 1.75rem; }
  /* Detail page: stack the 2-col layout */
  .grid[style*="grid-template-columns:2fr 1fr"],
  .grid[style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   CREATE LISTING — Rich interactive form
   ════════════════════════════════════════════════════════════════ */

/* ── Location autocomplete ─────────────────────────────────────── */
/* Plain address input used in Google Places path */
.cl-address-input {
  width: 100%;
  box-sizing: border-box;
}

.cl-loc-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  transition: border-color .15s;
}
.cl-loc-wrap:focus-within { border-color: var(--primary); }
.cl-loc-search-icon {
  padding: 0 .6rem 0 .8rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.cl-loc-wrap input[type="text"] {
  flex: 1;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: .55rem .5rem .55rem .85rem;
  font-size: .9rem;
  outline: none;
}
.cl-loc-spinner {
  padding: 0 .75rem;
  color: var(--muted);
  display: flex;
  align-items: center;
}
/* display:flex above has same specificity as [hidden]{display:none} — override it explicitly */
.cl-loc-spinner[hidden] { display: none !important; }
@keyframes cl-spin { to { transform: rotate(360deg); } }
.cl-spin { animation: cl-spin .7s linear infinite; }

.cl-loc-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  z-index: 200;
  max-height: 260px;
  overflow-y: auto;
  list-style: none;
  padding: .3rem 0;
  margin: 0;
}
.cl-loc-option {
  padding: .6rem 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  transition: background .12s;
}
.cl-loc-option:hover,
.cl-loc-option.active { background: rgba(26,93,212,.07); }
.cl-loc-main { font-size: .88rem; font-weight: 600; color: var(--text); }
.cl-loc-sub  { font-size: .76rem; color: var(--muted); }

/* ── City autocomplete (homepage FMM wizard + filter bar) ── */
.city-ac-wrap {
  position: relative;
  flex: 1;           /* fill available space in flex containers */
  min-width: 0;      /* prevent flex blowout */
}
.city-ac-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  z-index: 300;
  max-height: 240px;
  overflow-y: auto;
  list-style: none;
  padding: .3rem 0;
  margin: 0;
}
.city-ac-option {
  padding: .6rem 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  transition: background .12s;
}
.city-ac-option:hover,
.city-ac-option.active { background: rgba(26,93,212,.07); }
.city-ac-main { font-size: .88rem; font-weight: 600; color: var(--text); }
.city-ac-sub  { font-size: .76rem; color: var(--muted); }

/* Detail panel fade */
.cl-detail-panel { transition: opacity .2s ease; }

/* Subsection label */
.cl-subsection-label {
  font-size: .8rem; font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: .6rem;
}

/* Radio card grids */
.cl-radio-grid { display: grid; gap: .55rem; }
.cl-radio-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cl-radio-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Individual radio card */
.cl-radio-card {
  position: relative;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: .85rem .75rem .7rem;
  cursor: pointer;
  background: var(--surface-2);
  transition: border-color .15s, background .15s;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
}
.cl-radio-card:hover { border-color: var(--primary); background: rgba(26,93,212,.04); }
.cl-radio-card.selected {
  border-color: var(--primary);
  background: rgba(26,93,212,.07);
}
.cl-radio-icon  { font-size: 1.5rem; line-height: 1; color: var(--text-2); display: block; }
.cl-radio-icon svg { display: block; }
.cl-radio-label { font-size: .82rem; font-weight: 600; color: var(--text-2); }
.cl-radio-card.selected .cl-radio-icon { color: var(--primary); }
.cl-radio-card.selected .cl-radio-label { color: var(--primary); }

/* Radio dot (top-right circle indicator) */
.cl-radio-dot {
  position: absolute; top: .55rem; right: .6rem;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border-2);
  background: var(--surface);
  transition: border-color .15s, background .15s;
}
.cl-radio-card.selected .cl-radio-dot {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: inset 0 0 0 3px var(--surface);
}

/* Bills included label */
.cl-bills-label {
  display: flex; align-items: flex-start; gap: .75rem; cursor: pointer;
}
.cl-bills-label input[type="checkbox"] {
  width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; margin-top: .1rem;
}

@media (max-width: 600px) {
  .cl-radio-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .cl-radio-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* Completion bar */
.cl-completion-bar {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .9rem 1.25rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow-xs);
}
.cl-comp-label { font-size: .8rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.cl-comp-track { flex: 1; height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; }
.cl-comp-fill  { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 4px; transition: width .35s ease; }
.cl-comp-pct   { font-size: .82rem; font-weight: 700; color: var(--muted); white-space: nowrap; min-width: 36px; text-align: right; }

/* Section card */
.cl-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-xs);
}
.cl-section-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--border);
}
.cl-section-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: .78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-head);
}
.cl-section-title { font-size: .97rem; font-weight: 700; color: var(--text); }

/* Category picker */
.cl-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .6rem;
}
.cl-cat-card {
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: .9rem .5rem .75rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
  background: var(--surface-2);
  user-select: none;
}
.cl-cat-card:hover { border-color: var(--primary); background: rgba(26,93,212,.05); transform: translateY(-1px); }
.cl-cat-card.selected {
  border-color: var(--primary);
  background: rgba(26,93,212,.1);
}
.cl-cat-icon  { font-size: 1.75rem; display: block; margin-bottom: .3rem; line-height: 1; color: var(--text-2); }
.cl-cat-icon svg { display: block; margin: 0 auto; }
.cl-cat-label { font-size: .76rem; font-weight: 700; color: var(--text-2); }
.cl-cat-card.selected .cl-cat-icon { color: var(--primary); }
.cl-cat-card.selected .cl-cat-label { color: var(--primary); }

/* Price unit tabs (segmented control) */
.cl-unit-tabs {
  display: flex;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.cl-unit-tab {
  padding: .42rem .9rem;
  font-size: .8rem; font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--muted);
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.cl-unit-tab:not(:last-child) { border-right: 1.5px solid var(--border); }
.cl-unit-tab:hover { background: rgba(26,93,212,.06); color: var(--primary); }
.cl-unit-tab.selected { background: var(--primary); color: #fff; }

/* Amenity chips */
.cl-amenity-grid { display: flex; flex-wrap: wrap; gap: .45rem; }
/* The picker is grouped so the seller sorts shared from private as they tick,
   rather than being asked the same question twice in two text boxes. */
.cl-amenity-group + .cl-amenity-group { margin-top: .9rem; }
.cl-amenity-group-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 .45rem;
}
.cl-amenity-btn {
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: .32rem .8rem;
  font-size: .8rem;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--text-2);
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
}
.cl-amenity-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(26,93,212,.05); }
.cl-amenity-btn.selected {
  border-color: var(--primary);
  background: rgba(26,93,212,.12);
  color: var(--primary);
  font-weight: 600;
}

/* Featured toggle */
.cl-toggle-wrap { cursor: pointer; display: flex; align-items: center; flex-shrink: 0; }
.cl-toggle-track {
  width: 46px; height: 26px; border-radius: 13px;
  background: var(--border-2);
  position: relative;
  transition: background .2s;
}
.cl-toggle-track.on { background: var(--primary); }
.cl-toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff;
  transition: left .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.cl-toggle-track.on .cl-toggle-thumb { left: 23px; }

/* Field helpers */
.cl-field { display: flex; flex-direction: column; }
.cl-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.cl-label { font-size: .83rem; font-weight: 600; color: var(--text-2); margin-bottom: .35rem; }
.cl-required { color: #e74c3c; margin-left: .15rem; }
.cl-hint { font-size: .75rem; color: var(--muted); margin-top: .25rem; }
.cl-field-error { color: #e74c3c; font-size: .8rem; margin-bottom: .3rem; }
.cl-field-footer { display: flex; justify-content: flex-end; margin-top: .25rem; }
.cl-char-counter { font-size: .74rem; color: var(--muted); }
.cl-char-counter.near-limit { color: #f59e0b; }

@media (max-width: 600px) {
  .cl-cat-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  .cl-row-2 { grid-template-columns: 1fr; }
  .cl-row-2 > .cl-field[style*="grid-column:1/-1"] { grid-column: unset; }
  .cl-unit-tabs { flex-wrap: wrap; }
  .cl-section { padding: 1.1rem; }
  .cl-completion-bar { padding: .75rem 1rem; }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE  (≤ 600px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── Spacing ── */
  .container {
    padding: .75rem .75rem calc(var(--mob-nav-h, 64px) + 1rem);
  }

  /* ── Navbar: logo only, hide text links (bottom nav handles them) ── */
  .navbar {
    padding: .5rem .75rem;
    margin-bottom: .75rem;
    border-radius: 14px;
    justify-content: space-between;
  }
  .primary-links { display: none; }
  .nav-links a:not(.button),
  .nav-links form { display: none; }
  .nav-links { gap: .5rem; }
  .brand-logo { height: 53px; }

  /* ── Hero ── */
  .hero {
    padding: 1.1rem 1rem 1rem;
    min-height: 250px;
    border-radius: 18px;
    margin-bottom: .75rem;
  }
  .hero h1 { font-size: 1.2rem; margin-bottom: .25rem; }
  .hero-stats-row { gap: .75rem; }
  .hero-stat-num { font-size: 1.4rem; }

  /* ── Search filters: single stacked column ── */
  .filters {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .filters input,
  .filters select { font-size: .9rem; }

  /* ── Quality chips row: horizontal scroll ── */
  .quality-chips-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    /* A horizontal swipe here is ambiguous to the browser: it does not know
       whether you mean the page or the chip row, so it guesses and the page
       jitters vertically while the chips move. pan-y says the browser keeps
       vertical and this row owns horizontal. Snap gives the row the browser's
       own scroll physics, and contain stops reaching the end of the chips
       from scrolling the page behind it. */
    touch-action: pan-y;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  .quality-chips-row > * { scroll-snap-align: start; }
  .quality-chips-row::-webkit-scrollbar { display: none; }
  .quality-chip { flex-shrink: 0; }

  /* ── Trending row: horizontal scroll ── */
  .trending-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    gap: .4rem;
  }
  .trending-row::-webkit-scrollbar { display: none; }

  /* ── Category chips: horizontal scroll ── */
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    gap: .4rem;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { white-space: nowrap; flex-shrink: 0; }

  /* ── Listings header ── */
  .listings-header { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .listings-header-title { font-size: 1.1rem; }
  .listings-header-sub { font-size: .78rem; }

  /* ── 2-column tile grid (481-600px only; see the 480px block below) ── */
  .grid-listings {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* ── Amazon-style compact tile ── */
  .listing-card {
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
  }
  .listing-thumb-wrap { border-radius: 14px 14px 0 0; }

  /* Square image — fills card width */
  .listing-thumb-track { height: auto; aspect-ratio: 1 / 1; }
  .listing-thumb {
    height: 100%;
    width: 100%;
    aspect-ratio: 1 / 1;
  }
  /* font-size intentionally not overridden here: the placeholder is now a
     masked icon plus a small label, not a 2rem emoji glyph. */
  .listing-thumb-placeholder { height: auto; aspect-ratio: 1/1; }

  /* Tight body */
  .listing-body { padding: .45rem .5rem .5rem; }

  /* Title: 2 lines max */
  .card-title-row { margin-bottom: .1rem; gap: .2rem; }
  .card-title-row h3 {
    font-size: .75rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Location line: compact single line */
  .card-location-time {
    display: block;
    font-size: .63rem;
    margin-bottom: .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
  }

  /* Price: just a touch larger than title (.75rem) */
  .price { font-size: .78rem !important; font-weight: 700; margin-bottom: .28rem; line-height: 1.2; }
  .price-unit { font-size: .6rem; }

  /* Save pill: overlaid top-right on image */
  .save-pill {
    position: absolute;
    top: 6px; right: 6px;
    font-size: .6rem;
    padding: .15rem .3rem;
    z-index: 3;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(4px);
    border-radius: 20px;
  }
  .card-title-row .save-pill { display: none; }
  .listing-thumb-wrap .save-pill { display: flex; }

  /* Buttons: same size as title, equal height */
  .card-actions { gap: .3rem; margin-top: auto; }
  .card-btn-primary,
  .card-btn-secondary {
    display: flex;
    flex: 1;
    font-size: .72rem;
    padding: .28rem .3rem;
    border-radius: 7px;
    text-align: center;
    justify-content: center;
    line-height: 1.4;
  }

  /* Badges: smaller */
  .featured-badge,
  .new-badge,
  .category-badge { font-size: .58rem; padding: .12rem .4rem; }

  /* Slider arrows */
  .thumb-nav { width: 22px; height: 22px; font-size: .8rem; border-radius: 6px; }
  .thumb-dots { bottom: 5px; gap: 3px; }
  .thumb-dot { width: 4px; height: 4px; }

  /* ── Trust strip ── */
  .trust-strip { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .trust-icon { width: 36px; height: 36px; font-size: 1rem; }
  .trust-title { font-size: .82rem; }
  .trust-desc { font-size: .74rem; }

  /* ── Footer ── */
  .site-footer { margin-bottom: calc(var(--mob-nav-h, 64px) + .5rem); }
  .site-footer-inner { flex-direction: column; align-items: flex-start; gap: .75rem; }

  /* ── Detail page gallery ── */
  .lj-collage { height: 260px; }
  .lj-collage-page { gap: 4px; }
  .lj-collage-nav { width: 32px; height: 32px; font-size: 1.25rem; }
  .lj-collage-count { font-size: .78rem; padding: .35rem .85rem; }
  .lb-stage { padding: 3rem 1rem .5rem; }
  .lb-thumb { width: 72px; height: 52px; }

  /* ── Forms ── */
  input, select, textarea {
    font-size: 16px !important; /* prevent iOS zoom */
  }

  /* ── Back to top: sit above the Profile tab (rightmost, ~1/5 of screen) ── */
  #back-to-top {
    bottom: calc(var(--mob-nav-h) + 10px);
    left: auto;
    right: 10px;
    width: 36px;
    height: 36px;
    font-size: 1rem;
    box-shadow: 0 3px 10px rgba(26,93,212,.4);
  }

  /* ── Live chat panel ── */
  .live-chat-panel {
    width: 100vw;
    right: 0;
    left: 0;
    bottom: var(--mob-nav-h, 64px);
    border-radius: 16px 16px 0 0;
  }

  /* ── app-content: pad bottom so content clears the mobile nav ── */
  .app-content { padding: .75rem .75rem calc(var(--mob-nav-h, 62px) + 1.25rem) !important; }

  /* ── listing_list: hero text + CTAs ── */
  .hero-headline { font-size: 1.4rem !important; letter-spacing: -.015em; margin-bottom: .5rem !important; }
  .hero-sub { font-size: .85rem !important; line-height: 1.55 !important; margin-bottom: .9rem !important; }
  .hero-sub br { display: none; }
  .hero-ctas { flex-direction: column !important; gap: .45rem !important; }
  .fmm-cta-btn  { padding: .7rem 1.2rem !important; font-size: .9rem !important; width: 100%; text-align: center; }
  .hero-ghost-btn { padding: .7rem 1.2rem !important; font-size: .9rem !important; width: 100%; justify-content: center; text-align: center; }

  /* ── search card: tighter padding on mobile ── */
  .search-card { padding: .75rem .85rem !important; margin-bottom: .85rem !important; }
}

/* ════════════════════════════════════════════════════════════════
   BOTTOM TAB BAR (mobile only)
   ════════════════════════════════════════════════════════════════ */
:root { --mob-nav-h: 62px; }

.mob-nav {
  display: none;
}

/* Shown from 900px down, matching the exact width at which .app-sidebar is
   hidden. It previously appeared only at 600px, which left 601-900px — every
   iPad in portrait, and any desktop window narrower than 900px — with the
   sidebar gone, the bottom bar not yet arrived, and nothing but Theme and
   Sign out in the top bar. No Home, Search, Saved or Messages at all. */
@media (max-width: 900px) {
  .mob-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--mob-nav-h);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(11,28,48,.10);
    z-index: 200;
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mob-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--muted);
    /* Was .62rem (9.9px) — the smallest type in the product, on the primary
       navigation for phones. 11.5px matches the platform tab-bar convention. */
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
    transition: color var(--dur-fast) var(--ease-out);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
  }
  .mob-nav-item:hover,
  .mob-nav-item.mob-active { color: var(--primary); }

  .mob-nav-icon {
    font-size: 1.25rem;
    line-height: 1;
  }

  /* Post button: accent pill in the center */
  .mob-nav-post {
    color: #fff !important;
  }
  .mob-nav-post .mob-nav-icon-wrap {
    background: linear-gradient(135deg, var(--primary-dk), var(--primary));
    width: 44px;
    height: 34px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(26,93,212,.4);
    font-size: 1.1rem;
    margin-bottom: 1px;
    color: #fff;
  }
}

/* ── Phone listing grid ─────────────────────────────────────────
   The grid was locked to two columns for the whole range below 600px. At
   390px that is ~175px per card: the photo, which is the thing people
   actually judge a property on, became a thumbnail, titles wrapped to three
   lines, amenity pills stacked one per line and "View Listing" wrapped onto
   two. Zillow, Redfin, Apartments.com and Realtor.com all go single column on
   phones for that reason. 481-600px keeps two columns, where the density
   argument still holds. */
@media (max-width: 480px) {
  .grid-listings { grid-template-columns: 1fr; gap: var(--sp-3); }
  /* The square crop existed to keep two tiles the same height. At full width a
     property photo wants a landscape frame. */
  .listing-thumb-track { aspect-ratio: 3 / 2; }
  .listing-thumb { aspect-ratio: 3 / 2; }
  .listing-thumb-placeholder { aspect-ratio: 3 / 2; }
  /* Room for the pills and the action row to sit inline again. */
  .listing-card .card-actions { display: flex; gap: var(--sp-2); }
  .listing-card .card-actions > * { flex: 1; white-space: nowrap; }
}

/* The bottom-bar clearance below already exists inside the 600px block. Now
   that the bar also shows from 601-900px, that band needs the same clearance
   or the bar sits on top of the last row of content. */
@media (max-width: 900px) and (min-width: 601px) {
  .app-content  { padding-bottom: calc(var(--mob-nav-h) + var(--sp-5)); }
  .site-footer  { margin-bottom: calc(var(--mob-nav-h) + var(--sp-2)); }
  #back-to-top  { bottom: calc(var(--mob-nav-h) + 10px); }
}

/* ════════════════════════════════════════════════════════════════
   HERO CAROUSEL — Tripalink-style full-bleed image carousel
   ════════════════════════════════════════════════════════════════ */
#home-hero-carousel {
  position: relative;
  width: calc(100% + 3rem);
  margin-left: -1.5rem;
  margin-top: -1.5rem;
  margin-bottom: 2.5rem;
  height: 88vh;
  min-height: 520px;
  max-height: 780px;
  overflow: hidden;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.hc-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.4,0,.2,1);
  /* No permanent will-change: on twelve full-bleed slides it kept twelve
     photo-sized compositor layers alive, which is what Safari evicted and
     slowly rebuilt when the hero scrolled back into view. The browser still
     promotes a slide for the length of its fade. */
}
.hc-slide.hc-active { opacity: 1; z-index: 1; }
.hc-slide.hc-prev-slide { opacity: 0; z-index: 0; }

/* Multi-stop gradient: dark at bottom for text, subtle at top for sky */
.hc-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to top,  rgba(8,18,38,.82) 0%, rgba(8,18,38,.45) 40%, rgba(8,18,38,.12) 65%, transparent 100%),
    linear-gradient(to right, rgba(8,18,38,.35) 0%, transparent 55%);
  pointer-events: none;
}

/* Content positioned at bottom-left */
.hc-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 0 4rem 3.5rem;
  max-width: 760px;
}

.hc-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary-2);
  margin-bottom: .65rem;
}

.hc-headline {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: .75rem;
  letter-spacing: -.02em;
  -webkit-text-fill-color: #fff;
  background: none;
}

.hc-subline {
  font-size: clamp(.88rem, 1.4vw, 1.05rem);
  color: rgba(255,255,255,.8);
  margin-bottom: 1.75rem;
  line-height: 1.55;
  max-width: 540px;
}

.hc-ctas {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 2rem;
}

.hc-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .85rem 1.75rem;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background .18s, transform .14s, box-shadow .18s;
  box-shadow: 0 4px 18px rgba(26,93,212,.5);
  white-space: nowrap;
}
.hc-btn-primary:hover {
  background: var(--primary-dk);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(26,93,212,.6);
}

.hc-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .82rem 1.4rem;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-weight: 600;
  font-size: .88rem;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.32);
  text-decoration: none;
  transition: background .18s, border-color .18s;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hc-btn-ghost:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.55);
  color: #fff;
}

/* Stats row */
.hc-stats {
  display: flex;
  gap: 2.25rem;
  flex-wrap: wrap;
}

.hc-stat-num {
  display: block;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.hc-stat-lbl {
  display: block;
  font-size: .72rem;
  color: rgba(255,255,255,.6);
  font-weight: 500;
  margin-top: .1rem;
}

/* Navigation dots */
.hc-dots {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: .5rem;
  align-items: center;
}

.hc-dot {
  width: 8px !important;
  height: 8px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 50% !important;
  background-color: rgba(255,255,255,.38) !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  padding: 0 !important;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none !important;
  transition: background-color .25s, width .25s, border-radius .25s;
  flex-shrink: 0;
  display: block;
  line-height: 1;
  font-size: 0;
}
.hc-dot:focus { outline: none !important; }
.hc-dot.hc-dot-active {
  width: 22px !important;
  border-radius: 4px !important;
  background-color: rgba(255,255,255,.92) !important;
}

/* Progress bar */
.hc-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,.15);
  z-index: 4;
}
.hc-progress-bar {
  height: 100%;
  background: var(--primary-2);
  width: 0%;
  transition: none;
}
.hc-progress-bar.hc-running {
  transition: width 5s linear;
  width: 100%;
}

/* Responsive carousel */
@media (max-width: 860px) {
  #home-hero-carousel {
    width: calc(100% + 3rem);
    margin-left: -1.5rem;
    height: 70vh;
    min-height: 440px;
    max-height: 580px;
    border-radius: 0 0 var(--r) var(--r);
  }
  .hc-content {
    padding: 0 1.5rem 2.5rem;
  }
  .hc-stats { gap: 1.5rem; }
  .hc-headline { letter-spacing: -.015em; }
}

@media (max-width: 600px) {
  #home-hero-carousel {
    width: calc(100% + 1.5rem);
    margin-left: -.75rem;
    height: 72vh;
    min-height: 400px;
    max-height: 520px;
    border-radius: 0;
  }
  .hc-content {
    padding: 0 1.1rem 2rem;
    max-width: 100%;
  }
  .hc-ctas {
    gap: .5rem;
    margin-bottom: 1.25rem;
  }
  .hc-btn-primary {
    padding: .75rem 1.25rem;
    font-size: .85rem;
  }
  .hc-btn-ghost {
    padding: .7rem 1rem;
    font-size: .8rem;
  }
  .hc-stats { gap: 1rem; }
  .hc-stat-num { font-size: 1.25rem; }
  .hc-stat-lbl { font-size: .68rem; }
}

/* ══════════════════════════════════════════════════════════════
   ENTERPRISE REVAMP — Modern Real Estate UI (Zumper/Zillow/Redfin-inspired)
   ══════════════════════════════════════════════════════════════ */

/* ── SIDEBAR FOOTER AVATAR ──────────────────────────────────── */
.sb-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-dk), var(--primary));
  color: #fff;
  font-size: .88rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(26,93,212,.3);
}
.sb-footer-user { display: flex; align-items: center; gap: .65rem; padding: .5rem .5rem .8rem; }
.sb-footer-user-info { display: flex; flex-direction: column; gap: 1px; }
.sb-footer-name { font-size: .84rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.sb-footer-role {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(26,93,212,.1);
  padding: 1px 7px;
  border-radius: 999px;
  width: fit-content;
}

/* ── HERO INLINE SEARCH BAR (Zillow-style) ──────────────────── */
.hero-search-row {
  margin-top: 1.5rem;
  display: flex;
  gap: 0;
  max-width: 620px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  background: #fff;
}
.hero-search-input {
  flex: 1;
  padding: .9rem 1.2rem;
  border: none;
  outline: none;
  font-size: .95rem;
  font-family: inherit;
  color: #0f1c35;
  background: #fff;
  width: 100%;
}
.hero-search-input::placeholder { color: #9CA3AF; }
/* The row is overflow:hidden to clip the pill's corners, which would also clip
   an outset focus ring. An inset ring stays inside the clip and still reads. */
.hero-search-input:focus-visible {
  box-shadow: inset 0 0 0 2.5px var(--primary);
}
.hero-search-btn {
  padding: .9rem 1.5rem;
  background: linear-gradient(135deg, var(--primary-dk), var(--primary));
  color: #fff;
  border: none;
  font-size: .92rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.hero-search-btn:hover { opacity: .9; }
@media (max-width: 600px) {
  .hero-search-row { flex-direction: column; border-radius: 14px; }
  .hero-search-btn { border-radius: 0 0 14px 14px; justify-content: center; }
}

/* ── QUICK FILTER BAR (Zumper-style) ────────────────────────── */
.qfb-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 0 1.1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.qfb-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-right: .25rem;
  white-space: nowrap;
}
.qfb-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .38rem .9rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}
.qfb-pill:hover, .qfb-pill.active {
  border-color: var(--primary);
  background: rgba(26,93,212,.09);
  color: var(--primary);
}
.qfb-pill.active { font-weight: 700; }
.qfb-divider { width: 1px; height: 20px; background: var(--border); margin: 0 .25rem; flex-shrink: 0; }

/* A second, unrelated .trust-strip / .trust-item component lived here: an
   inline row of small nowrap pills, with .trust-item-green and
   .trust-item-blue modifiers. No template ever used it, but it shared class
   names with the four-card strip defined around line 2139 and, being later in
   the file, won. That turned the card grid into a nowrap flex row, so on a
   390px phone each card computed to 411px and its text was clipped off the
   right edge. Removed, which restores the grid definition that was intended.
   The .trust-strip mobile override further up sets grid-template-columns,
   which only makes sense against that grid. */

/* ── VERIFIED OWNER BADGE (Zumper-inspired) ─────────────────── */
.verified-owner-badge {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: .18rem .55rem;
  border-radius: 999px;
  background: #ecfdf3;
  color: #047857;
  border: 1px solid #a7f3d0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ── DAYS ON MARKET CHIP (Zillow-inspired) ──────────────────── */
.dom-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .18rem .55rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: .68rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.dom-chip-new {
  background: rgba(26,93,212,.09);
  border-color: rgba(26,93,212,.22);
  color: var(--primary);
  font-weight: 700;
}
.dom-chip-hot {
  background: rgba(249,115,22,.09);
  border-color: rgba(249,115,22,.25);
  color: #c2410c;
  font-weight: 700;
}

/* ── NEIGHBORHOOD SCORE CHIPS (Walk Score-inspired) ─────────── */
.neighborhood-chips {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  margin: .4rem 0 .1rem;
}
.ns-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .55rem;
  border-radius: 6px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.ns-walk    { background: #ecfdf3; color: #047857; }
.ns-transit { background: rgba(26,93,212,.09); color: var(--primary); }
.ns-noise   { background: #f3f4f6; color: #4B5563; }
.ns-schools { background: rgba(124,58,237,.09); color: #6D28D9; }

/* ── PRICE TREND CHIP ───────────────────────────────────────── */
.price-trend-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .7rem;
  font-weight: 700;
  padding: .18rem .55rem;
  border-radius: 999px;
}
.price-trend-down { background: #ecfdf3; color: #047857; }
.price-trend-up   { background: #fef2f2; color: #dc2626; }

/* ── CARD INFO ROW (beds/baths/sqft strip) ──────────────────── */
.card-info-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .78rem;
  color: var(--text-2);
  font-weight: 500;
  margin: .2rem 0 .5rem;
  flex-wrap: wrap;
}
.card-info-sep { color: var(--border-2); font-size: .65rem; }
.card-info-val { font-weight: 700; color: var(--text); }

/* ── LISTING CARD V2 ENHANCEMENTS ───────────────────────────── */
.card-meta-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .4rem;
}

/* ── VIRTUAL TOUR BADGE (Apartments.com-inspired) ────────────── */
.vtour-badge {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: .22rem .6rem;
  border-radius: 999px;
  background: rgba(124,58,237,.09);
  border: 1px solid rgba(124,58,237,.22);
  color: #6D28D9;
  font-size: .67rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ── SECTION EYEBROW LABELS ─────────────────────────────────── */
.section-eyebrow {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.eyebrow-blue  { color: var(--primary); }
.eyebrow-green { color: var(--accent); }
.eyebrow-amber { color: #B45309; }

/* ── ENTERPRISE SECTION HEADER ──────────────────────────────── */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.section-header-left {}
.section-title-xl {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  margin: 0 0 .2rem;
}
.section-sub {
  font-size: .8rem;
  color: var(--muted);
  margin: 0;
}
.section-link {
  font-size: .8rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  padding: .35rem .85rem;
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  white-space: nowrap;
  transition: all .15s;
  flex-shrink: 0;
}
.section-link:hover {
  background: var(--primary);
  color: #fff;
}

/* ── MARKET DATA STRIP ──────────────────────────────────────── */
.market-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 2rem;
}
.market-stat-cell {
  background: var(--surface);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.market-stat-num {
  font-size: 1.5rem;
  font-weight: 800;
  font-family: var(--font-head);
  color: var(--text);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.market-stat-lbl {
  font-size: .72rem;
  color: var(--muted);
  font-weight: 500;
}
.market-stat-trend {
  font-size: .72rem;
  font-weight: 700;
}
.trend-up   { color: #dc2626; }
.trend-down { color: #047857; }
.trend-flat { color: var(--muted); }

/* ── TESTIMONIAL V2 (better card) ───────────────────────────── */
.testimonial-v2 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.4rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, transform .2s;
}
.testimonial-v2:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.testimonial-stars { display: flex; gap: .2rem; }
.testimonial-quote { font-size: .875rem; color: var(--text-2); line-height: 1.65; font-style: italic; margin: 0; flex: 1; }
.testimonial-author { display: flex; align-items: center; gap: .65rem; }
.testimonial-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .88rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.testimonial-name { font-size: .84rem; font-weight: 700; color: var(--text); }
.testimonial-role { font-size: .73rem; color: var(--muted); }

/* ── CITY CARD (enhanced) ───────────────────────────────────── */
.city-card {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.1rem;
  border-radius: 12px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text-2);
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s;
}
.city-card:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(26,93,212,.05);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26,93,212,.1);
}
.city-card-count {
  margin-left: auto;
  font-size: .68rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-2);
  padding: .1rem .45rem;
  border-radius: 999px;
}

/* ── FEATURED LANDLORD CTA (enhanced) ───────────────────────── */
#home-landlord-cta {
  background: linear-gradient(135deg, #0f1c35 0%, var(--text) 50%, var(--primary-dk) 100%);
}

/* ── LISTING TAG PILLS (card) ────────────────────────────────── */
.listing-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: .3rem 0;
}
.listing-tag-pill {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 6px;
  font-size: .66rem;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* ── SITE FOOTER — Modern multi-column ──────────────────────── */
/* ── FOOTER ─────────────────────────────────────────────────────
   Was a dark navy slab. The reference screens end the page on the same
   surface the content sits on, separated by a rule rather than by a colour
   change, so the footer reads as the end of the page and not as a second
   site glued to the bottom. */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--text-2);
  margin-top: 4rem;
  padding: 0;
}
.site-footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 3rem 2rem 1.5rem;
}
.site-footer-top {
  display: grid;
  /* Brand takes a wider first track so its paragraph keeps a readable
     measure, then one track per link column. */
  grid-template-columns: 1.7fr repeat(5, minmax(0, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
}
.site-footer-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
}
/* Same colours as the header mark in base.html: "List" in the logo's navy ink
   (white in dark mode, as .brand-logo .dark-text does) and "ojo" in the logo's
   leaf-green gradient, not the UI blue and emerald. */
.site-footer-logo {
  font-family: var(--font-head);
  font-size: 1.375rem;
  font-weight: 800;
  color: #182B52;
  letter-spacing: -.03em;
}

.site-footer-logo em {
  font-style: normal;
  color: #3DB549;
  background: linear-gradient(180deg, #3DB549, #5DC228);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.site-footer-tagline {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: 1rem;
  max-width: 38ch;
}
.site-footer-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dk);
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 600;
}

.site-footer-col-title {
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .85rem;
}
.site-footer-col a {
  display: block;
  font-size: .875rem;
  color: var(--text-2);
  text-decoration: none;
  margin-bottom: .5rem;
  transition: color var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .site-footer-col a:hover { color: var(--primary); }
}

.site-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-footer-copy { font-size: .8125rem; color: var(--muted); }
.site-footer-legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-footer-legal a {
  font-size: .8125rem;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .site-footer-legal a:hover { color: var(--primary); }
}

@media (max-width: 1080px) {
  .site-footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
  .site-footer-brand-col { grid-column: 1 / -1; }
  .site-footer-tagline { max-width: 52ch; }
}
@media (max-width: 620px) {
  .site-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer-inner { padding: 2.25rem 1rem 1.25rem; }
  .site-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ── HOW IT WORKS (enhanced step icons) ─────────────────────── */
.hiw-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  margin-bottom: .75rem;
}

/* ── SEARCH RESULTS HEADER STRIP ────────────────────────────── */
.results-header-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.results-count {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
}
.results-count span { color: var(--primary); }
.results-sort-row { display: flex; align-items: center; gap: .5rem; }
.results-sort-label { font-size: .78rem; color: var(--muted); font-weight: 500; }
.results-sort-select {
  width: auto;
  padding: .3rem .7rem;
  font-size: .8rem;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

/* ── MAP VIEW TOGGLE (Zillow-inspired placeholder) ───────────── */
.map-view-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.map-view-btn {
  padding: .4rem .85rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-2);
  background: none;
  border: none;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
}
.map-view-btn:hover { background: var(--surface-2); }
.map-view-btn.active {
  background: var(--primary);
  color: #fff;
}
.map-view-btn + .map-view-btn {
  border-left: 1px solid var(--border);
}
.map-view-btn.active + .map-view-btn {
  border-left-color: var(--primary);
}

/* ── NOTIFY ME BANNER (Redfin-inspired) ─────────────────────── */
.notify-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.25rem;
  background: linear-gradient(135deg, rgba(26,93,212,.06), rgba(5,150,105,.04));
  border: 1.5px solid rgba(26,93,212,.15);
  border-radius: 14px;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.notify-banner-text { font-size: .85rem; font-weight: 600; color: var(--text); }
.notify-banner-sub  { font-size: .76rem; color: var(--muted); }
.notify-banner-btn {
  padding: .5rem 1.1rem;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  border: none;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: opacity .15s;
  flex-shrink: 0;
}
.notify-banner-btn:hover { opacity: .9; }

/* ── HOME QUICK-SEARCH BOX ──────────────────────────────────── */
.home-quick-search {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.12);
  max-width: 580px;
  width: 100%;
  margin-top: 1.5rem;
  border: 1.5px solid rgba(255,255,255,.6);
}
.home-quick-search-input {
  flex: 1;
  padding: 1rem 1.25rem;
  border: none;
  outline: none;
  font-size: .95rem;
  font-family: inherit;
  color: #0f1c35;
  background: #fff;
}
.home-quick-search-input::placeholder { color: #9CA3AF; }
/* Same clipped-ring problem as .hero-search-input above. */
.home-quick-search-input:focus-visible {
  box-shadow: inset 0 0 0 2.5px var(--primary);
}
.home-quick-search-divider { width: 1px; height: 28px; background: #E5E7EB; flex-shrink: 0; }
.home-quick-search-btn {
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, var(--primary-dk), var(--primary));
  color: #fff;
  border: none;
  font-size: .92rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .4rem;
  transition: opacity .15s;
}
.home-quick-search-btn:hover { opacity: .9; }

/* ── POPULAR SEARCHES (Zumper-style) ────────────────────────── */
.popular-searches {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .85rem;
  flex-wrap: wrap;
}
.popular-label { font-size: .72rem; color: rgba(255,255,255,.55); font-weight: 500; white-space: nowrap; }
.popular-pill {
  display: inline-flex;
  padding: .22rem .65rem;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.85);
  font-size: .73rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.popular-pill:hover { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.4); }

/* ── PROPERTY ALERT BANNER ──────────────────────────────────── */
.alert-setup-strip {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: linear-gradient(135deg, #ecfdf3, #eff6ff);
  border: 1.5px solid #a7f3d0;
  border-radius: 12px;
  padding: .7rem 1rem;
  margin-bottom: 1.25rem;
}
.alert-setup-icon { font-size: 1.1rem; flex-shrink: 0; }
.alert-setup-text { flex: 1; font-size: .82rem; font-weight: 600; color: #065F46; }
.alert-setup-sub  { font-size: .74rem; color: #047857; font-weight: 400; }
.alert-setup-btn  {
  padding: .38rem .85rem;
  background: #047857;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: opacity .15s;
}
.alert-setup-btn:hover { opacity: .9; }

/* ── LISTING CARD — BEDS/BATHS/SQFT ROW ─────────────────────── */
.card-specs-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .76rem;
  color: var(--text-2);
  font-weight: 500;
  margin: .1rem 0 .45rem;
  flex-wrap: wrap;
}
.card-spec-item { display: flex; align-items: center; gap: .2rem; }
.card-spec-item strong { font-weight: 700; color: var(--text); }
.card-spec-dot { color: var(--border-2); font-size: .5rem; }

/* ── CONTENT PAGES (About / Privacy / Terms) ────────────────── */
.pg-wrap { max-width: 880px; margin: 0 auto; padding: 0 1rem 4rem; }

/* Gradient banner — mirrors .hero, sized for editorial pages */
.pg-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: 3.25rem 3rem 2.75rem;
  margin-bottom: 2rem;
  background: linear-gradient(135deg, var(--text) 0%, var(--primary-dk) 60%, #1e6fd4 100%);
  box-shadow: 0 8px 32px rgba(11,28,48,.22), 0 2px 6px rgba(11,28,48,.12);
}

.pg-hero::before,
.pg-hero::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.pg-hero::before { top: -50px; right: 90px;  width: 200px; height: 200px; background: rgba(255,255,255,.06); }
.pg-hero::after  { bottom: -70px; right: -10px; width: 190px; height: 190px; background: rgba(255,255,255,.05); }
.pg-hero > * { position: relative; z-index: 1; }

.pg-eyebrow {
  display: inline-block;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #BFDBFF;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: .25rem .7rem;
  margin-bottom: .9rem;
}
.pg-hero h1 {
  font-family: var(--font-head);
  font-size: 2.15rem; font-weight: 800; line-height: 1.18;
  color: #fff; margin: 0 0 .7rem; max-width: 20ch;
}
.pg-hero-sub {
  font-size: 1rem; line-height: 1.7;
  color: rgba(255,255,255,.82);
  max-width: 56ch; margin: 0;
}
.pg-hero-meta {
  font-size: .78rem; color: rgba(255,255,255,.6);
  margin: 1rem 0 0; display: flex; align-items: center; gap: .45rem;
}
.pg-hero-meta::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 0 3px rgba(16,185,129,.22);
}

/* Section heading with gradient numeral */
.pg-h2 {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--font-head);
  font-size: 1.2rem; font-weight: 800; color: var(--text);
  margin: 2.25rem 0 .9rem;
}
.pg-num {
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--primary-dk), var(--primary));
  box-shadow: 0 3px 10px rgba(26,93,212,.32);
}

/* Panel — quieter than .card, no hover lift, for reading */
.pg-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.35rem 1.5rem;
  box-shadow: var(--shadow-xs);
  margin-bottom: .85rem;
}
.pg-panel:last-child { margin-bottom: 0; }
.pg-panel p { line-height: 1.78; color: var(--text-2); font-size: .92rem; }
.pg-panel p + p { margin-top: .85rem; }
.pg-panel-label {
  font-family: var(--font-head);
  font-weight: 700; font-size: .95rem; color: var(--text); margin: 0 0 .6rem;
}
.pg-panel.accent {
  border-left: 3px solid var(--primary);
  background: linear-gradient(135deg, rgba(26,93,212,.045), rgba(98,194,255,.02));
}
.pg-panel.tinted {
  background: linear-gradient(135deg, rgba(26,93,212,.05), rgba(5,150,105,.03));
  border-color: rgba(26,93,212,.16);
}

/* Lists with custom markers */
.pg-list { list-style: none; margin: 0; padding: 0; }
.pg-list li {
  position: relative; padding-left: 1.4rem; margin-bottom: .55rem;
  line-height: 1.72; color: var(--text-2); font-size: .9rem;
}
.pg-list li:last-child { margin-bottom: 0; }
.pg-list li::before {
  content: ''; position: absolute; left: 0; top: .58em;
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
}
.pg-list li strong { color: var(--text); font-weight: 700; }
.pg-list.check li::before {
  content: '✓'; background: none; width: auto; height: auto;
  top: 0; color: var(--accent); font-weight: 800; font-size: .82rem;
}
.pg-list.cross li::before {
  content: '×'; background: none; width: auto; height: auto;
  top: -.1em; color: #d9534f; font-weight: 800; font-size: 1rem;
}

/* Feature grid with gradient icon tiles */
.pg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: .85rem;
  margin-bottom: .85rem;
}
.pg-feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.4rem;
  box-shadow: var(--shadow-xs);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pg-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-2);
}
.pg-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin-bottom: .85rem;
  background: linear-gradient(135deg, rgba(26,93,212,.13), rgba(98,194,255,.09));
  border: 1px solid rgba(26,93,212,.16);
}
.pg-icon.green {
  background: linear-gradient(135deg, rgba(5,150,105,.14), rgba(16,185,129,.09));
  border-color: rgba(5,150,105,.18);
}
.pg-feature h3 {
  font-family: var(--font-head);
  font-size: .98rem; font-weight: 700; color: var(--text); margin: 0 0 .4rem;
}
.pg-feature p { font-size: .875rem; line-height: 1.68; color: var(--text-2); margin: 0; }

/* Numbered steps */
.pg-steps { display: flex; flex-direction: column; gap: 1.15rem; }
.pg-step { display: flex; gap: 1rem; align-items: flex-start; }
.pg-step-num {
  flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--primary-dk), var(--primary));
  box-shadow: 0 3px 10px rgba(26,93,212,.3);
}
.pg-step h3 {
  font-family: var(--font-head);
  font-size: .93rem; font-weight: 700; color: var(--text); margin: .3rem 0 .25rem;
}
.pg-step p { font-size: .875rem; line-height: 1.68; color: var(--text-2); margin: 0; }

/* City chips */
.pg-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.pg-chip {
  display: inline-flex; align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .34rem .85rem;
  font-size: .8rem; font-weight: 600; color: var(--text-2);
  text-decoration: none;
  transition: all .16s ease;
}
.pg-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(26,93,212,.16);
}

/* Data table */
.pg-table-wrap { overflow-x: auto; border-radius: var(--r-sm); border: 1px solid var(--border); }
.pg-table { width: 100%; border-collapse: collapse; font-size: .87rem; min-width: 420px; }
.pg-table thead th {
  text-align: left; font-weight: 700; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
  background: var(--surface-2);
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--border);
}
.pg-table td { padding: .72rem .9rem; color: var(--text-2); border-bottom: 1px solid var(--border); }
.pg-table tbody tr:last-child td { border-bottom: none; }
.pg-table tbody tr { transition: background .14s ease; }
.pg-table tbody tr:hover { background: var(--surface-2); }
.pg-table td:first-child { font-weight: 600; color: var(--text); white-space: nowrap; }

/* Two-column split */
.pg-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.pg-split h3 {
  font-family: var(--font-head);
  display: flex; align-items: center; gap: .45rem;
  font-size: .93rem; font-weight: 700; color: var(--text); margin: 0 0 .4rem;
}

/* Closing CTA */
.pg-cta {
  position: relative; overflow: hidden;
  text-align: center;
  border-radius: var(--r-lg);
  padding: 2.5rem 2rem;
  margin-top: 2.25rem;
  background: linear-gradient(135deg, #EBF3FF, #F2F8FF);
  border: 1px solid rgba(26,93,212,.16);
}

.pg-cta h2 {
  font-family: var(--font-head);
  font-size: 1.3rem; font-weight: 800; color: var(--text); margin: 0 0 .55rem;
}
.pg-cta p { font-size: .92rem; line-height: 1.72; color: var(--text-2); max-width: 50ch; margin: 0 auto 1.4rem; }
.pg-cta-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* Table of contents — legal pages */
.pg-toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow-xs);
}
.pg-toc-title {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .75rem;
}
.pg-toc-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .3rem .9rem; }
.pg-toc-links a {
  font-size: .855rem; color: var(--text-2); text-decoration: none;
  padding: .22rem 0; transition: color .14s ease, padding-left .14s ease;
  display: flex; gap: .5rem;
}
.pg-toc-links a span { color: var(--muted); font-weight: 700; font-size: .78rem; min-width: 1.1rem; }
.pg-toc-links a:hover { color: var(--primary); padding-left: .2rem; }
.pg-toc-links a:hover span { color: var(--primary); }

/* Anchor offset so sticky header doesn't cover targets */
.pg-anchor { scroll-margin-top: 90px; }

@media (max-width: 720px) {
  .pg-hero { padding: 2.4rem 1.5rem 2rem; border-radius: var(--r); }
  .pg-hero h1 { font-size: 1.6rem; }
  .pg-hero-sub { font-size: .93rem; }
  .pg-panel { padding: 1.15rem 1.15rem; }
  .pg-cta { padding: 2rem 1.25rem; border-radius: var(--r); }
}

/* ═══════════════════════════════════════════════════════════════
   HOME HERO — split search console
   Replaces the dark photo carousel. The console is the hero: the
   first thing on the page is the search, with one real listing
   beside it as evidence rather than a stock slideshow.
   ═══════════════════════════════════════════════════════════════ */
.hero-split {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-6);
  padding: clamp(1.5rem, 3.5vw, 3rem);
}

/* Two soft washes so the panel is not a flat rectangle. Decorative only. */
.hero-wash {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
  z-index: -1;
}
.hero-wash-a {
  top: -22%; left: -8%;
  width: 34rem; height: 34rem;
  background: var(--primary-2);
  opacity: .26;
}
.hero-wash-b {
  bottom: -30%; right: -10%;
  width: 30rem; height: 30rem;
  background: var(--accent-2);
  opacity: .16;
}

.hero-split-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
@media (max-width: 1080px) {
  .hero-split-inner { grid-template-columns: 1fr; }
}

.hero-lead { min-width: 0; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .85rem;
  margin-bottom: var(--sp-4);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-dk);
}

.hero-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: hero-pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes hero-pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

.hero-display {
  font-family: var(--font-head);
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--text);
  margin-bottom: var(--sp-3);
}
.hero-display-accent { color: var(--primary); }

.hero-split-sub {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-2);
  /* 45-75 characters is the readable measure. */
  max-width: 54ch;
  margin-bottom: var(--sp-6);
}

/* ── Search console ─────────────────────────────────────────── */
.hero-console {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.hero-console-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.hero-tab { position: relative; }
/* The radio stays focusable and drives the state; only its box is hidden. */
.hero-tab input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.hero-tab span {
  display: block;
  padding: .45rem .9rem;
  border-radius: 6px;
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.hero-tab input:checked + span {
  background: var(--primary-fill);
  color: var(--on-primary);
  font-weight: 700;
  box-shadow: var(--shadow-xs);
}
.hero-tab input:focus-visible + span { box-shadow: var(--focus-ring); }
@media (hover:hover) and (pointer:fine) {
  .hero-tab input:not(:checked):hover + span { color: var(--text); }
}

.hero-console-row {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--sp-2);
  align-items: stretch;
}
@media (max-width: 860px) {
  .hero-console-row { grid-template-columns: 1fr 1fr; }
  .hero-field-loc, .hero-console-submit { grid-column: 1 / -1; }
}

.hero-field {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  padding: .5rem .75rem;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.hero-field:focus-within { border-color: var(--primary); background: var(--surface); }
.hero-field-icon { color: var(--primary); flex-shrink: 0; }
.hero-field-body { display: flex; flex-direction: column; min-width: 0; width: 100%; }
.hero-field-label {
  font-family: var(--font-head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}
.hero-field-input,
.hero-field-select {
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  font-family: var(--font-head);
  /* 16px keeps iOS from zooming the layout viewport on focus. */
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  outline: none;
}
.hero-field-input::placeholder { color: var(--muted); font-weight: 500; }
.hero-field-select { cursor: pointer; appearance: none; text-overflow: ellipsis; }

.hero-console-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .75rem 1.35rem;
  border: none;
  border-radius: var(--r-sm);
  background: var(--primary);
  color: #fff;
  font-family: var(--font-head);
  font-size: .9375rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .hero-console-submit:hover { background: var(--primary-fill-dk); }
}

.hero-console-ai {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: var(--sp-3);
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
@media (hover:hover) and (pointer:fine) {
  .hero-console-ai:hover { color: var(--primary-dk); text-decoration: underline; }
}

/* ── Quick chips ────────────────────────────────────────────── */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}
.hero-chips-label {
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text);
  margin-right: .2rem;
}
.hero-chip {
  padding: .3rem .75rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .hero-chip:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
}

/* ── Photo carousel variant ─────────────────────────────────────
   The earlier home page's rotating photos, now behind the console.
   Reuses .hc-slide / .hc-dots / .hc-progress from the carousel rules
   above; only the frame, overlay and the copy colours change here. */
.hero-split--photo {
  border: none;
  background: #0b1220;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: center;
  padding-bottom: calc(clamp(1.5rem, 3.5vw, 3rem) + 1.75rem); /* room for the dots */
}
.hero-split--photo .hero-split-inner {
  position: relative;
  z-index: 3;
  width: 100%;
}
.hero-split--photo .hc-overlay {
  background:
    linear-gradient(to right, rgba(8,18,38,.72) 0%, rgba(8,18,38,.35) 48%, rgba(8,18,38,.10) 100%),
    linear-gradient(to top, rgba(8,18,38,.30) 0%, transparent 45%);
}
@media (max-width: 1080px) {
  .hero-split--photo .hc-overlay { background: rgba(8,18,38,.55); }
}
.hero-split--photo .hero-display { color: #fff; }
.hero-split--photo .hero-display-accent { color: var(--primary-2); }
.hero-split--photo .hero-split-sub { color: rgba(255,255,255,.86); }
.hero-split--photo .hero-chips-label { color: #fff; }
.hero-split--photo .hero-chip {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.32);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (hover:hover) and (pointer:fine) {
  .hero-split--photo .hero-chip:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.6); color: #fff; }
}
.hero-split--photo .hero-feature-card { box-shadow: 0 18px 48px rgba(0,0,0,.45); }
.hero-split--photo .hc-dot:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; }
@media (max-width: 600px) {
  .hero-split--photo { min-height: 0; border-radius: var(--r); }
}

/* ── Featured listing card ──────────────────────────────────── */
.hero-feature { min-width: 0; }
.hero-feature-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  max-width: 26rem;
  margin-left: auto;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--surface-3);
  text-decoration: none;
}
@media (max-width: 1080px) {
  .hero-feature-card { margin: 0 auto; max-width: 30rem; aspect-ratio: 16 / 11; }
}
.hero-feature-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* No-photo case. The mask needs a painted box behind it, so the tint goes on
   the element and the line-art house is drawn by a masked ::after on top —
   masking the element itself would have clipped away its own background. */
.hero-feature-photo-empty { background: var(--surface-3); }
.hero-feature-photo-empty::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--muted);
  opacity: .32;
  -webkit-mask: var(--ph-house) center / 34% no-repeat;
  mask: var(--ph-house) center / 34% no-repeat;
}
.hero-feature-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,15,29,.88) 0%, rgba(10,15,29,.15) 46%, rgba(10,15,29,.30) 100%);
}

.hero-feature-badge {
  position: absolute;
  top: .75rem; left: .75rem; right: .75rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .6rem;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .hero-feature-badge { background: var(--surface); }
}
.hero-feature-badge-mark {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-dk);
  display: flex; align-items: center; justify-content: center;
}

.hero-feature-badge-text { display: flex; flex-direction: column; min-width: 0; }
.hero-feature-badge-title {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.hero-feature-pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: hero-pulse 2s var(--ease-in-out) infinite;
}
.hero-feature-badge-sub {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.3;
}
.hero-feature-fit {
  margin-left: auto;
  flex-shrink: 0;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-primary);
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
}

.hero-feature-foot {
  position: absolute;
  bottom: .75rem; left: .75rem; right: .75rem;
  display: block;
  padding: .8rem .85rem;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .hero-feature-foot { background: var(--surface); }
}
.hero-feature-foot-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .2rem;
}
.hero-feature-price {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
}
.hero-feature-per {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 400;
  color: var(--muted);
}
.hero-feature-avail {
  flex-shrink: 0;
  padding: .1rem .5rem;
  border-radius: var(--r-xs);
  background: var(--primary-soft);
  color: var(--primary);
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
}
.hero-feature-title {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-feature-foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .4rem;
}
.hero-feature-verified {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--accent-dk);
}

.hero-feature-loc { font-size: .75rem; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   METRICS BAR
   ═══════════════════════════════════════════════════════════════ */
.metrics-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-9);
}
@media (max-width: 900px) { .metrics-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .metrics-bar { grid-template-columns: 1fr; } }

.metric-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
}
.metric-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .3rem;
}
.metric-num {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.metric-num-primary { color: var(--primary); }
.metric-num-accent  { color: var(--accent-dk); }

.metric-flag {
  flex-shrink: 0;
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
}
.metric-flag-up, .metric-flag-ok { color: var(--accent-dk); }

.metric-label {
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--text);
}
.metric-note {
  margin-top: .2rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--text-3);
}

/* ═══════════════════════════════════════════════════════════════
   HOME — city grid, alerts band, landlord CTA
   ═══════════════════════════════════════════════════════════════ */
.home-section { margin-bottom: var(--sp-9); }

.city-grid-count {
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.city-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-3);
}
@media (max-width: 1180px) { .city-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .city-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.city-tile {
  display: flex;
  flex-direction: column;
  padding: var(--sp-4);
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .city-tile:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
  }
}
.city-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .6rem;
  color: var(--primary);
}
.city-tile-flag {
  font-family: var(--font-head);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-dk);
}

.city-tile-name {
  font-family: var(--font-head);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
  line-height: 1.3;
}
.city-tile-sub {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ── Alerts band ────────────────────────────────────────────── */
.alerts-band {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-5);
  margin-bottom: var(--sp-9);
  border-radius: var(--r);
  background: var(--primary-soft);
  border: 1px solid var(--primary-soft-2);
}
.alerts-band-mark {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--primary-fill);
  color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
}
.alerts-band-copy { flex: 1; min-width: 16rem; }
.alerts-band-title {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: .15rem;
}
.alerts-band-sub {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--text-2);
  max-width: 62ch;
}
.alerts-band-btn {
  flex-shrink: 0;
  padding: .65rem 1.25rem;
  border-radius: var(--r-sm);
  background: var(--primary-fill);
  color: var(--on-primary);
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .alerts-band-btn:hover { background: var(--primary-fill-dk); color: var(--on-primary); }
}

/* ── Landlord CTA ───────────────────────────────────────────── */
.landlord-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-7);
  padding: clamp(1.75rem, 3.5vw, 3rem);
  border-radius: var(--r-lg);
  background: var(--ink);
}
/* A single wash instead of the old three-stop gradient, so the skyline below
   still reads and the headline keeps its contrast. */
.landlord-cta::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 40rem; height: 40rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,93,212,.42) 0%, transparent 68%);
  pointer-events: none;
  z-index: -1;
}
.landlord-cta-skyline {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.landlord-cta-skyline svg {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
}

.landlord-cta-copy { max-width: 34rem; min-width: 0; }
.landlord-cta-eyebrow {
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary-2);
  margin-bottom: .6rem;
}
.landlord-cta-title {
  font-family: var(--font-head);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: .75rem;
}
.landlord-cta-sub {
  font-size: .9375rem;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  margin-bottom: var(--sp-5);
}
.landlord-cta-points { list-style: none; display: grid; gap: .55rem; }
.landlord-cta-points li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .875rem;
  color: rgba(255,255,255,.85);
}
/* The tick is drawn from the token rather than shipped as a glyph per item. */
.landlord-cta-points li::before {
  content: '';
  flex-shrink: 0;
  width: 17px; height: 17px;
  margin-top: .12rem;
  border-radius: 50%;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 100% no-repeat,
           linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 100% no-repeat,
                linear-gradient(#000, #000);
          mask-composite: exclude;
}

.landlord-cta-actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  flex-shrink: 0;
  width: 100%;
  max-width: 16rem;
}
.landlord-cta-btn {
  padding: .8rem 1.25rem;
  border-radius: var(--r-sm);
  background: var(--accent-fill);
  color: var(--on-accent);
  font-family: var(--font-head);
  font-size: .9375rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .landlord-cta-btn:hover { background: var(--accent-fill-dk); color: var(--on-accent); }
}
.landlord-cta-btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
}
@media (hover:hover) and (pointer:fine) {
  .landlord-cta-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); color: #fff; }
}

@media (max-width: 760px) {
  .landlord-cta { flex-direction: column; gap: var(--sp-5); }
  .landlord-cta-actions { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════
   TRENDING CARDS
   ═══════════════════════════════════════════════════════════════ */
.trend-row {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  padding-bottom: var(--sp-3);
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}

.trend-card {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 296px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .trend-card:hover {
    border-color: var(--border-2);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
  }
}
@media (max-width: 560px) { .trend-card { width: 250px; } }

.trend-card-media {
  position: relative;
  display: block;
  height: 186px;
  flex-shrink: 0;
  background: var(--surface-3);
  overflow: hidden;
}
.trend-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-base) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .trend-card:hover .trend-card-media img { transform: scale(1.05); }
}
.trend-card-empty {
  position: absolute;
  inset: 0;
  background: var(--muted);
  opacity: .28;
  -webkit-mask: var(--ph-house) center / 34% no-repeat;
  mask: var(--ph-house) center / 34% no-repeat;
}

.trend-chip {
  position: absolute;
  top: .6rem; left: .6rem;
  padding: .22rem .6rem;
  border-radius: 999px;
  background: var(--primary-fill);
  color: var(--on-primary);
  font-family: var(--font-head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.trend-chip-sale { background: var(--accent-fill); }
.trend-chip-hot {
  left: auto;
  right: .6rem;
  background: var(--featured);
}

.trend-card-body {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  flex: 1;
  padding: var(--sp-4);
}
.trend-card-pricerow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}
.trend-card-price {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--text);
}
.trend-card-per {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 400;
  color: var(--muted);
  margin-left: .1rem;
}
.trend-card-cut {
  flex-shrink: 0;
  padding: .1rem .45rem;
  border-radius: var(--r-xs);
  background: var(--accent-soft);
  color: var(--accent-dk);
  font-family: var(--font-head);
  font-size: .6875rem;
  font-weight: 700;
}

.trend-card-title {
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.01em;
  /* Two lines, so a long title does not push the spec strip out of alignment
     across a row of cards. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trend-card-title a { color: var(--text); text-decoration: none; }
@media (hover:hover) and (pointer:fine) {
  .trend-card-title a:hover { color: var(--primary); }
}

.trend-card-loc {
  display: flex;
  align-items: center;
  gap: .25rem;
  font-size: .8125rem;
  color: var(--text-3);
}
.trend-card-loc svg { color: var(--muted); flex-shrink: 0; }

.trend-card-specs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
  list-style: none;
  margin-top: .5rem;
  padding-top: .6rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-2);
}
/* A dot between items rather than a separator element per gap. */
.trend-card-specs li + li::before {
  content: '·';
  margin-right: .5rem;
  color: var(--border-2);
}

.trend-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: auto;
  padding-top: .75rem;
}
.trend-card-verified {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--accent-dk);
}

.trend-card-cta {
  margin-left: auto;
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
}
@media (hover:hover) and (pointer:fine) {
  .trend-card-cta:hover { color: var(--primary-dk); text-decoration: underline; }
}

/* ═══════════════════════════════════════════════════════════════
   RESULTS TOOLBAR (search results page)
   One sticky band that replaces the hero + search card + sort row +
   view toggle that used to stack above the first result.
   ═══════════════════════════════════════════════════════════════ */
.results-bar {
  position: sticky;
  /* Clears the 80px header so the toolbar parks under it rather than
     scrolling beneath it. */
  top: 80px;
  z-index: 60;
  margin: -1.75rem -2rem var(--sp-5);
  padding: var(--sp-3) 2rem;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .results-bar { background: var(--surface); }
}
@media (max-width: 900px) {
  .results-bar { top: 66px; margin: -1rem -1rem var(--sp-4); padding: var(--sp-3) 1rem; }
}

.results-bar-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.results-bar-row + .results-bar-row { margin-top: var(--sp-3); }
.results-bar-spacer { flex: 1; min-width: 0; }

/* ── Scope tabs ─────────────────────────────────────────────── */
.results-scope {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  flex-shrink: 0;
}
.results-scope-tab {
  padding: .4rem .8rem;
  border-radius: 6px;
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.results-scope-tab.is-on {
  background: var(--primary-fill);
  color: var(--on-primary);
  font-weight: 700;
}
@media (hover:hover) and (pointer:fine) {
  .results-scope-tab:not(.is-on):hover { color: var(--text); background: var(--surface); }
}

/* ── Search form ────────────────────────────────────────────── */
.results-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
  min-width: 18rem;
}
.results-search-field {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex: 1 1 12rem;
  min-width: 0;
  padding: .5rem .75rem;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.results-search-field:focus-within { border-color: var(--primary); background: var(--surface); }
.results-search-field svg { color: var(--muted); flex-shrink: 0; }
.results-search-field input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  /* 16px keeps iOS from zooming the layout viewport on focus. */
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--text);
  outline: none;
}
.results-search-field input::placeholder { color: var(--muted); }

.results-select {
  /* Overrides the `width: 100%` every select inherits from the form base,
     which otherwise collapses the search field next to it. */
  width: auto;
  flex-shrink: 0;
  max-width: 11rem;
  padding: .5rem .7rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  outline: none;
}
.results-select:focus-visible { border-color: var(--primary); box-shadow: var(--focus-ring); }
@media (max-width: 760px) { .results-search .results-select { display: none; } }

.results-search-city { flex: 0 1 11rem; min-width: 8rem; position: relative; }
.results-search-city input {
  width: 100%;
  padding: .5rem .7rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--text);
  outline: none;
}
.results-search-city input:focus { border-color: var(--primary); }

.results-search-btn {
  flex-shrink: 0;
  padding: .55rem 1.1rem;
  border: none;
  border-radius: var(--r-sm);
  background: var(--primary-fill);
  color: var(--on-primary);
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .results-search-btn:hover { background: var(--primary-fill-dk); }
}

/* ── Count / sort / view ────────────────────────────────────── */
.results-count {
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}
.results-count strong {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--text);
  margin-right: .2rem;
}
.results-clear {
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  padding: .4rem .75rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
@media (hover:hover) and (pointer:fine) {
  .results-clear:hover { color: var(--primary); border-color: var(--primary); }
}
.results-sort { display: flex; align-items: center; }

.results-view {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  flex-shrink: 0;
}
.results-view-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .7rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.results-view-btn.is-on {
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  box-shadow: var(--shadow-xs);
}

/* ── Chips row ──────────────────────────────────────────────── */
.results-bar-chips { gap: var(--sp-2); }
.results-terms { display: flex; flex-wrap: wrap; gap: .4rem; }
.results-terms:empty { display: none; }
.results-bar .quality-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  /* The row can outgrow one line on a narrow window; cap it and let it
     scroll rather than pushing the results down the page. */
  max-height: 4.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ═══════════════════════════════════════════════════════════════
   LISTING DETAIL
   ═══════════════════════════════════════════════════════════════ */
.ld-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-bottom: var(--sp-4);
  font-size: .8125rem;
  color: var(--muted);
}
.ld-crumbs a {
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .ld-crumbs a:hover { color: var(--primary); }
}
.ld-crumbs [aria-current="page"] { color: var(--text); font-weight: 600; }

/* Price. Was a violet-to-blue gradient clipped to the glyphs — the one colour
   on the page outside the palette, applied to the single number people came
   for. Solid ink reads faster and lets the qualifier sit next to it. */
.ld-price {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.1;
  color: var(--text);
  margin: 0;
}
.ld-price-per {
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 400;
  color: var(--muted);
  margin-left: .1rem;
}
.ld-price-ask { font-size: 1.0625rem; font-weight: 600; color: var(--text-3); }

/* Spec strip */
.ld-specs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: var(--sp-4);
}
.ld-spec {
  /* Grows to share the row, but capped so a listing with one known spec
     does not render a single 900px tile. */
  flex: 1 1 104px;
  max-width: 220px;
  padding: .7rem .85rem;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  text-align: center;
}
.ld-spec-num {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1.2;
}
.ld-spec-lbl {
  font-size: .75rem;
  color: var(--text-3);
  margin-top: .1rem;
}

@media (max-width: 900px) {
  .ld-layout { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   POST A LISTING — landlord portal
   ═══════════════════════════════════════════════════════════════ */
.post-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.post-hero-wash {
  position: absolute;
  top: -55%; right: -12%;
  width: 34rem; height: 34rem;
  border-radius: 50%;
  background: var(--accent-2);
  opacity: .16;
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
}

.post-hero-inner { max-width: 46rem; min-width: 0; }
.post-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: var(--sp-3);
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-dk);
}

.post-hero-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: hero-pulse 2.4s var(--ease-in-out) infinite;
}
.post-hero-title {
  font-family: var(--font-head);
  font-size: clamp(1.75rem, 3.4vw, 2.625rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: .6rem;
}
.post-hero-accent { color: var(--primary); }
.post-hero-sub {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 58ch;
}

.post-hero-kinds {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.post-kind {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .85rem;
  border-radius: 6px;
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.post-kind.is-on {
  background: var(--primary-fill);
  color: var(--on-primary);
  font-weight: 700;
}
@media (hover:hover) and (pointer:fine) {
  .post-kind:not(.is-on):hover { background: var(--surface-2); color: var(--text); }
}
@media (max-width: 820px) {
  .post-hero-kinds { width: 100%; overflow-x: auto; }
}

/* ── Step rail ──────────────────────────────────────────────── */
.post-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
@media (max-width: 1080px) { .post-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .post-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.post-step {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .7rem .8rem;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .post-step:hover { border-color: var(--border-2); }
}
.post-step-n {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--muted);
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.post-step-body { display: flex; flex-direction: column; min-width: 0; }
.post-step-title {
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.post-step-state {
  font-size: .6875rem;
  color: var(--muted);
  line-height: 1.35;
}
/* Done: the section has what it needs. Set from the form by JS.
   The step number is a text node, so it cannot be hidden with a child
   selector — collapsing the parent's font-size hides it and the ::after
   restores its own size for the check. */
.post-step.is-done { border-color: var(--accent); background: var(--accent-soft); }
.post-step.is-done .post-step-n {
  background: var(--accent-fill);
  color: var(--on-accent);
  font-size: 0;
}
.post-step.is-done .post-step-n::after {
  content: '✓';
  font-size: .8125rem;
  line-height: 1;
}

/* ── Two-column layout ──────────────────────────────────────── */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 1080px) {
  .post-layout { grid-template-columns: 1fr; }
}
.post-form-col { min-width: 0; }

.post-rail {
  position: sticky;
  top: calc(var(--topbar-h) + 1.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}
@media (max-width: 1080px) {
  /* Stacked below the form it mirrors, so it stops being a preview. */
  .post-rail { position: static; }
}

.post-rail-card {
  padding: var(--sp-4);
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
}
.post-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: var(--sp-3);
}
.post-rail-title {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 700;
  color: var(--text);
}
.post-rail-live {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: hero-pulse 2s var(--ease-in-out) infinite;
}
.post-rail-note {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Live preview card ──────────────────────────────────────── */
.post-preview {
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.post-preview-media {
  position: relative;
  height: 168px;
  background: var(--surface-3);
}
.post-preview-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.post-preview-empty {
  position: absolute;
  inset: 0;
  background: var(--muted);
  opacity: .28;
  -webkit-mask: var(--ph-house) center / 32% no-repeat;
  mask: var(--ph-house) center / 32% no-repeat;
}
.post-preview-chip {
  position: absolute;
  top: .55rem; left: .55rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--primary-fill);
  color: var(--on-primary);
  font-family: var(--font-head);
  font-size: .6875rem;
  font-weight: 700;
}
.post-preview-count {
  position: absolute;
  bottom: .55rem; right: .55rem;
  padding: .2rem .5rem;
  border-radius: var(--r-xs);
  background: rgba(10,15,29,.72);
  color: #fff;
  font-size: .6875rem;
  font-weight: 600;
}
.post-preview-body { padding: var(--sp-3); }
.post-preview-pricerow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}
.post-preview-price {
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
}
.post-preview-price .pv-per {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 400;
  color: var(--muted);
}
.post-preview-deposit {
  flex-shrink: 0;
  font-size: .6875rem;
  font-weight: 700;
  color: var(--accent-dk);
}

.post-preview-title {
  margin-top: .15rem;
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  overflow-wrap: anywhere;
}
.post-preview-addr {
  font-size: .75rem;
  color: var(--text-3);
  margin-top: .1rem;
}
/* Muted while the field behind it is still empty, so the card reads as a
   template rather than as a listing with wrong data in it. */
.post-preview-title.is-empty,
.post-preview-addr.is-empty,
.post-preview-price.is-empty { color: var(--muted); font-weight: 500; }

.post-preview-specs {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .45rem;
  list-style: none;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-2);
}
.post-preview-specs li + li::before {
  content: '·';
  margin-right: .45rem;
  color: var(--border-2);
}

.post-preview-cta {
  display: flex;
  gap: .4rem;
  margin-top: .7rem;
}
.post-preview-btn {
  flex: 1;
  padding: .45rem;
  border-radius: var(--r-sm);
  background: var(--primary-fill);
  color: var(--on-primary);
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
}
.post-preview-icon {
  width: 30px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
}

/* ── Market card ────────────────────────────────────────────── */
.post-market-figure { margin-bottom: var(--sp-3); }
.post-market-num {
  display: block;
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.post-market-lbl {
  display: block;
  margin-top: .2rem;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--text-3);
}
.post-market-rows { list-style: none; display: grid; gap: .1rem; }
.post-market-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .45rem 0;
  border-top: 1px solid var(--border);
  font-size: .8125rem;
}
.post-market-row-k { color: var(--text-2); }
.post-market-row-v {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.post-market-foot {
  margin-top: .6rem;
  font-size: .6875rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ── Guarantee card ─────────────────────────────────────────── */
.post-rail-guarantee {
  display: flex;
  gap: .7rem;
  background: var(--accent-soft);
  border-color: transparent;
}
.post-rail-guarantee-mark {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  background: var(--accent-fill);
  color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
}
.post-rail-guarantee-title {
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--accent-dk);
  margin-bottom: .15rem;
}

.post-rail-guarantee-body {
  font-size: .75rem;
  line-height: 1.5;
  color: var(--text-2);
}

/* ── Footer actions ─────────────────────────────────────────── */
.cl-actions {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}
.cl-draft-btn {
  padding: .8rem 1.25rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font-head);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .cl-draft-btn:hover { border-color: var(--border-2); color: var(--text); }
}
.cl-publish-btn {
  flex: 1;
  min-width: 14rem;
  padding: .8rem 1.5rem;
  border: none;
  border-radius: var(--r-sm);
  background: var(--primary-fill);
  color: var(--on-primary);
  font-family: var(--font-head);
  font-size: .9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .cl-publish-btn:hover { background: var(--primary-fill-dk); }
}

/* ── Core spec steppers (post a listing) ────────────────────── */
.cl-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}
@media (max-width: 620px) { .cl-specs { grid-template-columns: 1fr; } }

.cl-spec-field { min-width: 0; }
.cl-stepper {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.cl-stepper:focus-within { border-color: var(--primary); }
.cl-stepper input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: none;
  background: transparent;
  padding: .4rem .3rem;
  text-align: center;
  font-family: var(--font-head);
  /* 16px keeps iOS from zooming the layout viewport on focus. */
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  outline: none;
  /* The native spinners duplicate the buttons either side of them. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.cl-stepper input::-webkit-outer-spin-button,
.cl-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cl-stepper-plain { padding-right: .6rem; }
.cl-stepper-plain input { text-align: left; padding-left: .6rem; font-weight: 600; }
.cl-spec-unit {
  flex-shrink: 0;
  font-size: .8125rem;
  color: var(--muted);
}

.cl-step-btn {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border: none;
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--text-2);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .cl-step-btn:hover { background: var(--primary-soft); color: var(--primary); }
}
.cl-step-btn:active { transform: translateY(1px); }

.cl-spec-hint {
  margin-top: .25rem;
  font-size: .6875rem;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════
   GUIDED SEARCH — header + live intelligence rail
   ═══════════════════════════════════════════════════════════════ */
.gsx-header {
  max-width: 1200px;
  margin: 0 auto var(--sp-6);
  padding: 0 1rem;
}
.gsx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .5rem;
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary);
}
.gsx-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.gsx-title {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--text);
  min-width: 0;
}
.gsx-title-rest { color: var(--text-2); font-weight: 600; }
.gsx-sub {
  margin-top: .5rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 62ch;
}

.gsx-live {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.gsx-live-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}
.gsx-live-count strong { color: var(--text); font-weight: 800; }
.gsx-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: hero-pulse 2.2s var(--ease-in-out) infinite;
}
.gsx-live-sep { width: 1px; height: 14px; background: var(--border); }

/* ── Layout ─────────────────────────────────────────────────── */
.gsx-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem 4rem;
}
@media (max-width: 1020px) {
  .gsx-layout { grid-template-columns: 1fr; }
}
/* The wizard was centred in its own 680px column; inside the grid it is the
   left cell, so it stops centring and stops paying for its own padding. */
.gsx-layout .gs-wrap {
  max-width: none;
  margin: 0;
  padding: 0;
}

.gsx-rail {
  position: sticky;
  top: calc(var(--topbar-h) + 1.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}
@media (max-width: 1020px) {
  /* Below the questions it is no longer a live companion to them, so it
     stops pretending to be pinned. */
  .gsx-rail { position: static; }
}

.gsx-card {
  padding: var(--sp-4);
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
}
.gsx-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: var(--sp-3);
}
.gsx-card-title {
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 700;
  color: var(--text);
}
.gsx-card-note {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Gauge ──────────────────────────────────────────────────── */
.gsx-gauge {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.gsx-gauge svg { flex-shrink: 0; }
#gsx-ring { transition: stroke-dashoffset var(--dur-base) var(--ease-out), stroke var(--dur-fast) var(--ease-out); }
.gsx-gauge-body { min-width: 0; }
.gsx-gauge-num {
  display: block;
  font-family: var(--font-head);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.gsx-gauge-lbl {
  display: block;
  margin-top: .2rem;
  font-size: .8125rem;
  color: var(--text-3);
}
.gsx-gauge-foot {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: .75rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ── Criteria list ──────────────────────────────────────────── */
.gsx-criteria { list-style: none; display: grid; gap: .1rem; }
.gsx-criteria li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .4rem 0;
  font-size: .8125rem;
}
.gsx-criteria li + li { border-top: 1px solid var(--border); }
.gsx-criteria-k { color: var(--text-2); flex-shrink: 0; }
.gsx-criteria-v {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--text);
  text-align: right;
  overflow-wrap: anywhere;
}
.gsx-criteria-empty {
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.5;
  display: block !important;
}

/* ── Match minis ────────────────────────────────────────────── */
.gsx-matches { display: grid; gap: .5rem; }
.gsx-match {
  display: flex;
  gap: .6rem;
  padding: .5rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .gsx-match:hover { border-color: var(--primary); background: var(--primary-soft); }
}
.gsx-match-thumb {
  position: relative;
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--surface-3);
}
.gsx-match-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gsx-match-thumb.is-empty::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--muted);
  opacity: .3;
  -webkit-mask: var(--ph-house) center / 52% no-repeat;
  mask: var(--ph-house) center / 52% no-repeat;
}
.gsx-match-body { display: flex; flex-direction: column; min-width: 0; justify-content: center; }
.gsx-match-price {
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1.3;
}
.gsx-match-title {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gsx-match-meta { font-size: .75rem; color: var(--muted); line-height: 1.3; }

/* ── Shield ─────────────────────────────────────────────────── */
.gsx-shield {
  display: flex;
  gap: .65rem;
  background: var(--accent-soft);
  border-color: transparent;
}
.gsx-shield-mark {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: var(--accent-fill);
  color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
}
.gsx-shield-title {
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--accent-dk);
  margin-bottom: .15rem;
}

.gsx-shield-body { font-size: .75rem; line-height: 1.5; color: var(--text-2); }

/* ── Match factor callout (result rows) ─────────────────────────
   Was a bare italic sentence behind a hairline. It is the one thing on the
   card that answers "why am I being shown this", so it gets a labelled box
   rather than the styling of an aside. */
.match-factor {
  margin: .5rem 0 .1rem;
  padding: .55rem .65rem;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  border: 1px solid var(--primary-soft-2);
}
.match-factor-head {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-bottom: .2rem;
  font-family: var(--font-head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--primary);
}
.match-factor-body {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--text-2);
}
.match-factor .match-reason-pills { margin-top: .4rem; margin-bottom: 0; }
.match-factor .match-reason-pill {
  background: var(--surface);
  border-color: var(--border);
}
.match-reason-pill.match-reason-pill-miss {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--border-2);
}

/* ── Match-score sheet ── */
.match-sheet {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
.match-sheet::backdrop { background: rgba(11,28,48,.45); }
.match-sheet-form { padding: 1.25rem 1.25rem 1.1rem; display: grid; gap: 1rem; }
.match-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.match-sheet-head h2 { margin: 0; font-family: var(--font-head); font-size: 1.1rem; }
.match-sheet-close {
  border: 0; background: none; color: var(--muted);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: .1rem .35rem;
}
.match-sheet-sub { margin: -.6rem 0 0; font-size: .84rem; color: var(--text-2); }
.match-sheet-field { display: grid; gap: .45rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.match-sheet-field > span:first-child,
.match-sheet-field legend { font-size: .78rem; font-weight: 700; color: var(--text-2); padding: 0; margin-bottom: .45rem; }
.match-sheet-money {
  display: flex; align-items: center; gap: .35rem;
  border: 1px solid var(--border-2); border-radius: 10px;
  padding: 0 .75rem; background: var(--surface);
}
.match-sheet-money i { font-style: normal; color: var(--muted); }
.match-sheet-money input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--text);
  font: inherit; font-size: 16px; padding: .6rem 0; outline: none;
}
.match-sheet-money:focus-within { box-shadow: var(--focus-ring); }
.match-sheet-seg, .match-sheet-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.match-sheet-seg label, .match-sheet-tags label { position: relative; cursor: pointer; }
.match-sheet-seg input, .match-sheet-tags input { position: absolute; opacity: 0; pointer-events: none; }
.match-sheet-seg span, .match-sheet-tags span {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 0 .85rem; border-radius: 999px;
  border: 1px solid var(--border-2); background: var(--surface);
  font-size: .82rem; font-weight: 600; color: var(--text-2);
}
.match-sheet-seg input:checked + span,
.match-sheet-tags input:checked + span {
  background: var(--primary-soft); border-color: var(--primary); color: var(--primary);
}
.match-sheet-seg input:focus-visible + span,
.match-sheet-tags input:focus-visible + span { box-shadow: var(--focus-ring); }
.match-sheet-actions { display: flex; justify-content: flex-end; }
.match-sheet-actions .card-btn-primary { width: 100%; justify-content: center; min-height: 42px; }

.save-search-prompt {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem; padding: .85rem 1.2rem;
  border: 1.5px solid var(--primary-soft-2); border-radius: 14px;
  background: var(--primary-soft);
}
.save-search-prompt-title { margin: 0; font-weight: 700; font-size: .92rem; color: var(--text); }
.save-search-prompt-sub { margin: .12rem 0 0; font-size: .8rem; color: var(--text-2); }
.save-search-prompt .card-btn-primary { white-space: nowrap; text-decoration: none; }

.match-prefs-note { margin: 0 0 .75rem; font-size: .8rem; color: var(--muted); }

/* Detail page: offer the sheet where the match module would be. */
.ld-match-cta {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  flex-wrap: wrap;
  padding: .9rem 1rem; margin-bottom: 1rem;
  border: 1px dashed var(--border-2); border-radius: 14px;
  background: var(--surface-2);
}
.ld-match-cta p { margin: 0; font-size: .86rem; color: var(--text-2); }
.ld-match-cta strong { color: var(--text); }
.ld-match-edit {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: inherit; color: var(--primary); text-decoration: underline;
}

/* Photo count, so a row says how much there is to see before you open it. */
.thumb-count {
  position: absolute;
  bottom: .55rem; left: .55rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .18rem .45rem;
  border-radius: var(--r-xs);
  background: rgba(10,15,29,.72);
  color: #fff;
  font-family: var(--font-head);
  font-size: .6875rem;
  font-weight: 700;
  pointer-events: none;
}

/* ── Financial terms ribbon (detail page) ───────────────────── */
.ld-terms {
  /* Was a flat flex row of term cells. It now has a price row above and a
     term row below, so the ribbon stacks them and each row does its own
     laying out. */
  display: block;
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.ld-term { display: flex; flex-direction: column; min-width: 0; }
.ld-term-k {
  font-family: var(--font-head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.ld-term-v {
  font-family: var(--font-head);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--text);
  margin-top: .1rem;
}
.ld-term-good { color: var(--accent-dk); }

/* ── Highlights (detail page) ───────────────────────────────── */
.ld-sec-label {
  font-family: var(--font-head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .55rem;
}
.ld-highlights { margin-bottom: var(--sp-4); }
.ld-highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .4rem;
  list-style: none;
}
.ld-highlight-grid li {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .65rem;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-2);
}
.ld-highlight-grid svg { color: var(--accent); flex-shrink: 0; }

/* ── How Listojo works ───────────────────────────────────────── */
.hiw-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}
@media (max-width: 900px) { .hiw-cards { grid-template-columns: 1fr; } }

.hiw-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
}
.hiw-card-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--primary-soft-2);
  color: var(--primary-dk);
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Each step gets its own accent so the three read as a sequence rather than
   as three copies of the same card. */
.hiw-card:nth-child(2) .hiw-card-n { background: var(--accent-soft); color: var(--accent-dk); }

.hiw-card:nth-child(3) .hiw-card-n { background: var(--ink); color: #fff; }

.hiw-card-kicker {
  font-family: var(--font-head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .3rem;
}
.hiw-card-title {
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: .5rem;
}
.hiw-card-body {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: var(--sp-4);
}
.hiw-card-proof {
  margin-top: auto;
  padding: .6rem .75rem;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-2);
}
.hiw-card-proof-k {
  display: block;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .1rem;
}

/* ═══════════════════════════════════════════════════════════════
   LISTING DETAIL — bento gallery
   ═══════════════════════════════════════════════════════════════ */
.bento {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: .5rem;
  height: clamp(320px, 42vw, 440px);
  margin-bottom: var(--sp-5);
}
/* One photo has nothing to sit beside, so it takes the full width rather
   than leaving four empty boxes. */
.bento-solo { grid-template-columns: 1fr; }
@media (max-width: 760px) {
  .bento { grid-template-columns: 1fr; height: auto; }
}

.bento-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--surface-3);
  min-height: 0;
}
@media (max-width: 760px) { .bento-hero { height: 260px; } }
.bento-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bento-empty {
  position: absolute;
  inset: 0;
  background: var(--muted);
  opacity: .28;
  -webkit-mask: var(--ph-house) center / 26% no-repeat;
  mask: var(--ph-house) center / 26% no-repeat;
}

.bento-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: .5rem;
  min-height: 0;
}
@media (max-width: 760px) {
  .bento-tiles { grid-template-rows: 90px; }
}
.bento-tile {
  position: relative;
  padding: 0;
  border: none;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-3);
  cursor: pointer;
  min-height: 0;
}
.bento-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-base) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .bento-tile:hover img { transform: scale(1.05); }
}

.bento-badges {
  position: absolute;
  top: .75rem; left: .75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  z-index: 2;
}
.bento-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  box-shadow: var(--shadow-xs);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .bento-badge { background: var(--surface); }
}
.bento-badge-verified { color: var(--accent-dk); }

.bento-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1rem .9rem;
  /* The gradient is the legibility device; without it the caption depends on
     whatever happens to be in the bottom of the photo. */
  background: linear-gradient(to top, rgba(10,15,29,.82), transparent);
  pointer-events: none;
}
.bento-caption-k {
  font-size: .75rem;
  font-weight: 600;
  color: rgba(255,255,255,.8);
}
.bento-caption-v {
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: #fff;
  line-height: 1.3;
}

.bento-actions {
  position: absolute;
  right: .75rem; bottom: .75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .4rem;
  z-index: 2;
}
.bento-action {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border: none;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .bento-action:hover { background: var(--surface-2); }
}
.bento-action-tour {
  background: var(--primary-fill);
  color: var(--on-primary);
}
@media (hover:hover) and (pointer:fine) {
  .bento-action-tour:hover { background: var(--primary-fill-dk); color: var(--on-primary); }
}

/* ═══════════════════════════════════════════════════════════════
   LISTING DETAIL — match analysis
   ═══════════════════════════════════════════════════════════════ */
.ld-match {
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  border-radius: var(--r);
  background: var(--primary-soft);
  border: 1px solid var(--primary-soft-2);
  color: var(--primary);
}
.ld-match-fair { background: var(--surface-2); border-color: var(--border); color: var(--featured); }
.ld-match-weak { background: var(--surface-2); border-color: var(--border); color: var(--muted); }

.ld-match-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.ld-match-mark {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  background: currentColor;
  display: flex; align-items: center; justify-content: center;
}
.ld-match-mark svg { color: var(--surface); }
.ld-match-lead { flex: 1; min-width: 12rem; }
.ld-match-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--text);
}
.ld-match-flag {
  padding: .15rem .55rem;
  border-radius: 999px;
  background: currentColor;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 0;
}
/* The flag's text takes the card background so it reads on the fill. */
.ld-match-flag { color: inherit; }
.ld-match .ld-match-flag { background: var(--surface); }
.ld-match-sub {
  margin-top: .15rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--text-2);
}

.ld-match-dial { position: relative; flex-shrink: 0; }
.ld-match-dial circle:last-child { transition: stroke-dashoffset var(--dur-base) var(--ease-out); }
.ld-match-dial-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
}
.ld-match-dial-num i { font-style: normal; font-size: .75rem; margin-left: .05rem; }

.ld-match-why {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--text-2);
}

/* ── Fit Report: one row per dimension — what was measured, its score, the fact ── */
.fit-group { margin-top: var(--sp-4); }
.fit-group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  margin: 0 0 .25rem;
  font-family: var(--font-head); font-size: .6875rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-2);
}
.fit-group-head span { font-family: var(--font-body); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.fit-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 2rem;
  align-items: center;
  column-gap: .75rem;
  row-gap: .15rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--border);
}
.fit-row-k { font-size: .8125rem; font-weight: 600; color: var(--text); }
.fit-bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.fit-bar i { display: block; height: 100%; border-radius: inherit; background: currentColor; }
.fit-bar-empty { background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 10px); }
.fit-row-n { font-size: .8125rem; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.fit-row-v { grid-column: 2 / -1; font-size: .8125rem; line-height: 1.45; color: var(--text-2); }
.fit-row-v em { font-style: normal; color: var(--muted); }
.fit-row-empty .fit-row-k, .fit-row-empty .fit-row-n, .fit-row-empty .fit-row-v { color: var(--muted); }
@media (max-width: 520px) {
  .fit-row { grid-template-columns: minmax(0, 1fr) 5rem 2rem; }
  .fit-row-v { grid-column: 1 / -1; }
}

.fit-differs {
  margin-top: var(--sp-4); padding: .65rem .85rem;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface);
  font-size: .8125rem; color: var(--text-2);
}
.fit-differs-k {
  display: block; margin-bottom: .2rem;
  font-family: var(--font-head); font-size: .6875rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.fit-differs ul { margin: 0; padding-left: 1.1rem; }
.fit-facts { margin: 0; }
.fit-fact {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: .75rem;
  padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .8125rem;
}
.fit-fact dt { font-weight: 600; color: var(--text); }
.fit-fact dd { margin: 0; line-height: 1.45; color: var(--text-2); }
.fit-fact dd em { font-style: normal; color: var(--muted); }
.fit-fact-empty dt, .fit-fact-empty dd { color: var(--muted); }
@media (max-width: 520px) { .fit-fact { grid-template-columns: 1fr; row-gap: .1rem; } }
.fit-foot { margin: .6rem 0 0; font-size: .75rem; color: var(--muted); }

/* Search card: the one best reason and the catch, compactly. */
.fit-card-best { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--text); }
.fit-card-miss { margin: .35rem 0 0; font-size: .8125rem; line-height: 1.45; color: var(--muted); }
.fit-card-foot { margin: .35rem 0 0; font-size: .6875rem; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   LISTING DETAIL — booking rail
   ═══════════════════════════════════════════════════════════════ */
.ld-rail {
  position: sticky;
  top: calc(var(--topbar-h) + 1.25rem);
  scroll-margin-top: calc(var(--topbar-h) + 1.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}
@media (max-width: 900px) { .ld-rail { position: static; } }

.ld-rail-card {
  padding: var(--sp-4);
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
}

.ld-owner {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.ld-owner-mark {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--primary-soft-2);
  color: var(--primary-dk);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

.ld-owner-body { min-width: 0; }
.ld-owner-name {
  font-family: var(--font-head);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.ld-owner-kind {
  display: flex;
  align-items: center;
  gap: .25rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--accent-dk);
  line-height: 1.3;
}

.ld-rail-label {
  font-family: var(--font-head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .5rem;
}
.ld-rail-label-2 { margin-top: var(--sp-4); }

/* ── Tour picker ────────────────────────────────────────────── */
.ld-days {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .3rem;
  margin-bottom: .4rem;
  border-radius: var(--r-sm);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
/* Flashed when the tour button is pressed with no day chosen. */
.ld-days.is-asking { box-shadow: 0 0 0 3px var(--primary-soft-2); }

.ld-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .45rem .2rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.ld-day-name {
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  color: var(--text);
}
.ld-day-date { font-size: .6875rem; color: var(--muted); }
@media (hover:hover) and (pointer:fine) {
  .ld-day:hover { border-color: var(--border-2); }
}
.ld-day.is-on {
  background: var(--primary-fill);
  border-color: var(--primary-fill);
}
.ld-day.is-on .ld-day-name,
.ld-day.is-on .ld-day-date { color: var(--on-primary); }

.ld-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .3rem;
}
.ld-slot {
  padding: .45rem .3rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .ld-slot:hover { border-color: var(--border-2); color: var(--text); }
}
.ld-slot.is-on {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 700;
}

/* ── CTAs ───────────────────────────────────────────────────── */
.ld-rail-ctas {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: var(--sp-3);
}
.ld-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  padding: .7rem 1rem;
  border: none;
  border-radius: var(--r-sm);
  background: var(--primary-fill);
  color: var(--on-primary);
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .ld-cta:hover { background: var(--primary-fill-dk); color: var(--on-primary); }
}
.ld-cta-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
}
@media (hover:hover) and (pointer:fine) {
  .ld-cta-ghost:hover { background: var(--surface-2); border-color: var(--border-2); color: var(--text); }
}
.ld-cta-send { margin-top: .5rem; }

/* ── Quick questions ────────────────────────────────────────── */
.ld-quick { display: flex; flex-wrap: wrap; gap: .3rem; }
.ld-quick-chip {
  padding: .35rem .7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .ld-quick-chip:hover { border-color: var(--primary); color: var(--primary); }
}
.ld-quick-chip.is-on {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

/* ── Inquiry fields ─────────────────────────────────────────── */
.ld-fields { margin-top: var(--sp-4); }
.ld-fields p { margin-bottom: .6rem; }
.ld-fields label {
  display: block;
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: .2rem;
}
.ld-fields textarea { min-height: 96px; resize: vertical; }

.ld-rail-note {
  margin-top: .5rem;
  font-size: .6875rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}
.ld-rail-closed {
  font-size: .875rem;
  font-weight: 600;
  color: #DC2626;
}

/* ── Policy + agent cards ───────────────────────────────────── */
.ld-policy {
  display: flex;
  gap: .65rem;
  background: var(--accent-soft);
  border-color: transparent;
}
.ld-policy-mark {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: var(--accent-fill);
  color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
}
.ld-policy-title {
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--accent-dk);
  margin-bottom: .15rem;
}

.ld-policy-body { font-size: .75rem; line-height: 1.5; color: var(--text-2); }

.ld-agent-title {
  font-family: var(--font-head);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .25rem;
}
.ld-agent-body {
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--text-2);
  margin-bottom: var(--sp-3);
}

/* ═══════════════════════════════════════════════════════════════
   LISTING DETAIL — header, terms ribbon, spec grid
   ═══════════════════════════════════════════════════════════════ */
.ld-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.ld-top-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  min-width: 0;
}
.ld-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-2);
}
.ld-tag-verified {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-dk);
}

.ld-tag-featured {
  background: var(--featured);
  border-color: transparent;
  color: #fff;
}
.ld-tag-cut {
  background: var(--accent-fill);
  border-color: transparent;
  color: var(--on-accent);
}
.ld-tag-time { font-size: .75rem; color: var(--muted); }

.ld-top-actions { display: flex; gap: .35rem; flex-shrink: 0; }
.ld-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-width: 34px;
  height: 34px;
  padding: 0 .5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .ld-icon-btn:hover { border-color: var(--primary); color: var(--primary); }
}
.ld-icon-btn.save-pill-active { color: #E11D48; border-color: #FBCFE8; }
.ld-icon-btn.save-pill-active svg { fill: currentColor; }

.ld-h1 {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: .35rem;
}
.ld-address {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .9375rem;
  color: var(--text-3);
  margin-bottom: var(--sp-4);
}
.ld-address svg { color: var(--muted); flex-shrink: 0; }

/* ── Terms ribbon ───────────────────────────────────────────── */
.ld-terms-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.ld-terms-price {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
}
.ld-price-was {
  font-size: .875rem;
  color: var(--muted);
  text-decoration: line-through;
}
.ld-price-flag {
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--on-accent);
  font-family: var(--font-head);
  font-size: .6875rem;
  font-weight: 700;
}
.ld-terms-aside { display: flex; flex-direction: column; text-align: right; }
.ld-terms-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
}
/* The ribbon now owns its own padding via .ld-terms; the rows inside it are
   plain flex, so the earlier gap/padding on .ld-terms is unchanged. */

/* ── Spec grid ──────────────────────────────────────────────── */
.ld-spec-ico {
  display: block;
  margin-bottom: .3rem;
  color: var(--primary);
}
.ld-spec-ico svg { display: block; margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════════
   HOME — reference pass 2
   Full-width alternating bands, coloured step cards, the three-up
   trending grid, centred testimonials, city hubs and the inline
   alerts form. Hero and carousel rules are deliberately untouched.
   ═══════════════════════════════════════════════════════════════ */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Bands. The tint runs edge to edge of the viewport while the content keeps
   the page's max width: a spread shadow paints the colour sideways and the
   clip-path lets it out past the column. */
.home-band { padding-block: var(--sp-10); }
.home-band-tint {
  background: var(--surface-2);
  box-shadow: 0 0 0 100vmax var(--surface-2);
  clip-path: inset(0 -100vmax);
}
.metrics-bar {
  margin-bottom: 0;
  padding-block: var(--sp-8);
  background: var(--surface);
  box-shadow: 0 0 0 100vmax var(--surface), 0 1px 0 100vmax var(--border);
  clip-path: inset(0 -100vmax);
}
.metric-card { background: var(--surface-2); border-color: transparent; padding: var(--sp-4) var(--sp-5); }
.metric-num { font-size: clamp(2.25rem, 3.6vw, 3.5rem); }
.metric-label { font-size: 1.25rem; }
.home-band .section-header { margin-bottom: var(--sp-8); align-items: flex-end; }
@media (max-width: 600px) { .home-band { padding-block: var(--sp-8); } }

.section-pill-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem 1rem;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--primary);
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .section-pill-link:hover { background: var(--primary-soft-2); color: var(--primary); }
}
.section-header-center {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto var(--sp-8);
}
.section-header-center .section-sub { margin-inline: auto; }

/* How it works — step colours: cobalt, emerald, ink. */
.hiw-cards { gap: var(--sp-7); }
.hiw-card {
  padding: var(--sp-8);
  border: none;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) { .hiw-card:hover { box-shadow: var(--shadow-lg); } }
.hiw-card-n {
  width: 56px; height: 56px;
  margin-bottom: var(--sp-6);
  border-radius: var(--r);
  font-size: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.hiw-cards .hiw-card .hiw-card-n-1 { background: var(--primary-fill); color: var(--on-primary); }
.hiw-cards .hiw-card .hiw-card-n-2 { background: var(--accent-fill); color: #fff; }
.hiw-cards .hiw-card .hiw-card-n-3 { background: var(--ink); color: #fff; }

.hiw-card-kicker { display: inline-flex; align-items: center; gap: .35rem; }
.hiw-kicker-1 { color: var(--primary); }
.hiw-kicker-2 { color: var(--accent-dk); }

.hiw-kicker-3 { color: var(--text); }
.hiw-card-title { font-size: 1.5rem; margin-bottom: .6rem; }
.hiw-card-body { font-size: 1rem; }
.hiw-card-proof { margin-top: auto; padding: .6rem .75rem; font-weight: 500; color: var(--text); }
.hiw-card-proof-ok { background: var(--accent-soft); color: var(--accent-dk); font-weight: 600; }
.hiw-card-proof-ok .hiw-card-proof-k { color: var(--accent-dk); }

.hiw-card-proof-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.hiw-card-proof-row .hiw-card-proof-k { margin: 0; }
.hiw-card-proof-ok-text { font-size: .6875rem; font-weight: 700; color: var(--accent-dk); }

/* Trending — three-up grid of full cards. */
.trend-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
@media (max-width: 1080px) { .trend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .trend-grid { grid-template-columns: 1fr; } }
.trend-grid .trend-card { width: auto; border: none; box-shadow: var(--shadow-sm); }
@media (hover:hover) and (pointer:fine) {
  .trend-grid .trend-card:hover { box-shadow: var(--shadow-lg); transform: none; }
}
.trend-grid .trend-card-media { height: auto; aspect-ratio: 16 / 10; }
.trend-grid .trend-card-media img { transition-duration: 500ms; }
.trend-chips {
  position: absolute;
  top: .6rem; left: .6rem;
  display: flex;
  gap: .3rem;
}
.trend-chips .trend-chip { position: static; display: inline-flex; align-items: center; gap: .2rem; box-shadow: var(--shadow-xs); }
.trend-chip-soft {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--accent-dk);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.trend-score {
  position: absolute;
  top: .6rem; right: .6rem;
  padding: .22rem .6rem;
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--on-accent);
  font-family: var(--font-head);
  font-size: .6875rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.trend-verified {
  position: absolute;
  left: .6rem; right: .6rem; bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .55rem;
  border-radius: var(--r-xs);
  background: rgba(10,15,29,.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-head);
  font-size: .6875rem;
  font-weight: 600;
}
.trend-verified svg { color: var(--accent-2); flex-shrink: 0; }

.trend-grid .trend-card-body { padding: var(--sp-6); gap: .25rem; }
.trend-grid .trend-card-price { font-size: 1.5rem; }
.trend-grid .trend-card-pricerow { align-items: center; margin-bottom: .1rem; }
.trend-fav {
  flex-shrink: 0;
  margin-left: auto;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.trend-fav svg { fill: currentColor; }
.trend-fav:active { transform: scale(.92); }
@media (hover:hover) and (pointer:fine) {
  .trend-fav:hover { background: #FDE8EC; color: #E11D48; }
}
.trend-fav.save-pill-active { color: #E11D48; background: #FDE8EC; }

.trend-grid .trend-card-title { font-size: 1.25rem; -webkit-line-clamp: 1; line-clamp: 1; }
.trend-grid .trend-card-loc { font-size: .875rem; color: var(--text-2); margin-top: .15rem; }
.trend-grid .trend-card-loc svg { color: var(--primary); }
.trend-grid .trend-card-specs {
  gap: .4rem var(--sp-4);
  margin: .6rem 0;
  padding: .6rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .8125rem;
}
.trend-grid .trend-card-specs li { display: inline-flex; align-items: center; gap: .3rem; }
.trend-grid .trend-card-specs li + li::before { content: none; }
.trend-reason {
  display: flex;
  align-items: flex-start;
  gap: .35rem;
  margin-bottom: var(--sp-4);
  padding: .55rem .7rem;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.45;
}
.trend-reason svg { flex-shrink: 0; margin-top: .15rem; }
.trend-grid .trend-card-cta {
  display: block;
  margin: auto 0 0;
  padding: .6rem;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--primary);
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .trend-grid .trend-card-cta:hover { background: var(--primary-fill); color: var(--on-primary); }
}

/* Testimonials */
.home-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
@media (max-width: 900px) { .home-testimonials-grid { grid-template-columns: 1fr; } }
.home-band .testimonial-v2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: var(--sp-8);
  border: none;
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.home-band .testimonial-stars { display: flex; gap: .15rem; color: var(--accent-dk); margin-bottom: var(--sp-4); }

.home-band .testimonial-quote { font-size: 1rem; line-height: 1.65; color: var(--text); font-style: normal; margin: 0 0 var(--sp-6); }
.home-band .testimonial-author { padding: .6rem; border-radius: var(--r-sm); background: var(--surface-2); gap: .65rem; }
.home-band .testimonial-avatar { width: 40px; height: 40px; font-size: 1.1rem; color: #fff; }
.testimonial-avatar-1 { background: var(--primary-fill); }
.testimonial-avatar-2 { background: var(--ink); }
.testimonial-avatar-3 { background: var(--accent-dk); }

.home-band .testimonial-name { font-family: var(--font-head); font-size: .875rem; font-weight: 700; color: var(--text); }
.home-band .testimonial-role { font-size: .8125rem; color: var(--text-3); }

/* City hubs — hover fills with cobalt like the reference. */
.home-band .city-tile {
  justify-content: space-between;
  border: none;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.home-band .city-tile-name { font-size: 1.125rem; }
.home-band .city-tile-sub { font-size: .8125rem; color: var(--text-3); }
.city-tile-flag-muted { color: var(--text-3); }

@media (hover:hover) and (pointer:fine) {
  .home-band .city-tile:hover { background: var(--primary-fill); transform: none; box-shadow: var(--shadow-md); }
  .home-band .city-tile:hover .city-tile-top,
  .home-band .city-tile:hover .city-tile-flag,
  .home-band .city-tile:hover .city-tile-name { color: var(--on-primary); }
  .home-band .city-tile:hover .city-tile-sub { color: rgba(255,255,255,.8); }
}

/* Alerts band with inline email */
.alerts-band { margin-block: var(--sp-6) var(--sp-8); padding: var(--sp-6); border: none; }
.alerts-band-mark { width: 48px; height: 48px; border-radius: var(--r); box-shadow: var(--shadow-sm); }
.alerts-band-title { font-size: 1.25rem; }
.alerts-band-form { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.alerts-band-input {
  width: 16rem;
  padding: .6rem .9rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: .875rem;
}
.alerts-band-input:focus { outline: none; box-shadow: var(--focus-ring); }
.alerts-band .alerts-band-btn { background: var(--accent-fill); color: var(--on-accent); padding: .6rem 1rem; box-shadow: var(--shadow-sm); border: none; cursor: pointer; }
@media (hover:hover) and (pointer:fine) {
  .alerts-band .alerts-band-btn:hover { background: var(--accent-fill-dk); color: var(--on-accent); }
}
@media (max-width: 760px) {
  .alerts-band-form { width: 100%; }
  .alerts-band-input { flex: 1; width: auto; min-width: 0; }
}

/* Landlord CTA — inline checks, glass ghost button, city-block graphic. */
.landlord-cta { margin-bottom: var(--sp-8); padding: clamp(2rem, 4.5vw, 4rem); border-radius: var(--r); box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); align-items: center; }
.landlord-cta-copy { max-width: 46rem; }
.landlord-cta-eyebrow { color: var(--accent-2); }
.landlord-cta-title { font-size: clamp(2rem, 3.4vw, 2.75rem); }
.landlord-cta-sub { font-size: 1.125rem; color: rgba(234,241,255,.9); max-width: 42rem; }
.landlord-cta-points { display: flex; flex-wrap: wrap; gap: .6rem var(--sp-6); }
.landlord-cta-points li { align-items: center; color: rgba(234,241,255,.9); }
.landlord-cta-btn { padding: 1rem 2.5rem; box-shadow: var(--shadow-md); }
.landlord-cta-btn-ghost { border: none; background: rgba(255,255,255,.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: none; }
@media (hover:hover) and (pointer:fine) {
  .landlord-cta-btn-ghost:hover { background: rgba(255,255,255,.2); border: none; }
}

/* ═══════════════════════════════════════════════════════════════
   LISTING DETAIL — reference pass 2
   The header and About read as open page sections (no card), the
   spec strip spans the column, the price row is open with the
   terms as one inline line, and the inquiry form is compact.
   The bento gallery is deliberately untouched.
   ═══════════════════════════════════════════════════════════════ */
.ld-flat { padding: 0; background: none; border: none; box-shadow: none; }
.ld-main { gap: var(--sp-8) !important; }
.ld-main > .card { border: none; box-shadow: var(--shadow-sm); border-radius: var(--r); }

.ld-top { margin-bottom: var(--sp-3); }
.ld-tag-time { display: inline-flex; align-items: center; gap: .25rem; }
.ld-icon-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ld-icon-btn-text { width: auto; padding: 0 .9rem; border-radius: 999px; font-family: var(--font-head); font-size: .8125rem; font-weight: 600; text-decoration: none; }
@media (hover:hover) and (pointer:fine) {
  .ld-icon-btn:hover { background: var(--surface-2); color: var(--primary); border-color: var(--border-2); }
}
.ld-icon-btn.save-pill-active { color: #E11D48; border-color: rgba(225,29,72,.3); background: #FDE8EC; }
.ld-icon-btn.save-pill-active svg { fill: currentColor; }

.ld-h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.2; letter-spacing: -.025em; }

/* Spec strip: equal tiles that span the column. */
.ld-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--sp-2);
  margin-block: var(--sp-5);
}
.ld-spec { max-width: none; padding: .8rem .6rem; background: var(--surface); box-shadow: var(--shadow-xs); }
.ld-spec-num-sm { font-size: 1rem; line-height: 1.5; }

/* Open price row with the terms on one line underneath. */
.ld-flat .ld-terms {
  padding: var(--sp-5) 0;
  margin-bottom: var(--sp-5);
  border-radius: 0;
  background: none;
  border: none;
  border-block: 1px solid var(--border);
}
.ld-flat .ld-terms-top { border: none; padding-bottom: 0; margin-bottom: var(--sp-2); }
.ld-flat .ld-price { font-size: clamp(2rem, 3vw, 2.5rem); }
.ld-flat .ld-terms-row { gap: .35rem 0; align-items: center; }
.ld-flat .ld-term { flex-direction: row; align-items: baseline; gap: .3rem; font-size: .875rem; }
.ld-flat .ld-term + .ld-term::before { content: '•'; margin: 0 .7rem; color: var(--border-2); }
.ld-flat .ld-term-k { font-size: .8125rem; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--text-3); }
.ld-flat .ld-term-v { font-size: .875rem; font-weight: 600; }
.ld-flat .ld-term-good { color: var(--accent-dk); }

.ld-highlight-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ld-highlight-grid li { background: var(--surface); text-transform: capitalize; }

.ld-sec-title {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: var(--sp-3);
}
.ld-about-body { font-size: 1rem; line-height: 1.75; color: var(--text-2); margin: 0; }

/* Rail — the live-chat button and phone line moved in from the old card. */
.ld-rail-ctas .ld-cta { width: 100%; }
button.ld-cta-ghost { cursor: pointer; }
.ld-rail-phone {
  display: block;
  text-align: center;
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
@media (hover:hover) and (pointer:fine) { .ld-rail-phone:hover { text-decoration: underline; } }

/* Compact inquiry form: name/email/phone share rows, a three-line message. */
.ld-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ld-fields p { margin: 0; }
.ld-fields p:has(textarea), .ld-fields p:first-child { grid-column: 1 / -1; }
.ld-fields label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.ld-fields input, .ld-fields textarea {
  width: 100%;
  padding: .55rem .7rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: .875rem;
}
.ld-fields textarea { min-height: 0; height: 84px; }
.ld-fields input:focus, .ld-fields textarea:focus { outline: none; background: var(--surface); box-shadow: var(--focus-ring); }

/* Amenity tiles (listing detail) */
.ld-amen-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.ld-amen-head .ld-sec-title { margin: 0; }
.ld-amen-count { font-family: var(--font-head); font-size: .8125rem; font-weight: 700; color: var(--primary); }
.ld-amen-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; }
.ld-amen-tile {
  display: flex; align-items: center; gap: .7rem;
  padding: var(--sp-4);
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) { .ld-amen-tile:hover { border-color: var(--primary-soft-2); box-shadow: var(--shadow-sm); } }
.ld-amen-ico { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); background: var(--primary-soft); color: var(--primary); }
.ld-amen-name { font-family: var(--font-head); font-size: .9375rem; font-weight: 700; color: var(--text); text-transform: capitalize; line-height: 1.3; }
/* Spec tiles: up to five across, but a lone tile keeps tile width. */
.ld-specs { grid-template-columns: repeat(auto-fill, minmax(max(110px, calc((100% - 4 * var(--sp-2)) / 5)), 1fr)); }

/* ═══════════════════════════════════════════════════════════════
   RESULTS — reference pass 2
   ═══════════════════════════════════════════════════════════════ */
/* Book tour only shows in split view (see listing_list.html). */
.card-btn-tour {
  display: none;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border-radius: var(--r-sm);
  background: var(--primary-fill);
  color: var(--on-primary);
  font-family: var(--font-head);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: background var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .card-btn-tour:hover { background: var(--primary-fill-dk); color: var(--on-primary); }
}
.card-actions .card-btn-primary, .card-actions .card-btn-secondary { border-radius: var(--r-sm); }
.results-filters { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.results-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .4rem .3rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
}
.results-filter.is-on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.results-filter-k { color: var(--text-3); font-weight: 500; }
.results-filter.is-on .results-filter-k { color: var(--primary); }
.results-filter select {
  border: none;
  background: transparent;
  padding: 0 .2rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-height: 0;
  height: auto;
  box-shadow: none;
}
.results-filter select:focus { outline: none; }
.results-filter:focus-within { box-shadow: var(--focus-ring); }
.results-filters-rule { width: 1px; height: 22px; background: var(--border); margin: 0 .3rem; }

/* ═══════════════════════════════════════════════════════════════
   POST A LISTING — reference pass 2
   ═══════════════════════════════════════════════════════════════ */
/* Step bar: flat, a line under it, circles with status underneath. */
.post-steps {
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.post-step { background: none; border: none; padding: .25rem 0; align-items: center; gap: .65rem; }
@media (hover:hover) and (pointer:fine) { .post-step:hover .post-step-title { color: var(--primary); } }
.post-step-n { width: 32px; height: 32px; font-size: .8125rem; background: var(--surface-2); color: var(--text-3); box-shadow: inset 0 0 0 1px var(--border); }
.post-step-title { font-weight: 600; color: var(--text-3); }
.post-step-status {
  font-family: var(--font-head);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-step-state { display: none; }
.post-step.is-active .post-step-n { background: var(--primary-fill); color: var(--on-primary); box-shadow: 0 0 0 4px var(--primary-soft-2); }
.post-step.is-active .post-step-title { color: var(--primary); font-weight: 700; }
.post-step.is-active .post-step-status { color: var(--primary); }
.post-step.is-done { background: none; border: none; }
.post-step.is-done .post-step-n { box-shadow: none; }
.post-step.is-done .post-step-title { color: var(--text); }
.post-step.is-done .post-step-status { color: var(--accent-dk); }

/* Section header badge */
.cl-section-badge {
  margin-left: auto;
  flex-shrink: 0;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dk);
  font-family: var(--font-head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Listing type tiles: full width, icon + label + one line of what it is. */
#cl-sec-1 .cl-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
#cl-sec-1 .cl-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: var(--sp-5) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
}
#cl-sec-1 .cl-cat-icon { margin-bottom: .25rem; }
#cl-sec-1 .cl-cat-label { font-family: var(--font-head); font-size: .9375rem; color: var(--text); }
.cl-cat-sub { font-size: .75rem; color: var(--text-3); }
#cl-sec-1 .cl-cat-card.selected { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary); }
#cl-sec-1 .cl-cat-card.selected .cl-cat-sub { color: var(--primary); }

/* Commission-free guarantee callout (pricing) */
.cl-guarantee {
  display: flex;
  gap: .75rem;
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r);
  background: var(--primary-soft);
}
.cl-guarantee-mark {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary-fill);
  color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
}
.cl-guarantee-title { font-family: var(--font-head); font-size: .875rem; font-weight: 700; color: var(--primary); margin: 0 0 .2rem; }
.cl-guarantee-title span { margin-left: .4rem; font-size: .625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.cl-guarantee-body { font-size: .8125rem; line-height: 1.55; color: var(--text-2); margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   GUIDED SEARCH — phase stepper (reference pass 2)
   ═══════════════════════════════════════════════════════════════ */
.gsx-stepper {
  margin-bottom: var(--sp-6);
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.gsx-stepper .gs-progress-wrap { margin: var(--sp-3) 0 0; }
.gsx-phases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}
.gsx-phase { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.gsx-phase-n {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-3);
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 700;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.gsx-phase-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.gsx-phase-k { font-family: var(--font-head); font-size: .625rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.gsx-phase-title { font-family: var(--font-head); font-size: .8125rem; font-weight: 700; color: var(--text-3); }
.gsx-phase.is-active .gsx-phase-n { background: var(--primary-fill); color: var(--on-primary); box-shadow: 0 0 0 4px var(--primary-soft-2); }
.gsx-phase.is-active .gsx-phase-k, .gsx-phase.is-active .gsx-phase-title { color: var(--primary); }
.gsx-phase.is-done .gsx-phase-n { background: var(--accent-soft); color: var(--accent-dk); box-shadow: none; font-size: 0; }
.gsx-phase.is-done .gsx-phase-n::after { content: '✓'; font-size: .9375rem; }

.gsx-phase.is-done .gsx-phase-title { color: var(--text); }
@media (max-width: 760px) {
  .gsx-phases { grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .gsx-phase-body { display: none; }
  .gsx-phase.is-active .gsx-phase-body { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════
   COMMUTE & NEIGHBORHOOD SCORE — one card (listing + community)
   ═══════════════════════════════════════════════════════════════ */
.nb-card {
  padding: var(--sp-6);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.nb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.nb-title { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); margin: 0; }
.nb-sub { font-size: .875rem; color: var(--text-3); margin: .15rem 0 0; }
.nb-walk-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text-2);
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 600;
}
.nb-walk-badge svg, .nb-walk-badge strong { color: var(--accent-dk); }

.nb-label {
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: var(--sp-5) 0 var(--sp-3);
}
.nb-head + .nb-label, .nb-head + .nb-tiles { margin-top: 0; }
.nb-sublabel { font-family: var(--font-head); font-size: .8125rem; font-weight: 700; color: var(--text); margin: var(--sp-3) 0 .35rem; }

.nb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-3); }
.nb-tile {
  display: flex; flex-direction: column; gap: .15rem;
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.nb-tile-k { font-family: var(--font-head); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0; }
.nb-tile-v { font-family: var(--font-head); font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); margin: 0; }
.nb-tile-v span { font-size: .8125rem; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.nb-tile-sub { font-size: .8125rem; color: var(--text-2); margin: 0; }
.nb-bar { display: block; height: 4px; margin-top: .6rem; border-radius: 999px; background: var(--border); overflow: hidden; }
.nb-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--primary-fill); }
.nb-tone-strong { background: var(--accent-fill); }
.nb-tone-fair { background: #D97706; }
.nb-tone-weak { background: var(--muted); }

.nb-station {
  display: flex; align-items: center; gap: .75rem;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--primary-soft);
}
.nb-station-mark { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-sm); background: var(--primary-fill); color: var(--on-primary); display: flex; align-items: center; justify-content: center; }
.nb-station-name { font-family: var(--font-head); font-size: .9375rem; font-weight: 700; color: var(--text); margin: 0; }
.nb-station-sub { font-size: .8125rem; color: var(--text-2); margin: 0; }

.nb-rows { list-style: none; margin: 0; padding: 0; }
.nb-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--border); font-size: .875rem; }
.nb-rows li:last-child { border-bottom: none; }
.nb-row-main { min-width: 0; }
.nb-row-main strong { font-weight: 600; color: var(--text); }
.nb-row-meta { margin-left: .3rem; font-size: .8125rem; color: var(--text-3); }
.nb-row-val { font-weight: 700; white-space: nowrap; color: var(--text); }
.nb-row-val span { font-weight: 500; color: var(--text-3); }
.nb-route { display: inline-block; margin-right: .2rem; padding: .05rem .35rem; border-radius: 4px; font-size: .6875rem; font-weight: 700; }
.nb-foot { font-size: .75rem; color: var(--text-3); margin: .5rem 0 0; }

.nb-schools { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-3); }
.nb-school { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--surface-2); }
.nb-school-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.nb-school-id { min-width: 0; }
.nb-school-name { font-family: var(--font-head); font-size: .875rem; font-weight: 700; color: var(--text); margin: 0; line-height: 1.3; }
.nb-school-name a { color: inherit; text-decoration: none; }
@media (hover:hover) and (pointer:fine) { .nb-school-name a:hover { color: var(--primary); } }
.nb-school-sub { font-size: .75rem; color: var(--text-3); margin: .1rem 0 0; }
.nb-school-rating { flex-shrink: 0; padding: .15rem .45rem; border-radius: var(--r-xs); color: #fff; font-family: var(--font-head); font-size: .8125rem; font-weight: 800; }
.nb-school-row { display: flex; justify-content: space-between; gap: .5rem; padding-top: .35rem; font-size: .75rem; color: var(--text-2); }
.nb-school-row strong { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════
   DETAIL — shared bits added in the community pass
   ═══════════════════════════════════════════════════════════════ */
.ld-crumbs a { display: inline-flex; align-items: center; gap: .3rem; }
.ld-crumb-sep {
  width: 14px; height: 14px;
  display: inline-block;
  background: var(--muted);
  opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.ld-tag { display: inline-flex; align-items: center; gap: .3rem; }
.ld-price-from { font-size: .45em; font-weight: 600; letter-spacing: 0; color: var(--text-3); margin-right: .15rem; vertical-align: middle; }

/* Tour type segmented control (community rail) */
.ld-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; margin-bottom: .5rem; border-radius: var(--r-sm); background: var(--surface-2); }
.ld-type {
  padding: .45rem .3rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ld-type.is-on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-xs); }

/* Zero-markup line inside the rail card */
.ld-rail-policy {
  display: flex; align-items: flex-start; gap: .55rem;
  margin-top: var(--sp-3);
  padding: .65rem .75rem;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-dk);
  font-size: .75rem;
  line-height: 1.45;
}
.ld-rail-policy svg { flex-shrink: 0; margin-top: .05rem; }
.ld-rail-policy strong { display: block; font-family: var(--font-head); font-size: .8125rem; }

/* Move-in special */
.cd-special {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: var(--sp-4);
  padding: .65rem .9rem;
  border-radius: var(--r-sm);
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  color: #9A3412;
  font-size: .875rem;
}
.cd-special-mark { display: flex; color: #EA580C; }
.cd-special-text { flex: 1; min-width: 0; }
.cd-special-close { width: 28px; height: 28px; flex-shrink: 0; border: none; border-radius: 50%; background: transparent; color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.cd-special-close:hover { background: rgba(154,52,18,.1); }

/* Policies as highlights */
.cd-policies { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-2); }
.cd-policies li { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .8rem; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); font-size: .8125rem; color: var(--text-2); line-height: 1.45; }
.cd-policies strong { display: block; font-family: var(--font-head); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: .1rem; }
.cd-policy-ico { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r-xs); background: var(--primary-soft); color: var(--primary); }

/* Floor plans */
.cd-fp-tabs { display: flex; gap: .35rem; flex-wrap: wrap; }
.cd-fp-tab {
  padding: .35rem .8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font-head);
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
}
.cd-fp-tab.is-on { background: var(--primary-fill); border-color: var(--primary-fill); color: var(--on-primary); }
.cd-fp-list { display: grid; gap: var(--sp-3); }
.cd-fp { padding: var(--sp-4) var(--sp-5); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-sm); }
.cd-fp-head { display: flex; align-items: flex-start; gap: var(--sp-4); }
.cd-fp-img { width: 72px; height: 60px; flex-shrink: 0; border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--border); }
.cd-fp-img-empty { display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--muted); }
.cd-fp-id { flex: 1; min-width: 0; }
.cd-fp-name { font-family: var(--font-head); font-size: 1.0625rem; font-weight: 700; color: var(--text); margin: 0; }
.cd-fp-specs { font-size: .8125rem; color: var(--text-3); margin: .1rem 0 .35rem; }
.cd-fp-chip { display: inline-block; padding: .12rem .55rem; border-radius: 999px; background: var(--surface-2); color: var(--text-3); font-family: var(--font-head); font-size: .6875rem; font-weight: 700; }
.cd-fp-chip-ok { background: var(--accent-soft); color: var(--accent-dk); }

.cd-fp-price { flex-shrink: 0; font-family: var(--font-head); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); margin: 0; }
.cd-fp-price span { font-size: .8125rem; font-weight: 500; color: var(--text-3); }
.cd-fp-desc { font-size: .8125rem; color: var(--text-2); margin: .6rem 0 0; }
.cd-units { width: 100%; margin-top: var(--sp-3); border-collapse: collapse; font-size: .8125rem; }
.cd-units th { text-align: left; padding: .45rem .5rem; font-family: var(--font-head); font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--border); }
.cd-units td { padding: .5rem; color: var(--text-2); border-bottom: 1px solid var(--border); }
.cd-units tr:last-child td { border-bottom: none; }
.cd-unit-no { font-weight: 700; color: var(--text) !important; }
.cd-unit-now { color: var(--accent-dk); font-weight: 700; }

@media (max-width: 560px) {
  .cd-fp-head { flex-wrap: wrap; }
  .cd-fp-price { width: 100%; }
}

/* Contact rows */
.cd-contact-row { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; margin-top: .4rem; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); font-size: .875rem; font-weight: 600; text-decoration: none; word-break: break-word; }
.cd-contact-row svg { color: var(--primary); flex-shrink: 0; }
@media (hover:hover) and (pointer:fine) { .cd-contact-row:hover { color: var(--primary); } }

/* Sticky bottom bar */
.cd-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem 1.25rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(11,28,48,.08);
}
.cd-sticky[hidden] { display: none; }
.cd-sticky-id { min-width: 0; }
.cd-sticky-name { font-family: var(--font-head); font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-sticky-price { font-size: .8125rem; font-weight: 600; color: var(--primary); margin: 0; }
.cd-sticky-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.cd-sticky-actions .ld-cta { width: auto; padding: .55rem 1rem; }
@media (max-width: 900px) { .cd-sticky { bottom: var(--mob-nav-h, 0px); } }

/* Results card tag line + availability note */
.card-kicker { display: flex; align-items: center; gap: .45rem; margin: 0 0 .25rem; font-size: .75rem; color: var(--text-3); }
.card-kicker-chip { padding: .1rem .45rem; border-radius: var(--r-xs); background: var(--accent-soft); color: var(--accent-dk); font-family: var(--font-head); font-size: .625rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.card-actions-note { display: none; }
.results-foot { margin: var(--sp-5) 0 var(--sp-2); font-size: .875rem; color: var(--text-3); }
.cl-section-count { margin-left: auto; flex-shrink: 0; font-family: var(--font-head); font-size: .75rem; font-weight: 600; color: var(--text-3); }
.img-upload-icon svg { display: block; margin: 0 auto; color: var(--primary); }
.img-upload-browse {
  display: inline-block;
  margin-top: .6rem;
  padding: .35rem .85rem;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--primary);
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 700;
  box-shadow: var(--shadow-xs);
}
.img-preview-item { position: relative; }
.img-preview-cover {
  position: absolute; left: .35rem; top: .35rem;
  padding: .1rem .4rem;
  border-radius: var(--r-xs);
  background: rgba(10,15,29,.8);
  color: #fff;
  font-family: var(--font-head);
  font-size: .625rem;
  font-weight: 700;
  pointer-events: none;
}
.cl-tour-field { margin-top: var(--sp-4); }
.cl-tour-field input { width: 100%; }

/* Guided search rail — reference pass 2 */
.gsx-criteria li { position: relative; padding-left: 1.6rem !important; }
.gsx-criteria li:not(.gsx-criteria-empty)::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  border-radius: 50%;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E") center / 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.gsx-criteria li.gsx-criteria-empty { padding-left: 0 !important; }
.gsx-card-link { font-family: var(--font-head); font-size: .75rem; font-weight: 700; color: var(--primary); text-decoration: none; white-space: nowrap; }
@media (hover:hover) and (pointer:fine) { .gsx-card-link:hover { text-decoration: underline; } }
.gsx-quote { margin: 0; background: var(--primary-soft); border: none; }
.gsx-quote-k { display: flex; align-items: center; gap: .3rem; margin: 0 0 .4rem; font-family: var(--font-head); font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-dk); }

.gsx-quote blockquote { margin: 0; font-size: .875rem; font-style: italic; line-height: 1.55; color: var(--text); }
.gsx-quote figcaption { margin-top: .4rem; font-size: .75rem; color: var(--text-3); }
.gs-btn-count {
  display: inline-block;
  margin-left: .4rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  font-size: .6875rem;
  font-weight: 700;
  vertical-align: middle;
}
.gs-btn-count[hidden] { display: none; }

/* Hero photos load on demand (see home.html): a slide paints its 2400px copy,
   or the 1280px one on a phone, only while it is marked hc-loaded. */
.hero-split--photo .hc-slide { background-image: none; }
.hero-split--photo .hc-slide.hc-loaded { background-image: var(--hc-lg); }
@media (max-width: 760px) {
  .hero-split--photo .hc-slide.hc-loaded { background-image: var(--hc-sm); }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE PASS — home hero (≤760px)
   The desktop hero stretched one landscape photo over a 366×1122 box on a
   phone (headline, search, chips and the featured card all inside it), so
   `cover` cropped each photo to a thin vertical slice — the "zoomed in"
   look. On phones the hero goes back to the earlier full-bleed shape, the
   featured card (already in Trending) is dropped, and the photo is a fixed
   band at the top that fades into ink behind the search console.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .hero-split--photo {
    width: 100vw;
    margin: calc(-1 * var(--sp-3)) calc(50% - 50vw) var(--sp-6);
    border-radius: 0;
    padding: var(--sp-6) var(--sp-4) calc(var(--sp-8) + var(--sp-2));
    background: #0b1220;
  }
  .hero-split--photo .hc-slide {
    bottom: auto;
    height: 520px;
    background-position: center 40%;
  }
  .hero-split--photo .hc-overlay {
    background: linear-gradient(to bottom,
      rgba(8,18,38,.45) 0px,
      rgba(8,18,38,.62) 300px,
      #0b1220 520px);
  }
  .hero-split--photo .hero-feature { display: none; }
  .hero-split--photo .hero-eyebrow { font-size: .625rem; padding: .35rem .7rem; margin-bottom: var(--sp-3); }
  .hero-split--photo .hero-display { font-size: 2.125rem; line-height: 1.1; }
  .hero-split--photo .hero-split-sub { font-size: .9375rem; margin-bottom: var(--sp-5); }
  /* Quick-search chips: one swipeable line instead of four wrapped rows. */
  .hero-split--photo .hero-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: calc(-1 * var(--sp-4));
    padding-right: var(--sp-4);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hero-split--photo .hero-chips::-webkit-scrollbar { display: none; }
  .hero-split--photo .hero-chip { flex-shrink: 0; }
  .hero-split--photo .hero-chips-label { flex-shrink: 0; white-space: nowrap; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE PASS — results toolbar (≤760px)
   The toolbar is sticky on desktop. On a phone it stacked to ~370px and
   stayed pinned, covering almost half the screen while scrolling results.
   Here it scrolls away with the page, the search takes a full row, the
   category select (the tabs above already do its job) is dropped, and the
   price/bed filters and amenity chips share one swipeable line.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .results-bar { position: static; margin: calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3)) var(--sp-4); padding: var(--sp-3); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .results-scope { width: 100%; }
  .results-scope-tab { flex: 1; text-align: center; padding: .45rem .3rem; }
  .results-search { flex-wrap: wrap; min-width: 0; width: 100%; }
  .results-search-field { flex: 1 1 100%; }
  .results-search .results-select { display: none; }
  .results-search-city { flex: 1 1 0; min-width: 0; }
  .results-bar-row-2 { gap: var(--sp-2); }
  .results-count { flex: 1 1 100%; }
  .results-sort { flex: 1 1 auto; }
  .results-sort .results-select { max-width: none; width: 100%; }
  .results-bar-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: calc(-1 * var(--sp-3));
    padding-right: var(--sp-3);
    scrollbar-width: none;
  }
  .results-bar-chips::-webkit-scrollbar { display: none; }
  .results-bar-chips .quality-chips-row { flex-wrap: nowrap; }
  .results-bar-chips .quality-chip, .results-filter { flex-shrink: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE PASS — listing and community detail (≤760px)
   Two rows of big gallery tiles doubled the scroll before the listing
   began; highlights, amenities and policies stacked one per full row; the
   terms line wrapped its "•" separators onto lines of their own; the share
   button dropped under the chips. Photos themselves are unchanged.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .bento-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 64px; }
  /* Sits on the main photo's corner, clear of the thumbnail row (64px + gap). */
  .bento:not(.bento-solo) .bento-actions { right: .75rem; bottom: calc(64px + .5rem + .75rem); }
  .bento-action { padding: .35rem .6rem; font-size: .75rem; }
  /* The page title sits right under the gallery; on a phone the caption only collides with the photo button. */
  .bento-caption { display: none; }

  .ld-top { flex-wrap: nowrap; align-items: flex-start; }
  .ld-top-chips { flex: 1 1 auto; }

  .ld-flat .ld-terms-row { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .ld-flat .ld-term + .ld-term::before { content: none; }
  .ld-flat .ld-terms-aside { text-align: left; }
  .ld-flat .ld-terms-top { align-items: flex-start; }

  .ld-highlight-grid, .ld-amen-grid, .cd-policies { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .ld-amen-tile { padding: var(--sp-3); gap: .5rem; }
  .ld-amen-ico { width: 32px; height: 32px; }
  .ld-amen-name { font-size: .8125rem; }
  .cd-policies li { padding: .6rem; font-size: .75rem; }
  .cd-policy-ico { display: none; }
  .ld-sec-title, .nb-title { font-size: 1.25rem; }
  .nb-card { padding: var(--sp-4); }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE PASS — guided search
   A long listing title could not shrink inside a rail match card, so the
   cards ran past their panel's edge. Titles now truncate on one line.
   ═══════════════════════════════════════════════════════════════ */
.gsx-match { min-width: 0; }
.gsx-match-body { min-width: 0; }
.gsx-match-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  /* The rent/buy and space-type cards were 165px tall each; a phone needs
     both choices on one screen with the Continue button. */
  /* Two short choices fit side by side at 390px; stacked, the second fell
     below the fold with the Continue button. */
  .gs-wrap .choice-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gs-wrap .choice-card { padding: 18px 10px; }
  .gs-wrap .choice-card .cc-icon { width: 32px; height: 32px; margin-bottom: 8px; }
  .gs-wrap .choice-card .cc-title { font-size: .9375rem; }
  .gs-wrap .choice-card .cc-sub { font-size: 11.5px; }
  .gs-wrap .room-card { padding: 14px 12px; }
  .gs-wrap .gs-card { padding: 20px 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE PASS — post a listing (≤760px)
   The single / multi-family / portfolio switcher ran off the right edge;
   the five-step bar took three rows (~180px); the two listing-type tiles
   stacked into two tall cards.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .post-hero-kinds { width: 100%; }
  .post-kind { flex: 1 1 0; justify-content: center; padding: .45rem .35rem; font-size: .75rem; line-height: 1.25; text-align: center; min-width: 0; white-space: normal; }
  .post-kind svg { display: none; }

  /* Steps: five numbered dots in one row; only the active step keeps its label. */
  .post-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); padding: var(--sp-3) 0; }
  .post-step { flex-direction: column; gap: .3rem; text-align: center; }
  .post-step-body { display: none; }
  .post-step.is-active { grid-column: auto; }
  .post-step-n { width: 30px; height: 30px; }

  #cl-sec-1 .cl-cat-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  #cl-sec-1 .cl-cat-card { padding: var(--sp-4) var(--sp-2); }
  #cl-sec-1 .cl-cat-label { font-size: .8125rem; }
  .cl-cat-sub { font-size: .6875rem; }
}

/* ── Landlord performance: how renters see your listings ── */
.ins-title { font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 0 0 .75rem; }
.ins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.ins-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.1rem; min-width: 0; }
.ins-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.ins-name { font-weight: 700; font-size: .9rem; color: var(--text); text-decoration: none; min-width: 0; }
.ins-name:hover { color: var(--primary); }
.ins-strength { display: flex; flex-direction: column; align-items: flex-end; font-weight: 800; font-size: 1.05rem; color: var(--text); line-height: 1.1; flex-shrink: 0; }
.ins-strength small { font-size: .65rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ins-meter { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin: .6rem 0 .2rem; }
.ins-meter i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.ins-k { margin: .85rem 0 .35rem; font-family: var(--font-head); font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.ins-todo, .ins-demand { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ins-todo li { display: grid; gap: .1rem; font-size: .8125rem; }
.ins-todo b { color: var(--text); }
.ins-todo span { color: var(--muted); line-height: 1.4; }
.ins-edit { display: inline-block; margin-top: .6rem; font-size: .8125rem; font-weight: 700; color: var(--primary); text-decoration: none; }
.ins-done { margin: .6rem 0 0; font-size: .8125rem; color: var(--accent-dk); }

.ins-demand li { font-size: .8125rem; line-height: 1.4; padding-left: 1rem; position: relative; color: var(--text-2); }
.ins-demand li::before { content: ''; position: absolute; left: 0; top: .45em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--border-2); }
.ins-demand li.ins-unmet::before { background: var(--featured); }
.ins-demand li.ins-met::before { background: var(--accent); }
.ins-foot, .ins-wait { margin: .5rem 0 0; font-size: .75rem; color: var(--muted); line-height: 1.45; }

/* ── Inquiry: how the home fits the renter who wrote in ── */
.lead-fit { margin: .5rem 0; padding: .55rem .75rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: .8125rem; color: var(--text-2); }
.lead-fit-head { margin: 0; color: var(--text); }
.lead-fit-line { margin: .2rem 0 0; line-height: 1.45; }
.lead-fit-line span { font-weight: 700; color: var(--muted); margin-right: .25rem; }

/* An owner's own listing in their search results. */
.own-badge {
  display: inline-flex; align-items: center; padding: .1rem .5rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border-2);
  font-size: .6875rem; font-weight: 700; color: var(--text-2); white-space: nowrap;
}