/* The guided deal: the small card over the map, and the full-screen deal (model or best picture top left, the one next
   step beside it, the seven stages, then the business plan). Loaded after ui22.css.
   Same visual language as the thesis section: white cards with a hairline border, a small uppercase eyebrow, one serif
   sentence, sand for what exists today, blue for the action, navy for results. */

/* ---------- Level 3: the full deal covers the screen; the map waits behind it ---------- */
body.full:not(.map-full) .mappane, body.full .resizer { display: none; }
body.full .main { flex: 1 1 auto !important; width: auto; }
body.full .page { max-width: 1160px; }
body.full .page > *:not(.gp) { width: 100%; max-width: 860px; justify-self: center; }
body.full .composer { max-width: 860px; }
body.full.map-full .mapfull { z-index: 41; display: inline-flex !important; }

.gp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; animation: none !important; }
.gp > * { min-width: 0; }
.gp-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.gp-top > * { min-width: 0; }
.gp-vis { position: sticky; top: 0; border-radius: 16px; overflow: hidden; background: linear-gradient(#c9d8e8, #eef2f6 62%, #dfe6dc); aspect-ratio: 16 / 11; border: 1px solid var(--line); }
.gp-model, .gp-model .mv, .gp-model model-viewer, .gp-turn { position: absolute; inset: 0; width: 100%; height: 100%; }
.gp-model model-viewer { background: transparent; --poster-color: transparent; }
.gp-model .mv.ready .mv-poster { opacity: 0; }
.gp-turn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; cursor: zoom-in; max-width: none; }
.gp-turn img.on { opacity: 1; z-index: 1; }
.gp-turn.empty { display: grid; place-items: center; text-align: center; color: var(--ink-2); font-size: 14px; padding: 20px; }
.gp-turn.empty b { display: block; font: 600 20px/1.2 var(--serif); color: var(--ink); margin-bottom: 4px; }
.gp-tag { position: absolute; left: 12px; bottom: 12px; z-index: 3; font-size: 12px; font-weight: 600; color: var(--ink-2); background: rgba(255, 255, 255, .86); padding: 4px 10px; border-radius: 99px; pointer-events: none; }
.gp-arrow { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .5); }
.gp-arrow.l { left: 12px; } .gp-arrow.r { right: 12px; }

.gp-side { display: grid; gap: 14px; align-content: start; }
.gp-side h1 { margin: 0; font: 600 34px/1.1 var(--serif); letter-spacing: -.015em; overflow-wrap: anywhere; text-wrap: balance; }
.gp-sub { margin: -8px 0 0; color: var(--ink-2); font-size: 14px; }
.gp-chips { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; font-size: 13px; }
.gp-chips > a, .gp-chip { all: unset; cursor: pointer; color: var(--ink-2); font: 500 13px/1.5 var(--sans); border-bottom: 1px solid transparent; }
.gp-chips > a span { color: var(--mute); margin-right: 5px; }
.gp-chips > a b { font-weight: 700; color: var(--ink); }
.gp-chips > a:hover, .gp-chip:hover { color: var(--blue); border-bottom-color: currentColor; }
.gp-chips > a:focus-visible, .gp-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }

/* The one next step */
.gp-eye { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.gp-next { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; display: grid; gap: 12px; box-shadow: 0 16px 36px -30px rgba(12, 29, 51, .5); }
.gp-next .gp-eye { color: var(--blue); }
.gp-next.bad .gp-eye { color: var(--bad); }
.gp-next h2 { margin: 0; font: 600 26px/1.18 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.gp-next.done { background: var(--ink); border-color: var(--ink); } .gp-next.done h2 { color: #fff; } .gp-next.done .gp-eye { color: rgba(255, 255, 255, .6); }
.gp-next.swap { animation: gp-in .35s ease-out; }
@keyframes gp-in { from { opacity: .35; transform: translateY(4px); } }
.gp-back { all: unset; cursor: pointer; margin-left: 8px; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--ink-2); text-decoration: underline; }
.gp-who { margin: 0; font-size: 14px; color: var(--ink-2); }
.gp-who b, .gp-bring > b { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 2px; }
.gp-who a { color: var(--blue); font-weight: 600; text-decoration: none; white-space: nowrap; margin-left: 4px; } .gp-who a:hover { text-decoration: underline; }
.gp-bring ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 14px; color: var(--ink); }
.gp-bring li { padding-left: 20px; position: relative; }
.gp-bring li::before { content: ''; position: absolute; left: 2px; top: 5px; width: 10px; height: 10px; border: 1.5px solid #b9b4a6; border-radius: 3px; }
.gp-answer { display: grid; gap: 8px; margin-top: 2px; }
.gp-answer textarea { font: inherit; font-size: 15px; color: var(--ink); width: 100%; min-height: 62px; padding: 11px 13px; border: 1px solid #d9d5ca; border-radius: 12px; background: #fdfcfa; resize: vertical; outline: 0; }
.gp-answer textarea:focus { border-color: #b9cff5; box-shadow: 0 0 0 3px #eaf1fd; background: #fff; }
.gp-drop { display: grid; justify-items: center; gap: 1px; padding: 16px 12px; border: 1.5px dashed #b9c6ee; border-radius: 12px; background: var(--blue-soft); color: var(--blue); cursor: pointer; text-align: center; transition: background .15s, border-color .15s; }
.gp-drop b { font-size: 15px; font-weight: 700; } .gp-drop span { font-size: 13px; color: var(--ink-2); text-decoration: underline; }
.gp-drop:hover, .gp-drop.gp-over, .gp-next.gp-over .gp-drop { background: #dfe7fc; border-color: var(--blue); }
.gp-next.gp-over { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.gp-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gp-acts button, .gp-attach { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font: 600 14px/1 var(--sans); background: #fff; color: var(--ink); cursor: pointer; }
.gp-acts button.pri { background: var(--blue); border-color: var(--blue); color: #fff; }
.gp-acts button.pri:hover { filter: brightness(1.08); } .gp-acts button.sec:hover, .gp-attach:hover { border-color: var(--blue); }
.gp-attach { margin-left: auto; border: 0; padding: 10px 4px; color: var(--ink-2); font-weight: 600; text-decoration: underline; background: none; }
.gp-opens { margin: 0; font-size: 13px; color: var(--mute); }
.gp-warn { margin: 0; font-size: 14px; color: var(--bad); display: flex; gap: 8px; align-items: flex-start; }
.gp-warn i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--bad); color: #fff; font: 700 12px/18px var(--sans); text-align: center; font-style: normal; }

/* Readiness and the seven stages */
.gp-way { display: grid; gap: 6px; }
.gp-ready { display: flex; align-items: baseline; gap: 8px; position: relative; padding-bottom: 9px; font-size: 13px; color: var(--mute); }
.gp-ready b { font: 600 20px/1 var(--serif); color: var(--ink); }
.gp-ready::after, .gp-ready i { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 3px; }
.gp-ready::after { right: 0; background: var(--line); } .gp-ready i { width: var(--p); background: var(--good); z-index: 1; transition: width .5s ease; }
.gp-track { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; }
.gp-stg { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 4px 9px; border: 0; background: none; border-radius: 12px; font: inherit; color: var(--ink); cursor: pointer; min-width: 0; }
.gp-stg::before { content: ''; position: absolute; top: 25px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.gp-stg:first-child::before { display: none; }
.gp-stg.done::before, .gp-stg.cur::before { background: var(--good); }
.gp-stg .n { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 14px/1 var(--sans); background: var(--bg); border: 1.5px solid #d6d2c7; color: var(--mute); }
.gp-stg.done .n { background: var(--good); border-color: var(--good); color: #fff; }
.gp-stg.cur .n { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 0 0 4px var(--blue-soft); }
.gp-stg b { font-size: 13.5px; font-weight: 600; } .gp-stg small { font-size: 12px; color: var(--mute); }
.gp-stg.locked b { color: var(--ink-2); font-weight: 500; }
.gp-stg.cur small { color: var(--blue); font-weight: 700; }
.gp-stg[aria-pressed="true"] { background: #f1efe9; }
.gp-stg:hover b { color: var(--blue); }
.gp-stg.flag .n::after { content: '!'; position: absolute; right: -6px; top: -6px; width: 17px; height: 17px; border-radius: 50%; background: var(--bad); color: #fff; font: 700 11px/17px var(--sans); text-align: center; }

.gp-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.gp-cols > * { min-width: 0; }
.gp-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.gp-ph { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gp-ph h2 { margin: 0; font: 600 22px/1.2 var(--serif); } .gp-ph span { font-size: 13px; color: var(--mute); white-space: nowrap; }
.gp-find { margin: 4px 0 10px; font-size: 14px; color: var(--ink-2); } .gp-find em { font-style: normal; color: var(--mute); }
.gp-rows { list-style: none; margin: 0; padding: 0; }
.gp-rows li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 10px; margin: 0 -10px; border-top: 1px solid var(--line); border-radius: 10px; transition: background .2s; }
.gp-rows li.focus { background: var(--blue-soft); border-top-color: transparent; } .gp-rows li.focus + li { border-top-color: transparent; }
.gp-rows li.gp-over { background: #dfe7fc; }
.gp-rows li.just { animation: gp-tick 1.2s ease-out; }
@keyframes gp-tick { 0% { background: #d6efe2; } 100% { background: transparent; } }
.gp-rows .dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #c9c4b6; background: none; display: block; animation: none; }
.gp-rows li.ok .dot { background: var(--good); border-color: var(--good); } .gp-rows li.warn .dot { background: #d9960f; border-color: #d9960f; } .gp-rows li.bad .dot { background: var(--bad); border-color: var(--bad); }
.gp-rows li > div { display: grid; gap: 1px; min-width: 0; } .gp-rows b { font-size: 15px; font-weight: 600; } .gp-rows span { font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.gp-rows span small { color: var(--mute); font-size: 12.5px; }
.gp-rows li.none span { color: var(--mute); } .gp-rows li.bad span { color: var(--bad); }
.gp-rows em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--mute); white-space: nowrap; }
.gp-rows li.ok em { color: var(--good); } .gp-rows li.warn em { color: var(--warn); } .gp-rows li.bad em { color: var(--bad); }
.gp-rows button { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 7px 11px; font: 600 13px/1 var(--sans); color: var(--ink); cursor: pointer; white-space: nowrap; }
.gp-rows button:hover { border-color: var(--blue); color: var(--blue); }
.gp-rows button.quiet { border: 0; background: none; color: var(--mute); text-decoration: underline; padding: 7px 2px; }
.gp-plan ul { list-style: none; margin: 10px 0 0; padding: 0; }
.gp-plan li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.gp-plan li b { font-size: 14px; font-weight: 600; } .gp-plan li a:hover b { color: var(--blue); }
.gp-plan li em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--mute); padding: 1px 8px; border-radius: 99px; background: #f1efe9; align-self: start; }
.gp-plan li span { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.gp-plan li.empty span { color: var(--mute); }
.gp-plan li.draft em { color: var(--warn); background: #f6efdd; }
.gp-plan li.solid em { color: var(--good); background: #e4f1ea; }
.gp-plan li.bad em { color: var(--bad); background: #fbeceb; }
.gp-foot { margin: 10px 0 0; font-size: 13px; color: var(--mute); }
.gp-div { margin: 14px 0 -6px; font: 600 26px/1.2 var(--serif); letter-spacing: -.01em; padding-top: 24px; border-top: 1px solid var(--line); }
.gp-div small { display: block; font: 500 13px/1.4 var(--sans); color: var(--mute); margin-top: 2px; letter-spacing: 0; }

/* ---------- The bar at the bottom: ask, or add anything else ---------- */
.composer .dumpbtn { background: none; color: var(--ink-2); border: 0; width: 34px; min-height: 34px; height: 34px; padding: 0; border-radius: 9px; display: grid; place-items: center; align-self: flex-end; margin-bottom: 1px; flex: none; cursor: pointer; }
.composer .dumpbtn[hidden] { display: none; }
.composer .dumpbtn:hover { background: #f3f2ee; color: var(--ink); }
.composer .dumpbtn.on { background: var(--bad); color: #fff; animation: gp-pulse 1.2s ease-in-out infinite; }
@keyframes gp-pulse { 50% { box-shadow: 0 0 0 6px rgba(179, 38, 30, .18); } }
body.portfolio .dumpbtn { display: none; }
.main.dropping::after { content: 'Drop to file it on this deal'; position: absolute; inset: 10px; z-index: 50; display: grid; place-items: center; border: 2px dashed var(--blue); border-radius: 18px; background: rgba(237, 241, 253, .92); color: var(--blue); font: 600 18px/1 var(--sans); pointer-events: none; }

/* ---------- Level 2: the small card over the map ---------- */
.dcard { position: absolute; z-index: 6; left: 20px; top: 20px; width: 340px; max-width: calc(100% - 40px); background: var(--panel); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px -22px rgba(8, 14, 24, .6), 0 2px 6px rgba(8, 14, 24, .2); animation: rise .25s ease-out both; }
body.peek .pcard, body.peek .cc-open { display: none !important; }
body:not(.portfolio) .dcard { display: none; }
.dc-img { height: 170px; background: #dfe6ee center / cover no-repeat; }
.dc-x { position: absolute; right: 10px; top: 10px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.dc-b { padding: 16px 18px 18px; display: grid; gap: 12px; }
.dc-b h2 { margin: 0; font: 600 22px/1.15 var(--serif); letter-spacing: -.01em; padding-right: 30px; }
.dc-sub { margin: -10px 0 0; font-size: 13px; color: var(--mute); }
.dc-nums { display: flex; gap: 20px; } .dc-nums div { display: grid; } .dc-nums span { font-size: 12px; color: var(--mute); }
.dc-nums b { font: 600 18px/1.25 var(--serif); } .dc-nums b.good { color: var(--good); } .dc-nums b.warn { color: var(--warn); } .dc-nums b.bad { color: var(--bad); }
.dc-now { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.dc-now span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); } .dc-now b { font-size: 15px; font-weight: 600; line-height: 1.35; }
.dc-go { border: 0; border-radius: 10px; padding: 12px 16px; background: var(--blue); color: #fff; font: 600 15px/1 var(--sans); cursor: pointer; }
.dc-go:hover { filter: brightness(1.08); }

/* The list reads as a to-do list: each deal's next step under its name. */
.deal span u { text-decoration: none; color: var(--ink-2); }
.cc-sub #ccNeed { font-weight: 600; color: var(--ink-2); }

/* Pinned tables never widen the page on a phone (they scroll inside their own box). */
.doc .widget, .doc .widget .blk { min-width: 0; max-width: 100%; } .doc .widget .tscroll { max-width: 100%; overflow-x: auto; }

@media (max-width: 980px) { .gp-top, .gp-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; } .gp-vis { position: relative; } }
@media (max-width: 820px) {
  /* On a phone the full deal is a plain full-screen page: no map behind, no see-through top, no drag handle. */
  body.full:not(.portfolio) .main::before { display: none; }
  body.full:not(.portfolio) .main { background: var(--bg); }
  body.full:not(.portfolio) .bar { border-radius: 0; box-shadow: 0 1px 0 rgba(28, 34, 48, .06); padding-top: 10px; }
  body.full:not(.portfolio) .bar::before { display: none; }
  body.full .page > *:not(.gp) { max-width: none; }
  .gp { gap: 16px; }
  .gp-vis { margin: 0 -16px; border-radius: 0; border-width: 0 0 1px; aspect-ratio: 16 / 10; }
  .gp-side h1 { font-size: 27px; }
  .gp-next { padding: 16px; } .gp-next h2 { font-size: 22px; }
  .gp-attach { margin-left: 0; }
  .gp-track { grid-template-columns: repeat(7, 84px); overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .gp-track::-webkit-scrollbar { display: none; }
  .gp-panel { padding: 16px; border-radius: 14px; }
  .gp-div { font-size: 23px; }
  .dcard { left: 12px; right: 12px; top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; }
  .dc-img { height: 120px; }
}
@media (prefers-reduced-motion: reduce) { .gp-next.swap, .gp-rows li.just, .dcard { animation: none; } }

/* Round 2 */
body.full:not(.map-full) .ui-tag { display: none !important; }  /* no map label over the full deal */
.gp-who { display: grid; gap: 2px; } .gp-who > span { font-size: 14px; color: var(--ink); }
.gp-reach { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 14px; }
.gp-reach:empty { display: none; }
.gp-reach a { margin: 0; color: var(--blue); font-weight: 600; text-decoration: none; } .gp-reach a:hover { text-decoration: underline; }
.gp-reach a[href^="tel:"] { padding: 7px 12px; border-radius: 99px; background: var(--blue-soft); }
.gp-edit { all: unset; cursor: pointer; font-size: 13px; color: var(--mute); text-decoration: underline; }
.gp-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; padding: 10px; border-radius: 12px; background: #f6f4ee; }
.gp-contact[hidden] { display: none; }
.gp-contact small { grid-column: 1 / -1; font-size: 13px; color: var(--ink-2); }
.gp-contact input { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid #d9d5ca; border-radius: 9px; background: #fff; min-width: 0; color: var(--ink); }
.gp-contact input[name="email"] { grid-column: 1; }
.gp-contact input:focus { outline: 0; border-color: #b9cff5; box-shadow: 0 0 0 3px #eaf1fd; }
.gp-contact button { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 8px 12px; font: 600 13px/1 var(--sans); color: var(--ink); cursor: pointer; }
.gp-contact button:hover { border-color: var(--blue); color: var(--blue); }
.gp-bring li { padding-left: 0; } .gp-bring li::before { display: none; }
.gp-bring li button, .gp-bring li:not(:has(button)) { all: unset; display: block; position: relative; padding-left: 20px; font-size: 14px; color: var(--ink); }
.gp-bring li button { cursor: pointer; } .gp-bring li button:hover { color: var(--blue); }
.gp-bring li button::before, .gp-bring li:not(:has(button))::before { content: ''; position: absolute; left: 2px; top: 5px; width: 10px; height: 10px; border: 1.5px solid #b9b4a6; border-radius: 3px; display: block; }
.gp-bring li button:hover::before { border-color: var(--blue); }
.gp-bring li button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 820px) { .gp-vis { aspect-ratio: 16 / 8; } .gp-contact { grid-template-columns: 1fr; } }
.msg .gp-by { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; opacity: .7; }
.gp-way { grid-template-columns: minmax(0, 1fr); } .gp-way > * { min-width: 0; }

/* Round 3 */
.gp-rows li { grid-template-columns: 14px minmax(0, 1fr) auto auto; }
.gp-rows li > button:only-of-type, .gp-rows li > em:last-child { grid-column: 3 / -1; justify-self: end; }
.gp-rows button.quiet { font-size: 12.5px; }
.gp-agent { margin: 0; font-size: 13.5px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; padding-top: 10px; border-top: 1px solid var(--line); }
.gp-agent[hidden] { display: none; } .gp-agent a { color: var(--blue); font-weight: 600; }
.gp-agent .dot.spin { flex: none; }

/* Round 4: measured against the basics. Text no smaller than 12px and dark enough to read (4.5:1), anything you can
   press at least 32px tall (44px on a phone), the stages on top so you always see where the deal stands. */
:root { --mute: #5d6776; }
.deal b { font-size: 13.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .deal b .live { display: inline-block; margin-right: 7px; vertical-align: 2px; }
.deal span { font-size: 12px; color: var(--ink-2); } .deal span u { color: var(--ink-2); }
.side h3, #deals h3 { font-size: 12px; color: var(--mute); }
.side .icon, .stepper, .stepper #stepN, .bar .icon.close { color: var(--ink-2) !important; }
.cc-cols { font-size: 12px; }

/* The stages, on top: one bar cut in seven, each part filling as its things come in. */
.gp-way { gap: 10px; }
.gp-ready { padding-bottom: 0; } .gp-ready::after, .gp-ready i { display: none; }
.gp-track { gap: 6px; }
.gp-stg { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 9px; row-gap: 0; padding: 13px 8px 9px 8px; border-radius: 0 0 10px 10px; text-align: left; min-height: 60px; }
.gp-stg::before { top: 0; left: 0; width: 100%; height: 4px; border-radius: 4px; background: #e2dfd6 !important; display: block !important; }
.gp-stg::after { content: ''; position: absolute; top: 0; left: 0; height: 4px; border-radius: 4px; width: var(--f, 0%); background: var(--good); transition: width .5s ease; }
.gp-stg.cur::after { background: var(--blue); min-width: 10px; }
.gp-stg .n { grid-row: 1 / 3; width: 26px; height: 26px; font-size: 12.5px; background: none; }
.gp-stg.cur .n { box-shadow: none; }
.gp-stg b { font-size: 14px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .gp-stg small { font-size: 12px; line-height: 1.3; white-space: nowrap; }
.gp-stg:hover { background: #f4f2ec; } .gp-stg[aria-pressed="true"] { background: #efede6; }
.gp-stg.flag .n::after { right: -5px; top: -5px; }
#gpStage { scroll-margin-top: 12px; }

/* Facts read as text; things you can press look pressable, and all the same. */
.gp-chips { gap: 8px; align-items: center; }
.gp-chips > a, .gp-chip { box-sizing: border-box; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); color: var(--ink); font: 500 13px/1 var(--sans); }
.gp-chips > a span { color: var(--ink-2); }
.gp-chips > a:hover, .gp-chip:hover { border-color: var(--blue); color: var(--blue); }
.gp-reach { gap: 8px; }
.gp-reach a, .gp-edit { box-sizing: border-box; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px !important; border-radius: 99px; background: var(--blue-soft); color: var(--blue); font: 600 13px/1 var(--sans); text-decoration: none !important; white-space: nowrap; }
.gp-edit { background: none; border: 1px solid var(--line); color: var(--ink-2); }
.gp-reach a:hover { background: #dfe7fc; } .gp-edit:hover { border-color: var(--blue); color: var(--blue); }
.gp-edit:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* What to bring back: a box that ticks itself once your answer covers it. */
.gp-bring ul { gap: 0; }
.gp-bring li button, .gp-bring li:not(:has(button)) { box-sizing: border-box; display: flex; align-items: center; min-height: 30px; padding-left: 26px; width: 100%; }
.gp-bring li button::before, .gp-bring li:not(:has(button))::before { left: 1px; top: 50%; margin-top: -8px; width: 14px; height: 14px; border-radius: 4px; background: #fff center / 12px no-repeat; }
.gp-bring li button.open::before { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.gp-bring li button.on::before { border-color: var(--good); background-color: var(--good); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E"); }
.gp-bring li button.on { color: var(--ink-2); }
.gp-acts button, .gp-attach { min-height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; }
.gp-opens { color: var(--ink-2); }

/* Stage rows: a finished row is one line; "Not right?" sits beside Done, not under it. */
.gp-rows li { grid-template-columns: 14px minmax(0, 1fr) auto auto; padding: 10px; }
.gp-rows li > em + button.quiet { grid-column: auto !important; justify-self: end; }
.gp-rows button { min-height: 32px; box-sizing: border-box; } .gp-rows button.quiet { color: var(--mute); }
.gp-plan li em { font-size: 12px; }

@media (max-width: 820px) {
  .gp-track { grid-template-columns: repeat(7, 132px); gap: 6px; }
  .gp-chips > a, .gp-chip, .gp-reach a, .gp-edit { min-height: 40px; padding: 0 14px !important; }
  .gp-bring li button, .gp-bring li:not(:has(button)) { min-height: 40px; }
  .gp-acts button, .gp-attach { min-height: 44px; }
  .gp-rows button { min-height: 40px; } .gp-rows button.quiet { padding: 0 6px; }
  body:not(.portfolio) .bar .sections a { min-height: 40px; box-sizing: border-box; }
  .composer .dumpbtn, .composer .jobsbtn { width: 40px; min-height: 40px; height: 40px; margin-bottom: 0; }
  .composer .sendbtn { width: 40px !important; height: 40px !important; }
  .dc-x, .cc-x { width: 40px; height: 40px; }
  .bar .icon { min-width: 40px; min-height: 40px; }
}
/* The deal's name and its facts run across the top, so the picture and the next step both start high on the screen. */
.gp { gap: 18px; }
.gp-head > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; }
.gp-head h1 { margin: 0; font: 600 30px/1.1 var(--serif); letter-spacing: -.015em; overflow-wrap: anywhere; grid-column: 1; }
.gp-head .gp-sub { margin: 0; grid-column: 1; }
.gp-head .gp-chips { grid-column: 2; grid-row: 1 / 3; justify-content: flex-end; }
.gp-next { gap: 10px; padding: 18px 22px; } .gp-next h2 { font-size: 24px; }
@media (max-width: 980px) { .gp-head > div { grid-template-columns: minmax(0, 1fr); } .gp-head .gp-chips { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 6px; } }
@media (max-width: 820px) { .gp-head h1 { font-size: 26px; } .gp { gap: 14px; } }
/* Inbox and People: the window is as tall as what is in it, and keyboard hints only show where there is a keyboard and something to move through. */
@media (min-width: 821px) { .ppl-card { bottom: auto; max-height: 92vh; min-height: min(360px, 92vh); } }
#ibList:has(.ppl-empty) + .keys, #pplList:has(.ppl-empty) + .keys { display: none; }
@media (hover: none) { .ppl-card .keys { display: none; } }
#doc:focus { outline: none; }
/* The stages stay in view while you work through the path. */
@media (min-width: 981px) {
  .gp-way { position: sticky; top: -24px; z-index: 4; background: var(--bg); padding: 10px 0 8px; margin: -10px 0 -8px; box-shadow: 0 10px 12px -12px rgba(12, 29, 51, .18); }
  .gp-vis { top: 96px; }
  #gpStage, #gpNow { scroll-margin-top: 104px; }
}
/* The rest of the page, same floor: 12px text, readable greys, 32px controls (40px or more on a phone). */
.msg time { font-size: 12px; opacity: .75; }
.sections a em { font-size: 11.5px !important; min-width: 18px !important; height: 18px !important; }
.gp-plan li.draft em { color: #7d4a0c; }
.iv-heat > div, .doc dd > small, .iv-cf-v, .iv-cf-yr, .th-kpis > div > span, .th-kpis > div > small, .doc tr.h > td, .doc thead th, .iv-pin > span, .iv-miles > div, .iv-cs b > small, .ret > div > span, .ret > div > small, .iv-sens-ctl > label, .iv-yours em, #pl-exith { font-size: 12px; }
.iv-pin > span > small, .iv-heat small.t { font-size: 11px; }
.brand { min-height: 32px; display: inline-flex; align-items: center; }
.ppl-name { min-height: 32px; } .linkbtn { min-height: 28px; }
@media (max-width: 820px) {
  .mapnav button { width: 42px; height: 40px; } .mapside { width: 40px !important; height: 40px !important; }
  .dc-go { min-height: 46px; } .cc-open { min-height: 44px; }
  .doc .btn, .doc select, .mg button, .ac-min, .ac-fs, .mg-full { min-height: 40px; min-width: 40px; }
  .ppl-gh { min-height: 40px; align-items: center; } .ppl-card .icon { width: 40px; height: 40px; } .ppl-name { min-height: 40px; }
  .composer textarea { min-height: 40px; box-sizing: border-box; }
}
.sections a em { font-size: 12px !important; }
.iv-heat > div, .iv-heat > div.h, .iv-heat > div.r, .iv-heat > .axis, .iv-heat > .corner, .doc tr.h > td, .doc dl span, .doc dl small, .doc dd small, #rIrrNote, .ret small, .iv-yours small { font-size: 12px !important; }
@media (max-width: 820px) { .side .newdeal, .side .search, .side .icon { min-height: 40px; } .side .icon { min-width: 40px; } .linkbtn { min-height: 40px; } }
/* On a phone the next step comes before the picture, and the facts sit in one row you can swipe. */
@media (max-width: 820px) {
  .gp-top { gap: 14px; } .gp-top > .gp-side { order: -1; } .gp-side:empty { display: none; }
  .gp-head .gp-chips { flex-wrap: nowrap; overflow-x: auto; margin: 6px -16px 0; padding: 0 16px 2px; scrollbar-width: none; } .gp-head .gp-chips::-webkit-scrollbar { display: none; }
  .gp-head .gp-chips > * { flex: none; }
  .gp-vis { border-radius: 14px; margin: 0; border-width: 1px; }
}
/* Round 5: on a phone, the line that says what to do is never cut off mid-sentence. */
@media (max-width: 820px) {
  .ppl-line { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ac-line, .ac-line span { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; display: block; -webkit-line-clamp: unset !important; }
}