/* Sizes are in "u" = 1/816 of the page width (1u = 1px on a letter page at 96 dpi). */
html, body { margin: 0; padding: 0; background: #fff; }
:root {
  --u: calc(100vw / 816);
  --ink-1: #16283c; --ink-2: #2c3e50; --ink-3: #5a6b7c; --ink-deep: #0b1b2b;
  --blue-1: #29a8e0; --blue-2: #1b8fcb; --tint: #e9f3fb; --hair: #d3e2ee; --on-dark-3: #a9c2d6;
  font-family: Barlow, Helvetica, Arial, sans-serif; color: var(--ink-1);
  /* v4 size tiers: normal, and .compact when the ledger or the document list is long */
  --lk: 12.5; --ls: 10.5; --rk: 12; --rp: 8; --dp: 9; --dt: 12.5; --ds: 11; --lp: 3; --tp: 7;
}
/* Section spacing steps down before anything else does: roomy (default), then sg2, then sg3 (app.js fitPage adds them while the page is too tall). */
:root { --sg: 28; --rg: 24; }
.page.sg2 { --sg: 24; --rg: 21; --rp: 7.5; --dp: 8.5; }
.page.sg3 { --sg: 20; --rg: 18; --rp: 6.5; --dp: 7.5; }
.page.sg4 { --sg: 17; --rg: 16; --rp: 6; --dp: 7; }
.page.sg5 { --sg: 14; --rg: 14; --rp: 5; --dp: 6; }
.page.compact { --lk: 11; --ls: 9.5; --rk: 11; --rp: 4.5; --dp: 5; --dt: 11.5; --ds: 10; --lp: 1.5; --tp: 4; }
.page { box-sizing: border-box; width: 100vw; height: calc(1054 * var(--u)); display: flex; flex-direction: column; overflow: hidden; break-after: page; page-break-after: always; background: #fff; }
.page:last-child { break-after: auto; page-break-after: auto; }

.head { background: var(--ink-deep); color: #fff; padding: calc(13 * var(--u)) calc(38 * var(--u)) calc(11 * var(--u)); display: flex; align-items: flex-end; justify-content: space-between; gap: calc(24 * var(--u)); }
.head-title { font-size: calc(26 * var(--u)); font-weight: 800; letter-spacing: -0.02em; }
.head-kicker { margin-top: calc(5 * var(--u)); font-weight: 700; font-size: calc(10 * var(--u)); letter-spacing: 0.24em; color: var(--blue-1); text-transform: uppercase; }
.head-stamp { font-weight: 700; font-size: calc(8.5 * var(--u)); letter-spacing: 0.28em; color: var(--on-dark-3); text-transform: uppercase; text-align: right; }

.eyebrow { font-weight: 700; font-size: calc(9 * var(--u)); letter-spacing: 0.26em; text-transform: uppercase; color: var(--blue-1); }
.h1 { font-size: calc(20 * var(--u)); font-weight: 700; margin-top: calc(5 * var(--u)); letter-spacing: -0.01em; }

.addr { margin-top: calc(5 * var(--u)); font-size: calc(12 * var(--u)); color: var(--ink-2); }
.facts { margin-top: calc(3 * var(--u)); font-weight: 700; font-size: calc(8.5 * var(--u)); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); }



.block { padding: calc(14 * var(--u)) calc(38 * var(--u)) 0; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.events { font-size: calc(11 * var(--u)); }
.events thead tr { font-weight: 700; font-size: calc(8 * var(--u)); letter-spacing: 0.16em; text-transform: uppercase; color: #fff; background: var(--ink-deep); }
.events th { text-align: right; padding: calc(7 * var(--u)) calc(6 * var(--u)); font-weight: 700; white-space: nowrap; }
.events th.l { text-align: left; }
.events th:first-child { padding-left: calc(10 * var(--u)); }
.events th.r-end { padding-right: calc(10 * var(--u)); }
.events td { padding: calc(var(--tp) * var(--u)) calc(6 * var(--u)); border-bottom: 1px solid var(--hair); text-align: right; }
.events td.l { text-align: left; color: var(--ink-2); }
.events td:first-child { padding-left: calc(10 * var(--u)); white-space: nowrap; color: var(--ink-1); text-align: left; }
.events td.r-end { padding-right: calc(10 * var(--u)); }
.events td.b { font-weight: 700; }
.letter { font-weight: 800; color: var(--blue-1); margin-right: calc(6 * var(--u)); }

.sale { margin: calc(12 * var(--u)) calc(38 * var(--u)) calc(12 * var(--u)); }
.timeline { padding: calc(10 * var(--u)) calc(38 * var(--u)) 0; }
.tl-head { display: flex; justify-content: space-between; align-items: flex-end; }
.tl-note { font-weight: 700; font-size: calc(8.5 * var(--u)); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); }
.tl-track { position: relative; margin-top: calc(8 * var(--u)); }
.tl-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--ink-1); }
.tl-tick { position: absolute; width: 1px; height: calc(9 * var(--u)); background: #c7ddee; }
.tl-year { position: absolute; font-size: calc(9 * var(--u)); font-weight: 700; letter-spacing: 0.08em; color: var(--ink-3); transform: translateX(-50%); }
.tl-mark { position: absolute; font-size: calc(10 * var(--u)); font-weight: 800; line-height: 1; white-space: nowrap; }
.tl-lead { position: absolute; width: 1px; opacity: 0.45; }
.tl-dia { position: absolute; width: calc(9 * var(--u)); height: calc(9 * var(--u)); margin-left: calc(-4.5 * var(--u)); box-sizing: border-box; border: 1.5px solid; transform: rotate(45deg); }
.sale:empty { display: none; }
.sale-grid { border-top: 1px solid var(--ink-1); border-bottom: 1px solid var(--hair); display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); align-items: stretch; }
.sale-title { padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(8 * var(--u)) 0; display: flex; flex-direction: column; justify-content: center; gap: calc(3 * var(--u)); }
.sale-eyebrow { font-weight: 700; font-size: calc(8 * var(--u)); letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue-1); }
.sale-name { font-size: calc(11 * var(--u)); font-weight: 700; }
.cell { padding: calc(8 * var(--u)); border-left: 1px solid var(--hair); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(3 * var(--u)); }
.cell.net { background: var(--tint); }
.cell-k { font-weight: 700; font-size: calc(7.5 * var(--u)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.cell-v { font-size: calc(15 * var(--u)); font-weight: 800; font-variant-numeric: tabular-nums; }
.cell-v.blue { color: var(--blue-2); }
.assume { margin-top: calc(7 * var(--u)); font-size: calc(10 * var(--u)); line-height: 1.45; color: var(--ink-3); text-wrap: pretty; }
.assume b { color: var(--ink-2); }

.lower { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; margin-top: calc(12 * var(--u)); border-top: 1px solid var(--hair); }
.results { padding: calc(14 * var(--u)) calc(26 * var(--u)) calc(14 * var(--u)) calc(38 * var(--u)); border-right: 1px solid var(--hair); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.metrics { display: flex; flex-direction: column; }
.metric { display: flex; justify-content: space-between; padding: calc(var(--rp) * var(--u)) 0; border-bottom: 1px solid var(--hair); font-size: calc(var(--rk) * var(--u)); }
.metric .mk { color: var(--ink-2); }
.metric .mv { font-weight: 700; font-variant-numeric: tabular-nums; }
.range:empty { display: none; }
.range-title { font-size: calc(15 * var(--u)); font-weight: 700; margin-top: calc(4 * var(--u)); letter-spacing: -0.01em; white-space: nowrap; }
.rg { display: grid; grid-template-columns: calc(20 * var(--u)) minmax(0, 1fr); gap: calc(8 * var(--u)); align-items: start; margin-top: calc(10 * var(--u)); }
.rg.single { grid-template-columns: minmax(0, 1fr); }
.rg-letter { font-size: calc(10 * var(--u)); font-weight: 800; color: var(--blue-1); padding-top: calc(18 * var(--u)); }
.rg-mid { text-align: center; white-space: nowrap; }
.rg-mid .a { font-size: calc(15 * var(--u)); font-weight: 800; letter-spacing: -0.01em; }
.rg-mid .p { font-size: calc(10.5 * var(--u)); font-weight: 700; color: var(--blue-2); margin-left: calc(4 * var(--u)); }
.rg-bar { position: relative; height: calc(14 * var(--u)); margin-top: calc(4 * var(--u)); }
.rg-bar .base { position: absolute; left: 0; right: 0; top: calc(6 * var(--u)); height: calc(2 * var(--u)); background: var(--tint); }
.rg-bar .span { position: absolute; left: 8%; right: 8%; top: calc(3 * var(--u)); height: calc(8 * var(--u)); background: linear-gradient(90deg, #c7ddee 0%, #29a8e0 50%, #c7ddee 100%); }
.rg-bar .cap { position: absolute; top: 0; width: 1px; height: calc(14 * var(--u)); background: var(--ink-3); }
.rg-bar .dia { position: absolute; left: 50%; top: calc(1 * var(--u)); width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin-left: calc(-6 * var(--u)); background: var(--ink-1); border: calc(2 * var(--u)) solid #fff; box-sizing: border-box; transform: rotate(45deg); }
.rg-ends { display: flex; justify-content: space-between; gap: calc(8 * var(--u)); margin-top: calc(4 * var(--u)); font-variant-numeric: tabular-nums; }
.rg-ends .a { font-size: calc(11.5 * var(--u)); font-weight: 700; color: var(--ink-2); }
.rg-ends .p { font-size: calc(10 * var(--u)); color: var(--ink-3); }
.rg-legend { display: flex; justify-content: space-between; font-weight: 700; font-size: calc(8 * var(--u)); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); margin-top: calc(8 * var(--u)); }
.rg-legend .mid { color: var(--ink-1); }

.docs { padding: calc(14 * var(--u)) calc(38 * var(--u)) calc(14 * var(--u)) calc(26 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.doc-note { font-weight: 700; font-size: calc(8.5 * var(--u)); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); margin-top: calc(-6 * var(--u)); }
.doclist { display: flex; flex-direction: column; margin-top: calc(-4 * var(--u)); }
.doc { display: grid; grid-template-columns: calc(22 * var(--u)) minmax(0, 1fr) auto; gap: calc(8 * var(--u)); align-items: center; padding: calc(var(--dp) * var(--u)) 0; border-bottom: 1px solid var(--hair); }
.doc-ic { position: relative; width: calc(13 * var(--u)); height: calc(16 * var(--u)); box-sizing: border-box; border: 1.5px solid var(--ink-3); border-radius: 1px calc(5 * var(--u)) 1px 1px; background: #fff; }
.doc-ic.need { border-color: var(--ink-1); }
.doc-ic.got { border-color: var(--blue-2); background: var(--blue-2); }
.doc-ic.got::after { content: ""; position: absolute; left: calc(3 * var(--u)); top: calc(2 * var(--u)); width: calc(3.5 * var(--u)); height: calc(7 * var(--u)); border-right: 1.8px solid #fff; border-bottom: 1.8px solid #fff; transform: rotate(45deg); }
.doc-ic:not(.got)::before { content: ""; position: absolute; left: calc(2 * var(--u)); right: calc(2 * var(--u)); top: calc(4.5 * var(--u)); height: 1px; background: currentColor; box-shadow: 0 calc(3 * var(--u)) 0 currentColor; color: var(--ink-3); }
.doc-ic.need:not(.got)::before { color: var(--ink-1); }
.doc-t { font-size: calc(var(--dt) * var(--u)); font-weight: 600; }
.doc-s { font-size: calc(var(--ds) * var(--u)); color: var(--ink-3); line-height: 1.35; }
.doc-status { font-weight: 700; font-size: calc(8 * var(--u)); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
.doc-status.need { color: var(--ink-1); }
.doc-status.got { color: var(--blue-2); }

.foot { border-top: 1px solid var(--hair); padding: calc(10 * var(--u)) calc(38 * var(--u)); display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: calc(8.5 * var(--u)); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); }
/* Project tier badge: Core (outline), Standard (blue), Premium (navy). On the dark header they invert. */
.tier { display: inline-block; font-weight: 800; font-size: calc(8 * var(--u)); letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; padding: calc(3 * var(--u)) calc(8 * var(--u)); border-radius: calc(10 * var(--u)); border: 1px solid; white-space: nowrap; vertical-align: 1px; }
.tier-core { color: #5a6b7c; border-color: #5a6b7c; background: #fff; }
.tier-standard { color: #1b8fcb; border-color: #1b8fcb; background: #e9f3fb; }
.tier-premium { color: #fff; border-color: #0b1b2b; background: #0b1b2b; }
.tier-other { color: #16283c; border-color: #16283c; background: #fff; }
.head .tier { margin-left: calc(10 * var(--u)); }
.head .tier-core { color: #a9c2d6; border-color: #a9c2d6; background: transparent; }
.head .tier-standard { color: #0b1b2b; border-color: #29a8e0; background: #29a8e0; }
.head .tier-premium { color: #0b1b2b; border-color: #fff; background: #fff; }
.head .tier-other { color: #fff; border-color: #fff; background: transparent; }
.tier + .tier { margin-left: calc(6 * var(--u)); }
.head .tier + .tier { margin-left: calc(6 * var(--u)); }
.foot-right { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.foot-partner { height: calc(18 * var(--u)); width: auto; display: block; }
.foot-logo { height: calc(18 * var(--u)); width: auto; display: block; }
@media print { @page { margin: 0; } }

/* Safety net: if a page is still too tall after v4's compact tier, app.js adds .dense, then .sparse. */
.page.dense .results, .page.dense .docs { gap: calc(9 * var(--u)); padding-top: calc(10 * var(--u)); padding-bottom: calc(10 * var(--u)); }
.page.dense .block { padding-top: calc(10 * var(--u)); }
.page.dense .rg { margin-top: calc(6 * var(--u)); }
.page.sparse .results, .page.sparse .docs { gap: calc(6 * var(--u)); }
.page.sparse .lower { margin-top: calc(6 * var(--u)); }
.page.sparse .sale { margin-top: calc(8 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.page.sparse .block, .page.sparse .timeline { padding-top: calc(6 * var(--u)); }
/* Last resort for very crowded properties (5+ studies): tighter type and spacing everywhere. */
.page.tight { --lk: 10; --ls: 8.5; --rk: 10; --rp: 1.5; --dp: 1.5; --dt: 10; --ds: 8.5; --lp: 0.5; --tp: 2; }
.page.tight .head { padding-top: calc(9 * var(--u)); padding-bottom: calc(8 * var(--u)); }
.page.tight .h1 { font-size: calc(17 * var(--u)); margin-top: calc(3 * var(--u)); }
.page.tight .timeline { padding-top: calc(4 * var(--u)); }
.page.tight .tl-track { margin-top: calc(2 * var(--u)); }
.page.tight .block { padding-top: calc(4 * var(--u)); }
.page.tight .events { font-size: calc(10 * var(--u)); }
.page.tight .lower { margin-top: calc(4 * var(--u)); }
.page.tight .results, .page.tight .docs { gap: calc(5 * var(--u)); padding-top: calc(7 * var(--u)); padding-bottom: calc(7 * var(--u)); }
.page.tight .metric { font-size: calc(10.5 * var(--u)); }
.page.tight .range-title { font-size: calc(13 * var(--u)); }
.page.tight .rg { margin-top: calc(4 * var(--u)); }
.page.tight .rg-mid .a { font-size: calc(13 * var(--u)); }
.page.tight .rg-legend { margin-top: calc(4 * var(--u)); }
.page.tight .sale { margin-top: calc(6 * var(--u)); margin-bottom: calc(6 * var(--u)); }
.page.tight .cell, .page.tight .sale-title { padding-top: calc(5 * var(--u)); padding-bottom: calc(5 * var(--u)); }
.page.tight .cell-v { font-size: calc(13 * var(--u)); }
.page.tight .foot { padding-top: calc(7 * var(--u)); padding-bottom: calc(7 * var(--u)); }
.disclaimer { margin: 0 calc(38 * var(--u)) calc(9 * var(--u)); font-size: calc(8.5 * var(--u)); line-height: 1.4; color: var(--ink-3); }
.disclaimer b { color: var(--ink-2); }
.page.tight .disclaimer { margin-bottom: calc(5 * var(--u)); font-size: calc(8 * var(--u)); }

/* The PDF service prints the page number 39-59 px above the sheet bottom. The footer band is tall enough to hold it (the
   logo and copyright stay at the bottom), so the number never lands on content above the band. */
.foot { box-sizing: border-box; min-height: calc(62 * var(--u)); padding: 0 calc(38 * var(--u)) calc(10 * var(--u)); align-items: flex-end; }

.page.tight .addr, .page.tight .facts { margin-top: calc(1 * var(--u)); }
.page.tight .doc-note, .page.tight .eyebrow + .h1 { margin-top: 0; }
.page.tight .results, .page.tight .docs { gap: calc(3 * var(--u)); padding-top: calc(4 * var(--u)); padding-bottom: calc(4 * var(--u)); }
.page.tight .rg-legend { margin-top: calc(2 * var(--u)); }
.page.tight .rg { margin-top: calc(2 * var(--u)); }
.page.tight .tl-track { margin-top: 0; }
.page.tight .metric { padding-top: calc(1.5 * var(--u)); padding-bottom: calc(1.5 * var(--u)); }
.foot-logo, .foot-partner { height: calc(30 * var(--u)); }

/* the events table is fixed-layout (app.js sets the column widths): headings may wrap */
.events th { white-space: normal; line-height: 1.25; letter-spacing: 0.12em; }
.events th, .events td { overflow: hidden; }

/* ---- Spacing and alignment refinements ---- */
/* more air between the sections: photo block, timeline, table, then summary and documents. The crowded-page tiers (dense, sparse, tight) step these back down. */
.timeline { padding-top: calc(var(--sg) * var(--u)); }
.block { padding-top: calc(var(--sg) * var(--u)); }
.lower { margin-top: calc((var(--sg) + 2) * var(--u)); }
.results, .docs { gap: calc(var(--rg) * var(--u)); padding-top: calc((var(--rg) - 6) * var(--u)); padding-bottom: calc((var(--rg) - 6) * var(--u)); }
.doc-note { margin-top: calc(-10 * var(--u)); }
.doclist { margin-top: 0; }
.range-title { margin-top: calc(6 * var(--u)); }
.page.dense .timeline { padding-top: calc(16 * var(--u)); }
.page.dense .block { padding-top: calc(16 * var(--u)); }
.page.dense .lower { margin-top: calc(16 * var(--u)); }
/* the study table: everything after the study name is centered */
.events th, .events td { text-align: center; }
.events th:first-child, .events td:first-child { text-align: left; }
.events th.l, .events td.l { text-align: center; }
.events td.b { text-align: center; }
.events th.l:first-child, .events th:first-child { text-align: left; }
/* the note under the documents heading: pull up by less when the crowded tiers have a smaller gap */
.page.dense .doc-note, .page.sparse .doc-note { margin-top: calc(-3 * var(--u)); }
/* the last-resort tier had a little room to spare on real five-study pages */
.page.tight { --rp: 2.5; --dp: 2.5; --tp: 2.5; }
.page.tight .timeline { padding-top: calc(8 * var(--u)); }
.page.tight .block { padding-top: calc(8 * var(--u)); }
.page.tight .lower { margin-top: calc(10 * var(--u)); }
.page.tight .metric { padding-top: calc(2.5 * var(--u)); padding-bottom: calc(2.5 * var(--u)); }
.page.tight .results, .page.tight .docs { gap: calc(5 * var(--u)); padding-top: calc(5 * var(--u)); padding-bottom: calc(5 * var(--u)); }

/* a little room taken back from the blocks that had some, so the gaps between sections can be larger */
.rg { margin-top: calc(6 * var(--u)); }
.rg-legend { margin-top: calc(5 * var(--u)); }
.sale { margin-top: calc(10 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.disclaimer { margin-bottom: calc(6 * var(--u)); }

/* the header text column can shrink, so a long name is fitted (fitHeads in app.js) instead of widening the page */
.head > div:first-child { min-width: 0; flex: 1 1 auto; }

.head-stamp { max-width: 38%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }   /* a long client name takes two lines at most */

/* a long document list (more than eight) runs in two columns: title, then status under it, no study letters line */
.doclist.many { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(18 * var(--u)); }
.doclist.many .doc { grid-template-columns: calc(18 * var(--u)) minmax(0, 1fr); row-gap: 0; align-items: start; padding-top: calc(5 * var(--u)); padding-bottom: calc(5 * var(--u)); }
.doclist.many .doc > div:last-child { grid-column: 2; margin-top: calc(-2 * var(--u)); }
.doclist.many .doc-s { display: none; }
.doclist.many .doc-t { font-size: calc(10.5 * var(--u)); line-height: 1.25; }
.doclist.many .doc-status { font-size: calc(7.5 * var(--u)); }
/* past tight: six or more studies on one property */
.page.tighter { --lk: 9.5; --ls: 8; --rk: 9.5; --rp: 1.5; --dp: 1; --dt: 9.5; --ds: 8; --lp: 0; --tp: 1.5; }
.page.tighter .head { padding-top: calc(7 * var(--u)); padding-bottom: calc(6 * var(--u)); }
.page.tighter .h1 { font-size: calc(15 * var(--u)); }
.page.tighter .timeline { padding-top: calc(3 * var(--u)); }
.page.tighter .block { padding-top: calc(3 * var(--u)); }
.page.tighter .events { font-size: calc(9.5 * var(--u)); }
.page.tighter .lower { margin-top: calc(3 * var(--u)); }
.page.tighter .results, .page.tighter .docs { gap: calc(3 * var(--u)); padding-top: calc(3 * var(--u)); padding-bottom: calc(3 * var(--u)); }
.page.tighter .metric { padding-top: calc(1.5 * var(--u)); padding-bottom: calc(1.5 * var(--u)); font-size: calc(10 * var(--u)); }
.page.tighter .range-title { font-size: calc(12 * var(--u)); }
.page.tighter .rg-mid .a { font-size: calc(12 * var(--u)); }
.page.tighter .sale { margin-top: calc(4 * var(--u)); margin-bottom: calc(4 * var(--u)); }
.page.tighter .cell-v { font-size: calc(12 * var(--u)); }
.page.tighter .assume { font-size: calc(9 * var(--u)); margin-top: calc(3 * var(--u)); }
.page.tighter .disclaimer { font-size: calc(7.5 * var(--u)); margin-bottom: calc(3 * var(--u)); }

/* a long address or property description takes two lines at most */
.addr, .facts { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* long unbroken text (a very long name or URL) breaks instead of widening the page */
.page { overflow-wrap: anywhere; }
.events td .tier { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }   /* an unusually long tier name is cut inside its cell */
.events td .tier { box-sizing: border-box; vertical-align: middle; }

/* the study cell wraps rather than clipping a long label such as "Improvement (lookback)" */
.events td:first-child { white-space: normal; overflow: visible; }

/* year labels never wrap, and the first and last stay inside the page margins */
.tl-year { white-space: nowrap; }
.tl-year.first { transform: none; }
.tl-year.last { transform: translateX(-100%); }

/* ---- Revision: more room above the low-to-high range, next steps under the documents ---- */
.range { margin-top: calc(var(--rg) * 0.7 * var(--u)); }

.page.dense .range, .page.sparse .range { margin-top: calc(4 * var(--u)); }
.page.tight .range, .page.tighter .range { margin-top: 0; }
.page.tighter .disclaimer { line-height: 1.25; }
.page.tighter .facts { margin-top: 0; }
.page.tighter .tl-track { margin-top: 0; }
.page.tighter .foot { min-height: calc(58 * var(--u)); }
.page.tighter .rg-legend { margin-top: calc(1 * var(--u)); }
.page.tighter .metric { padding-top: calc(1 * var(--u)); padding-bottom: calc(1 * var(--u)); }





/* ---- Next steps & process: the stage track of the audit protection page, once per property, full width above the sale strip ---- */
.process { margin: calc(12 * var(--u)) calc(38 * var(--u)) 0; padding-top: calc(10 * var(--u)); border-top: 1px solid var(--ink-deep); }
.process:empty { display: none; }
.proc-head { display: flex; justify-content: space-between; align-items: baseline; }
.proc-note { font-weight: 700; font-size: calc(8.5 * var(--u)); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); }
.proc-track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: calc(6 * var(--u)); }
.proc-rail { position: absolute; left: 10%; right: 10%; top: calc(15 * var(--u)); height: calc(3 * var(--u)); background: #c7ddee; }
.proc-node { position: relative; z-index: 1; text-align: center; padding: 0 calc(6 * var(--u)); }
.proc-dot { width: calc(16 * var(--u)); height: calc(16 * var(--u)); box-sizing: border-box; border-radius: 50%; margin: calc(8 * var(--u)) auto calc(5 * var(--u)); background: #fff; border: calc(3 * var(--u)) solid var(--blue-1); }
.proc-node.first .proc-dot { background: var(--blue-1); box-shadow: 0 0 0 calc(3 * var(--u)) var(--hair); }
.proc-stage { font-weight: 700; font-size: calc(7.5 * var(--u)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-1); }
.proc-label { font-size: calc(11 * var(--u)); font-weight: 600; color: var(--ink-1); line-height: 1.15; margin-top: calc(1 * var(--u)); }
.proc-subs { margin-top: calc(3 * var(--u)); font-size: calc(8.5 * var(--u)); line-height: 1.3; color: var(--ink-3); }
.proc-subs span { display: block; }
/* crowded pages: the sub-steps go first, then the label row, then everything gets smaller */
.page.nosubs .proc-subs { display: none; }
.page.dense .process, .page.sparse .process { margin-top: calc(8 * var(--u)); padding-top: calc(6 * var(--u)); }
.page.tighter .process { margin-top: calc(4 * var(--u)); padding-top: calc(3 * var(--u)); }
.page.tighter .proc-head { display: none; }
.page.tighter .proc-track { margin-top: 0; }
.page.tighter .proc-rail { top: calc(9 * var(--u)); }
.page.tighter .proc-dot { width: calc(10 * var(--u)); height: calc(10 * var(--u)); margin: calc(3 * var(--u)) auto calc(2 * var(--u)); border-width: calc(2 * var(--u)); }
.page.tighter .proc-label { font-size: calc(9 * var(--u)); }
.page.tighter .proc-stage { font-size: calc(6.5 * var(--u)); }
.page.procsmall .proc-head { display: none; }
.page.procsmall .process { margin-top: calc(6 * var(--u)); padding-top: calc(4 * var(--u)); }
.page.procsmall .proc-track { margin-top: 0; }
.page.procsmall .proc-rail { top: calc(11 * var(--u)); }
.page.procsmall .proc-dot { width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin: calc(4 * var(--u)) auto calc(3 * var(--u)); border-width: calc(2.5 * var(--u)); }
/* the last tier (six or more studies on one property): one row, a dot and a label per step */
.page.tighter .process { margin-top: calc(2 * var(--u)); padding-top: calc(2 * var(--u)); }
.page.tighter .proc-track { display: flex; justify-content: space-between; margin-top: 0; }
.page.tighter .proc-rail, .page.tighter .proc-stage { display: none; }
.page.tighter .proc-node { display: flex; align-items: center; gap: calc(3 * var(--u)); padding: 0; }
.page.tighter .proc-dot { width: calc(8 * var(--u)); height: calc(8 * var(--u)); margin: 0; border-width: calc(2 * var(--u)); box-shadow: none; }
.page.tighter .proc-label { font-size: calc(8 * var(--u)); margin: 0; white-space: nowrap; }
.page.tighter .sale { margin-top: calc(2 * var(--u)); margin-bottom: calc(2 * var(--u)); }
.page.tighter .disclaimer { margin-bottom: calc(1 * var(--u)); }
.page.tighter .results, .page.tighter .docs { padding-top: calc(1 * var(--u)); padding-bottom: calc(1 * var(--u)); }
.page.tighter .lower { margin-top: calc(1 * var(--u)); }


/* ---- KPI strip at the top (moved here from the transaction file): four figures under the header ---- */
.kpis { border-bottom: 1px solid var(--hair); }
.tiles { padding: 0 calc(18 * var(--u)); overflow: hidden; }
.tiles-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-right: -1px; }
.tile { padding: calc(14 * var(--u)) calc(20 * var(--u)); border-right: 1px solid var(--hair); text-align: center; }
.tile:last-child { border-right: 0; }
.tile-k { font-weight: 700; font-size: calc(8 * var(--u)); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); }
.tile-v { margin-top: calc(6 * var(--u)); font-size: calc(21 * var(--u)); font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tile-s { margin-top: calc(4 * var(--u)); font-size: calc(11 * var(--u)); color: var(--ink-3); line-height: 1.35; }
.page.dense .tile, .page.sparse .tile { padding-top: calc(9 * var(--u)); padding-bottom: calc(9 * var(--u)); }
.page.tight .tile, .page.tighter .tile { padding-top: calc(5 * var(--u)); padding-bottom: calc(5 * var(--u)); }
.page.tight .tile-s, .page.tighter .tile-s { display: none; }

/* the check mark on a received document is centered in its icon (it sat against the left edge) */
.doc-ic.got::after { left: 50%; top: 44%; width: calc(3.5 * var(--u)); height: calc(7 * var(--u)); transform: translate(-50%, -55%) rotate(45deg); }
.doc-ic { flex: none; overflow: visible; }

/* ---- Brand fonts: Poppins body, Montserrat 600 labels and table headers, League Spartan bold headlines; Barlow stays for figures and the client name. */
html, body, button, input, select, textarea { font-family: Poppins, Helvetica, Arial, sans-serif; }
.head-title { font-family: "League Spartan", "Poppins", Helvetica, Arial, sans-serif; font-weight: 800; letter-spacing: -0.02em; }
.head-kicker { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.head-stamp { font-family: Barlow, Helvetica, Arial, sans-serif; }
.eyebrow { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.h1 { font-family: "League Spartan", "Poppins", Helvetica, Arial, sans-serif; font-weight: 800; letter-spacing: -0.02em; }
.facts { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
table td:not(:first-child) { font-family: Barlow, Helvetica, Arial, sans-serif; }
.events thead tr { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.events th { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.events th.l { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.events th:first-child { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.events th.r-end { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.tl-note { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.tl-year { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.sale-eyebrow { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.cell-k { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.cell-v { font-family: Barlow, Helvetica, Arial, sans-serif; }
.metric .mv { font-family: Barlow, Helvetica, Arial, sans-serif; }
.rg-ends { font-family: Barlow, Helvetica, Arial, sans-serif; }
.rg-legend { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.doc-note { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.doc-status { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.foot { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.tier { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.events th { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.events th.l:first-child, .events th:first-child { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 0.04em; font-size: 0.92em; hyphens: none; }
.head-stamp { font-family: Barlow, Helvetica, Arial, sans-serif; }
.proc-note { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.proc-stage { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.tile-k { font-family: Montserrat, "Poppins", Helvetica, Arial, sans-serif; font-weight: 600; }
.tile-v { font-family: Barlow, Helvetica, Arial, sans-serif; }

/* ---- Brand colors: deep navy #002e5b, slate navy #283a54, brand blue #2381bf, medium blue #0b5697. */
:root { --ink-1: #002e5b; --ink-2: #283a54; --ink-deep: #002e5b; --blue-1: #2381bf; --blue-2: #0b5697; }
.rg-bar .span { background: linear-gradient(90deg, #c7ddee 0%, #2381bf 50%, #c7ddee 100%); }
.tier-standard { color: #0b5697; border-color: #0b5697; }
.tier-premium { border-color: #002e5b; background: #002e5b; }
.tier-other { color: #002e5b; border-color: #002e5b; }
.head .tier-standard { color: #002e5b; border-color: #2381bf; background: #2381bf; }
.head .tier-premium { color: #002e5b; }