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

/* Design tokens */
:root {
  --ink: #0f172a;
  --ink-soft: #334155;
  --ink-mute: #64748b;
  --paper: #ffffff;
  --paper-2: #f8fafc;
  --paper-3: #f1f5f9;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --accent: #009ab9;
  --accent-ink: #005a6d;
  --accent-soft: #e0f4f8;
  --cta: #cb2d6f;
  --cta-hover: #a12458;
  --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; }
.community-review-page 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);
  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;
  margin: 16px 0 40px;
  /* 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);
}
/* 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-caption {
  position: absolute;
  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;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%);
  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.8);
  font-weight: 500;
}
@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; }
.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;
}
.opening-section p { font-size: 18px; line-height: 1.7; color: var(--ink); }

/* ─── 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;
  grid-template-columns: 1.4fr 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: 1fr; padding: 24px; } }

/* 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; }
.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); }
.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); }
@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; }
}

.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%;
  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); }
.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-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; }

.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 */
.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, #c9a437 0%, #8a6a15 55%, #6b4e10 100%); color: #fff; }
.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%, #b07a3c 55%, #96602a 100%); color: #3a2408; }
.legend-class-chip.grade-C       { background: #b0793d; color: #3a2408; }
.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, #c9a437 0%, #8a6a15 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%, #b07a3c 55%, #96602a 100%); color: #3a2408; }
.comp-pin-class.grade-C        { background: #b0793d; color: #3a2408; }
.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, #c9a437 0%, #8a6a15 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%, #b07a3c 55%, #96602a 100%); color: #3a2408; }
.popup-class.grade-C        { background: #b0793d; color: #3a2408; }
.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; }

.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%, #a12458 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%, #b07a3c 55%, #96602a 100%); color: #3a2408; }
.grade-C        { background: #b0793d; color: #3a2408; }
.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: var(--good); }
.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 {
  margin-top: 14px;
}
.noise-scale-track {
  position: relative;
  display: flex;
  height: 22px;
  border-radius: 999px;
  overflow: visible;
}
.noise-scale-zone {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.noise-scale-zone-loud { background: var(--bad-soft); color: var(--bad); border-radius: 999px 0 0 999px; }
.noise-scale-zone-active { background: var(--warn-soft); color: var(--warn-text); }
.noise-scale-zone-calm { background: var(--good-soft); color: var(--good-text); border-radius: 0 999px 999px 0; }
.noise-scale-marker {
  position: absolute;
  top: -5px;
  width: 4px;
  height: 32px;
  border-radius: 2px;
  background: var(--ink);
  box-shadow: 0 0 0 2px #fff;
  transform: translateX(-50%);
}
.noise-scale-marker-label {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.noise-scale {
  margin-bottom: 26px;
}
.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); }
.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; }
}

/* ─── 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; }
}