/* ============================================================
   Buyer portal · the "warm room"
   The client RESULT surface — what Erin's buyer sees in their own
   gated account, authored from the BUYER's point of view.

   Dialect: the WEBSITE's warm editorial scroll (seattle-at-home),
   NOT the dashboard's app shell. Same camera language, buyer's seat.

   Self-contained: does NOT edit product.css or gate.js. It links
   gate.js (shared, unedited) and reproduces the fail-closed gate
   CSS so content stays hidden until an approved account is verified.

   System fonts only · no external deps · works from disk · CSP-safe
   (script-src 'self' + gstatic via gate.js; style-src 'self';
    img-src 'self' data: — all gradients/grain are CSS, no images).
   ============================================================ */

:root {
  /* ---- warm-neutral base ----
     product.css loads FIRST and owns every shared token. The buyer-named
     tokens here are now thin ALIASES onto the shared ones, so there is a
     single source of truth and the palette cannot drift. Change a colour in
     product.css and it flows straight through to the portal. */
  --cream:     var(--bg);        /* page background  ← product.css --bg */
  --cream-2:   var(--surface-2); /* alternating sand ← product.css --surface-2 */
  --paper:     #fffdf8;          /* card surface, a shade above cream (page-local) */
  /* --surface keeps the SAME name as product.css and the SAME value (#fffff),
     so it inherits directly. Re-declaring it as var(--surface) here would be
     self-referential and break the token, so it is intentionally not redefined. */

  /* ---- ink ---- (alias onto product.css text ramp) */
  --ink:       var(--text);      /* ← product.css --text */
  --ink-2:     var(--text-dim);  /* ← product.css --text-dim */
  --ink-3:     var(--text-dimmer);/* ← product.css --text-dimmer */
  --on-dark:     #eef3f0;
  --on-dark-dim: rgba(238,243,240,0.82);

  /* ---- teal · the one accent ("this matters / act here") ----
     aliased onto product.css's accent ramp (same teal family). */
  --teal:      var(--accent);      /* ← product.css --accent */
  --teal-deep: var(--accent-deep); /* ← product.css --accent-deep */
  --teal-soft: var(--accent-soft); /* ← product.css --accent-soft */
  --teal-pale: var(--accent-pale); /* ← product.css --accent-pale */
  --teal-light:#7fd8cf;  /* teal's voice on dark bands (page-local) */

  /* ---- clay · warm secondary (human/community only, never a 2nd accent) ----
     aliased onto product.css's gold ramp (same clay family). */
  --clay:      var(--gold);      /* ← product.css --gold */
  --clay-deep: var(--gold-deep); /* ← product.css --gold-deep */
  --evergreen: #1f4d3f;

  /* ---- lines (warm, never gray) ---- (alias onto shared borders) */
  --line:      var(--border);      /* ← product.css --border */
  --line-soft: var(--border-soft); /* ← product.css --border-soft */

  /* ---- status ---- */
  --ok:   #2f7d5b;
  --warn: #a8443e;
  --info: #3a6b8c;

  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", system-ui, sans-serif;

  /* The buyer column is deliberately narrower than the shared --maxw for a
     calmer reading width. Kept page-local on purpose.
     RADIUS + SHADOW now INHERIT from product.css (loaded first) so the buyer
     portal reads with the SAME material weight as the five dashboard pages and
     the walkthrough resolves into the product with no radius/shadow seam:
       --radius (14px) + --radius-lg (22px) come straight from product.css —
       NOT redeclared here, so there is one source of truth.
     Only --radius-card/-pill are page-local additions product.css doesn't define. */
  --maxw: 1180px;
  --radius-card: 16px;
  --radius-pill: 999px;

  /* ---- the one motion language: The Settle ---- */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --dur-micro: 0.15s;
  --dur-settle:0.30s;
  --dur-reveal:0.80s;
}

/* ============================================================
   DARK MODE — page-local token flips.
   product.css already flips every SHARED token under
   @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) }.
   buyer.css aliases nearly all of its tokens onto those shared ones, so the
   warm room follows the OS into dark automatically — EXCEPT a few page-local
   values defined with literal hex above (chiefly --paper, the card surface).
   Left alone, those stayed light while the text ramp flipped light → light
   text on a light card. We mirror product.css's EXACT gating here so the
   page-local surfaces flip in lockstep. Fixes the new neighborhood cards AND
   the pre-existing --paper cards (.next-card / .listing / .fact / estimator),
   entirely within buyer.css (no edits to product.css or gate.js).
   A visitor on a light OS, or with data-theme="light" forced, is unaffected.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #1b2a26;   /* card surface a touch above --bg (mirrors product --surface) */
    --on-dark:     #eef3f0;   /* already light; kept explicit for the dark-band copy */
    --on-dark-dim: rgba(238,243,240,0.82);
    --teal-light:  #7fd8cf;   /* teal's voice on dark surfaces */
  }
}
:root[data-theme="dark"] {
  --paper:       #1b2a26;
  --on-dark:     #eef3f0;
  --on-dark-dim: rgba(238,243,240,0.82);
  --teal-light:  #7fd8cf;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* PREVIEW-ONLY chrome: a small, deliberately utilitarian strip so Erin can
   step back to the owner dashboard while reviewing both seats. Marked as
   preview, sits above the hero, never part of a real buyer's experience. */
/* Floated at the BOTTOM-center so it never collides with the sticky nav.
   At the old top:12px it overlapped the centered "Where you are" link at
   1440 and crowded the wordmark + Sign out on a phone. Bottom keeps the
   preview affordance available without competing with the buyer's chrome. */
.preview-return {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.92);
  border: 1px dashed var(--line);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(33, 31, 28, 0.08);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  backdrop-filter: saturate(140%) blur(6px);
}
.preview-return:hover {
  color: var(--teal);
  border-color: var(--teal-soft);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

/* ============================================================
   GATE — owned entirely by gate.js (the shared, UNEDITED script).
   gate.js injects its OWN hide style (html.ti-gated body{visibility:hidden})
   and its OWN sign-in overlay, then reveals only for an allow-listed,
   signed-in account. So this stylesheet adds NO gate markup or rules —
   exactly like today.html. Fail-closed lives in the script, not here.
   ============================================================ */

/* ============================================================
   SHARED PIECES — eyebrow, buttons (website dialect)
   ============================================================ */
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--teal);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease),
              border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease),
              box-shadow var(--dur-micro) var(--ease);
}
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-deep); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(13,110,104,0.14); }
/* Was a hard near-black outline that vanished on the dark hero and read
   as an admin/control pill on the cream homes-foot. Now a soft teal ghost
   that belongs on the warm surface; the hero instance adds .btn-ghost-light. */
.btn-ghost { background: transparent; color: var(--teal-deep); border-color: var(--teal-soft); }
.btn-ghost:hover { background: var(--teal-pale); border-color: var(--teal); color: var(--teal-deep); transform: translateY(-2px); }
/* Light-on-dark variant for the ghost button over the dark hero gradient,
   where teal-on-cream would be illegible. */
.btn-ghost-light { color: rgba(255,255,255,0.86); border-color: rgba(255,255,255,0.5); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }

/* labeled-placeholder + sample chips — honesty made visible */
.ph {
  display: inline-block;
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--clay-deep);
  background: rgba(189,117,68,0.10);
  border: 1px dashed rgba(189,117,68,0.5);
  border-radius: 7px;
  padding: 3px 9px;
  letter-spacing: 0.2px;
}
.ph-inline {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 0.86em;
  font-weight: 600;
  color: var(--clay-deep);
}
.sample-note {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--ink-3);
  font-style: italic;
}

/* ============================================================
   NAV — transparent over hero, solid on scroll (website dialect)
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  transition: background var(--dur-settle) var(--ease), padding var(--dur-settle) var(--ease), box-shadow var(--dur-settle) var(--ease);
}
.nav.solid {
  /* Light-theme default: a translucent wash of the cream page bg. The dark
     override is defined per-theme below (plain rgba, no color-mix — color-mix
     resolved to transparent on this element in testing). Either way the wash
     matches its var(--ink) text so the bar is never light-on-light. */
  background: rgba(247,244,238,0.92);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  padding: 14px 28px;
  box-shadow: 0 1px 0 var(--line);
}
/* Dark theme: a dark wash so the solid-nav text (which flips light) stays
   legible. Covers both the explicit toggle and the OS preference. */
:root[data-theme="dark"] .nav.solid { background: rgba(20,31,28,0.92); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav.solid { background: rgba(20,31,28,0.92); }
}
.nav-mark {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
  transition: color var(--dur-settle) var(--ease);
}
.nav.solid .nav-mark { color: var(--ink); }
:root[data-theme="light"] .nav-mark { color: var(--ink); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav-links a {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  transition: color var(--dur-micro) var(--ease);
  position: relative;
}
.nav.solid .nav-links a { color: var(--ink-2); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 0; height: 1.5px;
  background: var(--teal);
  transition: width 0.25s var(--ease);
}
.nav-links a:hover::after { width: 100%; }
.nav.solid .nav-links a:hover { color: var(--teal); }

.nav-signout {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}
.nav-signout::after { display: none; }
.nav.solid .nav-signout {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--line);
}
.nav.solid .nav-signout:hover { color: var(--teal); border-color: var(--teal); }

@media (max-width: 820px) {
  .nav {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 10px 18px 9px;
    background: rgba(20, 49, 45, 0.78);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 1px 0 rgba(255,255,255,0.12);
  }
  .nav.solid { padding: 9px 18px 8px; }
  .nav-links {
    flex-basis: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    padding: 0 2px 4px;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a,
  .nav-tour,
  .nav-signout {
    flex: 0 0 auto;
    font-size: 13px;
    white-space: nowrap;
  }
  .nav-tour,
  .nav-signout { padding: 7px 12px; }
  .nav-who { display: none; }
  .hero {
    padding-top: 132px;
    min-height: clamp(620px, 88vh, 760px);
  }
  .hero h1 {
    max-width: 12ch;
  }
}

/* ============================================================
   HERO — full-bleed, bottom-aligned, the ONE warm mechanic
   ============================================================ */
.hero {
  position: relative;
  /* Was min-height:100vh + align-items:flex-end, which left ~75% of a
     ~2300px frame as an empty colored void with the headline pinned to
     the bottom. Bounded height + centered content puts the headline in a
     balanced photographic frame (the .hero-photo gradient stands in for
     the real neighborhood photo the aria-label describes). */
  min-height: clamp(560px, 80vh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 104px 0 72px;
}
.hero-photo {
  position: absolute;
  inset: 0;
  /* Scrim re-weighted for centered content: a soft, even darkening that
     keeps the white headline legible against the mid-tone gradient
     instead of the old bottom-heavy ramp that only covered the foot. */
  background:
    linear-gradient(165deg, rgba(26,29,28,0.20) 0%, rgba(26,29,28,0.34) 50%, rgba(26,29,28,0.52) 100%),
    linear-gradient(135deg, #2c5651 0%, #1f4d3f 44%, #b06f42 100%);
  background-size: cover;
  background-position: center;
}
.hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: radial-gradient(rgba(255,255,255,0.4) 0.6px, transparent 0.6px);
  background-size: 4px 4px;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  /* No bottom over-pad now that the hero is vertically centered. */
  padding: 0 28px;
}
.hero .eyebrow { color: var(--teal-light); margin-bottom: 20px; }
.hero h1 {
  font-size: clamp(40px, 7.5vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 15ch;
}
.hero h1 .rot {
  font-style: italic;
  color: var(--teal-light);
  display: inline-block;
  transition: opacity var(--dur-settle) var(--ease), transform var(--dur-settle) var(--ease);
}
.hero h1 .rot.swap { opacity: 0; transform: translateY(14px); }
.hero-sub {
  margin-top: 26px;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
  max-width: 54ch;
}
.hero-cta {
  margin-top: 38px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.scroll-cue {
  position: absolute;
  left: 50%; bottom: 30px;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scroll-cue::after {
  content: "";
  width: 1px; height: 34px;
  background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0));
  animation: cue 2s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: scaleY(0); transform-origin: top; }
  40% { transform: scaleY(1); transform-origin: top; }
  60% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================================
   THE SETTLE — first arrival (reveal) + the beat (in JS)
   ============================================================ */
.settle {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.settle.in { opacity: 1; transform: none; }
/* 3-step stagger cap, matching the website */
.settle:nth-child(2) { transition-delay: 0.08s; }
.settle:nth-child(3) { transition-delay: 0.16s; }

/* ============================================================
   BANDS
   ============================================================ */
.band { padding: clamp(64px, 11vh, 130px) 0; }
.band-warm { background: var(--cream-2); }
.band-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
  /* when the tour scrolls a heading to the top, keep it clear of the fixed nav
     so the ring + caption aren't tucked under the bar */
  scroll-margin-top: 84px;
}
.band-head .eyebrow { margin-bottom: 16px; }
.band-head h2 { font-size: clamp(28px, 4vw, 44px); }
.band-head .lead {
  margin-top: 18px;
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--ink-2);
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   JOURNEY — the milestone timeline (grounded "feels real" element)
   ============================================================ */
.journey {
  list-style: none;
  max-width: 760px;
  margin: 0 auto;
}
.step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 20px;
  align-items: start;
}
.step-rail {
  position: relative;
  display: flex;
  justify-content: center;
  align-self: stretch;
}
/* the vertical connector line */
.step-rail::before {
  content: "";
  position: absolute;
  top: 6px; bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--line);
}
.step-rail-last::before { display: none; }
.step-dot {
  position: relative;
  z-index: 1;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--cream);
  border: 2px solid var(--line);
  margin-top: 4px;
  flex-shrink: 0;
  transition: background var(--dur-settle) var(--ease), border-color var(--dur-settle) var(--ease), box-shadow var(--dur-settle) var(--ease);
}
.step-body { padding-bottom: 30px; }
.step:last-child .step-body { padding-bottom: 0; }
.step-stamp {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.step-title {
  font-size: 21px;
  line-height: 1.25;
  color: var(--ink);
}
.step-sub {
  margin-top: 7px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
/* done steps: teal dot, full-color */
.step.is-done .step-dot { background: var(--teal); border-color: var(--teal); }
.step.is-done .step-stamp { color: var(--teal); }
/* current step: the one accented beat — teal ring, the "you're here" */
.step.is-now .step-dot {
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 0 5px var(--teal-pale);
}
.step-stamp-now {
  color: var(--teal-deep);
  background: var(--teal-pale);
  border: 1px solid var(--teal-soft);
  border-radius: var(--radius-pill);
  padding: 3px 11px;
}
/* upcoming steps read softer */
.step:not(.is-done):not(.is-now) .step-title { color: var(--ink-2); }

/* ---- "what I'm on next" card ---- */
.next-card {
  max-width: 760px;
  margin: 48px auto 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-card);
  padding: 30px 32px;
  box-shadow: var(--shadow); /* shared scale (product.css), was a hand-rolled near-match */
}
.next-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--teal);
}
.next-title { font-size: 24px; margin-top: 10px; line-height: 1.3; }
.next-body {
  font-size: 16px;
  color: var(--ink-2);
  margin-top: 12px;
  line-height: 1.6;
  max-width: 60ch;
}
.next-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.next-hint { font-size: 13.5px; color: var(--ink-3); font-style: italic; }

/* ============================================================
   LISTINGS — the buyer's saved homes (objective features only)
   ============================================================ */
.listings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.listing {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--dur-settle) var(--ease), box-shadow var(--dur-settle) var(--ease);
}
.listing:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.listing-photo { height: 210px; position: relative; }
.listing-photo .grain {
  position: absolute; inset: 0;
  opacity: 0.4;
  background-image: radial-gradient(rgba(255,255,255,0.4) 0.6px, transparent 0.6px);
  background-size: 4px 4px;
  mix-blend-mode: overlay;
}
.lp-1 { background: linear-gradient(140deg, #2c5651, #3a6b62 50%, #7fb0a4); }
.lp-2 { background: linear-gradient(140deg, #1f4d3f, #2c5651 60%, #b06f42); }
.lp-3 { background: linear-gradient(140deg, #9c5d33, #b06f42 55%, #2c5651); }
.listing-flag {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(255,253,248,0.94);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
.listing-body { padding: 22px 24px 26px; }
.listing-price {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--teal);
  margin-bottom: 4px;
}
.listing-addr {
  font-size: 15px;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 10px;
}
.listing-meta {
  font-size: 13.5px;
  color: var(--ink-3);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.listing-why {
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}
.listing-status {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}
.status-saved { background: var(--teal-pale); color: var(--teal-deep); }
.status-tour  { background: rgba(189,117,68,0.13); color: var(--clay-deep); }
.status-new   { background: rgba(47,125,91,0.12); color: var(--ok); }

.homes-foot {
  text-align: center;
  margin-top: 48px;
}
.homes-foot p {
  font-size: 16px;
  color: var(--ink-2);
  margin-bottom: 18px;
}

/* ============================================================
   FACTS — market / safety / schools / commute (labeled placeholders)
   ============================================================ */
.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
}
.fact {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 28px 28px 26px;
  transition: transform var(--dur-settle) var(--ease), box-shadow var(--dur-settle) var(--ease);
}
.fact:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.fact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--teal-pale);
  color: var(--teal);
  font-size: 18px;
  margin-bottom: 16px;
}
.fact-title { font-size: 20px; margin-bottom: 12px; }
.fact-line { font-size: 15px; line-height: 1.5; }
.fact-note {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.55;
  font-style: italic;
}
.fair-note {
  max-width: 720px;
  margin: 44px auto 0;
  text-align: center;
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ============================================================
   NEIGHBORHOOD · ZIP selector (tablist)
   Three real areas; click/keyboard wired in buyer.js. The active
   chip carries the teal accent (the one "you're looking here").
   ============================================================ */
.zip-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 920px;
  margin: 0 auto 36px;
}
.zip-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-card);
  padding: 14px 20px;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease),
              box-shadow var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.zip-tab:hover { border-color: var(--teal-soft); transform: translateY(-2px); box-shadow: var(--shadow); }
.zip-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.zip-tab-city {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.zip-tab-code {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ink-3);
}
.zip-tab.is-active {
  background: var(--teal-pale);
  border-color: var(--teal);
  box-shadow: 0 6px 20px rgba(13,110,104,0.12);
}
.zip-tab.is-active .zip-tab-city { color: var(--teal-deep); }
.zip-tab.is-active .zip-tab-code { color: var(--teal); }

/* Panels: one shows at a time (buyer.js toggles [hidden]). A soft fade-in
   when a panel becomes active. Reduced-motion is handled in the global block. */
.zip-panel[hidden] { display: none; }
.zip-panel { animation: zipFade var(--dur-reveal) var(--ease); }
@keyframes zipFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   NEIGHBORHOOD · expandable fact cards (<details>/<summary>)
   The whole summary is the click target. Accessible by default;
   no inline JS. The chevron rotates when open.
   ============================================================ */
.fact { padding: 0; overflow: hidden; }      /* override the flat .fact padding; detail owns its own */
.fact.fact-wide { grid-column: 1 / -1; }      /* "things to know" spans the row */

.fact-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  cursor: pointer;
  list-style: none;                            /* hide the default marker (WebKit) */
  transition: background var(--dur-micro) var(--ease);
}
.fact-summary::-webkit-details-marker { display: none; }
.fact-summary::marker { content: ""; }         /* hide the default marker (Firefox) */
.fact-summary:hover { background: var(--teal-pale); }
.fact-summary:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }

.fact .fact-icon { margin-bottom: 0; flex-shrink: 0; }
.fact-heads {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.fact .fact-title { margin-bottom: 0; }
.fact-peek {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--teal-deep);
  letter-spacing: 0.1px;
}
.fact-chev {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-3);
  transition: transform var(--dur-settle) var(--ease), color var(--dur-micro) var(--ease);
}
.fact[open] .fact-chev { transform: rotate(180deg); color: var(--teal); }
.fact[open] .fact-peek { display: none; }      /* the peek is a closed-state teaser; hide once open */

.fact-detail {
  padding: 0 24px 24px 24px;
  border-top: 1px solid var(--line-soft);
  margin-top: 2px;
  padding-top: 18px;
}
.fact-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.fact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.fact-list li { position: relative; padding-left: 18px; }
.fact-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 9px;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--teal);
}
.fact-list strong { color: var(--ink); font-weight: 600; }
.fact-body strong { color: var(--ink); font-weight: 600; }

/* walkability scores */
.score-row {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
  padding: 12px 10px;
  background: var(--teal-pale);
  border: 1px solid var(--teal-soft);
  border-radius: var(--radius-card);
}
.score-num {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
  color: var(--teal-deep);
}
.score-lbl {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--teal);
}
.score-na { background: var(--cream-2); border-color: var(--line); }
.score-na .score-num { color: var(--ink-3); }
.score-na .score-lbl { color: var(--ink-3); }

/* market stat */
.fact-stat {
  font-size: 15px;
  color: var(--ink-2);
  margin-bottom: 12px;
}
.fact-stat-num {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--teal);
  display: inline-block;
  margin-right: 8px;
  vertical-align: -2px;
}
.trend {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}
.trend-down { color: var(--warn); background: rgba(168,68,62,0.10); }
.trend-up   { color: var(--ok);   background: rgba(47,125,91,0.12); }

/* source line + inline unknown note */
.fact-src {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.1px;
}
.fact-note-line {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* the WA tax note under each panel */
.zip-tax {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 920px;
  margin: 24px auto 0;
  padding: 20px 24px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.zip-tax strong { color: var(--ink); font-weight: 600; }
.zip-tax-mark {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
  color: var(--clay);
  flex-shrink: 0;
  margin-top: 2px;
}
.zip-tax-src {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-3);
}

/* ============================================================
   NEIGHBORHOOD · monthly payment estimator
   Pure client-side math (buyer.js). High-value, free, on-brand.
   ============================================================ */
.estimator {
  max-width: 920px;
  margin: 40px auto 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-card);
  padding: 30px 32px;
  box-shadow: var(--shadow);
}
.estimator-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
.estimator-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--teal-pale);
  color: var(--teal);
  font-size: 22px;
  font-family: var(--serif);
}
.estimator-title { font-size: 24px; line-height: 1.25; }
.estimator-sub {
  margin-top: 6px;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 56ch;
}
.estimator-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.est-field label {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.est-input-wrap {
  display: flex;
  align-items: center;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 9px);
  padding: 0 12px;
  transition: border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
.est-input-wrap:focus-within {
  border-color: var(--teal);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--teal-pale);
}
.est-input-wrap input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 12px 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.est-input-wrap input:focus { outline: none; }
/* trim native number spinners for a calmer field */
.est-input-wrap input::-webkit-outer-spin-button,
.est-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.est-input-wrap input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.est-prefix, .est-suffix {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-3);
  flex-shrink: 0;
}
.est-prefix { margin-right: 4px; }
.est-suffix { margin-left: 4px; }

.estimator-out {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 22px 24px;
  background: var(--teal-pale);
  border: 1px solid var(--teal-soft);
  border-radius: var(--radius-card);
}
.est-total { display: flex; flex-direction: column; gap: 2px; }
.est-total-lbl {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--teal);
}
.est-total-num {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1;
  color: var(--teal-deep);
  letter-spacing: -0.01em;
}
.est-break {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-left: auto;
}
.est-break-item { display: flex; flex-direction: column; gap: 2px; }
.est-break-lbl {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--ink-3);
}
.est-break-val {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
}
.estimator-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.55;
  font-style: italic;
}

/* ============================================================
   COMMUNITY / SPLIT (dark band) + UPDATES
   ============================================================ */
.band-dark {
  background: linear-gradient(150deg, #1f4d3f 0%, #173b30 70%, #2c5651 100%);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.band-dark .eyebrow { color: var(--teal-light); }
.band-dark h2 { color: #fff; }
.split {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 56px;
  align-items: start;
}
.split-copy h2 { font-size: clamp(28px, 4vw, 42px); }
.split-copy p {
  margin-top: 20px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--on-dark-dim);
}
.split-list {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.split-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 15.5px;
  color: rgba(238,243,240,0.9);
  line-height: 1.55;
}
.split-item .dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--teal-light);
  margin-top: 9px;
  flex-shrink: 0;
}
.split-item .ph {
  color: #f0d8c4;
  background: rgba(189,117,68,0.22);
  border-color: rgba(240,216,196,0.5);
}

.updates {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 30px 30px 26px;
}
.updates-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-bottom: 18px;
}
.update-list { list-style: none; }
.update-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.update-item:last-child { border-bottom: none; }
.update-when {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--teal-light);
}
.update-what {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(238,243,240,0.92);
}
.update-what .ph-inline { color: #f0d8c4; }
.updates-note {
  margin-top: 16px;
  font-size: 13px;
  color: rgba(238,243,240,0.55);
  font-style: italic;
}

/* ============================================================
   THREAD (ink band) — the shared conversation with Erin
   ============================================================ */
/* Hard dark band: bg pinned (not a flipping token) so the hardcoded-white
   text below is always readable in BOTH light and dark themes. Was var(--ink),
   which flipped light in dark mode → white-on-white. */
.band-ink { background: #11201c; color: #eef3f0; }
.band-ink .eyebrow { color: var(--teal-light); }
.thread-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.thread-copy h2 { color: #fff; font-size: clamp(28px, 4vw, 44px); }
.thread-lead {
  margin-top: 18px;
  font-size: 17px;
  color: rgba(238,243,240,0.8);
  line-height: 1.7;
}
.contact-lines {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-line {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: var(--serif);
  font-size: 19px;
  color: #fff;
}
.contact-line .ico { color: var(--teal-light); font-size: 17px; }
.contact-line .lbl {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal-light);
  display: block;
}

.thread-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 30px;
}
.thread-panel-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-bottom: 20px;
}
.msg-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 86%; }
.msg-who {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(238,243,240,0.6);
  margin-bottom: 5px;
  display: block;
}
.msg-text {
  font-size: 15px;
  line-height: 1.55;
  padding: 12px 16px;
  border-radius: 14px;
}
.msg-them { align-self: flex-start; }
.msg-them .msg-text {
  background: rgba(127,216,207,0.14);
  color: #eef3f0;
  border-bottom-left-radius: 5px;
}
.msg-you { align-self: flex-end; text-align: right; }
.msg-you .msg-who { text-align: right; }
.msg-you .msg-text {
  background: var(--teal);
  color: #fff;
  border-bottom-right-radius: 5px;
  text-align: left;
}
.thread-form {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.thread-form textarea {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  padding: 13px 15px;
  font-family: var(--sans);
  font-size: 15px;
  color: #fff;
  resize: vertical;
  transition: border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease);
}
.thread-form textarea:focus {
  outline: none;
  border-color: var(--teal-light);
  background: rgba(255,255,255,0.09);
}
.thread-form textarea::placeholder { color: rgba(238,243,240,0.4); }
.thread-form .btn-primary { align-self: flex-start; }
.thread-note {
  margin-top: 14px;
  font-size: 12.5px;
  color: rgba(238,243,240,0.55);
  font-style: italic;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  background: var(--ink);
  color: rgba(238,243,240,0.6);
  padding: 40px 0 50px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.foot-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.foot-mark { font-family: var(--serif); font-size: 18px; color: var(--cream); }
.foot-links { display: flex; gap: 24px; font-size: 13.5px; flex-wrap: wrap; }
.foot-links a:hover { color: var(--teal-light); }
.foot-fine {
  font-size: 12.5px;
  color: rgba(238,243,240,0.4);
  width: 100%;
  text-align: center;
  margin-top: 8px;
}

/* ============================================================
   BUCKET B · buyer result surfaces (Features 1,2,3,6,7,8)
   All warm cream+teal, same material weight as the rest of the page.
   Self-contained additions; no edits above this block.
   ============================================================ */

/* ---- a quiet "?" help affordance (contextual tooltips, Feature 8) ---- */
.help-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  margin-left: 8px;
  vertical-align: middle;
  border-radius: 999px;
  border: 1.5px solid var(--teal-soft);
  background: var(--teal-pale);
  color: var(--teal-deep);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.help-dot:hover { background: var(--teal); color: #fff; border-color: var(--teal); transform: translateY(-1px); }
.help-dot:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* the tip bubble (a popover anchored under its dot) */
.help-pop {
  position: absolute;
  z-index: 2100;   /* above the tour ring/scrim so a tip is never hidden */
  max-width: 280px;
  /* pinned dark (not var(--ink), which flips light in dark mode → the popup
     went light-bg + light-text = invisible. Same class as the band bug). */
  background: #11201c;
  color: #eef3f0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  padding: 12px 14px 12px 14px;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(33,31,28,0.28);
}
.help-pop[hidden] { display: none; }
.help-pop .help-dismiss {
  display: inline-block;
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--teal-light);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.help-pop .help-dismiss:hover { color: #fff; }

/* ---- a "Take the tour" pill in the nav (Feature 3/8) ---- */
.nav-tour {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  background: rgba(127,216,207,0.18);
  border: 1px solid rgba(127,216,207,0.4);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}
.nav-tour::after { display: none; }
.nav-tour:hover { background: rgba(127,216,207,0.3); }
.nav.solid .nav-tour {
  background: var(--teal-pale);
  color: var(--teal-deep);
  border-color: var(--teal-soft);
}
.nav.solid .nav-tour:hover { background: var(--teal); color: #fff; border-color: var(--teal); }

/* ============================================================
   FEATURE 7a · rate slider + buying-power inversion
   (extends the existing estimator)
   ============================================================ */
.est-rate-slider {
  grid-column: 1 / -1;
  margin-top: 4px;
}
.est-rate-slider .est-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.est-slider-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--ink-2);
}
.est-slider-read {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--teal-deep);
}
.est-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--teal-soft) 100%);
  outline: none;
  cursor: pointer;
}
.est-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--surface);
  border: 3px solid var(--teal);
  box-shadow: 0 2px 8px rgba(13,110,104,0.3);
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease);
}
.est-range::-webkit-slider-thumb:hover { transform: scale(1.1); }
.est-range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--surface);
  border: 3px solid var(--teal);
  box-shadow: 0 2px 8px rgba(13,110,104,0.3);
  cursor: pointer;
}
.est-range:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.est-range-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
}

/* ---- buying-power inversion sub-panel ---- */
.buying-power {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
}
.buying-power-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.buying-power h4 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
}
.buying-power-sub {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 16px;
  max-width: 60ch;
}
.bp-row {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.bp-field { flex: 1 1 200px; min-width: 180px; }
.bp-field label {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.bp-out {
  flex: 1 1 200px;
  min-width: 180px;
  padding: 14px 18px;
  background: var(--teal-pale);
  border: 1px solid var(--teal-soft);
  border-radius: var(--radius-card);
}
.bp-out-lbl {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--teal);
  display: block;
}
.bp-out-num {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.05;
  color: var(--teal-deep);
  letter-spacing: -0.01em;
}
.bp-note {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.55;
  font-style: italic;
}

/* ============================================================
   FEATURE 2 · search mock ("Find homes like these")
   ============================================================ */
.home-search {
  max-width: 920px;
  margin: 0 auto 40px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 26px 28px;
  box-shadow: var(--shadow);
}
.home-search-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.home-search-head h3 {
  font-size: 22px;
  line-height: 1.25;
}
.home-search-sub {
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 60ch;
}
.search-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: end;
}
.search-field label {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.search-field select,
.search-field input {
  width: 100%;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 9px);
  padding: 11px 12px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
.search-field select:focus,
.search-field input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-pale);
}
.search-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.search-count {
  font-size: 13.5px;
  color: var(--ink-3);
  font-style: italic;
}
.search-results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 22px;
}
.search-results:empty { display: none; }
.search-result {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px 20px;
}
.search-result-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.search-result-price {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--teal);
}
.search-result-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.search-result-meta {
  font-size: 13px;
  color: var(--ink-3);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.search-result-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.btn-mini {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--teal-soft);
  background: var(--surface);
  color: var(--teal-deep);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.btn-mini:hover { background: var(--teal-pale); border-color: var(--teal); transform: translateY(-1px); }
.btn-mini:disabled { opacity: 0.55; cursor: default; transform: none; background: var(--cream-2); }
.btn-mini-warn { color: var(--warn); border-color: rgba(168,68,62,0.4); }
.btn-mini-warn:hover { background: rgba(168,68,62,0.08); border-color: var(--warn); }
.search-empty {
  margin-top: 18px;
  font-size: 14px;
  color: var(--ink-2);
  font-style: italic;
}

/* ============================================================
   FEATURE 7b · listing-match score (objective features only)
   ============================================================ */
.match-weights {
  max-width: 920px;
  margin: 0 auto 36px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--clay);
  border-radius: var(--radius-card);
  padding: 26px 28px;
  box-shadow: var(--shadow);
}
.match-weights-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 8px;
}
.match-weights-head h3 { font-size: 22px; line-height: 1.25; }
.match-weights-sub {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 20px;
  max-width: 64ch;
}
.weight-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.weight-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.weight-row-label {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.weight-seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface);
}
.weight-seg button {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}
.weight-seg button + button { border-left: 1px solid var(--line); }
.weight-seg button.is-on[data-w="must"] { background: var(--teal); color: #fff; }
.weight-seg button.is-on[data-w="nice"] { background: var(--teal-pale); color: var(--teal-deep); }
.weight-seg button.is-on[data-w="cap"]  { background: rgba(189,117,68,0.16); color: var(--clay-deep); }
.weight-seg button.is-on[data-w="off"]  { background: var(--cream-2); color: var(--ink-3); }
.weight-seg button:hover:not(.is-on) { background: var(--cream-2); }
.match-fair {
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.55;
  font-style: italic;
}

/* the score badge + breakdown that rides on each listing/search card */
.match-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  background: var(--teal-pale);
  color: var(--teal-deep);
  border: 1px solid var(--teal-soft);
}
.match-badge.is-strong { background: rgba(47,125,91,0.13); color: var(--ok); border-color: rgba(47,125,91,0.3); }
.match-badge.is-cap    { background: rgba(168,68,62,0.10); color: var(--warn); border-color: rgba(168,68,62,0.3); }
.match-badge-num { font-family: var(--serif); font-size: 15px; line-height: 1; }
.match-breakdown {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
}
.match-breakdown .hit { color: var(--ok); font-weight: 600; }
.match-breakdown .miss { color: var(--warn); font-weight: 600; }

/* ============================================================
   FEATURE 7c · change-feed ("this just changed")
   ============================================================ */
.changes {
  max-width: 920px;
  margin: 0 auto 40px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-card);
  padding: 24px 28px;
  box-shadow: var(--shadow);
}
.changes[hidden] { display: none; }
.changes-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.changes-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--teal-pale);
  color: var(--teal);
  font-size: 18px;
}
.changes-title { font-size: 20px; line-height: 1.2; }
.changes-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.change-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}
.change-tag {
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-top: 1px;
}
.change-tag-drop { background: rgba(47,125,91,0.13); color: var(--ok); }
.change-tag-new  { background: var(--teal-pale); color: var(--teal-deep); }
.change-tag-rate { background: rgba(189,117,68,0.14); color: var(--clay-deep); }
.change-tag-rise { background: rgba(168,68,62,0.10); color: var(--warn); }
.change-text strong { color: var(--ink); font-weight: 600; }
.changes-note {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
  font-style: italic;
}

/* ============================================================
   FEATURE 4 · partners section (service-first, no funnel)
   ============================================================ */
/* Adaptive partner layout: each category (Movers, Lenders, …) is a tile that
   FLOWS to fit the width — one per row on a phone, two or three across on a
   wide screen — and sizes to its own content height (align-items:start). The
   lender tile is FEATURED: it spans two columns and carries a soft accent, so
   the section reads as 1 · 2 · featured instead of lone cards stretched thin. */
.partner-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}
.partner-group {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 20px 22px;
}
/* Featured tile (the lender intro): spans two columns where there's room,
   with a quiet teal accent so it leads the eye. Falls back to one column on
   narrow screens (the grid's auto-fit handles that). */
.partner-group--featured {
  grid-column: span 2;
  background:
    linear-gradient(180deg, var(--teal-pale, rgba(47,111,106,0.06)) 0%, var(--paper) 60%);
  border-color: var(--border-teal, var(--line));
}
.partner-group-title {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.partner-group-flag {
  font-size: 9.5px; letter-spacing: 1px;
  color: var(--accent-deep, var(--teal));
  background: var(--teal-pale, rgba(47,111,106,0.12));
  border-radius: 999px; padding: 2px 8px;
}
.partner-cards {
  display: block;   /* one card per category; the GROUP tile owns the layout */
}
.partner-card {
  /* the GROUP tile is the frame now; the card is just the content inside it
     (no double border/box). */
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.partner-name {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.2;
}
.partner-note {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  flex: 1;
}
.partner-contact {
  margin-top: 14px;
  font-size: 14px;
  color: var(--teal-deep);
  font-weight: 600;
}
.partner-respa {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
  font-style: italic;
}
.partners-empty {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.6;
  font-style: italic;
}

/* ============================================================
   FEATURE 6 · market-trend mini-curve + seasonal climate strip
   (extend the existing neighborhood detail cards)
   ============================================================ */
.trend-curve {
  margin: 14px 0 4px;
}
.trend-curve svg { display: block; width: 100%; height: auto; overflow: visible; }
.trend-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
}
.trend-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-2);
}
.trend-legend span { display: inline-flex; align-items: center; gap: 6px; }
.trend-swatch { width: 14px; height: 3px; border-radius: 999px; display: inline-block; }
.trend-swatch-price { background: var(--teal); }
.trend-season {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.trend-season strong { color: var(--ink); font-weight: 600; }

/* seasonal climate row */
.climate-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 14px 0 4px;
}
.climate-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 8px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  text-align: center;
}
.climate-num {
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1;
  color: var(--teal-deep);
}
.climate-num.is-ph {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 13px;
  color: var(--clay-deep);
}
.climate-lbl {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================================
   FEATURE 3/8 · walk-through spotlight overlay
   A dimmed scrim with a highlight ring + caption card. The ring is a
   big box-shadow "hole" so the highlighted section stays lit. Resolves
   INTO the product on the last step (scrim fades, leaves at #thread).
   ============================================================ */
.wt-scrim {
  /* transparent click-catcher only — the DIM comes from the ring's spread-shadow.
     (Was also tinted, which double-darkened on top of the ring and washed the
     spotlight out.) Click anywhere off the ring to dismiss. */
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: transparent;
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease);
}
.wt-scrim.in { opacity: 1; }
.wt-scrim[hidden] { display: none; }
/* the lit ring: a transparent box whose huge spread-shadow darkens
   everything except the rectangle it sits over. On BODY (document coords),
   above the scrim so the cut-out reads. */
.wt-ring {
  position: absolute;
  z-index: 2000;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 9999px rgba(20,28,26,0.62);
  border: 2px solid var(--teal-light);
  pointer-events: none;
  transition: top var(--dur-reveal) var(--ease), left var(--dur-reveal) var(--ease),
              width var(--dur-reveal) var(--ease), height var(--dur-reveal) var(--ease);
}
.wt-card {
  /* FIXED, not absolute: the caption stays pinned in the viewport as the page
     scrolls to each step, so it never slides off-screen. The ring stays
     absolute over the target panel and tracks on scroll (see buyer.js). */
  position: fixed;
  z-index: 2001;
  width: min(380px, calc(100vw - 40px));
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  box-shadow: 0 24px 64px rgba(20,28,26,0.4);
  transition: top var(--dur-reveal) var(--ease), left var(--dur-reveal) var(--ease);
}
.wt-step-count {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}
.wt-card h3 {
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 8px;
}
.wt-card p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
}
.wt-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.wt-skip {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
}
.wt-skip:hover { color: var(--teal-deep); }
.wt-progress {
  display: flex;
  gap: 6px;
  margin-top: 16px;
}
.wt-pip {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--line);
  transition: background var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);
}
.wt-pip.is-on { background: var(--teal); transform: scale(1.25); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .listings { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .fact.fact-wide { grid-column: auto; }
  .split, .thread-wrap { grid-template-columns: 1fr; gap: 40px; }
  .msg { max-width: 92%; }
  .zip-tabs { flex-direction: column; }
  .zip-tab { width: 100%; }
  .estimator-grid { grid-template-columns: repeat(2, 1fr); }
  .estimator-out { gap: 18px; }
  .est-break { margin-left: 0; gap: 18px; }
  .search-grid { grid-template-columns: repeat(2, 1fr); }
  .search-results { grid-template-columns: 1fr; }
  /* on narrow screens the featured lender tile stops spanning two columns */
  .partner-group--featured { grid-column: span 1; }
  .climate-strip { grid-template-columns: repeat(2, 1fr); }
  .bp-row { gap: 16px; }
}
@media (max-width: 820px) {
  .hero {
    padding: 132px 0 72px;
    min-height: clamp(620px, 88vh, 760px);
  }
  .hero h1 { max-width: 12ch; }
}
@media (max-width: 520px) {
  #ti-role {
    left: 12px !important;
    right: 12px !important;
    bottom: 10px !important;
    transform: none !important;
    max-width: none !important;
    justify-content: center !important;
    gap: 7px !important;
    border-radius: 18px !important;
    padding: 7px 9px !important;
  }
  #ti-role .lbl,
  #ti-role .who,
  #ti-role .sep {
    display: none !important;
  }
  #ti-role a.back,
  #ti-role select {
    font-size: 11.5px !important;
    padding: 6px 9px !important;
  }
  .estimator-grid { grid-template-columns: 1fr; }
  .search-grid { grid-template-columns: 1fr; }
  .weight-row { grid-template-columns: 1fr; gap: 10px; }
  .weight-seg { width: 100%; justify-content: stretch; }
  .weight-seg button { flex: 1; }
}

/* ============================================================
   REDUCED MOTION — one block; motion never load-bearing for meaning
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .settle { opacity: 1 !important; transform: none !important; }
  .hero h1 .rot.swap { opacity: 1 !important; transform: none !important; }
  .scroll-cue::after { animation: none !important; }
  /* walk-through: instant cuts, no slide of the ring/card/scrim */
  .wt-scrim { transition: none !important; }
  .wt-scrim.in { opacity: 1 !important; }
  .wt-ring, .wt-card { transition: none !important; }
}