/* building — page-local rules (★#59 M4). Token-only; shared components live in chrome.css. */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.section { margin-top: 40px; }
.section-title { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: var(--fs-6); font-weight: 700; letter-spacing: -.025em; color: var(--text); margin: 0 0 8px; }
.section-intro { color: var(--text-muted); font-size: var(--fs-3); line-height: 1.65; margin: 0 0 16px; max-width: 60ch; }
.card { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-xl); padding: 22px; box-shadow: var(--shadow), var(--highlight); }

/* KPIs — elevated cards, numbers promoted to the display tier */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; margin-top: 4px; }
.kpi-box { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-xl); padding: 18px 20px 16px; box-shadow: var(--shadow), var(--highlight); }
.kpi-label { font-size: var(--fs-1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 13px; }
.kpi-value { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: var(--num-hero); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-sub { font-size: var(--fs-1); color: var(--text-muted); margin-top: 11px; }

/* F6 — Off-plan vs ready comparator (reused from community.html) */
.op-card { padding: 0; overflow: hidden; }
/* F16 rents card (★#55, 13 Sep): its 4th column is a gross-yield PERCENT under a two-word header — wider than the
   comparator's 68px "Gap" slot, and neutral rather than the accent (the accent marks the launch-vs-resale gap, a
   different claim). The header may wrap on narrow screens instead of clipping. */
@media (max-width: 560px) {
  .kpi-box { padding: 16px 14px 14px; }
}

/* Other buildings chips (mirrors community.html's nearby-communities chips) */
.nearby-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nearby-chip { display: inline-flex; align-items: center; font-size: var(--fs-2); font-weight: 600; padding: 8px 15px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow-sm); transition: border-color var(--transition), box-shadow var(--transition); }
.nearby-chip:hover { border-color: var(--accent); box-shadow: var(--shadow), var(--highlight); text-decoration: none; }

/* Recent transactions */
.tx-list { display: grid; gap: 10px; }
.tx-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 15px 18px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-sm); transition: border-color var(--transition), box-shadow var(--transition); }
.tx-card:hover { border-color: var(--accent); box-shadow: var(--shadow), var(--highlight); }
.tx-list a:focus-within .tx-card { border-color: var(--accent); }
.tx-project { font-weight: 600; font-size: var(--fs-3); color: var(--text); }
.tx-meta { font-size: var(--fs-1); color: var(--text-muted); margin-top: 3px; }
.tx-price { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: var(--fs-4); font-weight: 700; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tx-ppsf { font-size: var(--fs-1); color: var(--text-subtle); text-align: right; font-variant-numeric: tabular-nums; }

/* Dark CTA card (lime action — the lime law) */
.cta-card { background: var(--chrome); border-radius: var(--radius-xl); padding: 30px 28px; text-align: center; box-shadow: var(--shadow-lg); }
.cta-card h3 { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: var(--fs-5); font-weight: 700; letter-spacing: -.02em; color: var(--chrome-ink); margin-bottom: 8px; }
.cta-card p { color: var(--chrome-sub); font-size: var(--fs-3); margin-bottom: 20px; }

/* Building profile — bed/type mix + typical size (v1.1a); ported from community.html */
.prof-desc { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-xl); padding: 20px 22px; font-size: var(--fs-3); line-height: 1.72; color: var(--text); margin-bottom: 14px; box-shadow: var(--shadow), var(--highlight); }
.prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.prof-tile { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-xl); padding: 18px 20px; box-shadow: var(--shadow), var(--highlight); }
.prof-lab { font-size: var(--fs-1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); }
.prof-bar { height: 11px; border-radius: 4px; background: var(--surface-alt); overflow: hidden; display: flex; margin-top: 12px; }
.prof-bar > span { display: block; height: 100%; }
.prof-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-2); color: var(--text-muted); margin-top: 12px; }
.prof-big { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: var(--num-lg); font-weight: 700; color: var(--text); margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.prof-sub { font-size: var(--fs-1); color: var(--text-muted); margin-top: 3px; }
/* min-height (was a fixed height): the bar + its 2-line cap can exceed 84px, and a
   fixed height made the overflow ride UP into the "Bedroom mix" label. */
.bed-cols { display: flex; align-items: flex-end; gap: 14px; min-height: 84px; margin-top: 14px; }
.bed-col { flex: 1; text-align: center; }
.bed-fill { border-radius: 4px 4px 0 0; }
.bed-cap { font-size: var(--fs-1); color: var(--text-muted); margin-top: 7px; line-height: 1.3; }
.prof-foot { margin-top: 12px; font-size: var(--fs-1); color: var(--text-subtle); }
@media (max-width: 560px) { .prof-grid { grid-template-columns: 1fr; } }
.type-bar { margin-top: 11px; }
.tx-link { text-decoration: none; }
.bed-cap b { color: var(--text); }