:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-alt: #f5f5f3;
  --border: #e0e0e0;
  --text: #002349;
  --text-dim: #5b5b5b;
  --accent: #002349;
  --accent-soft: rgba(0, 35, 73, 0.07);
  --gold: #c29b40;
  --navy-deep: #001731;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;
  --hdr: 68px;
  --up: #b4472e;
  --down: #2e7a4b;

  /* Type and spacing scales. The colour tokens above were already
     well-formed; these exist so hierarchy comes from a scale rather than
     from a pixel value chosen per block. */
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-md: 14px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-hero: 30px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 18px;
  --space-5: 26px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* The page is a column: the app, then the footer. The app takes whatever
   height the footer leaves rather than a fixed 100vh -- with 100vh the
   footer sat 31px below the fold of a map nobody scrolls, which made the
   privacy and terms links invisible on the one page everyone lands on. */
body { display: flex; flex-direction: column; }

.app {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  /* No page pinch-zoom inside the map section (2026-10-22). A pinch that
     missed the map canvas zoomed the whole page, and iPhone Safari then drew
     the fixed property sheet against the unzoomed page: "cut in half". The
     canvas keeps its own touch-action: none from MapLibre, so pinches on it
     still zoom the map. */
  touch-action: pan-x pan-y;
}

.site-footer { flex: none; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.brand-name {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.2px;
}

/* Replaced the yellow coverage badge, which wrapped to four lines at 375px
   and made a claim about.html already makes properly, checked there against
   all 1,101 municipalities. A description needs no test; a claim does. */
.brand-tagline {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}

.search-wrap {
  flex: 1;
  max-width: 420px;
}

#search {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  outline: none;
}

#search:focus {
  border-color: var(--accent);
}

.body {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}

.sidebar {
  width: 280px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-header {
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}

.property-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
}

.property-list li {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}

.property-list li:hover,
.property-list li.active {
  background: var(--panel-alt);
}

.pl-address {
  font-size: 13.5px;
  font-weight: 600;
}

.pl-meta {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
  display: flex;
  justify-content: space-between;
}

.map-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
}

#map {
  position: absolute;
  inset: 0;
}



.detail-address {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 2px;
  padding-right: 24px;
}

.detail-neighborhood {
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 4px;
}

.detail-lot {
  color: var(--text-dim);
  font-size: 12px;
  font-family: ui-monospace, monospace;
  margin-bottom: 16px;
}

.stat-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.stat-box {
  flex: 1;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--text-dim);
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
  margin-top: 2px;
}

.section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  margin: 18px 0 10px;
}

.sale-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

.sale-row:last-child { border-bottom: none; }

.sale-date { color: var(--text-dim); font-size: 13px; }
.sale-price { font-weight: 700; font-size: 14px; }
.sale-delta { font-size: 11px; margin-left: 6px; }
.sale-delta.up { color: var(--up); }
.sale-delta.down { color: var(--down); }

.trend-chart-v2 {
  position: relative;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 8px 4px;
  margin-bottom: 16px;
}

.trend-unavailable {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.trend-unavailable-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 5px;
}

.trend-unavailable-body {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

.trend-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  z-index: 1;
}

.trend-badge.up { color: var(--up); background: rgba(226, 115, 94, 0.12); }
.trend-badge.down { color: var(--down); background: rgba(111, 191, 115, 0.12); }

.trend-line-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.trend-grid {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.trend-axis-label {
  font-size: 8.5px;
  fill: var(--text-dim);
}

.trend-point-label {
  font-size: 9px;
  font-weight: 700;
  fill: var(--text);
}

.trend-line {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.trend-dot {
  fill: var(--accent);
  stroke: var(--panel-alt);
  stroke-width: 1.5;
}

.source-note {
  margin-top: 18px;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.maplibregl-popup-content {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
  font-family: inherit !important;
  font-size: 12.5px !important;
}

.maplibregl-popup-tip {
  border-top-color: var(--panel) !important;
  border-bottom-color: var(--panel) !important;
}

.marker {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #ffffff;
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(0, 35, 73, 0.25);
}

.marker.active {
  background: #c29b40;
  box-shadow: 0 0 0 4px rgba(194, 155, 64, 0.3);
}

@media (max-width: 860px) {
  /* On a phone the sidebar carries one thing: the introduction, as a card
     over the map. This rule used to hide the sidebar outright, which hid the
     introduction from every phone -- every visitor from the first paid ad.
     Over the map rather than above it, so the map never has to resize when
     the card goes. The result list never showed here; results stay markers. */
  .sidebar {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
    width: auto;
    z-index: 15;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  }
  .sidebar .sidebar-header { display: none; }
  .sidebar .property-list { display: none; }
  .sidebar .intro { border-bottom: none; }
  .sidebar.intro-gone { display: none; }
}

/* Phones. The file had exactly one breakpoint, at 860px, which is why the
   topbar was never considered for a phone: at 375px the badge wrapped to
   four lines, the search field collapsed to a sliver, and the About link
   was pushed off the screen entirely.

   The topbar wraps to two rows rather than hiding controls behind a menu:
   no JavaScript, nothing unreachable, and the search field -- the primary
   interaction of the app -- gets a full row to itself. */
@media (max-width: 430px) {
  .topbar {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }
  .brand-tagline { display: none; }
  .search-wrap {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
  }
  #search {
    /* 16px is not a style choice: Safari zooms the whole page when an input
       smaller than this takes focus, which breaks the layout without any
       CSS being wrong. */
    font-size: 16px;
    min-height: 44px;
    padding: var(--space-3);
  }
  .lang-toggle { margin-right: 0; }

}

/* ---- Zoning ---- */
.zoning-loading { color: var(--text-dim); font-size: 13px; padding: 10px 0; }

.zoning-block {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 13px;
  margin-bottom: 10px;
}

.zoning-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.zoning-label {
  font-size: var(--text-sm);
  color: var(--text-dim);
}

.zoning-code {
  font-size: 15px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
}

.zoning-code.zoning-flag { color: #c29b40; }

.zoning-desc { font-size: 13px; margin-top: 3px; }

.zoning-provenance {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 7px;
  line-height: 1.45;
}

.zoning-provenance a { color: var(--accent); }

.zoning-bylaw {
  display: block;
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.zoning-bylaw:hover { text-decoration: underline; }

.zoning-note {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 6px;
  line-height: 1.5;
}

.zoning-unavailable { font-size: 13px; font-weight: 600; }

.zoning-caveat {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 2px 0 14px;
}

/* ---- Comparables & area analytics ---- */
.comp-block {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 13px;
  margin-bottom: 14px;
}

.comp-summary { display: flex; gap: 14px; margin-bottom: 8px; }
.comp-summary > div { flex: 1; }
.comp-headline { font-size: 16px; font-weight: 700; margin-top: 2px; }

.comp-delta {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}
.comp-delta.up { color: var(--up); background: rgba(226, 115, 94, 0.12); }
.comp-delta.down { color: var(--down); background: rgba(111, 191, 115, 0.12); }

.comp-callout {
  font-size: 12px;
  line-height: 1.55;
  padding: 9px 10px;
  border-radius: 6px;
  background: rgba(0, 35, 73, 0.08);
  border-left: 3px solid var(--accent);
  margin-bottom: 10px;
}
.comp-callout-flag {
  background: rgba(194, 155, 64, 0.1);
  border-left-color: #c29b40;
}

.comp-list { border-top: 1px solid var(--border); margin-top: 4px; }

.comp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.comp-row:last-child { border-bottom: none; }
.comp-addr { font-size: 12.5px; font-weight: 600; }
.comp-meta { font-size: 11px; color: var(--text-dim); grid-column: 1; }
.comp-val { font-size: 12.5px; font-weight: 700; grid-row: 1 / span 2; align-self: center; }

.area-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
}
.area-value { font-size: 15px; font-weight: 700; }
.area-value.up { color: var(--up); }
.area-value.down { color: var(--down); }

/* ---- About link + the inline assessed-value explainer ---- */
.topbar-link {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.topbar-link:hover { color: var(--text); border-color: var(--accent); }

/* Placed directly above the value trend: this is where a reader decides the
   numbers are wrong, so the explanation has to be here rather than only on a
   page they would have to go looking for. */
.assessed-note {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-dim);
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 9px 11px;
  margin-bottom: 4px;
}

.assessed-note strong { color: var(--text); }
.assessed-note a { color: var(--accent); font-weight: 600; }

.sale-history {
  border-radius: 8px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  padding: 14px;
  margin-bottom: 16px;
}

.sale-history-empty {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
}

.sale-history-lead {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-dim);
}

.sale-history-lot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.sale-history-lot-label {
  font-size: var(--text-sm);
  color: var(--text-dim);
}

.sale-history-lot-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  word-break: break-word;
  margin-bottom: 12px;
}

/* Expanded list of a many-lot property: keep it scrollable rather than letting
   it push the rest of the panel away. One property carries 1,942 lots. */
.sale-history-lot-value-all {
  max-height: 140px;
  overflow-y: auto;
  font-size: 13px;
  font-weight: 600;
}

.sale-history-more {
  display: block;
  width: 100%;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-dim);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
  transition: border-color 0.15s, color 0.15s;
}

.sale-history-more:hover,
.sale-history-more:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.sale-history-copy {
  margin-left: auto;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.sale-history-copy:hover,
.sale-history-copy:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.sale-history-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 11px 13px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.15s;
}

.sale-history-link:hover,
.sale-history-link:focus-visible {
  border-color: var(--accent);
}

.sale-history-note {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}

.gap-block {
  border-radius: 8px;
  border: 1px dashed var(--border);
  padding: 12px 14px;
  margin-bottom: 16px;
}

.gap-row {
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}

.gap-row:first-child { padding-top: 0; }

.gap-row:last-of-type {
  border-bottom: none;
  padding-bottom: 4px;
}

.gap-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.gap-reason {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

.gap-footnote {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}

.ownership {
  border-radius: 8px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  padding: 12px 14px;
  margin-bottom: 16px;
}

.ownership-line {
  font-size: 13.5px;
  color: var(--text);
  margin-bottom: 6px;
}

.ownership-note {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* Language toggle. Reads as the language you would switch TO, which is the
   convention a bilingual reader expects -- a button saying "English" while the
   page is already English is the common way to get this wrong. */
.lang-toggle {
  padding: 6px 12px;
  margin-right: 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.lang-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* The headline: five blocks carrying a reader from the assessed value to a
   filed review. Separate cards rather than one merged panel, so each answers
   one question and can be skipped; short by default, with the reasoning behind
   a "why this number" line inside the block that needs it. */
.headline { margin: 14px 0 6px; }

.hl {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 12px 14px;
  margin-bottom: 8px;
}

.hl-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 5px;
}

.hl-figure { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--text); }
.hl-figure span { font-size: 12.5px; font-weight: 400; color: var(--text-dim); }
.hl-figure-sm { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--text); }
.hl-band { margin-top: 4px; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.hl-figure-muted { font-size: 14px; font-weight: 600; color: var(--text-dim); }
.hl-muted { border-style: dashed; }
.hl-note { margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }

.hl-assessment { border-color: var(--accent); }
.hl-assessment .hl-figure { color: var(--accent); }

/* Over and under read differently, but neither shouts: this is a comparison of
   assessments, not a finding that someone has been wronged. */
.hl-over { color: var(--accent); }
.hl-under { color: var(--text-dim); }
.hl-verdict-more { border-color: var(--accent); }

/* The verdict stays third -- assessment, then tax, then whether that is out
   of line -- but position is not prominence. It rendered at .hl-figure-sm's
   16px while the assessment beside it rendered at 26px, which made the one
   figure a reader can act on the smallest thing in the panel.
   Not hero size: this is a sentence, and Phase 1 makes it a longer one
   ("You are overpaying by over $500"). Visual mass comes from length as
   much as from size. */
.hl-verdict .hl-figure-sm {
  font-size: var(--text-xl);
  line-height: 1.25;
}

/* The call to action is advice, not data, so it is deliberately a different
   surface from the figure cards -- filled rather than outlined, and warm rather
   than the teal used everywhere else. */
.hl-action {
  background: rgba(194, 155, 64, 0.10);
  border: 1px solid #c29b40;
  border-radius: 9px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.hl-action-title { font-size: 13px; font-weight: 700; color: #c29b40; margin-bottom: 4px; }
.hl-action-body { font-size: 11.5px; line-height: 1.55; color: var(--text); }
.hl-action-calm { background: transparent; border-color: var(--border); }
.hl-action-calm .hl-action-title { color: var(--text); }

/* The filing block. The two controls come first and the steps after, because a
   reader who already knows the process should not have to scroll past it. */
.hl-file { border-color: var(--accent); }
.hl-file-primary,
.hl-file-copy {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  border-radius: 7px;
  cursor: pointer;
}
.hl-file-primary { background: var(--accent); color: #ffffff; border: 1px solid var(--accent); }
.hl-file-copy { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.hl-file-copy:hover { background: var(--panel); }
.hl-file-copied { background: var(--accent); color: #ffffff; }

.hl-file-steps { margin-top: 10px; display: grid; gap: 6px; }
.hl-file-steps div { font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }
.hl-file-steps strong { color: var(--text); }

/* The roll reminder. Deliberately quieter than .hl-file: it is what a reader
   with nothing to buy is offered, not the paid path, and it should not compete
   with the verdict above it. */
.hl-remind { border-style: dashed; }
/* The reserve's lead line: one question, set apart from the body so it reads
   as a line and not as the first sentence of a paragraph. */
.hl-remind-lead { margin: 0 0 6px; font-size: 12.5px; font-style: italic; line-height: 1.45; color: var(--text); }

/* The offer's slot once the roll's review deadline has passed: a statement,
   not a sale. Shares .hl-remind so the capture it may carry is styled and
   bound the same way as the lower block. */
.hl-window { border-color: var(--border); }
.hl-window-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.hl-window-body, .hl-window-exception { margin: 0 0 8px; font-size: 11.5px; line-height: 1.55; color: var(--text); }
.hl-window-exception { color: var(--text-dim); }
.hl-remind-body { margin: 6px 0 9px; font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }
.hl-remind-row { display: flex; gap: 6px; }
.hl-remind-input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 9px 10px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
}
.hl-remind-input:focus { outline: none; border-color: var(--accent); }
.hl-remind-cta {
  flex: 0 0 auto;
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 7px;
  cursor: pointer;
}
.hl-remind-cta:hover { background: var(--panel); }
.hl-remind-cta[disabled] { opacity: 0.5; cursor: default; }
.hl-remind-status:empty { display: none; }
.hl-remind-status { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--accent); }
.hl-remind-privacy { margin-top: 8px; font-size: 11px; line-height: 1.5; color: var(--text-dim); }

/* What the roll records. The only block whose value comes from the reader
   knowing something the app does not, so it reads as a checklist rather than a
   finding. */
.hl-facts-soft { border-color: #c29b40; }

.facts-list { margin-top: 9px; border-top: 1px solid var(--border); }
.facts-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
}
.facts-row:last-child { border-bottom: none; }
.facts-label { color: var(--text-dim); }
.facts-value { color: var(--text); font-weight: 600; text-align: right; }
.facts-note-inline { font-weight: 400; color: #c29b40; }

.facts-flag {
  margin-top: 9px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
  background: rgba(194, 155, 64, 0.10);
  border-left: 3px solid #c29b40;
  border-radius: 5px;
}

/* Points supporting a challenge. Present only when the checks found
   something, so it carries weight when it does appear. */
.hl-evidence { border-color: #c29b40; }

.ev-ref {
  padding: 9px 11px;
  margin-bottom: 10px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text);
  background: rgba(194, 155, 64, 0.10);
  border-left: 3px solid #c29b40;
  border-radius: 5px;
}

.ev-list { display: grid; gap: 9px; }
.ev-item { border-left: 2px solid var(--border); padding-left: 10px; }
.ev-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.ev-detail { font-size: 11px; line-height: 1.55; color: var(--text-dim); }

/* The properties the verdict rests on. Shown on request rather than by
   default: a reader who accepts the number should not have to scroll a table
   to get past it, and one who doubts it should be able to see every row. */
.cmp-details { margin-top: 9px; }
.cmp-toggle {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 7px 9px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  text-align: center;
}
.cmp-toggle::-webkit-details-marker { display: none; }
.cmp-toggle:hover { background: var(--panel); }
.cmp-details[open] .cmp-toggle { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.cmp-body { border: 1px solid var(--accent); border-top: none; border-radius: 0 0 6px 6px; }

.cmp-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  background: var(--panel);
}

.cmp-list { display: flex; flex-direction: column; }

/* A button, not a div: these navigate, so they should be reachable by keyboard
   and announce themselves as actionable. */
.cmp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "addr val" "meta diff";
  gap: 1px 10px;
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  font-family: inherit;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.cmp-row:hover { background: var(--panel); }
.cmp-addr { grid-area: addr; font-size: 12px; color: var(--text); }
.cmp-meta { grid-area: meta; font-size: 10.5px; color: var(--text-dim); }
.cmp-val  { grid-area: val; font-size: 12px; font-weight: 600; color: var(--text); text-align: right; }
.cmp-diff { grid-area: diff; font-size: 10.5px; text-align: right; color: var(--text-dim); }
.cmp-higher .cmp-diff { color: var(--text-dim); }
.cmp-lower  .cmp-diff { color: var(--accent); }

.cmp-foot {
  padding: 8px 10px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
}

/* "Why this number" -- the caveats that make a figure honest, available without
   making every card a paragraph. */
.hl-why { margin-top: 8px; }
.hl-why summary {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.hl-why summary::-webkit-details-marker { display: none; }
.hl-why summary::before { content: "› "; display: inline-block; transition: transform 0.15s ease; }
.hl-why[open] summary::before { transform: rotate(90deg); }
.hl-why-body {
  margin-top: 6px;
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--text-dim);
}
.hl-why-body a { color: var(--accent); }
/* The form explainer runs to several short paragraphs; without spacing they
   read as one block and defeat the point of explaining anything. */
.hl-why-body p { margin: 0 0 7px; }
.hl-why-body p:last-child { margin-bottom: 0; }
.hl-why-body strong { color: var(--text); }
.hl-why-body em { color: var(--text); font-style: italic; }

/* Separates the headline group from the detail sections, so the panel reads as
   "the answer, then the evidence" rather than one undifferentiated list. */
.detail-more-label {
  margin: 20px 0 8px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-dim);
}

.review {
  border-radius: 8px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  padding: 12px 14px;
  margin-bottom: 16px;
}

.review-line {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 12px;
}

/* The deadline is the one thing a reader must not skim past, so it gets the
   accent rule the value-trend gap notice uses rather than sitting as one more
   paragraph. */
.review-deadline {
  border-left: 3px solid var(--accent);
  background: var(--panel);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.review-deadline-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
}

.review-deadline-body {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
}

.review-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 11px;
}

.review-links a {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.review-links a:hover { text-decoration: underline; }

.review-note {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}

.char-block {
  border-radius: 8px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  padding: 4px 14px 10px;
  margin-bottom: 16px;
}

.char-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.char-row:last-child { border-bottom: none; }

.char-label {
  font-size: var(--text-sm);
  color: var(--text-dim);
}

.char-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.char-note {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
  padding-top: 9px;
  border-top: 1px solid var(--border);
}

/* Collapsible panel sections. Native <details>, so the disclosure is
   keyboard-operable and announced without any script. */
.sec {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--panel-alt);
  overflow: hidden;
}

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 13px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.12s;
}

.sec-head::-webkit-details-marker { display: none; }
.sec-head:hover { background: rgba(0, 35, 73, 0.03); }

.sec-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.sec-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
}

/* The answer, so the collapsed row is worth reading on its own. */
.sec-summary {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sec-chevron {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform 0.15s;
}

.sec[open] > .sec-head > .sec-chevron { transform: rotate(-90deg); }

.sec[open] > .sec-head {
  border-bottom: 1px solid var(--border);
}

.sec-body { padding: 12px 13px 4px; }

/* Sections bring their own frame now, so inner blocks drop theirs. */
.sec-body .sale-history,
.sec-body .ownership,
.sec-body .char-block,
.sec-body .zoning-block {
  border: none;
  background: transparent;
  padding: 0;
  margin-bottom: 8px;
}

.sec-body .section-title:first-child { margin-top: 0; }

.detail-category {
  color: var(--accent);
  font-weight: 600;
}

/* Assessed-value breakdown. Bars rather than bare figures: the ratio is the
   insight, and two dollar amounts side by side read like a price. */
.vb-row { margin-bottom: 14px; }

.vb-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
}

.vb-label {
  font-size: 12.5px;
  color: var(--text);
}

.vb-value {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.vb-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--panel);
  overflow: hidden;
}

.vb-fill { height: 100%; border-radius: 3px; }
.vb-fill-land { background: var(--accent); }
.vb-fill-building { background: #c29b40; }

.vb-pct {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-dim);
}

.vb-total {
  display: flex;
  justify-content: space-between;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.vb-note {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-dim);
}

/* The caveat sits inside a section now, under the figure it qualifies, so it
   needs a separator above it rather than the standalone card treatment it had
   at the top of the panel. */
.assessed-note-inline {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  background: transparent;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
}

/* An outage the visitor can read, rather than an empty map they misread.
   See tests/test_parcel_notice.py for why this exists. */
.map-notice {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  max-width: min(90%, 420px);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.92);
  color: #f3f4f6;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.map-notice[hidden] {
  display: none;
}

/* The Phase 1 offer. A different surface from the figure cards -- this is a
   transaction, not data -- and it states its price on the button rather
   than behind a click. */
.hl-paywall {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 9px;
  padding: var(--space-3) var(--space-3) var(--space-2);
  margin-bottom: var(--space-2);
}
/* The headline names the product -- the request, not the number -- because
   the number is already on the card above. */
.hl-paywall-head {
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 6px;
}
.hl-paywall-copy {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text);
  margin-bottom: var(--space-2);
}

/* What the $10 buys, listed between the pitch and the button. Set one step
   below the pitch: it is the detail a reader drops into after the sentence
   has done its work, and at the same size it competes with it.

   The marker is a pseudo-element dash rather than list-style: disc. A bullet
   at 11px inside an accent-tinted box reads as a smudge, and a dash matches
   how the rest of the panel punctuates. */
.hl-paywall-includes-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.hl-paywall-includes {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text);
}
.hl-paywall-includes li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 4px;
}
.hl-paywall-includes li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.hl-paywall-btn {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--bg);
  background: var(--accent);
  border: none;
  border-radius: 7px;
  cursor: pointer;
}
.hl-paywall-btn:hover { filter: brightness(1.08); }

/* Directly under the button, in body text rather than the dim note style:
   the guarantee answers the hesitation the price raises, so it sits where
   that hesitation happens and is legible there. */
.hl-paywall-guarantee {
  margin-top: var(--space-2);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}
.hl-paywall-guarantee::before {
  content: "\2713\00a0";
  color: var(--accent);
}
/* Who is asking, and that nothing is asked. Under the guarantee, in the
   dim note style: two public reactions on 2026-10-02 were "who are you"
   and "fraud, don't enter personal info", and the answer belongs beside
   the button, not on the About page. */
.hl-paywall-trust {
  margin-top: var(--space-2);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
  text-align: center;
}


/* The code field. Tucked behind a disclosure inside the offer: present
   where there is something to unlock, invisible everywhere else. */
/* Its own section rather than a footnote. A visitor arriving with a
   code from a creator should not have to find a disclosure triangle --
   the thing they try instead is the $10 button. Separated from the
   purchase above it by a rule, so the two routes read as alternatives. */
.hl-code {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.hl-code-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-2);
}
.hl-code-row {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.hl-code-row input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.hl-code-row button {
  min-height: 44px;
  padding: 0 var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 6px;
  cursor: pointer;
}

/* Shown while a completed payment is being claimed, and if it cannot be.
   A buyer who has just paid should never be looking at a page that
   appears to be doing nothing. */
.unlock-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.45;
  text-align: center;
  color: var(--bg);
  background: var(--accent);
}
.unlock-banner-working { opacity: 0.92; }

/* The success banner, which unlike the working one has to survive being read.
   It carries the dossier link and stays until dismissed: someone who has just
   paid should be able to look away and come back to it. */
.unlock-banner-done {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.unlock-banner-link {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.unlock-banner-close {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* The dossier is the FIRST thing in the panel for anyone who has paid, and it
   is styled to be impossible to walk past. It sat beside the blank review form
   at the bottom and was missed by the person who had just bought it. Empty for
   everyone else, so a free reader never sees it. */
.hl-dossier {
  border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  padding: var(--space-3);
}
.hl-dossier-tag {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--accent);
}
.hl-dossier-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 9px;
}
.hl-dossier-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 12px;
  min-height: 48px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background: var(--accent);
  border-radius: 4px;
}
/* The $5 card: the figure first, large; the three lines under it; the
   sheet button last, the same 48px target as the dossier's. */
.hl-reveal-card .hl-reveal-figure {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  margin: 2px 0 0;
}
.hl-reveal-card .hl-reveal-dir {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dim);
  margin: 0 0 10px;
}
.hl-reveal-card .hl-reveal-lines {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.5;
}
.hl-reveal-card .hl-reveal-lines li { margin: 0 0 4px; }
.hl-reveal-card .hl-dossier-btn { min-height: 48px; }

/* The sheet on screen: a white document in the overlay, the bar above it
   with the download link and the close button. The frame is the server's
   page, so it carries its own print styles and "Save as PDF" bar. */
.fp-sheet-viewer { background: #fff; color: #111; }
.fp-sheet-viewer .fp-bar { background: #fff; border-bottom: 1px solid #ddd; }
.fp-sheet-viewer .fp-title { color: #111; }
.fp-sheet-viewer .fp-close { color: #111; }
.fp-sheet-lang {
  margin-left: auto;
  padding: 10px 12px;
  min-height: 44px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  color: #111;
  background: #fff;
  border: 1px solid #111;
  border-radius: 4px;
  cursor: pointer;
}
.fp-sheet-download {
  padding: 10px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 700;
  color: #ffffff;
  background: var(--accent);
  border-radius: 4px;
  text-decoration: none;
}
.fp-sheet-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 70vh;
  border: 0;
  background: #fff;
}
/* The junk-mail warning. Deliverability to a brand-new sending domain cannot
   be guaranteed by anyone, so the honest move is to say where else to look
   rather than let someone conclude they were charged and sent nothing. */
.hl-dossier-junk {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
}
.hl-dossier-note {
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* The first thing a stranger reads.
   Lives in the sidebar because that is the only part of the page with room
   for a sentence, and because the search box it points at is directly above.
   Removed by app.js the moment there is a result or an open property. */
.intro {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.intro-headline {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--text);
}

.intro-body {
  margin: 0 0 var(--space-3);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--text-dim);
}

/* The only instruction on the page. Accent-coloured so the eye lands on it
   after the headline and goes to the search box above. */
.intro-prompt {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.45;
  color: var(--accent);
}

@media (max-width: 430px) {
  /* On a phone the introduction is a card over the map, so it has to be
     short enough to leave most of the map visible around it. */
  .intro { padding: var(--space-3); }
  .intro-headline { font-size: var(--text-lg); }
  .intro-body { display: none; }
}

/* ---- The roll reminder ----
   Shown only where a roll is actually coming, and empty for everyone else.
   Quieter than the paid block on purpose: this asks for something rather than
   delivering something, and a free reader should not meet two loud boxes. */
.hl-remind { border-style: dashed; }

/* The offer's slot once the roll's review deadline has passed: a statement,
   not a sale. Shares .hl-remind so the capture it may carry is styled and
   bound the same way as the lower block. */
.hl-window { border-color: var(--border); }
.hl-window-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.hl-window-body, .hl-window-exception { margin: 0 0 8px; font-size: 11.5px; line-height: 1.55; color: var(--text); }
.hl-window-exception { color: var(--text-dim); }
/* The figure, inside that statement: the one thing on sale while the
   window is shut, so it takes the offer's surface rather than the dashed
   reminder's. The free capture follows it, outside this box. */
.hl-reveal {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-style: solid;
  border-radius: 9px;
  padding: var(--space-3) var(--space-3) var(--space-2);
  margin: var(--space-2) 0;
}
.hl-reveal-isnot { color: var(--text-dim); }
.hl-paywall-credited { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--text); }
.hl-remind-body {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-dim);
  margin-bottom: var(--space-3);
}
.hl-remind-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 6px;
}
.hl-remind-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  /* 16px is not a style choice: Safari zooms the page when an input smaller
     than this takes focus, the same reason #search is pinned. */
  font-size: 16px;
  font-family: inherit;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}
/* The sentence being agreed to, shown with the form rather than behind a
   link. It is the thing consent is given to, so it is not a footnote. */
.hl-remind-consent {
  margin: 8px 0 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
}
.hl-remind-submit {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 11px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 4px;
  cursor: pointer;
}
.hl-remind-msg:not(:empty) {
  margin-top: 8px;
  font-size: 12px;
  color: var(--warn, #d98c4a);
}
.hl-remind-done {
  font-size: 13px;
  line-height: 1.5;
  color: var(--accent);
}

/* The search inside the introduction card. Phones only: on a desktop the
   topbar field sits directly above the sidebar and reads as the search; on a
   phone it read as part of the header, and nobody from the ad typed in it. */
.intro-search,
.intro-hint,
.intro-free,
.property-list .pl-heading { display: none; }

.property-list li.pl-empty {
  cursor: default;
  color: var(--text-dim);
  font-size: var(--text-md);
  line-height: 1.45;
}
.property-list li.pl-empty:hover { background: none; }

@media (max-width: 860px) {
  .intro-prompt { display: none; }

  .intro-search {
    display: flex;
    gap: var(--space-2);
    margin: var(--space-3) 0 var(--space-2);
  }
  #introSearch {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 0 var(--space-3);
    border-radius: 10px;
    border: 2px solid var(--accent);
    background: var(--bg);
    color: var(--text);
    /* 16px for the same reason as #search: anything smaller and Safari
       zooms the page when the field takes focus. */
    font-size: 16px;
    outline: none;
  }
  #introSearch::placeholder { color: var(--text-dim); }
  #introSearchGo {
    min-height: 48px;
    padding: 0 var(--space-4);
    border: none;
    border-radius: 10px;
    background: var(--accent);
    color: var(--bg);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
  }
  .intro-hint {
    display: block;
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-dim);
  }
  .intro-free {
    display: block;
    margin: 0;
    font-size: var(--text-md);
    line-height: 1.45;
    color: var(--text);
  }

  /* One box to type in: the card's, while the card is up. */
  body.intro-open .topbar .search-wrap { display: none; }

  /* Typing has produced results: the pitch goes, the box stays. */
  .intro.intro-collapsed > :not(.intro-search) { display: none; }
  .intro.intro-collapsed .intro-search { margin: 0; }

  /* Results as a list in the card. Pins alone asked a visitor who had just
     typed their address to find one dot among fifty and hit it with a thumb. */
  .sidebar.intro-gone.searching { display: block; }
  .sidebar.searching .property-list {
    display: block;
    max-height: 45vh;
    overflow-y: auto;
  }
  .sidebar.searching .property-list .pl-heading {
    display: block;
    cursor: default;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent);
  }
  .sidebar.searching .property-list .pl-heading:hover { background: none; }
}


/* ---- The filled form, before payment ---------------------------------
   A secondary button in the offer, then a full-screen overlay: two page
   images with the free values typed over them in the form's own boxes and
   the two paid boxes drawn grey. Percent positioning keeps the boxes on the
   image at any width; the type scales with the page via container units,
   with a fixed fallback for browsers without them. */
.hl-paywall-preview {
  display: block;
  width: 100%;
  min-height: 40px;
  margin-bottom: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 7px;
  cursor: pointer;
}
.hl-paywall-preview::before { content: "\1F50D\00a0"; }
.hl-paywall-preview:hover { filter: brightness(1.04); }

body.fp-open { overflow: hidden; }
.fp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.fp {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  background: var(--bg);
  color: var(--text);
}
@media (min-width: 600px) {
  .fp-backdrop { padding: 24px 16px; }
  .fp { border-radius: 10px; max-height: 100%; }
}
.fp-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line, rgba(0,0,0,0.12));
  flex: none;
}
.fp-title { font-size: var(--text-md); font-weight: 700; }
.fp-close {
  width: 40px; height: 40px;
  font-size: 26px; line-height: 1;
  color: var(--text);
  background: transparent; border: none; cursor: pointer;
}
.fp-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-2) var(--space-3) var(--space-3);
}
.fp-sub {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-dim);
  margin-bottom: var(--space-2);
}
.fp-page {
  position: relative;
  container-type: inline-size;
  margin-bottom: var(--space-2);
  border: 1px solid var(--line, rgba(0,0,0,0.12));
  background: #fff;
}
.fp-page img { display: block; width: 100%; height: auto; }
.fp-box { position: absolute; box-sizing: border-box; }
.fp-field {
  display: flex; align-items: center;
  padding-left: 0.6%;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px; font-size: 1.85cqw;
  color: #1a1a1a;
  white-space: nowrap; overflow: hidden;
}
.fp-yours {
  display: flex; align-items: flex-start; justify-content: flex-end;
  border: 2px dotted var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--accent);
  font-weight: 600;
  text-align: left;
  padding: 2.5% 3%;
  font-size: 11px; font-size: 2.2cqw;
  line-height: 1.35;
}
/* On a light backing so it reads over the form's own labels. */
.fp-yours span {
  max-width: 52%;
  padding: 1.5% 2%;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
}
.fp-paid {
  background: repeating-linear-gradient(135deg, #cfd3d8 0 6px, #dde0e4 6px 12px);
  border: 1px solid #aab0b8;
  display: flex; align-items: center; justify-content: center;
  color: #333;
  font-weight: 600;
  text-align: center;
  padding: 2% 4%;
  font-size: 11px; font-size: 2.1cqw;
  line-height: 1.35;
}
.fp-blank { border: 2px dashed #aab0b8; }
.fp-legend {
  list-style: none; margin: 0 0 var(--space-3); padding: 0;
  font-size: var(--text-xs); line-height: 1.5; color: var(--text);
}
.fp-legend li { position: relative; padding-left: 22px; margin-bottom: 4px; }
.fp-legend li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 10px;
}
.fp-legend-paid::before {
  background: repeating-linear-gradient(135deg, #cfd3d8 0 3px, #dde0e4 3px 6px);
  border: 1px solid #aab0b8;
}
.fp-legend-blank::before { border: 2px dashed #aab0b8; }
.fp-foot { padding-bottom: var(--space-2); }

/* The teaser line in the grey motifs box: the paragraph's opening clause,
   which is the owner's own address. One line, cut with an ellipsis. */
.fp-paid { flex-direction: column; gap: 3%; }
.fp-lead {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: italic;
  font-weight: 500;
  color: #222;
}

/* ---- The request screen: step one asks, step two shows ----------------- */
.hl-paywall-preview-price {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-dim);
  margin-top: 2px;
}
.fp-form { display: grid; gap: var(--space-2); }
.fp-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.fp-row-addr { grid-template-columns: 1fr 2fr 1fr; }
.fp-f { display: grid; gap: 4px; min-width: 0; }
.fp-f span { font-size: var(--text-xs); font-weight: 600; color: var(--text-dim); }
.fp-f input {
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--space-2);
  font-size: 16px; /* under 16px, iOS zooms the page on focus */
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.fp-check { display: flex; gap: 8px; align-items: flex-start; font-size: var(--text-sm); line-height: 1.4; }
.fp-check input { margin-top: 3px; }
.fp-address { display: grid; gap: var(--space-2); }
.fp-required { font-size: var(--text-sm); color: #e0a24a; }
.fp-privacy { font-size: var(--text-xs); line-height: 1.5; color: var(--text-dim); }
.fp-edit {
  display: block;
  margin: 0 auto var(--space-2);
  padding: 6px 10px;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--accent);
  background: transparent;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}
/* The blurred boxes: lines of "text" with nothing readable in them. The
   argument itself is not in the page, so there is nothing to un-blur. */
.fp-paid { align-items: stretch; justify-content: flex-start; padding: 2% 2%; overflow: hidden; }
.fp-blurlines {
  display: block;
  flex: 1;
  min-height: 0;
  width: 96%;
  background: repeating-linear-gradient(to bottom, #6b7078 0 0.55em, transparent 0.55em 1em);
  filter: blur(1.6px);
  opacity: 0.85;
  font-size: 1.9cqw;
}
.fp-paid .fp-lead { flex: none; text-align: left; margin-bottom: 1%; }
.hl-dossier-form {
  display: block;
  width: 100%;
  min-height: 40px;
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 7px;
  cursor: pointer;
}

/* ---- Compact top of the panel --------------------------------------------
   The offer is what the panel is for; everything above it is made to take
   one screen less. */
.hl { padding: 10px 12px; }
.headline { margin: 10px 0 6px; }
.hl-figure { font-size: 22px; }
.hl-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.hl-pair > .hl { margin-bottom: 0; min-width: 0; }
#blockTax { display: contents; }
.hl-pair-note { grid-column: 1 / -1; margin-top: 0; }
.hl-paywall { padding: var(--space-2) var(--space-3); }
.hl-paywall-copy { margin-bottom: var(--space-2); }
.hl-paywall-preview {
  color: var(--bg);
  background: var(--accent);
  border: none;
  min-height: 52px;
  margin-bottom: 0;
}
.hl-paywall-preview::before { content: none; }
.hl-paywall-preview-price { color: var(--bg); opacity: 0.85; }
/* The request screen is a box in the middle of the screen at every width;
   the document step scrolls inside it. */
.fp-backdrop { padding: 12px; align-items: center; }
.fp { max-height: 100%; border-radius: 10px; }
.fp-foot .hl-paywall-includes-label { margin-top: var(--space-2); }
.fp-foot .hl-code { margin-top: var(--space-2); }

/* The role question and the marks drawn on the completed document. */
.fp-roles { border: 1px solid var(--border); border-radius: 6px; padding: var(--space-2); margin: 0; display: grid; gap: 8px; }
.fp-roles legend { font-size: var(--text-xs); font-weight: 600; color: var(--text-dim); padding: 0 4px; }
.fp-digits { justify-content: center; padding-left: 0; letter-spacing: 0.35em; }
.fp-tick {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-size: 2.4cqw;
  font-weight: 700; line-height: 1;
  color: #1a1a1a;
}

.fp-row-3 { grid-template-columns: 2fr 0.8fr; }

/* The signature pad, and the signature on the completed document. */
.fp-pad-wrap { display: grid; gap: 6px; }
.fp-pad {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 1;
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: 6px;
  touch-action: none;
  cursor: crosshair;
}
.fp-pad-row { display: flex; gap: var(--space-2); align-items: flex-start; }
.fp-pad-clear {
  flex: none;
  padding: 4px 10px;
  font-family: inherit;
  font-size: var(--text-xs);
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.fp-sig { display: flex; align-items: flex-end; }
.fp-sig img { max-width: 100%; max-height: 100%; height: 100%; object-fit: contain; object-position: left bottom; mix-blend-mode: multiply; }


/* The three documents under the map page. Small and out of the way: the
   map and the panel are the product, this is where the obligations live. */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--text-dim);
  background: var(--panel);
  border-top: 1px solid var(--border);
}
.site-footer a { color: var(--text-dim); text-decoration: none; }
.site-footer a:hover { color: var(--text); text-decoration: underline; }

/* The storage notice, shown once. A bar, not a wall: nothing is blocked. */
.storage-notice {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.storage-notice-text { flex: 1; }
.storage-notice a { color: var(--accent); }
.storage-notice-ok {
  flex: none;
  padding: 6px 14px;
  font: inherit;
  font-weight: 600;
  color: var(--bg);
  background: var(--accent);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
@media (min-width: 720px) {
  .storage-notice { left: auto; max-width: 520px; }
}

/* =====================================================================
   The front page and the map, October 2026 redesign.

   November 2026: rebuilt in the manner of a luxury brokerage's front page
   (full-screen photo with the question on it, a clear header that fills
   on scroll, text that rises into view, figures that count up, region
   tiles, generous white sections). Same navy and gold, same two fonts,
   same photos, same strings; nothing a crawler reads has moved. Fonts and
   photos are served from this site (assets/home/), so no visitor's browser
   contacts Google or Unsplash.
   ===================================================================== */

/* Both are variable fonts, one file each, Latin range (every French
   character the site uses). Open Font License; served from this site. */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("/assets/home/playfair-display.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/home/montserrat.woff2") format("woff2"); }

/* ---- Page: a scrolling page now, not a full-window app ---- */
:root { --hdr: 76px; --ease: cubic-bezier(0.2, 0.65, 0.2, 1); }
html { scroll-behavior: smooth; scroll-padding-top: var(--hdr); }
html, body { height: auto; font-family: var(--sans); color: var(--text-dim); }
body { display: block; background: var(--bg); }
.app { height: calc(100vh - var(--hdr)); height: calc(100dvh - var(--hdr)); }
.site-footer { background: var(--navy-deep); border-top: 0; }
.site-footer a { color: rgba(255, 255, 255, 0.7); }
.site-footer a:hover { color: var(--gold); }

/* ---- Text rises into view as each section arrives (app.js adds .in the
   first time an element is seen). --i staggers the lines of one block.
   Reduced motion: everything is simply there. ---- */
[data-rise] { opacity: 0; transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
[data-rise].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-rise] { opacity: 1; transform: none; transition: none; } }

/* ---- Header: clear over the hero's photo, navy once the page has scrolled.
   Nav left, brand centred, language and the one button right. ---- */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--hdr); padding: 0 40px; gap: 28px;
  background: transparent; border-bottom: 0; transition: background 0.35s ease, box-shadow 0.35s ease; }
.topbar.scrolled { background: var(--accent); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); }
.topbar > * { flex: 1 1 0; min-width: 0; }
.brand { justify-content: center; gap: 14px; }
.brand-mark, .topbar-link { display: none; }
.brand-name { font-family: var(--serif); font-weight: 400; font-size: 30px; letter-spacing: 0.04em; color: #fff; }
.brand-name .gold { color: var(--gold); }
.brand-tagline { display: none; }
.dp-nav { display: flex; justify-content: flex-start; gap: 30px; }
.dp-nav a { color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; font-weight: 400;
  padding-bottom: 4px; border-bottom: 1px solid transparent; transition: border-color 0.3s; white-space: nowrap; }
.dp-nav a:hover { border-bottom-color: var(--gold); }
.dp-top-right { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.lang-toggle { border-radius: 0; padding: 9px 14px; background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 400; }
.lang-toggle:hover { border-color: var(--gold); color: var(--gold); }
.dp-cta { flex: none; padding: 12px 24px; border: 1px solid #fff; color: #fff; text-decoration: none; white-space: nowrap; transition: background 0.3s, color 0.3s; }
.dp-cta:hover { background: #fff; color: var(--accent); }
.topbar.scrolled .dp-cta { border-color: var(--gold); }
.topbar.scrolled .dp-cta:hover { background: var(--gold); color: #fff; }

/* ---- Shared: labels, buttons, square edges ---- */
.dp-eyebrow { margin: 0 0 18px; font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold); }
.dp-cta, .dp-btn, .dp-full, .dp-scroll, .dp-press-cta, .dp-rv-pay, .dp-rs-row button,
.hl-paywall-btn, .hl-remind-cta, #introSearchGo, .storage-notice-ok {
  border-radius: 0; text-transform: uppercase; letter-spacing: 0.16em; font-family: var(--sans); font-weight: 400; font-size: 12px; }
.dp-btn { display: block; text-align: center; padding: 17px 24px; background: var(--accent); color: #fff; text-decoration: none; transition: background 0.3s, color 0.3s; }
.dp-btn:hover { background: var(--navy-deep); }
.dp-btn.outline { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.dp-btn.outline:hover { background: var(--accent); color: #fff; }
.dp-btn.ghost { display: inline-block; padding: 15px 36px; border: 1px solid #fff; background: transparent; color: #fff; }
.dp-btn.ghost:hover { background: #fff; color: var(--accent); }
.hl-paywall-btn, .hl-remind-cta, #introSearchGo { background: var(--accent); color: #fff; border: 0; }
#introSearch, .hl-remind-input, .headline .hl, .detail-panel details.sec, .detail-panel .hl-why { border-radius: 0; }
#introSearch { border: 1px solid var(--accent); }
.detail-address { font-family: var(--serif); font-weight: 500; letter-spacing: 0.01em; }
.dp-center { text-align: center; }
.dp-lede-center { margin-left: auto !important; margin-right: auto !important; }

/* ---- The hero, in two parts: the question on a navy panel (left), one
   photograph of one house in an arched frame (right). The photo eases in
   once; nothing rotates. ---- */
.dp-hero { position: relative; display: grid; grid-template-columns: 1fr; min-height: 78vh; min-height: 78svh;
  background: var(--accent); color: #fff; overflow: hidden; }
.dp-hero-text { position: relative; display: flex; align-items: center; background: var(--accent);
  padding: calc(var(--hdr) + 40px) 56px 120px clamp(28px, 7vw, 120px); }
.dp-qs-inner { width: 100%; max-width: 580px; text-align: left; }
.dp-qs-eyebrow { margin-bottom: 22px; color: var(--gold); }
.dp-qs-title { margin: 0 0 22px; font-family: var(--serif); font-weight: 400; font-size: 58px; line-height: 1.08;
  letter-spacing: 0.005em; color: #fff; }
.dp-qs-lede { max-width: 540px; margin: 0 0 34px; font-family: var(--sans); font-weight: 300; font-size: 17px; line-height: 1.65;
  color: rgba(255, 255, 255, 0.86); }
.dp-qs-field { position: relative; display: flex; align-items: center; max-width: 560px; height: 62px; margin: 0; padding: 0 8px 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.06); text-align: left; transition: border-color 0.3s, background 0.3s; }
.dp-qs-field:focus-within { border-color: var(--gold); background: rgba(255, 255, 255, 0.1); }
.dp-qs-icon { flex: none; width: 18px; height: 18px; color: #fff; }
.dp-qs-field input { flex: 1; min-width: 0; height: 100%; padding: 0 12px 0 16px; border: 0; outline: none;
  background: transparent; color: #fff; font-family: var(--sans); font-size: 16px; letter-spacing: 0.01em; }
.dp-qs-field input::placeholder { color: rgba(255, 255, 255, 0.6); }
.dp-qs-field input::-webkit-search-cancel-button { filter: invert(1); }
.dp-qs-go { flex: none; width: 44px; height: 44px; padding: 8px; border: 0; background: transparent; color: #fff; cursor: pointer; }
.dp-qs-go svg { width: 24px; height: 24px; }
.dp-qs-go:hover { color: var(--gold); }
.dp-qs-field .dp-suggest { top: calc(100% + 8px); }
.dp-show-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 18px 32px; margin-top: 28px; }
.dp-act { display: inline-flex; align-items: center; gap: 8px; padding: 0 0 4px; border: 0; border-bottom: 1px solid var(--gold);
  background: none; color: #fff; cursor: pointer; text-transform: uppercase; letter-spacing: 0.18em;
  font-family: var(--sans); font-size: 11.5px; font-weight: 400; }
.dp-act:hover { color: var(--gold); }
.dp-act svg { width: 15px; height: 15px; color: var(--gold); }
.dp-act-msg { flex: 1 1 100%; font-size: 12px; color: #fff; }
.dp-act-msg:empty { display: none; }
.dp-qs-fine { max-width: 540px; margin: 30px 0 0; font-size: 12px; line-height: 1.6; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.6); }
/* The scroll cue, a hairline that keeps falling, under the text. */
.dp-scroll-cue { position: absolute; left: clamp(28px, 7vw, 120px); bottom: 44px; z-index: 4; display: flex; align-items: center; gap: 14px;
  color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; }
.dp-scroll-cue i { display: block; width: 48px; height: 1px; background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  animation: dp-cue 2.4s ease-in-out infinite; }
@keyframes dp-cue { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; }
  51% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }

/* The photograph: one house, in an arch, a gold hairline set off around it. */
.dp-hero-photo { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--hdr) + 40px) 48px 56px; background: var(--navy-deep); text-align: center; }
.dp-arch-wrap { position: relative; width: min(100%, 420px); }
.dp-arch-wrap::before { content: ""; position: absolute; inset: -16px; border: 1px solid rgba(194, 155, 64, 0.8);
  border-radius: 999px 999px 0 0; pointer-events: none; }
.dp-arch { position: relative; margin: 0; width: 100%; aspect-ratio: 4 / 5; max-height: calc(100vh - var(--hdr) - 220px); max-height: calc(100svh - var(--hdr) - 220px);
  min-height: 360px; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--accent); }
.dp-arch-img { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; background-position: 52% 45%;
  transform: scale(1.1); opacity: 0; animation: dp-arch-in 2.2s var(--ease) 0.2s forwards; will-change: transform, opacity; }
@keyframes dp-arch-in { from { transform: scale(1.1); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.dp-hero-cap { max-width: 420px; margin: 34px 0 0; }
.dp-joke-line { display: block; margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 19px; line-height: 1.35;
  color: rgba(255, 255, 255, 0.9); }
.dp-joke-cta { display: inline-flex; align-items: center; gap: 8px; padding: 0 0 4px; border-bottom: 1px solid var(--gold);
  color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 0.18em; font-family: var(--sans); font-size: 11px; font-weight: 400; }
.dp-joke-cta:hover { color: var(--gold); }
.dp-slide-cap { position: absolute; right: 20px; bottom: 14px; font-size: 10.5px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.5); }
@media (prefers-reduced-motion: reduce) {
  .dp-arch-img { animation: none; transform: none; opacity: 1; }
  .dp-scroll-cue i { animation: none; }
}

/* ---- Search suggestions, under the hero's field, the map's and the
   pricing cards': grouped, the typed letters in bold ---- */
.dp-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; padding: 20px 24px 8px; background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); max-height: 300px; overflow-y: auto; text-align: left; }
.dp-sg-group { margin-bottom: 10px; }
.dp-sg-title { margin-bottom: 12px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: #666; }
.dp-sg-item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0 -10px 4px; padding: 5px 10px; cursor: pointer; }
.dp-sg-item .a { font-family: var(--serif); font-size: 18px; color: var(--accent); }
.dp-sg-item .a b { font-weight: 700; }
.dp-sg-item .v { flex: none; font-size: 12.5px; color: #5b5b5b; }
.dp-sg-item.on { background: #f5f5f3; }
.dp-sg-item.on .a { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.dp-sg-more { justify-content: flex-end; font-family: var(--serif); font-size: 18px; color: var(--accent); }
.dp-sg-none { padding-bottom: 12px; font-size: 13.5px; color: #5b5b5b; }

/* ---- The map section: the map alone at full width, the search floating
   over it. The list stays out of the way until the count chip opens it;
   full screen pins the map over all. ---- */
/* Never squeezed to a sliver: between the count chip and the full-screen
   button the field keeps at least this width. */
.map-wrap .search-wrap { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 8;
  width: min(560px, calc(100% - 500px)); min-width: 260px; max-width: none; height: 56px; display: flex; align-items: center; gap: 4px;
  padding: 0 10px 0 20px; background: rgba(255, 255, 255, 0.97); border: 1px solid rgba(0, 35, 73, 0.08);
  box-shadow: 0 10px 30px rgba(0, 35, 73, 0.18); }
.map-wrap .search-wrap .dp-qs-icon { color: var(--accent); }
#search { flex: 1; min-width: 0; height: 100%; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--accent);
  font-family: var(--sans); font-size: 15px; }
#search::placeholder { color: #777; }
#search:focus { outline: none; }
.search-wrap .dp-suggest { top: calc(100% + 1px); padding: 14px 16px 4px; }
.search-wrap .dp-sg-item .a { font-size: 16px; }
.dp-scroll { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5;
  padding: 11px 18px; background: var(--accent); color: #fff; text-decoration: none; box-shadow: 0 6px 20px rgba(0, 35, 73, 0.25); }
.dp-full { position: absolute; top: 18px; right: 52px; z-index: 6; padding: 11px 18px; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(0, 35, 73, 0.25); }
.dp-full:hover { background: var(--navy-deep); }
body.map-full { overflow: hidden; }
body.map-full .app { position: fixed; inset: 0; z-index: 200; height: 100vh; height: 100dvh; }
body.map-full .dp-scroll { display: none; }
.dp-chip { display: none; }
.sidebar { background: var(--panel); }
@media (min-width: 861px) {
  .intro { display: none; }
  body:not(.list-open) .sidebar { display: none; }
  body.list-open .sidebar { position: absolute; top: 128px; left: 12px; bottom: 12px; width: 330px; z-index: 7;
    border: 1px solid var(--border); box-shadow: 0 12px 34px rgba(0, 35, 73, 0.22); }
  body.list-open .sidebar .sidebar-header { display: none; }
  /* Under the search's row, so the chip's longest French text and the
     field never meet when the property rail narrows the map. */
  .dp-chip { display: block; position: absolute; top: 86px; left: 12px; z-index: 6; padding: 10px 14px; border: 0; cursor: default;
    background: rgba(255, 255, 255, 0.95); color: var(--text); font-family: inherit; font-size: 11px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.12em; box-shadow: 0 4px 14px rgba(0, 35, 73, 0.15); }
  .dp-chip.live { cursor: pointer; }
  .dp-chip.live:hover { background: #fff; box-shadow: 0 4px 18px rgba(0, 35, 73, 0.25); }
}

/* ---- The property panel, folded: each block under the two figures shows
   its title and key line; "Details" opens the rest. "Reserve my spot"
   comes first, under the figures (by order, so app.js keeps its slots). ---- */
.headline { display: flex; flex-direction: column; }
.headline > .hl-pair { order: -2; }
/* The reminder used to be pulled above the verdict (order: -1). Since the
   simplification of 2026-10-29 the question the page answers comes first
   and the reminder follows it, in document order. */
.headline .hl.dp-fold { position: relative; padding-right: 92px; }
/* One unbroken compound: whitespace between these :not()s would be a
   descendant combinator, and the rule would match nothing. */
.headline .hl.dp-fold:not(.dp-open) > :not(.hl-label):not(.hl-window-title):not(.hl-paywall-head):not(.hl-figure):not(.hl-figure-sm):not(.hl-figure-muted):not(.hl-band):not(.hl-paywall-btn):not(.hl-reveal):not(.dp-fold-toggle):not(.hl-remind-row):not(.hl-remind-status):not(.hl-remind-privacy):not(.dp-why) { display: none; }
/* Folded, the $5 offer still says what it is (its heading), what the figure
   is not, what buying it reserves and credits, and who is behind it -- only
   its description waits behind "Details". The heading was folded away until
   2026-10-13, which left the deadline paragraph as the only text above the
   button. */
.headline .hl.dp-fold:not(.dp-open) .hl-reveal > :not(.hl-paywall-copy):not(.hl-paywall-btn):not(.hl-reveal-isnot):not(.hl-note):not(.hl-paywall-trust) { display: none; }
.headline .hl.dp-fold:not(.dp-open) .hl-reveal { margin-top: 10px; padding: 0; border: 0; background: none; }
.headline .hl.dp-fold:not(.dp-open) .hl-reveal .hl-reveal-isnot,
.headline .hl.dp-fold:not(.dp-open) .hl-reveal .hl-note,
.headline .hl.dp-fold:not(.dp-open) .hl-reveal .hl-paywall-trust { margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: var(--text-dim); }
.headline .hl.dp-fold:not(.dp-open) .hl-remind-privacy { margin: 6px 0 0; font-size: 10.5px; line-height: 1.45; color: var(--text-dim); }
.headline .hl.dp-fold:not(.dp-open) .hl-remind-status:empty { display: none; }
.headline .hl.dp-fold.dp-open { padding-right: 14px; }
.headline .hl.dp-fold.dp-open > .hl-label, .headline .hl.dp-fold.dp-open > .hl-window-title { padding-right: 80px; }
.dp-fold-toggle { position: absolute; top: 12px; right: 12px; padding: 4px 10px; border: 1px solid var(--border); background: var(--panel);
  color: var(--gold); font: inherit; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; }
.dp-fold-toggle:hover { border-color: var(--gold); }
.dp-why { margin: 2px 0 8px; font-size: 12px; line-height: 1.5; color: var(--text-dim); }

/* ---- The sections below the map: white, wide-set, each opened by a
   gold eyebrow, a serif heading and one short paragraph ---- */
.dp { font-family: var(--sans); color: var(--text); }
.dp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.dp section { padding: 104px 0; }
.dp h2 { margin: 0 0 20px; font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1.1; letter-spacing: 0.005em; color: var(--accent); }
.dp .lede { max-width: 640px; margin: 0; font-size: 16.5px; font-weight: 300; line-height: 1.75; color: var(--text-dim); }

/* How it works: three numbered columns, centred. */
.dp-how { background: #fff; }
.dp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 64px; text-align: center; }
.dp-step { padding: 0 12px; }
.dp-step .num { display: inline-block; padding-bottom: 14px; border-bottom: 1px solid var(--gold); font-family: var(--serif); font-weight: 400;
  font-size: 44px; line-height: 1; color: var(--gold); }
.dp-step h3 { margin: 22px 0 12px; font-family: var(--serif); font-weight: 400; font-size: 25px; letter-spacing: 0.005em; color: var(--accent); }
.dp-step p { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--text-dim); }

/* Regions: photo tiles where the photo is of the place, type where it is
   not; a slow zoom on hover; each opens the map over the region. */
.dp-regions { background: var(--panel-alt); }
.dp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1240px; margin: 60px auto 0; padding: 0 28px; }
.dp-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 340px; overflow: hidden;
  padding: 0; border: 0; background: linear-gradient(160deg, var(--accent) 0%, var(--navy-deep) 100%); color: #fff; cursor: pointer; font: inherit; text-align: center; }
.dp-tile-img { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; transition: transform 1.4s var(--ease); }
.dp-tile.has-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 23, 49, 0.45); transition: background 0.6s; }
.dp-tile.has-photo:hover .dp-tile-img, .dp-tile.has-photo:focus-visible .dp-tile-img { transform: scale(1.06); }
.dp-tile.has-photo:hover::before { background: rgba(0, 23, 49, 0.32); }
.dp-tile:not(.has-photo)::after { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(194, 155, 64, 0.55); pointer-events: none; transition: inset 0.6s var(--ease); }
.dp-tile:not(.has-photo):hover::after { inset: 11px; }
.dp-tile-name { position: relative; z-index: 2; display: block; padding: 0 24px; font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.1;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35); }
.dp-tile-go { position: relative; z-index: 2; display: block; margin-top: 16px; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold);
  opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.dp-tile:hover .dp-tile-go, .dp-tile:focus-visible .dp-tile-go { opacity: 1; transform: none; }
.dp-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dp-tile-cap { position: absolute; right: 14px; bottom: 10px; z-index: 2; font-size: 10px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.65); }
@media (hover: none) { .dp-tile-go { opacity: 1; transform: none; } }

/* The data: the words on white, then the figures over a fixed photograph. */
.dp .dp-about { padding-bottom: 0; background: #fff; }
.dp-about-inner { max-width: 820px; margin-bottom: 80px; }
.dp-band { position: relative; padding: 110px 0 90px; color: #fff; background: var(--accent); }
.dp-band::before { content: none; }
.dp-band > * { position: relative; }
@media (pointer: coarse) { .dp-band { background-attachment: scroll; } }
.dp-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin: 0; text-align: center; }
.dp-fact { padding: 0 16px; border-left: 1px solid rgba(194, 155, 64, 0.45); }
.dp-fact:first-child { border-left: 0; }
.dp-fact .big { font-family: var(--serif); font-weight: 400; font-size: 66px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.dp-fact .small { margin-top: 14px; font-size: 11.5px; line-height: 1.6; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.dp-band-source { margin: 56px auto 0; text-align: center; font-size: 12px; font-weight: 300; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.6); }
.dp-band-cap { position: absolute; right: 20px; bottom: 12px; font-size: 10.5px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.5); }

/* Pricing: three cards, the paid two with their boxes. */
.dp-pricing { text-align: center; background: #fff; }
.dp-pricing .dp-wrap { max-width: 1240px; }
.dp-pricing .lede { margin: 0 auto; }
.dp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1180px; margin: 64px auto 0; text-align: left; }
.dp-card { display: flex; flex-direction: column; padding: 44px 34px 36px; background: var(--panel); border: 1px solid var(--border); }
.dp-card.free { background: var(--panel-alt); }
.dp-card.dark { background: var(--accent); border-color: var(--accent); color: #fff; }
.dp-card .dp-eyebrow { margin-bottom: 14px; }
.dp-card .price { margin: 6px 0; font-family: var(--serif); font-weight: 400; font-size: 56px; line-height: 1; color: var(--accent); }
.dp-card.dark .price { color: #fff; }
.dp-card .per { margin-bottom: 22px; font-size: 13px; color: var(--text-dim); }
.dp-card .desc { margin: 0 0 22px; font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--text-dim); }
.dp-card.dark .per { color: rgba(255, 255, 255, 0.75); }
.dp-card.dark .desc, .dp-card.dark li { color: rgba(255, 255, 255, 0.8); }
.dp-card ul { flex: 1; margin: 0 0 30px; padding: 0; list-style: none; }
.dp-card:not(.dark) ul { margin-bottom: 24px; }
.dp-card li { position: relative; margin-bottom: 12px; padding-left: 26px; font-size: 14.5px; line-height: 1.55; color: var(--text-dim); }
.dp-card li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); }
.dp-card .fine { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); text-align: center; }
.dp-card.dark .fine { color: rgba(255, 255, 255, 0.75); }
.dp-later { margin: -12px 0 18px; font-size: 13px; line-height: 1.5; color: #e2c98f; }

/* The forms inside the $15 and $49 cards. */
.dp-rs-lead { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.dp-rs-addr { position: relative; margin-bottom: 10px; }
.dp-card-form input { width: 100%; height: 54px; padding: 0 16px; border-radius: 0; font: inherit; font-size: 16px; outline: none; }
.dp-card-form input:focus { border-color: var(--gold); }
.dp-rs-picked { margin-bottom: 10px; font-family: var(--serif); font-size: 20px; }
.dp-rs-picked button { margin-left: 6px; padding: 0 0 2px; border: 0; border-bottom: 1px solid var(--gold); background: none; color: var(--gold);
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.dp-rs-row { display: flex; flex-direction: column; gap: 10px; }
.dp-rs-row button, .dp-rv-pay { width: 100%; height: 54px; border: 0; cursor: pointer; font-size: 12px; }
.dp-rs-row button:disabled, .dp-rv-pay:disabled { opacity: 0.45; cursor: default; }
.dp-rs-status { margin: 10px 0 0; font-size: 13px; line-height: 1.5; }
.dp-rs-status:empty, .dp-rs-consent:empty { display: none; }
.dp-rs-consent { margin: 8px 0 0; font-size: 11px; line-height: 1.5; }
/* $15: on white. */
.dp-reveal-form { margin-top: auto; padding: 22px; border: 1px solid var(--border); background: var(--panel-alt); }
.dp-reveal-form .dp-rs-lead, .dp-reveal-form .dp-rs-picked, .dp-reveal-form .dp-rs-status { color: var(--accent); }
.dp-reveal-form input { border: 1px solid #c9c3b6; background: #fff; color: var(--accent); }
.dp-reveal-form .dp-rs-status a { color: #a8842f; }
.dp-rv-band { margin: 4px 0 12px; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--accent); }
.dp-rv-band.more { color: #8c2f1c; }
.dp-rv-pay { display: block; background: var(--accent); color: #fff; }
.dp-rv-pay:not(:disabled):hover { background: var(--navy-deep); }
.dp-rv-note { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: var(--text-dim); }
/* $49: on navy, and plain that it is free today. */
.dp-reserve { margin: 4px 0 28px; padding: 22px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(194, 155, 64, 0.55); }
.dp-reserve .dp-rs-lead, .dp-reserve .dp-rs-picked, .dp-reserve .dp-rs-status { color: #fff; }
.dp-reserve input { border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.06); color: #fff; }
.dp-reserve input::placeholder { color: rgba(255, 255, 255, 0.55); }
.dp-reserve .dp-rs-row button { background: var(--gold); color: #fff; }
.dp-reserve .dp-rs-row button:not(:disabled):hover { background: #a8842f; }
.dp-reserve .dp-rs-status a { color: var(--gold); }
.dp-reserve .dp-rs-consent { color: rgba(255, 255, 255, 0.6); }
.dp-free-tag { display: inline-block; margin-bottom: 12px; padding: 5px 10px; background: var(--gold); color: #fff;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.dp-nocard { margin: 10px 0 0; font-size: 12.5px; text-align: center; color: rgba(255, 255, 255, 0.85); }

/* Questions. */
.dp-faq { max-width: 820px; margin: 0 auto; }
.dp-faq .dp-eyebrow { text-align: center; }
.dp-faq h2 { margin-bottom: 44px; text-align: center; }
.dp-faq details { padding: 24px 0; border-top: 1px solid var(--border); }
.dp-faq details:last-of-type { border-bottom: 1px solid var(--border); }
.dp-faq summary { display: flex; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--accent); }
.dp-faq summary::-webkit-details-marker { display: none; }
.dp-faq summary::after { content: "+"; color: var(--gold); font-size: 22px; line-height: 1; }
.dp-faq details[open] summary::after { content: "×"; }
.dp-faq details p { margin: 16px 0 0; font-size: 15.5px; font-weight: 300; line-height: 1.75; color: var(--text-dim); }

/* As heard on: the two stations, side by side. */
.dp .dp-press { padding: 96px 0; background: var(--panel-alt); border-top: 0; }
.dp-press-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 52px; text-align: left; }
.dp-press-card { display: flex; flex-direction: column; gap: 14px; padding: 40px 38px; border: 1px solid var(--border); background: #fff;
  color: var(--text); text-decoration: none; transition: box-shadow 0.3s, border-color 0.3s; }
.dp-press-card:hover { border-color: var(--gold); box-shadow: 0 16px 40px rgba(0, 35, 73, 0.1); }
.dp-press-name { display: block; font-family: var(--serif); font-weight: 400; font-size: 34px; color: var(--accent); }
.dp-press-meta { display: block; margin-top: 6px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.dp-press-title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 21px; line-height: 1.35; color: var(--accent); }
.dp-press-sub { font-size: 14px; font-weight: 300; color: var(--text-dim); }
.dp-press-cta { align-self: flex-start; margin-top: auto; padding: 14px 26px; border: 1px solid var(--accent); color: var(--accent); white-space: nowrap; transition: background 0.3s, color 0.3s; }
.dp-press-card:hover .dp-press-cta { background: var(--accent); color: #fff; }

/* The team, on deep navy. */
.dp .dp-team { padding: 96px 0; background: var(--navy-deep); color: #fff; }
.dp-team h2 { margin: 0; color: #fff; }
.dp-people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 860px; margin: 52px auto 0; }
.dp-person { padding: 22px 0 0; border-top: 1px solid rgba(194, 155, 64, 0.5); }
.dp-person-name { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: 0.01em; color: #fff; text-decoration: none; }
a.dp-person-name { margin-top: 6px; font-family: var(--sans); font-size: 15px; font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
.dp-person-role { margin-top: 8px; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }

/* ---- Narrower screens ---- */
/* "Check my home" repeats the hero's field; below this width it gives its
   room to the brand. Under 860 px the nav goes and it comes back. */
@media (min-width: 861px) and (max-width: 1200px) { .dp-cta { display: none; } }
@media (max-width: 1200px) { .dp-nav { gap: 20px; } .dp-nav a { letter-spacing: 0.14em; font-size: 11px; } .topbar { padding: 0 24px; } }
@media (max-width: 1100px) {
  .dp-cards { grid-template-columns: 1fr; max-width: 560px; }
  .dp-tiles { grid-template-columns: repeat(2, 1fr); }
  .dp-qs-title { font-size: 48px; }
  .dp-hero-text { padding-right: 36px; }
}
@media (max-width: 860px) {
  :root { --hdr: 60px; }
  .topbar { height: var(--hdr); padding: 0 16px; gap: 10px; flex-wrap: nowrap; }
  .topbar > * { flex: 0 0 auto; }
  .brand { order: 0; justify-content: flex-start; margin-right: auto; }
  .brand-name { font-size: 24px; }
  .dp-nav, .brand-tagline { display: none; }
  .dp-top-right { order: 1; gap: 8px; }
  .lang-toggle { padding: 8px 9px; font-size: 10px; letter-spacing: 0.1em; }
  .dp-cta { padding: 9px 11px; font-size: 10px; letter-spacing: 0.1em; }
  /* The photo moves under the words, as a shorter arch. */
  .dp-hero { display: block; min-height: 0; }
  .dp-hero-text { padding: calc(var(--hdr) + 28px) 18px 44px; }
  .dp-qs-eyebrow { margin-bottom: 16px; font-size: 10px; }
  .dp-qs-title { font-size: 38px; margin-bottom: 16px; }
  .dp-qs-lede { font-size: 15px; margin-bottom: 24px; }
  .dp-qs-field { height: 54px; padding: 0 4px 0 14px; }
  .dp-qs-field input { font-size: 16px; padding: 0 8px 0 10px; }
  .dp-show-actions { gap: 14px 22px; margin-top: 22px; }
  .dp-btn.ghost { padding: 13px 24px; }
  .dp-qs-fine { margin-top: 22px; font-size: 11px; }
  .dp-scroll-cue { display: none; }
  .dp-hero-photo { padding: 44px 34px 40px; }
  .dp-arch-wrap { width: min(100%, 300px); }
  .dp-arch { aspect-ratio: 1 / 1; min-height: 0; max-height: none; }
  .dp-arch-wrap::before { inset: -12px; }
  .dp-hero-cap { margin-top: 28px; }
  .dp-joke-line { font-size: 17px; }
  .dp-slide-cap { position: static; display: block; margin-top: 18px; }
  /* The search sits on the map's top edge; while the phone's card holds
     the search there is exactly one box to type in. */
  .map-wrap .search-wrap { top: 12px; left: 12px; right: 12px; width: auto; min-width: 0; transform: none; height: 50px; padding: 0 6px 0 14px; }
  body.intro-open .map-wrap .search-wrap { display: none; }
  .sidebar.intro-gone { top: 72px; }
  .dp-full { top: auto; bottom: 44px; right: 12px; }
  .dp-scroll { display: none; }
  /* The card over the map is the phone's search: the box and Check only. */
  .sidebar { width: auto; }
  .intro { padding: 8px; }
  .intro .dp-eyebrow, .intro-headline, .intro-body, .intro-free, .intro-hint, .intro-prompt { display: none; }
  .intro-search { margin: 0; }
  .maplibregl-ctrl-top-right { top: 74px; }
  .dp section { padding: 72px 0; }
  .dp h2 { font-size: 32px; }
  .dp-wrap { padding: 0 16px; }
  .dp-steps, .dp-cards { grid-template-columns: 1fr; gap: 40px; }
  .dp-cards { gap: 20px; }
  .dp-card { padding: 32px 26px; }
  .dp-tiles { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; padding: 0 16px; }
  .dp-tile { height: 210px; }
  .dp-tile-name { font-size: 30px; }
  .dp-about-inner { margin-bottom: 56px; }
  .dp-band { padding: 72px 0 64px; }
  .dp-facts { grid-template-columns: 1fr 1fr; gap: 36px 12px; }
  .dp-fact { padding: 0; border-left: 0; }
  .dp-fact .big { font-size: 44px; }
  .dp-band-source { margin-top: 40px; }
  .dp-band-cap { position: static; display: block; margin-top: 10px; text-align: center; }
  .dp .dp-press, .dp .dp-team { padding: 72px 0; }
  .dp-press-list { grid-template-columns: 1fr; }
  .dp-press-card { padding: 28px 22px; }
  .dp-press-name { font-size: 28px; }
  .dp-people { grid-template-columns: 1fr; gap: 20px; }
}

/* ---- The map's loading bar (2026-10-14): shown by showTileProgress() in
   app.js while squares of dots are still on their way. ---- */
.map-progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 5;
  overflow: hidden; pointer-events: none; background: rgba(0, 35, 73, 0.12); }
.map-progress[hidden] { display: none; }
.map-progress::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%;
  background: var(--gold, #c29b40); animation: map-progress 1.1s ease-in-out infinite; }
@keyframes map-progress { from { left: -30%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .map-progress::after { animation: none; left: 0; width: 100%; opacity: 0.6; } }

/* The three checks under the verdict: the basin the peers came from, the
   repriced band, the revaluation gap and the land rate, then the stake. */
.hl-tests { margin: 10px 0 4px; padding: 10px 12px; background: var(--panel-alt); border-radius: 6px; }
.hl-tests .hl-label { margin-bottom: 4px; }
.hl-test { font-size: var(--text-sm); line-height: 1.45; padding: 3px 0; border-top: 1px dashed var(--border); }
.hl-test:first-of-type { border-top: 0; }
.hl-stake { font-weight: 500; }

/* Paid broker ad (2026-11-05). Set apart as an object of its own, labelled,
   quieter than the owner's figures above it. */
.hl-ad { border: 1px solid var(--border); background: var(--panel-alt); padding: 12px 14px; margin-top: 10px; }
.hl-ad-tag { display: inline-block; font-size: 10px; letter-spacing: 1.4px; font-weight: 700; text-transform: uppercase;
  color: var(--text-dim); border: 1px solid var(--border); border-radius: 3px; padding: 1px 6px; }
.hl-ad-q { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 6px 0 8px; color: var(--text); }
.hl-ad-who { display: flex; gap: 10px; align-items: center; }
.hl-ad-face { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; }
.hl-ad-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-weight: 700; font-size: 15px; }
.hl-ad-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hl-ad-logo { display: block; max-height: 46px; max-width: 120px; margin-top: 7px; }
.hl-ad-text { min-width: 0; }
.hl-ad-name { font-weight: 700; font-size: 14px; line-height: 1.25; }
.hl-ad-meta { font-size: 11.5px; color: var(--text-dim); line-height: 1.35; }
.hl-ad-line { font-size: 12.5px; margin-top: 7px; }
.hl-ad-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.hl-ad-btn { flex: 1 1 auto; text-align: center; padding: 8px 10px; font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.hl-ad-main { background: var(--accent); color: #fff; }
.hl-ad-alt { border: 1px solid var(--accent); color: var(--accent); background: var(--panel); }
.hl-ad-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hl-ad-fine { font-size: 10px; color: var(--text-dim); line-height: 1.35; margin-top: 8px; }

/* ---- Hero on white (Max, 2026-11-08): no photo and no navy behind the
   words. The header is solid navy from the start, since there is no
   photograph for it to sit on. ---- */
/* The header is white like the page (Max, 2026-11-08): the name and the
   menu in navy on it, a hairline under it, the same before and after the
   page scrolls. */
.topbar, .topbar.scrolled { background: #fff; color: var(--accent); box-shadow: 0 1px 0 var(--border); border-bottom: 0; }
.topbar .brand-name { color: var(--accent); }
.topbar .brand-name .gold { color: var(--gold); }
.topbar .dp-nav a { color: var(--accent); }
.topbar .dp-nav a:hover { color: var(--gold); }
.topbar .lang-toggle { color: var(--accent); border-color: var(--accent); }
.topbar .lang-toggle:hover { color: var(--gold); border-color: var(--gold); }
.topbar .dp-cta { color: var(--accent); border-color: var(--accent); }
.topbar .dp-cta:hover { background: var(--accent); color: #fff; }
.topbar .search-wrap input { background: var(--paper); color: var(--text); border: 1px solid var(--border); }
.topbar .search-wrap input::placeholder { color: var(--text-dim); }
.dp-hero, .dp-hero-text, .dp-hero .dp-qs { background: #fff; color: var(--text); min-height: 0; }
.dp-hero { padding: calc(var(--hdr) + 72px) 0 64px; }
.dp-hero .dp-qs-inner { margin: 0 auto; text-align: center; max-width: 880px; }
.dp-hero .dp-qs-title { color: var(--accent); }
.dp-hero .dp-qs-lede { color: var(--text-dim); margin-left: auto; margin-right: auto; max-width: 640px; }
.dp-hero .dp-qs-field { border-bottom-color: var(--accent); margin: 0 auto; max-width: 640px; }
.dp-hero .dp-qs-field input { color: var(--accent); }
.dp-hero .dp-qs-field input::placeholder { color: #8a8a8a; }
.dp-hero .dp-qs-icon, .dp-hero .dp-qs-go { color: var(--accent); }
.dp-hero .dp-show-actions { justify-content: center; }
.dp-hero .dp-btn.ghost { border-color: var(--accent); color: var(--accent); }
.dp-hero .dp-btn.ghost:hover { background: var(--accent); color: #fff; }
.dp-hero .dp-act { color: var(--accent); }
.dp-hero .dp-qs-fine { color: var(--text-dim); margin-left: auto; margin-right: auto; }
.dp-hero .dp-scroll-cue { display: none; }
.dp-photo-band { position: relative; height: 62vh; min-height: 360px; background: center / cover no-repeat; }
.dp-photo-band-credit { position: absolute; right: 18px; bottom: 12px; font: 500 10.5px var(--sans); letter-spacing: .06em; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }

/* ---- The province page is the tool: a strip above a full-height map ---- */
.dp-hero { padding: calc(var(--hdr) + 40px) 0 30px; }
.dp-hero .dp-qs-title { font-size: 34px; margin-bottom: 18px; }
.dp-hero .dp-qs-eyebrow { margin-bottom: 10px; }
.dp-hero .dp-show-actions { margin-top: 14px; }
.app { height: calc(100vh - var(--hdr)); height: calc(100svh - var(--hdr)); }

/* One search box in view, not two: the strip keeps the province, the
   question and "near me"; the box floating on the map is the search.
   The strip's form stays in the markup for app.js, unseen. The "how it
   works" cue on the map points at a section this page no longer has. */
.dp-hero .dp-qs-field { display: none; }
.dp-hero .dp-show-actions { margin-top: 0; }
.dp-scroll { display: none; }

/* The property's facts, rendered by the server on /p/<id> (seo.py) so a
   search engine and a reader without JavaScript see the same page. Visible
   to everyone below the map, never hidden: text shown only to a crawler is
   what search engines punish. */
.seo-fiche { max-width: 900px; margin: 0 auto; padding: 32px 20px 40px;
  color: var(--text); line-height: 1.6; }
.seo-fiche h1 { font-family: var(--serif, "Playfair Display", Georgia, serif);
  font-size: 1.6rem; margin: .4rem 0 .6rem; color: var(--text); }
.seo-fiche h2 { font-family: var(--serif, "Playfair Display", Georgia, serif);
  font-size: 1.15rem; margin: 1.6rem 0 .4rem; color: var(--text); }
.seo-fiche p { max-width: 70ch; }
.seo-fiche .crumbs, .seo-fiche .small { font-size: .82rem; color: var(--text-dim); }
.seo-fiche .crumbs a, .seo-fiche .small a { color: var(--text-dim); }
.seo-fiche .seo-facts { display: grid; grid-template-columns: max-content 1fr;
  gap: 4px 18px; margin: 1rem 0; }
.seo-fiche .seo-facts dt { color: var(--text-dim); }
.seo-fiche .seo-facts dd { margin: 0; }
.seo-fiche .tbl { overflow-x: auto; }
.seo-fiche table { border-collapse: collapse; min-width: 280px; }
.seo-fiche th, .seo-fiche td { text-align: left; padding: 4px 14px 4px 0;
  border-bottom: 1px solid var(--border); }
.seo-fiche td.n { text-align: right; font-variant-numeric: tabular-nums; }

/* The home file (home_file.py): plain sections of one-sentence facts, each
   with its source and a "report an error" link. No stat boxes, no caps
   labels: a reader should see sentences, not a dashboard. */
.seo-fiche .hf-three { border-left: 3px solid var(--border); padding: 4px 0 4px 16px;
  margin: 1rem 0 1.4rem; }
.seo-fiche .hf-three h2 { margin-top: 0; font-size: 1.05rem; }
.seo-fiche .hf-three ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.seo-fiche .hf-three li { margin: .25rem 0; }
.seo-fiche .hf-facts { list-style: none; padding: 0; margin: .4rem 0 1rem; }
.seo-fiche .hf-fact { margin: 0 0 .7rem; max-width: 70ch; }
.seo-fiche .hf-src { display: block; font-size: .78rem; color: var(--text-dim); }
.seo-fiche .hf-src a { color: var(--text-dim); }
.seo-fiche .hf-sponsor { font-size: .85rem; color: var(--text-dim); margin: .2rem 0 1rem;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; }
.seo-fiche .hf-sponsor-label { font-size: .75rem; }
.seo-fiche .hf-tools form { margin: .5rem 0; }
.seo-fiche .hf-tools input[type=email] { padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 6px; min-width: 240px; max-width: 100%; }
.seo-fiche .hf-tools button { padding: 8px 14px; border: 0; border-radius: 6px;
  background: var(--text); color: var(--bg, #fff); cursor: pointer; }
.seo-fiche .hf-hp { position: absolute; left: -9999px; }
.hf-panel-link { display: inline-block; margin-top: 10px; font-size: .9rem; }

/* ---- The map on top, the house under it (approach A, 2026-11-11) ---------
   A dot or a result opens the house right under the map (#house, built by
   the server: crumbs, H1, "worth knowing", the verdict block, the file).
   body.house-mode = a /p/<id> page opened directly: the same page, the
   house already under the map. No rail, no sheet. */
/* A /p/<id> page is the front page itself with that house under the map
   (Max: "I still want the page to seem the same as before"): no hidden
   hero, no shorter map. app.js scrolls down to the house on arrival. */

.house { max-width: 900px; margin: 0 auto; padding: 8px 20px 24px; scroll-margin-top: calc(var(--hdr, 68px) + 16px); }
@media (max-width: 430px) { .house { padding: 4px 16px 16px; } }
.house .seo-fiche { padding-left: 0; padding-right: 0; }
.house .seo-fiche.hf-head { padding-top: 24px; padding-bottom: 0; }
.house .seo-fiche.hf-body { padding-top: 8px; }

/* The verdict block (the old panel) in the house, in the page flow. */
/* The verdict block (the panel, once a side rail and a phone sheet) is a
   plain block of the house. */
.detail-panel { touch-action: pan-y; }
.house .detail-panel[hidden] { display: none; }
.house .detail-address, .house .detail-neighborhood,
.house #blockFacts, .house #breakdownSection, .house #sizeSection,
.house #charSection, .house #zoningSection, .house #trendSection { display: none !important; }


/* The house's closed headings (home_file.folded_body) use the verdict
   block's own folded rows (details.sec); only the heading needs resetting,
   since here it is a real <h2> for a crawler. */
.house .hf-fold .sec-title { margin: 0; font-family: inherit; line-height: inherit; }
.house .hf-fold .sec-body { padding-top: 4px; }
.house .hf-fold .hf-note { color: #9a3b1f; font-weight: 600; }
.house .seo-fiche.hf-body > .hf-fold:first-child { margin-top: 12px; }
/* One size for every heading in the house, wrapping rather than cut off. */
.house .hf-fold .sec-title { font-size: var(--text-sm); font-weight: 700; color: var(--text-dim); white-space: normal; }
.house .hf-fold .sec-summary { white-space: nowrap; }
.house .hf-q { font-weight: 600; margin: 4px 0 8px; }
.house .detail-more-label { display: none; }
.house #gapsContainer .section-title { display: none; }
/* In the house the reminder's button label is wide; let the row wrap so the
   email field keeps a usable width instead of shrinking to a sliver. */
.house .hl-remind-row { flex-wrap: wrap; }
.house .hl-remind-input { flex: 1 1 220px; min-width: 200px; }
/* In the house the blocks are page-wide: the room for the "Details +"
   button is kept on the first line only, not as a strip down the whole
   block (a leftover of the 420px side panel). */
.house .headline .hl.dp-fold { padding-right: 18px; }
.house .headline .hl.dp-fold > :first-child { padding-right: 110px; }

/* ---- NS / NB: the mark links to the homepage, the three sites under it
   (atlantic.py brand_block, 2026-11-14). Quebec's page has neither. ---- */
.brand:has(.atl-switch) { flex-direction: column; gap: 2px; }
.brand-link { text-decoration: none; }
.atl-switch { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: #8a8f98; }
.atl-switch a { color: inherit; text-decoration: none; }
.atl-switch a:hover { color: var(--accent); }
.atl-switch a[aria-current="page"] { color: var(--gold); }
@media (max-width: 430px) { .atl-switch { font-size: 9px; letter-spacing: 0.08em; } }