/* Charts and "who it's for" blocks on the property pages */
:root{--c-guar:#E2604B;--c-proj:#1C7FA6;--c-grid:rgba(20,42,59,.10)}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:24px 0}
.tile{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 18px 16px}
.tile b{display:block;font-family:var(--font-mono);font-weight:500;font-size:clamp(22px,3vw,28px);color:var(--ink);line-height:1.15}
.tile span{display:block;font-size:14px;color:var(--ink60);margin-top:6px;line-height:1.4}
.tile.guar{border-top:3px solid var(--c-guar)}
.tile.proj{border-top:3px solid var(--c-proj)}

.chart{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 18px 16px;margin:24px 0}
.chart-title{font-weight:600;font-size:17px;color:var(--ink)}
.chart-sub{font-size:14px;color:var(--ink60);margin-top:2px}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 4px;font-size:14px;color:var(--ink)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.legend .g{background:var(--c-guar)}
.legend .p{background:var(--c-proj)}
.legend .n{background:var(--ink)}
.legend .dash{width:18px;height:0;border-top:2px dashed var(--ink60);border-radius:0;vertical-align:3px}

.bars{position:relative;display:flex;align-items:flex-end;gap:4px;height:220px;margin:16px 0 0 34px;border-bottom:1px solid rgba(20,42,59,.35)}
.bars .grid{position:absolute;left:-34px;right:0;border-top:1px solid var(--c-grid);font-size:11.5px;color:var(--ink60);line-height:0}
.bars .grid span{position:absolute;left:0;top:0;transform:translateY(-1px);background:var(--white);padding-right:4px}
.bar{position:relative;flex:1;min-width:0;height:calc(var(--v) / var(--max) * 100%);border-radius:4px 4px 0 0;cursor:default;outline:none}
.bar.g{background:var(--c-guar)}
.bar.p{background:var(--c-proj)}
.bar.n{background:var(--ink)}
.bar:hover,.bar:focus{filter:brightness(1.12)}
.bar .val{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:4px;font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap}
.xlabels{display:flex;gap:4px;margin-left:34px;font-size:11.5px;color:var(--ink60);margin-top:6px}
.xlabels span{flex:1;min-width:0;text-align:center;line-height:1.25;overflow-wrap:anywhere}
.bars.wide-gap{gap:14px}
.xlabels.wide-gap{gap:14px}
.bars.grouped .group{flex:1;display:flex;align-items:flex-end;gap:2px;height:100%}

.chart svg{display:block;width:100%;max-width:620px;height:auto;margin:12px 0 0;overflow:visible}
.chart svg text{font-family:var(--font-body);font-size:11px;fill:var(--ink60)}
.chart svg .lbl{fill:var(--ink);font-weight:600}
.chart svg .hit{fill:transparent;cursor:default}
.chart details{margin-top:12px;font-size:14px}
.chart summary{cursor:pointer;color:var(--ink60)}
.chart table{width:100%;border-collapse:collapse;margin-top:8px;font-size:14px}
.chart th,.chart td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--c-grid)}
.chart-note{font-size:13px;color:var(--ink60);margin-top:10px;line-height:1.5}

.tip{position:fixed;z-index:50;pointer-events:none;background:var(--ink);color:var(--white);font-size:13px;line-height:1.4;padding:7px 10px;border-radius:6px;max-width:240px;box-shadow:var(--shadow);opacity:0;transition:opacity .12s}
.tip.on{opacity:1}

.timeline{list-style:none;margin:24px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.timeline li{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;border-top:3px solid var(--ink60)}
.timeline li.g{border-top-color:var(--c-guar)}
.timeline li.p{border-top-color:var(--c-proj)}
.timeline .when{display:block;font-family:var(--font-mono);font-size:13px;color:var(--ink60)}
.timeline strong{display:block;margin:4px 0 4px;color:var(--ink)}
.timeline span.what{font-size:14.5px;line-height:1.5;color:var(--ink)}

.fit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:24px}
.fit{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.fit h3{font-size:19px;margin-bottom:6px}
.fit p{font-size:15.5px;margin:0}
.not-fit{margin-top:28px;background:var(--white);border-left:3px solid var(--ink60);border-radius:var(--radius);padding:18px 20px}
.not-fit h3{font-size:18px;margin-bottom:8px}
.not-fit ul{margin:0 0 0 18px}
.not-fit li{margin:4px 0;font-size:15.5px}

@media (max-width:560px){
  .bars{height:190px}
  .bar .val{font-size:11px}
  .xlabels{font-size:10.5px}
}

/* Buyer journey: a fictional owner's story, step by step */
.persona{display:flex;gap:16px;align-items:center;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin:24px 0 8px}
.persona .avatar{flex:0 0 56px;height:56px;border-radius:50%;background:var(--ivory);display:grid;place-items:center}
.persona .avatar svg{width:34px;height:34px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.persona p{margin:0;font-size:15.5px}
.persona strong{display:block;font-size:18px;color:var(--ink)}
.journey{list-style:none;margin:24px 0 0;padding:0;position:relative}
.journey::before{content:"";position:absolute;left:25px;top:8px;bottom:8px;width:2px;background:rgba(20,42,59,.15)}
.journey li{position:relative;display:grid;grid-template-columns:52px 1fr;gap:16px;margin-bottom:22px}
.journey .ico{position:relative;z-index:1;width:52px;height:52px;border-radius:50%;background:var(--white);border:2px solid var(--ink60);display:grid;place-items:center}
.journey li.g .ico{border-color:var(--c-guar)}
.journey li.p .ico{border-color:var(--c-proj)}
.journey .ico svg{width:24px;height:24px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.journey .card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px}
.journey .step{font-family:var(--font-mono);font-size:12.5px;color:var(--ink60);text-transform:uppercase;letter-spacing:.05em}
.journey h3{font-size:19px;margin:4px 0 6px}
.journey p{font-size:15.5px;margin:0}
.journey .money{display:inline-block;margin-top:10px;font-size:14px;background:var(--ivory);border-radius:6px;padding:6px 10px;color:var(--ink)}
.journey li.g .money{background:rgba(226,96,75,.10)}
.journey li.p .money{background:rgba(28,127,166,.10)}
.journey-note{font-size:13.5px;color:var(--ink60);margin-top:4px}
@media (max-width:560px){
  .journey::before{left:19px}
  .journey li{grid-template-columns:40px 1fr;gap:12px}
  .journey .ico{width:40px;height:40px}
  .journey .ico svg{width:20px;height:20px}
  .persona{padding:16px;gap:12px}
  .persona .avatar{flex-basis:44px;height:44px}
}