/* ══════════════════════════════════════════════════════════════════
   AVENIR ARTICLE · standalone stylesheet
   4-act editorial flow · desktop-first · no framework
   ══════════════════════════════════════════════════════════════════ */

/* Design tokens */
:root {
  --ink: #0f172a;
  --ink-soft: #334155;
  --ink-mute: #526075; /* was #64748b — 3.75:1 on the tinted calc panel; #526075 clears 4.5:1 on every panel tint in use */
  --paper: #ffffff;
  --paper-2: #f8fafc;
  --paper-3: #f1f5f9;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --accent: #009ab9;
  --accent-ink: #005a6d;
  --accent-soft: #e0f4f8;
  --cta: #d43245;
  --cta-hover: #c02637;
  --gold: #d4b254;
  --gold-soft: #fdf6dd;
  --gold-ink: #7a5a1a;
  --good: #1f9d67;
  --good-soft: #ecfdf3;
  --warn: #b46a24;
  --warn-soft: #fef7ed;
  --bad: #b23a3a;
  --bad-soft: #fef2f2;

  /* TEXT-SAFE variants of the brand hues.
     --accent / --good / --warn are FILL colours: they are tuned for borders,
     icons, bars and badge backgrounds, and they are NOT legible as small text.
     Measured against every light surface this page uses (#fff, --paper-2,
     #f9fafb, --good-soft, --warn-soft) they land at 3.12–4.18:1, i.e. they fail
     WCAG AA (4.5:1) for text under 24px. That was 22 of the audit's failures:
     .section-eyebrow (x11), .amenity-green, .verdict-col-head, .about-title,
     .byline-license and friends.
     These *-text tokens are the same hue and saturation, darkened only in
     lightness, and verified >= 4.8:1 on ALL of those surfaces — the 0.3 of
     headroom above 4.5 is deliberate so a future background tweak can't
     silently drop the page back under the line.
     RULE OF THUMB: text -> *-text, everything else -> the base token. */
  --accent-text: #007891;
  --good-text: #197d52;
  --warn-text: #9f5e20;

  --serif: 'Fraunces', ui-serif, Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --r-lg: 20px;
  --r-md: 12px;
  --r-sm: 8px;

  --pad: clamp(20px, 4vw, 80px);
}

/* Base */
.community-review-page *, .community-review-page *::before, .community-review-page *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
.community-review-page body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.community-review-page img { max-width: 100%; height: auto; display: block; }
/* The :not() guards are LOAD-BEARING, not defensive noise.
   <Header /> and <Footer /> render INSIDE .community-review-page (see
   src/pages/CommunityReview.tsx lines 429 and 1941), so every descendant
   typography rule below also matches the shared site chrome and beats its
   Tailwind utilities on specificity (0-1-1 vs 0-1-0). Measured damage before
   the guards: ~20 footer links at rgb(0,90,109) on rgb(15,23,42) = 2.28:1,
   three footer h3.text-white rendering rgb(15,23,42) on rgb(15,23,42) =
   1.0:1 (invisible), and the header "Find My Apartment" CTA at 1.54:1.
   Both components expose stable ids for exactly this purpose.

   The guard is :not(:where(...)) and NOT :not(#site-header *) because :not()
   takes the specificity of its argument. A bare :not(#id *) would add an ID
   (2-1-1) and start outranking the deliberate overrides further down this
   file, e.g. `.community-review-page a.btn-outline` at 0-2-1 — silently
   re-breaking the button contrast this same file fixes. :where() always
   contributes zero, so these rules keep their original 0-1-1 weight and only
   change WHICH elements they match, never how strongly.

   The element selectors are ALSO wrapped in :where(), making these rules
   specificity 0-0-0 — genuine defaults. This is the fix for the bug the user
   reported three separate times ("the font color is different again"):
     .community-review-page p   -> 0-1-1
     .final-lede                -> 0-1-0   ...loses.
   So EVERY single-class paragraph/link rule in this 4,200-line file was dead on
   arrival. .final-lede, .scraped-pricing-*, .live-pricing-note and
   .calc-picker-note all declared light text for dark cards and all silently
   rendered var(--ink-soft) dark slate instead. Patching them one at a time (as
   was done twice before) never held, because the next new class hit the same
   wall. At 0-0-0 any single class now wins, which is the behaviour the rest of
   the file was written assuming.

   DO NOT re-add specificity here. If a base rule needs to beat a component
   rule, that's a signal the component rule is wrong, not this one. */
:where(.community-review-page) :where(a):not(:where(#site-header *, #site-footer *)) { color: var(--accent-ink); text-underline-offset: 3px; }
:where(.community-review-page) :where(a):not(:where(#site-header *, #site-footer *)):hover { color: var(--accent); }

/* Wraps */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--pad); }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 var(--pad); }

/* Typography */
:where(.community-review-page) :where(h1):not(:where(#site-header *, #site-footer *)),
:where(.community-review-page) :where(h2):not(:where(#site-header *, #site-footer *)),
:where(.community-review-page) :where(h3):not(:where(#site-header *, #site-footer *)),
:where(.community-review-page) :where(h4):not(:where(#site-header *, #site-footer *)) {
  font-family: var(--sans);
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
/* SIZE/WEIGHT rules are anchored on the page class (specificity 0-1-0), NOT
   :where(). The Tailwind CDN injects its preflight (h1,h2{font-size:inherit},
   0-0-1) at runtime AFTER this stylesheet, so a zero-specificity size rule
   loses to it and every article heading collapses to body size — which is
   exactly the bug the operator reported. 0-1-0 beats the preflight; component
   overrides later in this file tie at 0-1-0 and win by order, preserving the
   single-class-wins behavior the color rules rely on. Keep COLOR on the
   :where() base above; keep SIZE here at 0-1-0. */
.community-review-page :where(h1):not(:where(#site-header *, #site-footer *)) { font-size: clamp(40px, 5.4vw, 72px); line-height: 1.02; font-weight: 800; letter-spacing: -0.04em; }
.community-review-page :where(h2):not(:where(#site-header *, #site-footer *)) { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; }
.community-review-page :where(h3):not(:where(#site-header *, #site-footer *)) { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; font-weight: 700; }
.community-review-page :where(h4):not(:where(#site-header *, #site-footer *)) { font-size: 16px; line-height: 1.3; font-weight: 700; }
:where(.community-review-page) :where(p):not(:where(#site-header *, #site-footer *)) { text-wrap: pretty; margin: 0 0 1em; color: var(--ink-soft); }

.section-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  font-weight: 600;
  margin-bottom: 16px;
}
.section-lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 720px;
  margin: 12px 0 40px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  margin-bottom: 24px;
}
.eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* Section shell */
.section {
  padding: 80px 0;
  border-top: 1px solid var(--line);
}
.section:first-of-type { border-top: 0; }

/* ─── Reading progress bar ─────────────────────────────────────── */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--cta));
  z-index: 100;
  transition: width 100ms linear;
}

/* ─── Sticky mini-nav ──────────────────────────────────────────── */
.mini-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-100%);
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mini-nav.visible { transform: translateY(0); }
.mini-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px var(--pad);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
}
.mini-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.mini-nav-dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
}
.mini-nav-title { font-weight: 700; font-size: 15px; }
.mini-nav-sub { font-size: 12px; color: var(--ink-mute); font-weight: 500; }
@media (max-width: 900px) { .mini-nav-sub { display: none; } }
.mini-nav-links {
  display: flex;
  gap: 24px;
  justify-content: center;
}
@media (max-width: 720px) { .mini-nav-links { display: none; } }
.mini-nav-links a {
  color: var(--ink-mute);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 120ms, border-color 120ms;
}
.mini-nav-links a:hover { color: var(--ink); }
.mini-nav-links a.current { color: var(--accent-ink); border-bottom-color: var(--accent); }
.mini-nav-cta {
  background: var(--cta);
  white-space: nowrap;
  flex-shrink: 0;
  color: white;
  padding: 8px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  transition: background 120ms;
}
.mini-nav-cta:hover { background: var(--cta-hover); color: white; }

/* ─── Breadcrumb ───────────────────────────────────────────────── */
.breadcrumb {
  padding-top: 24px;
  padding-bottom: 8px;
  font-size: 13px;
  color: var(--ink-mute);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--ink-mute); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-ink); text-decoration: underline; }
.breadcrumb .current { color: var(--ink); font-weight: 500; }

/* ─── HERO ─────────────────────────────────────────────────────── */
.hero { padding-bottom: 60px; border-top: 0; }
.hero-media {
  position: relative;
  /* Centered to the same 1280px column as .wrap (operator note 2026-08-21:
     the full-bleed figure read as off-center against the centered content).
     Below 1280px wide the box still spans the viewport, so mobile/tablet
     rendering is unchanged. */
  margin: 16px auto 40px;
  max-width: 1280px;
  /* 16:7 (2.29:1), not 24:9 (2.67:1). Source heroes are ~1800x1000 (1.8:1), so
     24:9 cropped away ~33% of the image height — and because .hero-caption and
     .trust-overlay are pinned to the bottom, that crop is effectively taken off
     the TOP, pushing the building out of frame. 16:7 stays wide while cutting
     far less. */
  aspect-ratio: 16 / 7;
  max-height: 70vh;
  overflow: hidden;
  background: var(--paper-3);
}
/* Once the figure detaches from the viewport edges, square corners read as a
   rendering bug — round them to match the page's card language. */
@media (min-width: 1296px) {
  .hero-media { border-radius: 14px; }
}
/* object-position keeps the subject centred horizontally but biases the vertical
   crop slightly ABOVE centre, because the bottom ~76px of this box is covered by
   the caption and trust overlay. Plain `center` hides the building behind them. */
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
/* HERO SCRIM (operator request 2026-08-24: "put a 60% dark gradient tint on
   all hero images ... so the other text on image is more visible"). Every
   review hero carries white text over whatever the photographer shot — The
   Waller's caption sat on a lit pool deck and glass railings and was close
   to unreadable.

   Shaped, not flat: barely there across the top two thirds so the building
   and sky stay the reason the photo is here, then ramping hard through the
   caption band to ~62% behind the trust bar. That clears WCAG AA for white
   text on the worst-case bright hero while a flat 60% would have dulled
   every image on the site. .trust-overlay's own gradient is retired below —
   one scrim owns the darkening, so the two can never compound. */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8, 13, 20, 0.22) 0%,
    rgba(8, 13, 20, 0.04) 30%,
    rgba(8, 13, 20, 0.06) 52%,
    rgba(8, 13, 20, 0.34) 70%,
    rgba(8, 13, 20, 0.58) 84%,
    rgba(8, 13, 20, 0.72) 100%
  );
}
.hero-caption {
  position: absolute;
  z-index: 2;
  bottom: 76px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--pad);
  color: white;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.hero-credit a { color: white; }

.trust-overlay {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  right: 0;
  /* Darkening now belongs to .hero-media::after — the shared scrim. */
  padding: 40px var(--pad) 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.trust-item {
  color: white;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trust-item b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.trust-item span {
  font-size: 12px;
  color: rgba(255,255,255,0.92);
  font-weight: 500;
}
/* Hero text sits on photography we do not control, so the type carries its
   own insurance on top of the scrim: a soft shadow that disappears against
   dark pixels and rescues the line against a bright sky or pale concrete. */
.trust-item b,
.trust-item span,
.hero-caption {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
@media (max-width: 640px) {
  .trust-overlay { padding: 24px 20px 12px; gap: 12px; }
  .trust-item b { font-size: 13px; }
  .trust-item span { font-size: 11px; }
}

.hero-body { padding-top: 20px; }
.hero-title { max-width: 1000px; margin-bottom: 40px; }

.byline {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 24px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 32px;
  max-width: 720px;
}
.byline-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.byline-body { min-width: 0; }
.byline-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.byline-license {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent-text);
  margin-left: 8px;
  font-weight: 600;
}
.byline-license a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color 120ms;
}
.byline-license a:hover {
  text-decoration-color: var(--accent);
}
.byline-meta { font-size: 13px; color: var(--ink-mute); margin-top: 4px; }
/* Where the prices on this page came from and when, in the byline where a
   reader looking for provenance already looks. */
.byline-price-checked { margin-top: 2px; }
.byline-actions { display: flex; gap: 8px; }
.byline-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: white;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 120ms;
}
.byline-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.byline-btn-icon { padding: 8px; }
@media (max-width: 640px) {
  .byline { grid-template-columns: auto 1fr; }
  .byline-actions { grid-column: 1 / -1; }
}

.jump-pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 720px;
}
.jump-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--accent-soft);
  border: 1px solid transparent;
  color: var(--accent-ink);
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  transition: all 120ms;
}
.jump-pill:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent-ink);
}

/* ─── VERDICT SECTION ──────────────────────────────────────────── */
.verdict-section { background: var(--paper-2); }
.verdict-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  margin-top: 40px;
}
@media (max-width: 900px) { .verdict-grid { grid-template-columns: 1fr; gap: 32px; } }
.verdict-rating {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  text-align: center;
}
/* v4.1: the score card is instantly readable — number, tier, credit line —
   and the full rubric lives in a full-width box under the three cards,
   closed by default (operator layout, 2026-08-18). */
.verdict-score-row {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}
.verdict-score-number {
  font-size: 76px;
  font-weight: 800;
  color: var(--accent-ink);
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.verdict-score-outof {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink-mute);
  margin-left: 3px;
}
.verdict-score-side { display: grid; gap: 8px; justify-items: center; text-align: center; }

/* The full-width breakdown box, styled like the class-grade card it replaced:
   quiet summary row with a chevron, everything else revealed on open. */
.verdict-rubric {
  margin-top: 28px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: white;
}
.verdict-rubric-summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  list-style: none;
}
.verdict-rubric-summary::-webkit-details-marker { display: none; }
.verdict-rubric-summary-text { display: grid; gap: 3px; }
.verdict-rubric-summary-score {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.verdict-rubric-summary-label { font-size: 12.5px; color: var(--ink-mute); }
.verdict-rubric-chevron { flex-shrink: 0; color: var(--ink-mute); transition: transform 0.2s ease; }
.verdict-rubric[open] .verdict-rubric-chevron { transform: rotate(180deg); }
.verdict-rubric-body { padding: 4px 22px 22px; border-top: 1px solid var(--line); }
.verdict-rubric-intro { margin: 14px 0 18px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }

/* One row per dimension: [name + fixed share] [bar] [score], with the
   evidence note in small letters spanning the full width underneath. */
.rubric-dim {
  display: grid;
  grid-template-columns: 230px 1fr 74px;
  gap: 4px 16px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--paper-2);
}
@media (max-width: 720px) { .rubric-dim { grid-template-columns: 1fr 74px; } .rubric-dim .rubric-bar { grid-column: 1 / -1; } }
.rubric-dim-info { display: grid; gap: 2px; }
.rubric-dim-name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.rubric-dim-weight { font-size: 11px; color: var(--ink-mute); }
.rubric-dim-score {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-ink);
  white-space: nowrap;
  justify-self: end;
}
.rubric-dim-score em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink-mute); }
.rubric-bar {
  height: 7px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.rubric-bar-fill { height: 100%; border-radius: 999px; background: var(--accent-ink); }
.rubric-dim-note { grid-column: 1 / -1; font-size: 11.5px; line-height: 1.55; color: var(--ink-mute); }
.rubric-total-row { border-bottom: none; border-top: 2px solid var(--line-strong); margin-top: 4px; }
.rubric-total-row .rubric-dim-name { font-size: 14.5px; }
.rubric-math {
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
}

/* Where the number lands on the 0-10 scale — marker chip on a gradient. */
.rubric-scale { margin-top: 18px; }
.rubric-scale-caption { font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 10px; }
.rubric-scale-track {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #b3403c, #c98f2e 45%, #2e7d4f 85%);
  margin-bottom: 34px;
}
.rubric-scale-marker {
  position: absolute;
  top: -3px;
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.35);
  transform: translateX(-50%);
}
.rubric-scale-chip {
  position: absolute;
  top: 24px;
  transform: translateX(-50%);
  background: var(--ink);
  color: white;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  white-space: nowrap;
}
.rubric-plain { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .rubric-plain { grid-template-columns: 1fr; } }
.rubric-plain-col { border-top: 1px solid var(--line); padding-top: 12px; }
.rubric-plain-catches .verdict-reasons-label { color: var(--warn-text); }
.rubric-method-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-text);
}
.community-grade-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  margin: 0 2px;
}

/* The plain-words tier badge next to the number. */
.verdict-tier {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.verdict-tier-good { background: var(--good-soft); color: var(--good-text); border: 1px solid #bbe9d0; }
.verdict-tier-warn { background: var(--warn-soft); color: var(--warn-text); border: 1px solid #f0d9b5; }
.verdict-tier-bad { background: var(--bad-soft); color: var(--bad); border: 1px solid #f2c7c7; }
.verdict-reasons-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--good-text);
  margin-bottom: 6px;
}
.verdict-reasons-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
.verdict-reasons-list li {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.verdict-building {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: left;
}

.verdict-caveat { font-size: 12px; color: var(--ink-mute); }

.verdict-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 720px) { .verdict-lists { grid-template-columns: 1fr; } }
.verdict-col {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 28px;
}
.verdict-col-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.verdict-recommended .verdict-col-head { color: var(--good-text); }
.verdict-skip .verdict-col-head { color: var(--bad); }
.verdict-col ul { margin: 0; padding: 0; list-style: none; }
.verdict-col li {
  padding: 8px 0 8px 24px;
  position: relative;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}
.verdict-recommended li::before,
.verdict-skip li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15px;
  width: 12px;
  height: 2px;
}
.verdict-recommended li::before { background: var(--good); }
.verdict-skip li::before { background: var(--bad); }

/* ─── OPENING ──────────────────────────────────────────────────── */
.opening-section { padding: 60px 0; }
.lede {
  font-family: var(--sans);
  font-size: 22px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 24px;
}
.drop-cap {
  float: left;
  font-family: var(--sans);
  font-size: 72px;
  line-height: 0.85;
  padding: 6px 12px 0 0;
  color: var(--accent-ink);
  font-weight: 700;
  letter-spacing: -0.04em;
}
/* Every opening paragraph is spaced, not just the lede. Without this, the
   second and later paragraphs collided (the lede carried the only margin), so
   any review with 3+ opening paragraphs ran two of them together. */
.opening-section p { font-size: 18px; line-height: 1.7; color: var(--ink); margin: 0 0 20px; }
.opening-section p:last-child { margin-bottom: 0; }

/* ─── COST CALCULATOR ──────────────────────────────────────────── */
.cost-section { background: var(--ink); color: white; }
.cost-section h2, .cost-section h3 { color: white; }
.cost-section .section-eyebrow { color: var(--gold); }
.cost-section .section-lede { color: rgba(255,255,255,0.7); }
.cost-section em { color: var(--gold); font-style: normal; }

.calc {
  display: grid;
  /* minmax(0, …): a grid column's floor is otherwise its content's
     min-content width, and a long size or move-in choice in the selects
     (308px for "3 Bedroom · $1,185–1,675 · 1,142 sqft") pushed a 320px
     page 33px wide (PR 113 check, 2026-10-19). */
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-lg);
  padding: 40px;
  margin: 40px 0;
}
@media (max-width: 900px) { .calc { grid-template-columns: minmax(0, 1fr); padding: 24px; } }
.calc-picker, .calc-result { min-width: 0; }

/* Live pricing panel — RentCast-sourced availability, integration point for
   the future pricing API (see CommunityReviewPage's `liveProperty` prop).
   Sits above the editorial calculator, inside the same dark cost-section. */
.live-pricing-panel {
  margin-top: 32px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 28px 32px;
}
.live-pricing-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.live-pricing-head h3 { font-size: 16px; margin: 0; }
.live-pricing-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(0,154,185,0.25);
  flex-shrink: 0;
}
.live-pricing-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(0,154,185,0.15);
  padding: 4px 10px;
  border-radius: 999px;
}
.live-pricing-list { display: flex; flex-direction: column; gap: 10px; }
.live-pricing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-md);
  padding: 14px 18px;
}
.live-pricing-row-title { font-weight: 700; font-size: 14px; color: white; margin: 0; }
.live-pricing-row-sub { font-size: 12px; color: rgba(255,255,255,0.55); margin: 3px 0 0; }
.live-pricing-row-cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.live-pricing-row-price { font-size: 17px; font-weight: 800; color: var(--gold); margin: 0; white-space: nowrap; }
.live-pricing-row-price span { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.5); }
.btn-small { padding: 8px 14px !important; font-size: 12px !important; white-space: nowrap; }
/* 0.62 alpha, not 0.45: over the navy card 0.45 composites to 4.46:1, just under AA. */
.live-pricing-note { font-size: 12px; color: rgba(255,255,255,0.62); margin: 16px 0 0; }
.live-pricing-note a { color: var(--accent); text-decoration: underline; }

/* BrowserAct-sourced panel — pricing scraped from the community's OWN leasing
   site. This is the primary source (more accurate than RentCast's aggregated
   listings), so it gets the gold accent to read as the headline number. */
.live-pricing-panel--scraped { border-color: var(--gold); }
.live-pricing-panel--scraped .live-pricing-dot {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(198,160,74,0.25);
}
.live-pricing-panel--scraped .live-pricing-count {
  color: var(--gold);
  background: rgba(198,160,74,0.15);
}
/* Per-bedroom scraped pricing — the headline figure on a review page.
   Rendered above the whole-community range because a renter shopping for a
   1br needs the 1br number, not a building-wide span. */
.scraped-unit-table {
  border: 1px solid rgba(198,160,74,0.28);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 0 0 14px;
}
.scraped-unit-row {
  display: grid;
  grid-template-columns: 1.6fr 1.2fr 0.7fr;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.scraped-unit-row:first-child { border-top: none; }
/* A layout the community doesn't currently offer: dimmed, not hidden, so the
   reader sees the full floor-plan lineup. */
.scraped-unit-row--out { opacity: 0.5; }
.scraped-unit-row--head {
  background: rgba(198,160,74,0.12);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.scraped-unit-row--head span:last-child,
.scraped-unit-avail { text-align: right; }
.scraped-unit-type {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.scraped-unit-sqft {
  font-size: 11px;
  font-weight: 400;
  /* 0.62, not 0.45: over the navy pricing card 0.45 composites to 4.46:1. This
     is square-footage on a live-pricing card renters use to compare units — it
     has to be readable, not decorative. */
  color: rgba(255,255,255,0.62);
}
.scraped-unit-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
}
.scraped-unit-avail {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}

.scraped-pricing-figures {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-md);
  padding: 18px 22px;
}
.scraped-pricing-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0 0 6px;
}
.scraped-pricing-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--gold);
  margin: 0;
  line-height: 1.1;
}
.scraped-pricing-value span { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.5); }
/* The day the rent above it was read off the community's own site. Quiet,
   directly under the number, in the same type as the note beside it. */
.scraped-pricing-checked { font-size: 12px; color: rgba(255,255,255,0.5); margin: 4px 0 0; }
.scraped-pricing-sub { font-size: 12px; color: rgba(255,255,255,0.55); margin: 6px 0 0; }
.scraped-pricing-cta { flex-shrink: 0; }
.scraped-pricing-special {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  background: rgba(198,160,74,0.1);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm, 6px) var(--r-sm, 6px) 0;
  padding: 10px 14px;
  margin: 14px 0 0;
}
.scraped-pricing-special strong { color: var(--gold); }
/* Liability rule: conditional specials carry their scope caveat visibly. */
.special-scope-note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--warn-text);
}
@media (max-width: 640px) {
  .scraped-pricing-figures { flex-direction: column; align-items: flex-start; }
  .scraped-pricing-cta { width: 100%; }
  .scraped-unit-row { grid-template-columns: 1.3fr 1fr 0.6fr; gap: 8px; padding: 10px 13px; }
  .scraped-unit-price { font-size: 14px; }
  .scraped-unit-type { font-size: 13px; }
}
@media (max-width: 640px) {
  .live-pricing-row { flex-direction: column; align-items: flex-start; }
  .live-pricing-row-cta { width: 100%; justify-content: space-between; }
}

/* ─── PRICING & FLOOR PLANS (one-source section) ────────────────
   The light section that owns the whole inventory story when the SparkAPT
   bank is fresh. Bed-type strip = the 5-second answer; each card jumps to
   its plan group below. The dark cost-section then carries only the
   calculator. */
.bedtype-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 28px 0 18px;
}
.bedtype-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.bedtype-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.bedtype-name {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-ink);
}
.bedtype-price {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.bedtype-price span { font-size: 12px; font-weight: 500; color: var(--ink-mute); margin-right: 2px; }
.bedtype-meta { font-size: 12px; color: var(--ink-mute); }
.bedtype-avail { font-size: 12px; font-weight: 700; color: #047857; }
.bedtype-avail--none { color: var(--ink-mute); font-weight: 500; }
.bedtype-card--out { opacity: 0.6; }
.bedtype-card--out:hover { transform: none; border-color: var(--line-strong); box-shadow: none; }
.pricing-special-banner {
  background: var(--gold-soft);
  border-left: 3px solid var(--gold);
  color: var(--gold-ink);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 12px 16px;
  font-size: 14px;
  margin: 0 0 12px;
}
.pricing-special-banner strong { color: var(--gold-ink); }
.pricing-provenance { font-size: 13px; color: var(--ink-mute); margin: 0 0 34px; }
/* Sticky header clearance so strip jumps land with the group title visible. */
.plan-group { scroll-margin-top: 90px; }
/* Group heads anchor the eye (operator 2026-09-01: "hard to
   differentiate studio, one and two bedrooms"): a commanding size title
   on the left, the rollup with an emphasized floor price on the right,
   and a hairline above so each size reads as its own chapter. */
.plan-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 18px;
  border-top: 1px solid var(--line);
  padding-top: 26px;
  margin: 0 0 18px;
}
.plan-group-head h3 {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.plan-group-head p { font-size: 14px; color: var(--ink-mute); margin: 0; }
.plan-group-head p b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.pricing-plans-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 18px; }
.pricing-plans-cta span { font-size: 12px; color: var(--ink-mute); max-width: 420px; }

/* Checklist groups collapse after the first: summary reads as the group
   header it replaced, with a count and a caret. */
.check-group > summary { cursor: pointer; display: flex; align-items: baseline; gap: 10px; list-style: none; }
.check-group > summary::-webkit-details-marker { display: none; }
.check-group > summary::after { content: '\25be'; margin-left: auto; color: var(--ink-mute); transition: transform 0.15s ease; }
.check-group[open] > summary::after { transform: rotate(180deg); }
.check-group-count { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); }
html.printing-checklist .check-group { }
@media print { .check-group:not([open]) > *:not(summary) { display: block; } }
@media (max-width: 640px) {
  .bedtype-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bedtype-card { padding: 14px 16px; }
  .bedtype-price { font-size: 20px; }
}

/* Prices line up like a ledger: tabular figures wherever numbers stack. */
.bedtype-price, .plan-price, .unit-chip b { font-variant-numeric: tabular-nums; }
/* Dense plan rows reward the scanning eye with a whisper of hover. */
.plan-row { transition: background-color 0.12s ease; }
.plan-row:hover { background: #f8fafc; }
/* Per-plan price movement, the same honesty language as the price-drop
   badges on cards: green when the advertised floor fell, amber when it
   rose. Hover carries the prior price. */
.plan-delta {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
  border-radius: 999px;
  padding: 2px 8px;
  margin-right: 6px;
  vertical-align: 1px;
  font-variant-numeric: tabular-nums;
}
.plan-delta--down { color: #047857; background: #ecfdf5; }
.plan-delta--up { color: #92400e; background: #fffbeb; }
.bedtype-price .plan-delta { margin-right: 0; margin-left: 8px; }
/* The quiet arithmetic winner: lowest $/sq ft in a group of 3+. */
.best-value-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: #e6f6f9;
  border: 1px solid rgba(0,154,185,0.25);
  border-radius: 999px;
  padding: 3px 9px;
}
.best-value-tag--inline { position: static; vertical-align: 1px; white-space: nowrap; }
/* Every open home is its own button: price + move-in date, opening the
   attributed lead modal with the exact unit named. */
.unit-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.unit-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-family: inherit;
  font-size: 12px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}
.unit-chip b { font-weight: 800; }
.unit-chip span { font-weight: 500; color: var(--ink-mute); }
.unit-chip:hover { border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 8px rgba(0,154,185,0.12); }
.unit-chip:hover span { color: var(--accent-ink); }
.unit-chip--ask { font-weight: 700; color: var(--accent-ink); border-style: dashed; }

/* The money section leads with presence: a larger, brand-deep headline. */
.pricing-plans-section h2 {
  font-size: clamp(34px, 4.2vw, 46px);
  letter-spacing: -0.03em;
  color: var(--accent-ink);
}
/* Trust, stated once, plainly, above the numbers it vouches for. */
.pricing-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  padding: 0;
  margin: 18px 0 8px;
}
.pricing-trust li { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.pricing-trust li::before { content: '\2713'; color: var(--accent); font-weight: 800; margin-right: 7px; }
/* Chips read as actions, not labels: a standing arrow in the accent. */
.unit-chip::after { content: '\2192'; color: var(--accent); font-weight: 800; margin-left: 3px; }
.unit-chip--ask::after { content: none; }

/* Net effective on a home's own button: quiet gold, the same honesty
   frame as the calculator's spread-evenly math. */
.unit-chip-net { font-weight: 700; color: var(--gold-ink); background: var(--gold-soft); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.unit-chip:hover .unit-chip-net { color: var(--gold-ink); }

/* R2 photo gallery: fixed tiles in a scroll-snap strip, no JS. */
.photo-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  margin: 20px 0 6px;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.photo-strip img {
  flex: none;
  width: 340px;
  height: 226px;
  object-fit: cover;
  border-radius: var(--r-md);
  scroll-snap-align: start;
  background: #f1f5f9;
}
@media (max-width: 640px) { .photo-strip img { width: 260px; height: 178px; } }

/* Spark profile hero: the template-page opener above the one-source
   pricing section. Same design language as the review sections. */
.profile-hero { padding-bottom: 8px; }
.profile-hero h1 {
  font-size: clamp(34px, 5vw, 52px);
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 6px 0 14px;
}
.profile-hero .section-lede { max-width: 760px; }
.profile-facts { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.profile-facts li {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 7px 14px;
  font-variant-numeric: tabular-nums;
}
.profile-band { background: var(--ink); color: #fff; }
.profile-band h2 { color: #fff; }
.profile-band .section-lede { color: rgba(255,255,255,0.7); }
.profile-band-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }



.calc-picker-group { margin-bottom: 28px; }
.calc-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
  font-weight: 600;
}
.calc-label-sub { color: var(--gold); text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 8px; }

.calc-picker-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.calc-pick {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  color: white;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all 120ms;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.calc-pick:hover { border-color: var(--gold); background: rgba(255,255,255,0.08); }
.calc-pick.active {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.calc-pick-title { font-weight: 700; font-size: 14px; }
.calc-pick-sub { font-size: 11px; opacity: 0.8; font-family: var(--mono); }

.calc-addons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 640px) { .calc-addons { grid-template-columns: 1fr; } }
.calc-addon {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all 120ms;
}
.calc-addon:hover { background: rgba(255,255,255,0.08); }
.calc-addon input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
  cursor: pointer;
}
.calc-addon-body { display: flex; flex-direction: column; gap: 2px; }
.calc-addon-body b { font-size: 13px; }
.calc-addon-body span { font-size: 11px; opacity: 0.7; font-family: var(--mono); }

.calc-select {
  width: 100%;
  max-width: 100%;
  text-overflow: ellipsis;
  padding: 12px 44px 12px 16px;
  background-color: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r-sm);
  color: white;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  transition: border-color 120ms;
}
.calc-select:hover, .calc-select:focus {
  border-color: rgba(255,255,255,0.35);
  outline: none;
}

/* Options render with browser's native dropdown chrome — force dark text on white
   so they're readable when the list is open. This overrides the parent's white color. */
.calc-select option {
  color: var(--ink);
  background: white;
  padding: 8px;
  font-weight: 500;
}
.calc-select option:disabled,
.calc-select option[data-unavailable] {
  color: var(--ink-mute);
  font-style: italic;
}

.calc-result {
  background: rgba(212, 178, 84, 0.08);
  border: 1px solid var(--gold);
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.calc-result-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.calc-result-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 12px 0 8px;
  color: white;
  font-variant-numeric: tabular-nums;
}
.calc-result-currency { font-size: 32px; font-weight: 700; color: var(--gold); }
#calcTotal { font-size: 68px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.calc-result-per { font-size: 22px; opacity: 0.7; margin-left: 4px; }
.calc-result-effective { font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 24px; }

.calc-breakdown {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 20px;
}
.calc-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  font-variant-numeric: tabular-nums;
}
.calc-row-discount { color: var(--gold); }
/* A figure never breaks between its minus sign and its dollars ("−$124" at
   320px). */
.calc-row > span:last-child { white-space: nowrap; padding-left: 12px; }
.calc-row-total {
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 8px;
  padding-top: 12px;
  font-weight: 700;
  color: white;
  font-size: 15px;
}
.calc-disclaimer {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-mute);
}
/* a.calc-cta (element + class) so this wins over the .btn-primary base group
   declared later in the file (equal class specificity would lose on order). */
a.calc-cta {
  display: block;
  margin-top: 14px;
  text-align: center;
  width: 100%;
  /* Primary action of the whole section: bigger tap target than the default
     pill so it reads as THE move, not one option among buttons. */
  padding: 16px 22px;
  font-size: 16px;
}
.calc-cta-sub {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-mute);
}
.calc-net-note {
  margin-top: 14px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-mute);
}
.calc-note {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.5);
}

.cost-static { margin-top: 40px; padding: 24px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r-lg); }
.cost-static h3 { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 20px; font-weight: 600; }
.cost-static-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
@media (max-width: 900px) { .cost-static-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .cost-static-grid { grid-template-columns: repeat(2, 1fr); } }
.cost-static-cell { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-right: 1px solid rgba(255,255,255,0.08); }
.cost-static-cell:last-child { border-right: 0; }
.cost-static-cell .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); font-weight: 600; }
.cost-static-cell .v { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cost-static-cell .v-positive { color: var(--gold); }
.cost-static-cell .v-total { color: var(--gold); }

/* ─── REVIEWS SECTION ──────────────────────────────────────────── */
.reviews-section h3 { margin: 40px 0 20px; }

.sentiment {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  margin: 40px 0;
}
.sentiment-bar {
  display: flex;
  height: 44px;
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: 20px;
}
.sentiment-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
/* --good-text, not --good: the segment carries a white 13px label ("62%
   positive") and white-on-#1f9d67 is only 3.46:1. */
.sentiment-pos { background: var(--good-text); }
.sentiment-neu { background: var(--ink-mute); }
.sentiment-neg { background: var(--bad); }

.sentiment-themes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 720px) { .sentiment-themes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .sentiment-themes { grid-template-columns: 1fr; } }
.theme {
  padding: 12px 16px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 12px;
}
.theme-pos { background: var(--good-soft); }
.theme-neg { background: var(--bad-soft); }
.theme-count {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  min-width: 40px;
}
.theme-pos .theme-count { color: var(--good); }
.theme-neg .theme-count { color: var(--bad); }
.theme-label { font-size: 14px; color: var(--ink); font-weight: 500; }

.platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 720px) { .platform-grid { grid-template-columns: 1fr 1fr; } }
.platform-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px;
}
.platform-name { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; margin-bottom: 8px; }
.platform-score { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.platform-score-max { font-size: 14px; color: var(--ink-mute); font-weight: 500; }
.platform-count { font-size: 12px; color: var(--ink-mute); margin: 4px 0 12px; font-family: var(--mono); }
.platform-bar { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.platform-bar > div { height: 100%; background: var(--accent); border-radius: 2px; }

/* Ross's take after the reviews uses the shared .dossier-note style so it
   matches every other "Ross's take" box; this only adds the spacing. */
.ross-take-after-reviews { margin-top: 28px; }

.quotes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
@media (max-width: 720px) { .quotes-grid { grid-template-columns: 1fr; } }
.quote {
  margin: 0;
  padding: 24px 28px;
  border-radius: var(--r-md);
  position: relative;
}
.quote::before {
  content: '"';
  position: absolute;
  top: -8px;
  left: 20px;
  font-family: var(--serif);
  font-size: 72px;
  line-height: 1;
  color: var(--line-strong);
}
.quote-pos { background: var(--good-soft); border: 1px solid var(--good); border-color: color-mix(in srgb, var(--good) 25%, transparent); }
.quote-neg { background: var(--bad-soft); border: 1px solid var(--bad); border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
.quote p { font-size: 16px; line-height: 1.55; color: var(--ink); margin: 8px 0 12px; font-style: italic; }
.quote footer { font-size: 12px; color: var(--ink-mute); font-family: var(--mono); letter-spacing: 0.02em; }
.quote footer b { color: var(--ink); font-family: var(--sans); font-weight: 700; letter-spacing: normal; }

/* ─── LOCATION ─────────────────────────────────────────────────── */
.location-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; margin: 40px 0; }
@media (max-width: 900px) { .location-grid { grid-template-columns: 1fr; } }

/* ─── MAP (Leaflet + OpenStreetMap) ────────────────────────── */
.map-wrap {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  /* align-self:start stops the grid from stretching this box to the row height.
     The row is sized by the taller .location-facts column (535px), while #map is
     a fixed 4/3 aspect (496px) — so stretching left a ~39px empty white strip
     below the map inside the bordered card. */
  align-self: start;
}
#map {
  aspect-ratio: 4 / 3;
  width: 100%;
  background: var(--paper-3);
}
/* Custom pin styles */
.aat-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  font-weight: 700;
  color: white;
  font-family: var(--sans);
}
/* The SUBJECT property is identified by SHAPE, not color: a white rounded
   square with a navy building glyph. Grade chips use teal/gold/blue fills, so
   the subject marker deliberately uses none of those — a colored circle here
   kept being misread as a grade (#009ab9 circle = the A- chip). */
.aat-pin-community {
  position: relative;
  width: 46px;
  height: 46px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 12px;
  color: var(--ink);
  font-size: 16px;
  animation: subject-halo 2.4s ease-out infinite;
}
.aat-pin-community svg {
  width: 24px;
  height: 24px;
  display: block;
}
@keyframes subject-halo {
  0%   { box-shadow: 0 3px 8px rgba(0,0,0,0.25), 0 0 0 0 rgba(22,35,58,0.35); }
  100% { box-shadow: 0 3px 8px rgba(0,0,0,0.25), 0 0 0 16px rgba(22,35,58,0); }
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.8); }
  100% { box-shadow: 0 0 0 20px rgba(255,255,255,0);   }
}
.aat-pin-poi {
  width: 30px;
  height: 30px;
  background: var(--ink);
  font-size: 12px;
}
.aat-pin-warn {
  width: 36px;
  height: 36px;
  background: var(--bad);
  font-size: 14px;
}
/* Mapbox GL JS overrides — match article design */
/* An open comp popup ALWAYS sits above every pin so the card reads in full
   (operator bug report 2026-08-22: the subject building pin, z-index 5,
   covered the bottom of an open card). Popups win over all markers; markers
   share a low band and let DOM order settle ties among themselves. */
.mapboxgl-popup { z-index: 20 !important; }
.mapboxgl-marker { z-index: 2; }
.mapboxgl-popup-content {
  border-radius: var(--r-sm) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
  padding: 14px 16px !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--ink) !important;
  border: 1px solid var(--line);
}
.mapboxgl-popup-content b { color: var(--accent-ink); font-weight: 700; }
.mapboxgl-popup-content .popup-meta {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-mute);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.mapboxgl-popup-content .popup-meta-delta {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-weight: 700;
}
/* Rich comp popup with community name + class chip + smart CTA */
.mapboxgl-popup-content .popup-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.25;
}
.mapboxgl-popup-content .popup-heading > span:first-child {
  flex: 1;
  min-width: 0;
}
.mapboxgl-popup-content .popup-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin: 4px 0;
}
.mapboxgl-popup-content .popup-price span { font-size: 12px; color: var(--ink-mute); font-weight: 500; margin-left: 2px; }
.mapboxgl-popup-content .popup-facts {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.mapboxgl-popup-content .popup-delta {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.mapboxgl-popup-content .popup-delta-cheap { background: var(--good-soft); color: var(--good); }
.mapboxgl-popup-content .popup-delta-comparable { background: var(--gold-soft); color: var(--gold-ink); }
.mapboxgl-popup-content .popup-delta-expensive { background: var(--bad-soft); color: var(--bad); }
.mapboxgl-popup-content .popup-cta {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  margin-top: 4px;
  letter-spacing: -0.01em;
}
.mapboxgl-popup-content .popup-cta-primary {
  background: var(--accent);
  color: white;
}
.mapboxgl-popup-content .popup-cta-primary:hover { background: var(--accent-ink); }
.mapboxgl-popup-content .popup-cta-outline {
  background: white;
  color: var(--cta);
  border: 1.5px solid var(--cta);
}
.mapboxgl-popup-content .popup-cta-outline:hover { background: var(--cta); color: white; }
.mapboxgl-popup-content .popup-cta-note {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-mute);
  line-height: 1.4;
  font-family: var(--sans);
  text-align: center;
}
.mapboxgl-popup-tip { border-top-color: white !important; }
.mapboxgl-canvas-container:focus { outline: none; }

.mapboxgl-ctrl-attrib {
  font-size: 10px !important;
  font-family: var(--sans) !important;
}
.mapboxgl-ctrl-attrib a { color: var(--ink-mute); }
.mapboxgl-ctrl-group {
  border-radius: var(--r-sm) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
  border: 1px solid var(--line);
}
.mapboxgl-ctrl-group button {
  background: white !important;
}
.mapboxgl-ctrl-group button:hover {
  background: var(--accent-soft) !important;
}
/* Mapbox cooperative-gestures hint overlay */
.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-cooperative-gesture-screen,
.mapboxgl-scroll-zoom-blocker-show,
.mapboxgl-touch-pan-blocker-show {
  font-family: var(--sans) !important;
  background: rgba(15, 23, 42, 0.85) !important;
  color: white !important;
  font-size: 13px !important;
  border-radius: var(--r-sm) !important;
}

/* Legend */
.map-legend {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 500;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  pointer-events: none;
}
.legend-item { display: flex; align-items: center; gap: 8px; }
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend-dot-community { background: #fff; border: 2px solid var(--ink); border-radius: 4px; }
.legend-dot-poi { background: var(--ink); }
.legend-dot-noise { background: var(--bad); opacity: 0.4; }
.legend-dot-walk { background: transparent; border: 2px dashed var(--accent); }

@media (max-width: 480px) {
  .map-legend { font-size: 10.5px; padding: 8px 10px; }
}

.location-facts { align-self: start; }
.facts-list { margin: 0; padding: 0; }
.facts-list > div { display: grid; grid-template-columns: 130px 1fr; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts-list dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; align-self: center; }
.facts-list dd { margin: 0; font-size: 15px; color: var(--ink); }
.facts-list dd b { color: var(--ink); font-weight: 700; }

.commute-list { list-style: none; margin: 0; padding: 0; }
.commute-list li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.commute-place { color: var(--ink); font-weight: 500; }
.commute-time { color: var(--ink-mute); font-family: var(--mono); font-size: 13px; }

.callout {
  padding: 24px 28px;
  border-radius: var(--r-md);
  background: var(--gold-soft);
  border-left: 4px solid var(--gold);
  margin-top: 32px;
}
.callout b { color: var(--gold-ink); font-size: 13px; letter-spacing: 0.02em; }
.callout p { margin: 6px 0 0; font-size: 15px; color: var(--ink); }
.callout-warn { background: var(--warn-soft); border-left-color: var(--warn); }
.callout-warn b { color: var(--warn-text); }

/* ─── MARKET POSITION + RENT COMPS ─────────────────────────── */
.market-section { background: var(--paper-2); }

/* Unit type selector (drives market widget + comps map) */
.market-unit-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 24px 0 24px;
}
@media (max-width: 640px) {
  .market-unit-picker { grid-template-columns: 1fr 1fr; }
}
.market-unit-btn {
  padding: 14px 16px;
  background: white;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 120ms;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.market-unit-btn:hover { border-color: var(--accent); }
.market-unit-btn.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 2px 8px rgba(0, 154, 185, 0.15);
}
.market-unit-btn b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.market-unit-btn span {
  font-size: 12px;
  color: var(--ink-mute);
  font-family: var(--mono);
}
.market-unit-btn.active b { color: var(--accent-ink); }
.market-unit-btn-unavailable {
  opacity: 0.7;
}
.market-unit-btn-unavailable b {
  color: var(--ink-mute);
}
.market-unit-btn-unavailable.active {
  border-color: var(--warn);
  background: var(--warn-soft);
}
.market-unit-btn-unavailable.active b { color: var(--warn); }

/* Widget updates with fade transition */
.market-position {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 36px;
  margin: 0 0 40px;
  transition: opacity 200ms;
}
.market-position.updating { opacity: 0.4; }
.market-position-badge {
  transition: background 200ms, color 200ms;
}
.market-position-badge-neutral { background: var(--paper-3); color: var(--ink); }
.market-position-badge-warn { background: var(--warn-soft); color: var(--warn-text); }
.market-position-badge-bad { background: var(--bad-soft); color: var(--bad); }
.market-position-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}
.market-position-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  margin-bottom: 6px;
}
.market-position-value {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.market-position-value span { font-size: 18px; color: var(--ink-mute); font-weight: 500; margin-left: 4px; }
.market-position-badge {
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}
.market-position-badge-good { background: var(--good-soft); color: var(--good-text); }
.market-position-badge-neutral { background: var(--paper-3); color: var(--ink-mute); }
.market-position-badge-warn { background: var(--warn-soft); color: var(--warn-text); }
.market-position-badge-bad { background: var(--bad-soft); color: var(--bad); }

.market-scale {
  padding: 60px 20px 60px;
  position: relative;
}
.market-scale-track {
  height: 8px;
  background: var(--line);
  border-radius: 4px;
  position: relative;
}
.market-scale-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--good) 0%, var(--good) 20%, var(--gold) 40%, var(--gold) 60%, var(--warn) 80%, var(--bad) 100%);
  border-radius: 4px;
  opacity: 0.6;
}
.market-scale-label {
  position: absolute;
  bottom: 20px;
  transform: translateX(-50%);
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  white-space: nowrap;
}
.market-scale-label b {
  display: block;
  font-family: var(--sans);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}
.market-scale-label span {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.market-scale-label::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 8px;
  background: var(--line-strong);
}
.market-scale-marker {
  position: absolute;
  top: -50px;
  transform: translateX(-50%);
  z-index: 2;
}
.market-scale-marker-line {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 60px;
  background: var(--accent);
}
.market-scale-marker-pill {
  /* --accent-text, not --accent: white-on-#009ab9 is 3.32:1 and this label is
     12px/700, which is below the 18.66px large-text threshold, so it needs the
     full 4.5:1. The darker hue keeps the brand tone and reaches 4.8:1. */
  background: var(--accent-text);
  color: white;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,154,185,0.3);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.market-scale-marker-pill::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--accent);
}

.market-facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
@media (max-width: 720px) { .market-facts-grid { grid-template-columns: 1fr 1fr; } }
.market-fact { display: flex; flex-direction: column; gap: 4px; }
.market-fact-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.market-fact-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.market-fact-value-good { color: var(--good); }
.market-fact-value-warn { color: var(--warn); }
.market-fact-value-bad { color: var(--bad); }

.market-map-heading {
  margin-top: 12px;
  margin-bottom: 6px;
}
.market-map-sub {
  color: var(--ink-mute);
  font-size: 14px;
  margin: 0 0 24px;
}

.comps-map-wrap { margin-bottom: 0; }
.comps-map-wrap #compsMap { aspect-ratio: 16 / 10; }

/* Map-wrap needs relative positioning to host both legend boxes */
.comps-map-wrap { position: relative; }

/* Two separate legend boxes floating over the map:
     .comps-legend-price sits in the TOP-LEFT
     .comps-legend-class sits in the TOP-RIGHT
   Both use the same box styling for consistency. */
.comps-legend-box {
  position: absolute;
  top: 12px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: min(280px, calc(50% - 20px));
}
.comps-legend-price { left: 12px; }
.comps-legend-class { right: 12px; }

.legend-box-label {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--ink);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.legend-box-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.legend-box-items .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.legend-box-items .legend-item b { color: var(--ink); font-weight: 700; }
.legend-box-link {
  align-self: flex-start;
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 10.5px;
  text-decoration: none;
  margin-top: 2px;
}
.legend-box-link:hover { text-decoration: underline; }

/* Mobile: shrink footprints so both boxes fit */
@media (max-width: 720px) {
  .comps-legend-box {
    top: 8px;
    padding: 6px 10px;
    font-size: 10.5px;
    max-width: calc(50% - 12px);
  }
  .comps-legend-price { left: 8px; }
  .comps-legend-class { right: 8px; }
  .legend-box-items { gap: 5px 8px; font-size: 10.5px; }
  .legend-box-label { font-size: 9px; }
}
.legend-class-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: white;
  margin-right: 4px;
}
/* Legend chips — all 9 grade variants. Kept in sync with .comp-pin-class + .popup-class */
.legend-class-chip.grade-A-plus  { background: linear-gradient(135deg, #8a6a15 0%, #7a5d12 55%, #6b4e10 100%); color: #fff; } /* light-gold start put white text at 2.5:1 */
.legend-class-chip.grade-A       { background: #8a6a15; color: #fff; }
.legend-class-chip.grade-A-minus { background: #d9bd6b; color: #453608; }
.legend-class-chip.grade-B-plus  { background: linear-gradient(135deg, #dde3ea 0%, #a9b4bf 55%, #8b98a5 100%); color: #1e293b; }
.legend-class-chip.grade-B       { background: #6b7280; color: #fff; }
.legend-class-chip.grade-B-minus { background: #a6adb6; color: #232930; }
.legend-class-chip.grade-C-plus  { background: linear-gradient(135deg, #dfae6d 0%, #c68b47 55%, #b5793c 100%); color: #241503; }
.legend-class-chip.grade-C       { background: #b0793d; color: #241503; }
.legend-class-chip.grade-C-minus { background: #d4b28c; color: #4a3517; }
.legend-link {
  margin-left: auto;
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 11px;
  text-decoration: none;
}
.legend-link:hover { text-decoration: underline; }
.legend-dot-avenir { background: #fff; border: 2px solid var(--ink); border-radius: 4px; }
.legend-dot-cheap { background: #1f9d67; }
.legend-dot-comparable { background: #fff; border: 2px solid #64748b; }
.legend-dot-expensive { background: #6d1414; }

.comp-pin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  font-weight: 700;
  color: white;
  font-family: var(--sans);
  font-size: 10px;
  cursor: pointer;
  transition: transform 120ms;
}
.comp-pin:hover { transform: scale(1.15); z-index: 10; }
/* Price encoding on comps: green = cheaper than the subject, red = pricier,
   white/slate = about the same. Neutral used to be #d4b254 gold — the exact
   fill of the A+/A grade chips — so "similar price" read as "luxury tier". */
.comp-pin-cheap { background: #1f9d67; width: 34px; height: 34px; }
.comp-pin-comparable { background: #fff; border-color: #64748b; width: 34px; height: 34px; }
.comp-pin-comparable .comp-pin-price { color: #334155; }
.comp-pin-expensive { background: #6d1414; width: 34px; height: 34px; }
/* Subject pin — same identity system as the location map: white rounded
   square + navy building glyph. Shape says "this is the building you're
   reading about"; color stays free to mean price and grade elsewhere. */
.comp-pin-avenir {
  background: #fff;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 3px solid var(--ink);
  color: var(--ink);
  z-index: 5;
  box-shadow: 0 3px 10px rgba(22, 35, 58, 0.35);
}
.comp-pin-avenir svg {
  width: 26px;
  height: 26px;
  display: block;
}
/* Price shown in circle pin center (non-subject pins) */
.comp-pin-price {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: white;
}

/* Class badge attached to top-right of pin.
   Sized to be readable at 100% zoom with a strong border for contrast. */
.comp-pin-class {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 24px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  color: white;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Class colors — solid, saturated for high map contrast.
   Every chip is at ≥ 4.5:1 contrast against its own text for legibility on any map background. */
.comp-pin-class.grade-A-plus   { background: linear-gradient(135deg, #8a6a15 0%, #7a5d12 55%, #6b4e10 100%); color: #fff; }
.comp-pin-class.grade-A        { background: #8a6a15; color: #fff; }
.comp-pin-class.grade-A-minus  { background: #d9bd6b; color: #453608; }
.comp-pin-class.grade-B-plus   { background: linear-gradient(135deg, #dde3ea 0%, #a9b4bf 55%, #8b98a5 100%); color: #1e293b; }
.comp-pin-class.grade-B        { background: #6b7280; color: #fff; }
.comp-pin-class.grade-B-minus  { background: #a6adb6; color: #232930; }
.comp-pin-class.grade-C-plus   { background: linear-gradient(135deg, #dfae6d 0%, #c68b47 55%, #b5793c 100%); color: #241503; }
.comp-pin-class.grade-C        { background: #b0793d; color: #241503; }
.comp-pin-class.grade-C-minus  { background: #d4b28c; color: #4a3517; }

/* Class chip in the popup heading */
.popup-class {
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: white;
  white-space: nowrap;
}
.popup-class.grade-A-plus   { background: linear-gradient(135deg, #8a6a15 0%, #7a5d12 55%, #6b4e10 100%); color: #fff; }
.popup-class.grade-A        { background: #8a6a15; color: #fff; }
.popup-class.grade-A-minus  { background: #d9bd6b; color: #453608; }
.popup-class.grade-B-plus   { background: linear-gradient(135deg, #dde3ea 0%, #a9b4bf 55%, #8b98a5 100%); color: #1e293b; }
.popup-class.grade-B        { background: #6b7280; color: #fff; }
.popup-class.grade-B-minus  { background: #a6adb6; color: #232930; }
.popup-class.grade-C-plus   { background: linear-gradient(135deg, #dfae6d 0%, #c68b47 55%, #b5793c 100%); color: #241503; }
.popup-class.grade-C        { background: #b0793d; color: #241503; }
.popup-class.grade-C-minus  { background: #d4b28c; color: #4a3517; }

/* ─── DOSSIER · Living Here ─────────────────────────────────── */
.dossier-section {
  background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
}

.dossier-tabs {
  display: flex;
  gap: 8px;
  margin: 40px 0 32px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0;
}
.dossier-tab {
  background: transparent;
  border: 0;
  padding: 14px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-mute);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms, border-color 120ms;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.dossier-tab:hover { color: var(--ink); }
.dossier-tab.active { color: var(--accent-ink); border-bottom-color: var(--accent); }

.dossier-panel { animation: fadeIn 200ms ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Safety */
.dossier-grid-safety {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
@media (max-width: 720px) { .dossier-grid-safety { grid-template-columns: 1fr; } }
.dossier-metric {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 28px;
}
.dossier-metric-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.4;
}
.dossier-metric-value {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dossier-metric-value.dossier-metric-good { color: var(--good); }
.dossier-metric-value.dossier-metric-warn { color: var(--warn); }
.dossier-metric-value.dossier-metric-bad { color: var(--bad); }
.dossier-metric-delta {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-mute);
  font-weight: 500;
}

.dossier-chart {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 28px;
  margin-bottom: 24px;
}
.dossier-chart-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  margin-bottom: 16px;
}
.dossier-sparkline { width: 100%; height: 100px; display: block; }
.dossier-chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
}

/* Commute */
.dossier-commute-grid {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 24px;
}
.commute-header, .commute-row {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr) 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 24px;
  font-size: 14px;
}
.commute-header {
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
  padding: 12px 24px;
}
.commute-row {
  border-top: 1px solid var(--line);
}
.commute-row .dest { font-weight: 600; color: var(--ink); }
.commute-row .time { font-family: var(--mono); color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.commute-row .time-warn { color: var(--warn); }
.commute-row .time-bad { color: var(--bad); }
.commute-row .time-good { color: var(--good); font-weight: 700; }
.commute-caveat {
  margin: 12px 0 20px;
  font-size: 13px;
  color: var(--ink-mute);
  font-style: italic;
}
.commute-row .mode {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
@media (max-width: 720px) {
  .commute-header, .commute-row { grid-template-columns: 1.4fr repeat(3, 1fr); font-size: 12.5px; padding: 12px 16px; gap: 8px; }
  .commute-header span:last-child, .commute-row .mode { display: none; }
}

/* Live data badge */
.dossier-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--good-soft);
  color: var(--good-text);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: 16px;
}
.live-dot {
  width: 8px;
  height: 8px;
  background: var(--good);
  border-radius: 50%;
  position: relative;
}
.live-dot::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: var(--good);
  border-radius: 50%;
  opacity: 0.6;
  animation: livePulse 1.6s ease-out infinite;
}
@keyframes livePulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0;   }
}

/* Changing */
.dossier-changing-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.change-item {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px 24px;
  display: grid;
  /* max-content lets a long permit tag ("RESTAURANT · REMODEL") take the width
     it needs instead of overflowing its 120px track into the heading text. */
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 640px) { .change-item { grid-template-columns: 1fr; gap: 8px; } }
.change-item-warn { border-left: 4px solid var(--warn); }
.change-item-info { border-left: 4px solid var(--accent); }
.change-item-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--ink);
  align-self: start;
  justify-self: start;
  white-space: nowrap;
}
.change-item-warn .change-item-tag { background: var(--warn-soft); color: var(--warn); }
.change-item-info .change-item-tag { background: var(--accent-soft); color: var(--accent-ink); }
.change-item-body h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.change-item-body p { margin: 4px 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.change-item-body p:first-of-type { color: var(--ink-mute); font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
.change-item-body b { color: var(--ink); }

/* Food */
.dossier-food-tabs { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.food-cat {
  background: white;
  border: 1px solid var(--line);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all 120ms;
}
.food-cat:hover { border-color: var(--accent); color: var(--accent-ink); }
.food-cat.active { background: var(--accent); color: white; border-color: var(--accent); }

.dossier-food-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 900px) { .dossier-food-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dossier-food-grid { grid-template-columns: 1fr; } }
.food-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 16px 18px;
}
.food-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.food-card-head h5 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.food-rating {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-ink);
  background: var(--gold-soft);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.food-card-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.food-card-meta span:first-child { color: var(--accent-ink); font-weight: 600; }
.food-card p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

.food-intro {
  color: var(--ink-soft);
  font-size: 15px;
  margin: 8px 0 20px;
  max-width: 780px;
}
.food-intro b { color: var(--ink); }

.food-panel { display: grid; }
.food-panel[hidden] { display: none; }

.food-price {
  font-family: var(--mono);
  color: var(--gold-ink);
  font-weight: 700;
}

.food-vibes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 8px;
}
.vibe {
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.food-scenarios {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.45;
  padding: 8px 10px;
  background: var(--paper-2);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--gold);
  margin-top: 6px;
}
.food-scenarios b {
  color: var(--gold-ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}

/* Risk */
.dossier-risk-grid { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.risk-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  align-items: start;
}
.risk-card-good { border-left: 4px solid var(--good); }
.risk-card-neutral { border-left: 4px solid var(--ink-mute); }
.risk-card-warn { border-left: 4px solid var(--warn); }
.risk-card-bad { border-left: 4px solid var(--bad); }
.risk-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.risk-card-good .risk-card-icon { background: var(--good-soft); color: var(--good); }
.risk-card-neutral .risk-card-icon { background: var(--paper-3); color: var(--ink-mute); }
.risk-card-body h4 { margin: 0 0 8px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.risk-card-body p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.risk-card-body p b { color: var(--ink); }
.risk-card-source { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.02em; }

.risk-card-chart {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 16px 0;
  background: var(--paper-2);
  padding: 12px 16px;
  border-radius: var(--r-sm);
}
.aqi-bar {
  position: relative;
  height: 24px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.aqi-bar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--fill);
  background: var(--color);
  opacity: 0.85;
}
.aqi-bar span { position: relative; padding: 0 10px; color: white; z-index: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.25); }

/* Air quality card — plain-English redesign */
.air-headline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.air-headline h4 { margin: 0; }
.air-status {
  color: var(--warn);
  font-weight: 800;
}
.air-status-good { color: var(--good); }
.air-status-moderate { color: var(--warn); }
.air-status-bad { color: var(--bad); }

.air-simple { display: flex; flex-direction: column; gap: 20px; }

.air-gauge {
  background: var(--paper-2);
  padding: 20px 24px 12px;
  border-radius: var(--r-md);
}
.air-gauge-track {
  height: 14px;
  border-radius: 999px;
  position: relative;
  display: flex;
  overflow: visible;
  margin-bottom: 8px;
}
.air-gauge-seg {
  flex: 1;
  height: 100%;
}
.air-gauge-seg:first-child { border-radius: 999px 0 0 999px; }
.air-gauge-seg:last-child { border-radius: 0 999px 999px 0; }
.air-gauge-good { background: var(--good); }
.air-gauge-moderate { background: var(--warn); }
.air-gauge-bad { background: var(--bad); }
.air-gauge-marker {
  position: absolute;
  top: -6px;
  width: 4px;
  height: 26px;
  background: var(--ink);
  transform: translateX(-50%);
  border-radius: 2px;
  box-shadow: 0 0 0 3px white, 0 2px 8px rgba(0,0,0,0.25);
  z-index: 2;
}
.air-gauge-marker::before {
  content: 'Today';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  background: var(--ink);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.air-gauge-marker::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 2px;
  border: 4px solid transparent;
  border-top-color: var(--ink);
}
.air-gauge-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.air-plain-english {
  font-size: 16px !important;
  line-height: 1.55;
  color: var(--ink) !important;
  margin: 0 !important;
}

.air-activities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) { .air-activities { grid-template-columns: 1fr; } }
.air-activity {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--paper-2);
}
.air-activity-ok { background: color-mix(in srgb, var(--good) 8%, white); border: 1px solid color-mix(in srgb, var(--good) 30%, transparent); }
.air-activity-caution { background: color-mix(in srgb, var(--warn) 8%, white); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.air-activity-tip { background: var(--paper-2); border: 1px solid var(--line); }
.air-activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: white;
  flex-shrink: 0;
}
.air-activity-ok .air-activity-icon { background: var(--good); }
.air-activity-caution .air-activity-icon { background: var(--warn); }
.air-activity-tip .air-activity-icon { background: transparent; font-size: 20px; }
.air-activity-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.air-activity-body b { font-size: 13.5px; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
.air-activity-body span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }

.air-details {
  background: var(--paper-2);
  padding: 12px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
.air-details summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
  list-style: none;
}
.air-details summary::-webkit-details-marker { display: none; }
.air-details summary::before {
  content: '+ ';
  color: var(--accent);
  font-weight: 800;
}
.air-details[open] summary::before { content: '− '; }
.air-details p, .air-details ul {
  margin: 12px 0 0;
  font-size: 13px !important;
  color: var(--ink-soft) !important;
  line-height: 1.55;
}
.air-details ul { padding-left: 20px; }
.air-details li { margin-bottom: 4px; }

/* Pollen forecast card */
.pollen-current {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0 8px;
}
.pollen-current-item {
  background: var(--paper-2);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  text-align: center;
  border: 1px solid var(--line);
}
.pollen-current-item.pollen-low { border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.pollen-current-item.pollen-mod { border-color: color-mix(in srgb, var(--gold) 60%, transparent); background: var(--gold-soft); }
.pollen-current-item.pollen-high { border-color: color-mix(in srgb, var(--bad) 60%, transparent); background: var(--bad-soft); }
.pollen-name {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
  margin-bottom: 4px;
}
.pollen-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.pollen-low .pollen-value { color: var(--good); }
.pollen-mod .pollen-value { color: var(--gold-ink); }
.pollen-high .pollen-value { color: var(--bad); }
.pollen-cat {
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 4px;
  font-weight: 500;
}

.pollen-forecast {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  background: var(--paper-2);
  padding: 12px 16px;
  border-radius: var(--r-sm);
}
.pollen-day { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pollen-day-date {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  font-weight: 600;
}
.pollen-dots { display: flex; gap: 3px; }
.pollen-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}
.pollen-dots .dot-0 { background: var(--line); }              /* out of season */
.pollen-dots .dot-1 { background: #7cc576; }                  /* very low */
.pollen-dots .dot-2 { background: #85cf33; }                  /* low */
.pollen-dots .dot-3 { background: #d4b254; }                  /* moderate */
.pollen-dots .dot-4 { background: #d97706; }                  /* high */
.pollen-dots .dot-5 { background: #b23a3a; }                  /* very high */

.pollen-seasons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 640px) { .pollen-seasons { grid-template-columns: 1fr; } }
.pollen-season {
  background: var(--paper-2);
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--line-strong);
}
.pollen-season-cedar { border-left-color: #6b7280; }
.pollen-season-oak { border-left-color: #d4b254; }
.pollen-season-ragweed { border-left-color: #b23a3a; }
.pollen-season-plant { font-weight: 700; font-size: 13px; margin-bottom: 2px; letter-spacing: -0.01em; }
.pollen-season-months {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.pollen-season-note { font-size: 12px; color: var(--ink-soft); line-height: 1.4; margin: 0; }

/* Shared: Ross's take + Source */
.dossier-note {
  background: var(--ink);
  color: white;
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin-bottom: 12px;
  position: relative;
}
.dossier-note-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 8px;
}
.dossier-note p { margin: 0; color: rgba(255,255,255,0.9); font-size: 15px; line-height: 1.6; }
.dossier-note p b { color: white; }

/* Income-restriction strip in the cost section. Three tones: green for
   confirmed all market rate, amber for mixed, blue for fully restricted —
   informational, never alarming (Fair Housing: facts, not steering). */
.income-note {
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin: 0 0 16px;
  border: 1px solid var(--line-strong);
}
/* The label is a clickable <summary>: it toggles the explanation. */
.income-note-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.income-note-label::-webkit-details-marker { display: none; }
/* Rotating caret so the label reads as expandable. */
.income-note-label::after {
  content: '▾';
  margin-left: auto;
  font-size: 11px;
  opacity: 0.7;
  transition: transform 150ms;
}
.income-note:not([open]) .income-note-label::after { transform: rotate(-90deg); }
.income-note-body { margin-top: 8px; }
/* Lives inside .cost-section (dark ink background), so the strip works in
   light-on-dark: translucent tinted borders + bright label colors. */
.income-note p { margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.income-note-none { border-color: rgba(110, 214, 138, 0.5); }
.income-note-none .income-note-label { color: #7ddc96; }
.income-note-some { border-color: rgba(255, 200, 90, 0.55); }
.income-note-some .income-note-label { color: #ffc85a; }
.income-note-all { border-color: rgba(130, 175, 255, 0.55); }
.income-note-all .income-note-label { color: #9dbdff; }


.dossier-source {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  text-align: right;
  margin-top: 8px;
}
.dossier-source a { color: var(--accent-ink); }

/* ─── AMENITIES ────────────────────────────────────────────────── */
.amenity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0;
}
@media (max-width: 900px) { .amenity-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .amenity-grid { grid-template-columns: 1fr; } }

.amenity-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.amenity-card > img,
.amenity-card > .amenity-img { aspect-ratio: 3 / 2; object-fit: cover; }

/* Default illustration when community-specific photo isn't available */
.amenity-img-default {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.amenity-img-default svg {
  z-index: 2;
  position: relative;
  width: 96px;
  height: 96px;
  color: white;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.25));
}
.amenity-img-default::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-ink) 100%);
  opacity: 0.95;
}
.amenity-img-default::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.22) 0, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(0,0,0,0.22) 0, transparent 45%),
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 24px,
      rgba(255,255,255,0.04) 24px,
      rgba(255,255,255,0.04) 25px
    );
}

/* Per-feature color themes */
.amenity-img-default[data-feature="dog-park"]::before {
  background: linear-gradient(135deg, #7cc576 0%, #1f9d67 100%);
}
.amenity-img-default[data-feature="package-lockers"]::before {
  background: linear-gradient(135deg, #d4b254 0%, #a98419 100%);
}
.amenity-img-default[data-feature="hallway"]::before {
  background: linear-gradient(135deg, #64748b 0%, #334155 100%);
}
.amenity-img-default[data-feature="pool"]::before {
  background: linear-gradient(135deg, #06b6d4 0%, #0369a1 100%);
}
.amenity-img-default[data-feature="fitness"]::before {
  background: linear-gradient(135deg, #ef4444 0%, #991b1b 100%);
}
.amenity-img-default[data-feature="lounge"]::before {
  background: linear-gradient(135deg, #a78bfa 0%, #6d28d9 100%);
}
.amenity-img-default[data-feature="parking"]::before {
  background: linear-gradient(135deg, #6b7280 0%, #1f2937 100%);
}
.amenity-img-default[data-feature="rooftop"]::before {
  background: linear-gradient(135deg, #f59e0b 0%, #c2410c 100%);
}
.amenity-img-default[data-feature="coworking"]::before {
  background: linear-gradient(135deg, #6ee7b7 0%, #059669 100%);
}
.amenity-img-default[data-feature="ev-charging"]::before {
  background: linear-gradient(135deg, #34d399 0%, #047857 100%);
}
.amenity-img-default[data-feature="bike-storage"]::before {
  background: linear-gradient(135deg, #fb923c 0%, #b45309 100%);
}
.amenity-body { padding: 20px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.amenity-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.amenity-head h3 { font-size: 17px; }
.amenity-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}
.amenity-green { background: var(--good-soft); color: var(--good-text); }
.amenity-yellow { background: var(--gold-soft); color: var(--gold-ink); }
.amenity-red { background: var(--bad-soft); color: var(--bad); }
.amenity-line { font-size: 13.5px; line-height: 1.5; margin: 6px 0; }
.amenity-line b { color: var(--ink); }

/* ─── ALTERNATIVES ─────────────────────────────────────────────── */
.alt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0;
}
@media (max-width: 900px) { .alt-grid { grid-template-columns: 1fr; } }

.alt-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 200ms, box-shadow 200ms;
}
.alt-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
/* width:100% matters: without it a narrower source image leaves a gap beside it
   inside the flex column, so the photo looks off-centre in the card. */
.alt-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
/* Rendered when an alternative has no photoUrl. Reserves the same 3:2 box as a
   real image so a card without a photo keeps the grid rows aligned instead of
   collapsing to a shorter card. */
.alt-card-img-placeholder {
  width: 100%;
  aspect-ratio: 3 / 2;
  background:
    linear-gradient(135deg, var(--paper-3) 0%, var(--paper-2) 100%);
  border-bottom: 1px solid var(--line);
}
.alt-body { padding: 24px 28px 28px; flex: 1; display: flex; flex-direction: column; }
.alt-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  align-self: flex-start;
  margin-bottom: 12px;
}
.alt-body h3 { font-size: 22px; margin: 0 0 8px; }
.alt-price {
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.alt-price span { font-size: 12px; color: var(--ink-mute); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 6px; }
.alt-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-mute); margin-bottom: 12px; }
.alt-meta b { color: var(--ink); }
.alt-body p { flex: 1; font-size: 14px; line-height: 1.55; }
.alt-cta { font-weight: 700; font-size: 14px; color: var(--accent-ink); text-decoration: none; margin-top: 8px; align-self: flex-start; }
.alt-cta:hover { text-decoration: underline; }

.btn-block { display: block; text-align: center; margin: 24px auto 0; max-width: 720px; }

/* ─── CHECKLIST ────────────────────────────────────────────────── */
.checklist-section { background: var(--paper-2); }
.checklist-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0 32px;
  padding: 20px 24px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.checklist-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.checklist-progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--good), var(--accent));
  transform: translateX(-100%);
  transition: transform 200ms;
}
.checklist-progress-bar[data-pct]::after { transform: translateX(calc(-100% + var(--pct))); }
.checklist-progress-label { font-family: var(--mono); font-size: 13px; color: var(--ink-mute); font-weight: 600; }
.checklist-progress-label span { color: var(--ink); font-size: 16px; }

.checklist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 32px; }
@media (max-width: 900px) { .checklist { grid-template-columns: 1fr; } }

.check-group h3 {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent);
}
.check {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 120ms;
  background: white;
  border: 1px solid var(--line);
  margin-bottom: 8px;
}
.check:hover { background: var(--paper-2); }
.check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--good);
  cursor: pointer;
  flex-shrink: 0;
}
.check-label { font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.check input:checked + .check-label {
  color: var(--ink-mute);
  text-decoration: line-through;
}

/* Critical checklist callout — Register with Ross */
.checklist-critical {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  background: linear-gradient(135deg, var(--cta) 0%, #c02637 100%);
  color: white;
  border-radius: var(--r-lg);
  padding: 24px 28px;
  margin-bottom: 32px;
  box-shadow: 0 8px 24px rgba(203, 45, 111, 0.25);
}
.checklist-critical-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}
.checklist-critical h3 {
  color: white;
  margin: 0 0 8px;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.checklist-critical > .checklist-critical-body > p {
  /* Full white: 0.9 alpha composited to rgb(250,234,241) over the --cta pink
     gradient for 4.37:1, just under AA at 14.5px. This is the "Ross's service is
     100% free to you" disclosure — a compliance-relevant statement, so it must
     not be the lowest-contrast text on the page. */
  color: #ffffff;
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 16px;
}
.checklist-critical > .checklist-critical-body > p b { color: white; font-weight: 700; }

.checklist-critical-actions { display: flex; flex-direction: column; gap: 8px; }
.check-critical {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 120ms;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.check-critical:hover { background: rgba(255,255,255,0.18); }
.check-critical input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: white;
  cursor: pointer;
  flex-shrink: 0;
}
.check-critical .check-label {
  color: white;
  font-size: 14px;
  line-height: 1.5;
}
.check-critical .check-label b {
  display: block;
  font-weight: 700;
  color: white;
  margin-bottom: 4px;
  font-size: 14.5px;
}
.check-critical .check-label b b { display: inline; }
.check-critical .check-label-sub {
  display: block;
  font-size: 12.5px;
  /* Full white: at 0.85 alpha this composited to rgb(247,224,233) over the
     --cta pink gradient for 4.05:1, under AA for 12.5px text. */
  color: #ffffff;
  line-height: 1.5;
  font-weight: 400;
  margin-top: 2px;
}
.check-critical input:checked + .check-label { text-decoration: none; color: rgba(255,255,255,0.7); }
.check-critical input:checked + .check-label b { text-decoration: line-through; }

@media (max-width: 640px) {
  .checklist-critical { grid-template-columns: 1fr; }
  .checklist-critical-icon { display: none; }
}

.checklist-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ─── COMMUNITY GRADE BADGE (A+ through C-) ───────────────────── */
.community-grade {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: middle;
  transition: transform 120ms;
}
.community-grade:hover { transform: translateY(-1px); }
.community-grade a { color: inherit; text-decoration: none; }
/* Grade badge colors — ONE source of truth, applied to every surface:
   .community-grade (hero eyebrow)   .legend-class-chip (map legend)
   .comp-pin-class  (map pin corner) .popup-class       (map popup)
   All 9 grades supported: A+, A, A-, B+, B, B-, C+, C, C-
   METAL TIERS (operator, 2026-08-18): gold = A tier, silver = B tier,
   bronze = C tier. Within a metal, darker = higher grade. This replaced a
   9-hue rainbow where A- teal matched the accent color and B+/B-/C read as
   unrelated categories instead of one ladder. */
.grade-A-plus   { background: linear-gradient(135deg, #c9a437 0%, #8a6a15 55%, #6b4e10 100%); color: #fff; }
.grade-A        { background: #8a6a15; color: #fff; }
.grade-A-minus  { background: #d9bd6b; color: #453608; }
.grade-B-plus   { background: linear-gradient(135deg, #dde3ea 0%, #a9b4bf 55%, #8b98a5 100%); color: #1e293b; }
.grade-B        { background: #6b7280; color: #fff; }
.grade-B-minus  { background: #a6adb6; color: #232930; }
.grade-C-plus   { background: linear-gradient(135deg, #dfae6d 0%, #c68b47 55%, #b5793c 100%); color: #241503; }
.grade-C        { background: #b0793d; color: #241503; }
.grade-C-minus  { background: #d4b28c; color: #4a3517; }

/* HOW WE GRADED THIS panel */
.how-graded {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin: 32px 0 20px;
  overflow: hidden;
}
.how-graded summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  background: var(--paper-2);
  border-bottom: 1px solid transparent;
}
.how-graded summary::-webkit-details-marker { display: none; }
.how-graded[open] summary { border-bottom-color: var(--line); }
.how-graded[open] .how-graded-arrow { transform: rotate(180deg); }
.how-graded-arrow { transition: transform 200ms; color: var(--ink-mute); }
.how-graded-badge { display: flex; flex-direction: column; gap: 2px; }
.how-graded-badge b {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.how-graded-badge span { font-size: 13px; color: var(--ink-mute); font-weight: 500; }
.how-graded-body { padding: 24px 28px; }
.how-graded-intro { color: var(--ink-soft); margin: 0 0 20px; font-size: 14px; line-height: 1.55; }
.how-graded-intro a { color: var(--accent-ink); font-weight: 700; }

.grade-breakdown { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.grade-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr 80px;
  gap: 16px;
  align-items: center;
}
@media (max-width: 640px) {
  .grade-row { grid-template-columns: 1fr auto; }
  .grade-row-bar { grid-column: 1 / -1; order: 3; }
}
.grade-row-label b { display: block; font-size: 13px; color: var(--ink); font-weight: 700; }
.grade-row-label span { display: block; font-size: 12px; color: var(--ink-mute); line-height: 1.4; margin-top: 1px; }
.grade-row-bar {
  height: 8px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.grade-row-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.grade-row-fill-total { background: linear-gradient(90deg, var(--accent), var(--gold)); }
.grade-row-score {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.grade-row-score span { font-size: 11px; color: var(--ink-mute); font-weight: 500; }

.grade-row-total {
  padding-top: 12px;
  border-top: 2px solid var(--line);
  margin-top: 4px;
}
.grade-row-total .grade-row-score { font-size: 18px; }

.grade-scale {
  padding: 16px 20px;
  background: var(--paper-2);
  border-radius: var(--r-sm);
}
.grade-scale-title {
  font-size: 12px;
  color: var(--ink-mute);
  font-weight: 600;
  margin-bottom: 12px;
}
.grade-scale-track {
  position: relative;
  height: 32px;
  background: linear-gradient(90deg, var(--bad) 0%, var(--warn) 30%, var(--gold) 60%, var(--good) 100%);
  border-radius: 999px;
  opacity: 0.85;
}
.grade-scale-band {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.grade-scale-marker {
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 8px;
  background: var(--ink);
  color: white;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
}
.grade-scale-marker::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--ink);
}

/* Calc dropdown picker note */
.calc-picker-note {
  margin: 8px 0 0;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  font-style: italic;
}

/* ─── BEFORE YOU MOVE IN — SIMPLIFIED GRID ────────────────────── */
.prep-grid-simple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
@media (max-width: 900px) { .prep-grid-simple { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .prep-grid-simple { grid-template-columns: 1fr; } }

.prep-simple {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: transform 200ms, box-shadow 200ms;
}
.prep-simple:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }

/* Color-coded top borders */
.prep-simple-utility { border-top: 3px solid var(--gold); }
.prep-simple-insurance { border-top: 3px solid var(--accent); }
.prep-simple-lease { border-top: 3px solid #6d28d9; }
.prep-simple-furniture { border-top: 3px solid #10b981; }
.prep-simple-moving { border-top: 3px solid #f59e0b; }
.prep-simple-esa { border-top: 3px solid #3b82f6; }

.prep-simple-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  margin-bottom: 4px;
}
.prep-simple-utility .prep-simple-icon { background: var(--gold-soft); color: var(--gold-ink); }
.prep-simple-insurance .prep-simple-icon { background: var(--accent-soft); color: var(--accent-ink); }
.prep-simple-lease .prep-simple-icon { background: color-mix(in srgb, #6d28d9 12%, white); color: #6d28d9; }
.prep-simple-furniture .prep-simple-icon { background: color-mix(in srgb, #10b981 12%, white); color: #059669; }
.prep-simple-moving .prep-simple-icon { background: #fef7ed; color: #d97706; }
.prep-simple-esa .prep-simple-icon { background: color-mix(in srgb, #3b82f6 12%, white); color: #1d4ed8; }

.prep-simple-title {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
}
.prep-simple-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
}
.prep-simple-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 4px 0 8px;
  flex: 1;
}
.prep-simple-desc b { color: var(--ink); }

.prep-simple-note {
  font-size: 12px;
  color: var(--ink-mute);
  padding: 8px 10px;
  background: var(--paper-2);
  border-radius: var(--r-sm);
  line-height: 1.45;
  margin-top: auto;
}

.prep-simple-cta {
  align-self: flex-start;
  padding: 8px 16px;
  background: var(--ink);
  color: white;
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms;
  margin-top: auto;
}
.prep-simple-cta:hover { background: var(--accent-ink); color: white; }

/* Simplified promo codes in the prep-simple card */
.prep-simple-codes {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.prep-code {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 120ms;
  border: 1px dashed;
}
.prep-code:hover { transform: translateY(-1px); }
.prep-code-user { background: color-mix(in srgb, #10b981 8%, white); border-color: #10b981; }
.prep-code-ross { background: var(--accent-soft); border-color: var(--accent); }
.prep-code b {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
}
.prep-code-user b { color: #065f46; }
.prep-code-ross b { color: var(--accent-ink); }
.prep-code span {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* --ink-soft, not --ink-mute: at 9px on the tinted code chips --ink-mute
     measured 4.18:1 and 4.40:1, both under AA. */
  color: var(--ink-soft);
  font-weight: 600;
  margin-top: 2px;
}

/* ─── BEFORE YOU MOVE IN (utilities + insurance + lease-review) ─ */
.prep-section {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}

.prep-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}
@media (max-width: 1000px) { .prep-grid { grid-template-columns: 1fr; } }

.prep-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
}
.prep-card-utility { border-top: 4px solid var(--gold); }
.prep-card-insurance { border-top: 4px solid var(--accent); }
.prep-card-lease { border-top: 4px solid #a78bfa; }

.prep-card-header {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}
.prep-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
}
.prep-card-utility .prep-card-icon { background: var(--gold-soft); color: var(--gold-dark, var(--gold-ink)); }
.prep-card-insurance .prep-card-icon { background: var(--accent-soft); color: var(--accent-ink); }
.prep-card-lease .prep-card-icon { background: color-mix(in srgb, #a78bfa 15%, white); color: #6d28d9; }

.prep-card h3 { margin: 0; font-size: 18px; letter-spacing: -0.01em; line-height: 1.2; }
.prep-card-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
  margin-bottom: 4px;
}
.prep-card > p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.prep-card > p b { color: var(--ink); }

/* Utility checklist */
.utility-checklist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.utility-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  background: var(--paper-2);
  border-radius: var(--r-sm);
}
.utility-item-badge {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.utility-badge-required { background: var(--cta); color: white; }
.utility-badge-included { background: var(--good-soft); color: var(--good); }
.utility-badge-optional { background: var(--paper-3); color: var(--ink-mute); }
.utility-item-body { display: flex; flex-direction: column; gap: 3px; }
.utility-item-body b { font-size: 13px; color: var(--ink); font-weight: 700; }
.utility-item-body span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }

.utility-form-preview {
  margin-top: auto;
  padding: 16px;
  background: var(--ink);
  color: white;
  border-radius: var(--r-md);
  text-align: center;
}
.utility-form-preview-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--good);
  font-weight: 700;
  margin-bottom: 6px;
}
.utility-form-address {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 12px;
}
.utility-cta { justify-content: center; width: 100%; }
.utility-note {
  font-size: 12px;
  color: rgba(255,255,255,0.65) !important;
  margin: 10px 0 0 !important;
  line-height: 1.4;
}

/* Insurance tip */
.insurance-tip {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  padding: 14px 16px;
  background: var(--gold-soft);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
  margin-bottom: 16px;
  align-items: start;
}
.insurance-tip-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gold);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.insurance-tip > div:last-child {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.insurance-tip b { color: var(--gold-ink); }

.insurance-alt {
  padding: 12px 14px;
  background: var(--paper-2);
  border-radius: var(--r-sm);
  margin-top: auto;
}
.insurance-alt-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
  margin-bottom: 4px;
}
.insurance-alt-body {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Lease Guard */
.lease-guard-features {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lease-guard-features li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
}
.lease-guard-features li svg {
  color: #6d28d9;
  margin-top: 3px;
}

.lease-guard-note {
  padding: 12px 14px;
  background: var(--paper-2);
  border-radius: var(--r-sm);
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.lease-guard-note b { color: var(--ink); }

.lease-guard-cta {
  background: #6d28d9;
  justify-content: center;
  width: 100%;
  margin-top: auto;
}
.lease-guard-cta:hover { background: #5b21b6; color: white; }

/* Additional prep cards (furniture / moving / ESA) */
.prep-subsection-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
  margin: 32px 0 16px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.prep-card-furniture { border-top: 4px solid #10b981; }
.prep-card-furniture .prep-card-icon { background: color-mix(in srgb, #10b981 15%, white); color: #059669; }

.prep-card-moving { border-top: 4px solid #f59e0b; }
.prep-card-moving .prep-card-icon { background: #fef7ed; color: #d97706; }

.prep-card-esa { border-top: 4px solid #3b82f6; }
.prep-card-esa .prep-card-icon { background: color-mix(in srgb, #3b82f6 12%, white); color: #1d4ed8; }

.prep-features {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prep-features li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
}
.prep-features li svg { color: var(--good); margin-top: 3px; flex-shrink: 0; }

.prep-card-cta {
  margin-top: auto;
  justify-content: center;
  width: 100%;
}
.prep-card-note {
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.55;
  padding: 10px 12px;
  background: var(--paper-2);
  border-radius: var(--r-sm);
  margin: 12px 0 16px !important;
}
.prep-card-note b { color: var(--ink); }

/* Promo code cards (NicksonLiving) */
.promo-codes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.promo-code {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  border: 1px dashed var(--line-strong);
}
.promo-code-user { border-color: color-mix(in srgb, #10b981 50%, transparent); background: color-mix(in srgb, #10b981 6%, white); }
.promo-code-ross { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-soft); }
.promo-code-label {
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}
.promo-code-user .promo-code-label { color: #065f46; font-weight: 600; }
.promo-code-ross .promo-code-label { color: var(--accent-ink); font-weight: 600; }
.promo-code-value {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.promo-code-value code {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 6px;
  background: white;
  border: 1.5px solid var(--line-strong);
  color: var(--ink);
  letter-spacing: 0.06em;
}
.promo-code-user code { border-color: #10b981; color: #065f46; }
.promo-code-ross code { border-color: var(--accent); color: var(--accent-ink); }
.promo-code-copy {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-mute);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms;
}
.promo-code-copy:hover { background: var(--paper-3); color: var(--ink); border-color: var(--ink-mute); }
.promo-code-copy.copied { background: var(--good); border-color: var(--good); color: white; }

/* ESA savings callout */
.esa-savings {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: color-mix(in srgb, #3b82f6 8%, white);
  border-left: 3px solid #3b82f6;
  border-radius: var(--r-sm);
  margin-bottom: 12px;
}
.esa-savings-value {
  font-size: 28px;
  font-weight: 800;
  color: #1d4ed8;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.esa-savings-label {
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.4;
}
.esa-savings-label span {
  display: block;
  color: var(--ink-mute);
  font-weight: 500;
  font-size: 11.5px;
  margin-top: 2px;
}

/* Referral callout */
.referral-callout {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: center;
  padding: 24px 28px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: white;
  border-radius: var(--r-lg);
}
@media (max-width: 640px) { .referral-callout { grid-template-columns: 1fr; text-align: center; } }
.referral-callout-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.referral-callout-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 4px;
}
.referral-callout h4 {
  color: white;
  font-size: 20px;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.referral-callout p {
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  margin: 0 0 12px;
  line-height: 1.5;
}
.referral-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-referral-primary, .btn-referral-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
  transition: all 120ms;
  border: 2px solid transparent;
}
.btn-referral-primary { background: var(--gold); color: var(--ink); }
.btn-referral-primary:hover { background: #b8912a; color: var(--ink); }
.btn-referral-outline { background: transparent; color: white; border-color: rgba(255,255,255,0.3); }
.btn-referral-outline:hover { border-color: white; color: white; }

/* ─── UTILITY MODAL ADDRESS LOCK ──────────────────────────────── */
.utility-address-lock {
  background: var(--gold-soft);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
}
.utility-address-lock-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  font-weight: 700;
  margin-bottom: 6px;
}
.utility-address-lock-value {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}
.utility-address-lock-value b { display: block; margin-bottom: 2px; }
.utility-address-lock-value span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
}

/* ─── HOWLOUD NOISE WIDGET ────────────────────────────────────── */
.noise-widget {
  margin-top: 32px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.noise-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.noise-widget-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
  margin-bottom: 2px;
}
.noise-widget h3 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.noise-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--good-soft);
  color: var(--good-text);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-transform: uppercase;
}

.noise-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
}
@media (max-width: 720px) { .noise-grid { grid-template-columns: 1fr; } }

.noise-score-card {
  text-align: center;
  padding: 24px 20px;
  background: linear-gradient(135deg, var(--paper-2), var(--paper-3));
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.noise-score-value {
  font-size: 76px;
  font-weight: 800;
  color: var(--warn);
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.noise-score-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  margin: 6px 0 12px;
}
.noise-score-verdict {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 20px;
}
.noise-verdict-calm { background: var(--good-soft); color: var(--good); }
.noise-verdict-active { background: color-mix(in srgb, var(--good) 15%, var(--paper-3)); color: var(--good); }
.noise-verdict-busy { background: var(--gold-soft); color: var(--gold-ink); }
.noise-verdict-noisy { background: var(--warn-soft); color: var(--warn); }
.noise-verdict-loud { background: var(--bad-soft); color: var(--bad); }

.noise-score-scale { margin-top: 16px; }
.noise-scale-track {
  position: relative;
  height: 6px;
  background: linear-gradient(90deg, var(--bad) 0%, var(--warn) 40%, var(--gold) 60%, var(--good) 100%);
  border-radius: 3px;
  margin-bottom: 12px;
}
.noise-scale-marker {
  position: absolute;
  top: -10px;
  transform: translateX(-50%);
  background: var(--ink);
  color: white;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
  line-height: 1;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.noise-scale-marker::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--ink);
}
.noise-scale-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.noise-breakdown { display: flex; flex-direction: column; gap: 18px; }
.noise-source {
  padding: 14px 16px;
  background: var(--paper-2);
  border-radius: var(--r-sm);
}
.noise-source-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.noise-source-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.noise-source-value {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.noise-value-calm { color: #15794e; } /* --good is 3.46:1 on white — this label is 12px */
.noise-value-active { color: var(--gold-ink); }
.noise-value-loud { color: var(--bad); }

.noise-source-bar {
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.noise-source-bar-fill { height: 100%; border-radius: 3px; transition: width 400ms cubic-bezier(0.4,0,0.2,1); }
.noise-bar-calm { background: var(--good); }
.noise-bar-active { background: var(--gold); }
.noise-bar-loud { background: var(--bad); }

.noise-source-note {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 6px 0 0;
}

/* Traffic safety block inside the dossier safety tab. */
.traffic-safety {
  margin-top: 20px;
  padding: 16px 18px;
  background: white;
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-md);
}
.traffic-safety-lede {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
}
.traffic-safety-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
}
.traffic-safety-line {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.traffic-safety-read {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 500;
}
.traffic-safety-source {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}

/* Gauge that gives the overall score a place to live: three zones matching
   overallNoiseBand() exactly (loud <60, active 60-79, calm 80+), the subject's
   marker, and two probed reference points so the number reads at a glance. */
/* Noise scale — a single legible gradient bar (quiet green on the left,
   loud red on the right) with the community's noise level called out on a
   pill above it. Redesigned 2026-08-22: the old three-zone strip crushed its
   labels and the marker covered them. */
.noise-scale {
  margin: 26px 0 20px;
}
.noise-scale-bar {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2e9e5b 0%, #7fd39b 16%, #e8b04b 30%, #e8a13a 40%, #e07a5f 52%, #cf4b4b 100%);
}
.noise-scale-marker {
  position: absolute;
  top: -30px;
  transform: translateX(-50%);
  z-index: 2;
}
.noise-scale-marker-num {
  position: relative;
  display: inline-block;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.noise-scale-marker-num::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
/* The tick that lands on the bar directly under the pill. */
.noise-scale-marker::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--ink);
  box-shadow: 0 0 0 2px #fff;
}
.noise-scale-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.noise-scale-end-quiet { color: #2e7d32; }
.noise-scale-end-loud { color: #c0392b; }
.noise-score-plain {
  margin: 12px 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
.noise-score-reading {
  margin: 34px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: left;
}

/* Native-interactive explainers (details/summary needs no JS, which keeps
   initNoiseWidget() an honest no-op). */
.noise-source-more,
.noise-how {
  margin-top: 8px;
}
.noise-source-more summary,
.noise-how summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-text);
  list-style: none;
}
.noise-source-more summary::before,
.noise-how summary::before {
  content: '+ ';
  font-weight: 700;
}
.noise-source-more[open] summary::before,
.noise-how[open] summary::before {
  content: '\2212 ';
}
.noise-source-more summary::-webkit-details-marker,
.noise-how summary::-webkit-details-marker {
  display: none;
}
.noise-source-more p {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.noise-how {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.noise-how-body p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 76ch;
}

/* ─── CAPMETRO TRANSIT WIDGET ─────────────────────────────────── */
.transit-widget {
  margin-top: 32px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.transit-widget-header {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 640px) {
  .transit-widget-header { grid-template-columns: 48px 1fr; }
  .transit-live-badge { grid-column: 1 / -1; justify-self: start; }
}
.transit-widget-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.transit-widget-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
  margin-bottom: 2px;
}
.transit-widget h3 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.transit-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--good-soft);
  color: var(--good);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-transform: uppercase;
}

.transit-stops { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.transit-stop {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--paper-2);
  border-radius: var(--r-sm);
  transition: background 120ms;
}
.transit-stop:hover { background: var(--paper-3); }
@media (max-width: 640px) {
  .transit-stop { grid-template-columns: 80px 1fr; }
  .transit-stop-link { grid-column: 1 / -1; justify-self: start; }
}
.transit-route {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
}
.transit-route-rapid { background: #d97706; }
.transit-route-local { background: var(--accent); }
.transit-route-metrorail { background: #b23a3a; }
.transit-stop-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.transit-stop-body b { font-size: 13.5px; color: var(--ink); font-weight: 700; }
.transit-stop-body span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.transit-stop-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-ink);
  text-decoration: none;
  white-space: nowrap;
}
.transit-stop-link:hover { text-decoration: underline; }

.transit-widget-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
@media (max-width: 640px) { .transit-widget-footer { grid-template-columns: 1fr; } }
.transit-tip {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.transit-tip b { color: var(--ink); }

/* ─── LEAD CAPTURE MODAL ──────────────────────────────────────── */
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lead-modal[hidden] { display: none; }
.lead-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn 200ms ease-out;
}
.lead-modal-panel {
  position: relative;
  background: white;
  border-radius: var(--r-lg);
  padding: 40px 44px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
  animation: modalIn 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 520px) {
  .lead-modal-panel { padding: 28px 24px; }
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.lead-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--paper-2);
  color: var(--ink-mute);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms;
}
.lead-modal-close:hover { background: var(--paper-3); color: var(--ink); }

.lead-modal-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 12px;
}
.lead-modal-panel h3 {
  font-size: 24px;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  line-height: 1.15;
}
.lead-modal-lede {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0 0 24px;
  line-height: 1.55;
}

.lead-form { display: flex; flex-direction: column; gap: 16px; }
.lead-field { display: flex; flex-direction: column; gap: 6px; }
.lead-field-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
}
.lead-field-required { color: var(--cta); font-weight: 400; }
.lead-field-optional {
  color: var(--ink-mute);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--sans);
  font-size: 11px;
}
.lead-field input,
.lead-field select {
  padding: 12px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: white;
  transition: border-color 120ms, box-shadow 120ms;
}
.lead-field input:focus,
.lead-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.lead-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: var(--paper-2);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
  cursor: pointer;
}
.lead-consent input {
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.lead-submit { margin-top: 4px; justify-content: center; }

.lead-modal-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-mute);
  justify-content: center;
  margin-top: 4px;
}
.lead-modal-trust svg { color: var(--good); flex-shrink: 0; }

/* Loading state */
.lead-loading {
  text-align: center;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.lead-loading-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.lead-loading p { color: var(--ink); font-weight: 500; margin: 0; }

/* Success state */
.lead-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--good-soft);
  color: var(--good);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  animation: successPop 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes successPop {
  0% { transform: scale(0); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.lead-modal-step[data-step="success"] { text-align: center; }
.lead-modal-step[data-step="success"] > p {
  color: var(--ink-soft);
  font-size: 15px;
  margin-bottom: 20px;
}

.lead-success-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  text-align: left;
  counter-reset: leadstep;
}
.lead-success-steps li {
  counter-increment: leadstep;
  padding: 14px 16px 14px 52px;
  margin-bottom: 8px;
  background: var(--paper-2);
  border-radius: var(--r-md);
  position: relative;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.lead-success-steps li::before {
  content: counter(leadstep);
  position: absolute;
  left: 14px;
  top: 12px;
  width: 26px;
  height: 26px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  font-family: var(--mono);
}
.lead-success-steps li b { color: var(--ink); }
.lead-success-steps li a { color: var(--accent-ink); font-weight: 700; }

.lead-success-pro-tip {
  padding: 16px 18px;
  background: var(--gold-soft);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
  margin-bottom: 20px;
  text-align: left;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.lead-success-pro-tip b {
  display: block;
  color: var(--gold-ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.lead-success-pro-tip em { font-style: italic; color: var(--ink); }

/* Fallback state */
.lead-fallback { text-align: center; padding: 20px 0; }
.lead-fallback p { color: var(--ink); margin: 0 0 20px; }
.lead-fallback-note { font-size: 13px; color: var(--ink-mute); margin-top: 12px !important; }

/* ─── BOTTOM LINE ──────────────────────────────────────────────── */
.bottom-line-card {
  background: var(--paper-2);
  border-left: 4px solid var(--accent);
  padding: 32px 40px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: 24px 0 40px;
}
.bottom-line-card p { font-size: 17px; line-height: 1.65; color: var(--ink); margin: 0 0 18px; }
.bottom-line-card p:last-child { margin-bottom: 0; }

/* ─── CTA CARDS ────────────────────────────────────────────────── */
.cta-card {
  background: linear-gradient(135deg, var(--ink) 0%, #1e293b 100%);
  color: white;
  padding: 40px 48px;
  border-radius: var(--r-lg);
  text-align: center;
}
.cta-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 12px; }
/* h2 AND h3: the markup renders an <h2> here, but only h3 was ever styled, so the
   heading fell through to `.community-review-page h2 { color: var(--ink) }` —
   near-black text on a near-black gradient card. Both are listed so the card is
   safe whichever heading level a page uses. */
.cta-card h2,
.cta-card h3 { color: white; font-size: 26px; margin: 0 0 12px; letter-spacing: -0.02em; }
.cta-card p { color: rgba(255,255,255,0.75); margin: 0 auto 24px; max-width: 480px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Buttons */
.btn-primary, .btn-secondary, .btn-outline, .btn-outline-white, .btn-tertiary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: all 120ms;
  letter-spacing: 0.01em;
}
.btn-primary { background: var(--cta); color: white; }
.btn-primary:hover { background: var(--cta-hover); color: white; }
.btn-secondary { background: white; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent-ink); }
/* .btn-outline / .btn-outline-white are the DARK-SURFACE variants: transparent
   background with a white label. Only use them on a dark card. On a light
   surface they render white-on-white (ratio 1.0, invisible) — use .btn-secondary
   there instead.

   These used to be duplicated as `.community-review-page a.btn-outline` to win
   against the base link colour. That duplication is no longer needed: the base
   link rule is now a zero-specificity :where() default (see the top of this
   file), so a single class beats it cleanly. */
.btn-outline { background: transparent; color: white; border-color: rgba(255,255,255,0.3); }
.btn-outline:hover { border-color: white; color: white; }
.btn-outline-white { background: transparent; color: white; border-color: rgba(255,255,255,0.4); }
.btn-outline-white:hover { background: white; color: var(--ink); }
/* Same specificity trap for the solid primary button when it renders as a link. */
.btn-tertiary { background: transparent; color: var(--ink-mute); }
.btn-tertiary:hover { color: var(--ink); }
.btn-large { padding: 16px 32px; font-size: 15px; }

/* ─── FAQ ──────────────────────────────────────────────────────── */
.faq {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq summary {
  padding: 20px 24px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  color: var(--accent);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  transition: transform 200ms;
}
.faq[open] summary::after { content: '−'; }
.faq-body {
  padding: 0 24px 24px;
  color: var(--ink-soft);
}
.faq-body p { font-size: 15px; line-height: 1.65; margin: 0; }

/* ─── ABOUT ────────────────────────────────────────────────────── */
.about-section { background: var(--paper-2); }
.about-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: center;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 40px;
  max-width: 900px;
  margin: 24px 0 0;
}
@media (max-width: 640px) { .about-card { grid-template-columns: 1fr; text-align: center; } }
.about-card img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; margin: 0 auto; }
.about-card h2 { font-size: 32px; margin-bottom: 6px; }
.about-title { color: var(--accent-text); font-weight: 600; margin-bottom: 12px; font-size: 15px; }
.about-body p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }
.about-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
@media (max-width: 640px) { .about-actions { justify-content: center; } }

/* ─── FINAL CTA ────────────────────────────────────────────────── */
.final-cta {
  background: var(--ink);
  color: white;
  text-align: center;
  padding: 100px 0;
}
.final-cta h2 { color: white; margin-bottom: 20px; }
.final-lede { font-size: 20px; color: rgba(255,255,255,0.75); max-width: 640px; margin: 0 auto 32px; }
.final-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.final-updated {
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.final-updated b { color: rgba(255,255,255,0.85); font-family: var(--sans); }

/* ─── STICKY BOTTOM CTA ────────────────────────────────────────── */
.sticky-cta {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  z-index: 80;
  transform: translateY(200%);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.sticky-cta.visible { transform: translateY(0); pointer-events: auto; }
.sticky-cta-inner {
  max-width: 900px;
  margin: 0 auto;
  background: var(--ink);
  color: white;
  border-radius: 999px;
  padding: 12px 20px 12px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}
.sticky-cta-msg { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sticky-cta-msg b { font-size: 14px; }
.sticky-cta-msg span { font-size: 12px; color: rgba(255,255,255,0.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-cta-btn { padding: 10px 20px; font-size: 13px; }
.sticky-cta-close {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.5);
  font-size: 24px;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}
.sticky-cta-close:hover { color: white; }
@media (max-width: 640px) {
  .sticky-cta-msg span { display: none; }
}
/* Phones: the bar carries the site's anchor label, which runs longer than
   the old "Free Help"; the message column gives way so the button keeps one
   line and the close control stays reachable (CTA pass 2026-11-03). */
@media (max-width: 480px) {
  .sticky-cta-msg { display: none; }
  .sticky-cta-btn { flex: 1; white-space: nowrap; min-height: 44px; font-size: 14px; }
}

/* ─── DATA FLAG (Ross to confirm) ──────────────────────────────── */
.data-flag {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  background: #fffbeb;
  border: 1px dashed #f59e0b;
  border-radius: var(--r-sm);
  margin-top: 24px;
  font-size: 13px;
  color: #92400e;
  line-height: 1.5;
}
.data-flag svg { flex-shrink: 0; color: #f59e0b; margin-top: 2px; }
.data-flag b { color: #78350f; }

/* ─── PRINT ────────────────────────────────────────────────────── */
/* ---------------------------------------------------------------------------
   CHECKLIST-ONLY PRINT

   "Print checklist" must produce a one-page tour sheet: the checklist plus the
   locator-registration instructions. It used to call window.print() with no
   scoping, so it spooled the ENTIRE review — hero, pricing tables, reviews,
   map, FAQ. Nobody carries 12 pages into a leasing office, so the feature was
   effectively unusable.

   Implemented by adding .printing-checklist to <html> for the duration of the
   print, then hiding every direct child of the page wrapper EXCEPT #checklist.
   Hiding at the top level (rather than listing sections to hide) means a
   section added later is excluded automatically — the safe default, because
   forgetting to add it to a blocklist would silently put 12 pages back.

   :where() keeps these at zero specificity for the wrapper part while the
   !important carries the override, so nothing here re-introduces the
   specificity problems documented at the top of this file.
--------------------------------------------------------------------------- */
@media print {
  /* Everything that is not the checklist section, gone. */
  html.printing-checklist body > *:not(:where(#community-review-page)) { display: none !important; }
  html.printing-checklist :where(#community-review-page) > *:not(:where(#checklist)) { display: none !important; }
  /* The section normally carries large vertical padding for screen rhythm. */
  html.printing-checklist :where(#checklist) { padding: 0 !important; }
  /* Progress bar and the action buttons are interactive-only furniture. */
  html.printing-checklist .checklist-progress,
  html.printing-checklist .checklist-actions { display: none !important; }
  /* Keep each column together rather than splitting a group across pages. */
  html.printing-checklist .check-group { page-break-inside: avoid; }
  /* The locator instructions are the whole point of printing this — make sure
     the pink card's text survives a mono/greyscale printer that drops
     backgrounds. Without forcing colour-adjust, some drivers render the white
     body text on a dropped background: white on white, i.e. blank. */
  html.printing-checklist .checklist-critical {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    page-break-inside: avoid;
  }

  .mini-nav, .progress-bar, .sticky-cta, .jump-pills, .byline-actions, .checklist-actions, .data-flag { display: none !important; }
:where(.community-review-page) { font-size: 12pt; }
  .section { padding: 20pt 0; page-break-inside: avoid; }
  .hero-media { max-height: 200pt; }
  .cost-section { background: white; color: black; }
  .cost-section h2, .cost-section h3 { color: black; }
  .cost-section .section-lede, .cost-section .section-eyebrow { color: #555; }
  .final-cta { background: white; color: black; }
  .final-cta h2 { color: black; }
:where(.community-review-page) :where(a):not(:where(#site-header *, #site-footer *)) { color: black; text-decoration: none; }
  a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #666; }
  a[href^="sms:"]::after, a[href^="#"]::after { content: ''; }
}

/* ===========================================================================
   RENT TREND OVER TIME  (section 5, directly under the live-data badge)
   ---------------------------------------------------------------------------
   Colour semantics match the comps map deliberately, because both modules sit
   in the same section and answer the same question:
       GREEN  = rent went DOWN  (good for the renter)
       RED    = rent went UP    (bad for the renter)
       NEUTRAL= flat (< 0.5% — below the noise floor of a scraped median)
   Note this is the RENTER's perspective, not a financial one where "up" is
   green. Every price colour on this page follows the renter's reading.

   Text colours use --good-text / --bad here. --good is a FILL colour and fails
   AA as small text (see the token block at the top of this file); --bad
   (#b23a3a) was measured at 5.39:1 or better on every surface this page uses,
   so it is safe as text and needs no darkened variant.
   =========================================================================== */
.rent-trend {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-2);
  padding: clamp(16px, 2.2vw, 24px);
  margin: 0 0 24px;
}
.rent-trend-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}
.rent-trend-title {
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.2;
  margin: 0 0 4px;
  color: var(--ink);
}
.rent-trend-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: 52ch;
}
.rent-trend-headline {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  max-width: 34ch;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
}
.rent-trend-headline.rent-trend-up { background: var(--bad-soft); border-color: #f2c7c7; color: var(--bad); }
.rent-trend-headline.rent-trend-down { background: var(--good-soft); border-color: #bbe9d0; color: var(--good-text); }

/* auto-fit rather than a fixed column count: the number of cells depends on how
   much history exists (1 cell at two months, 5 once there are two years), so the
   grid must not reserve space for windows that do not exist yet. */
.rent-trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.rent-trend-cell {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.rent-trend-cell.rent-trend-up { border-left-color: var(--bad); }
.rent-trend-cell.rent-trend-down { border-left-color: var(--good); }
.rent-trend-cell.rent-trend-flat { border-left-color: var(--line-strong); }
.rent-trend-cell-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.rent-trend-cell-delta {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.05;
  font-weight: 600;
  color: var(--ink);
}
.rent-trend-cell.rent-trend-up .rent-trend-cell-delta { color: var(--bad); }
.rent-trend-cell.rent-trend-down .rent-trend-cell-delta { color: var(--good-text); }
.rent-trend-cell-dollars {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 2px;
}
.rent-trend-cell-from {
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 6px;
}
/* Deliberately quiet: full width, small, muted — a courtesy line, not content. */
.photo-credit-note {
  margin: 16px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: none;
}
.photo-credit-note a { color: var(--ink-mute); text-decoration: underline; }

.rent-trend-market-gap {
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 76ch;
}
.rent-trend-advice {
  margin: 12px 0 0;
  padding: 12px 16px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 10px 10px 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 76ch;
}
.rent-trend-note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 76ch;
}
@media (max-width: 640px) {
  .rent-trend-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .rent-trend-cell-delta { font-size: 22px; }
}

/* ── Accessibility hardening (audit 2026-08-20) ─────────────────────── */
/* The marker label sits over/near the gradient noise scale — a solid pill
   keeps the ink readable no matter which gradient stop it lands on. */
.noise-scale-marker-label {
  background: rgba(255, 255, 255, 0.94);
  padding: 1px 7px;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

/* Keyboard users need to SEE where they are. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Vestibular safety: kill motion when the OS asks for it. */
@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;
  }
}

/* ── Motion system (2026-08-20) — restrained, two speeds, one easing ──
   Rules: transform/opacity only (compositor-friendly, no layout jank),
   no parallax, everything dies under prefers-reduced-motion via the
   global block above. */
:root {
  --m-fast: 160ms;
  --m-slow: 420ms;
  --m-ease: cubic-bezier(0.22, 0.61, 0.21, 1);
}

/* 1. Page-load choreography: the hero settles in, one beat per element.
   Pure CSS (animation-fill-mode both) so content is never hidden if JS
   fails; reduced-motion collapses it to instant. */
@keyframes cr-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.hero-media { animation: cr-rise var(--m-slow) var(--m-ease) both; }
.hero-body > * { animation: cr-rise var(--m-slow) var(--m-ease) both; }
.hero-body > *:nth-child(1) { animation-delay: 70ms; }
.hero-body > *:nth-child(2) { animation-delay: 140ms; }
.hero-body > *:nth-child(3) { animation-delay: 210ms; }
.hero-body > *:nth-child(4) { animation-delay: 280ms; }
.hero-body > *:nth-child(n + 5) { animation-delay: 350ms; }

/* 2. Hover + pressed states for every button-shaped control. */
[class*='btn'],
.calc-select,
.verdict-cta a,
summary {
  transition: transform var(--m-fast) var(--m-ease), box-shadow var(--m-fast) var(--m-ease), background-color var(--m-fast) linear;
}
a[class*='btn']:hover,
button[class*='btn']:hover {
  transform: translateY(-1px);
}
a[class*='btn']:active,
button[class*='btn']:active {
  transform: translateY(0) scale(0.98);
}

/* 3. Scroll-triggered moment: when the verdict card first enters view the
   score counts up (JS) and the rubric bars fill from zero. The width
   transition is transform-free but bars are short and fill once — the
   one deliberate exception, chosen over transform-scale so the rounded
   end cap keeps its shape. */
.rubric-bar-fill { transition: width 700ms var(--m-ease); }
.verdict-score-number { transition: transform var(--m-slow) var(--m-ease), opacity var(--m-slow) var(--m-ease); }
.verdict-score-number.m-pending { opacity: 0; transform: translateY(6px) scale(0.96); }

/* 4. State changes: accordion content eases in when a details opens;
   works for the rubric, FAQ, and any future details on the template. */
details > *:not(summary) { animation: cr-rise var(--m-fast) var(--m-ease) both; }

/* ── Property details: factual amenity/pets/parking tabs ─────────────── */
.pd-block { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.pd-heading { font-size: 24px; margin: 0 0 8px; }
.pd-lede { color: var(--ink-mute); max-width: 640px; margin: 0 0 8px; }
.pd-tabs {
  display: flex;
  gap: 8px;
  margin: 24px 0 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.pd-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color var(--m-fast) var(--m-ease);
}
.pd-tab:hover { color: var(--ink); }
.pd-tab.active { color: var(--accent-ink); border-bottom-color: var(--accent); }
.pd-panel { animation: fadeIn 200ms ease-out; }
.pd-chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pd-chip {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.pd-prose { max-width: 680px; color: var(--ink-soft); margin: 0 0 12px; }
.pd-provenance { margin-top: 20px; font-size: 12.5px; color: var(--ink-mute); }

/* Affiliate disclosure under the prep block header */
.prep-disclosure { font-size: 12.5px; color: var(--ink-mute); max-width: 640px; margin: -6px 0 8px; }

/* ─── MOBILE MAP EXPERIENCE (operator directive 2026-08-22) ──────────
   The comps map was near unusable on phones: a 300px beside-the-pin card
   clipped inside a ~230px-tall letterboxed map, legends covering the pins,
   and desktop-sized tap targets. Fixes: bottom-sheet comp cards, a taller
   map, legends moved below the map as a compact strip, and fat-finger
   tap halos. Desktop is untouched. */

/* Bottom sheet: the comp card as a full-width panel fixed to the viewport
   bottom, OUTSIDE the map container so nothing clips it. Same inner markup
   as the desktop popup (popup-heading/price/facts/delta/cta classes). */
.comp-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  background: white;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.22);
  padding: 18px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateY(105%);
  transition: transform 0.24s ease;
  max-height: 70vh;
  max-height: 70dvh;
  overflow-y: auto;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.comp-sheet.comp-sheet-open { transform: translateY(0); }
.comp-sheet-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  border: none;
  background: var(--wash, #f3f4f6);
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}
.comp-sheet-body { padding-right: 40px; }
/* Sheet reuses popup content classes; scale them for thumbs. */
.comp-sheet .popup-heading { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.comp-sheet .popup-price { font-size: 22px; font-weight: 800; color: var(--accent-ink); margin: 4px 0 8px; }
.comp-sheet .popup-price span { font-size: 13px; color: var(--ink-mute); font-weight: 500; margin-left: 4px; }
.comp-sheet .popup-facts { font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.comp-sheet .popup-delta { display: inline-block; padding: 5px 10px; border-radius: 6px; font-weight: 700; font-size: 13px; margin: 6px 0; }
.comp-sheet .popup-delta-cheap { background: var(--good-soft); color: var(--good); }
.comp-sheet .popup-delta-comparable { background: var(--gold-soft); color: var(--gold-ink); }
.comp-sheet .popup-delta-expensive { background: var(--bad-soft); color: var(--bad); }
.comp-sheet .popup-class { font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px; }
/* Thumb-sized CTAs (44px min target). */
.comp-sheet .popup-cta { margin-top: 10px; }
.comp-sheet .popup-cta-primary,
.comp-sheet .popup-cta-outline {
  display: block;
  text-align: center;
  padding: 13px 16px;
  min-height: 44px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  margin-top: 8px;
  text-decoration: none;
}
.comp-sheet .popup-cta-primary { background: var(--cta); color: white; }
.comp-sheet .popup-cta-outline { border: 1.5px solid var(--cta); color: var(--cta); }
.comp-sheet .popup-cta-note { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-mute); text-align: center; }

@media (max-width: 640px) {
  /* A real map, not a letterbox: fixed height beats the 16:10 ratio that
     collapsed to ~230px on phones. */
  .comps-map-wrap #compsMap { aspect-ratio: auto; height: 440px; }

  /* Legends stop floating over the pins: they stack below the map as one
     compact strip. (They are siblings after #compsMap in the DOM, so static
     positioning flows them underneath naturally.) */
  .comps-legend-box {
    position: static;
    max-width: none;
    box-shadow: none;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--line);
    padding: 8px 4px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .comps-legend-box .legend-box-label { flex-shrink: 0; }

  /* Fat-finger halo: every pin answers to a ~44px touch area without
     changing its visual size. */
  .comp-pin::before,
  .aat-pin::before {
    content: '';
    position: absolute;
    inset: -12px;
  }
}

/* ── Street View module (operator request 2026-08-22) ─────────────────
   Baked static image of the nearest outdoor panorama, linking to the
   interactive pano. The /map page's Street View buttons anchor here for
   reviewed communities. */
.streetview-module {
  margin-top: 32px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.streetview-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.streetview-header h3 {
  font-size: 20px;
  margin: 0;
}
.streetview-header a {
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-ink);
  text-decoration: none;
  white-space: nowrap;
}
.streetview-header a:hover {
  text-decoration: underline;
}
.streetview-frame {
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
}
.streetview-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.streetview-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}
@media (max-width: 640px) {
  .streetview-module {
    padding: 20px 16px;
  }
}

/* Tracking-started state of the rent-trend module (operator request
   2026-08-22): month one shows the first real snapshot with no change rows
   yet. The dashed border and softer ground read as "collecting", so the
   module never looks like a finished trend with missing data. */
.rent-trend-starting {
  border-style: dashed;
  background: var(--paper);
}