/* The CMA client presentation (WEL-438). Ported from Desktop/welcome-in-cma-demo/public/cma.css.
   Tokens on :root are a neutral stand-in until the agent's site template supplies them. */
/* In the product these tokens come from the agent's template. Here they are a neutral stand-in. */
:root {
  --ground: #f6f5f2; --surface: #fff; --ink: #1d2327; --muted: #5d676e; --line: #dedbd4; --accent: #24506a;
  --sold: #b3261e; --pending: #b85c00; --active: #0b7a4b; --subject: #1d2327; --adj: #e4eef6;
  --display: "Newsreader", Georgia, serif; --body: "Instrument Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 15px/1.55 var(--body); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.05; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 28px; }
h3 { font-size: 1.2rem; margin-bottom: 8px; }
small { color: var(--muted); font-size: .8em; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 600; color: var(--accent); margin: 0 0 10px; }
.mock-flag { position: fixed; z-index: 50; bottom: 12px; left: 12px; background: #1d2327; color: #fff; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 3px; opacity: .8; }

.bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 24px; padding: 10px clamp(16px, 4vw, 48px); background: var(--surface); border-bottom: 1px solid var(--line); }
.bar-agent { display: flex; align-items: center; gap: 10px; line-height: 1.2; } .bar-agent small { display: block; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar { width: 42px; height: 42px; overflow: hidden; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .85rem; }
.bar nav { display: flex; gap: 18px; margin-left: auto; overflow-x: auto; white-space: nowrap; }
.bar nav a { color: var(--muted); text-decoration: none; font-size: .85rem; } .bar nav a:hover { color: var(--ink); }
.btn { background: var(--ink); color: #fff; text-decoration: none; padding: 9px 16px; border-radius: 3px; font-size: .85rem; font-weight: 500; white-space: nowrap; }
.btn.ghost { background: none; color: var(--ink); border: 1px solid var(--line); cursor: pointer; font-family: inherit; } button.btn { border: 0; cursor: pointer; font-family: inherit; } button.btn.ghost { border: 1px solid var(--line); }
.bar .btn + .btn { margin-left: -12px; }
.pt, .dot[data-comp], .pin[data-comp] { cursor: pointer; } .pt:focus { outline: none; } .pt:focus-visible circle, .pt:hover circle { stroke: var(--ink); }
.homecard { position: fixed; z-index: 60; width: 280px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; box-shadow: 0 14px 40px rgba(20,25,30,.22); pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity .16s ease-out, transform .16s ease-out; }
.homecard.on { opacity: 1; transform: none; }
.homecard img, .homecard-blank { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #e8e6e1; } .homecard-blank { display: grid; place-items: center; color: var(--muted); font-size: .8rem; }
.homecard-body { padding: 12px 14px 14px; } .homecard-body > b { display: block; font: 500 1.1rem/1.25 var(--display); margin-top: 8px; } .homecard-body > small { display: block; }
.homecard-price { margin: 10px 0; } .homecard-price strong { font: 400 1.5rem/1.1 var(--display); font-variant-numeric: tabular-nums; display: block; }
.homecard ul { list-style: none; display: flex; gap: 14px; padding: 10px 0 0; margin: 0; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); } .homecard li b { color: var(--ink); font-weight: 600; }
.present-meter { position: fixed; z-index: 45; right: 16px; bottom: 14px; font-size: .75rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px; font-variant-numeric: tabular-nums; }
.presenting .bar nav, .presenting [data-pdf], .presenting .mock-flag { display: none; } .presenting .bar [data-present] { margin-left: auto; }
.presenting .page { min-height: calc(100vh - 63px); display: flex; flex-direction: column; justify-content: center; max-width: none; padding-inline: max(clamp(16px, 4vw, 48px), calc((100vw - 1180px) / 2)); }
.presenting .page.wide { padding-inline: clamp(16px, 4vw, 48px); justify-content: flex-start; } .presenting .cover { justify-content: flex-end; flex-direction: row; min-height: calc(100vh - 63px); }
.presenting html, html:has(.presenting) { scroll-snap-type: y proximity; } .presenting .page { scroll-snap-align: start; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.page { max-width: 1180px; margin: 0 auto; padding: 72px clamp(16px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.page.wide { max-width: none; }
.cover { max-width: none; min-height: min(78vh, 760px); display: flex; align-items: flex-end; color: #fff; border: 0;
  background: linear-gradient(180deg, rgba(15,20,24,.15) 30%, rgba(15,20,24,.82)), var(--hero, #24506a) center/cover; }
.cover-inner { max-width: 1180px; width: 100%; margin: 0 auto; } .cover .eyebrow { color: #fff; opacity: .85; }
.cover-city { font-size: 1.2rem; margin: 8px 0 36px; opacity: .9; }
.cover dl { display: flex; flex-wrap: wrap; gap: 14px 48px; margin: 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.35); }
.cover dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; opacity: .75; } .cover dd { margin: 2px 0 0; font-size: 1.05rem; }

.property { padding-top: 56px; }
.mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; aspect-ratio: 21/9; margin: 0 calc(-1 * clamp(16px, 4vw, 48px)) 48px; }
.mosaic img { width: 100%; height: 100%; min-height: 0; object-fit: cover; cursor: zoom-in; } .mosaic img:first-child { grid-row: 1 / -1; }
.mosaic[data-count="1"] { grid-template-columns: 1fr; } .mosaic[data-count="2"], .mosaic[data-count="3"] { grid-template-columns: 2fr 1fr; } .mosaic[data-count="2"] img:last-child { grid-row: 1 / -1; }
.mosaic[data-count="4"] img:last-child { grid-column: 2 / -1; }
.prop { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 64px; align-items: start; }
.prop h2 { margin-bottom: 6px; } .prop h3 { font: 600 1rem var(--body); margin: 0 0 10px; }
.prop-city { color: var(--muted); font-size: 1.05rem; margin: 0 0 22px; }
.facts { list-style: none; display: flex; flex-wrap: wrap; padding: 18px 0 0; margin: 0 0 30px; border-top: 1px solid var(--line); }
.facts li { padding: 0 22px; border-left: 1px solid var(--line); text-align: center; } .facts li:first-child { padding-left: 0; border-left: 0; }
.facts span { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 4px; } .facts strong { font: 400 1.15rem var(--body); font-variant-numeric: tabular-nums; }
.spec { margin: 0; } .spec div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.spec dt { font-size: .8rem; font-weight: 600; } .spec dd { margin: 2px 0 0; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.remarks { margin: 0; max-width: 75ch; line-height: 1.7; } .meta { color: var(--muted); font-size: .88rem; margin: 0; }

#leaflet { height: 460px; border: 1px solid var(--line); background: #e8e6e1; z-index: 0; }
.pin { position: absolute; transform: translate(-50%, -100%); display: inline-flex; gap: 5px; align-items: center; padding: 3px 8px; border-radius: 3px; color: #fff; font: 600 12px var(--body); white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.pin b { background: rgba(255,255,255,.25); border-radius: 2px; padding: 0 4px; }
.pin.sold, .num.sold, .dot.sold { background: var(--sold); } .pin.pending, .num.pending, .dot.pending { background: var(--pending); } .pin.active, .num.active, .dot.active { background: var(--active); } .pin.subject { background: var(--subject); font-size: 15px; }
.legend { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px 24px; font-size: .9rem; }
.num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: .72rem; margin-right: 8px; }

.pill { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .72rem; font-weight: 600; color: #fff; letter-spacing: .03em; }
.pill.sold { background: var(--sold); } .pill.pending { background: var(--pending); } .pill.active { background: var(--active); } .pill.subject { background: var(--subject); }

.toolbar { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; margin-bottom: 18px; position: sticky; top: 66px; z-index: 30; }
.toolbar button { border: 0; background: none; font: 500 .85rem var(--body); color: var(--muted); padding: 7px 14px; border-radius: 3px; cursor: pointer; }
.toolbar button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.gridwrap { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); }
.grid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1240px; table-layout: fixed; font-size: .88rem; }
.grid th, .grid td { padding: 9px 14px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; background: var(--surface); }
.grid .corner, .grid tbody th { width: 140px; position: sticky; left: 0; z-index: 3; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.grid .pin { position: sticky; left: 140px; z-index: 2; background: #faf9f6; box-shadow: 2px 0 0 var(--ink); transform: none; display: table-cell; color: inherit; font: inherit; border-radius: 0; padding: 9px 14px; white-space: normal; }
.grid thead th { vertical-align: top; }
.col-tag { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; } .col-tag b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: .7rem; margin-right: 4px; }
.col-tag.sold b { background: var(--sold); } .col-tag.pending b { background: var(--pending); } .col-tag.active b { background: var(--active); }
.col-tag.sold { color: var(--sold); } .col-tag.pending { color: var(--pending); } .col-tag.active { color: var(--active); }
.carousel { position: relative; aspect-ratio: 4/3; background: #e8e6e1; margin-bottom: 10px; overflow: hidden; } .carousel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.nophoto { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: .8rem; }
.car-btn { position: absolute; top: 50%; translate: 0 -50%; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); cursor: pointer; font-size: 16px; line-height: 1; } .car-btn.prev { left: 6px; } .car-btn.next { right: 6px; }
.car-count { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: .68rem; padding: 1px 6px; border-radius: 2px; }
.col-addr { font: 500 1.05rem/1.2 var(--display); } .col-city { color: var(--muted); font-size: .8rem; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; min-height: 22px; } .badge { font-size: .68rem; border: 1px solid var(--line); padding: 1px 6px; border-radius: 2px; color: var(--muted); }
.price-row td strong, .adj-row.total td strong { display: block; font: 400 1.35rem/1.2 var(--display); } .price-row em { color: var(--muted); }
.adj-row td, .adj-row th { background: var(--adj) !important; } .adj { display: flex; justify-content: space-between; gap: 8px; font-size: .82rem; font-variant-numeric: tabular-nums; }
.note-row td { font-style: italic; color: var(--muted); }
.room-photos { display: grid; gap: 6px; } .room-photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; cursor: zoom-in; } .room-empty { color: var(--muted); font-size: .8rem; margin: 0; }

.tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); }
.list { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; min-width: 760px; }
.list th, .list td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; } .list th:nth-child(-n+2), .list td:nth-child(-n+2), .avgs th:first-child { text-align: left; }
.list thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; } .list .grp th { background: var(--ground); text-align: left; font-weight: 500; }
.avgs tbody tr:last-child > * { font-weight: 600; border-top: 2px solid var(--ink); }

.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 32px; }
.chart { margin: 0; background: var(--surface); border: 1px solid var(--line); padding: 10px; } .chart svg { width: 100%; height: auto; display: block; }
.gridline { stroke: var(--line); } .tick, .axis { font: 11px var(--body); fill: var(--muted); } .axis { font-weight: 600; }
.trend { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; } .subject-line { stroke: var(--accent); stroke-width: 1.5; } .subject-label { font: 600 11px var(--body); fill: var(--accent); }
.pt circle { stroke: #fff; stroke-width: 2; } .pt text { font: 600 11px var(--body); fill: #fff; pointer-events: none; } .pt.sold circle { fill: var(--sold); } .pt.pending circle { fill: var(--pending); } .pt.active circle { fill: var(--active); }
.key { display: flex; gap: 10px; align-items: center; margin: 18px 0 0; } .keyline::before { content: ""; display: inline-block; width: 26px; border-top: 2px dashed var(--ink); vertical-align: middle; margin-right: 6px; }

.ramp-wrap { background: var(--surface); border: 1px solid var(--line); padding: 64px 40px 28px; }
.ramp { position: relative; height: 14px; border-radius: 7px; background: linear-gradient(90deg, #cfdde6, var(--accent)); }
.ramp-range { position: absolute; top: -10px; bottom: -10px; border: 2px solid var(--ink); border-radius: 4px; background: rgba(255,255,255,.35); } .ramp-range span { position: absolute; top: -28px; left: 50%; translate: -50%; white-space: nowrap; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.dot { position: absolute; top: 50%; translate: -50% -50%; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; color: #fff; font: 600 .7rem/18px var(--body); text-align: center; font-style: normal; }
.ramp-marks { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 34px; gap: 12px; } .ramp-marks span, .suggest span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .ramp-marks strong { font: 400 1.3rem var(--display); }
.suggest { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 24px; } .suggest > div { background: var(--surface); padding: 24px 28px; } .suggest strong { display: block; font: 400 2.2rem/1.2 var(--display); }

.thanks { text-align: center; border: 0; } .thanks p { max-width: 60ch; margin: 0 auto 18px; } .disclaimer { font-size: .75rem; color: var(--muted); margin-top: 40px !important; }

#lightbox { border: 0; padding: 0; background: rgba(12,15,18,.95); width: 100vw; height: 100vh; max-width: none; max-height: none; color: #fff; } #lightbox[open] { display: grid; place-items: center; }
#lightbox img { max-width: 88vw; max-height: 84vh; } #lightbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 40px; cursor: pointer; padding: 16px; }
.lb-close { top: 8px; right: 12px; } .lb-prev { left: 8px; top: 50%; } .lb-next { right: 8px; top: 50%; } .lb-cap { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; margin: 0; font-size: .85rem; opacity: .8; }

/* Head to head: one comparable against your home */
.grid thead th { position: relative; padding-bottom: 60px; } .grid thead th.pin { position: sticky; } .is-print .grid thead th { padding-bottom: 3px; }
.closer { position: absolute; left: 14px; right: 14px; bottom: 14px; width: auto; border: 1px solid var(--ink); background: none; color: var(--ink); font: 500 .8rem var(--body); padding: 7px 10px; border-radius: 3px; cursor: pointer; } .closer:hover { background: var(--ink); color: #fff; }
#h2h { border: 0; padding: 0; width: min(1080px, calc(100vw - 24px)); max-height: calc(100vh - 32px); background: var(--ground); color: var(--ink); border-radius: 6px; box-shadow: 0 30px 80px rgba(10,14,18,.45); } #h2h::backdrop { background: rgba(12,15,18,.7); }
.h2h-top { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 18px 28px; background: var(--surface); border-bottom: 1px solid var(--line); }
.h2h-top > div { flex: 1 1 260px; min-width: 0; } .h2h-top h2 { font-size: 1.5rem; margin: 0; } .h2h-top .eyebrow { margin-bottom: 4px; }
.h2h-top nav { display: flex; gap: 6px; } .h2h-top .num { border: 0; width: 28px; height: 28px; margin: 0; font: 600 .8rem var(--body); cursor: pointer; opacity: .45; } .h2h-top .num[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.h2h-close { border: 0; background: none; font-size: 30px; line-height: 1; cursor: pointer; color: var(--ink); padding: 0 6px; }
.h2h-body { padding: 24px 28px 36px; } .h2h-sum { font-size: 1.1rem; margin: 0 0 20px; } .h2h-sum strong { font: 400 1.5rem var(--display); font-variant-numeric: tabular-nums; }
.h2h-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; margin-bottom: 12px; }
.h2h-tabs button { border: 0; background: none; font: 500 .85rem var(--body); color: var(--muted); padding: 6px 14px; border-radius: 3px; cursor: pointer; } .h2h-tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.h2h-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .h2h-photos figure { margin: 0; min-width: 0; } .h2h-photos img, .h2h-blank { width: 100%; aspect-ratio: 3/2; object-fit: cover; background: #e8e6e1; } .h2h-blank { display: grid; place-items: center; color: var(--muted); font-size: .85rem; }
.h2h-photos figcaption { padding-top: 8px; line-height: 1.25; } .h2h-photos figcaption small { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; font-weight: 600; } .h2h-photos figcaption b { font: 500 1.1rem var(--display); }
.h2h-sec { margin-top: 36px; } .h2h-sec h3 { font-size: 1.35rem; margin-bottom: 14px; } .h2h-lede { margin: -6px 0 16px; color: var(--muted); max-width: 70ch; }
.h2h-cols { display: flex; justify-content: space-between; gap: 16px; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.h2h-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 170px minmax(0, 1fr) 96px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.h2h-row.text { grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr); } .h2h-row .v:last-child { text-align: right; } .h2h-row .v { font-size: .95rem; }
.h2h-row .mid { text-align: center; line-height: 1.25; } .h2h-row .mid b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; } .h2h-row .mid em { font-style: normal; font-weight: 600; font-size: .92rem; } .h2h-row.same .mid em { font-weight: 400; color: var(--muted); }
.h2h-row .track { display: flex; height: 12px; background: #ebe9e3; border-radius: 2px; } .h2h-row .track.l { justify-content: flex-end; } .h2h-row .track i { width: var(--w); background: var(--subject); border-radius: 2px; }
.h2h-row .track i.sold, .step.down .track i { background: var(--sold); } .h2h-row .track i.pending { background: var(--pending); } .h2h-row .track i.active, .step.up .track i { background: var(--active); }
.bridge { background: var(--surface); border: 1px solid var(--line); padding: 8px 20px; } .step { display: grid; grid-template-columns: 170px minmax(0, 1fr) 96px; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9rem; font-variant-numeric: tabular-nums; } .step:last-child { border: 0; }
.step .track { position: relative; height: 18px; } .step .track i { position: absolute; top: 0; bottom: 0; background: #b9c6cf; border-radius: 2px; } .step.total .track i { background: var(--ink); } .step strong { text-align: right; font-weight: 500; } .step.total { font-weight: 600; } .step.total strong { font: 400 1.25rem var(--display); }
.step.up strong { color: var(--active); } .step.down strong { color: var(--sold); }
.tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 14px; } .tally > div { background: var(--surface); padding: 14px 18px; text-align: center; }
.tally strong { display: block; font: 400 2rem/1 var(--display); } .tally span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; } .tally .sold strong { color: var(--sold); } .tally .pending strong { color: var(--pending); } .tally .active strong { color: var(--active); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 30px; }
.tile { background: var(--surface); border: 1px solid var(--line); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; --them: var(--sold); } .tile:has(.sw.pending) { --them: var(--pending); } .tile:has(.sw.active) { --them: var(--active); }
.tile header b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; } .tile header em { font: 400 1.35rem/1.2 var(--display); font-style: normal; } .tile.same header em { color: var(--muted); }
.tile .art { flex: 1; display: grid; align-content: center; gap: 10px; min-height: 130px; }
.tile footer { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 12px; font-size: .78rem; color: var(--muted); } .tile footer span:last-child { text-align: right; } .tile footer strong { display: block; color: var(--ink); font-weight: 500; font-size: .95rem; font-variant-numeric: tabular-nums; }
.sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--subject); margin-right: 6px; } .sw.sold { background: var(--sold); } .sw.pending { background: var(--pending); } .sw.active { background: var(--active); }
.plots { height: 150px; width: auto; justify-self: center; overflow: visible; } .plots rect { fill: var(--them); fill-opacity: .16; stroke: var(--them); stroke-width: 1.5; transform-box: fill-box; transform-origin: left bottom; } .plots rect.you { fill: var(--subject); stroke: var(--subject); stroke-dasharray: 4 3; fill-opacity: .1; }
.icons { display: flex; flex-wrap: wrap; gap: 6px; color: var(--them); } .icons.you { color: var(--subject); } .ic { width: 38px; height: 38px; opacity: .4; } .ic.extra { opacity: 1; } .tile.same .ic { opacity: .75; }
.ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ic.half svg { clip-path: inset(0 50% 0 0); }
.years { position: relative; height: 2px; background: var(--line); margin: 40px 34px; } .years .span { position: absolute; top: -1px; height: 4px; background: var(--ink); opacity: .25; }
.yr { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; translate: -50% -50%; background: var(--them); border: 2px solid var(--surface); } .yr.you { background: var(--subject); } .yr b { position: absolute; left: 50%; translate: -50%; top: 18px; font: 500 .9rem var(--body); font-variant-numeric: tabular-nums; } .yr.you b { top: auto; bottom: 18px; }
.m-ready #h2h .plots rect { transition: transform .7s cubic-bezier(.2,.8,.2,1) .15s; } .m-ready #h2h:not(.go) .plots rect { transform: scale(0); }
.m-ready #h2h .ic { transition: transform .4s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * 110ms + 150ms), opacity .3s calc(var(--i) * 110ms + 150ms); } .m-ready #h2h:not(.go) .ic { transform: scale(.2) translateY(10px); opacity: 0; }
.m-ready #h2h .yr, .m-ready #h2h .years .span { transition: left .8s cubic-bezier(.2,.8,.2,1) .15s, width .8s cubic-bezier(.2,.8,.2,1) .15s; } .m-ready #h2h:not(.go) .yr { left: 0 !important; } .m-ready #h2h:not(.go) .years .span { width: 0 !important; }
.h2h-note { margin: 24px 0 0; font-style: italic; color: var(--muted); }
.m-ready #h2h .h2h-row .track i { transition: width .7s cubic-bezier(.2,.7,.2,1); } .m-ready #h2h:not(.go) .h2h-row .track i { width: 0; }
.m-ready #h2h .step .track i { transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 140ms + 200ms); } .m-ready #h2h:not(.go) .step .track i { transform: scaleX(0); }
.m-ready #h2h .step strong { transition: opacity .3s calc(var(--i) * 140ms + 400ms); } .m-ready #h2h:not(.go) .step strong { opacity: 0; }
.m-ready #h2h[open] { animation: m-zoom .28s cubic-bezier(.2,.7,.2,1); }
.is-print .closer { display: none; } @media print { .closer, #h2h { display: none !important; } }
@media (max-width: 700px) { .h2h-top, .h2h-body { padding-inline: 16px; } .h2h-row { grid-template-columns: 64px minmax(0, 1fr) 104px minmax(0, 1fr) 64px; gap: 6px; } .h2h-row.text { grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr); } .h2h-row .v { font-size: .8rem; } .step { grid-template-columns: 110px minmax(0, 1fr) 80px; gap: 8px; } .bridge { padding-inline: 12px; } }

@media (max-width: 800px) { .prop { grid-template-columns: 1fr; gap: 32px; } .mosaic { aspect-ratio: auto; grid-template-columns: 1fr 1fr !important; grid-template-rows: auto; } .mosaic img { aspect-ratio: 4/3; } .mosaic img:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16/9; } .facts { gap: 14px 0; } .facts li { padding: 0 14px; } .bar nav { display: none; } .bar .btn { margin-left: auto; } .page { padding-block: 48px; } .ramp-wrap { padding-inline: 20px; } .ramp-marks { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Motion. Only under body.m-ready, which cma.js sets when motion is on, so the page at rest is the page without these rules. */
.m-ready .m-rise { opacity: 0; transform: translateY(18px); transition: opacity .5s ease-out var(--m-delay, 0ms), transform .5s cubic-bezier(.2,.7,.2,1) var(--m-delay, 0ms); }
.m-ready .m-rise.m-in { opacity: 1; transform: none; }
.m-ready .m-cover > * { animation: m-up .7s cubic-bezier(.2,.7,.2,1) both; } .m-ready .m-cover > :nth-child(2) { animation-delay: .12s; } .m-ready .m-cover > :nth-child(3) { animation-delay: .22s; } .m-ready .m-cover > :nth-child(4) { animation-delay: .38s; }
@keyframes m-up { from { opacity: 0; transform: translateY(16px); } }
.m-ready .m-line { opacity: 0; transform: translateX(-8px); transition: opacity .3s ease-out, transform .3s ease-out; } .m-ready .m-line.m-in { opacity: 1; transform: none; }
.m-ready .m-pricing .dot { opacity: 0; translate: -50% -190%; transition: opacity .25s ease-out, translate .45s cubic-bezier(.3,1.4,.5,1); } .m-ready .m-pricing .dot.m-in { opacity: 1; translate: -50% -50%; }
.m-ready .m-pricing .ramp-range { clip-path: inset(0 50%); opacity: 0; transition: clip-path .6s cubic-bezier(.2,.7,.2,1), opacity .2s; } .m-ready .m-pricing .ramp-range.m-in { clip-path: inset(-40px -200px); opacity: 1; }
.m-ready .m-pricing [data-count] { opacity: 0; transition: opacity .3s; } .m-ready .m-pricing [data-count].m-in { opacity: 1; }
[data-count] { font-variant-numeric: tabular-nums; }

.m-ready .m-chart .gridline, .m-ready .m-chart .tick, .m-ready .m-chart .axis { opacity: 0; transition: opacity .4s ease-out; } .m-ready .m-chart.m-in .gridline, .m-ready .m-chart.m-in .tick, .m-ready .m-chart.m-in .axis { opacity: 1; }
.m-ready .m-chart .pt { opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; transition: opacity .25s ease-out, transform .4s cubic-bezier(.3,1.5,.5,1); } .m-ready .m-chart .pt.m-in { opacity: 1; transform: none; }
.m-ready .m-chart .trend { clip-path: inset(-10px 100% -10px 0); transition: clip-path .8s cubic-bezier(.3,.6,.2,1); } .m-ready .m-chart.m-trend .trend { clip-path: inset(-10px 0 -10px 0); }
.m-ready .m-chart .subject-line { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; transition: transform .6s cubic-bezier(.2,.7,.2,1) .25s; } .m-ready .m-chart.m-trend .subject-line { transform: none; }
.m-ready .m-chart .subject-label { opacity: 0; transition: opacity .3s .7s; } .m-ready .m-chart.m-trend .subject-label { opacity: 1; }
.m-ready .m-pin { opacity: 0; transform: translate(-50%, -160%); transition: opacity .25s ease-out, transform .45s cubic-bezier(.3,1.4,.5,1); } .m-ready .m-pin.m-in { opacity: 1; transform: translate(-50%, -100%); }
.m-ready #lightbox[open] { animation: m-fade .22s ease-out; } .m-ready #lightbox[open] img { animation: m-zoom .28s cubic-bezier(.2,.7,.2,1); }
@keyframes m-fade { from { opacity: 0; } } @keyframes m-zoom { from { opacity: 0; transform: scale(.96); } }

/* PDF: letter landscape, one section per sheet, nothing interactive. body.is-print is set by ?print=1 so the rules can be previewed on screen too. */
@page { size: letter landscape; margin: 0.45in; }
@media print { .homecard, .present-meter, [data-present] { display: none !important; } }
@media print { .bar, .toolbar, .car-btn, .car-count, .mock-flag, .room-row, #lightbox, .leaflet-control-container { display: none !important; } }
.is-print .bar, .is-print .toolbar, .is-print .car-btn, .is-print .car-count { display: none; }
.is-print { background: #fff; font-size: 12px; }
.is-print .page { max-width: none; padding: 0 0 12px; border: 0; break-after: page; break-inside: avoid; } .is-print .page:last-of-type { break-after: auto; }
.is-print h2 { font-size: 1.8rem; margin-bottom: 14px; }
.is-print .cover { min-height: 7.4in; padding: 0.5in; } .is-print #leaflet { height: 5.2in; }
.is-print .gridwrap, .is-print .tablewrap { overflow: visible; } .is-print .grid { min-width: 0; font-size: 10px; } .is-print .grid th, .is-print .grid td { padding: 3px 7px; position: static; }
.is-print .grid .corner, .is-print .grid tbody th { width: 92px; font-size: 8.5px; } .is-print .grid .pin { box-shadow: none; border-right: 2px solid var(--ink); }
.is-print .carousel { aspect-ratio: 16/9; margin-bottom: 5px; } .is-print .col-addr { font-size: 12px; } .is-print .badges { margin-top: 3px; min-height: 0; } .is-print .badge { font-size: 7.5px; }
.is-print .price-row td strong, .is-print .adj-row.total td strong { font-size: 14px; } .is-print .adj { font-size: 9px; }
.is-print .list { min-width: 0; } .is-print .charts { grid-template-columns: 1fr 1fr; gap: 18px; } .is-print .mosaic { margin: 0 0 16px; aspect-ratio: 3/1; } .is-print .prop { gap: 28px; grid-template-columns: minmax(0,1fr) 200px; } .is-print .facts { margin-bottom: 14px; padding-top: 10px; } .is-print .spec dd { font-size: 11px; } .is-print .remarks { font-size: 11px; } .is-print .spec div { padding: 4px 0; font-size: 10px; }
.is-print .thanks { padding-top: 2in; }