/* UMB client proposal: 6 Letter pages (8.5 x 11 in), from the boss's UMB_Proposal_V.9.pdf.
   Everything is scoped under .proposal so it never touches the app's own styles. */
.proposal {
  --night: #0e1b16; --green: #365c4d; --mint: #e1ebe5; --card: #f3f5f0; --offer: #f0f5f2;
  --p-ink: #151a18; --p-muted: #69716d; --p-line: #e3e6e3;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  font-family: var(--sans); color: var(--p-ink); -webkit-font-smoothing: antialiased;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.proposal * { box-sizing: border-box; margin: 0; padding: 0; font-variant-numeric: lining-nums; }
.proposal .page {
  width: 8.5in; height: 11in; position: relative; overflow: hidden;
  background: #fff; margin: 0 auto .35in; box-shadow: 0 16px 48px rgba(14, 27, 22, .22);
  padding: 0; max-width: none; /* the app's own .page rule must not leak in */
  break-after: page; page-break-after: always;
}
.proposal .page:last-child { break-after: auto; page-break-after: auto; }

.proposal .light { font-weight: 200; letter-spacing: .01em; }
.proposal .eyebrow, .proposal h3 { font-size: 8pt; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--green); }
.proposal .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proposal .running { position: absolute; left: .58in; right: .58in; top: .32in; height: .45in; display: flex; justify-content: space-between; align-items: center; gap: .3in; border-bottom: 1px solid var(--p-line); font-size: 7.5pt; letter-spacing: .03em; text-transform: uppercase; color: var(--p-muted); }
.proposal .running .site { font-size: 14pt; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--p-ink); }
.proposal .folio { position: absolute; left: .58in; right: .58in; bottom: .4in; display: flex; justify-content: space-between; gap: .3in; font-size: 7.5pt; letter-spacing: .03em; color: var(--p-muted); }
.proposal .mo { font-size: 11pt; font-weight: 700; color: var(--green); margin-top: 14pt; }
.proposal .apr, .proposal .cap { font-size: 7.5pt; color: var(--p-muted); margin-top: 5pt; }
.proposal .tbc { font-size: 14pt !important; }
.proposal .caps { text-transform: uppercase; }

/* Cover */
.proposal .cover .band { position: absolute; inset: 0 0 auto; height: 1.22in; background: var(--night); color: #fff; display: flex; align-items: center; padding: 0 .58in; gap: .32in; }
.proposal .cover .logo { font-size: 21pt; font-weight: 800; line-height: 1.12; letter-spacing: .03em; text-transform: uppercase; }
.proposal .cover .tag { display: grid; gap: 7pt; padding-left: .25in; border-left: 1px solid rgba(225, 235, 229, .55); align-self: stretch; margin: .36in 0; align-content: center; font-size: 9pt; letter-spacing: .02em; text-transform: uppercase; color: var(--mint); }
.proposal .cover .tag span + span { font-size: 7.5pt; }
.proposal .cover .photo { position: absolute; top: 1.22in; left: 0; right: 0; height: 5.33in; }
.proposal .cover .photo img { object-position: center 60%; }
.proposal .cover .body { position: absolute; top: 7.05in; left: .58in; right: .58in; }
.proposal .cover h1 { font-size: 34pt; font-weight: 800; line-height: 1.12; margin: .2in 0 .2in; }
.proposal .cover h1 .light { font-size: 30pt; }
.proposal .cover .lede { font-size: 11pt; color: var(--p-muted); }
.proposal .cover .meta { margin-top: .32in; padding-top: .26in; border-top: 1px solid var(--p-line); display: flex; justify-content: space-between; gap: .3in; }
.proposal .cover .meta > div { display: grid; gap: 14pt; font-size: 9pt; color: var(--p-muted); }
.proposal .cover .meta b { font-size: 11pt; color: var(--p-ink); overflow-wrap: anywhere; }
.proposal .cover .meta .right { text-align: right; }
.proposal .cover .meta .tiers { font-size: 8pt; color: var(--green); letter-spacing: .04em; white-space: nowrap; }

/* Three simple choices */
.proposal .overview .inner { position: absolute; top: 1.08in; left: .58in; right: .58in; }
.proposal .overview h2 { font-size: 31pt; font-weight: 800; line-height: 1.2; }
.proposal .overview .lede { font-size: 10.5pt; line-height: 1.6; color: var(--p-muted); max-width: 6.8in; margin-top: .2in; white-space: pre-line; }
.proposal .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .14in; margin-top: .45in; }
.proposal .card { background: var(--card); padding: .26in .2in .22in; border: 0; border-radius: 0; box-shadow: none; }
.proposal .card .n { font-size: 8pt; font-weight: 700; color: var(--green); }
.proposal .card .name { font-size: 12.5pt; font-weight: 700; margin: 17pt 0 16pt; }
.proposal .card .price { font-size: 22pt; font-weight: 800; line-height: 1; }
.proposal .card .cap { margin-top: 12pt; }
.proposal .overview h3 { margin: .32in 0 .08in; }
.proposal .compare { font-size: 8.5pt; }
.proposal .compare .row { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: .14in; border-bottom: 1px solid var(--p-line); }
.proposal .compare .row > div { display: flex; justify-content: space-between; gap: 8pt; padding: 7.5pt 0; text-align: right; }
.proposal .compare .row > div > span:last-child { margin-left: auto; }
.proposal .compare .label { color: var(--p-muted); text-align: left; }
.proposal .compare.dense .row > div { padding: 5pt 0; }
.proposal .overview .foot { margin-top: .3in; font-size: 7.5pt; color: var(--p-muted); }

/* One page per option */
.proposal .option .running { border-bottom: 0; }
.proposal .option .running b { font-weight: 700; }
.proposal .option .photo { position: absolute; top: .95in; left: 0; right: 0; height: 5.28in; }
.proposal .option .photo img { object-position: center 58%; }
.proposal .option .head { position: absolute; top: 6.3in; left: .58in; right: .58in; padding-bottom: .22in; border-bottom: 1px solid var(--p-line); display: flex; justify-content: space-between; align-items: flex-start; gap: .3in; }
.proposal .option h2 { font-size: 34pt; font-weight: 200; line-height: 1.1; }
.proposal .option .head p { font-size: 11pt; color: var(--p-muted); margin-top: 8pt; }
.proposal .option .price { text-align: right; }
.proposal .option .price .amt { font-size: 25pt; font-weight: 800; line-height: 1.15; white-space: nowrap; }
.proposal .option .price .cap { margin-top: 10pt; }
.proposal .option .price .mo { margin-top: 12pt; }
.proposal .option .included { position: absolute; top: 8.05in; left: .58in; right: .58in; }
.proposal .option .included dl { margin-top: 12pt; display: grid; grid-template-columns: 1fr 1fr; column-gap: .35in; }
.proposal .option .included dl > div { display: flex; justify-content: space-between; gap: 10pt; padding: 6pt .15in 6pt 0; font-size: 8.5pt; }
.proposal .option .included dt { color: var(--p-muted); }
.proposal .option .included dd { font-weight: 700; white-space: nowrap; }
.proposal .option .folio { border-top: 1px solid var(--p-line); padding-top: 12pt; }

/* Ready to love your backyard? */
.proposal .closing .inner { position: absolute; top: 1.05in; left: .58in; right: .58in; }
.proposal .closing h2 { font-size: 25pt; font-weight: 800; }
.proposal .closing .sub { font-size: 11pt; color: var(--green); margin-top: 8pt; }
.proposal .offer { margin-top: .26in; background: var(--offer); border-radius: 8pt; padding: .24in .24in .14in; }
.proposal .offer h3 { font-size: 17pt; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--p-ink); margin-top: 6pt; }
.proposal .offer p { font-size: 9pt; color: var(--p-muted); margin-top: 9pt; }
.proposal .offer dl { margin-top: 8pt; }
.proposal .offer dl > div { display: grid; grid-template-columns: 1.05in 1fr auto; align-items: center; padding: 11pt 0; border-bottom: 1px solid #dde5df; font-size: 9pt; }
.proposal .offer dl > div:last-child { border-bottom: 0; }
.proposal .offer dt { font-weight: 700; }
.proposal .offer dd.v { color: var(--green); font-size: 8.5pt; }
/* QR code to the next steps page, to the right of the steps (for printed and PDF copies) */
.proposal .steps-row { position: relative; }
.proposal .qr { position: absolute; right: 0; bottom: 0; display: grid; justify-items: center; gap: 6pt; text-decoration: none; text-align: center; font-size: 8pt; line-height: 1.35; font-weight: 600; color: var(--green); }
.proposal .qr svg { width: 1.25in; height: 1.25in; display: block; }
.proposal .steps-title { font-size: 13pt; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--p-ink); margin-top: .3in; }
.proposal .steps { list-style: none; margin-top: .14in; display: grid; gap: 13pt; }
.proposal .steps li { display: grid; grid-template-columns: .6in 1fr; }
.proposal .steps .k { font-size: 11.5pt; font-weight: 700; color: var(--green); }
.proposal .steps b { font-size: 10.5pt; }
.proposal .steps p { font-size: 8pt; color: var(--p-muted); margin-top: 6pt; }
.proposal .project-note { margin-top: .2in; }
.proposal .project-note h4, .proposal .fine h4 { font-size: 7pt; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--green); margin-bottom: 5pt; }
.proposal .project-note p { font-size: 8pt; line-height: 1.5; color: var(--p-muted); white-space: pre-line; }
.proposal .closing .bottom { position: absolute; left: .58in; right: .58in; bottom: .5in; }
.proposal .cta { display: block; background: var(--green); color: #fff; text-align: center; text-decoration: none; border-radius: 8pt; padding: .2in; font-size: 13pt; font-weight: 700; }
.proposal .fine { margin-top: .16in; padding-top: .08in; border-top: 1px solid var(--p-line); }
.proposal .fine p { font-size: 6.5pt; line-height: 1.5; color: var(--p-muted); }

/* Four options (Good, Better, Best + Custom) */
.proposal .cards.count-4, .proposal .compare.count-4 .row { grid-template-columns: repeat(4, 1fr); column-gap: .1in; }
.proposal .cards.count-4 .card { padding: .22in .14in .2in; }
.proposal .cards.count-4 .card .price { font-size: 18pt; }