/* UI 22: deals as a history list, each deal a page: Property → Business plan → Numbers → Next steps. */
:root {
  --bg: #fbfaf7; --side: #f3f1ec; --panel: #fff; --ink: #0c1d33; --ink-2: #445266; --mute: #7a8596; --line: #e7e4dc;
  --blue: #1439c6; --blue-soft: #edf1fd; --good: #1f7a4f; --warn: #9a5b00; --bad: #b3261e;
  --serif: "Fraunces", Georgia, serif; --sans: "Manrope", -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; display: flex; overflow: hidden; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
.icon { width: 34px; height: 34px; border-radius: 8px; border: 0; background: none; color: var(--mute); font-size: 16px; }
.icon:hover { background: rgba(12,29,51,.06); color: var(--ink); }

/* Sidebar: deals like a chat history */
.side { width: 272px; flex: none; background: var(--side); display: flex; flex-direction: column; padding: 14px 10px; gap: 10px; transition: margin .25s ease; }
body.no-side .side { margin-left: -272px; }
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: none; }
.newdeal { display: block; padding: 9px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.newdeal:hover { border-color: var(--ink-2); }
.search { border: 0; background: rgba(12,29,51,.05); border-radius: 10px; padding: 8px 12px; outline: 0; }
#deals { overflow: auto; flex: 1; display: grid; align-content: start; gap: 1px; }
#deals h3 { margin: 12px 8px 4px; font-size: 12px; font-weight: 600; color: var(--mute); }
.deal { display: grid; gap: 1px; width: 100%; text-align: left; border: 0; background: none; border-radius: 9px; padding: 8px 10px; }
.deal:hover { background: rgba(12,29,51,.05); }
.deal[aria-current="true"] { background: var(--panel); box-shadow: 0 1px 2px rgba(12,29,51,.08); }
.deal b { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal span { font-size: 12.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Main document */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--bg); }
.show-side { display: none; }
body.no-side .show-side { display: inline-block; }
.sections { flex: 1; display: flex; gap: 4px; justify-content: center; }
.sections a { padding: 6px 12px; border-radius: 999px; color: var(--mute); text-decoration: none; font-size: 14px; font-weight: 500; }
.sections a:hover { color: var(--ink); }
.sections a.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(12,29,51,.1); }
.doc { flex: 1; overflow: auto; scroll-behavior: smooth; padding: 32px 32px 140px; }
.page { max-width: 760px; margin: 0 auto; display: grid; gap: 44px; }
.title h1 { margin: 0; font: 600 38px/1.1 var(--serif); letter-spacing: -.015em; }
.title p { margin: 6px 0 0; color: var(--mute); font-size: 15px; }
.chip { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--side); }
.chip.good { color: var(--good); } .chip.warn { color: var(--warn); } .chip.bad { color: var(--bad); }
section.s { display: grid; gap: 16px; scroll-margin-top: 12px; }
section.s > h2 { margin: 0; font: 600 24px/1.2 var(--serif); }
section.s > p.lead { margin: -6px 0 0; color: var(--ink-2); }
.photos { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 6px; border-radius: 14px; overflow: hidden; height: 220px; }
.photos div { background: #e3e5ea center / cover; }
.photos div:first-child { grid-row: span 2; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.facts div { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.facts span { font-size: 12.5px; color: var(--mute); }
.facts b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.facts small { font-size: 12px; color: var(--mute); }
.prose { margin: 0; color: var(--ink-2); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; display: grid; gap: 10px; }
.card h3 { margin: 0; font-size: 14px; font-weight: 600; }
.card p { margin: 0; color: var(--ink-2); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
table.t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; }
table.t td { padding: 7px 0; border-bottom: 1px solid #f0eee8; }
table.t td:last-child { text-align: right; font-weight: 600; }
table.t tr.total td { border-top: 1px solid var(--ink); border-bottom: 0; font-weight: 700; }
ul.hold { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--ink-2); }
.note { font-size: 12.5px; color: var(--mute); margin: 0; }
.sources { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.sources a { color: var(--blue); text-decoration: none; }
.big { font: 600 44px/1 var(--serif); color: var(--blue); font-variant-numeric: tabular-nums; }
.big.none { color: var(--mute); font-size: 30px; }
.gauge { position: relative; height: 10px; border-radius: 99px; background: #eceef2; }
.gauge i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--blue); transition: width .3s; }
.gauge s { position: absolute; top: -5px; width: 2px; height: 20px; background: var(--ink); }
.gauge-l { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--mute); }
.slider label { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; }
.slider output { color: var(--blue); }
.slider input { width: 100%; accent-color: var(--blue); }
.step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.step:first-child { padding-top: 0; }
.step .n { width: 26px; height: 26px; border-radius: 50%; background: var(--side); display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.step b { display: block; font-weight: 600; }
.step p { margin: 2px 0 8px; color: var(--ink-2); font-size: 14px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { min-height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); font-weight: 600; font-size: 13.5px; }
.btn:hover { border-color: var(--ink-2); }
.btn.pri { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn[disabled] { opacity: .6; cursor: default; }
.mine { color: var(--good); font-size: 13px; font-weight: 600; }
.call { display: flex; gap: 8px; }
.call button { flex: 1; min-height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-weight: 600; }
.call button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Activity thread (ask, proposals, agent runs) */
.thread { display: grid; gap: 10px; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; }
.msg.me { justify-self: end; background: var(--ink); color: #fff; }
.msg.ai { background: var(--panel); border: 1px solid var(--line); color: var(--ink-2); }
.propose { border: 1px solid #c9d3f5; background: var(--blue-soft); border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; }
.propose p { margin: 0; }
.run { display: grid; grid-template-columns: 12px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: 14px; }
.run small { color: var(--mute); }
.run a { color: var(--blue); font-weight: 600; text-decoration: none; font-size: 13px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--good); }
.dot.spin { background: none; border: 2px solid var(--blue); border-right-color: transparent; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.composer-wrap { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 32px 20px; background: linear-gradient(rgba(251,250,247,0), var(--bg) 30%); }
.composer { max-width: 760px; margin: 0 auto; display: flex; gap: 8px; padding: 7px 7px 7px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 10px 30px -18px rgba(12,29,51,.4); }
.composer input, .composer textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: none; }
.composer textarea { font: inherit; color: inherit; resize: none; line-height: 1.45; padding: 8px 0; max-height: 220px; overflow-y: auto; }
.composer button { border: 0; border-radius: 10px; padding: 0 16px; min-height: 38px; background: var(--blue); color: #fff; font-weight: 600; }

/* Map pane */
.mappane { width: 38%; max-width: 620px; flex: none; position: relative; background: #0b1220; transition: margin .25s ease; }
body.no-map .mappane { margin-right: -38%; }
#globe { position: absolute; inset: 0; }
#globe .cesium-widget-credits { font-size: 10px; opacity: .5; }
.cesium-viewer-bottom { display: none; }
.ui-tag { position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none; display: grid; justify-items: center; gap: 5px; transition: opacity .3s; }
.ui-tag b { padding: 6px 11px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 24px -8px rgba(0,0,0,.5); }
.ui-tag b span { color: var(--blue); margin-left: 6px; }
.ui-tag i { width: 2px; height: 22px; background: linear-gradient(#fff, rgba(255,255,255,0)); }
.ui-tag.is-off { opacity: 0; }
body.no-map .ui-tag { display: none; }

@media (max-width: 1100px) { .mappane { width: 34%; } .facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) {
  body { flex-direction: column; overflow: auto; height: auto; }
  .side { position: fixed; inset: 0 auto 0 0; z-index: 20; box-shadow: 0 0 40px rgba(0,0,0,.2); }
  body:not(.side-open) .side { margin-left: -272px; }
  .show-side { display: inline-block; }
  .mappane { order: -1; width: 100%; max-width: none; height: 36vh; margin: 0 !important; }
  .main { overflow: visible; }
  .doc { overflow: visible; padding: 20px 16px 120px; }
  .sections { justify-content: flex-start; overflow-x: auto; }
  .two { grid-template-columns: 1fr; }
  .photos { height: 160px; }
  .title h1 { font-size: 30px; }
  .composer-wrap { position: fixed; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .ui-tag { display: none; }
}

/* Memo framing */
.bar { flex-wrap: wrap; }
.sections { justify-content: flex-start; }
.sections a em { font-style: normal; font-size: 11px; background: var(--warn); color: #fff; border-radius: 999px; padding: 1px 6px; margin-left: 3px; }
.memo { display: flex; align-items: center; gap: 10px; }
.memo-l { font-size: 13px; font-weight: 600; }
.memo-bar { width: 90px; height: 6px; border-radius: 99px; background: #eceef2; overflow: hidden; }
.memo-bar i { display: block; height: 100%; background: var(--good); }
.memo-p { font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
section.s > h2 { display: flex; align-items: center; gap: 10px; }
.st { font: 600 12px/1 var(--sans); padding: 4px 9px; border-radius: 999px; }
.st.ok { background: #e5f3ec; color: var(--good); } .st.part { background: #fbf1df; color: var(--warn); } .st.no { background: #fbe9e7; color: var(--bad); }
@media print {
  body { display: block; overflow: visible; background: #fff; }
  .side, .mappane, .bar, .composer-wrap, .row, .btn, #s-activity, .slider { display: none !important; }
  .doc { overflow: visible; padding: 0; }
  .page { max-width: none; gap: 24px; }
  .card { break-inside: avoid; }
}
@media (max-width: 1250px) { .memo-l { display: none; } }

.sections { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 2px; }
.sections a { white-space: nowrap; padding: 6px 10px; }
.bar { flex-wrap: nowrap; }
.mappane { width: 32%; }
body.no-map .mappane { margin-right: -32%; }
@media (max-width: 1350px) { .memo-bar { display: none; } }
.bar { flex-wrap: wrap; row-gap: 6px; }
.bar .memo { order: 1; margin-left: auto; }
.bar [data-toggle="map"] { order: 2; }
.bar .sections { order: 3; flex-basis: 100%; justify-content: center; }
.memo-bar { display: inline-block !important; }

/* ===== Polish pass: calm neutrals, tighter type, hairlines, live agents ===== */
:root { --bg: #faf9f6; --side: #f2f0ea; --line: #e8e5dd; --ink: #1c2230; --ink-2: #4b5261; --mute: #8a8f99; --blue: #1f46d6; --blue-soft: #eef2fe; }
body { font-size: 14px; }
.side { width: 256px; padding: 12px 8px; gap: 6px; }
body.no-side .side { margin-left: -256px; }
.newdeal { border: 0; background: none; padding: 8px 10px; font-weight: 500; color: var(--ink-2); display: flex; gap: 8px; }
.newdeal:hover { background: rgba(28,34,48,.05); }
.search { background: none; border: 1px solid transparent; padding: 7px 10px; }
.search:focus { border-color: var(--line); background: #fff; }
#deals h3 { margin: 10px 10px 4px; font-size: 11.5px; letter-spacing: .02em; }
.deal { padding: 7px 10px; border-radius: 8px; }
.deal b { font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.deal span { font-size: 12px; padding-left: 13px; }
.deal[aria-current="true"] { background: rgba(28,34,48,.07); box-shadow: none; }
.live { width: 6px; height: 6px; border-radius: 50%; background: transparent; flex: none; }
.live.on { background: var(--blue); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(31,70,214,.45); } 50% { box-shadow: 0 0 0 5px rgba(31,70,214,0); } }

.bar { padding: 8px 14px; background: rgba(250,249,246,.9); backdrop-filter: blur(8px); }
.sections a { font-size: 13px; padding: 5px 10px; }
.sections a.on { box-shadow: none; background: rgba(28,34,48,.07); }
.memo-l { font-size: 12.5px; color: var(--mute); font-weight: 500; }
.memo-bar { width: 72px; height: 4px; }
.btn { min-height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500; }
.btn.pri { font-weight: 600; }
.agentpill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #d6def9; background: var(--blue-soft); color: var(--blue); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; font-weight: 600; }
.agentpill i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: pulse 1.6s ease-in-out infinite; }
.agentpill[hidden] { display: none; }

.doc { padding: 28px 28px 130px; }
.page { max-width: 720px; gap: 36px; }
.title h1 { font-size: 30px; }
.title p { font-size: 14px; }
.chip { font-size: 12px; padding: 3px 9px; background: none; border: 1px solid var(--line); }
section.s { gap: 12px; }
section.s > h2 { font-size: 20px; }
section.s > p.lead { font-size: 14.5px; }
.photos { height: 190px; border-radius: 10px; }
.facts b { font-size: 16px; }
.card { border-radius: 10px; padding: 14px 16px; box-shadow: none; }
.card h3 { font-size: 12.5px; color: var(--mute); font-weight: 600; }
table.t { font-size: 13.5px; }
.big { font-size: 38px; }
.gauge { height: 6px; } .gauge s { top: -4px; height: 14px; }
.step { padding: 12px 0; }
.step b { font-size: 14px; }
.step p { font-size: 13.5px; }
.st { font-size: 11px; padding: 3px 8px; font-weight: 600; }
.call button { min-height: 36px; border-radius: 8px; font-size: 13.5px; }

/* Messages and tool blocks, like a harness transcript */
.thread { gap: 8px; }
.msg { font-size: 14px; padding: 8px 12px; border-radius: 12px; }
.msg.me { background: #ecebe6; color: var(--ink); }
.msg.ai { background: none; border: 0; padding-left: 0; }
.allow { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 14px 16px; display: grid; gap: 6px; box-shadow: 0 6px 20px -14px rgba(28,34,48,.35); animation: rise .25s ease-out; }
.allow-h { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.ai-mark { color: var(--blue); }
.allow-q { margin: 0; padding: 8px 10px; background: var(--side); border-radius: 8px; font-size: 13.5px; }
details.tool { border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; animation: rise .25s ease-out; }
details.tool summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 12px; font-size: 13.5px; }
details.tool summary::-webkit-details-marker { display: none; }
.ti { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; color: #fff; }
.tool.working .ti { border: 2px solid var(--blue); border-right-color: transparent; animation: spin .9s linear infinite; }
.tool.done .ti { background: var(--good); } .tool.failed .ti { background: var(--bad); }
.tn { font-weight: 600; }
.tt { font-size: 12.5px; color: var(--mute); }
.te { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.shimmer { background: linear-gradient(90deg, var(--mute) 20%, var(--ink) 40%, var(--mute) 60%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.tb { padding: 0 12px 12px 40px; display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); border-top: 1px solid #f1efe9; padding-top: 10px; }
.tb p { margin: 0; }
.tq { color: var(--ink); }
.tstep::before { content: "› "; color: var(--mute); }
.tb a { color: var(--blue); font-weight: 600; text-decoration: none; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 500; z-index: 30; animation: rise .2s ease-out; }
.composer { border-radius: 14px; padding: 6px 6px 6px 14px; }
.composer button { min-height: 34px; border-radius: 9px; }
@media (prefers-reduced-motion: reduce) { .shimmer, .live.on, .agentpill i, .tool.working .ti { animation: none; } }

/* ===== Portfolio view and final polish ===== */
.main, .mappane { transition: flex-basis .45s cubic-bezier(.22,.8,.24,1), width .45s cubic-bezier(.22,.8,.24,1), margin .3s, opacity .3s; }
.bar .close { order: 0; }
body.portfolio .main { flex: 0 0 0 !important; width: 0; opacity: 0; overflow: hidden; }  /* !important: beats the width you set by dragging the divider (an inline style) */
body.portfolio .mappane { flex: 1; width: auto; max-width: none; margin: 0 !important; }
.pcard { position: absolute; left: 20px; top: 20px; width: 320px; padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,.93); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 50px -24px rgba(12,29,51,.55); display: none; gap: 10px; animation: rise .4s ease-out; }
body.portfolio .pcard { display: grid; }
.pcard .k { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.pcard h2 { margin: 0; font: 600 24px/1.15 var(--serif); }
.pstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.pstats b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.pstats span { font-size: 11.5px; color: var(--mute); }
.mapside { position: absolute; right: 16px; top: 16px; background: rgba(255,255,255,.9); display: none; }
body.portfolio.no-side .mapside { display: block; }
body.portfolio .ui-tag { display: none; }
.deal .prog { display: block; height: 2px; margin: 5px 0 0 13px; border-radius: 2px; background: rgba(28,34,48,.08); overflow: hidden; }
.deal .prog i { display: block; height: 100%; width: 0; background: var(--good); transition: width .6s ease; }
.page > * { animation: rise .4s ease-out both; }
.page > *:nth-child(2) { animation-delay: .05s; } .page > *:nth-child(3) { animation-delay: .1s; } .page > *:nth-child(4) { animation-delay: .15s; }
@media (max-width: 820px) { body.portfolio .main { display: none; } body.portfolio .mappane { height: 100vh; height: 100dvh; } .pcard { left: 12px; right: 12px; width: auto; top: 12px; } }
@media (prefers-reduced-motion: reduce) { .page > * { animation: none; } }
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--ink-2); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }

/* ===== Fix pass 1 ===== */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.kpis a { padding: 10px 14px; text-decoration: none; color: inherit; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.kpis a:first-child { border-left: 0; }
.kpis a:hover { background: #fbfaf7; }
.kpis span { font-size: 11.5px; color: var(--mute); }
.kpis b { font-size: 16px; font-variant-numeric: tabular-nums; }
.kpis b.good { color: var(--good); } .kpis b.warn { color: var(--warn); } .kpis b.bad { color: var(--bad); }
.photos { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; height: 240px; }
.photos div:first-child { grid-row: 1 / span 2; }
.live { background: var(--vc, transparent); }
.live.on { background: var(--blue); }
@media (max-width: 820px) {
  .mappane { width: 100% !important; max-width: none; height: 36vh; }
  body.portfolio .mappane { height: 78vh; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpis a:nth-child(3) { border-left: 0; }
  .kpis a:nth-child(n+3) { border-top: 1px solid var(--line); }
  .photos { height: 180px; }
}
@media (max-width: 820px) {
  .mappane, body.portfolio .mappane { flex: none; }
  body.portfolio .mappane { height: calc(100vh - env(safe-area-inset-bottom, 0px)); }
  body.portfolio .pcard { top: auto; bottom: 16px; }
  body.portfolio .mapside { display: block; left: 16px; right: auto; top: 16px; }
}
@media (max-width: 820px) {
  .bar { position: sticky; top: 0; z-index: 8; padding: 6px 10px; gap: 4px; }
  .bar .memo-l, .bar .memo-bar, .bar [data-toggle="map"] { display: none !important; }
  .bar .memo { margin-left: auto; gap: 8px; }
  .bar .sections { justify-content: flex-start; }
  .sections a:first-child { margin-left: 0; }
}
.page { padding-bottom: 45vh; }
@media (max-width: 820px) { .page { padding-bottom: 20vh; } }

/* Narrower memo by default; map gets the room */
.main { flex: 0 0 540px; }
.mappane { flex: 1; width: auto; max-width: none; }
body.no-map .main { flex: 1 !important; }
body.no-map .mappane { margin-right: 0; width: 0; flex: 0 0 0; }
.doc { padding: 24px 24px 130px; }
.photos { height: 200px; }
.facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.two { grid-template-columns: 1fr; }
.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis a:nth-child(3) { border-left: 0; } .kpis a:nth-child(n+3) { border-top: 1px solid var(--line); }
.composer-wrap { padding: 10px 20px 16px; }
.resizer { flex: 0 0 6px; cursor: col-resize; background: var(--line); position: relative; z-index: 4; transition: background .15s; }
.resizer:hover, .resizer:focus-visible, body.resizing .resizer { background: var(--blue); }
body.resizing { user-select: none; cursor: col-resize; }
body.portfolio .resizer, body.no-map .resizer { display: none; }
ul.doclist { list-style: none; margin: 0; padding: 0; display: grid; }
ul.doclist li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid #f1efe9; font-size: 13.5px; }
ul.doclist li:first-child { border-top: 0; }
ul.doclist a { color: var(--blue); text-decoration: none; font-weight: 500; }
ul.doclist span { color: var(--mute); font-size: 12px; }
ul.doclist.need b { display: block; font-weight: 600; color: var(--ink); font-size: 13.5px; }
ul.doclist.need small { color: var(--mute); }
@media (max-width: 1100px) { .main { flex-basis: 460px; } }
@media (max-width: 820px) { .resizer { display: none; } .main { flex: none; } }
.bar .close { order: 2; }
.orbit { position: absolute; right: 16px; bottom: 16px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--mute); display: grid; place-items: center; box-shadow: 0 6px 18px -8px rgba(0,0,0,.5); }
.orbit[aria-pressed="true"] { color: var(--blue); }
.orbit:hover { color: var(--ink); }
body.portfolio .orbit { display: none; }
.deal .prog { display: none; }

.jobs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 4px; }
.jobs-l { font-size: 12px; color: var(--blue); font-weight: 600; margin-right: 4px; }
.job { border: 1px solid #d6def9; background: var(--blue-soft); color: var(--blue); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 500; }
.job:hover { background: #e2e9fd; }
.jobsbtn { border: 0; background: none; color: var(--blue); font-size: 17px; width: 32px; min-height: 34px; padding: 0; }
.composer { align-items: flex-end; padding-left: 6px; }
.jobsmenu { position: absolute; left: 20px; right: 20px; bottom: 76px; max-height: 60vh; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 50px -20px rgba(28,34,48,.45); padding: 10px; display: grid; gap: 8px; z-index: 10; }
.jobsmenu[hidden] { display: none; }
.jm-g p { margin: 4px 8px; font-size: 11.5px; font-weight: 600; color: var(--mute); text-transform: uppercase; letter-spacing: .05em; }
.jm-i { display: grid; gap: 1px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 9px; }
.jm-i:hover { background: var(--blue-soft); }
.jm-i b { font-size: 13.5px; font-weight: 600; }
.jm-i small { font-size: 12px; color: var(--mute); }
.composer .jobsbtn { background: none; color: var(--blue); border-radius: 8px; min-height: 34px; padding: 0; width: 32px; }
.composer .jobsbtn:hover { background: var(--blue-soft); }

.finds { display: grid; gap: 8px; }
.find { border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 0 10px 10px 0; background: #fff; padding: 10px 14px; display: grid; gap: 6px; animation: rise .3s ease-out; }
.find.done { border-left-color: var(--good); } .find.fail { border-left-color: var(--bad); }
.find header { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center; font-size: 13.5px; }
.find .ti { width: 14px; height: 14px; border-radius: 50%; }
.find.working .ti { border: 2px solid var(--blue); border-right-color: transparent; animation: spin .9s linear infinite; }
.find.done .ti { background: var(--good); }
.find .fs { font-size: 12px; color: var(--mute); }
.find p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.find footer { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; }
.find footer a { color: var(--blue); font-weight: 600; text-decoration: none; }
.tag { font-size: 11px; font-weight: 600; color: var(--warn); background: #fbf1df; padding: 2px 8px; border-radius: 999px; }

.sim { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.sim .slider label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.sim .slider output { font-variant-numeric: tabular-nums; font-weight: 600; }
.simout { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: center; }
.simout span { display: block; font-size: 12px; color: var(--mute); }
.simout b { font-size: 17px; font-variant-numeric: tabular-nums; }
.simout b.good { color: var(--good); } .simout b.bad { color: var(--bad); }
@media (max-width: 820px) { .sim { grid-template-columns: 1fr; } }

/* Subtraction pass */
.step { grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; }
.step p { margin-bottom: 0; }
.btn.findit { background: #fff; border-color: #cdd7f7; color: var(--blue); font-weight: 600; white-space: nowrap; }
.btn.findit:hover { background: var(--blue-soft); border-color: var(--blue); }
.jobs { display: grid; gap: 0; padding: 4px 0 0; }
.jobs-l { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--mute); }
.jobrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #efece5; }
.jobrow b { display: block; font-size: 13.5px; font-weight: 600; }
.jobrow small { display: block; font-size: 12px; color: var(--mute); }
.ret { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ret div { padding: 14px 16px; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.ret div:first-child { border-left: 0; }
.ret span { font-size: 12px; color: var(--mute); }
.ret b { font: 600 28px/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.ret small { font-size: 11.5px; color: var(--mute); }
.ret b.good { color: var(--good); } .ret b.warn { color: var(--warn); } .ret b.bad { color: var(--bad); }
.linkbtn { border: 0; background: none; color: var(--blue); font: inherit; font-weight: 600; padding: 0; }
@media (max-width: 1100px) { .ret { grid-template-columns: 1fr; } .ret div { border-left: 0; border-top: 1px solid var(--line); } .ret div:first-child { border-top: 0; } }

details.jobs summary { list-style: none; cursor: pointer; color: var(--blue); font-weight: 600; font-size: 13px; padding: 6px 0; width: max-content; }
details.jobs summary::-webkit-details-marker { display: none; }
details.jobs[open] summary { color: var(--mute); }
.msg time { display: block; font-size: 10.5px; opacity: .55; margin-top: 3px; }

.vision { margin: 0; display: grid; gap: 6px; }
.vgrid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; height: 240px; border-radius: 12px; overflow: hidden; }
.vimg { border: 0; padding: 0; background: #ddd center / cover; cursor: zoom-in; transition: filter .2s; }
.vimg:hover { filter: brightness(1.06); }
.vimg.big { grid-row: 1 / span 2; }
.vision figcaption { font-size: 12px; color: var(--blue); }
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(12,18,28,.86); display: grid; place-items: center; align-content: center; gap: 10px; padding: 24px; cursor: zoom-out; animation: rise .2s ease-out; }
.lightbox img { max-width: min(1200px, 92vw); max-height: 80vh; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox p { color: #dfe4ee; font-size: 13px; margin: 0; }

/* Round 2 fixes */
#deals { gap: 2px; }
.deal { border-radius: 8px; margin: 0; }
.trow { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.tmemo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding-top: 6px; }
.tmemo .memo-bar { display: inline-block !important; width: 56px; height: 4px; }
.tmemo .memo-p { font-size: 12px; color: var(--mute); white-space: nowrap; }
.tmemo .btn { min-height: 30px; font-size: 12.5px; }
.step p.sub { margin: 2px 0 0; font-size: 12px; color: var(--mute); }
.step { align-items: center; }
.docs { display: grid; gap: 8px; }
.docrow { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 56px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
a.docrow:hover { border-color: var(--blue); background: #fbfcff; }
.dicon { width: 36px; height: 36px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; }
.docrow.missing .dicon { background: var(--side); color: var(--mute); }
.dmain b { display: block; font-size: 13.5px; font-weight: 600; }
.dmain small { font-size: 12px; color: var(--mute); }
.dact { font-size: 12.5px; font-weight: 600; color: var(--blue); }
.mapnav { position: absolute; right: 16px; bottom: 64px; z-index: 3; display: grid; background: rgba(255,255,255,.94); border-radius: 12px; box-shadow: 0 6px 18px -8px rgba(0,0,0,.5); overflow: hidden; }
.mapnav button { width: 38px; height: 36px; border: 0; background: none; font-size: 18px; color: var(--ink-2); display: grid; place-items: center; }
.mapnav button + button { border-top: 1px solid var(--line); }
.mapnav button:hover { background: var(--side); }
@media (max-width: 820px) { .trow { flex-direction: column; } .tmemo { justify-content: flex-start; } }
.trow { flex-direction: column; gap: 8px; }
.tmemo { justify-content: flex-start; padding-top: 0; }

/* ===== Demo parity: mirrors website/workspace.css .u22 computed styles ===== */
:root { --bg: #fbfaf6; --side: #f3f2ec; --line: #e4e2da; --ink: #0c1d33; --ink-2: #3c4a5c; --mute: #6b7584; --blue: #1439c6; --blue-soft: #eef1ff; --good: #1f7a4d; --bad: #a3471c; --warn: #a8661a; --serif: "Fraunces", Georgia, "Times New Roman", serif; }
body { font-size: 13.5px; line-height: 1.5; }
.side { border-right: 1px solid var(--line); padding: 16px 10px; }
.brand { font-size: 14px; }
.newdeal { font-size: 13px; color: #33445a; font-weight: 400; }
.search { font-size: 13px; }
#deals h3 { font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--mute); margin: 18px 8px 6px; }
.deal { padding: 9px 8px; border-radius: 8px; }
.deal:hover, .deal[aria-current="true"] { background: #e7e5dd; box-shadow: none; }
.deal b { font-size: 13px; font-weight: 500; }
.deal span { font-size: 11px; color: var(--mute); }
.bar { background: var(--bg); backdrop-filter: none; border-bottom-color: var(--line); }
.sections a { font-size: 13px; font-weight: 400; color: #5b6676; padding: 6px 11px; border-radius: 8px; }
.sections a:hover { color: var(--ink); }
.sections a.on { background: #ebe9e1; color: var(--ink); font-weight: 500; box-shadow: none; }
.sections a em { background: #a8661a; font-size: 10px; font-weight: 600; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; display: inline-grid; place-items: center; margin-left: 4px; }
.title h1 { font: 500 30px/1.5 var(--serif); letter-spacing: -.01em; }
.title p { font-size: 13px; color: var(--mute); }
section.s > h2 { font: 500 21px/1.5 var(--serif); }
section.s > p.lead, .prose { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.st { font: 500 10.5px/1.5 var(--sans); padding: 2px 8px; border-radius: 10px; }
.st.ok { background: #e3f1e8; }
.kpis, .ret, .sim, .card, .docrow, .find, .allow, details.tool { border-radius: 10px; border-color: var(--line); }
.kpis a { padding: 11px 13px; }
.kpis span, .ret span, .facts span, .simout span { font-size: 11px; color: var(--mute); }
.kpis b, .facts b { font-size: 15px; font-weight: 600; }
.ret div { padding: 11px 13px; }
.ret b { font: 500 27px/1 var(--serif); margin: 6px 0 4px; }
.ret small, .facts small { font-size: 11px; color: var(--mute); }
.big { font-weight: 500; }
.sim { padding: 14px 16px; gap: 14px 22px; }
.sim .slider label { font-size: 12px; font-weight: 400; color: var(--ink-2); }
.photos, .vgrid { border-radius: 8px; }
.facts { border-top-color: var(--line); }
.btn { min-height: 0; padding: 7px 13px; border-radius: 7px; border-color: #d5d9e2; font-size: 12.5px; font-weight: 500; }
.btn:hover { border-color: var(--blue); }
.btn.pri { padding: 7px 15px; font-weight: 600; }
.btn.findit { border-color: #d5d9e2; font-weight: 400; font-size: 12px; padding: 5px 11px; min-height: 0; }
.tmemo .btn { min-height: 0; padding: 6px 12px; border: 1px solid var(--blue); color: var(--blue); background: #fff; font-weight: 600; }
.step b, .jobrow b, .dmain b { font-size: 13.5px; }
.step p.sub, .dmain small, .jobrow small { font-size: 12px; color: var(--mute); }
.composer { border-radius: 12px; padding: 7px 7px 7px 8px; box-shadow: 0 6px 18px -10px #0c1d3340; font-size: 13px; }
.composer input::placeholder, .composer textarea::placeholder { color: #8a93a0; }
.composer button:not(.jobsbtn) { min-height: 0; padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.resizer { flex-basis: 1px; background: var(--line); }
.resizer::after { content: ""; position: absolute; inset: 0 -4px; }
.mapnav, .orbit { border-radius: 16px; }
.mapnav button { width: 32px; height: 32px; font-size: 16px; }
.orbit { width: 32px; height: 32px; }

/* Public preview (signed-out /workspace): read-only banner and sign-in prompts. */
.pubbar { padding: 6px 16px; font-size: 12.5px; color: var(--ink-2); background: var(--side); border-bottom: 1px solid var(--line); text-align: center; }
.pubbar a, .signin-note a { color: var(--blue); font-weight: 600; text-decoration: none; }
.pubbar a:hover, .signin-note a:hover { text-decoration: underline; }
.signin-note { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--blue-soft); color: var(--ink-2); font-size: 13px; }
.composer-wrap > .signin-note { margin: 0 0 8px; }

/* Step between opportunities */
.stepper { display: flex; align-items: center; gap: 2px; margin-left: auto; font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.stepper .icon { font-size: 20px; line-height: 1; color: var(--ink); }
.stepper .icon:hover { background: rgba(12,29,51,.06); }
.stepper span { min-width: 40px; text-align: center; }
body.portfolio .stepper { display: none; }

/* QA pass (demo): placeholders, narrow tab row, sticky-bar anchors, map controls */
.ret b.na { font-size: 20px; line-height: 1.35; color: var(--mute); }
@media (max-width: 1100px) { .sections { gap: 0; } .sections a { padding: 6px 7px; } }
@media (max-width: 820px) {
  section.s, #s-call { scroll-margin-top: 92px; }
  .sections a { padding: 6px 7px; font-size: 12.5px; }
  body.portfolio .mapnav { top: 16px; bottom: auto; }
}
.bh { display: flex; align-items: center; gap: 10px; margin: 22px 0 6px; font-size: 15px; font-weight: 600; }
.bh .btn { padding: 2px 10px; font-size: 12.5px; }
.blist { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.45; }
.blist small { color: var(--mute); font-size: 12px; }
.ladder { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ladder li { font-size: 12.5px; padding: 3px 9px; border-radius: 99px; background: var(--side); color: var(--mute); }
.ladder li.done { color: var(--ink-2); }
.ladder li.done::before { content: '✓ '; }
.ladder li.on { background: var(--blue); color: #fff; font-weight: 600; }
.msg.pending { opacity: .7; }
.msg .saving { display: block; margin-top: 4px; font-size: 11.5px; color: var(--mute); }
.tool.waiting .ti, .find.waiting .ti { background: var(--mute); opacity: .5; }
.wslist { border-top: 1px solid var(--line); margin-top: 8px; }
.ws { border-bottom: 1px solid var(--line); }
.ws > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(88px, max-content) auto minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 12px 0; }
.ws > summary::-webkit-details-marker { display: none; }
.ws > summary b { font-weight: 600; }
.ws > summary em { font-style: normal; font-size: 12px; font-weight: 600; color: #fff; background: var(--blue); border-radius: 99px; padding: 0 7px; }
.ws > summary span { color: var(--mute); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-column: 3; }
.ws[open] > summary span { visibility: hidden; }
.ws > div, .ws > .ladder, .ws > p, .ws > h3, .ws > ol, .ws > ul { margin-bottom: 12px; }
.pcard { max-height: calc(100% - 40px); overflow-y: auto; }
#desk { display: grid; gap: 0; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 2px; }
#desk .ws > summary { grid-template-columns: minmax(72px, max-content) auto minmax(0, 1fr); padding: 9px 0; font-size: 14px; }
#desk .ws > summary span { font-size: 13px; }
#desk .blist { font-size: 13px; padding-left: 18px; margin-bottom: 10px; }
.deskf { display: flex; gap: 6px; margin-top: 10px; }
.deskf input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.deskf .btn { padding: 6px 12px; font-size: 13px; }
/* Chat: streamed answers and the blocks the agent may add. */
.msg.ai p { margin: 0 0 8px; } .msg.ai p:last-of-type { margin-bottom: 4px; }
.msg.ai ul { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 3px; }
.msg .thinking { display: flex; align-items: center; gap: 8px; color: var(--mute); font-size: 14px; }
.msg .thought { color: var(--mute); font-size: 13px; font-style: italic; border-left: 2px solid var(--line); padding-left: 10px; }
.blk { margin: 10px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel, #fff); }
.blk .bt { margin: 0 0 6px; font-weight: 600; font-size: 14px; } .blk .bt small { font-weight: 400; color: var(--mute); }
.blk.task { display: grid; gap: 3px; } .blk.task .tag { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.blk.task small { color: var(--mute); } .blk.task .btn { justify-self: start; margin-top: 4px; padding: 3px 10px; font-size: 12.5px; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; } .chart .base { stroke: #9aa1ab; stroke-width: 1; }
.chart .ax { font-size: 12px; fill: var(--mute); }
.msg.ai:has(.blk) { max-width: 100%; }
.chart path, .chart circle { cursor: default; } .chart path:hover { opacity: .85; }
.clegend { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; font-size: 12.5px; color: var(--ink-2, #444); }
.clegend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.tview summary { cursor: pointer; font-size: 12.5px; color: var(--mute); margin-top: 4px; }
.tscroll { overflow-x: auto; }
.btab { border-collapse: collapse; width: 100%; font-size: 13px; }
.btab th { text-align: left; font-weight: 600; color: var(--mute); border-bottom: 1px solid var(--line); padding: 5px 8px 5px 0; }
.btab td { border-bottom: 1px solid var(--line); padding: 5px 8px 5px 0; } .btab td.n { font-variant-numeric: tabular-nums; }
.actbtn { margin: 8px 8px 0 0; }
.msg.ai.streaming { max-width: 100%; }
.msg.ai.streaming time { display: none; }
/* Clickable listing photos */
.photos [data-photo] { cursor: zoom-in; position: relative; transition: filter .15s; }
.photos [data-photo]:hover { filter: brightness(1.06); }
.photos .more { position: absolute; right: 8px; bottom: 8px; background: rgba(12,18,28,.72); color: #fff; font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; }
.lightbox.gallery { cursor: default; }
.lightbox .gnav, .lightbox .gclose { position: fixed; border: 0; background: rgba(255,255,255,.14); color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; }
.lightbox .gnav:hover, .lightbox .gclose:hover { background: rgba(255,255,255,.26); }
.lightbox .prev { left: 18px; top: 50%; } .lightbox .next { right: 18px; top: 50%; } .lightbox .gclose { right: 18px; top: 18px; font-size: 24px; }
/* Business plan */
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 8px; font-size: 12.5px; color: var(--mute); }
.presets span { margin-right: 4px; }
.chip { border: 1px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 99px; padding: 4px 11px; font: inherit; font-size: 12.5px; cursor: pointer; }
.chip:hover { border-color: var(--blue); color: var(--blue); }
table.plan { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
table.plan td { padding: 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.plan td small { display: block; color: var(--mute); font-size: 12px; }
table.plan td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 12px; }
table.plan tr.h td { padding-top: 16px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); border-bottom: 1px solid var(--ink-2, #333); }
table.plan tr.t td { font-weight: 600; }
.planbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 14px 0 4px; }
.ret b.na { color: var(--mute); }
/* Where we landed: the deal's conclusions, first on the page */
.land { margin: 6px 0 8px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.land-h { display: flex; align-items: flex-start; gap: 12px; }
.chipst { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .02em; padding: 4px 10px; border-radius: 99px; background: var(--side); color: var(--ink-2); margin-top: 2px; }
.chipst.good { background: #e6f4ec; color: var(--good); } .chipst.warn { background: #fbf1e1; color: #9a5b00; } .chipst.bad { background: #fbe7e6; color: var(--bad); }
.verdict { margin: 0; font: 600 18px/1.35 var(--serif, inherit); color: var(--ink); }
.lnums { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 16px 0 4px; background: #fff; }
.lnums div { padding: 10px 12px; display: grid; gap: 1px; box-shadow: 0 0 0 .5px var(--line); }
.lnums span { font-size: 12px; color: var(--mute); } .lnums b { font-size: 18px; font-variant-numeric: tabular-nums; } .lnums small { font-size: 11.5px; color: var(--mute); }
.land .bh small { font-weight: 500; color: var(--mute); font-size: 12.5px; }
.pbar { padding: 50px 8px 46px; }
.ptrack { position: relative; height: 6px; border-radius: 99px; background: linear-gradient(90deg, #e6f4ec, #fbf1e1 60%, #fbe7e6); }
.ptrack .zone { position: absolute; top: -3px; height: 12px; border-radius: 99px; background: rgba(31,122,79,.22); border: 1px solid rgba(31,122,79,.45); }
.pm { position: absolute; top: 50%; transform: translate(-50%, 0); display: grid; justify-items: center; white-space: nowrap; }
.pm::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--ink-2); transform: translateY(-50%); }
.pm b { font-size: 13px; font-variant-numeric: tabular-nums; } .pm small { font-size: 11px; color: var(--mute); }
.pm.up { top: auto; bottom: 50%; } .pm.up::before { order: 3; transform: translateY(50%); }
.pm.tgt::before { background: var(--good); border-color: var(--good); } .pm.ask::before { background: var(--bad); border-color: var(--bad); }
table.cases { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.cases th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--mute); padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); }
table.cases td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; vertical-align: top; }
table.cases td small { display: block; color: var(--mute); font-size: 12px; }
table.cases tr.hl td { background: #f2f7ff; } table.cases tr.hl td:first-child { box-shadow: inset 3px 0 var(--blue); padding-left: 8px; }
ol.tests { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
ol.tests li { background: #fff; padding: 0 12px; }
ol.tests summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 9px 0; }
ol.tests summary::-webkit-details-marker { display: none; }
ol.tests details small { display: block; padding: 0 0 10px 28px; }
ol.tests .ts { font-size: 15px; color: var(--mute); line-height: 1.3; } ol.tests li.holds .ts, ol.tests li.holds em { color: var(--good); } ol.tests li.fails .ts, ol.tests li.fails em { color: var(--bad); } ol.tests li.testing .ts, ol.tests li.testing em { color: #9a5b00; }
ol.tests b { font-size: 14px; font-weight: 600; } ol.tests small { color: var(--mute); font-size: 12.5px; } ol.tests em { font-style: normal; font-size: 12px; color: var(--mute); }
.land2 { margin-top: 14px; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
details.fold { background: #fff; padding: 0 12px; }
details.fold > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; padding: 10px 0; font-size: 14px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary span { color: var(--mute); font-size: 12.5px; } details.fold[open] > summary span::after { content: ' ▴'; } details.fold:not([open]) > summary span::after { content: ' ▾'; }
details.fold .blist { margin-bottom: 12px; font-size: 13.5px; }
ol.plist { margin: 6px 0 8px; padding-left: 22px; display: grid; gap: 6px; font-size: 15px; }
details.orig { margin: 14px 0; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; background: #fff; }
details.orig > summary { cursor: pointer; padding: 11px 0; font-size: 13.5px; color: var(--mute); }
details.orig[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.chip.on { border-color: var(--blue); color: var(--blue); background: #f2f7ff; }
.chip.mine i { font-style: normal; margin-left: 6px; color: var(--mute); } .chip.mine i:hover { color: var(--bad); }
.chip.add { border-style: dashed; }
@media (max-width: 820px) { .land { padding: 14px; } .verdict { font-size: 16px; } }
/* Bear / Base / Bull */
#scenCmp { margin: 4px 0 10px; }
table.scen tr.scenrow { cursor: pointer; } table.scen tr.scenrow:hover td { background: #f7f9fc; } table.scen tr.on td { background: #f2f7ff; }
table.scen td.good { color: var(--good); font-weight: 600; } table.scen td.warn { color: #9a5b00; font-weight: 600; } table.scen td.bad { color: var(--bad); font-weight: 600; }
table.scen tr.bear td:first-child b { color: var(--bad); } table.scen tr.base td:first-child b { color: var(--blue); } table.scen tr.bull td:first-child b { color: var(--good); }
table.scen .del { font-style: normal; color: var(--mute); padding: 0 4px; } table.scen .del:hover { color: var(--bad); }
.savegrp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
/* Scenario drawers */
table.scen tr.scenrow td:first-child { min-width: 150px; }
table.scen .chev { display: inline-block; width: 14px; color: var(--mute); transition: transform .15s; }
table.scen tr.open .chev { transform: rotate(90deg); }
table.scen .sin { display: block; color: var(--mute); font-size: 12px; margin-left: 14px; }
table.scen tr.open td { background: #f2f7ff; border-bottom-color: transparent; }
tr.sdrawer > td { background: #f7f9fc; padding: 4px 12px 12px !important; }
.sdrawer fieldset { border: 0; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 18px; }
.sdrawer legend { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); padding: 0; margin-bottom: 2px; }
label.mini { display: grid; gap: 1px; font-size: 12.5px; color: var(--ink-2); }
label.mini span { display: flex; justify-content: space-between; } label.mini output { font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; }
label.mini input { width: 100%; accent-color: var(--blue); }
.sdact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.sdact .note { margin: 0; }
/* Cleaner deal page: three top tiles in one row, compact result row, small pickers */
.kpis.k3, .kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.kpis.k3 a { border-left: 1px solid var(--line) !important; border-top: 0 !important; } .kpis.k3 a:first-child { border-left: 0 !important; }
.ret.ret3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.ret.ret3 > div { padding: 10px 12px !important; border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important; }
.ret.ret3 > div:first-child { border-left: 0 !important; }
.ret.ret3 b { font-size: 22px !important; line-height: 1.2; }
.ret.ret3 small { font-size: 11.5px; }
h3.sub3 { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 8px; font-size: 15px; font-weight: 600; }
h3.sub3 small { font-weight: 400; font-size: 12.5px; color: var(--mute); }
h3.planname { margin: 4px 0 2px; font: 600 19px/1.3 var(--serif, inherit); }
.presets { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 10px 0 8px; }
label.pick { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mute); }
label.pick select { font: inherit; font-size: 13px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 5px 26px 5px 9px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%); background-position: calc(100% - 13px) 55%, calc(100% - 9px) 55%; background-size: 4px 4px; background-repeat: no-repeat; cursor: pointer; }
label.pick select:hover { border-color: var(--blue); }
/* Agent steps, undo, goal, slash menu */
ul.steps { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 3px; font-size: 13px; color: var(--ink-2); }
ul.steps li::before { content: '✓ '; color: var(--good); } ul.steps li.bad { color: var(--bad); } ul.steps li.bad::before { content: '✕ '; color: var(--bad); }
ul.steps.live li:last-child::before { content: '● '; color: var(--blue); }
details.changes { margin: 0 0 8px; font-size: 13px; }
details.changes > summary { cursor: pointer; color: var(--good); list-style: none; } details.changes > summary::-webkit-details-marker { display: none; }
details.changes .linkbtn { margin-left: 8px; font-size: 12.5px; }
.goalbar { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; margin: 14px 0 0; padding: 10px 14px; border: 1px solid #cfe0fb; background: #f2f7ff; border-radius: 12px; font-size: 14px; }
.goalbar.met { border-color: #bfe3cc; background: #eef8f2; }
.goalbar .gi { color: var(--blue); font-size: 16px; line-height: 1.3; } .goalbar.met .gi { color: var(--good); }
.goalbar small { display: block; color: var(--mute); font-size: 12.5px; margin-top: 2px; }
.slashmenu { max-width: 760px; margin: 0 auto 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px -18px rgba(12,29,51,.4); overflow: hidden; }
.slashmenu .sl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 2px 12px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.slashmenu .sl.on, .slashmenu .sl:hover { background: #f2f7ff; }
.slashmenu .sl b { font-weight: 600; color: var(--blue); } .slashmenu .sl span { color: var(--ink-2); } .slashmenu .sl small { grid-column: 2; color: var(--mute); }
#scenCmp, #scenCmp * { overflow-anchor: none; }
/* Messages: formatted notes, long ones folded */
.msg h4 { margin: 10px 0 4px; font-size: 14px; font-weight: 700; } .msg h4:first-child { margin-top: 0; }
.msg p { margin: 0 0 8px; } .msg ul, .msg ol { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 3px; }
.msg .clamp { max-height: 190px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.msg.expanded .clamp { max-height: none; -webkit-mask-image: none; mask-image: none; }
.msg .more { display: block; margin-top: 4px; font-size: 13px; }
/* ---- Type scale and density (final word; earlier layers had shrunk the text) ---- */
@media (min-width: 821px) { .main { flex: 0 0 clamp(540px, 48vw, 760px); } }
body { font-size: 15px; line-height: 1.55; }
.doc { padding: 24px 28px 120px; }
.page { gap: 30px; padding-bottom: 30vh; }
.title h1 { font: 600 34px/1.15 var(--serif); }
section.s { gap: 14px; }
section.s > h2 { font: 600 24px/1.25 var(--serif); }
section.s > p.lead, .prose { font-size: 15px; line-height: 1.55; }
.note { font-size: 13px; }
/* labels and key figures */
.kpis span, .ret span, .facts span, .lnums span, .simout span { font-size: 12.5px; }
.kpis a { padding: 12px 16px; }
.kpis b { font-size: 22px !important; font-weight: 600; }
.facts b { font-size: 19px; }
.ret.ret3 b { font-size: 30px !important; }
.ret.ret3 > div { padding: 14px 16px !important; }
.lnums b { font-size: 23px; } .lnums small, .ret small, .facts small { font-size: 12.5px; }
.verdict { font-size: 21px; }
.chipst { font-size: 13px; }
/* reading text */
.msg { font-size: 15px; }
.blist, ol.plist { font-size: 15px; }
.ws > summary { font-size: 15px; } .ws > summary span { font-size: 14px; }
.step b { font-size: 15px; } .step p { font-size: 14px; }
ol.tests b { font-size: 15px; } ol.tests small { font-size: 13.5px; }
table.plan { font-size: 15px; } table.plan td small { font-size: 12.5px; }
table.cases { font-size: 15px; } table.cases td small { font-size: 12.5px; } table.cases th { font-size: 12px; }
.slider label, .sim .slider label { font-size: 14px; }
label.mini { font-size: 13.5px; }
h3.sub3 { font-size: 17px; } .bh { font-size: 16px; }
.composer textarea, .composer input { font-size: 15px; }
/* Key numbers: one row when it fits, otherwise two columns with the last tile full width (never a lone orphan). */
.land { container-type: inline-size; }
.lnums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lnums div:last-child:nth-child(odd) { grid-column: 1 / -1; }
@container (min-width: 600px) {
  .lnums { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }
  .lnums div:last-child:nth-child(odd) { grid-column: auto; }
  .lnums b { font-size: 21px; }
}
/* Long conversations: day dividers, earlier messages on demand, search */
.daysep { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; color: var(--mute); font-size: 12px; font-weight: 600; }
.daysep::before, .daysep::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.msgsearch { width: 100%; box-sizing: border-box; margin: 4px 0 10px; font: inherit; font-size: 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }

/* ================= Design pass: one voice ================= */
/* Serif is for names only: the deal, the sections, the verdict. Every number is the sans, with even-width digits. */
.ret b, .ret.ret3 b, .big, .lnums b, .kpis b, .facts b, .pm b, table.cases td, table.plan td.n, .hero-meta b {
  font-family: var(--sans) !important; font-weight: 700; letter-spacing: -.015em; font-variant-numeric: tabular-nums lining-nums;
}
section.s > h2 { font: 600 26px/1.2 var(--serif) !important; letter-spacing: -.01em; margin: 0; }
.verdict, h3.planname { font-family: var(--serif); font-weight: 500; letter-spacing: -.005em; }

/* The hero: the property first. Its best photo, the name over a soft fade, the few things you check every time. */
.page > .hero { margin: -24px -28px 0; }
.hero { position: relative; min-height: 180px; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px 28px 22px; color: var(--ink); border-bottom: 1px solid var(--line); }
.hero.has-photo { min-height: 360px; color: #fff; background: #1d2530 var(--hero) center 45% / cover no-repeat; border-bottom: 0; overflow: hidden; }
.hero.has-photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,14,24,.10) 0%, rgba(8,14,24,.02) 22%, rgba(8,14,24,.38) 46%, rgba(8,14,24,.70) 72%, rgba(8,14,24,.86) 100%); }
.hero.has-photo h1, .hero.has-photo p, .hero.has-photo .hero-meta a { text-shadow: 0 1px 12px rgba(8,14,24,.45); }
.hero > * { position: relative; }
.hero h1 { margin: 0; font: 500 42px/1.08 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.hero p { margin: 6px 0 0; font-size: 15px; opacity: .88; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.hero-meta a { display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 12px; border-radius: 99px; font-size: 13px; text-decoration: none; color: inherit; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero:not(.has-photo) .hero-meta a { background: #fff; border-color: var(--line); }
.hero-meta b { font-size: 14px; }
.hero-meta b.good { color: #7ee2a8; } .hero-meta b.warn { color: #ffd08a; } .hero-meta b.bad { color: #ff9e98; }
.hero:not(.has-photo) .hero-meta b.good { color: var(--good); } .hero:not(.has-photo) .hero-meta b.warn { color: #9a5b00; } .hero:not(.has-photo) .hero-meta b.bad { color: var(--bad); }
.hbtn { font: 600 13px/1 var(--sans); padding: 9px 14px; border-radius: 99px; cursor: pointer; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.92); color: var(--ink); }
.hbtn:hover { background: #fff; }
.hbtn.export { position: absolute; top: 16px; right: 18px; z-index: 1; background: rgba(8,14,24,.35); color: #fff; border-color: rgba(255,255,255,.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero:not(.has-photo) .hbtn.export { background: #fff; color: var(--ink); border-color: var(--line); }
.hero-meta .hbtn { margin-left: auto; }
@keyframes heroIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.hero.has-photo { animation: heroIn .7s cubic-bezier(.2,.7,.2,1) both; }
@media (max-width: 820px) { .page > .hero { margin: -16px -16px 0; } .hero.has-photo { min-height: 280px; } .hero h1 { font-size: 32px; } .hero-meta .hbtn { margin-left: 0; } }

/* Calmer surfaces: one card style, quieter lines, the summary as the lead card. */
.land { border-radius: 16px; box-shadow: 0 1px 2px rgba(12,29,51,.04), 0 12px 32px -18px rgba(12,29,51,.18); margin-top: 0; }
.facts { border-top: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.facts div { padding: 12px 14px; border: 0; box-shadow: 0 0 0 .5px var(--line); }
section.s { scroll-margin-top: 8px; }
/* Property facts: one row when it fits, otherwise pairs with the last tile full width. */
#s-property { container-type: inline-size; }
.facts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.facts div:last-child:nth-child(odd) { grid-column: 1 / -1; }
@container (min-width: 620px) { .facts { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .facts div:last-child:nth-child(odd) { grid-column: auto; } }
.page { grid-template-columns: minmax(0, 1fr); } /* children never widen the page; wide tables scroll inside .tscroll */
@container (max-width: 480px) { .land-h { flex-direction: column; gap: 8px; } .verdict { font-size: 19px; } }

/* Financials: the three results stay pinned while you move the sliders below them. */
#s-numbers .ret { position: static; }
/* Thesis tests, opened */
ol.tests .tbody { padding: 0 0 12px 28px; display: grid; gap: 8px; }
ol.tests .how { margin: 0; font-size: 13.5px; color: var(--ink-2); } ol.tests .how span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.tstat { display: flex; flex-wrap: wrap; gap: 6px; }
.tstat .seg { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 4px 11px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--ink-2); }
.tstat .seg.on.s-holds { background: #e6f4ec; border-color: var(--good); color: var(--good); }
.tstat .seg.on.s-fails { background: #fbe7e6; border-color: var(--bad); color: var(--bad); }
.tstat .seg.on.s-testing { background: #fbf1e1; border-color: #c98500; color: #9a5b00; }
.tstat .seg.on.s-untested { background: var(--side); border-color: var(--ink-2); }
.tevid { width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; background: #fff; color: var(--ink); }
.tact { display: flex; align-items: center; gap: 10px; } .tact small { color: var(--mute); font-size: 12px; }
.planfolds { margin: 14px 0; }
/* ================= To do: one simple list ================= */
.todo { display: grid; gap: 14px; }
.tadd { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 12px; background: #fff; }
.tadd:focus-within { border-style: solid; border-color: #b9cff5; box-shadow: 0 0 0 3px #eaf1fd; }
.tadd .plus { color: var(--mute); font-size: 18px; line-height: 1; }
.tadd input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 15px; background: none; color: var(--ink); }
.tgroup h4 { margin: 0 0 6px 2px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.tgroup h4 em { font-style: normal; font-weight: 500; margin-left: 4px; }
ul.tlist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.trow { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; border-top: 1px solid var(--line); }
.trow:first-child { border-top: 0; }
.tcheck { width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 1.5px solid #b8bec8; background: #fff; cursor: pointer; font-size: 11px; line-height: 1; color: #fff; display: grid; place-items: center; }
.tcheck:hover { border-color: var(--good); }
.trow.isdone .tcheck { background: var(--good); border-color: var(--good); }
.trow.isdone .ttext { color: var(--mute); text-decoration: line-through; text-decoration-color: #c5cad2; }
.trow.leaving { opacity: .35; transition: opacity .25s; }
.tmain { min-width: 0; cursor: default; }
.ttext { font-size: 15px; line-height: 1.45; color: var(--ink); }
.twhy { display: none; margin: 6px 0 0; font-size: 13px; color: var(--mute); line-height: 1.45; }
.trow.open .twhy { display: block; } .tmain:has(.twhy) { cursor: pointer; }
.tside { display: flex; align-items: center; gap: 6px; }
.tside .owner { font-size: 12px; color: var(--mute); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; }
.tside .tstart { padding: 3px 11px; font-size: 12.5px; }
.ticon { border: 0; background: none; width: 24px; height: 24px; border-radius: 6px; color: var(--mute); cursor: pointer; font-size: 12px; opacity: 0; }
.trow:hover .ticon, .ticon:focus { opacity: 1; } .ticon:hover { color: var(--bad); background: var(--side); }
@media (hover: none) { .ticon { opacity: .6; } }
.tcap { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
details.tfold { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
details.tfold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 11px 14px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
details.tfold > summary::-webkit-details-marker { display: none; }
details.tfold > summary::before { content: '›'; color: var(--mute); transition: transform .15s; } details.tfold[open] > summary::before { transform: rotate(90deg); }
details.tfold > summary em { font-style: normal; font-weight: 500; color: var(--mute); font-size: 12.5px; }
details.tfold > summary .linkbtn { margin-left: auto; font-size: 12.5px; font-weight: 500; }
details.tfold ul.tlist { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; }
ol.bq { margin: 0; padding: 10px 16px 12px 34px; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); border-top: 1px solid var(--line); }
.tempty { margin: 0; padding: 18px; text-align: center; color: var(--mute); font-size: 14px; border: 1px dashed var(--line); border-radius: 12px; }
.toast .linkbtn { color: #9cc3ff; margin-left: 8px; }
/* ================= Polish pass ================= */
/* Documents: one quiet list per group instead of a stack of cards */
h4.dsub { margin: 18px 0 6px 2px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
h2 + h4.dsub { margin-top: 4px; }
.docs { display: block; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.docs .docrow { border: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); margin: 0; background: none; padding: 12px 14px; }
.docs .docrow:first-child { border-top: 0; }
.docs .docrow:hover { background: #fafbfd; }
.docs .docrow.missing .dicon { opacity: .45; }
.docs .findit { padding: 4px 12px; font-size: 12.5px; }
/* Pinned results: a little air above the table they sit over */
#s-numbers .ret { margin-bottom: 14px; }
.vision figcaption { font-size: 12px; color: var(--mute); }
/* The three numbers lead Financials and say which plan they show */
#s-numbers .ret .retfor { grid-column: 1 / -1; margin: 0; padding: 7px 14px; font-size: 12px; color: var(--mute); border-top: 1px solid var(--line); background: #fcfcfb; }
#s-numbers .ret { overflow: hidden; }
#s-numbers .ret + h3.sub3 { margin-top: 18px; }
/* Raising the money: one step at a time */
.tcap { padding: 14px 16px; }
.capstep { display: grid; gap: 8px; }
.caphead { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; } .caphead span { font-size: 12.5px; color: var(--mute); }
.capbar { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; } .capbar i { height: 5px; border-radius: 99px; background: var(--side); }
.capbar i.done { background: #9fd4b4; } .capbar i.on { background: var(--blue); }
.capnow { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); } .capnow b { color: var(--ink); }
.capnext { margin: 0; font-size: 12.5px; color: var(--mute); }
.capneed { margin: 4px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
/* Financials: new scenario link and the numbers heading */
.linkbtn.newscen { margin: 8px 0 4px; font-size: 13px; }
/* Every listing photo, as a grid; tap to open the viewer */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin: 4px 0 6px; }
.pthumb { padding: 0; border: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--side); cursor: zoom-in; }
.pthumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease, filter .2s; }
.pthumb:hover img { transform: scale(1.04); filter: brightness(1.05); }
.pcount { margin: 0 0 14px; font-size: 12.5px; color: var(--mute); }
/* A task opens in place: why it matters, then clear actions */
.trow { grid-template-columns: 22px minmax(0, 1fr) auto; }
.trow .ttext { all: unset; display: block; cursor: pointer; font-size: 15px; line-height: 1.45; color: var(--ink); }
.trow .ttext:hover { color: var(--blue); } .trow .ttext:focus-visible { outline: 2px solid #b9cff5; border-radius: 4px; }
.trow .tdetail { display: none; margin-top: 10px; }
.trow.open { background: #f7f9fc; } .trow.open .tdetail { display: grid; gap: 10px; }
.trow .twhy { display: block !important; margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.tdact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tdact .btn { padding: 6px 14px; font-size: 13px; }
.tdact .tdel { margin-left: auto; color: var(--mute); font-size: 13px; } .tdact .tdel:hover { color: var(--bad); }
.trow > .owner { font-size: 12px; color: var(--mute); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; align-self: start; margin-top: 2px; }
/* Working a task with the agent: a prompt, live progress, the answer */
.tprompt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 8px 8px 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.tprompt:focus-within { border-color: #b9cff5; box-shadow: 0 0 0 3px #eaf1fd; }
.tprompt textarea { border: 0; outline: 0; resize: none; font: inherit; font-size: 14px; line-height: 1.45; background: none; color: var(--ink); min-height: 40px; }
.tprompt .btn { padding: 7px 16px; }
.tlive, .tl-done { padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; }
.tl-status { display: flex; align-items: center; gap: 8px; color: var(--blue); font-weight: 600; font-size: 13px; }
.tlive .steps, .tl-done .steps { margin: 8px 0 4px; }
.tl-text { color: var(--ink-2); line-height: 1.5; margin-top: 6px; } .tl-text p { margin: 0 0 6px; }
.tl-done > b { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--good); }
.tl-done .linkbtn { font-size: 12.5px; margin-top: 4px; }
.trow.busy { background: #f5f8ff; }
.trow .tcheck .dot.spin { width: 12px; height: 12px; border-width: 2px; }
.tdact { gap: 14px; } .tdact .linkbtn { font-size: 13px; }
/* ================= Investment memo ================= */
.mv-view { position: fixed; inset: 0; z-index: 60; background: #eeede8; overflow-y: auto; animation: rise .2s ease-out; }
.mv-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: rgba(250,250,247,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.mv-bar .grow { flex: 1; }
.mv-doc { max-width: 820px; margin: 28px auto 60px; padding: 0 16px; }
.mv-loading { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 80px 0; color: var(--mute); }
.imemo { background: #fff; border-radius: 6px; box-shadow: 0 30px 60px -30px rgba(12,29,51,.35); padding: 48px 56px 40px; color: var(--ink); font-size: 14.5px; line-height: 1.55; }
.imemo .mphoto { height: 240px; margin: -48px -56px 28px; border-radius: 6px 6px 0 0; background: center / cover; }
.imemo .mkicker { margin: 0; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.imemo h1 { margin: 6px 0 4px; font: 500 36px/1.1 var(--serif); letter-spacing: -.015em; }
.imemo .msub { margin: 0 0 8px; color: var(--ink-2); }
.imemo section { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.imemo h2 { margin: 0 0 12px; font: 600 20px/1.25 var(--serif); }
.imemo h3 { margin: 18px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.imemo .mverdict { margin: 0; font: 500 18px/1.4 var(--serif); } .imemo .mverdict .chipst { font-family: var(--sans); vertical-align: 2px; margin-right: 6px; }
.imemo .mnums { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; margin-top: 16px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.imemo .mnums div { padding: 10px 12px; box-shadow: 0 0 0 .5px var(--line); display: grid; }
.imemo .mnums span { font-size: 11.5px; color: var(--mute); } .imemo .mnums b { font-size: 19px; font-variant-numeric: tabular-nums; } .imemo .mnums small { font-size: 11.5px; color: var(--mute); }
.imemo .mline { margin: 0 0 6px; font-size: 13px; color: var(--ink-2); }
.imemo .mcols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.imemo table.mtab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.imemo table.mtab td, .imemo table.mtab th { padding: 6px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.imemo table.mtab td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 12px; }
.imemo table.mtab tr.t td { font-weight: 600; }
.imemo table.mtab td small { display: block; color: var(--mute); font-size: 12px; }
.imemo table.mscen th { font-size: 11.5px; font-weight: 600; color: var(--mute); } .imemo table.mscen td { text-align: left !important; }
.imemo ul, .imemo ol { margin: 0; padding-left: 20px; display: grid; gap: 5px; } .imemo .msrc { font-size: 12px; color: var(--mute); word-break: break-all; }
.imemo footer { margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--mute); }
body.mv-open { overflow: hidden; }
@media (max-width: 700px) { .imemo { padding: 28px 22px; } .imemo .mphoto { margin: -28px -22px 22px; height: 170px; } .imemo .mcols { grid-template-columns: 1fr; gap: 0; } .imemo h1 { font-size: 28px; } }
@media print {
  @page { margin: 14mm; }
  body.mv-open > *:not(.mv-view) { display: none !important; }
  body.mv-open { overflow: visible; background: #fff; }
  .mv-view { position: static; overflow: visible; background: #fff; animation: none; }
  .mv-bar { display: none; } .mv-doc { margin: 0; max-width: none; padding: 0; }
  .imemo { box-shadow: none; padding: 0; } .imemo .mphoto { margin: 0 0 20px; border-radius: 4px; height: 200px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .imemo section { break-inside: avoid-page; }
}
/* Pinned widgets and the plan prompt */
.widgets { display: grid; gap: 10px; margin-top: 14px; }
.widget { position: relative; } .widget .blk { margin: 0; }
.widget .wdel { position: absolute; top: 10px; right: 12px; font-size: 12px; color: var(--mute); opacity: 0; transition: opacity .15s; }
.widget:hover .wdel, .widget .wdel:focus { opacity: 1; } .widget .wdel:hover { color: var(--bad); }
@media (hover: none) { .widget .wdel { opacity: 1; } }
.planprompt { margin: 12px 0 10px; }
#planLive, #s-plan .tl-done { margin-bottom: 12px; }

.planbase{margin:10px 0 0;font-size:14px;color:var(--ink-2,#555)}
.planbase:empty{display:none}

/* Mobile solidity: no section may grow wider than the page, and nothing may push the page sideways. */
.page, section.s { grid-template-columns: minmax(0, 1fr); }
.page > *, section.s > * { min-width: 0; }
@media (max-width: 820px) {
  html, body, .main, .doc { overflow-x: hidden; overscroll-behavior-x: none; }
  table.plan { table-layout: fixed; }
  table.plan td:not(.n) { overflow-wrap: anywhere; }
  table.plan td.n { width: 42%; }
  table.plan tr.h td { letter-spacing: .03em; }
}
.thread { grid-template-columns: minmax(0, 1fr); }
.thread > *, .msg, .msg * { min-width: 0; }
.msg { overflow-wrap: anywhere; }
.msg table { display: block; max-width: 100%; overflow-x: auto; }
.msg pre, .msg code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Phone layout (≤ 820px): everything fits the screen width, nothing scrolls sideways. */
@media (max-width: 820px) {
  .sections { gap: 0; justify-content: space-between; }
  .sections a { padding: 5px 6px; font-size: 12.5px; }
  /* The three headline numbers read as rows: label left, number right. */
  .ret.ret3 { grid-template-columns: 1fr !important; }
  .ret.ret3 > div { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; border-left: 0 !important; border-top: 1px solid var(--line) !important; }
  .ret.ret3 > div:first-child { border-top: 0 !important; }
  .ret.ret3 > div > span { grid-column: 1; grid-row: 1; }
  .ret.ret3 > div > b { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 22px !important; }
  .ret.ret3 > div > small { grid-column: 1; grid-row: 2; }
  /* Bear / Base / Bull fits: the max-price column moves out, the drawer stays inside the screen. */
  table.scen { font-size: 13px; width: 100%; }
  table.scen th:nth-child(5), table.scen td.sm { display: none; }
  table.scen tr.scenrow td:first-child { min-width: 0; }
  table.scen th, table.scen td { padding-left: 4px; padding-right: 4px; }
  /* Tables inside agent answers keep numbers on one line and scroll inside their own card. */
  .msg table td, .msg table th, .btab td, .btab th { overflow-wrap: normal; white-space: nowrap; }
  .msg table td:first-child, .btab td:first-child { white-space: normal; min-width: 120px; }
  /* Task and plan prompts: the text box gets the full width, the button sits under it. */
  .tprompt { grid-template-columns: 1fr; }
  .tprompt .btn { justify-self: end; }
}
@media (max-width: 820px) {
  /* An open task uses the card's full width; the Broker/Agent tag stays top right beside the title. */
  .trow.open > .tmain { grid-column: 2 / 4; grid-row: 1; }
  .trow.open > .owner { grid-column: 3; grid-row: 1; }
  .trow.open:has(> .owner) .ttext { padding-right: 64px; }
}
@media (max-width: 400px) {
  .sections a { padding: 5px 4px; font-size: 12px; }
}
@media (max-width: 380px) { .sections a { padding: 5px 3px; } .sections a em { margin-left: 2px; } }

/* ---------- Icons: drawn, centered ---------- */
.icon svg, .mapside svg { display: block; margin: auto; }
.icon { padding: 0; }
.sendbtn { display: grid; place-items: center; }
.composer .sendbtn { width: 36px; height: 36px; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important; flex: none; align-self: flex-end; }
.composer .sendbtn:disabled { opacity: .4; }

/* ---------- Agents bar on a deal: what is working, what it found, what to send next ---------- */
.agentsbar { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.agentsbar:empty { display: none; }
.ab-h { display: flex; align-items: center; gap: 10px; }
.ab-h .k, .land-h .k { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.ab-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--blue); }
.ab-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: abpulse 1.4s ease-in-out infinite; }
@keyframes abpulse { 50% { opacity: .3; } }
.ab-idle, .ab-q { font-size: 12px; color: var(--mute); }
.ab-q { margin-left: auto; }
.ab-row, .cc-ag { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; width: 100%; cursor: pointer; padding: 8px 10px; border-radius: 10px; background: #f6f8fc; }
.ab-row:hover, .cc-ag:hover { background: #eef3fb; }
.ab-row.done, .cc-ag.done { background: #f7f6f2; }
.ab-row b, .cc-ag b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-row small, .cc-ag small { display: block; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ab-row em, .cc-ag em { font-style: normal; font-size: 12px; color: var(--mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ab-row .dot, .cc-ag .dot { margin-top: 3px; }
.ab-ok { color: var(--good); font-weight: 700; font-size: 13px; line-height: 1.5; text-align: center; }
.ab-disp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ab-disp > span { font-size: 12.5px; color: var(--mute); margin-right: 2px; }
.chipbtn { border: 1px solid #cfdcf3; background: #fff; color: var(--blue); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chipbtn:hover { background: var(--blue-soft, #eef3fd); }
.chipbtn:disabled { opacity: .5; cursor: default; }

/* ---------- The thesis ---------- */
.land-h { align-items: center; justify-content: space-between; margin-bottom: 8px; }
.verdict.thesis { font-size: 19px; line-height: 1.45; font-weight: 500; }
@media (max-width: 820px) { .verdict.thesis { font-size: 17px; } }

/* ---------- The price as four steps ---------- */
.ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rung { padding: 12px 14px; display: grid; gap: 2px; border-left: 1px solid var(--line); background: #fff; }
.rung:first-child { border-left: 0; }
.rung span { font-size: 12px; color: var(--mute); }
.rung b { font-size: 19px; font-variant-numeric: tabular-nums; color: var(--ink); }
.rung small { font-size: 11.5px; color: var(--mute); }
.rung.tgt { background: #f2f6ff; box-shadow: inset 0 3px 0 var(--blue); }
.rung.tgt b { color: var(--blue); }
.rung.ask b { color: var(--ink-2); }
@media (max-width: 560px) { .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rung:nth-child(3) { border-left: 0; } .rung:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* ---------- The business plan: the Base case at a glance, then the levers ---------- */
.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.glance:empty { display: none; }
.glance > div { padding: 10px 12px; display: grid; gap: 2px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); margin: -1px 0 0 -1px; }
.glance span { font-size: 11.5px; color: var(--mute); }
.glance b { font-size: 16px; font-variant-numeric: tabular-nums; }
.glance .ret-chip { background: #f7f6f2; }
.glance .ret-chip.good b { color: var(--good); } .glance .ret-chip.warn b { color: #9a5b00; } .glance .ret-chip.bad b { color: var(--bad); }
.levers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lever { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.lever .ln { width: 24px; height: 24px; border-radius: 50%; background: #eef3fb; color: var(--blue); font-size: 12.5px; font-weight: 700; display: grid; place-items: center; }
.lever p { margin: 0; font-size: 14.5px; line-height: 1.45; }
@media (max-width: 560px) { .levers { grid-template-columns: 1fr; } .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- The command center (home card over the map) ---------- */
.pcard { width: 400px; }
.cc-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cc-h h2 { margin-top: 2px; }
.cc-x { border: 0; background: none; color: var(--mute); width: 32px; height: 32px; border-radius: 8px; font-size: 22px; line-height: 1; cursor: pointer; flex: none; }
.cc-x:hover { background: rgba(12,29,51,.06); color: var(--ink); }
.cc-sec { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
#ccAgents { display: grid; gap: 6px; }
.cc-send { display: grid; gap: 6px; }
.cc-send select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.cc-in { display: flex; gap: 6px; align-items: center; padding: 4px 4px 4px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cc-in:focus-within { border-color: #b9cff5; box-shadow: 0 0 0 3px #eaf1fd; }
.cc-in input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 13.5px; background: none; }
.cc-in .sendbtn { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--blue); color: #fff; cursor: pointer; flex: none; }
#ccDeals { display: grid; }
.cc-deal { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 4px; border-top: 1px solid var(--line); cursor: pointer; }
.cc-deal:first-child { border-top: 0; }
.cc-deal:hover b { color: var(--blue); }
.cc-deal i { width: 8px; height: 8px; border-radius: 50%; }
.cc-deal b { display: block; font-size: 14px; font-weight: 600; }
.cc-deal small { display: block; font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-ret { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-ret.good { color: var(--good); } .cc-ret.warn { color: #9a5b00; } .cc-ret.bad { color: var(--bad); }
.cc-open { position: absolute; left: 20px; top: 20px; display: none; border: 0; border-radius: 999px; padding: 9px 16px; background: rgba(255,255,255,.93); box-shadow: 0 10px 30px -14px rgba(12,29,51,.5); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
body.portfolio.cc-closed .pcard { display: none; }
body.portfolio .pcard:empty { display: none; }  /* a shared link has no deal list to show: no empty card on the map */
body.portfolio.cc-closed .cc-open { display: block; }
@media (max-width: 820px) {
  .pcard { width: auto; max-height: 62vh; }
  .cc-open { left: auto; right: 12px; top: auto; bottom: 16px; }
  body.portfolio .mapside { display: grid; place-items: center; padding: 0; }
}
.land-h { flex-direction: row !important; text-align: left !important; }
@media (max-width: 820px) { .verdict.thesis { font-size: 16.5px; line-height: 1.5; } }

/* ---------- Photo header: plain figures and flat buttons (no glass, no pills) ---------- */
.hero.has-photo { animation: none; }
.hero-meta { gap: 0; align-items: flex-end; margin-top: 18px; }
.hero-meta a, .hero:not(.has-photo) .hero-meta a { display: grid; gap: 2px; padding: 0 18px 0 0; margin-right: 18px; border: 0; border-right: 1px solid rgba(255,255,255,.28); border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero:not(.has-photo) .hero-meta a { border-right-color: var(--line); }
.hero-meta a:last-of-type { border-right: 0; }
.hero-meta a span { font-size: 12px; opacity: .8; }
.hero-meta a b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hero-meta a:hover span { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.hero-act { margin-left: auto; display: flex; gap: 8px; }
.hbtn, .hbtn.export { position: static; font: 600 13px/1 var(--sans); padding: 10px 14px; border-radius: 8px; border: 1px solid transparent; background: #fff; color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.hbtn:hover { background: #f1f0ec; }
.hbtn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.hbtn.ghost:hover { background: rgba(255,255,255,.12); }
.hero:not(.has-photo) .hbtn { border-color: var(--line); }
.hero:not(.has-photo) .hbtn.ghost { color: var(--ink); }
@media (max-width: 820px) { .hero-act { margin-left: 0; width: 100%; margin-top: 14px; } .hero-meta a b { font-size: 18px; } }

/* ---------- Bear / Base / Bull as three cards ---------- */
.scards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.scards.n1 { grid-template-columns: minmax(0, 1fr); } .scards.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scards.n4, .scards.n5, .scards.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scard { all: unset; box-sizing: border-box; cursor: pointer; display: grid; align-content: start; gap: 2px; padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.scard:hover { border-color: #cdd6e6; }
.scard:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.scard.open { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.scard .sname { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.scard.bear .sname { color: #a0452b; } .scard.base .sname { color: var(--blue); } .scard.bull .sname { color: var(--good); }
.scard .sr { font-size: 28px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; margin-top: 4px; }
.scard .sr.good { color: var(--good); } .scard .sr.warn { color: #9a5b00; } .scard .sr.bad { color: var(--bad); }
.scard .sunit { font-size: 12px; color: var(--mute); margin-bottom: 8px; }
.skv { margin: 0; display: grid; border-top: 1px solid var(--line); }
.skv > div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid #f1efe9; font-size: 12.5px; }
.skv > div:last-child { border-bottom: 0; }
.skv dt { color: var(--mute); } .skv dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.scard .sedit { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--blue); }
.sdrawer { margin-top: 10px; padding: 14px 16px; border: 1px solid var(--blue); border-radius: 12px; background: #fbfcff; }
.sdrawer .sdh { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
@media (max-width: 620px) {
  .scards, .scards.n2, .scards.n4, .scards.n5, .scards.n6 { grid-template-columns: minmax(0, 1fr); }
  .scard { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
  .scard .sname { grid-column: 1; } .scard .sr { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; font-size: 24px; }
  .scard .sunit { grid-column: 1; margin: 0; }
  .scard .skv { grid-column: 1 / -1; margin-top: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .scard .sedit { grid-column: 1 / -1; }
}

/* ---------- To do markers, as on the landing page: dashed = to do, blue arc = an agent is on it, filled = done ---------- */
.tcheck { width: 20px; height: 20px; border: 1.5px dashed #b9c0cb; background: #fff; color: #fff; padding: 0; }
.tcheck:hover { border-style: solid; border-color: var(--blue); }
.trow.isdone .tcheck { background: var(--blue); border: 1.5px solid var(--blue); }
.trow.busy .tcheck { border: 2px solid #dbe4f7; border-top-color: var(--blue); animation: tspin .9s linear infinite; cursor: default; }
@keyframes tspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .trow.busy .tcheck { animation: none; } }
.trow.busy { background: #fafbfe; }
.trow > .owner { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: #5b6676; background: #f3f2ee; border: 0; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.trow > .owner i { width: 6px; height: 6px; border-radius: 50%; background: #a3aab6; }
.trow > .owner.work { color: var(--blue); background: var(--blue-soft); }
.trow > .owner.work i { background: var(--blue); animation: abpulse 1.4s ease-in-out infinite; }
.trow > .owner.done { color: var(--good); background: #eaf5ee; }
.trow > .owner.stop { color: #9a5b00; background: #fbf1e2; } .trow > .owner.stop i { background: #c9862b; }

/* ---------- Command center, simplified: deals by Base return, live agents, the desk folded away ---------- */
.pcard { width: 360px; gap: 8px; }
.cc-h h2 { margin: 0; }
.cc-sub { margin: 3px 0 0; font-size: 13px; color: var(--mute); }
.cc-sub .ab-live { font-size: 13px; }
.cc-sub span:empty + * { display: none; }
.cc-cols { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); border-top: 1px solid var(--line); padding-top: 12px; }
.cc-deal { grid-template-columns: minmax(0, 1fr) auto; }
.cc-deal small.working { color: var(--blue); }
.cc-deal small .dot { width: 9px; height: 9px; border-width: 1.5px; vertical-align: -1px; }
.cc-ret.bad { font-size: 13px; }
.cc-desk { border-top: 1px solid var(--line); padding-top: 10px; }
.cc-desk > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.cc-desk > summary::after { content: '›'; color: var(--mute); transition: transform .15s; }
.cc-desk[open] > summary::after { transform: rotate(90deg); }
.cc-desk > summary::-webkit-details-marker { display: none; }
.cc-desk #desk { margin-top: 8px; }

/* ---------- Less "AI look": no frosted glass, no shimmering text ---------- */
.pcard { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--line); box-shadow: 0 12px 32px -20px rgba(12,29,51,.45); }
.mv-bar { background: #fafaf7; backdrop-filter: none; -webkit-backdrop-filter: none; }
.cc-open { background: #fff; }
.shimmer { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--ink-2); animation: none; }
.composer .jobsbtn { font: 600 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-2); border: 1px solid var(--line); width: 30px; min-height: 30px; height: 30px; border-radius: 8px; align-self: flex-end; margin-bottom: 3px; }
.composer .jobsbtn:hover { background: #f3f2ee; color: var(--ink); }
/* The thesis reads as plain text, in the body font */
.verdict.thesis { font: 400 17px/1.55 var(--sans) !important; color: var(--ink); letter-spacing: 0; }
@media (max-width: 820px) { .verdict.thesis { font-size: 16px !important; } }

/* ---------- The price line ---------- */
.pline { position: relative; padding: 4px 8px 58px; margin-top: 4px; }
.pl-zones { position: relative; height: 18px; }
.pl-zones span { position: absolute; top: 0; text-align: center; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: visible; }
.z-buy { color: var(--good); } .z-over { color: var(--bad); }
.pl-track { position: relative; height: 6px; margin-top: 4px; border-radius: 3px; background: #ebe9e3; }
.pl-track > span { position: absolute; top: 0; bottom: 0; }
.t-buy { background: #3f9a6b; border-radius: 3px 0 0 3px; }
.t-over { background: #e3a59d; border-radius: 0 3px 3px 0; }
.pl-m { position: absolute; top: -4px; transform: translateX(-50%); display: grid; justify-items: center; text-align: center; white-space: nowrap; }
.pl-m i { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #9aa2ad; }
.pl-m.tgt i { background: var(--good); border-color: #fff; box-shadow: 0 0 0 1.5px var(--good); }
.pl-m.ask i { background: var(--bad); border-color: #fff; box-shadow: 0 0 0 1.5px var(--bad); }
.pl-m b { margin-top: 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.pl-m small { font-size: 11.5px; color: var(--mute); }
.pl-m.tgt b { color: var(--good); }
.pl-m.low b { margin-top: 42px; }
.pl-m.l { transform: translateX(-7px); justify-items: start; text-align: left; }
.pl-m.r { transform: translateX(calc(-100% + 7px)); justify-items: end; text-align: right; }
.pline:has(.low) { padding-bottom: 92px; }

/* ---------- The business plan: what we will do, then before and after ---------- */
.pplan { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 15px; line-height: 1.5; }
.pplan li::marker { color: var(--mute); }
table.ba { width: 100%; border-collapse: collapse; font-size: 14px; }
table.ba th { text-align: right; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); padding: 0 0 8px 12px; border-bottom: 1px solid var(--line); }
table.ba th:first-child { text-align: left; padding-left: 0; }
table.ba td { padding: 8px 0 8px 12px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.ba td:first-child { text-align: left; padding-left: 0; color: var(--ink-2); white-space: normal; }
table.ba td:nth-child(2) { color: var(--mute); }
table.ba td:last-child { font-weight: 600; color: var(--ink); }
table.ba th:last-child { color: var(--blue); }
.pl-legend { display: none; }
@media (max-width: 620px) {
  .pline, .pline:has(.low) { padding-bottom: 4px; }
  .pl-m b, .pl-m small { display: none; }
  .pl-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
  .pl-legend div { display: grid; gap: 1px; }
  .pl-legend b { font-size: 14px; font-variant-numeric: tabular-nums; }
  .pl-legend small { font-size: 11px; color: var(--mute); line-height: 1.3; }
  .pl-legend .tgt b { color: var(--good); } .pl-legend .ask b { color: var(--bad); }
}
@media (max-width: 420px) { table.ba { font-size: 13px; } table.ba td { white-space: normal; } table.ba th, table.ba td { padding-left: 8px; } }


/* Before and after: drag to compare a photo of today with the concept render of the same view. */
.bacmps { display: grid; gap: 18px; margin-bottom: 14px; }
.bacap { margin: 8px 2px 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.bacmp { position: relative; margin: 0; width: 100%; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 2; background: #e9e6df; user-select: none; }
.bacmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.bacmp .baft { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.bacmp .bah { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.35); pointer-events: none; }
.bacmp .bah::after { content: '⇆'; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #fff; color: #1d2b44; font: 600 16px/34px system-ui; text-align: center; box-shadow: 0 1px 6px rgba(0,0,0,.3); }
.bacmp input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.bacmp .ba-l, .bacmp .ba-r { position: absolute; top: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(15,20,30,.62); color: #fff; font-size: 11px; letter-spacing: .02em; pointer-events: none; }
.bacmp .ba-l { left: 10px; } .bacmp .ba-r { right: 10px; }
.bacmp figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 16px 12px; background: linear-gradient(to top, rgba(10,14,22,.78), rgba(10,14,22,.42) 55%, rgba(10,14,22,0)); color: #fff; font-size: 12.5px; line-height: 1.45; text-shadow: 0 1px 2px rgba(0,0,0,.3); pointer-events: none; }
.bacmp figcaption:empty { display: none; }
@media (max-width: 620px) { .bacmp { aspect-ratio: 4 / 3; } .bacmp figcaption { padding: 28px 12px 10px; font-size: 12px; } }
.film { margin: 10px 0 0; display: grid; gap: 6px; }
.film video { width: 100%; border-radius: 12px; background: #111; display: block; }
.film figcaption { font-size: 12px; color: var(--blue); }

/* Task cards, platform-wide: blue ring (open) → spinning ring + live step (agent working) → green check (done). */
.trow { cursor: pointer; transition: background .15s; border-radius: 10px; }
.trow:hover { background: #f8f9fc; }
.trow .tcheck { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--blue); background: #fff; color: #fff; display: grid; place-items: center; padding: 0; transition: background .2s, border-color .2s, transform .2s; }
.trow .tcheck:hover:not(:disabled) { background: var(--blue-soft); }
.trow.st-busy .tcheck { border: 2.5px solid #d9e2f6; border-top-color: var(--blue); border-right-color: var(--blue); background: #fff; animation: tspin .8s linear infinite; cursor: default; }
.trow.st-ok .tcheck, .trow.isdone .tcheck { background: var(--good); border-color: var(--good); color: #fff; animation: tpop .35s ease-out; }
.trow.st-stop .tcheck { border-color: #c98a16; color: #c98a16; font: 700 12px/1 system-ui; }
.trow.st-found .tcheck { background: var(--blue-soft); box-shadow: inset 0 0 0 4px #fff; }
@keyframes tpop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.trow .tnow { display: flex; align-items: center; gap: 7px; margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--mute); min-width: 0; }
.trow .tnow > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow.open .tnow > span:last-child { white-space: normal; }
.trow.st-busy .tnow { color: var(--blue); font-weight: 500; }
.trow.st-found .tnow, .trow.st-ok .tnow { color: #3d6b52; }
.tnow-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: abpulse 1.2s ease-in-out infinite; }
.trow > .owner.found { color: var(--blue); background: var(--blue-soft); }
.trow > .owner.found i { background: var(--blue); }
.trow > .owner.agent i { background: var(--blue); }
.trow > .owner.stop { color: #9a6a10; background: #fbf1dc; }
.trow > .owner.stop i { background: #c98a16; }
.trow .tl-done > b { color: var(--good); }
.trow .tprompt .btn.pri { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .trow.st-busy .tcheck, .tnow-dot, .trow.st-ok .tcheck { animation: none; } }

/* Media gallery: one stage, thumbnails, full screen */
.mg { display: grid; gap: 8px; margin-bottom: 14px; }
.mg-stage { position: relative; height: clamp(260px, 52vh, 460px); border-radius: 14px; overflow: hidden; background: #10151e; display: grid; place-items: center; }
.mg-stage > img, .mg-stage > video { width: 100%; height: 100%; object-fit: contain; display: block; background: #10151e; }
.mg-stage > img { cursor: zoom-in; }
.mg-stage .bacmp { height: 100%; width: auto; max-width: 100%; aspect-ratio: 3 / 4; border-radius: 0; margin: 0; }
.mg-stage .bacmp figcaption { display: none; }
.mg-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.88); color: #1d2b44; font: 400 24px/36px system-ui; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.25); opacity: .85; transition: opacity .15s, transform .15s; z-index: 2; }
.mg-nav:hover { opacity: 1; transform: translateY(-50%) scale(1.06); }
.mg-nav.prev { left: 10px; } .mg-nav.next { right: 10px; }
.mg-full { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 9px; border: 0; background: rgba(15,20,30,.6); color: #fff; display: grid; place-items: center; cursor: pointer; font-size: 22px; z-index: 2; }
.mg-tag, .mg-count { position: absolute; top: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(15,20,30,.6); color: #fff; font-size: 11.5px; letter-spacing: .02em; pointer-events: none; z-index: 2; }
.mg-tag { left: 12px; } .mg-count { right: 54px; }
.mg-cap { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.mg-cap em { font-style: normal; color: var(--mute); }
.mg-strip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 1px 4px; scrollbar-width: thin; }
.mg-th { flex: none; width: 72px; height: 50px; border-radius: 8px; border: 2px solid transparent; background: #ddd center / cover; cursor: pointer; padding: 0; position: relative; opacity: .7; transition: opacity .15s, border-color .15s; }
.mg-th:hover { opacity: 1; } .mg-th.on { opacity: 1; border-color: var(--blue); }
.mg-th span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 14px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.mg-fs { position: fixed; inset: 0; z-index: 60; margin: 0; padding: 18px 18px 14px; background: rgba(10,14,22,.96); grid-template-rows: 1fr auto auto; animation: rise .18s ease-out; }
.mg-fs .mg-stage { height: auto; min-height: 0; background: transparent; }
.mg-fs .mg-stage > img, .mg-fs .mg-stage > video { background: transparent; cursor: default; }
.mg-fs .mg-cap { color: #cfd6e2; text-align: center; } .mg-fs .mg-cap em { color: #8f9aad; }
.mg-fs .mg-strip { justify-content: center; }
.mg-fs .mg-stage .bacmp { max-height: 100%; }
@media (max-width: 620px) { .mg-stage { height: 62vw; min-height: 230px; } .mg-nav { width: 32px; height: 32px; font-size: 20px; line-height: 30px; } .mg-th { width: 60px; height: 42px; } }

/* Render dispatch card */
.rcard { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: #fff; margin: 4px 0 14px; transition: box-shadow .2s, border-color .2s; }
.rcard.open { border-color: #c8d5f5; box-shadow: 0 6px 24px rgba(31,70,214,.08); }
.rc-h { display: flex; align-items: center; gap: 12px; }
.rc-h > div { flex: 1; min-width: 0; display: grid; }
.rc-h b { font-size: 14.5px; } .rc-h small { color: var(--mute); font-size: 12.5px; }
.rc-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); font-size: 15px; flex: none; }
.rc-form { display: grid; gap: 8px; margin-top: 12px; animation: rise .18s ease-out; }
.rc-form label[for] { font-size: 13px; font-weight: 600; color: var(--ink); }
.rc-form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; }
.rc-form textarea:focus { outline: 2px solid #c8d5f5; border-color: var(--blue); }
.rc-att { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rc-attach { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.rc-files { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-file { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 3px; border-radius: 8px; background: #f3f5f9; font-size: 12px; color: var(--ink-2); }
.rc-file img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; }
.rc-file button { border: 0; background: none; cursor: pointer; color: var(--mute); font-size: 15px; line-height: 1; padding: 0 2px; }
.rc-act { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.rc-jobs { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--line); }
.rc-jobs .trow { cursor: default; } .rc-jobs .trow:hover { background: none; }
.rc-jobs .ttext { font-size: 14px; }
.scards.n4, .scards.n5, .scards.n6 { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
.scard .sr { font-size: clamp(21px, 2.1vw, 28px); white-space: nowrap; }
.skv dt { white-space: nowrap; }
.rcard [hidden], .mg [hidden], .trow .tnow[hidden] { display: none !important; }

/* Gallery v2: every image fills the frame edge to edge (no letterbox borders); full screen shows the whole image. */
.mg-stage { height: auto; aspect-ratio: 16 / 9; max-height: 72vh; background: #10151e; }
.mg-stage > img, .mg-stage > video { object-fit: cover; }
.mg-stage.compare .bacmp { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; }
.mg-stage.compare .bacmp img { object-fit: cover; object-position: center 35%; }
.mg-fs .mg-stage { aspect-ratio: auto; max-height: none; }
.mg-fs .mg-stage > img, .mg-fs .mg-stage > video { object-fit: contain; }
.mg-fs .mg-stage.compare .bacmp { position: relative; inset: auto; width: min(100%, calc((100vh - 170px) * 16 / 9)); height: auto; aspect-ratio: 16 / 9; margin: auto; }
.mg-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.mg-tabs button { border: 1px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.mg-tabs button.on { background: var(--ink, #1d2b44); border-color: transparent; color: #fff; }
.mg-ba .bacmp .ba-l, .mg-ba .bacmp .ba-r { top: 12px; font-size: 12px; }
@media (max-width: 620px) { .mg-stage { height: auto; min-height: 0; } }
.mg-stage .bacmp .ba-r { right: 54px; } .mg-fs .mg-stage .bacmp .ba-r { right: 10px; }
/* Agent cards: one per job, placed in the section it belongs to. Same ring language as the task cards. */
.acards { display: grid; gap: 10px; margin: 14px 0 6px; }
.acards .acard { margin: 0; }
.acard .ac-h[data-ac-toggle] { cursor: pointer; }
.acard .ac-h .rc-ic svg { display: block; }
.acard .ac-line { display: flex; align-items: center; gap: 7px; min-width: 0; }
.acard .ac-line > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acard.open .ac-line > span:last-child { white-space: normal; }
.acard.st-busy .ac-line { color: var(--blue); font-weight: 500; }
.acard.st-ok .ac-line { color: #3d6b52; }
.acard.st-stop .ac-line { color: #9a6a10; }
.acard .ac-h > .tcheck { flex: none; width: 32px; height: 32px; margin: 0; border-radius: 50%; border: 2px solid var(--blue); background: #fff; color: #fff; display: grid; place-items: center; cursor: inherit; }
.acard .ac-h > .tcheck svg { width: 15px; height: 15px; }
.acard.st-busy .ac-h > .tcheck { border: 3px solid #d9e2f6; border-top-color: var(--blue); border-right-color: var(--blue); animation: tspin .8s linear infinite; }
.acard.st-ok .ac-h > .tcheck { background: var(--good); border-color: var(--good); animation: tpop .35s ease-out; }
.acard.st-stop .ac-h > .tcheck { border-color: #c98a16; color: #c98a16; font: 700 14px/1 system-ui; }
.acard.st-busy { border-color: #d6e0f7; background: #fafbfe; }
.ac-min { flex: none; width: 32px; height: 32px; border-radius: 9px; border: 0; background: none; color: var(--mute); display: grid; place-items: center; cursor: pointer; transition: transform .2s, background .15s; transform: rotate(180deg); }
.acard.open .ac-min { transform: none; }
.ac-min:hover { background: var(--side); color: var(--ink); }
.acard .tlive, .acard .tl-done { margin-top: 12px; }
.acard ul.steps.live { width: auto; height: auto; border-radius: 0; background: none; animation: none; }
.acard .tl-done > b { color: var(--good); }
.acard .tl-done .tl-text { max-height: 360px; overflow: auto; }
.acard .rc-jobs { margin-top: 12px; }
.ac-form .rc-att .grow { flex: 1; }
.ac-model { position: relative; margin-top: 12px; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 50% 35%, #fff, #eef1f6); border: 1px solid var(--line); }
.ac-model model-viewer { display: block; width: 100%; height: clamp(260px, 42vw, 420px); --poster-color: transparent; }
.ac-model .ac-fs, .ac-model .ac-fsx { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.92); color: var(--ink); display: grid; place-items: center; cursor: pointer; font-size: 20px; line-height: 1; }
.ac-model .ac-fsx { display: none; }
.ac-model .ac-hint { position: absolute; left: 12px; bottom: 10px; font-size: 12px; color: var(--mute); background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 99px; pointer-events: none; }
.ac-model:fullscreen, .ac-model.fs { position: fixed; inset: 0; z-index: 60; margin: 0; border-radius: 0; border: 0; background: radial-gradient(circle at 50% 35%, #fff, #e6eaf1); }
.ac-model:fullscreen model-viewer, .ac-model.fs model-viewer { height: 100%; }
.ac-model:fullscreen .ac-fs, .ac-model.fs .ac-fs { display: none; }
.ac-model:fullscreen .ac-fsx, .ac-model.fs .ac-fsx { display: grid; }
.acard [hidden] { display: none !important; }
@media (max-width: 620px) { .acard .ac-line > span:last-child { white-space: normal; } .acard [data-ac-open] { padding: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .acard.st-busy .ac-h > .tcheck, .acard.st-ok .ac-h > .tcheck { animation: none; } }
/* Shared link (/s/<token>): one deal, read-only. No deal list, no Ask bar, no agent or write controls. */
body.share .newdeal, body.share .search,
body.share .composer-wrap, body.share .cc-open, body.share .findit, body.share [data-propose], body.share .newscen,
body.share .wdel, body.share .sdact .linkbtn, body.share .jobs { display: none !important; }
.tcheck.ro { cursor: default; }
/* Signed-out viewers (public preview and shared links): Sign in at the foot of the deals panel. */
.side-signin { display: block; flex: none; text-align: center; padding: 10px 12px; border-radius: 10px; background: var(--blue); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; }
.side-signin:hover { filter: brightness(1.08); }

/* Share popover on the deal hero (owner only). */
.hero-act { position: relative; }
.hero:has(.sharepop) { z-index: 5; }  /* the hero is its own stacking context (animated); lift it over the thesis while open */
.sharepop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: min(360px, calc(100vw - 32px)); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(12,29,51,.16); padding: 14px; text-align: left; }
.sharepop b { display: block; font-size: 14px; margin-bottom: 4px; }
.sharepop p { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); }
.sharepop .sp-row { display: flex; gap: 6px; }
.sharepop input { flex: 1; min-width: 0; font-size: 12.5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.sharepop .sp-act { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.sharepop .linkbtn.danger { color: var(--bad); }
@media (max-width: 820px) { .sharepop { right: auto; left: 0; } }

/* ================= Investment memo: one 16:9 editorial template ==========   Ivory ground, ink type, one blue accent. Fraunces for headlines and big numbers, Manrope small caps for labels.
   Everything is sized in cqw (1cqw = 1% of the slide width) so the deck scales from phone to print. */
.mv-view { background: #e7e3da; }
.mv-bar { background: #f6f3ec; }
.mv-doc { max-width: 1180px; margin: 28px auto 72px; padding: 0 16px; }
.deck { --d-ivory: #f6f2ea; --d-paper: #fbf9f4; --d-ink: #16181d; --d-navy: #0e1a2e; --d-soft: #4a4d55; --d-mute: #8b877d; --d-line: #d9d2c3; --d-accent: #1439c6; --d-loss: #9b3b2e;
  display: grid; gap: 26px; }
.slide { position: relative; width: 100%; aspect-ratio: 16 / 9; container-type: inline-size; overflow: hidden; background: var(--d-ivory); color: var(--d-ink);
  font-family: var(--sans); box-shadow: 0 30px 60px -34px rgba(20,24,32,.5); }
.slide img { display: block; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.slide figure { margin: 0; position: relative; overflow: hidden; background: #d8d2c6; }
.slide .d-eye, .slide .d-lab { margin: 0; font: 600 .74cqw/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--d-mute); }
.slide .d-head { position: absolute; left: 5.5cqw; right: 5.5cqw; top: 4.6cqw; display: grid; gap: 1.1cqw; }
.slide .d-head h2 { margin: 0; font: 300 3.5cqw/1.04 var(--serif); letter-spacing: -.018em; color: var(--d-ink); text-wrap: balance; max-width: 60cqw; }
.slide .d-text { margin: 0; font-size: 1.12cqw; line-height: 1.6; color: var(--d-soft); max-width: 40cqw; }
.slide .d-note { position: absolute; left: 5.5cqw; right: 5.5cqw; bottom: 5cqw; margin: 0; font-size: .82cqw; line-height: 1.5; color: var(--d-mute); }
.slide .d-foot { position: absolute; left: 5.5cqw; right: 5.5cqw; bottom: 2.2cqw; display: flex; justify-content: space-between; align-items: baseline; padding-top: .9cqw; border-top: 1px solid var(--d-line);
  font: 600 .66cqw/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--d-mute); }
.slide .d-foot i { font: 400 .95cqw/1 var(--serif); font-style: normal; letter-spacing: 0; color: var(--d-ink); margin-left: 1.2cqw; }
.slide .d-tag { position: absolute; right: 3cqw; top: 3cqw; font: 600 .62cqw/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.slide .d-rows { margin: 0; display: grid; }
.slide .d-rows div { display: flex; justify-content: space-between; gap: 1.5cqw; padding: .8cqw 0; border-top: 1px solid var(--d-line); }
.slide .d-rows dt { font-size: 1cqw; color: var(--d-soft); }
.slide .d-rows dd { margin: 0; font: 400 1.25cqw/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--d-ink); white-space: nowrap; }
/* charts */
.slide .d-chart { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.d-chart .c-axis { stroke: var(--d-ink); stroke-width: 1.2; }
.d-chart .c-guide { stroke: var(--d-mute); stroke-width: 1; stroke-dasharray: 3 4; }
.d-chart .c-diff { stroke: var(--d-accent); stroke-width: 3; }
.d-chart .c-lab { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; fill: var(--d-mute); }
.d-chart .c-val { font: 400 17px var(--serif); fill: var(--d-ink); }
.d-chart .c-tot { font: 400 22px var(--serif); fill: var(--d-ink); }
.d-chart .c-col { font-size: 11px; font-weight: 700; letter-spacing: .26em; fill: var(--d-ink); }
.d-chart .c-dv { font: 300 28px var(--serif); fill: var(--d-accent); }
.d-chart .c-target { stroke: var(--d-accent); stroke-width: 1.2; stroke-dasharray: 6 5; }
.d-chart .c-big { font: 300 34px var(--serif); fill: var(--d-ink); }
.d-chart .c-cut { fill: none; stroke: var(--d-ivory); stroke-width: 3; }
.d-chart .c-acc { fill: var(--d-accent); } .d-chart .c-neg { fill: var(--d-loss); } .d-chart line.c-neg { stroke: var(--d-loss); }
.d-chart .c-rail { stroke: var(--d-line); stroke-width: 2; }
.d-chart .c-buy { fill: #d9def0; } .d-chart .c-over { fill: #eed9d2; }
.d-chart .c-buy-t { fill: var(--d-accent); } .d-chart .c-over-t { fill: var(--d-loss); }
.d-chart .c-tick { stroke: var(--d-mute); } .d-chart .c-tl { font-size: 11px; fill: var(--d-mute); font-variant-numeric: tabular-nums; }
.d-chart .c-stem { stroke: var(--d-line); stroke-width: 1.2; }
.d-chart .c-dot { fill: var(--d-ivory); stroke: var(--d-ink); stroke-width: 2; } .d-chart .c-dot.k-tgt { fill: var(--d-accent); stroke: var(--d-accent); } .d-chart .c-dot.k-ask { fill: var(--d-loss); stroke: var(--d-loss); }
.d-chart .c-pv { font: 300 32px var(--serif); fill: var(--d-ink); } .d-chart .c-pv.k-tgt { fill: var(--d-accent); } .d-chart .c-pv.k-ask { fill: var(--d-loss); }
/* 1 cover */
.slide.d-cover { background: var(--d-navy); color: #fff; }
.d-cover .d-bleed { position: absolute; inset: 0; background: none; }
.d-cover .d-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,12,20,.38) 0%, rgba(8,12,20,0) 26%, rgba(8,12,20,0) 45%, rgba(8,12,20,.72) 100%); }
.d-cover .d-mark { position: absolute; left: 5.5cqw; top: 4.2cqw; font: 500 1.35cqw/1 var(--serif); letter-spacing: .01em; }
.d-cover .d-covtext { position: absolute; left: 5.5cqw; right: 20cqw; bottom: 5.6cqw; display: grid; gap: 1.4cqw; }
.d-cover .d-eye { color: rgba(255,255,255,.78); }
.d-cover h1 { margin: 0; font: 300 6.6cqw/.98 var(--serif); letter-spacing: -.028em; text-wrap: balance; }
.d-cover .d-covline { margin: .4cqw 0 0; font: 400 1.45cqw/1.3 var(--serif); color: rgba(255,255,255,.92); }
.d-cover .d-covline i { font-style: normal; margin: 0 .9cqw; opacity: .6; }
.d-cover .d-tag { top: auto; bottom: 5.8cqw; right: 5.5cqw; }
.d-cover.plain .d-covtext { top: 17cqw; bottom: auto; }
/* 2 the opportunity */
.d-opp .d-body { position: absolute; left: 5.5cqw; top: 9.5cqw; width: 70cqw; display: grid; gap: 1.8cqw; justify-items: start; }
.d-opp .d-lede { margin: 0; font: 300 3.3cqw/1.18 var(--serif); letter-spacing: -.012em; text-wrap: pretty; }
.d-opp .d-verdict { margin: 0; font: 600 .74cqw/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; padding: .75cqw 1.1cqw; border: 1px solid currentColor; color: var(--d-accent); }
.d-opp .d-verdict.warn { color: #8a5a12; } .d-opp .d-verdict.bad { color: var(--d-loss); }
.d-opp .d-nums { position: absolute; left: 5.5cqw; right: 5.5cqw; bottom: 6.2cqw; display: grid; grid-template-columns: repeat(4, 1fr); }
.d-opp .d-nums.n1 { grid-template-columns: 1fr; } .d-opp .d-nums.n2 { grid-template-columns: repeat(2, 1fr); } .d-opp .d-nums.n3 { grid-template-columns: repeat(3, 1fr); }
.d-opp .d-nums div { display: grid; gap: .7cqw; align-content: start; padding: 1.6cqw 2cqw 0 0; border-top: 1px solid var(--d-ink); }
.d-opp .d-nums div + div { padding-left: 2cqw; border-left: 1px solid var(--d-line); }
.d-opp .d-nums b { font: 300 3.7cqw/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.d-opp .d-nums small { font-size: .9cqw; line-height: 1.4; color: var(--d-soft); }
/* half-bleed layouts (3 today, 4 plan) */
.slide.bleed-l .d-foot { left: 60cqw; } .slide.bleed-r .d-foot { right: 50cqw; }
.slide .d-side { position: absolute; top: 0; bottom: 0; }
.bleed-l .d-side { left: 60cqw; right: 5.5cqw; } .bleed-l .d-side .d-head { left: 0; right: 0; }
.bleed-r .d-side { left: 5.5cqw; right: 55cqw; } .bleed-r .d-side .d-head { left: 0; right: 0; }
.d-today:not(.bleed-l) .d-side { left: 5.5cqw; right: 5.5cqw; } .d-today:not(.bleed-l) .d-side .d-head { left: 0; right: 0; }
.slide .d-side .d-head h2 { max-width: none; font-size: 3cqw; }
.d-photos { position: absolute; left: 0; top: 0; bottom: 0; width: 55cqw; display: grid; gap: 2px; background: var(--d-ivory); }
.d-photos.n2 { grid-template-columns: 1fr 1fr; }
.d-photos.n3 { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; } .d-photos.n3 figure:first-child { grid-row: 1 / span 2; }
.slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 3cqw 1.4cqw 1.2cqw; font: 500 .74cqw/1.35 var(--sans); letter-spacing: .04em; color: rgba(255,255,255,.92); background: linear-gradient(transparent, rgba(8,12,20,.62)); }
.d-today .d-text { position: absolute; top: 17.5cqw; left: 0; right: 0; }
.d-facts { position: absolute; left: 0; right: 0; bottom: 6.4cqw; margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.4cqw; }
.d-facts div { padding: 1cqw 0; border-top: 1px solid var(--d-line); display: grid; gap: .45cqw; }
.d-facts div.wide { grid-column: 1 / -1; }
.d-facts dt { font: 600 .66cqw/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--d-mute); }
.d-facts dd { margin: 0; font: 400 1.5cqw/1.2 var(--serif); font-variant-numeric: lining-nums; }
.d-facts div.wide dd { font-size: 1.15cqw; }
.d-today:not(.bleed-l) .d-facts { grid-template-columns: repeat(3, 1fr); }
.d-plan .d-half { position: absolute; right: 0; top: 0; bottom: 0; width: 45cqw; }
.d-steps { position: absolute; left: 0; right: 0; top: 16cqw; margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 0; }
.d-steps li { counter-increment: st; display: grid; grid-template-columns: 3.4cqw 1fr; align-items: baseline; padding: 1.15cqw 0; border-top: 1px solid var(--d-line); font-size: 1.22cqw; line-height: 1.45; color: var(--d-ink); }
.d-steps li::before { content: counter(st); font: 300 1.9cqw/1 var(--serif); color: var(--d-accent); }
/* 5 before and after */
.d-ba .d-bagrid { position: absolute; left: 5.5cqw; right: 5.5cqw; top: 13.6cqw; bottom: 8.2cqw; display: grid; grid-template-columns: 1fr 1.08fr; gap: 2.4cqw; }
.d-ba.solo .d-bagrid { grid-template-columns: 1fr; }
.d-pair { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; gap: 2px; min-height: 0; }
.d-pair figure span { position: absolute; left: .9cqw; top: .9cqw; font: 600 .6cqw/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #fff; padding: .45cqw .6cqw; background: rgba(8,12,20,.5); }
.d-pair .d-lab { grid-column: 1 / -1; padding-top: .6cqw; }
.d-bamore { display: grid; grid-auto-rows: 1fr; gap: 1.1cqw; min-height: 0; }
.d-ba .d-note { bottom: 5cqw; }
/* 6 what it becomes */
.slide.d-gallery { background: var(--d-navy); }
.d-mosaic { position: absolute; inset: 0; display: grid; gap: 2px; }
.d-mosaic.n2 { grid-template-columns: 1fr 1fr; }
.d-mosaic.n3 { grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; } .d-mosaic.n3 figure:first-child { grid-row: 1 / span 2; }
.d-mosaic.n4 { grid-template-columns: 1.7fr 1fr; grid-template-rows: repeat(3, 1fr); } .d-mosaic.n4 figure:first-child { grid-row: 1 / span 3; }
.d-mosaic.n5 { grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: 1fr 1fr; } .d-mosaic.n5 figure:first-child { grid-row: 1 / span 2; }
.d-mosaic figure:first-child figcaption { padding-left: 5.5cqw; padding-bottom: 5.2cqw; }
.d-gtitle { position: absolute; left: 0; right: 0; top: 0; padding: 4.6cqw 5.5cqw 8cqw; display: grid; gap: 1cqw; justify-items: start; color: #fff; background: linear-gradient(180deg, rgba(8,12,20,.5), rgba(8,12,20,0)); pointer-events: none; }
.d-gtitle .d-eye { color: rgba(255,255,255,.8); }
.d-gtitle h2 { margin: 0; font: 300 3.2cqw/1.05 var(--serif); letter-spacing: -.018em; text-wrap: balance; }
.d-gallery .d-foot { display: none; }
/* 7 the numbers */
.d-numgrid { position: absolute; left: 5.5cqw; right: 5.5cqw; top: 13cqw; bottom: 8.4cqw; display: grid; grid-template-columns: 1.25fr 1fr; gap: 5cqw; }
.d-chartbox { min-height: 0; display: flex; align-items: flex-end; }
.d-chartbox .d-chart { max-height: 100%; }
.d-ret { display: grid; align-content: start; gap: .6cqw; }
.d-huge { font: 300 7cqw/1 var(--serif); letter-spacing: -.035em; color: var(--d-ink); font-variant-numeric: lining-nums; }
.d-huge.ok { color: var(--d-accent); } .d-huge.neg { color: var(--d-loss); }
.d-ret > small { font-size: .95cqw; color: var(--d-soft); margin-bottom: 1.6cqw; }
.d-numbers .d-note { bottom: 5.2cqw; }
/* 8 bear, base, bull */
.d-scenbox { position: absolute; left: 5.5cqw; right: 5.5cqw; top: 13.4cqw; bottom: 6cqw; display: grid; grid-template-rows: auto 1fr; gap: 1.6cqw; }
.d-scenbox .d-chart { height: 18cqw; width: 100%; }
.d-cols { display: grid; grid-template-columns: repeat(3, 1fr); }
.d-cols.n2 { grid-template-columns: repeat(2, 1fr); }
.d-cols > div { padding: 0 2.2cqw; display: grid; align-content: start; gap: .8cqw; }
.d-cols > div + div { border-left: 1px solid var(--d-line); }
.d-cols > div.base .d-lab { color: var(--d-accent); }
.d-cols .d-rows div { padding: .6cqw 0; }
/* 9 the price */
.d-price .d-pl { position: absolute; left: 5.5cqw; right: 5.5cqw; top: 14cqw; }
.d-pfoot { position: absolute; left: 5.5cqw; right: 5.5cqw; bottom: 6.6cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 5cqw; align-items: end; }
.d-dash { margin: .9cqw 0 0; padding: 0; list-style: none; display: grid; gap: .5cqw; font-size: 1.1cqw; line-height: 1.45; }
.d-dash li::before { content: '— '; color: var(--d-accent); }
/* 10 risks, 12 sources */
.slide .d-two { position: absolute; left: 5.5cqw; right: 5.5cqw; top: 15cqw; bottom: 7cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 5cqw; }
.d-list { margin: 1cqw 0 0; padding: 0; list-style: none; }
.d-list li { padding: 1.05cqw 0; border-top: 1px solid var(--d-line); font: 300 1.55cqw/1.3 var(--serif); color: var(--d-ink); }
.d-list li small { display: block; margin-top: .35cqw; font: 400 .9cqw/1.4 var(--sans); color: var(--d-mute); }
.d-src { margin: 1cqw 0 0; padding: 0; list-style: none; }
.d-src li { display: flex; justify-content: space-between; gap: 2cqw; padding: .75cqw 0; border-top: 1px solid var(--d-line); font-size: 1cqw; }
.d-src li b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .d-src li span { color: var(--d-mute); white-space: nowrap; }
.d-disc { display: grid; align-content: start; gap: 1.4cqw; padding-left: 5cqw; border-left: 1px solid var(--d-line); }
.d-quote { margin: 0; font: 300 2.6cqw/1.15 var(--serif); letter-spacing: -.012em; }
.d-small { margin: 0; font-size: .8cqw; line-height: 1.6; color: var(--d-mute); }
/* 11 next steps */
.d-next .d-grid { position: absolute; left: 5.5cqw; right: 5.5cqw; top: 14.6cqw; bottom: 7cqw; margin: 0; padding: 0; list-style: none; counter-reset: nx;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; column-gap: 3cqw; row-gap: 1.2cqw; }
.d-next .d-grid.n1, .d-next .d-grid.n2, .d-next .d-grid.n4 { grid-template-columns: repeat(2, 1fr); }
.d-next li { counter-increment: nx; position: relative; display: grid; align-content: start; gap: .6cqw; padding: 1.3cqw 0 0 4.2cqw; border-top: 1px solid var(--d-line); }
.d-next li::before { content: counter(nx, decimal-leading-zero); position: absolute; left: 0; top: 1.1cqw; font: 300 2.1cqw/1 var(--serif); color: var(--d-accent); }
.d-next li b { font: 400 1.5cqw/1.25 var(--serif); }
.d-next li small { font-size: .92cqw; line-height: 1.45; color: var(--d-soft); }
@media print {
  @page { size: 13.333in 7.5in; margin: 0; }
  html, body.mv-open { background: #fff; }
  .mv-doc { max-width: none; margin: 0; padding: 0; }
  .deck { display: block; }
  .slide { width: 13.333in; height: 7.5in; aspect-ratio: auto; box-shadow: none; break-after: page; page-break-after: always; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .slide:last-child { break-after: auto; page-break-after: auto; }
}
/* ================= Phone (≤ 820px): the 3D map fixed in the top third, the deal card scrolls up over it =================
   One native scroll, nothing driven by JavaScript: #main is the scroller and starts a third of the way down, so the
   map shows above the card. Scroll down and the card slides up over the map to fill the screen; scroll back to the
   top and the map is there again. The see-through top is part of the scroller (no pointer-events tricks, which
   stop scrolling in iOS Safari), so a swipe anywhere moves the card; the map orbits on its own behind it. */
.grab { display: none; }
@media (max-width: 820px) {
  html { overscroll-behavior: none; }
  body:not(.portfolio) { height: 100vh; height: 100dvh; overflow: hidden; }
  body:not(.portfolio) .mappane {
    position: fixed; left: 0; right: 0; top: 0; z-index: 0; order: 0; flex: none;
    width: 100% !important; height: 40vh; height: 40dvh; margin: 0 !important;
  }
  body:not(.portfolio) .ui-tag { display: grid; z-index: 11; }  /* above the see-through top of the card */
  body.card-up:not(.portfolio) .ui-tag { opacity: 0; }  /* the card has slid over the map */
  body:not(.portfolio) .main {
    position: fixed; inset: 0; z-index: 10; display: block; width: auto; transform: none; opacity: 1;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    background: transparent; padding-top: 0;
  }
  /* The see-through top third (a spacer, not padding: sticky elements stick below a scroller's padding). */
  body:not(.portfolio) .main::before { content: ''; display: block; height: 34vh; height: 34dvh; }
  body:not(.portfolio) .bar {
    position: sticky; top: 0; z-index: 6; background: var(--bg); padding-top: 14px;
    border-radius: 16px 16px 0 0; box-shadow: 0 -6px 18px -10px rgba(12,29,51,.35); touch-action: auto;
  }
  body:not(.portfolio) .bar::before { content: ''; position: absolute; left: 50%; top: 9px; width: 38px; height: 4px; margin-left: -19px; border-radius: 3px; background: #cdd1d8; }
  body:not(.portfolio) .pubbar { display: none; }
  body:not(.portfolio) .doc {
    overflow: visible; min-height: 100vh; min-height: 100dvh; background: var(--bg);
    padding: 12px 16px calc(110px + env(safe-area-inset-bottom, 0px)); margin: 0;
  }
  body:not(.portfolio) section.s, body:not(.portfolio) #s-call { scroll-margin-top: 96px; }
  body:not(.portfolio) .composer-wrap {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; transform: none;
    padding: 10px max(12px, env(safe-area-inset-left, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-right, 0px));
  }
  body:not(.portfolio) .jobsmenu { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  /* Map controls sit on the map, top right, above the card. */
  body:not(.portfolio) .mapnav { display: none; }
  body:not(.portfolio) .orbit { display: none; }
  .toast { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 32px); }
}
/* ================= Defensive layout: nothing inside the deal panel may be wider than the panel ================= */
.doc img, .doc video, .doc svg, .doc canvas, .doc iframe { max-width: 100%; }
.doc :is(.card, .land, .blk, .find, .run, .propose, .allow, .scard, .rung, .lever, .docrow, .jobrow, .ws, .step, .trow, .tl-done, .tlive, .goalbar, .agentsbar) { min-width: 0; }
.doc :is(.kpis, .ret, .facts, .lnums, .glance, .ladder, .levers, .scards, .two, .sim, .simout, .docs, .pgrid, .hero-meta, .hero-act, .row, .tdact) > * { min-width: 0; }
.doc :is(p, li, figcaption, h1, h2, h3, h4, .prose, .lead, .note, .ttext, .twhy, .verdict, .tl-text, .dmain, a) { overflow-wrap: anywhere; }
.doc :is(b, small, span, dd, dt, td, th, label) { overflow-wrap: break-word; }
.bar, .bar .sections { min-width: 0; max-width: 100%; }

/* ================= Full-screen map: one button on the map, one button back to the deal ================= */
.mapfull { position: absolute; left: 16px; top: 16px; z-index: 3; display: none; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 11px;
  border: 0; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--ink); font: 600 13px/1 var(--sans); box-shadow: 0 6px 18px -8px rgba(0,0,0,.5); cursor: pointer; }
.mapfull:hover { background: #fff; }
.mapfull svg { flex: none; }
.mapfull .mf-back, body.map-full .mapfull .mf-open { display: none; }
body.map-full .mapfull .mf-back { display: inline; }
body:not(.portfolio) .mapfull { display: inline-flex; }
body.map-full .mappane { position: fixed !important; inset: 0 !important; z-index: 40; width: auto !important; height: auto !important; max-width: none; margin: 0 !important; }
body.map-full .mapfull { background: var(--ink); color: #fff; }
body.map-full .mapnav, body.map-full .orbit { visibility: visible !important; }
body.map-full .ui-tag { display: none; }
@media (max-width: 820px) {
  .mapfull { left: max(12px, env(safe-area-inset-left, 0px)); top: calc(12px + env(safe-area-inset-top, 0px)); }
  body.sheet-full:not(.map-full) .mapfull { visibility: hidden; }
  body.map-full .mappane .mapnav { top: calc(12px + env(safe-area-inset-top, 0px)); }
}

/* Phones: no Today/Concept tags over the before-and-after (the slider says it), no map full-screen button. */
@media (max-width: 620px) { .bacmp .ba-l, .bacmp .ba-r { display: none; } }
.mapfull { display: none !important; }
/* Dispatch agent: a comfortable tap target */
.acard [data-ac-open] { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px; white-space: nowrap; }
@media (max-width: 620px) { .acard [data-ac-open] { min-height: 40px; padding: 0 14px; } }

/* Shared link: one deal, so no deals menu; the tabs get the whole header row. */

/* Shared link: one deal, so no deals menu; scenarios are read, not edited. */

body.share .sections a em { display: none; }  /* the owner's task count means nothing to a viewer */

/* Phone header: ☰ left; ‹ n/N › and ✕ right; the tabs get their own full-width row. Even spacing, 40px tap targets. */
@media (max-width: 820px) {
  body:not(.portfolio) .bar {
    display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: "menu memo step close" "tabs tabs tabs tabs";
    align-items: center; column-gap: 4px; row-gap: 4px; padding: 22px 10px 6px; border-radius: 16px 16px 0 0; flex-wrap: nowrap;
  }
  body:not(.portfolio) .bar .show-side { grid-area: menu; display: grid; place-items: center; width: 40px; height: 40px; margin: 0; }
  body:not(.portfolio) .bar .memo { grid-area: memo; justify-self: center; min-width: 0; }
  body:not(.portfolio) .bar .stepper { grid-area: step; display: flex; align-items: center; gap: 0; margin: 0; }
  body:not(.portfolio) .bar .stepper .icon { width: 36px; height: 40px; display: grid; place-items: center; font-size: 20px; }
  body:not(.portfolio) .bar .stepper #stepN { min-width: 38px; text-align: center; font-size: 13px; color: var(--mute); }
  body:not(.portfolio) .bar .close { grid-area: close; width: 40px; height: 40px; display: grid; place-items: center; margin: 0; }
  body:not(.portfolio) .bar .sections { grid-area: tabs; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 0 2px 4px; margin: 0; justify-content: flex-start; }
  body:not(.portfolio) .bar .sections::-webkit-scrollbar { display: none; }
  body:not(.portfolio) .bar .sections a { flex: none; }
  body.sheet-full:not(.portfolio) .bar, body.card-up:not(.portfolio) .bar { border-radius: 0; }
}

/* People (contact CRM on the home card) */
.ppl-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.ppl-pill { font: inherit; font-size: 12.5px; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; }
.ppl-pill.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.ppl-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.ppl-a { font-size: 10.5px; background: var(--good); color: #fff; border-radius: 4px; padding: 0 5px; vertical-align: 2px; }
.ppl-next { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.ppl-draft { white-space: pre-line; font-size: 14px; line-height: 1.55; background: #fbfaf7; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.ppl-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.ppl-acts .ppl-sent { margin-left: auto; }
.ppl-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.ppl-row .tnow { margin: 2px 0 0; font-size: 12.5px; color: var(--mute); }

.side-people { display: flex; align-items: center; gap: 8px; width: 100%; margin: 6px 0 2px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.side-people:hover { border-color: var(--blue); }
.side-people-n { margin-left: auto; font-size: 12px; background: var(--blue); color: #fff; border-radius: 99px; padding: 0 7px; }
.side-people-n:empty { display: none; }
.ppl-card { position: fixed; z-index: 60; top: 4vh; bottom: 4vh; left: 50%; transform: translateX(-50%); width: min(1040px, calc(100vw - 64px)); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(20, 28, 45, .35), 0 2px 6px rgba(20, 28, 45, .08); overflow: hidden; }
.ppl-card[hidden] { display: none; }
.ppl-card-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 8px; }
.ppl-card-h h2 { margin: 0; font-family: Fraunces, serif; font-weight: 500; font-size: 26px; }
.ppl-card-h p { margin: 2px 0 0; font-size: 13px; color: var(--mute); }
.ppl-card-b { flex: 1; overflow-y: auto; padding: 0 20px 20px; }
@media (max-width: 820px) { .ppl-card { top: max(16px, env(safe-area-inset-top, 0px)); bottom: 8px; left: 8px; right: 8px; width: auto; transform: none; } }
.ppl-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(15, 22, 36, .28); backdrop-filter: blur(6px) saturate(.9); -webkit-backdrop-filter: blur(6px) saturate(.9); }
.ppl-scrim[hidden] { display: none; }
.ppl-card-h { padding: 26px 32px 10px; } .ppl-card-b { padding: 0 32px 28px; }
@media (max-width: 820px) { .ppl-card-h { padding: 18px 18px 8px; } .ppl-card-b { padding: 0 14px 18px; } }

/* Phone: pull the card down from the top to see the whole map; tap the handle or swipe up to bring it back. */
@media (max-width: 820px) {
  body:not(.portfolio) .main { transition: transform .32s cubic-bezier(.2,.8,.2,1); }
  body.map-open:not(.portfolio) .mappane { height: 100vh; height: 100dvh; }
  body.map-open:not(.portfolio) .main { transform: translateY(calc(66vh - 124px)); overflow: hidden; }
  body.map-open:not(.portfolio) .composer-wrap { display: none; }
}

/* Phone: the deals menu (☰) always sits top-left of the screen, also over an open deal card. */
.fab-menu { display: none; }
@media (max-width: 820px) {
  body:not(.portfolio) .fab-menu { display: grid; place-items: center; position: fixed; z-index: 13; left: max(12px, env(safe-area-inset-left, 0px)); top: calc(12px + env(safe-area-inset-top, 0px));
    width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 4px 14px -6px rgba(0,0,0,.45); }
  body:not(.portfolio) .bar .show-side { visibility: hidden; }
  body.card-up:not(.portfolio) .fab-menu, body.sheet-full:not(.portfolio) .fab-menu { box-shadow: none; background: transparent; top: 16px; }
}

/* Phone deal header, one row: tabs (scroll sideways) · ‹ n/N › · ✕. The ☰ lives top-left of the screen, so the
   header no longer needs a second row; the handle sits in its own 18px strip above. */
@media (max-width: 820px) {
  body:not(.portfolio) .bar {
    grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "tabs step close";
    column-gap: 2px; row-gap: 0; padding: 20px 6px 8px 10px;
  }
  body:not(.portfolio) .bar .show-side, body:not(.portfolio) .bar .memo:empty { display: none; }
  body:not(.portfolio) .bar .sections { padding: 0; align-items: center;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  body:not(.portfolio) .bar .stepper { padding-left: 4px; border-left: 1px solid var(--line); }
  body:not(.portfolio) .bar .stepper .icon { width: 30px; height: 40px; }
  body:not(.portfolio) .bar .stepper #stepN { min-width: 34px; font-size: 12.5px; }
  body:not(.portfolio) .bar .close { width: 38px; }
}
@media (max-width: 820px) {
  /* "n agents working" floats just above the card instead of taking a header row */
  body:not(.portfolio) .bar .memo { position: absolute; left: 50%; top: -42px; transform: translateX(-50%); grid-area: auto; }
  body.card-up:not(.portfolio) .bar .memo, body.sheet-full:not(.portfolio) .bar .memo { top: auto; bottom: -40px; }
}

/* ---- Phone deal header, production pass ----
   8-pt rhythm: handle 36×4 at 8px, 16px to the controls row, 12px below. One quiet row: tabs as a
   segmented strip, then a compact counter and a soft round close. No divider; spacing separates groups. */
@media (max-width: 820px) {
  body:not(.portfolio) .main::before { height: 36vh; height: 36dvh; }
  body:not(.portfolio) .bar {
    padding: 24px 12px 12px 16px; column-gap: 12px;
    border-radius: 24px 24px 0 0; border-bottom: 1px solid rgba(28,34,48,.06);
    box-shadow: 0 -1px 0 rgba(28,34,48,.04), 0 -12px 32px -18px rgba(12,29,51,.45);
  }
  body:not(.portfolio) .bar::before { top: 8px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgba(28,34,48,.18); }
  body.card-up:not(.portfolio) .bar, body.sheet-full:not(.portfolio) .bar { border-radius: 0; box-shadow: 0 1px 0 rgba(28,34,48,.06); }

  body:not(.portfolio) .bar .sections { gap: 4px; }
  body:not(.portfolio) .bar .sections a { font-size: 14px; font-weight: 500; color: #6b7280; padding: 7px 12px; border-radius: 999px; line-height: 20px; }
  body:not(.portfolio) .bar .sections a.on { color: var(--ink); background: rgba(28,34,48,.07); font-weight: 600; }
  body:not(.portfolio) .bar .sections a em { font-size: 10.5px; min-width: 17px; height: 17px; margin-left: 5px; vertical-align: 1px; }

  body:not(.portfolio) .bar .stepper { border-left: 0; padding-left: 0; gap: 0; }
  body:not(.portfolio) .bar .stepper .icon { width: 28px; height: 36px; font-size: 18px; color: #6b7280; }
  body:not(.portfolio) .bar .stepper #stepN { min-width: 36px; font-size: 13px; font-variant-numeric: tabular-nums; color: #6b7280; }
  body:not(.portfolio) .bar .close { width: 36px; height: 36px; border-radius: 50%; background: rgba(28,34,48,.06); color: var(--ink); font-size: 15px; }
  body:not(.portfolio) .bar .close:active { background: rgba(28,34,48,.12); }
}

/* ---- Phone deal header, simplified ----
   Header = tabs + close. The deal switcher (‹ n/N ›) floats on the map above the card's top-right corner.
   Card resting over the map: ☰ floats top-left of the screen. Card pulled to full height: ☰ joins the header. */
@media (max-width: 820px) {
  body:not(.portfolio) .bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tabs close"; column-gap: 8px; padding: 24px 12px 12px 12px; }
  body:not(.portfolio) .bar .stepper {
    position: absolute; right: 12px; top: -52px; grid-area: auto; height: 36px; padding: 0 4px; border-radius: 999px;
    background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px -6px rgba(0,0,0,.35);
  }
  body:not(.portfolio) .bar .stepper .icon { width: 30px; height: 36px; color: var(--ink); }
  body:not(.portfolio) .bar .stepper #stepN { color: var(--ink); }
  body:not(.portfolio) .bar .memo { left: 12px; transform: none; top: -48px; }
  body.card-up:not(.portfolio) .bar .stepper, body.sheet-full:not(.portfolio) .bar .stepper,
  body.card-up:not(.portfolio) .bar .memo, body.sheet-full:not(.portfolio) .bar .memo { display: none; }
  body.card-up:not(.portfolio) .fab-menu, body.sheet-full:not(.portfolio) .fab-menu { display: none; }
  body.card-up:not(.portfolio) .bar, body.sheet-full:not(.portfolio) .bar {
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "menu tabs close"; padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }
  body.card-up:not(.portfolio) .bar::before, body.sheet-full:not(.portfolio) .bar::before { display: none; }
  body.card-up:not(.portfolio) .bar .show-side, body.sheet-full:not(.portfolio) .bar .show-side { display: grid; visibility: visible; grid-area: menu; width: 36px; height: 36px; }
}

/* Phone hero: an inset rounded photo card under the header, with a deeper scrim so the white type reads. */
@media (max-width: 820px) {
  body:not(.portfolio) .page > .hero.has-photo { margin: 4px 0 0; border-radius: 20px; min-height: 300px; padding: 20px 18px 18px; box-shadow: 0 10px 24px -16px rgba(8,14,24,.5); }
  body:not(.portfolio) .hero.has-photo::before { background: linear-gradient(180deg, rgba(8,14,24,0) 12%, rgba(8,14,24,.48) 40%, rgba(8,14,24,.76) 65%, rgba(8,14,24,.9) 100%); }
  body:not(.portfolio) .hero h1 { font-size: 30px; line-height: 1.1; }
  body:not(.portfolio) .hero p { font-size: 14px; margin-top: 4px; }
  body:not(.portfolio) .doc { padding-top: 12px; }
}
@media (max-width: 820px) {
  /* Content fades out under the composer instead of being cut by it. */
  body:not(.portfolio) .composer-wrap { background: linear-gradient(180deg, rgba(250,249,246,0) 0%, var(--bg) 42%); padding-top: 28px; pointer-events: none; }
  body:not(.portfolio) .composer-wrap > * { pointer-events: auto; }
}

/* Empty brief: one calm row, text left, action right. */
.brief-empty { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 4px 0 16px; padding: 14px 16px; border: 1px dashed #d6d2c7; border-radius: 14px; background: rgba(255,255,255,.6); }
.brief-empty b { font-size: 15px; font-weight: 600; }
.brief-empty .sub { margin: 2px 0 0; font-size: 13px; color: var(--mute); line-height: 1.45; }
.brief-empty .btn { flex: none; }
@media (max-width: 820px) {
  body:not(.portfolio) .bar .sections { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 86%, transparent); }
}
.note:empty { display: none; }
@media (max-width: 820px) {
  body:not(.portfolio) .ret + h3.sub3 { margin-top: 14px; }
  body:not(.portfolio) .skv { column-gap: 24px; }
}
@media (max-width: 820px) { body:not(.portfolio) #s-numbers .ret { margin-bottom: 24px; } body:not(.portfolio) #s-numbers .ret + h3.sub3 { margin-top: 0; } }

.ppl-row { cursor: pointer; }
.ppl-row:not(.open):hover { background: #f7f8fb; }
.ppl-row .tdetail { cursor: auto; }
/* Tab count badge: centred on the label with an even 6px gap, on every screen size. */
.sections a { display: inline-flex; align-items: center; gap: 6px; }
.sections a em { margin-left: 0 !important; vertical-align: 0 !important; line-height: 1; }

/* People v2: dispatch bar, lanes, search, quick add */
.ppl-dispatch { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 6px 18px -14px rgba(12,29,51,.35); }
.ppl-dispatch:focus-within { border-color: var(--blue); }
.ppl-dispatch input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 15px; background: transparent; padding: 10px 0; }
.ppl-run { display: flex; align-items: center; gap: 10px; margin: 10px 2px 0; font-size: 13.5px; color: var(--ink-2); }
.ppl-run b { font-weight: 600; } .ppl-run.failed > b { color: var(--warn); }
.ppl-ok { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--good); color: #fff; }
.ppl-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0 12px; flex-wrap: wrap; }
.ppl-tools .ppl-pills { margin: 0; }
.ppl-pill span { margin-left: 6px; font-size: 11.5px; opacity: .7; }
.ppl-tools-r { display: flex; gap: 8px; align-items: center; }
.ppl-tools-r input { font: inherit; font-size: 13.5px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; width: 170px; background: #fff; }
.ppl-add { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin: 0 0 14px; padding: 14px; border: 1px dashed #d6d2c7; border-radius: 14px; }
.ppl-add input, .ppl-add select { font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; min-width: 0; }
.ppl-add .wide { grid-column: 1 / 3; }
.btn.primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.ppl-more { display: grid; gap: 10px; padding-top: 4px; border-top: 1px dashed var(--line); }
.ppl-reply { display: flex; gap: 8px; } .ppl-reply input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; }
.ppl-meta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--mute); }
.ppl-meta select { font: inherit; font-size: 13px; margin-left: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.ppl-empty { padding: 24px 4px; }
@media (max-width: 820px) { .ppl-tools-r input { width: 120px; } .ppl-add { grid-template-columns: 1fr; } .ppl-add .wide { grid-column: auto; } }

.ppl-add[hidden] { display: none; }
.ppl-dispatch .sendbtn { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--blue); color: #fff; display: grid; place-items: center; cursor: pointer; }
.ppl-dispatch .sendbtn:hover { filter: brightness(1.08); }
.ppl-ready { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--blue); background: #e8eefc; border-radius: 999px; padding: 1px 8px; margin-left: 8px; white-space: nowrap; }
.ppl-tools { margin: 14px 0 12px; }
/* Buttons floating on the map keep their solid white face on hover (the generic .icon hover is near-transparent). */
.mapside:hover, .fab-menu:hover, body.portfolio .mapside:hover { background: #fff !important; color: var(--ink); box-shadow: 0 6px 18px -6px rgba(0,0,0,.45); }

/* ---- People, calm version ---- */
.ppl-hbtns { display: flex; gap: 4px; align-items: center; }
.ppl-hbtns .icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-2); }
.ppl-search { width: 100%; box-sizing: border-box; margin: 0 0 12px; font: inherit; font-size: 15px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ppl-search[hidden] { display: none; }
.ppl-add { margin: 0 0 12px; }
.ppl-dispatch { margin-bottom: 4px; }
.ppl-group { margin-top: 22px; }
.ppl-gh { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: baseline; gap: 8px; padding: 0 2px 10px; cursor: pointer; }
.ppl-gh span { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.ppl-gh em { font-style: normal; font-size: 13px; color: var(--mute); }
.ppl-gh i { margin-left: auto; font-style: normal; font-size: 13px; color: var(--blue); }
.ppl-group:first-of-type .ppl-gh i { display: none; }
.ppl-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.ppl-row { border-top: 1px solid #f0ede6; cursor: pointer; } .ppl-row:first-child { border-top: 0; }
.ppl-row:not(.open):hover { background: #fafaf8; }
.ppl-rowh { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.ppl-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #d4d1c8; display: grid; place-items: center; color: #fff; font-size: 11px; }
.ppl-row.st-ok .ppl-dot { background: var(--blue); border-color: var(--blue); }
.ppl-row.st-busy .ppl-dot { border: 2px solid #dbe4f7; border-top-color: var(--blue); animation: tspin .9s linear infinite; }
.ppl-row.st-stop .ppl-dot { background: #b7791f; border-color: #b7791f; }
.ppl-rowt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ppl-name { all: unset; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
.ppl-line { font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppl-firm { flex: none; font-size: 12.5px; color: var(--mute); max-width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppl-row .tdetail { display: grid; gap: 12px; padding: 0 16px 16px 48px; cursor: auto; }
.ppl-row.open { background: #fcfbf8; }
.ppl-moredt summary { font-size: 13px; color: var(--blue); cursor: pointer; list-style: none; }
.ppl-moredt summary::-webkit-details-marker { display: none; }
.ppl-moredt[open] summary { margin-bottom: 10px; }
.ppl-more { border-top: 0; padding-top: 0; }
@media (max-width: 820px) { .ppl-row .tdetail { padding-left: 16px; } .ppl-firm { display: none; } }


/* Inbox (same card as People) */
.side-people + .side-people { margin-top: 2px; }
.ib-act { font-weight: 600; color: var(--ink-2); }
.ib-decide .ib-act { color: #b7791f; } .ib-reply .ib-act { color: var(--blue); }
.ib-dot { border-style: solid; }
.ib-decide .ib-dot { border-color: #e3a94b; } .ib-reply .ib-dot { border-color: #8fa9ec; } .ib-do .ib-dot { border-color: #9aa3b2; }
.ib-sum { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); white-space: pre-line; }
.ppl-acts a.btn { text-decoration: none; }

/* New deal: a focused card over the map (not a full-height sheet). Empty fields are tinted so the gap shows. */
.nd-card { top: 10vh; bottom: auto; max-height: 80vh; width: min(680px, calc(100vw - 32px)); }
.nd-card.drop { outline: 2px dashed var(--blue); outline-offset: -10px; }
.nd-form textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: 150px; font: inherit; font-size: 15px; line-height: 1.5; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); outline: none; }
.nd-form textarea:focus { border-color: var(--blue); }
.nd-bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.nd-attach { font-size: 13.5px; font-weight: 600; color: var(--blue); cursor: pointer; }
.nd-files { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.nd-file { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--side); font-size: 12.5px; color: var(--ink-2); }
.nd-file button { border: 0; background: none; color: var(--mute); font-size: 15px; line-height: 1; padding: 0 5px; cursor: pointer; }
.nd-bar .btn.primary, .nd-add .btn.primary { margin-left: auto; padding: 9px 18px; font-size: 14px; font-weight: 600; }
.nd-card .ppl-run { margin-top: 16px; }
.nd-h { margin: 26px 0 10px; font-size: 12.5px; font-weight: 600; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; }
.nd-deal { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: grid; gap: 14px; margin-bottom: 10px; }
.nd-deal.skip { opacity: .45; }
.nd-top { display: flex; align-items: center; gap: 10px; }
.nd-top input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--blue); }
.nd-title { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid transparent; font: inherit; font-family: Fraunces, serif; font-size: 21px; color: var(--ink); padding: 2px 0; background: none; outline: none; }
.nd-title:focus { border-bottom-color: var(--blue); }
.nd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nd-grid label { display: grid; gap: 5px; font-size: 12px; color: var(--mute); font-weight: 600; }
.nd-grid .wide { grid-column: 1 / -1; }
.nd-grid input { font: inherit; font-size: 15px; color: var(--ink); padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; min-width: 0; outline: none; }
.nd-grid input:focus { border-color: var(--blue); }
.nd-grid input:placeholder-shown { background: #fffaf0; border-color: #ecd9b0; }
.nd-facts { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.nd-qs { margin-top: 4px; font-size: 13.5px; color: var(--ink-2); }
.nd-qs summary { cursor: pointer; font-weight: 600; color: var(--ink); padding: 6px 0; }
.nd-qs ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 5px; }
.nd-add { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.nd-hint { flex: 1; font-size: 13px; color: var(--warn); }
@media (max-width: 820px) { .nd-card { top: max(16px, env(safe-area-inset-top, 0px)); bottom: auto; max-height: calc(100vh - 32px); } .nd-grid { grid-template-columns: 1fr; } }
.nd-review .nd-form textarea { min-height: 0; height: 72px; }

/* Agents at work: one quiet line under People while any agent runs; the list opens in place. */
.side-agents { margin: 8px 0 0; }
.side-agents[hidden] { display: none; }
.sa-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 12px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; border-radius: 8px; }
.sa-h:hover { background: rgba(28,34,48,.05); }
.sa-h .dot { width: 10px; height: 10px; }
.sa-h i { margin-left: auto; font-style: normal; font-size: 12px; color: var(--mute); }
.sa-ok { color: var(--good); display: inline-flex; }
.sa-list { list-style: none; margin: 2px 0 6px; padding: 0 0 0 8px; display: grid; gap: 2px; }
.sa-list button { display: grid; gap: 1px; width: 100%; text-align: left; padding: 6px 10px; border: 0; border-radius: 8px; background: none; font: inherit; cursor: pointer; }
.sa-list button:hover { background: #fff; }
.sa-list b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.sa-list span { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast.agent-toast { z-index: 70; display: flex; align-items: center; gap: 8px; max-width: min(560px, calc(100vw - 32px)); }
.agent-toast b { color: #9fe0bd; flex: none; }
.agent-toast .at-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-toast .linkbtn { flex: none; margin-left: 4px; }
.ppl-card-b .keys { margin: 22px 0 0; font-size: 12px; color: var(--mute); text-align: center; letter-spacing: .01em; }
@media (hover: none), (max-width: 820px) { .ppl-card-b .keys { display: none; } }
.toast { z-index: 70; }  /* notices show over the Inbox, People and New deal cards too */

/* Signed out: the menu ends with the blue Sign in button (the deal list scrolls above it), and the Inbox and
   People cards say why they are empty. */
.side-signin[hidden] { display: none; }
.side-signin { margin: 6px 4px calc(4px + env(safe-area-inset-bottom, 0px)); padding: 12px; font-size: 15px; box-shadow: 0 8px 20px -12px rgba(20, 57, 198, .6); }
.signin-card { margin: 12vh auto 0; max-width: 360px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.signin-card p { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.signin-card .btn.primary { padding: 10px 28px; font-size: 15px; font-weight: 600; text-decoration: none; }

/* How to sell it: two calm cards under the scenarios (off-plan share, number of flats), each a chart, a slider and a
   small table. Assumptions stay folded until asked for. */
.strat { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 6px 0 22px; }
.stcard { border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 18px 20px; display: grid; gap: 14px; }
.sth b { font-size: 16px; color: var(--ink); }
.stlead { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.sttab { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.sttab th { text-align: right; font-weight: 600; color: var(--mute); font-size: 12px; padding: 4px 6px; }
.sttab th:first-child, .sttab td:first-child { text-align: left; color: var(--ink-2); }
.sttab td { text-align: right; padding: 6px; border-top: 1px solid #f0f1f4; color: var(--ink); }
.sttab td.up { color: var(--good); } .sttab td.dn { color: var(--bad); }
.sttab tr.best td { font-weight: 600; background: #f3f7ff; }
.stmore summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--blue); padding: 2px 0; }
.stmore[open] { display: grid; gap: 12px; }
.stmore .note { margin: 0; font-size: 12.5px; }
.stw { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.stw input { width: 58px; font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; margin: 0 2px 0 6px; text-align: right; }
.stcard > .btn { justify-self: start; }

@media (max-width: 620px) { .stcard { padding: 16px 14px; } .sttab { font-size: 12px; } .sttab th, .sttab td { padding: 5px 4px; } }
.side-all { display: block; padding: 8px 10px; font-size: 13.5px; font-weight: 600; color: var(--blue); text-decoration: none; border-radius: 8px; }
.side-all:hover { background: rgba(28,34,48,.05); }
.ac-again { font-size: 13px; margin: 2px 0 4px; justify-self: start; }
.sttab td { white-space: nowrap; }
.sttab td:first-child { white-space: normal; }

/* How to sell it, v2: a plain comparison instead of a chart; the working and the sources one tap away. */
.stctl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.stctl output { font-size: 14px; }
.sttab td small { display: block; font-size: 11.5px; color: var(--mute); font-weight: 400; }
.sttab th i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.stcmp td { vertical-align: top; }
.stcmp tr.stdiff td { font-weight: 600; border-top: 1px solid #dfe2e8; }
.sttab td.up, .stverdict b.up { color: var(--good); } .sttab td.dn, .stverdict b.dn { color: var(--bad); }
.stverdict { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.sttab tr.nofit td { color: var(--mute); }
.stsrc { margin: 4px 0 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.stsrc[open] { gap: 10px; }
.stdl { margin: 0; display: grid; gap: 8px; }
.stdl div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; font-size: 13px; line-height: 1.45; }
.stdl dt { font-weight: 600; color: var(--ink); } .stdl dd { margin: 0; color: var(--ink-2); }
.stareas td:last-child, .stareas th:last-child { text-align: right; }
@media (max-width: 620px) { .stctl { grid-template-columns: 1fr; } .stdl div { grid-template-columns: 1fr; gap: 2px; } }
.stverdict b { white-space: nowrap; }

/* Where the money goes: a horizontal waterfall. Bars sit in % of the track, so any width works. */
.perm2 { margin: 6px 0 22px; }
.wflead { margin: 0 0 10px; font-size: 14px; }
.wflead .up { color: #1f7a4f; } .wflead .dn { color: #b3261e; }
.wf { display: grid; gap: 4px; }
.wfrow { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr) 72px; align-items: center; gap: 10px; min-height: 26px; }
.wfl { font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.wfl small { display: block; color: #6b7280; font-size: 11px; }
.wft { position: relative; height: 18px; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), #e8eaef calc(25% - 1px) 25%); border-radius: 3px; }
.wft i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.wfv { font-size: 13px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wfrow.out .wfv { color: #7a3b2e; }
.wfrow.total { border-top: 1px solid #d9dce3; padding-top: 6px; margin-top: 2px; }
.wfrow.total .wfl, .wfrow.total .wfv { font-weight: 700; }
.wf-in { background: #1439c6; } .wf-buy { background: #c0563f; } .wf-tax { background: #d98b7a; } .wf-works { background: #d98b3a; }
.wf-fees { background: #ecc58f; } .wf-int { background: #9b7bc4; } .wf-sell { background: #b9c2d3; } .wf-profit { background: #2e9d6a; } .wf-loss { background: #b3261e; }
.wfnote { margin-top: 10px; }
@media (max-width: 480px) { .wfrow { grid-template-columns: minmax(0, 38%) minmax(0, 1fr) 62px; gap: 6px; } .wfl, .wfv { font-size: 12px; } }

/* Key questions: one line of answer per question, the flat-count table inline. */
.keyq { margin: 18px 0 4px; }
.keyq dl { margin: 0; display: grid; }
.keyq dl > div { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.keyq dt { font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.keyq dd { margin: 0; font-size: 13.5px; line-height: 1.5; min-width: 0; }
.keyq dd p.kqlead { margin: 0 0 6px; color: inherit; font-size: 13.5px; }
.keyq dd p { margin: 6px 0 0; color: var(--mute); font-size: 12.5px; }
.kqmore { display: block; font-weight: 500; font-size: 12px; color: #1439c6; margin-top: 2px; text-decoration: none; }
.kqflats { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.kqflats th { text-align: left; font-weight: 500; color: var(--mute); padding: 0 6px 4px 0; }
.kqflats td { padding: 4px 6px 4px 0; border-top: 1px solid var(--line); vertical-align: top; }
.kqflats td small { display: block; color: var(--mute); font-size: 11px; }
.kqflats tr.plan td { font-weight: 600; } .kqflats tr.nofit td { color: var(--mute); }
@media (max-width: 560px) { .keyq dl > div { grid-template-columns: 1fr; gap: 4px; } }

/* The thesis of a buy-restore-sell deal: the idea, the building in 3D beside the price gap, the plan as steps joined by
   arrows, three numbers. The page's own look: white card, navy, the blue accent. Sized by the section's own width. */
.land-sale { padding: 22px 22px 20px; container-type: inline-size; }
.th-eye { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.th-pitch { margin: 8px 0 18px; font: 600 26px/1.22 var(--serif); color: var(--ink); text-wrap: balance; }
.th-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.th-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } .th-duo.solo { grid-template-columns: minmax(0, 1fr); }
.th-model, .th-gap { margin: 0; background: #fff; display: flex; flex-direction: column; }
.th-model model-viewer { width: 100%; height: 280px; background: #fff; --poster-color: #fff; }
.th-model figcaption, .th-gap figcaption { padding: 4px 0 0; font-size: 12px; color: var(--mute); text-align: center; }
.th-gap svg { display: block; width: 100%; max-width: 360px; height: auto; margin: auto; padding: 10px 6px 0; }
.th-gap { justify-content: center; }
.ga-a { fill: #e3ddd1; } .ga-b { fill: var(--blue); } .ga-base { stroke: #c9c3b6; stroke-width: 1.5; }
.ga-v { font: 700 21px var(--sans); fill: var(--ink); text-anchor: middle; } .ga-v.b { fill: var(--blue); }
.ga-s { font: 500 10.5px var(--sans); fill: var(--mute); text-anchor: middle; }
.ga-cap { font: 700 10.5px var(--sans); fill: var(--ink-2); text-anchor: middle; letter-spacing: .06em; text-transform: uppercase; }
.ga-arrow { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; } .ga-head { fill: var(--blue); }
.ga-lab { font: 700 13px var(--sans); fill: var(--blue); text-anchor: middle; }
.land-sale .bh { margin-top: 22px; }
.th-flow { list-style: none; margin: 0; padding: 0; }
.th-flow li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; }
.th-flow li:last-child { padding-bottom: 0; }
.th-flow li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 4px; width: 2px; background: #cdd7f7; }
.th-flow li:not(:last-child)::after { content: ""; position: absolute; left: 12px; bottom: 2px; width: 8px; height: 8px; border-right: 2px solid #9fb2ef; border-bottom: 2px solid #9fb2ef; transform: rotate(45deg); }
.fn { width: 36px; height: 36px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.fb { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; }
.ft { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ft b { font-size: 15px; } .fv { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.fb p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); }
.th-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.th-kpis > div { padding: 14px 16px; display: grid; gap: 2px; box-shadow: 0 0 0 .5px var(--line); }
.th-kpis span { font-size: 12.5px; color: var(--mute); } .th-kpis b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; } .th-kpis small { font-size: 12px; color: var(--ink-2); }
.th-kpis .good b { color: var(--good); } .th-kpis .warn b { color: var(--warn); } .th-kpis .bad b { color: var(--bad); }
@container (max-width: 520px) { .land-sale { padding: 16px 14px; } .th-pitch { font-size: 22px; } .th-kpis { grid-template-columns: minmax(0, 1fr); } .ft { display: grid; gap: 2px; } }
/* The business plan's steps, and the renders prompt under the before/after. */
.pplan2 { list-style: none; margin: 8px 0 18px; padding: 0; counter-reset: pp; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pplan2 li { counter-increment: pp; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; padding: 12px 14px; background: #fff; }
.pplan2 li + li { border-top: 1px solid var(--line); }
.pplan2 li::before { content: counter(pp); grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.pplan2 b { font-size: 14.5px; } .pplan2 p { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); grid-column: 2; }
.ba-ask { margin: -2px 0 18px; } .ba-ask .acard { border-style: dashed; border-color: #cdd7f7; background: #fafbff; }
/* The property as a developer reads it. */
.sphotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; margin: 14px 0 4px; }
.sph { aspect-ratio: 4 / 3; border: 0; border-radius: 10px; background: #eee center / cover; cursor: zoom-in; }
.sfacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin: 14px 0 4px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sfacts div { margin: 0; padding: 10px 12px; box-shadow: 0 0 0 .5px var(--line); background: #fff; }
.sfacts dt { font-size: 12px; color: var(--mute); } .sfacts dd { margin: 2px 0 0; font-size: 16px; font-weight: 700; } .sfacts dd small { display: block; font-size: 11.5px; font-weight: 500; color: var(--mute); }
.suses, .scomps { width: 100%; border-collapse: collapse; font-size: 13.5px; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.suses th, .scomps th { text-align: left; font-size: 12px; font-weight: 600; color: var(--mute); padding: 8px 12px; border-bottom: 1px solid var(--line); }
.suses td, .scomps td { padding: 8px 12px; border-bottom: 1px solid var(--line); } .suses td:nth-child(2), .suses td:nth-child(3), .scomps td:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }
.suses th:nth-child(2), .suses th:nth-child(3), .scomps th:nth-child(n+3) { text-align: right; }
.suses tfoot td { font-weight: 700; border-bottom: 0; }
.snear { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.snear > div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff; }
.snear span { font-size: 12px; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .05em; }
.snear ul { list-style: none; margin: 6px 0 0; padding: 0; } .snear li { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; padding: 3px 0; }
.snear em { font-style: normal; color: var(--mute); white-space: nowrap; font-size: 12.5px; }
.smkt { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.smkt div { padding: 10px 12px; display: grid; gap: 1px; box-shadow: 0 0 0 .5px var(--line); background: #fff; }
.smkt span { font-size: 12px; color: var(--mute); } .smkt b { font-size: 18px; font-variant-numeric: tabular-nums; } .smkt small { font-size: 11.5px; color: var(--ink-2); }
.smkt .flag { background: #fffaf1; } .smkt .flag b { color: var(--warn); }
@media (max-width: 520px) { .scomps td:nth-child(2), .scomps th:nth-child(2) { display: none; } }

/* Pre-selling, as one comparison on the Base case. */
.stpair { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 10px 0 4px; }
.stpair > div { padding: 12px 14px; display: grid; gap: 2px; background: #fff; } .stpair > div + div { border-left: 1px solid var(--line); }
.stpair span { font-size: 12.5px; color: var(--mute); } .stpair b { font-size: 24px; font-variant-numeric: tabular-nums; } .stpair small { font-size: 12.5px; color: var(--ink-2); }
.stpair .up { background: #f5fbf7; } .stpair .up b { color: var(--good); } .stpair .dn { background: #fdf6f5; } .stpair .dn b { color: var(--bad); }
.stothers { margin: 4px 0 0; }
/* How the building is used today: a cross-section, floor by floor, beside the totals. */
.xsec { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: center; margin: 4px 0 6px; container-type: inline-size; }
@media (max-width: 620px) { .xsec { grid-template-columns: minmax(0, 1fr); } }
.xcut { display: grid; gap: 3px; padding: 14px 12px 10px 86px; background: #fbfaf7; border-radius: 12px; position: relative; }
.xf { position: relative; display: flex; justify-content: center; }
.xf.under { margin-top: 8px; }
.xl { position: absolute; left: -78px; top: 50%; transform: translateY(-50%); width: 72px; font-size: 11px; font-weight: 600; color: var(--mute); white-space: nowrap; }
.xr { display: flex; gap: 2px; }
.xu { min-width: 0; height: 40px; border-radius: 4px; padding: 3px 6px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; color: #fff; }
.xu b { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xu small { font-size: 10.5px; opacity: .85; white-space: nowrap; }
.xground { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); bottom: 58px; }
.u-flat { background: #1439c6; } .u-off { background: #6b7a99; } .u-shop { background: #c7803a; } .u-store { background: #b9ad92; } .u-com { background: repeating-linear-gradient(45deg, #c9ced8 0 3px, #e7e9ee 3px 6px); }
.xsum { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.xsum li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 40px; gap: 8px; align-items: center; padding: 9px 12px; font-size: 13.5px; }
.xsum li + li { border-top: 1px solid var(--line); } .xsum i { width: 12px; height: 12px; border-radius: 3px; }
.xsum b { font-variant-numeric: tabular-nums; } .xsum em { font-style: normal; color: var(--mute); text-align: right; font-size: 12.5px; }
.xsum .xt { grid-template-columns: minmax(0, 1fr) auto; font-weight: 700; background: #fbfaf7; }
@container (max-width: 480px) { .th-duo { grid-template-columns: minmax(0, 1fr); } .th-model model-viewer { height: 240px; } }
.smap { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); } .smap iframe { display: block; width: 100%; height: 260px; border: 0; }
.smap { position: relative; } .smap img { display: block; width: 100%; height: auto; } .smap-a { position: absolute; right: 10px; top: 10px; background: #fff; border-radius: 8px; padding: 5px 10px; font-size: 12.5px; font-weight: 600; color: var(--blue); text-decoration: none; box-shadow: 0 1px 4px rgba(0,0,0,.15); } .smap small { position: absolute; right: 8px; bottom: 4px; font-size: 10px; color: #555; background: rgba(255,255,255,.7); padding: 0 4px; }
/* 3D models: the poster (a still from the same camera) shows at once and fades once the live model has loaded. */
.mv { position: relative; }
.mv > model-viewer { position: relative; }
.mv-poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; pointer-events: none; transition: opacity .5s ease; }
.mv.ready .mv-poster { opacity: 0; }
.ac-model:fullscreen .mv, .ac-model.fs .mv { height: 100%; }
.ac-model:fullscreen .mv-poster, .ac-model.fs .mv-poster { display: none; }
/* Notes inside the property tables (hotel rates, record checks) sit under the value, small and muted. */
.scomps td small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--mute); line-height: 1.35; }
.srates td:first-child, .schecks td { vertical-align: top; }
.schecks td:nth-child(n+2) { text-align: left !important; }
.schecks { margin-top: 14px; }

/* The sections below the thesis wear its card: the small label, one sentence, two pictures, numbered steps, three numbers. */
section.s.sx { gap: 14px; margin-top: 18px; }
.sx-h { display: block; }
.sx-h .th-pitch { margin: 8px 0 0; }
.sx > .th-kpis, .sx > .th-duo { margin-top: 4px; }
.th-pic { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.th-pic > button, .th-pic > a { display: block; width: 100%; height: 260px; border: 0; padding: 0; border-radius: 12px; background: #eef0f4 center / cover no-repeat; cursor: pointer; }
.th-pic figcaption { padding: 6px 0 0; font-size: 12px; color: var(--mute); text-align: center; }
.sx .th-flow { margin-top: 2px; } .sx .fb p:empty { display: none; }
@container (max-width: 480px) { .th-pic > button, .th-pic > a { height: 210px; } }
.sx .ret { border-radius: 12px; overflow: hidden; } .sx .ret b { font-size: 26px; font-weight: 700; } .sx .ret span { font-size: 12.5px; color: var(--mute); }
@container (max-width: 520px) { .sx .ret { grid-template-columns: minmax(0, 1fr); } .sx .ret div { border-left: 0; } .sx .ret div + div { border-top: 1px solid var(--line); } }

/* How we add value: the value plan in the thesis card. */
.vx .vx-bridge { margin-top: 2px; }
.vx .vx-after { background: #0c1d33; }
.vx .wfrow.vx-allin { border-top: 1px dashed #d9dce3; padding-top: 6px; margin-top: 4px; }
.vc-Rooms { background: #1439c6; } .vc-Building { background: #c0563f; } .vc-Systems { background: #9b7bc4; } .vc-Outdoor { background: #2e9d6a; }
.vc-FB { background: #d98b3a; } .vc-Energy { background: #e0b43a; } .vc-Legal { background: #6b7a99; }
.vx-cats { margin: 0; display: grid; gap: 10px; align-content: center; }
.vx-stack { display: flex; height: 16px; border-radius: 8px; overflow: hidden; gap: 2px; }
.vx-stack i { min-width: 4px; }
.vx-cats ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vx-cats li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 38px; gap: 8px; align-items: center; font-size: 13.5px; }
.vx-cats li s { width: 12px; height: 12px; border-radius: 3px; }
.vx-cats li b { font-variant-numeric: tabular-nums; } .vx-cats li em { font-style: normal; color: var(--mute); text-align: right; font-size: 12.5px; }
.vx-cats figcaption { font-size: 12px; color: var(--mute); text-align: center; }
.vx-angles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vx-angle { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; align-content: start; background: #fff; }
.vx-angle.chosen { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; background: var(--blue-soft); }
.vx-angle.rejected { opacity: .72; }
.vx-at { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vx-at small { font-size: 11.5px; color: var(--mute); }
.vx-badge { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.chosen .vx-badge { color: var(--blue); } .also .vx-badge { color: var(--good); }
.vx-angle b { font-size: 15px; } .vx-angle p { margin: 0; font-size: 13px; color: var(--ink-2); }
.vx-am { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.vx-am em { font-style: normal; font-weight: 700; color: var(--good); font-variant-numeric: tabular-nums; }
.vx-fixes, .vx-risks { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.vx-fix { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; padding: 10px 12px; align-items: start; }
.vx-fix + .vx-fix, .vx-risks li + li { border-top: 1px solid var(--line); }
.vx-ph { width: 64px; height: 64px; border-radius: 8px; border: 0; padding: 0; background: #eef0f4 center / cover no-repeat; cursor: zoom-in; }
.vx-ph.none { cursor: default; opacity: .25; }
.vx-fix b { font-size: 14px; } .vx-fix p { margin: 2px 0 6px; font-size: 13px; color: var(--ink-2); }
.vx-chips { display: flex; gap: 6px; flex-wrap: wrap; } .vx-chips i { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #f1f2f5; color: var(--ink-2); }
.vx-pri.must { background: #fbe9e7; color: var(--bad); } .vx-pri.should { background: #fbf1e1; color: var(--warn); } .vx-pri.could { background: #e7f3ec; color: var(--good); }
.vx-cost { text-align: right; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; } .vx-cost small { display: block; font-size: 11.5px; font-weight: 500; color: var(--mute); }
.vx-gantt { display: grid; gap: 6px; }
.vx-gr { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13px; }
.vx-gt { position: relative; height: 22px; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), #e8eaef calc(25% - 1px) 25%); border-radius: 4px; }
.vx-gt i { position: absolute; top: 0; bottom: 0; border-radius: 4px; color: #fff; font: 600 11px var(--sans); font-style: normal; display: flex; align-items: center; padding: 0 6px; white-space: nowrap; overflow: hidden; }
.vx-gt .g0 { background: #6b7a99; } .vx-gt .g1 { background: #d98b3a; } .vx-gt .g2 { background: #1439c6; } .vx-gt .g3 { background: #2e9d6a; }
.vx-gax .vx-gt { background: none; height: 14px; } .vx-gax em { position: absolute; font-style: normal; font-size: 11px; color: var(--mute); }
.vx-risks li { padding: 10px 14px; } .vx-risks b { font-size: 14px; } .vx-risks p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.vx-src summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--blue); }
.vx-src ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; display: grid; gap: 4px; } .vx-src a { color: var(--blue); }
.vx-lb { position: fixed; inset: 0; z-index: 90; background: rgba(12,29,51,.86); display: grid; place-items: center; padding: 24px; cursor: zoom-out; }
.vx-lb img { max-width: 100%; max-height: 100%; border-radius: 10px; } .vx-lb button { position: absolute; top: 14px; right: 16px; border: 0; background: #fff; border-radius: 50%; width: 36px; height: 36px; font-size: 20px; }
@container (max-width: 520px) { .vx-angles { grid-template-columns: minmax(0, 1fr); } .vx-fix { grid-template-columns: 52px minmax(0, 1fr); } .vx-ph { width: 52px; height: 52px; } .vx-fix .vx-cost { grid-column: 2; text-align: left; } .vx-gr { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); } }
.vx .vx-bridge { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.vx .vx-note { margin: -2px 0 4px; padding-left: calc(34% + 10px); font-size: 11.5px; line-height: 1.35; color: var(--mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vx .vx-basis { margin-top: 8px; } .vx .vx-basis b { color: var(--ink-2); }
@container (max-width: 520px) { .vx .vx-note { padding-left: 0; } }

/* Polish for the sections below the thesis: quieter agent buttons, readable research lines, tidy tables, compact tiles. */
.smap[hidden] { display: none !important; }
.sx .rcard .btn.pri[data-ac-open] { background: #fff; color: var(--blue); border: 1px solid #c9d3f5; box-shadow: none; font-weight: 600; font-size: 13px; padding: 7px 12px; white-space: nowrap; }
.sx .rcard .btn.pri[data-ac-open]:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.sx .rcard:not(.open) .ac-line span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sx .acards { gap: 8px; }
.sx .srates td:first-child a, .sx .scomps td:first-child a { color: var(--ink); font-weight: 600; text-decoration: none; }
.sx .srates td:first-child a:hover, .sx .scomps td:first-child a:hover { color: var(--blue); text-decoration: underline; }
.sx .scomps th { white-space: nowrap; }
.sx .scomps td:last-child b { display: inline-block; background: var(--blue-soft); color: var(--blue); border-radius: 999px; padding: 2px 9px; font-size: 13px; }
.sx .sfacts { border-radius: 12px; }
@container (max-width: 520px) {
  .sx .th-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sx .th-kpis > div { padding: 12px 12px; }
  .sx .th-kpis b { font-size: 19px; }
  .sx .th-kpis small { font-size: 11.5px; line-height: 1.35; }
}
@container (max-width: 380px) { .sx .th-kpis { grid-template-columns: minmax(0, 1fr); } }
.sx .stcard { min-width: 0; max-width: 100%; overflow-x: auto; } .sx .stcard > * { min-width: 0; }
@container (max-width: 520px) { .sx .stcard { padding: 14px 12px; } }

/* The investor story (story.js): the thesis's language carried through the page. Sand is today, blue is the plan. */
:root { --iv-sand: #e3ddd1; --iv-sand2: #c9c3b6; --iv-h-good: #d3ebdc; --iv-h-mid: #f5e7c8; --iv-h-low: #f6dcd6; --iv-h-loss: #e9a89e; }
.ga-c { fill: #ecc1b9; } .ga-v.c { fill: var(--bad); }
.ga-arrow.r { stroke: var(--bad); } .ga-head.r { fill: var(--bad); } .ga-lab.r { fill: var(--bad); }
.iv-gap svg { display: block; width: 100%; max-width: 360px; height: auto; margin: auto; overflow: visible; }
.iv-gap figcaption, .iv-ring figcaption { padding: 6px 0 0; font-size: 12px; color: var(--mute); text-align: center; }
.iv-ring { margin: 0; } .iv-ring svg { display: block; width: 100%; max-width: 230px; height: auto; margin: auto; }
.iv-rm-on { stroke: var(--blue); } .iv-rm-was { stroke: var(--iv-sand2); } .iv-rm-off { stroke: #f1eee8; }
.iv-rm-l { font: 600 9.5px var(--sans); fill: var(--mute); text-anchor: middle; }
.iv-rm-big { font: 300 44px var(--serif); fill: var(--ink); text-anchor: middle; } .iv-rm-small { font: 600 10.5px var(--sans); fill: var(--mute); text-anchor: middle; letter-spacing: .04em; text-transform: uppercase; }
.iv-duo { align-items: end; }

.iv-stairs { position: relative; margin-top: 6px; }
.iv-st-plot { position: relative; height: 250px; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; border-bottom: 1.5px solid var(--iv-sand2); }
.iv-st-col { position: relative; height: 100%; } .iv-st-col.hl { background: var(--blue-soft); border-radius: 12px 12px 0 0; }
.iv-st-bar { position: absolute; left: 12%; right: 12%; border-radius: 7px; }
.iv-st-bar.k-today { background: var(--iv-sand); } .iv-st-bar.k-lever { background: var(--blue); } .iv-st-bar.k-after { background: var(--ink); }
.iv-st-v { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); font: 700 12.5px var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.iv-st-v.k-lever { color: var(--blue); }
.iv-st-allin { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed var(--bad); z-index: 1; }
.iv-st-allin span { position: absolute; left: 0; top: 5px; font: 700 11.5px var(--sans); color: var(--bad); }
.iv-st-made { position: absolute; left: 0; top: 0; } .iv-st-made b { display: block; font: 300 30px/1 var(--serif); color: var(--good); } .iv-st-made span { font: 600 11.5px var(--sans); color: var(--good); }
.iv-st-made.neg b, .iv-st-made.neg span { color: var(--bad); }
.iv-st-made em { display: block; margin-top: 4px; font: 700 11.5px var(--sans); font-style: normal; color: var(--bad); }
.iv-st-lab { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; margin-top: 8px; text-align: center; }
.iv-st-lab b { display: block; font: 700 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.iv-st-lab span { font-size: 11.5px; color: var(--mute); }
.iv-callout { display: flex; gap: 14px; align-items: center; margin-top: 18px; background: var(--blue-soft); border-radius: 12px; padding: 12px 16px; font-size: 13.5px; color: var(--ink-2); }
.iv-callout b { font: 300 32px/1 var(--serif); color: var(--blue); white-space: nowrap; }

.iv-shop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.iv-item { position: relative; margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--iv-sand); }
.iv-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.iv-item:hover img { transform: scale(1.04); }
.iv-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,29,51,0) 45%, rgba(12,29,51,.72)); }
.iv-item.noimg { background: linear-gradient(160deg, #1b3868, #0c1d33); display: grid; place-items: center; } .iv-item.noimg::after { display: none; }
.iv-kb { color: #fff; font: 300 30px var(--serif); }
.iv-tag { position: absolute; right: 8px; top: 8px; z-index: 1; background: #fff; color: var(--ink); font: 800 12.5px var(--sans); padding: 3px 9px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,.18); font-variant-numeric: tabular-nums; }
.iv-lab { position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 1; color: #fff; font: 600 12.5px/1.25 var(--sans); }
.iv-budget { display: grid; gap: 8px; margin-top: 16px; }
.iv-budget div { display: grid; grid-template-columns: 130px minmax(0, 1fr) 64px; gap: 12px; align-items: center; font-size: 13px; color: var(--ink-2); }
.iv-budget i { display: block; height: 12px; border-radius: 6px; } .iv-budget b { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.iv-needs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.iv-need { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 6px; align-content: start; }
.iv-need svg { width: 26px; height: 26px; stroke: var(--blue); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.iv-need b { font-size: 14px; } .iv-need span { font-size: 12.5px; color: var(--ink-2); }
.iv-note { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); }

.iv-lev { display: grid; gap: 10px; }
.iv-lv-row, .iv-lv-ax { display: grid; grid-template-columns: 170px minmax(0, 1fr) 56px; gap: 12px; align-items: center; }
.iv-lv-row > span { font-size: 13px; color: var(--ink-2); line-height: 1.3; } .iv-lv-row > span b { display: block; color: var(--ink); font-size: 13.5px; }
.iv-lv-row > b { text-align: right; font: 700 15px var(--sans); color: var(--blue); font-variant-numeric: tabular-nums; }
.iv-lv-t { position: relative; height: 22px; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), #f0eee8 calc(10% - 1px) 10%); }
.iv-lv-t .base { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 1.5px dashed var(--iv-sand2); }
.iv-lv-t .bar { position: absolute; top: 8px; height: 6px; border-radius: 3px; background: var(--blue); }
.iv-lv-t .dot { position: absolute; top: 3px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--blue); }
.iv-lv-row.all .bar, .iv-lv-row.all .dot { background: var(--good); } .iv-lv-row.all .dot { box-shadow: 0 0 0 1.5px var(--good); } .iv-lv-row.all > b { color: var(--good); }
.iv-lv-row.down .bar, .iv-lv-row.down .dot { background: var(--bad); } .iv-lv-row.down .dot { box-shadow: 0 0 0 1.5px var(--bad); } .iv-lv-row.down > b { color: var(--bad); }
.iv-lv-ax div { position: relative; height: 16px; font-size: 10.5px; color: var(--mute); } .iv-lv-ax em { position: absolute; transform: translateX(-50%); font-style: normal; white-space: nowrap; }

.iv-split { display: grid; gap: 10px; align-content: end; height: 100%; padding-bottom: 30px; }
.iv-sp-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.iv-sp-row i { display: flex; align-items: center; justify-content: flex-end; height: 30px; border-radius: 7px; padding: 0 9px; font: 700 12.5px var(--sans); font-style: normal; }
.iv-sp-tot { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; font-size: 12.5px; border-top: 1px solid var(--line); padding-top: 8px; } .iv-sp-tot b:last-child { color: var(--blue); }

.iv-flow { position: relative; height: 290px; margin: 4px 0 20px; }
.iv-flow svg { position: absolute; top: 0; height: 290px; }
.iv-fx { position: absolute; border-radius: 4px; }
.iv-fl { position: absolute; font-size: 12px; color: var(--mute); line-height: 1.25; white-space: nowrap; } .iv-fl b { display: block; font: 700 14px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; } .iv-fl.l { text-align: right; }

.iv-cf { position: relative; margin-top: 6px; }
.iv-cf-zero { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px solid var(--iv-sand2); }
.iv-cf-col { position: absolute; top: 0; bottom: 0; } .iv-cf-bar { position: absolute; left: 14%; right: 14%; border-radius: 7px; }
.iv-cf-v { position: absolute; left: 50%; transform: translateX(-50%); font: 700 12.5px var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.iv-cf-yr { position: absolute; left: 50%; transform: translateX(-50%); font: 700 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.iv-cf svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.iv-cf-note { position: absolute; right: 18%; font: 700 12.5px var(--sans); color: var(--good); white-space: nowrap; } .iv-cf-note.neg { color: var(--bad); }
.iv-miles { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); position: relative; margin-bottom: 14px; }
.iv-miles::before { content: ""; position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 5px; border-top: 1.5px solid #cdd7f7; }
.iv-miles div { position: relative; text-align: center; font: 600 11.5px/1.3 var(--sans); color: var(--ink-2); padding-top: 18px; }
.iv-miles div::before { content: ""; position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; border: 2px solid #9fb2ef; }
.iv-miles div.on::before { background: var(--blue); border-color: var(--blue); }
.iv-miles div:empty::before { width: 6px; height: 6px; margin-left: -3px; top: 3px; background: #cdd7f7; border: 0; }

.iv-cases { position: relative; display: grid; gap: 12px; }
.iv-cs { display: grid; grid-template-columns: 170px minmax(0, 1fr) 108px; grid-template-areas: "n t v" "d t v"; column-gap: 12px; row-gap: 1px; align-items: center; }
.iv-cs .cn { grid-area: n; font-size: 13.5px; font-weight: 700; color: var(--ink); align-self: end; } .iv-cs .cd { grid-area: d; font-size: 12px; color: var(--mute); line-height: 1.3; align-self: start; }
.iv-cs .tr { grid-area: t; position: relative; height: 28px; } .iv-cs .tr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; }
.iv-cs .tr s { position: absolute; top: -7px; bottom: -7px; border-left: 1.5px dashed var(--ink); text-decoration: none; }
.iv-cs > b { grid-area: v; font: 700 13.5px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; } .iv-cs > b small { font-weight: 600; color: var(--mute); margin-left: 4px; }
.iv-yours { display: grid; grid-template-columns: 170px minmax(0, 1fr) 108px; gap: 12px; } .iv-yours div { position: relative; height: 16px; } .iv-yours em { position: absolute; transform: translateX(-50%); font: 700 11px var(--sans); font-style: normal; white-space: nowrap; }

.iv-sens-ctl { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, .9fr); gap: 10px; align-items: end; margin: 4px 0 16px; }
.iv-sens-ctl label { display: grid; gap: 5px; font: 700 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); min-width: 0; }
.iv-sens-ctl select { appearance: none; -webkit-appearance: none; width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px 30px 9px 12px; font: 600 13.5px var(--sans); color: var(--ink); letter-spacing: 0; text-transform: none; cursor: pointer;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%237a8596' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 11px center / 10px 6px; box-shadow: 0 1px 2px rgba(12,29,51,.05); }
.iv-sens-ctl select:hover { border-color: var(--iv-sand2); }
.iv-sens-ctl .x { font: 300 22px/1 var(--serif); color: var(--mute); padding-bottom: 9px; }
.iv-heat { display: grid; grid-template-columns: 96px repeat(5, minmax(0, 1fr)); gap: 4px; }
.iv-heat div { border-radius: 8px; padding: 12px 2px; text-align: center; font: 700 14px var(--sans); font-variant-numeric: tabular-nums; position: relative; }
.iv-heat .axis { grid-column: 2 / -1; background: none; padding: 0 0 2px; font: 700 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.iv-heat .corner { background: none; padding: 0 10px 4px 0; font: 700 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); display: flex; align-items: flex-end; justify-content: flex-end; line-height: 1.25; text-align: right; }
.iv-heat .h { background: none; padding: 2px 2px 6px; font: 700 12.5px var(--sans); color: var(--ink-2); }
.iv-heat .h small, .iv-heat .r small { display: block; font: 600 10.5px var(--sans); color: var(--mute); } .iv-heat small.t { color: var(--blue); }
.iv-heat .r { background: none; text-align: right; font: 700 12.5px var(--sans); color: var(--ink-2); padding: 10px 10px 10px 0; }
.iv-heat .mark { box-shadow: inset 0 0 0 2.5px var(--ink); }
.iv-heat .mark::after { content: "the plan"; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); background: var(--ink); color: #fff; font: 700 9.5px var(--sans); padding: 1px 7px; border-radius: 999px; white-space: nowrap; z-index: 1; }
.iv-hk { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; font-size: 12px; color: var(--ink-2); } .iv-hk span { display: inline-flex; gap: 6px; align-items: center; } .iv-hk s { width: 12px; height: 12px; border-radius: 3px; }
.iv-more summary { cursor: pointer; font: 600 13px var(--sans); color: var(--blue); margin-top: 18px; }

@container (max-width: 560px) {
  .iv-shop, .iv-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-lv-row, .iv-lv-ax { grid-template-columns: 110px minmax(0, 1fr) 48px; gap: 8px; }
  .iv-cs { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n v" "t t" "d d"; row-gap: 6px; } .iv-cs .tr { height: 22px; } .iv-cs .tr s { top: -3px; bottom: -3px; }
  .iv-yours { grid-template-columns: minmax(0, 1fr); } .iv-yours > span { display: none; }
  .iv-sens-ctl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .iv-sens-ctl .x { display: none; } .iv-sens-ctl label.show { grid-column: 1 / -1; }
  .iv-heat { grid-template-columns: 62px repeat(5, minmax(0, 1fr)); gap: 3px; } .iv-heat div { font-size: 11.5px; padding: 10px 1px; }
  .iv-heat .h, .iv-heat .r { font-size: 11px; } .iv-heat .r { padding-right: 6px; } .iv-heat .h small, .iv-heat .r small { font-size: 9.5px; }
  .iv-budget div { grid-template-columns: 104px minmax(0, 1fr) 56px; }
  .iv-st-v { font-size: 11px; } .iv-st-lab b { font-size: 9.5px; letter-spacing: .02em; } .iv-st-lab span { font-size: 10.5px; }
  .iv-cf-v { font-size: 11px; } .iv-miles div { font-size: 10.5px; }
  .iv-sp-row, .iv-sp-tot { grid-template-columns: 96px minmax(0, 1fr); }
}
.iv-pinned { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--iv-sand); }
.iv-pinned > img { width: 100%; height: 100%; object-fit: cover; }
.iv-pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.iv-pin span { background: #fff; color: var(--ink); font: 700 12.5px var(--sans); padding: 5px 11px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.22); white-space: nowrap; }
.iv-pin span small { font-weight: 500; color: var(--mute); margin-left: 4px; }
.iv-pin i { width: 2px; height: 22px; background: #fff; }
.iv-pin b { width: 12px; height: 12px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(20,57,198,.25); }
.vx-srclist { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 4px; } .vx-srclist a { color: var(--blue); }
@container (max-width: 560px) { .iv-pin span { font-size: 11px; padding: 4px 8px; } }

/* Sliders, platform-wide: a thin track filled in blue up to a white thumb (--p is set by ui22.js). */
input[type=range] { -webkit-appearance: none; appearance: none; height: 22px; margin: 0; background: transparent; cursor: pointer; --p: 50%; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--blue) var(--p), #dfe3ea var(--p)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 999px; background: #dfe3ea; }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--blue); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); box-shadow: 0 1px 3px rgba(12,29,51,.25); transition: transform .12s ease, box-shadow .12s ease; }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--blue); box-shadow: 0 1px 3px rgba(12,29,51,.25); }
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 0 5px rgba(20,57,198,.12), 0 1px 3px rgba(12,29,51,.25); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.18); box-shadow: 0 0 0 7px rgba(20,57,198,.16), 0 1px 3px rgba(12,29,51,.25); }
input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(20,57,198,.3); }
input[type=range]:disabled { cursor: default; opacity: .5; }

/* Spacing pass: one rhythm down the deal page. The page grid owns the space between cards (no stacked margins),
   the last list row has no rule under it, captions sit the same way everywhere, and phone tiles stay three across. */
.page { gap: 24px; }
.page > section.s, .page > .land { margin-top: 0; margin-bottom: 0; }
.step:last-child { border-bottom: 0; padding-bottom: 0; }
.vision figcaption { text-align: center; }
@media (max-width: 820px) {
  .page { gap: 16px; }
  body:not(.portfolio) .page > .hero.has-photo { margin-bottom: 4px; }
  .page > .land-sale { padding: 20px 18px 18px; }
}
@container (max-width: 380px) {
  .sx .th-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sx .th-kpis > div { padding: 10px 10px; }
  .sx .th-kpis span { font-size: 11.5px; }
  .sx .th-kpis b { font-size: 17px; letter-spacing: -.01em; }
  .sx .th-kpis small { font-size: 11px; }
}
@container (max-width: 300px) { .sx .th-kpis { grid-template-columns: minmax(0, 1fr); } }
.sx > .brief-empty { margin: 0; }
body:not(.portfolio) .sx#s-numbers .ret { margin-bottom: 0; }
/* The three headline numbers stay three across at every width, like the property tiles above them. */
.sx .ret { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.sx .ret > div { border-top: 0 !important; border-left: 1px solid var(--line) !important; align-content: start; }
.sx .ret > div:first-child { border-left: 0 !important; }
.sx .ret .retfor { grid-column: 1 / -1; border-left: 0 !important; }
@container (max-width: 520px) {
  .sx .ret > div { padding: 10px 10px !important; row-gap: 2px; grid-row: span 3; grid-template-rows: subgrid; }
  .sx .ret > div > span { align-self: end; }
  .sx .ret > div > span { font-size: 11.5px; }
  .sx .ret > div > b { font-size: 20px !important; letter-spacing: -.01em; margin: 2px 0 0; }
  .sx .ret > div > small { font-size: 11px; line-height: 1.35; }
}

/* A day spa's own pictures (static/ui/spaview.js). Sand is today or empty, blue is the plan, navy is the result. */
.sv-cap { margin: 6px 0 0; font-size: 12px; color: var(--mute); text-align: center; }
.sv-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sv-tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-tiles > div { padding: 13px 15px; display: grid; gap: 1px; align-content: start; box-shadow: 0 0 0 .5px var(--line); }
.sv-tiles b { font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.sv-tiles span { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.sv-tiles small { font-size: 12px; color: var(--mute); line-height: 1.4; margin-top: 2px; }
.sv-bars { display: grid; gap: 9px; margin-top: 10px; }
.sv-bar { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.sv-bar > span { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.sv-bar > span small, .sv-bar > b small { display: block; font-size: 11.5px; font-weight: 500; color: var(--mute); }
.sv-bar > span a { color: inherit; text-decoration: underline; text-decoration-color: #c9c3b6; text-underline-offset: 2px; }
.sv-bar > i { display: block; height: 16px; border-radius: 5px; background: #f4f2ec; overflow: hidden; }
.sv-bar > i em { display: block; height: 100%; border-radius: 5px; background: #d9d2c3; }
.sv-bar.blue > i em { background: var(--blue); } .sv-bar.soft > i em { background: #8fa6ee; } .sv-bar.blue > b { color: var(--blue); }
.sv-bar > b { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 58px; white-space: nowrap; }
.sv-feel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.sv-feel figure, .sv-plan { margin: 0; position: relative; }
.sv-feel button { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; padding: 0; border-radius: 10px; background: #e9e6df center / cover no-repeat; cursor: pointer; }
.sv-feel figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 9px 7px; border-radius: 0 0 10px 10px; background: linear-gradient(to top, rgba(10,14,22,.72), rgba(10,14,22,0)); color: #fff; font-size: 12px; font-weight: 600; pointer-events: none; }
.sv-ritual { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sv-ritual button { aspect-ratio: 3 / 4; }
.sv-ritual figcaption { font-weight: 500; font-size: 11.5px; line-height: 1.35; padding: 30px 9px 8px; } .sv-ritual figcaption b { display: block; font-size: 14px; font-weight: 700; }
.sv-plan button { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); padding: 0; border-radius: 12px; background: #fff center / contain no-repeat; cursor: zoom-in; }
.sv-plan figcaption { padding: 6px 0 0; font-size: 12px; color: var(--mute); text-align: center; }
.sv-eq { margin: 6px 0 12px; font-size: 14px; color: var(--ink-2); } .sv-eq b { font-size: 20px; font-weight: 700; color: var(--ink); } .sv-eq em { font-style: normal; color: var(--mute); margin: 0 3px; }
.sv-sessions { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 12px; }
.sv-sess { display: grid; gap: 6px; } .sv-sess > span { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--ink-2); text-align: center; }
.sv-dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; }
.sv-dots i { aspect-ratio: 1; border-radius: 50%; background: #e7e2d6; } .sv-dots i.a { background: var(--blue); } .sv-dots i.s { background: #9db1f0; }
.sv-key { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.sv-key li { display: flex; align-items: baseline; gap: 7px; } .sv-key b { color: var(--ink); }
.sv-key i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #e7e2d6; } .sv-key i.a { background: var(--blue); } .sv-key i.s { background: #9db1f0; }
.sv-visit { display: grid; gap: 16px; margin-top: 8px; }
.sv-stack p { margin: 0 0 6px; font-size: 14px; color: var(--ink-2); } .sv-stack p b { font-size: 20px; color: var(--ink); }
.sv-stack-b { display: flex; gap: 2px; height: 22px; border-radius: 6px; overflow: hidden; }
.sv-stack-b i { display: block; min-width: 3px; }
.sv-stack ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--ink-2); }
.sv-stack li { display: flex; align-items: baseline; gap: 6px; } .sv-stack li b { color: var(--ink); } .sv-stack li i { flex: none; width: 9px; height: 9px; border-radius: 2px; }
.sv-visit .c1 { background: var(--blue); } .sv-visit .c2 { background: #6f8ff0; } .sv-visit .c3 { background: #a9baf5; } .sv-visit .c4 { background: #d5ddfa; }
.sv-visit .d1 { background: #d9d2c3; } .sv-visit .d2 { background: #b9ae98; } .sv-visit .d3 { background: var(--ink); }
.sv-occ { margin-top: 10px; padding-left: 38px; }
.sv-occ-plot { position: relative; height: 260px; }
.sv-occ-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sv-gl { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid #efece5; } .sv-gl.z { border-top: 1.5px solid #c9c3b6; }
.sv-gl span { position: absolute; left: -38px; top: -8px; width: 32px; white-space: nowrap; text-align: right; font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
.sv-gl.goal { border-top: 1.5px dashed var(--good); } .sv-gl.goal span { color: var(--good); font-weight: 700; background: #fff; }
.sv-pt { position: absolute; width: 0; height: 0; }
.sv-pt i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--blue); }
.sv-pt span { position: absolute; white-space: nowrap; font-size: 11.5px; color: var(--mute); line-height: 1.3; }
.sv-pt span b { display: block; font-size: 13px; color: var(--ink); }
.sv-pt.br span { left: 13px; top: 3px; } .sv-pt.zero.br span { top: 9px; } .sv-pt.tl span { right: 12px; bottom: 6px; text-align: right; }
.sv-pt.zero i { background: #b9ae98; box-shadow: 0 0 0 1.5px #b9ae98; } .sv-pt.goal i { background: var(--good); box-shadow: 0 0 0 1.5px var(--good); } .sv-pt.goal span b { color: var(--good); }
.sv-pt.up i { background: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); } .sv-pt.plan span b { color: var(--blue); }
.sv-occ-x { position: relative; height: 38px; margin-top: 8px; }
.sv-occ-x span { position: absolute; transform: translateX(-50%); text-align: center; font-size: 11px; color: var(--mute); white-space: nowrap; }
.sv-occ-x span b { display: block; font-size: 11.5px; color: var(--ink-2); } .sv-occ-x span:first-child { transform: none; text-align: left; } .sv-occ-x span:last-child { transform: translateX(-100%); text-align: right; }
.sv-risks { display: grid; gap: 10px; margin-top: 4px; }
.sv-risk { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.sv-risk .n { width: 34px; height: 34px; border-radius: 50%; background: #fbeeed; color: var(--bad); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.sv-risk h4 { margin: 0; font-size: 15px; font-weight: 700; } .sv-risk p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.sv-risk p.num { color: var(--mute); } .sv-risk p.num b { font-size: 17px; color: var(--ink); margin-right: 3px; }
.sv-risk p.fix { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); color: var(--ink); }
.sv-risk p.fix em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--good); margin-right: 8px; }
.sv-comps { display: grid; margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sv-comp { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, 1.5fr); gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); align-items: center; }
.sv-comp:first-child { border-top: 0; } .sv-comp.ours { background: var(--blue-soft); color: var(--ink); font-weight: 600; }
.sv-comp b { display: block; font-size: 13.5px; color: var(--ink); } .sv-comp small { display: block; font-size: 11.5px; font-weight: 500; color: var(--mute); }
.sv-comp a { color: inherit; text-decoration: underline; text-decoration-color: #c9c3b6; text-underline-offset: 2px; }
.sv-tl { list-style: none; margin: 4px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; }
.sv-tl::before { content: ""; position: absolute; left: 6px; right: 6px; top: 26px; height: 2px; background: #cdd7f7; }
.sv-tl li { position: relative; display: grid; gap: 1px; padding: 0 8px 0 0; align-content: start; }
.sv-tl li span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.sv-tl li b { font-size: 13.5px; margin-top: 22px; } .sv-tl li small { font-size: 11.5px; color: var(--mute); line-height: 1.35; }
.sv-tl li::before { content: ""; position: absolute; left: 0; top: 20px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); box-sizing: border-box; }
.sv-tl li:first-child::before { background: var(--blue); } .sv-tl li:last-child::before { border-color: var(--ink); background: var(--ink); }
.sv-fold.sv-agents .acards { margin-top: 12px; }
.spa-page #svRuns { margin-top: 4px; }
@container (max-width: 520px) { .sv-tiles b { font-size: 19px; } .sv-tiles > div { padding: 11px 12px; } .sv-bar { grid-template-columns: minmax(0, 42%) minmax(0, 1fr) auto; gap: 8px; } .sv-ritual { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sv-ritual button { aspect-ratio: 4 / 3; }
  .sv-tl { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; } .sv-tl::before { display: none; } }
@container (max-width: 430px) {
  .sv-tiles { grid-template-columns: minmax(0, 1fr); } .sv-tiles.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sv-feel, .sv-ritual { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sv-ritual button { aspect-ratio: 1; }
  .sv-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; } .sv-bar > span { grid-column: 1 / -1; } .sv-bar > i { height: 12px; }
  .sv-sessions { gap: 7px; } .sv-dots { gap: 1.5px; }
  .sv-occ-plot { height: 230px; } .sv-pt span { font-size: 0; } .sv-pt.zero.br span { top: 5px; }
  .sv-comp { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 4px 10px; } .sv-comp > span:last-child { grid-column: 1 / -1; font-size: 12.5px; }
  .spa-page .iv-lv-ax em:nth-child(even) { display: none; } .sv-pt span { font-size: 10.5px; } .sv-pt span b { font-size: 12px; }
  .sv-occ-x span:nth-child(even) { display: none; }
}
.sv-fold { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.sv-fold > summary { cursor: pointer; font: 600 14px var(--sans); color: var(--blue); }
.sv-fold > h3.sub3 { margin-top: 14px; }