@font-face { font-family:"Inter"; src:url("/static/inter-var.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
/* Design tokens: sage palette (B3, #78). Dark values apply automatically via prefers-color-scheme. */
:root { --fg:#18241d; --muted:#5d695f; --line:rgb(30 50 35/.12); --accent:#3d6b4e; --accent2:#c98a5b; --accent-fg:#fff; --bg:#f4f5ee; --surface:#fdfdf9; --soft:#e8eedf; --field:#c9d1c3; --hover:#eaf0e3; --glow:rgb(61 107 78/.26); --up:#2f7a4d; --down:#b42318; --r:18px; --pin:#b4532f;
  --sh:0 1px 1px rgb(30 50 35/.04),0 2px 4px rgb(30 50 35/.04),0 12px 32px -8px rgb(40 70 50/.16);
  --font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color-scheme:light; }
@media (prefers-color-scheme: dark) { :root { --fg:#ecf1e8; --muted:#9cab9f; --line:rgb(255 255 255/.1); --accent:#9cc7a7; --accent2:#e0a77a; --accent-fg:#0c130f; --bg:#0c130f; --surface:#141d17; --soft:#1e2b22; --field:#34443a; --hover:#1b2820; --glow:rgb(156 199 167/.22); --up:#86d19c; --down:#f0877c; --pin:#e08a63;
  --sh:0 1px 0 rgb(255 255 255/.04) inset,0 16px 40px -12px rgb(0 0 0/.6); color-scheme:dark; } }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
img, svg, video { max-width:100%; }
body { margin:0; font:16px/1.55 var(--font); font-feature-settings:"tnum" 1,"ss01" 1; -webkit-font-smoothing:antialiased; color:var(--fg); background:var(--bg); }
body::before { content:""; position:absolute; inset:0 0 auto; height:560px; z-index:-1; pointer-events:none; background:radial-gradient(520px 320px at 12% 0,rgb(140 178 140/.30),transparent 70%),radial-gradient(480px 300px at 88% 8%,rgb(232 190 140/.26),transparent 70%); }
@media (prefers-color-scheme: dark) { body::before { background:radial-gradient(520px 340px at 12% 0,rgb(90 150 105/.26),transparent 70%),radial-gradient(480px 300px at 88% 8%,rgb(200 140 90/.14),transparent 70%); } }
main { max-width:960px; margin:0 auto; padding:0 16px 48px; }
a { color:var(--accent); text-underline-offset:3px; }
.top { position:sticky; top:10px; z-index:5; margin:10px auto 0; max-width:960px; width:calc(100% - 20px); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 10px 8px 16px; border-radius:99px; background:color-mix(in srgb,var(--surface) 74%,transparent); -webkit-backdrop-filter:blur(16px) saturate(1.6); backdrop-filter:blur(16px) saturate(1.6); border:1px solid var(--line); box-shadow:var(--sh); }
.top nav { display:flex; flex-wrap:wrap; gap:2px; }
.top nav a { color:var(--muted); font-size:.92rem; padding:6px 12px; border-radius:99px; text-decoration:none; }
.top nav a:hover { background:var(--soft); color:var(--fg); }
.brand { display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-.03em; text-decoration:none; color:var(--fg); }
.brand img { width:28px; height:28px; border-radius:9px; box-shadow:0 4px 14px var(--glow); }
.tag { font-weight:400; font-size:12px; color:var(--muted); margin-left:6px; }
.hero { padding:32px 0 8px; }
h1 { letter-spacing:-.04em; line-height:1.08; }
h2, h3 { letter-spacing:-.02em; }
.hero h1 { font-size:2rem; margin:0 0 4px; }
.search { display:flex; gap:8px; max-width:480px; }
.search input, .est-form input, .est-form select { padding:10px; font-size:16px; border:1px solid var(--field); border-radius:12px; background:var(--surface); color:var(--fg); font-family:inherit; }
.search input { flex:1; }
button, .btn { font-family:inherit; font-weight:650; background:linear-gradient(140deg,var(--accent),color-mix(in srgb,var(--accent) 70%,var(--accent2))); color:var(--accent-fg); border:0; border-radius:99px; padding:10px 20px; font-size:16px; cursor:pointer; text-decoration:none; display:inline-block; box-shadow:0 6px 18px -4px var(--glow),inset 0 1px 0 rgb(255 255 255/.25); transition:transform .15s,box-shadow .15s; }
button:hover, .btn:hover { transform:translateY(-1px); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:20px 0; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--sh); }
.card .k { font-size:1.6rem; font-weight:780; letter-spacing:-.03em; }
.card .l { color:var(--muted); font-size:.9rem; }
table.sales { width:100%; border-collapse:collapse; font-size:.95rem; background:var(--surface); border-radius:var(--r); overflow:hidden; }
.sales tbody tr:hover { background:var(--hover); }
.sales th { font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.sales th, .sales td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.num { text-align:right !important; white-space:nowrap; }
th.num { white-space:normal; }
.sales td.date { white-space:nowrap; }
.sales td { overflow-wrap:anywhere; }
.muted { color:var(--muted); } .small { font-size:.85rem; }
.crumbs { color:var(--muted); font-size:.9rem; margin-top:16px; }
.cols { columns:3 220px; padding-left:18px; }
.chart { width:100%; height:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); margin:12px 0; }
.chart text { font-size:11px; fill:var(--muted); }
.chart .grid { stroke:var(--line); }
.chart .dots { fill:none; stroke-opacity:.45; stroke-width:8; stroke-linecap:round; animation:fade .6s ease-out both; }
.chart .tl { fill:none; stroke-width:2.5; stroke-linejoin:round; stroke-dasharray:1; animation:draw 1.2s ease-out .2s both; }
.chart:focus { outline:2px solid var(--accent); outline-offset:2px; }
.chart .ring { fill:none; stroke-width:2.5; }
/* One colour per property type, everywhere (validated as a set for colour-blind separation). */
.tD { --c:#2a78d6; stroke:var(--c); } .tS { --c:#eb6834; stroke:var(--c); } .tT { --c:#1baf7a; stroke:var(--c); } .tF { --c:#4a3aa7; stroke:var(--c); }
.pchart { position:relative; margin:12px 0; }
.pchart .chart { margin:4px 0; touch-action:manipulation; }
.pchart figcaption { margin:0; }
.legend { list-style:none; display:flex; flex-wrap:wrap; gap:4px 16px; margin:0; padding:0; font-size:.9rem; }
.legend i, .tip i { display:inline-block; width:16px; height:0; border-top:3px solid var(--c); border-radius:2px; vertical-align:middle; margin-right:6px; }
.tip { position:absolute; z-index:3; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 4px 16px rgba(0,0,0,.18); padding:6px 10px; font-size:.85rem; line-height:1.35; max-width:260px; pointer-events:none; }
.legend i.dot, .tip i.dot { width:9px; height:9px; border:0; border-radius:50%; background:var(--c); opacity:.6; }
.tip strong { font-size:1rem; }
@media (prefers-color-scheme: dark) { .tD { --c:#5b9bf0; } .tS { --c:#f08a5c; } .tT { --c:#3ccf98; } .tF { --c:#9a8cf0; } }
@keyframes draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes fade { from { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .chart .tl, .chart .dots { animation:none; } }
@media (max-width:720px) { .chart text { font-size:17px; } .chart .dots { stroke-width:13; } .chart .tl { stroke-width:4; } .chart .ring { stroke-width:4; r:9px; } .chart text.alt { display:none; } }
.map { height:320px; border-radius:var(--r); border:1px solid var(--line); margin:20px 0; background:var(--soft); color:var(--muted); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.map.tall { height:440px; }
.map.small { height:200px; max-width:420px; }
.est { display:grid; grid-template-columns:280px 1fr; gap:16px; align-items:start; }
.est-form { display:flex; flex-direction:column; gap:10px; }
.est-form label { display:flex; flex-direction:column; font-size:.9rem; color:var(--muted); }
.est-form label:has(input[type=checkbox]) { flex-direction:row; gap:6px; align-items:center; }
.range { font-size:2rem; font-weight:700; }
.bar { position:relative; height:10px; background:var(--line); border-radius:5px; margin:8px 0 4px; }
.bar span { position:absolute; top:0; height:10px; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:5px; }
tr.off td { opacity:.4; text-decoration:line-through; }
footer { border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; padding:16px; max-width:960px; margin:0 auto; }
@media (max-width:720px) { .est { grid-template-columns:1fr; } .sales:not(.stack) td:nth-child(3), .sales:not(.stack) th:nth-child(3) { display:none; } }
.map { position:relative; }
.layer-ctl { position:absolute; top:8px; left:8px; z-index:2; background:var(--surface); color:var(--fg); border:1px solid var(--line); border-radius:12px; padding:6px 10px; font-size:.8rem; display:flex; flex-direction:column; gap:3px; max-width:210px; text-align:left; }
.layer-ctl label { display:flex; gap:6px; align-items:center; cursor:pointer; }
.layer-ctl i { width:12px; height:12px; border-radius:2px; opacity:.7; flex:none; }
.layer-ctl small { color:var(--muted); }
.facts { padding-left:18px; }
.facts li { margin-bottom:8px; }
.panel { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.panel .map { margin:0; height:280px; }
@media (max-width:720px) { .panel { grid-template-columns:1fr; } }

.combo { position:relative; flex:1; }
.combo input { width:100%; box-sizing:border-box; }
.suggest { position:absolute; z-index:5; left:0; right:0; top:100%; margin:2px 0 0; padding:0; list-style:none; background:var(--surface); color:var(--fg); border:1px solid var(--field); border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.18); max-height:320px; overflow:auto; }
.suggest li { padding:9px 10px; cursor:pointer; display:flex; justify-content:space-between; gap:8px; }
.suggest li small { color:var(--muted); white-space:nowrap; }
.suggest li[aria-selected=true], .suggest li:hover { background:var(--hover); }
.insights .card a { display:block; margin-top:8px; font-size:.9rem; }
.insights .k .small { font-weight:400; }
.dir { font-size:1rem; color:var(--muted); } .dir.up { color:var(--up); } .dir.down { color:var(--down); }
.mini { width:100%; border-collapse:collapse; } .mini td { padding:2px 0; } .mini .num { text-align:right; padding-left:8px; }
.footnote { margin-top:24px; }
.legend { display:flex; flex-wrap:wrap; gap:4px 16px; align-items:center; margin:6px 0 0; padding:6px 10px; list-style:none; background:var(--soft); border-radius:99px; color:var(--muted); }
.legend .dot { display:inline-block; width:12px; height:12px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--muted); vertical-align:-2px; }
.legend .dot.on { background:var(--accent); } .legend .dot.off { background:var(--field); }
.legend .pin { display:inline-block; width:12px; height:12px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--pin); }
#est-pick { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
#est-pick label { display:flex; flex-direction:column; font-size:.9rem; color:var(--muted); }
#est-pick select { padding:10px; font-size:16px; border:1px solid var(--field); border-radius:12px; background:var(--surface); color:var(--fg); font-family:inherit; }
.lede { font-size:1.1em; max-width:46em; }
.lead { font-size:1.1rem; }

/* Landing page: hero band (CC0 photo, darkened for text contrast) and card sparklines */
.hero-band { color:#fff; background:
  linear-gradient(180deg,rgba(18,40,26,.55),rgba(18,40,26,.78)),
  url("/static/hero.jpg") center 30%/cover #24432f; margin-top:-62px; padding-top:62px; border-radius:0 0 28px 28px; }
.hero-band .hero { max-width:960px; margin:0 auto; padding:56px 16px 72px; }
.hero-band h1 { font-size:2.4rem; line-height:1.15; }
.hero-band p { max-width:36em; }
.hero-band .search { max-width:560px; }
.hero-band .search { background:var(--surface); padding:6px; border-radius:99px; box-shadow:var(--sh),0 0 0 6px rgb(255 255 255/.14); }
.hero-band .search input { border:0; padding:12px 16px; background:none; }
.hero-band button { padding:12px 24px; }
.hero-band .suggest { color:var(--fg); }
.hero-band .hero-msg { color:#fff; min-height:1.5em; }
.insights { margin-top:-40px; position:relative; }
.insights .card { position:relative; overflow:hidden; }
.insights .card > * { position:relative; }
.insights .card > .spark { position:absolute; left:0; right:0; bottom:0; width:100%; height:55%; opacity:.25; }
.spark polyline { fill:none; stroke:var(--accent); stroke-width:2; vector-effect:non-scaling-stroke; }
.callouts { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:32px 0; }
.callouts h3 { margin:0 0 4px; font-size:1rem; }
.callouts p { margin:0; color:var(--muted); font-size:.95rem; }
.cta { background:var(--soft); border:1px solid var(--line); border-radius:var(--r); padding:4px 16px 12px; margin:24px 0; }
article table { border-collapse:collapse; display:block; max-width:100%; overflow-x:auto; } article th, article td { border:1px solid var(--line); padding:6px 10px; text-align:left; }

/* Responsive rules (see docs/agent/design.md). Phone = up to 720px; check 390px (iPhone 16e) first. */
#est-out { overflow-x:auto; }
@media (max-width:900px) { .tag { display:none; } }
@media (max-width:720px) {
  main { padding:0 14px 40px; }
  /* Header: not sticky on phones (it took a sixth of the screen); brand row, then one scrollable row of links */
  .top { position:relative; top:0; border-radius:22px; padding:8px 8px 6px 12px; row-gap:2px; }
  .top nav { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent); width:calc(100% + 8px); margin:0 -8px 0 -4px; }
  .top nav::-webkit-scrollbar { display:none; }
  .top nav a { padding:9px 10px; white-space:nowrap; }
  .hero-band { margin-top:-95px; padding-top:95px; border-radius:0 0 22px 22px; }
  .hero-band .hero { padding:28px 16px 64px; }
  .hero-band h1 { font-size:2rem; }
  .hero-band button { padding:12px 18px; }
  h1 { font-size:1.75rem; }
  .card { padding:14px; }
  .card .k { font-size:1.3rem; }
  .cards { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
  .insights { grid-template-columns:1fr; }
  .insights .card > .spark { height:40%; }
  .map { height:240px; } .map.tall { height:340px; } .panel .map { height:240px; }
  .range { font-size:1.6rem; }
  .sales th, .sales td { padding:8px; }
  /* Wide tables become one block per row: lead cell first, the rest labelled */
  table.stack, .stack tbody { display:block; }
  .stack thead { display:none; }
  .stack tr { display:flex; flex-wrap:wrap; column-gap:14px; padding:10px 12px; border-bottom:1px solid var(--line); }
  .stack td { flex:1 0 100%; border:0; padding:2px 0; white-space:normal; }
  .stack .lead-cell { font-weight:650; order:-1; }
  .stack td[data-label] { flex:0 1 auto; font-size:.9rem; }
  .stack td[data-label]::before { content:attr(data-label) ": "; color:var(--muted); }
  .stack td[data-label] br { display:none; }
  .stack td[data-label] .muted::before { content:" "; }
}