/* Round 96 (5 Oct 2026, every answer A): the look of our quotes, proposals and invoices — on the client's laptop, on a
   phone, and printed to a PDF (Q-997, Q-998). Always light: it is paper. Fast Service's navy and red. Type set for
   sharpness (Andre's note on Q-997, "more 4k"): never under 13px on screen, a heavier weight at small sizes, deep ink. */
:root { color-scheme: light }
.d { --ink: #08131F; --ink2: #2E3A49; --mute: #5A6676; --rule: #E2E6EC; --hair: #EDF0F4; --soft: #F6F8FA; --navy: #1C4A86; --deep: #0E2747; --red: #B5161E;
  --ok: #156B46; --okbg: #E5F2EB; --warn: #8F530A; --warnbg: #FCF0E0;
  color: var(--ink); background: #F3F5F8; font: 450 15.5px/1.6 Inter, 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-optical-sizing: auto; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  min-height: 100vh; margin: 0 }
.d * { box-sizing: border-box }
/* Round 189: even-width figures only where figures stand in columns — in Inter "tnum" also widens the hyphen, which spread
   "398-5929" and "pre-installed" across the page. */
.d :is(.r, .q, .amt, .sum, .gsum td + td) { font-variant-numeric: tabular-nums }
.d p, .d li { text-wrap-style: pretty }
.d h1, .d h2, .d h3, .d button, .d dt { text-wrap-style: balance }
.d a { color: var(--navy) }
.d button { font: inherit }
.d svg.i { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none }

/* the bar along the top */
.d .appbar { position: sticky; top: 0; z-index: 5; background: #fff;
  border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: 14px; padding: 10px 28px; padding-top: calc(10px + env(safe-area-inset-top, 0px)) }
.d .appbar img { height: 30px; display: block }
.d .appbar .sep { width: 1px; height: 26px; background: var(--rule) }
.d .appbar .who { font-weight: 650; font-size: 14.5px; line-height: 1.2 }
.d .appbar .who span { display: block; font-weight: 500; font-size: 13px; color: var(--mute) }
.d .appbar .sp { flex: 1 }
.d .ghost { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--rule); background: #fff; border-radius: 10px; padding: 8px 13px; font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none }
.d .ghost:focus-visible, .d .btn:focus-visible { outline: 3px solid #9BB8E3; outline-offset: 2px }
.d .btn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 14px 18px; font-weight: 650; font-size: 16px;
  background: var(--navy); color: #fff; text-align: center; text-decoration: none; box-shadow: none }
.d .btn.ok { background: var(--ok) }
.d .btn.sec { background: #fff; color: var(--ink); border: 1px solid var(--rule); box-shadow: none }
.d .btn[disabled] { opacity: .55; cursor: default }
.d .test { max-width: 1180px; margin: 14px auto 0; padding: 0 28px }
.d .test div { background: #FFF4E0; color: #7C4708; border: 1px solid #F0D7AA; border-radius: 10px; padding: 9px 13px; font-size: 14px; font-weight: 500 }

.d .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; max-width: 1180px; margin: 0 auto; padding: 28px 28px 40px; align-items: start }
.d .paper { background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(8,19,31,.05), 0 12px 40px rgba(8,19,31,.07); overflow: hidden; min-width: 0; position: relative }
.d .rail { position: sticky; top: 84px; display: grid; gap: 14px }

/* the document's head */
.d .head { padding: 30px 40px 26px; border-bottom: 1px solid var(--rule); position: relative }
.d .head::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--deep), var(--navy) 70%, var(--red) 70%, var(--red)) }
.d .kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--mute); font-weight: 500 }
.d .kicker b { color: var(--ink); font-weight: 650 }
.d .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; padding: 3px 10px 3px 8px; border-radius: 99px; background: #E8EFF8; color: var(--navy); line-height: 1.6 }
.d .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor }
.d .pill.ok { background: var(--okbg); color: var(--ok) } .d .pill.warn { background: var(--warnbg); color: var(--warn) }
.d h1.title { font-size: 30px; line-height: 1.15; letter-spacing: -.022em; margin: 10px 0 0; font-weight: 700; max-width: 34ch }
.d .sub { color: var(--ink2); margin: 6px 0 0; font-size: 15.5px }
.d .meta { display: grid; grid-template-columns: minmax(min-content, 1.2fr) minmax(0, 1.15fr) minmax(0, .8fr) minmax(0, 1.1fr); gap: 18px 22px; margin: 24px 0 0 }   /* 24 Oct 2026: the first column (Billed to) grows to hold its email whole */
.d .meta div { min-width: 0 }
.d .meta dt { font-size: 12.5px; color: var(--mute); font-weight: 550; margin: 0 0 3px }
.d .meta dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); overflow-wrap: break-word }
/* Round 196 (Q-1953 A): a date, a unit number or an email's two halves stay whole (doc.js factLine). */
.d .nw, .pd .nw { white-space: nowrap }
.pd .facts span.nw { display: inline; font-size: inherit; color: inherit; font-weight: inherit; margin: 0 }
.d .meta dd .nw { display: inline } .d .meta dd span span, .d .meta dd span span:first-child { font-weight: inherit }
.d .meta dd span { display: block }
.d .meta dd span:first-child { font-weight: 650 }
.d .stamp { position: absolute; right: 40px; top: 30px; border: 2.5px solid var(--ok); color: var(--ok); border-radius: 10px; padding: 6px 14px; font-weight: 700; font-size: 15px; letter-spacing: .14em; transform: rotate(-4deg) }

/* sections */
.d .sect { padding: 26px 40px; border-bottom: 1px solid var(--hair) }
.d .sect:last-child { border-bottom: 0 }
.d .sh { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px }
.d .sh .n { font-size: 12.5px; font-weight: 650; color: var(--navy); min-width: 20px }   /* round 229: a section's number is navy — red is for what is urgent */
.d .sh h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.008em }
.d .sh .aside { margin-left: auto; font-size: 13.5px; color: var(--mute) }
.d .letter { font-size: 16px; line-height: 1.68; margin: 0; max-width: 68ch; color: var(--ink); white-space: pre-line }
.d .sig { margin-top: 12px; font-size: 14px; color: var(--mute) } .d .sig b { color: var(--ink); font-weight: 650 }

/* lines */
.d table.li { width: 100%; border-collapse: collapse }
.d .li th { font-size: 12.5px; font-weight: 550; color: var(--mute); text-align: left; padding: 0 0 9px; border-bottom: 1px solid var(--rule) }
.d .li th.r, .d .li td.r { text-align: right }
.d .li td { padding: 14px 0; border-bottom: 1px solid var(--hair); vertical-align: top }
.d .li td + td, .d .li th + th { padding-left: 18px }
.d .li .nm { font-weight: 650; display: block }
.d .li .ds { display: block; color: var(--ink2); font-size: 14px; margin-top: 2px; max-width: 64ch; white-space: pre-line }
.d .li .q { color: var(--mute); white-space: nowrap }
.d .li .amt { font-weight: 650; white-space: nowrap }
.d .li tr.free .amt { color: var(--mute); font-weight: 500 }
.d .li tr.grp td { padding: 18px 0 6px; border-bottom: 0; font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: .01em }
.d .li tr.gsum td { padding: 8px 0 14px; font-size: 13.5px; color: var(--mute); border-bottom: 1px solid var(--rule) }
.d .li tr.gsum .amt { color: var(--ink2) }
.d .totals { margin: 6px 0 0 auto; width: min(360px, 100%); display: grid; grid-template-columns: 1fr auto; gap: 7px 0; font-size: 15px; padding-top: 12px }
.d .totals dt { color: var(--ink2) } .d .totals dd { margin: 0; padding-left: 20px; text-align: right }
.d .totals .big { font-size: 23px; font-weight: 700; color: var(--ink); letter-spacing: -.012em; border-top: 1.5px solid var(--ink); padding-top: 12px; margin-top: 6px }

/* options the client ticks */
.d .alts { display: grid; gap: 10px }
.d .alt { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: start; border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, background .15s }
.d .alt input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--navy) }
.d .alt.on { border-color: var(--navy); background: #F5F8FD }
.d .alt.locked { cursor: default }
.d .alt b { display: block; font-weight: 650 }
.d .alt span { color: var(--ink2); font-size: 14px }
.d .alt .amt { font-weight: 650; white-space: nowrap }

/* schedule and payments */
.d .tl { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin-top: 4px }   /* round 229: as many columns as there are steps — the track spans the card */
.d .tl div { padding: 16px 14px 0 0; position: relative; font-size: 14px; color: var(--ink2); min-width: 0 }
.d .tl div::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--rule); border-radius: 2px }
.d .tl div:first-child::before { background: var(--navy) }
.d .tl div::after { content: ""; position: absolute; top: -4px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2.5px solid var(--navy) }
.d .tl b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 650 }
.d .tl small { display: block; color: var(--mute); font-size: 13px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums }   /* 24 Oct 2026: a step's day in grey — red is for what is urgent */
.d .msbar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; margin: 0 0 10px }
.d .msbar div { display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700 }
.d table.ms { width: 100%; border-collapse: collapse; font-size: 14.5px }
.d .ms td { padding: 11px 0; border-bottom: 1px solid var(--hair); vertical-align: top }
.d .ms td + td { padding-left: 16px }
.d .ms .pc { width: 58px; font-weight: 700 }
.d .ms .r { text-align: right; font-weight: 650; white-space: nowrap }
.d .ms small { display: block; color: var(--mute); font-size: 13px; font-weight: 500 }

/* lists, tiles, files */
.d .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px }
.d .cols2 h3 { font-size: 14.5px; margin: 0 0 8px }
.d ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14.5px; color: var(--ink2) }
.d ul.plain li { display: grid; grid-template-columns: 16px 1fr; gap: 10px }
.d ul.plain li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin-top: 9px }
.d .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.d .tile { border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; font-size: 14px; color: var(--ink2); min-width: 0 }
.d .tile b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 650; margin-bottom: 2px }
.d .files { display: grid; gap: 8px }
.d .file { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; font-size: 14.5px; text-decoration: none; color: var(--ink) }
.d .file i { width: 36px; height: 36px; border-radius: 8px; background: #FBEDEE; color: var(--red); display: grid; place-items: center; font-style: normal; font-size: 10.5px; font-weight: 700 }
.d .file small { display: block; color: var(--mute); font-size: 13px }
.d .file em { font-style: normal; font-weight: 650; font-size: 13.5px; color: var(--navy) }

/* photos — only when somebody picked some */
.d .photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.d .photos figure { margin: 0; min-width: 0 }
.d .photos a { display: block; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; position: relative; background: #F1F4F8; border: .6pt solid var(--ru) }
.d .photos img { display: block; width: 100%; height: 100%; object-fit: cover }
.d .photos .tg { position: absolute; left: 8px; top: 8px; background: rgba(8,19,31,.74); color: #fff; font-size: 11.5px; font-weight: 650; padding: 2px 8px; border-radius: 99px }
.d .photos figcaption { font-size: 13.5px; color: var(--ink2); margin-top: 7px; line-height: 1.45 }

/* the schedule of values */
.d .sovwrap { overflow-x: auto }
.d table.sov { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px }
.d .sov th { font-size: 12px; font-weight: 550; color: var(--mute); text-align: right; padding: 0 0 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: bottom }
.d .sov th:first-child, .d .sov td:first-child { text-align: left; padding-left: 0 }
.d .sov td { padding: 11px 0 11px 12px; border-bottom: 1px solid var(--hair); text-align: right; white-space: nowrap }
.d .sov td:first-child { white-space: normal; font-weight: 650 }
.d .sov td:first-child small { display: block; font-weight: 500; color: var(--mute); font-size: 12.5px }
.d .sov tr.tot td { font-weight: 700; border-top: 1.5px solid var(--ink); border-bottom: 0 }
.d .bar5 { height: 6px; border-radius: 3px; background: var(--hair); overflow: hidden; width: 60px; display: inline-block; vertical-align: middle; margin-right: 8px }
.d .bar5 i { display: block; height: 100%; background: var(--navy) }
.d .g702 { display: grid; grid-template-columns: 1fr auto; gap: 8px 0; font-size: 15px; max-width: 480px; margin-left: auto }
.d .g702 dt { color: var(--ink2) } .d .g702 dd { margin: 0; padding-left: 24px; text-align: right }
.d .g702 .sum { border-top: 1.5px solid var(--ink); padding-top: 10px; margin-top: 4px; font-weight: 700; font-size: 19px; color: var(--ink) }

/* terms and Florida's notices, under the document */
.d .terms { font-size: 14px; color: var(--ink2) }
.d .terms ul { margin: 0; padding-left: 18px; display: grid; gap: 4px }
.d .terms details { margin-top: 12px }
.d .terms summary { color: var(--navy); font-weight: 650; cursor: pointer }
.d .terms .full p { margin: 9px 0 0; line-height: 1.55 } .d .terms .full b { color: var(--ink) }
.d .terms .ver { display: block; margin-top: 12px; font-size: 12.5px; color: var(--mute) }
.d .notices { display: grid; gap: 10px; margin-top: 14px }
.d .notices div { border: 1.5px solid var(--ink); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; font-weight: 700; line-height: 1.45; text-transform: uppercase }
.d .notices h4 { margin: 0 0 6px; font-size: 12.5px }

/* the summary card */
.d .card { background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(8,19,31,.05), 0 12px 40px rgba(8,19,31,.07); padding: 22px }
.d .card .lab { font-size: 13.5px; color: var(--mute); font-weight: 550 }
.d .card .amount { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin: 4px 0 4px }
.d .card .amount small { font-size: 19px; font-weight: 650; letter-spacing: 0; color: var(--mute) }
.d .card .amount.ok { color: var(--ok) }
.d .card .line { font-size: 14px; color: var(--ink2) }
.d .card hr { border: 0; border-top: 1px solid var(--hair); margin: 16px 0 }
.d .card .kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 14px; margin: 0 }
.d .card .kv dt { color: var(--mute) } .d .card .kv dd { margin: 0; text-align: right; font-weight: 650 }
.d .card .stack { display: grid; gap: 9px; margin-top: 18px }
.d .card .tiny { font-size: 13px; color: var(--mute); text-align: center; margin-top: 10px; text-wrap: balance }
.d .meth { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 12px }
.d .meth i { font-style: normal; font-size: 12px; font-weight: 650; border: 1px solid var(--rule); border-radius: 6px; padding: 2px 7px; color: var(--ink2); background: #fff }
.d .contact { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; font-size: 14px }
.d .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: #fff; background: var(--navy) }
.d .contact b { display: block; font-size: 15px } .d .contact span { color: var(--mute) }
.d .contact .av { color: #fff }
.d .trust { display: grid; gap: 8px; font-size: 13.5px; color: var(--ink2) }
.d .trust div { display: flex; gap: 9px; align-items: center }
.d .trust svg.i { stroke: var(--navy); width: 16px; height: 16px }
.d .foot { max-width: 1180px; margin: 0 auto; padding: 0 28px 40px; font-size: 13px; color: var(--mute); display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between }
.d .dock { display: none; position: sticky; bottom: 0; z-index: 6; background: #fff; border-top: 1px solid var(--rule);
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)); grid-template-columns: auto 1fr; gap: 12px; align-items: center }
.d .dock .lab { font-size: 12.5px; color: var(--mute) } .d .dock .v { font-size: 20px; font-weight: 700; line-height: 1.1 }

/* the forms that open in the card: sign, ask for a change, pay */
.d .form { display: grid; gap: 10px }
.d .form label.f { font-size: 14px; font-weight: 650; margin-top: 4px }
.d .form input.t, .d .form textarea { width: 100%; font: 450 16px Inter, 'Avenir Next', sans-serif; padding: 12px; border: 1px solid #C6CED8; border-radius: 10px; background: #fff; color: var(--ink) }
.d .form textarea { min-height: 96px; resize: vertical }
.d .sigwrap { position: relative; border: 1.5px dashed #AEB8C5; border-radius: 12px; background: #FBFCFD; touch-action: none }
.d canvas.sigpad { display: block; width: 100%; height: 160px; border-radius: 12px; cursor: crosshair }
.d .sigline { position: absolute; left: 16px; right: 16px; bottom: 34px; border-top: 1px solid #C9D0D8; pointer-events: none }
.d .sighint { position: absolute; left: 16px; bottom: 10px; font-size: 12.5px; color: var(--mute); pointer-events: none }
.d .clear { all: unset; cursor: pointer; position: absolute; right: 8px; top: 8px; padding: 5px 10px; font-size: 13px; font-weight: 600; background: #fff; color: var(--navy); border: 1px solid var(--rule); border-radius: 8px }
.d .agree { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45 }
.d .agree input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--navy) }
.d .msg { margin: 0; font-size: 14.5px; color: var(--red); font-weight: 550 }
.d .done { text-align: center; padding: 6px 0 2px }
.d .done .tick { width: 52px; height: 52px; border-radius: 50%; background: var(--okbg); color: var(--ok); display: grid; place-items: center; margin: 0 auto 8px; font-size: 26px }
.d .done .tick.back { background: var(--hair); color: var(--ink2) }
.d .done h3 { margin: 4px 0; font-size: 19px }
.d .done p { margin: 0; color: var(--ink2); font-size: 14.5px }
.d .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.d #pe { min-height: 110px }

/* round 96 fact check (5 Oct 2026) */
.d .slot:empty { display: none }
.d .card { scroll-margin-top: 76px }
.d .dock.away { display: none !important }
.d .li .qx { display: none; font-size: 13px; color: var(--mute); margin-top: 3px }
.d .alt.decided { cursor: default; grid-template-columns: auto minmax(0, 1fr) auto; text-align: left }
.d .alt.decided > span:nth-child(2) { text-align: left; display: grid; gap: 2px }
.d .alt.decided:not(.on) { opacity: .78 }
.d .alt .chip { font-size: 12px; font-weight: 650; padding: 2px 9px; border-radius: 99px; background: var(--hair); color: var(--ink2); white-space: nowrap; align-self: start; margin-top: 1px }
.d .alt .chip.ok { background: var(--okbg); color: var(--ok) }
.d .rail.free { position: static }
.d .card .held { display: block; font-size: 13px; color: var(--mute); margin-top: 3px }
.d .photos img { object-fit: contain !important; background: #F1F4F8 }

/* narrow: a phone */
@media (max-width: 860px) {
  .d .wrap { grid-template-columns: minmax(0, 1fr); padding: 0 0 18px; gap: 0 }
  .d .rail { display: none }
  .d .slot { padding: 16px 14px 18px; background: var(--bg, #F3F5F8); border-bottom: 1px solid var(--hair) }
  .d .paper { border-radius: 0; box-shadow: none; margin-top: 10px }
  .d .li .qx { display: block }
  .d .appbar { padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top, 0px)) }
  .d .appbar img { height: 24px } .d .appbar .who, .d .appbar .sep { display: none }
  .d .appbar .ghost .t { display: none }
  .d .test { padding: 0 14px }
  .d .head { padding: 22px 18px 20px }
  .d h1.title { font-size: 23px }
  .d .meta { grid-template-columns: 1fr 1fr; gap: 14px 16px }
  .d .meta > div:has(.em) { grid-column: 1 / -1 }   /* 24 Oct 2026: on a phone a fact with an email takes the row, the email whole */
  .d .sect { padding: 22px 18px }
  .d .li th.q, .d .li td.q { display: none }
  .d .li td + td { padding-left: 12px }
  .d .tiles, .d .cols2 { grid-template-columns: 1fr }
  .d .tiles { gap: 0; border: 1px solid var(--rule); border-radius: 12px }
  .d .tile { border: 0; border-radius: 0; border-bottom: 1px solid var(--hair); padding: 12px 14px } .d .tile:last-child { border-bottom: 0 }
  .d .photos { grid-template-columns: 1fr 1fr } .d .photos figure:first-child { grid-column: 1 / -1 }
  /* 24 Oct 2026 (the tester's fourth check): on a phone the steps run down one rail instead of a broken two-column line. */
  .d .tl { grid-template-columns: 1fr; row-gap: 0 }
  .d .tl div { padding: 0 0 16px 24px }
  .d .tl div::before { top: 6px; bottom: -6px; left: 4px; right: auto; width: 3px; height: auto }
  .d .tl div:last-child::before { display: none }
  .d .tl div::after { top: 2px }
  .d .card { padding: 18px; border-radius: 14px } .d .card .amount { font-size: 34px }
  .d .foot { padding: 18px }
  .d .dock { display: grid }
  .d .dock[hidden] { display: none }
  .d .stamp { right: 18px; top: 20px }
}
@media (prefers-reduced-motion: reduce) { .d * { transition: none !important } }

/* ══ The PDF (Q-998): the same document set for US Letter, printed on our server ══ */
.pd { --n: #1C4A86; --nd: #0E2747; --r: #B5161E; --i: #08131F; --i2: #2E3A49; --m: #5F6B7A; --ru: #D9DEE6; --hr: #E9EDF2; --t: #F2F5F9; --tn: #E8EFF8;
  color: var(--i); font: 500 9.6pt/1.5 Inter, 'Avenir Next', sans-serif; font-feature-settings: normal; -webkit-print-color-adjust: exact; print-color-adjust: exact; background: #fff }
@page { size: Letter; margin: 0.62in 0 0.6in }
@media screen { .pd { max-width: 8.5in; margin: 24px auto; box-shadow: 0 10px 40px rgba(8,19,31,.18) } }
@page :first { margin-top: 0 }
.pd * { box-sizing: border-box }
.pd .px { padding: 0 0.55in }
.pd .band { background: linear-gradient(115deg, var(--nd) 0%, var(--n) 100%); color: #fff; padding: 0.34in 0.55in 0.28in; display: flex; justify-content: space-between; align-items: center; gap: 16px; position: relative }
.pd .band::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3pt; height: 3pt; background: linear-gradient(90deg, var(--r) 0 34%, #fff 34% 35%, var(--n) 35%) }
.pd .band img { height: 0.42in; display: block }
.pd .band .co { font-size: 7.6pt; color: rgba(255,255,255,.78); margin-top: 6pt; line-height: 1.5 }
.pd .band .k { text-align: right }
.pd .band .k small { display: block; font-size: 9pt; letter-spacing: 0; font-weight: 650; color: rgba(255,255,255,.75) }
.pd .band .k b { display: block; font-size: 19pt; letter-spacing: -.01em; line-height: 1.15; font-weight: 700 }
.pd .chip { display: inline-block; margin-top: 4pt; font-size: 7.4pt; font-weight: 650; padding: 1.5pt 7pt; border-radius: 99px; background: rgba(255,255,255,.16); color: #fff; border: .6pt solid rgba(255,255,255,.4) }
.pd .chip.ok { background: #E3F3EA; color: #156B46; border-color: #BFE3CF }
.pd .hero { display: grid; grid-template-columns: minmax(0, 1fr) 2.3in; gap: 16pt; align-items: stretch; padding: 0.3in 0.55in 0 }
.pd .hero h1 { font-size: 15pt; line-height: 1.2; letter-spacing: -.015em; margin: 0; font-weight: 700 }
.pd .hero p { margin: 4pt 0 0; color: var(--i2); font-size: 9pt }
.pd .amt { background: var(--tn); border-radius: 5pt; padding: 8pt 11pt; border-left: 3pt solid var(--n); display: flex; flex-direction: column; justify-content: center }
.pd .amt span { font-size: 8pt; color: var(--m); font-weight: 650 }
.pd .amt b { font-size: 18pt; font-weight: 700; color: var(--nd); letter-spacing: -.02em; line-height: 1.2 }
.pd .amt i { font-style: normal; font-size: 7.8pt; color: var(--i2) }
.pd .amt.ok { background: #E6F2EB; border-left-color: #156B46 } .pd .amt.ok b { color: #156B46 }
.pd .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5pt; padding: 12pt 0.55in 0 }
.pd .facts div { background: var(--t); border-radius: 4pt; padding: 6pt 8pt; font-size: 8.4pt; line-height: 1.45; min-width: 0 }
.pd .facts span { display: block; font-size: 7.6pt; color: var(--m); font-weight: 650; margin-bottom: 1.5pt }
.pd .facts b { font-weight: 650 }
.pd h2 { display: flex; align-items: center; gap: 6pt; font-size: 10pt; font-weight: 700; color: var(--nd); letter-spacing: -.005em; margin: 12pt 0 5pt; break-after: avoid }
.pd h2 em { font-style: normal; color: var(--r); letter-spacing: 0 }
.pd h2::after { content: ""; flex: 1; height: .6pt; background: var(--ru) }
.pd .lt { border-left: 2pt solid var(--r); padding: 1pt 0 1pt 9pt; color: var(--i2); font-size: 9.2pt; line-height: 1.6; white-space: pre-line }
.pd .lt b { display: block; color: var(--i); margin-top: 3pt; font-size: 8.4pt; white-space: normal }
.pd table { width: 100%; border-collapse: collapse }
.pd thead { display: table-header-group }
.pd thead tr { background: var(--nd) }
.pd thead th { color: #fff; font-size: 7.8pt; font-weight: 650; text-align: left; padding: 4pt 6pt }
.pd td { padding: 4pt 6pt; border-bottom: .6pt solid var(--hr); vertical-align: top }
.pd tr { break-inside: avoid }
.pd td.r, .pd th.r { text-align: right }
.pd td small { display: block; color: var(--m); font-size: 7.6pt; line-height: 1.4; white-space: pre-line }
.pd td b { font-weight: 650 }
.pd tr.g td { background: var(--tn); color: var(--nd); font-weight: 700; font-size: 8pt; padding: 3.5pt 6pt; border-bottom: 0 }
.pd tr.s td { color: var(--m); font-size: 8pt; border-bottom: .8pt solid var(--ru) }
.pd tr.s td.r { color: var(--i); font-weight: 700 }
.pd .tt { margin: 7pt 0 0 auto; width: 2.9in; display: grid; grid-template-columns: 1fr auto; font-size: 9pt; break-inside: avoid }
.pd .tt dt, .pd .tt dd { padding: 2.5pt 7pt; margin: 0 } .pd .tt dt { color: var(--i2) } .pd .tt dd { text-align: right }
.pd .tt .b { background: var(--nd); color: #fff; font-weight: 700; font-size: 10.5pt; padding: 5pt 7pt }
.pd .tt dt.b { border-radius: 3pt 0 0 3pt } .pd .tt dd.b { border-radius: 0 3pt 3pt 0 }
.pd .three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5pt; break-inside: avoid }
.pd .three div { border: .6pt solid var(--ru); border-radius: 4pt; padding: 6pt 8pt; font-size: 8.2pt; color: var(--i2) }
.pd .three b { display: block; color: var(--i); font-size: 8.6pt }
.pd .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16pt }
.pd ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2.5pt; font-size: 8.4pt; color: var(--i2) }
.pd ul li { padding-left: 9pt; position: relative; break-inside: avoid }
.pd ul li::before { content: ""; position: absolute; left: 0; top: 4.5pt; width: 3.5pt; height: 3.5pt; border-radius: 50%; background: var(--r) }
.pd .act { display: grid; grid-template-columns: 0.9in 1fr; gap: 11pt; align-items: center; background: var(--t); border-radius: 5pt; padding: 8pt 11pt; break-inside: avoid }
.pd .act svg, .pd .act img { width: 0.9in; height: 0.9in; display: block; background: #fff; border-radius: 3pt }
.pd .act b { display: block; font-size: 10pt; color: var(--nd) }
.pd .act span { font-size: 8.2pt; color: var(--i2) }
.pd .act u { text-decoration: none; color: var(--n); font-weight: 650; word-break: break-all }
.pd .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 7pt; margin-top: 13pt; break-inside: avoid }
.pd .wc { border: .6pt solid var(--ru); border-radius: 5pt; padding: 8pt 10pt }
.pd .wc small { display: block; font-size: 8pt; color: var(--r); font-weight: 700; margin-bottom: 4pt }
.pd .wc li b { color: var(--i) }
.pd .msbar { display: flex; height: 13pt; border-radius: 3pt; overflow: hidden; margin: 1pt 0 6pt }
.pd .msbar div { display: grid; place-items: center; color: #fff; font-size: 7.2pt; font-weight: 700 }
.pd .tlv { display: grid; grid-template-columns: repeat(4, 1fr); margin: 2pt 0 0; break-inside: avoid }
.pd .tlv div { position: relative; padding-top: 10pt; font-size: 8pt; color: var(--i2); padding-right: 8pt }
.pd .tlv div::before { content: ""; position: absolute; top: 3pt; left: 0; right: 0; height: 1.6pt; background: var(--ru) }
.pd .tlv div::after { content: ""; position: absolute; top: 0; left: 0; width: 7pt; height: 7pt; border-radius: 50%; background: #fff; border: 1.6pt solid var(--n) }
.pd .tlv b { display: block; color: var(--i); font-size: 8.6pt } .pd .tlv small { color: var(--r); font-weight: 650; font-size: 7.4pt }
.pd .bar { display: inline-block; width: 30pt; height: 3.5pt; border-radius: 2pt; background: var(--hr); vertical-align: middle; margin-right: 4pt; overflow: hidden } .pd .bar i { display: block; height: 100%; background: var(--n) }
.pd .sgn { display: grid; grid-template-columns: 3fr 2fr; gap: 9pt; break-inside: avoid }
.pd .sgn .ln { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 10pt }
.pd .sgn > div:last-child .ln { grid-template-columns: 1.6fr 1fr }
.pd .sgn > div { border: .6pt solid var(--ru); border-radius: 5pt; padding: 7pt 9pt 9pt }
.pd .sgn small { display: block; font-size: 7.6pt; color: var(--m); font-weight: 650 }
.pd .sgn i { display: block; border-bottom: .8pt solid var(--i); height: 22pt; margin: 2pt 0 10pt }
.pd .sgn .lab { font-size: 7.2pt; color: var(--m); margin-top: -8pt; margin-bottom: 4pt }
.pd .sgn img, .pd .sgn .sigimg { height: 34pt; max-width: 100%; display: block; margin: 4pt 0 -6pt; object-fit: contain; object-position: left bottom }
.pd .terms { columns: 2; column-gap: 15pt; font-size: 7.3pt; color: var(--i2); line-height: 1.5 }
.pd .terms p { break-inside: avoid; margin: 0 0 4pt }
.pd .notice { border: 1pt solid var(--i); border-radius: 4pt; padding: 6pt 8pt; font-size: 7.6pt; font-weight: 700; text-transform: uppercase; line-height: 1.4; margin-top: 6pt; break-inside: avoid }
.pd .pp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8pt }
.pd .signed { font: italic 600 15pt/1.4 Inter, 'Avenir Next', sans-serif; color: var(--nd); border-bottom: .8pt solid var(--i); padding: 4pt 0 2pt; margin: 2pt 0 10pt }
.pd .pp figure { margin: 0; break-inside: avoid } .pd .pp .im { aspect-ratio: 4/3; border-radius: 4pt; overflow: hidden; position: relative; background: #F1F4F8; border: .6pt solid var(--ru) }
.pd .pp img { display: block; width: 100%; height: 100%; object-fit: contain }
.pd .pp .tg { position: absolute; left: 5pt; top: 5pt; background: rgba(14,39,71,.86); color: #fff; font-size: 7pt; font-weight: 650; padding: 1pt 6pt; border-radius: 99px }
.pd .pp figcaption { font-size: 8pt; color: var(--i2); margin-top: 3pt }
.pd .stamp { position: absolute; right: 2.95in; top: 1.62in; transform: rotate(-8deg); border: 2pt solid #156B46; color: #156B46; border-radius: 5pt; padding: 2pt 9pt; font-weight: 700; font-size: 14pt; letter-spacing: .16em; background: rgba(255,255,255,.88) }
.pd .newpage { break-before: page }
/* The printed page is white to its foot (the screen's grey ground ended where the content did on the last page). */
html:has(.pd), html:has(.pd) body { background: #fff !important }
.pd u .nw { white-space: nowrap }
/* A section's heading never ends a page; its first rows go with it. */
.pd h2 { break-after: avoid; break-inside: avoid }
/* Only the client signs (Andre, 5 Oct 2026): the quote is our written offer, their signature accepts it. */
.pd .sgn.one { grid-template-columns: minmax(0, 1fr) }
.pd .sgn.one > div { max-width: 62% }
.pd .sgn .offered { grid-column: 1 / -1; margin: 2pt 0 0; font-size: 7.6pt; color: var(--m) }
/* One description a line, one list of steps for the document (5 Oct 2026). */
.d .li .tg2 { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 650; color: var(--navy); background: #E8EFF8; border-radius: 99px; padding: 2px 9px }
.d .how summary { cursor: pointer; color: var(--navy); font-weight: 650; font-size: 14.5px }
.d .how2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; margin-top: 12px; font-size: 14px; color: var(--ink2) }
.d .how2 h3 { margin: 0 0 6px; font-size: 13.5px; color: var(--ink) }
.d .how2 ol, .d .how2 ul { margin: 0; padding-left: 18px; display: grid; gap: 4px }
@media (max-width: 860px) { .d .how2 { grid-template-columns: 1fr } }
.pd .tg2 { display: inline-block; font-style: normal; margin-top: 2pt; font-size: 6.8pt; font-weight: 650; color: #1C4A86; background: #E8EFF8; border-radius: 99px; padding: 0 5pt }
.pd .how2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 6pt 16pt; font-size: 7.6pt; color: var(--i2); line-height: 1.45; break-inside: avoid }
.pd .how2 h4 { margin: 0 0 3pt; font-size: 7.6pt; color: var(--i); font-weight: 650 }
.pd .how2 ol, .pd .how2 ul { margin: 0; padding-left: 11pt }

/* A line's system and unit (6 Oct 2026, Andre: "very discrete"): one small grey line under its name. */
.d .li .sy { display: block; margin-top: 1px; font-size: 13px; line-height: 1.4; color: var(--mute); font-weight: 450 }
.pd .sy { display: block; font-size: 7pt; color: #6B7480; font-weight: 400; font-style: normal }

/* ══ Round 134 (Q-1425–Q-1433): the invoice the client keeps — Your visit, Charges with their photos and member prices,
   Units we worked on, Before and after, Your warranty, Signed, the terms folded. Quotes and proposals are untouched. ══ */
.d .paidmark { display: inline-flex; align-items: center; gap: 10px; margin: 16px 0 0; background: var(--okbg); color: var(--ok); border: 1px solid #CFE3D7; border-radius: 12px; padding: 9px 14px 9px 10px; font-size: 15px; font-weight: 550; line-height: 1.35 }
.d .paidmark b { font-weight: 700 }
.d .paidmark .ck, .d .save .sv { width: 24px; height: 24px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; flex: none }
.d .paidmark svg, .d .save svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round }

/* Your visit: what we found, what we did, what we recommend — three steps down one line */
.d ol.visit { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 }
.d .visit .vp { position: relative; padding: 0 0 20px 30px }
.d .visit .vp:last-child { padding-bottom: 0 }
.d .visit .vp::before { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--navy); background: #fff; box-sizing: border-box }
.d .visit .vp.did::before { background: var(--navy) }
.d .visit .vp::after { content: ""; position: absolute; left: 5px; top: 21px; bottom: 2px; width: 2px; background: var(--hair) }
.d .visit .vp:last-child::after { display: none }
.d .visit h3 { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--navy); letter-spacing: .005em }
.d .visit p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink); white-space: pre-line; max-width: 66ch }
.d .visit .vp.next p { background: #F5F8FD; border: 1px solid #DCE6F4; border-radius: 12px; padding: 12px 14px; margin-top: 6px }

/* a line's photo beside it, and a member's price */
.d .lph { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start }
.d .th { all: unset; box-sizing: border-box; display: block; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--rule); background: #F1F4F8; cursor: zoom-in }
.d .th img, .d .ph img { display: block; width: 100%; height: 100%; object-fit: cover }
.d .th:focus-visible, .d .ph:focus-visible, .d .zx:focus-visible, .d .tfold summary:focus-visible { outline: 3px solid #9BB8E3; outline-offset: 2px }
.d .li .amt .was { display: block; color: var(--mute); font-weight: 500; font-size: 13.5px; text-decoration-thickness: 1.5px }
.d .li .amt .now { display: block; color: var(--ok) }
.d .save { margin: 18px 0 0 auto; width: min(360px, 100%); display: flex; align-items: center; gap: 10px; background: var(--okbg); color: var(--ok); border-radius: 12px; padding: 11px 14px; font-size: 15px; font-weight: 550 }
.d .save b { font-weight: 700 }
.d .could { margin: 10px 0 0 auto; width: min(360px, 100%); text-align: right; font-size: 13.5px; color: var(--mute) }
.d .how.under { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--hair) }

/* units we worked on */
.d .units { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px }
.d .unit { border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; min-width: 0 }
.d .unit > b { display: block; font-size: 15px; font-weight: 650 }
.d .unit .mk { display: block; margin-top: 2px; font-size: 14px; color: var(--ink2); overflow-wrap: anywhere }
.d .unit .uc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }
.d .unit .ch { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--soft); color: var(--ink2); border: 1px solid var(--hair); line-height: 1.5 }
.d .unit .ch.ok, .d .unit .ch.green { background: var(--okbg); color: var(--ok); border-color: #CFE3D7 }
.d .unit .ch.amber { background: var(--warnbg); color: var(--warn); border-color: #F0D7AA }
.d .unit .ch.grey { background: var(--hair); color: var(--mute) }

/* before and after */
.d .ba { display: grid; gap: 16px }
.d .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.d .pair figure { margin: 0; min-width: 0 }
.d .ph { all: unset; box-sizing: border-box; display: block; width: 100%; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; background: #F1F4F8; border: 1px solid var(--rule); cursor: zoom-in }
.d .pair figcaption { margin-top: 7px; font-size: 13.5px; font-weight: 650; color: var(--ink2) }

/* the client's signature */
.d .sigbox { border: 1px solid var(--rule); border-radius: 12px; background: #FBFCFD; padding: 12px 18px; max-width: 420px }
.d .sigbox img { display: block; max-width: 100%; max-height: 96px; object-fit: contain }
.d .sigmeta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-top: 10px }
.d .sigmeta b { font-size: 15px; font-weight: 650 } .d .sigmeta span { font-size: 14px; color: var(--mute) }
.d .agreed { margin: 10px 0 0; font-size: 14px; color: var(--ink2); border-left: 3px solid var(--hair); padding-left: 12px; max-width: 66ch }

/* the terms, one fold */
.d .tfold summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.d .tfold summary span { font-size: 15px; font-weight: 700; color: var(--ink) }
.d .tfold summary small { font-size: 13.5px; color: var(--mute) }
.d .tfold ul { margin-top: 12px }

/* a photo, whole */
.d .zoom { position: fixed; inset: 0; z-index: 50; background: rgba(8,19,31,.9); display: grid; place-items: center; padding: 56px 16px 24px; animation: fdzoom .16s ease-out; cursor: zoom-out }
.d .zoom img { max-width: 100%; max-height: calc(100vh - 96px); border-radius: 8px; display: block }
.d .zoom .zx { all: unset; position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 14px; background: #fff; color: var(--ink); border-radius: 10px; padding: 8px 14px; font-weight: 650; font-size: 14px; cursor: pointer }
@keyframes fdzoom { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .d .zoom { animation: none } .d details > summary::before { transition: none } }
@media (max-width: 860px) {
  .d .paidmark { display: flex; font-size: 14.5px }
  .d .lph { grid-template-columns: 52px minmax(0, 1fr); gap: 12px }
  .d .th { width: 52px; height: 52px }
  .d .visit p { font-size: 15.5px }
  .d .units { grid-template-columns: 1fr }
  .d .save { width: 100% }
  .d .could { width: 100%; text-align: left }
}

/* the PDF's parts */
.pd .wk { display: grid; gap: 8pt; break-inside: avoid }
.pd .wk div { border-top: 1.6pt solid var(--n); padding-top: 4pt; font-size: 8.8pt; line-height: 1.5; color: var(--i2); white-space: pre-line; min-width: 0 }
.pd .wk b { display: block; color: var(--nd); font-size: 8pt; font-weight: 700; margin-bottom: 1.5pt; white-space: normal }
.pd .lph { display: grid; grid-template-columns: 0.48in minmax(0, 1fr); gap: 7pt; align-items: start }
.pd .lph img { width: 0.48in; height: 0.48in; object-fit: cover; border-radius: 3pt; border: .6pt solid var(--ru); display: block }
.pd s.was { display: block; color: var(--m); font-size: 7.4pt }
.pd .sv { margin: 7pt 0 0 auto; width: 2.9in; background: #E6F2EB; color: #156B46; font-size: 8.6pt; font-weight: 600; padding: 4pt 7pt; border-radius: 3pt; break-inside: avoid }
.pd .cw { margin: 4pt 0 0 auto; width: 2.9in; text-align: right; color: var(--m); font-size: 7.6pt }
.pd table.un td { font-size: 8.4pt }
.pd .mk { display: block; font-size: 7.4pt; font-weight: 600 } .pd .mk.green { color: #156B46 } .pd .mk.amber { color: #8F530A } .pd .mk.grey { color: var(--m) }
.pd .bap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6pt }
.pd .bap figure { margin: 0; break-inside: avoid }
.pd .bap .im { aspect-ratio: 4/3; border-radius: 4pt; overflow: hidden; position: relative; background: #F1F4F8; border: .6pt solid var(--ru) }
.pd .bap img { display: block; width: 100%; height: 100%; object-fit: cover }
.pd .bap .tg { position: absolute; left: 4pt; top: 4pt; background: rgba(14,39,71,.86); color: #fff; font-size: 7pt; font-weight: 650; padding: 1pt 6pt; border-radius: 99px }
.d .ghost[hidden] { display: none }
.d .li td, .d .unit, .d .sigmeta, .d .save, .d .could { text-wrap-style: pretty }
.d .ba { max-width: 620px }

/* Round 140: the quote the client signs — what changed since it was sent, You choose with photos and Recommended, Not chosen. */
.d .revised { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: #FFF6E8; color: #7A4A0B; font-size: 14px; line-height: 1.5; text-wrap-style: pretty }
.d .revised b { font-weight: 700 }
.d .visit + .photos { margin-top: 16px }
/* an option's photo sits beside its words, inside the one text column — the option's grid stays checkbox · words · amount */
.d .alt .ot { display: flex; gap: 12px; align-items: flex-start; min-width: 0 }
.d .alt .ot .oc { display: grid; gap: 2px; min-width: 0 }
.d .alt .oth { flex: none }
.d .alt .oth { width: 56px; height: 56px; padding: 0; border: .6pt solid var(--rule); border-radius: 8px; overflow: hidden; background: #F1F4F8; cursor: zoom-in }
.d .alt .oth img { display: block; width: 100%; height: 100%; object-fit: cover }
.d .alt .rec { font-style: normal; font-size: 11.5px; font-weight: 650; color: var(--ok); background: var(--okbg); border-radius: 99px; padding: 1px 8px; margin-left: 6px; vertical-align: 1px; white-space: nowrap }
.d .alt .qx { display: block; font-size: 13px; color: var(--mute) }
.d .alt .amt s.was { color: var(--mute); font-weight: 450; margin-right: 6px; font-size: 13px }
.pd .rv { margin: 6pt 0 0; padding: 5pt 8pt; border-radius: 4pt; background: #FFF6E8; color: #7A4A0B; font-size: 8.4pt }
.pd .yc tr.nc td { color: #8A94A3 }
.pd .yc tr.nc b { font-weight: 550 }
/* round 155: a status (Recommended, Optional, Added, Not chosen) and its price stay on one line */
.pd .yc td.r { white-space: nowrap }
@media (max-width: 560px) { .d .alt .oth { width: 48px; height: 48px } }
.d .alt.decided > span.ot { display: flex; gap: 12px; text-align: left }

/* ── Premium pass, batch 8 (live from 9 Nov with round 176; public/look.js sets data-look) ─────────────────────────────── */
/* A report's figure that is zero is not news: grey, never the alarm red or the attention amber on nothing. */
:root[data-look="new"] .d .glance .zero b, :root[data-look="new"] .pd .gl .zero b { color: #5A6676 }

/* Round 196 (Q-1952 A): a line's facts as a small two-column list, its steps of work folded under "What's included". */
.d .li .spec { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 14px; margin: 6px 0 0; font-size: 13px; line-height: 1.5 }
.d .li .spec dt { color: var(--mute) } .d .li .spec dd { margin: 0; color: var(--ink2); overflow-wrap: anywhere; font-variant-numeric: tabular-nums }
.d .li .incl { margin-top: 8px }
.d .li .incl summary { font-size: 13.5px; font-weight: 600; color: var(--navy) }
.d .li .incl ul, .d .li .incl-open { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--ink2); line-height: 1.55; max-width: 64ch }
.d .li .incl li::marker, .d .li .incl-open li::marker { color: var(--mute) }
.pd .spec { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 8pt; margin: 2pt 0 0; font-size: 7.6pt; line-height: 1.45 }
.pd .spec dt { color: var(--m) } .pd .spec dd { margin: 0 }
.pd ul.incl { columns: 2; column-gap: 14pt; margin: 4pt 0 0; padding-left: 10pt; font-size: 7.4pt; line-height: 1.45; color: var(--m) }
.pd ul.incl li { break-inside: avoid }

/* Round 196 (Q-1951 A): a quote of choices — one card an option, the picked one marked; the total follows the pick. */
.d .chs { display: grid; gap: 12px }
.d .chc { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; border: 1px solid var(--rule); border-radius: 12px; padding: 16px; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s }
.d .chc input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--navy) }
.d .chc.on { border-color: var(--navy); background: #F5F8FD; box-shadow: inset 0 0 0 1px var(--navy) }
.d .chc.locked, .d .chc.decided { cursor: default }
.d .chc.decided { grid-template-columns: auto minmax(0, 1fr) }
.d .chc.decided:not(.on) { opacity: .7 }
.d .chb { display: grid; gap: 2px; min-width: 0 }
.d .cht { display: flex; justify-content: space-between; gap: 14px; align-items: baseline }
.d .cht b { font-weight: 650; font-size: 15.5px; text-wrap: pretty }
.d .cht .amt { font-weight: 700; font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums }
.d .chc .spec { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 14px; margin: 8px 0 0; font-size: 13px; line-height: 1.5 }
.d .chc .spec dt { color: var(--mute) } .d .chc .spec dd { margin: 0; color: var(--ink2); overflow-wrap: anywhere; font-variant-numeric: tabular-nums }
.d .chc .ds { display: block; color: var(--ink2); font-size: 14px; margin-top: 6px; white-space: pre-line }
.d .chc .incl { margin-top: 10px }
.d .chc .incl summary { font-size: 13.5px; font-weight: 600; color: var(--navy) }
.d .chc .incl ul { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--ink2); line-height: 1.55 }
.pd .chn { margin: 0 0 4pt; font-size: 8pt; color: var(--m) }
.pd table.chp td.st { color: var(--m); font-size: 7.6pt; white-space: nowrap }
.pd table.chp tr.nc td { color: var(--m) } .pd table.chp tr.nc b { font-weight: 600 }

/* ══ Round 197 (Q-1958–Q-1964, every A): the PDF redesigned — a refined navy band with the brand rule under it, the title and
   what it costs on a thin blue rule, the facts as one row between hairlines, lines with their facts on one line and repeated
   steps said once, options as cards, the close (QR, warranty, signature) kept together, the terms flowing on. The page
   (.d) is untouched; these override the paper (.pd) rules above, shared with the report's PDF. ══ */
.pd { --nd: #0E2747; --n: #1C4A86; --r: #B5161E; --i: #0F1A2A; --i2: #3B4656; --m: #667284; --hr: #E4E8EE; --ru: #E4E8EE; --t: #F5F7FA; --ok2: #1F6B48;
  font: 400 8.6pt/1.5 Inter, 'Avenir Next', sans-serif; font-feature-settings: 'cv11', 'ss01'; font-optical-sizing: auto }
@page { size: Letter; margin: 0.5in 0 0.62in }
.pd b, .pd strong { font-weight: 600 }
.pd .px { padding: 0 0.6in }
.pd .band { background: var(--nd); padding: 0.42in 0.6in 0.3in; align-items: flex-end; gap: 24pt }
.pd .band::after { bottom: -2.5pt; height: 2.5pt; background: linear-gradient(90deg, var(--n) 0 72%, var(--r) 72% 100%) }
.pd .band img { height: 30pt }
.pd .band .co { font-size: 7.2pt; line-height: 1.55; margin-top: 8pt; color: rgba(255,255,255,.72) }
.pd .band .k small { font-size: 8pt; font-weight: 500; letter-spacing: .02em; color: rgba(255,255,255,.72) }
.pd .band .k b { font-size: 20pt; font-weight: 600; letter-spacing: -.02em }
.pd .chip { margin-top: 5pt; font-size: 7.2pt; font-weight: 600; padding: 2pt 8pt; border: 0; background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 .6pt rgba(255,255,255,.3) }
.pd .chip.ok { background: rgba(31,107,72,.9); color: #fff; box-shadow: none }
.pd .hero { grid-template-columns: minmax(0, 1fr) 2.15in; gap: 24pt; align-items: end; padding: 22pt 0.6in 0 }
.pd .hero h1 { font-size: 21pt; font-weight: 600; letter-spacing: -.022em; line-height: 1.15; text-wrap: balance }
.pd .hero p { margin: 4pt 0 0; color: var(--m); font-size: 8.6pt }
.pd .amt { background: none; border-radius: 0; border-left: 2pt solid var(--n); padding: 2pt 0 2pt 12pt }
.pd .amt span { font-size: 7.6pt; color: var(--m); font-weight: 500 }
.pd .amt b { font-size: 23pt; font-weight: 600; letter-spacing: -.025em; line-height: 1.12; color: var(--i); font-variant-numeric: tabular-nums }
.pd .amt i { font-size: 7.6pt; color: var(--i2) }
.pd .amt.ok { background: none; border-left-color: var(--ok2) } .pd .amt.ok b { color: var(--ok2) }
.pd .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 18pt 0.6in 0; padding: 0; border-top: 1px solid var(--hr); border-bottom: 1px solid var(--hr) }
.pd .facts div { background: none; border-radius: 0; padding: 9pt 12pt 9pt 0; font-size: 8.4pt }
.pd .facts div + div { padding-left: 12pt; border-left: 1px solid var(--hr) }
.pd .facts > div > span:first-child { font-size: 7pt; color: var(--m); font-weight: 500; margin-bottom: 2pt }
.pd .facts b { font-weight: 600 }
.pd h2 { gap: 8pt; align-items: baseline; margin: 22pt 0 8pt; font-size: 11pt; font-weight: 600; color: var(--i); letter-spacing: -.01em }
.pd h2::after { display: none }
.pd h2 em { font-size: 8pt; font-weight: 600; font-variant-numeric: tabular-nums }
.pd thead tr { background: none }
.pd thead th { color: var(--m); font-size: 7pt; font-weight: 600; padding: 0 0 5pt; border-bottom: 1px solid var(--i) }
.pd thead th + th, .pd td + td { padding-left: 10pt }
.pd td { padding: 9pt 0; border-bottom: 1px solid var(--hr) }
.pd td.r { font-variant-numeric: tabular-nums; color: var(--i2) } .pd td.r:last-child { color: var(--i) }
.pd td > b, .pd .lph b { font-size: 9.2pt; letter-spacing: -.005em; line-height: 1.35 }
.pd td small { font-size: 7.8pt; color: var(--i2); line-height: 1.5; margin-top: 3pt }
.pd tr.g td { background: var(--t); color: var(--i); font-size: 8pt; padding: 5pt 8pt }
.pd .sp { margin-top: 3pt; font-size: 7.8pt; color: var(--i2); line-height: 1.5 } .pd .sp i { font-style: normal; color: var(--m) }
/* Round 229 (P0): each fact keeps together but a fact longer than the cell wraps inside it, and the run breaks between
   facts — one unbreakable run of facts once pushed the line table three pages wide and cut off Qty, Price and Amount. */
.pd .sp .kv { display: inline-block; max-width: 100%; white-space: normal } .pd .sp .dt { color: #B7BFCB; padding: 0 1pt }
.pd td:first-child { overflow-wrap: anywhere } .pd td.r { white-space: nowrap }
.pd tr:has(ul.incl) { break-inside: auto }  /* a line with a long list may run onto the next page, never leave one half empty */
.pd .see { margin-top: 3pt; font-size: 7.6pt; color: var(--n); font-weight: 500 }
.pd ul.incl { columns: 2; column-gap: 16pt; display: block; margin: 4pt 0 0; padding: 0; font-size: 7.6pt; color: var(--i2); max-width: 4.3in }
.pd ul.incl li { padding-left: 9pt; line-height: 1.5 } .pd ul.incl li::before { top: 5pt; width: 3pt; height: 3pt; background: #9AA6B6 }
.pd .tt { margin: 10pt 0 0 auto; width: 2.6in; font-size: 8.6pt; font-variant-numeric: tabular-nums }
.pd .tt dt, .pd .tt dd { padding: 2pt 0 } .pd .tt dd { padding-left: 16pt }
.pd .tt .b { background: none; color: var(--i); font-size: 13pt; font-weight: 600; padding: 8pt 0 0; margin-top: 4pt; border-top: 1.2pt solid var(--i); border-radius: 0; letter-spacing: -.01em }
.pd .tt dd.b { padding-left: 16pt }
.pd .cw, .pd .chn { margin: 6pt 0 0; text-align: right; font-size: 7.6pt; color: var(--m) }
/* Q-1962: what a kind of line includes, said once */
.pd .inc { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10pt; margin-top: 14pt; break-inside: avoid }
.pd .inc > div { background: var(--t); border-radius: 6pt; padding: 11pt 13pt }
.pd .inc b { display: block; font-size: 8.2pt } .pd .inc small { display: block; font-size: 7pt; color: var(--m); margin-top: 1pt }
.pd .inc ul { display: block; columns: calc(3 - var(--n)); column-gap: 14pt; margin-top: 6pt; font-size: 7.5pt }
.pd .inc li { padding-left: 11pt; line-height: 1.55 }
.pd .inc li::before { top: 3.2pt; width: 4.5pt; height: 2.5pt; border-radius: 0; background: none; border-left: 1.1pt solid var(--ok2); border-bottom: 1.1pt solid var(--ok2); transform: rotate(-45deg) }
/* Q-1963: options as cards */
.pd .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10pt } .pd .opts.stack { grid-template-columns: 1fr }
.pd .opt { border: 1px solid var(--hr); border-radius: 6pt; padding: 12pt 13pt; break-inside: avoid; display: grid; gap: 5pt; align-content: start }
/* 24 Oct 2026 (the tester's fourth check): an option with a long scope may run on to the next page, so page 1 is never left
   with nothing under the facts; a numbered step heading bold on its own line. */
.pd .opt.long { break-inside: auto }
.pd b.stp, .d .ds b.stp { display: inline-block; margin-top: 5px; font-weight: 600; color: var(--ink, #0F1A2A) }
.pd .opt.on { border-color: var(--n); box-shadow: inset 0 0 0 .8pt var(--n) } .pd .opt.nc { opacity: .55 }
.pd .opt .ot { display: flex; justify-content: space-between; align-items: baseline; gap: 10pt } .pd .opt .ot small { font-size: 7pt; font-weight: 600; color: var(--m) }
.pd .opt .op { font-size: 15pt; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.pd .opt .opoff { display: block; margin: -2px 0 6px; text-align: right; font-size: 7.5pt; color: #5A6573 }   /* 24 Oct 2026: what the discount took off */
.pd .opt .on2 { font-size: 9.2pt; line-height: 1.35 }
.pd .opt dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 1pt 10pt; margin: 0; font-size: 7.8pt } .pd .opt dt { color: var(--m) } .pd .opt dd { margin: 0; overflow-wrap: anywhere }
.pd .opt small { display: block; font-size: 7.8pt; color: var(--i2) }
.pd .opt .box { display: flex; align-items: center; gap: 6pt; margin-top: 2pt; font-size: 7.6pt; color: var(--i2) } .pd .opt .box i { width: 9pt; height: 9pt; border: 1pt solid var(--i2); border-radius: 2pt }
.pd .opt .ck2 { color: var(--ok2); font-weight: 600 }
/* Q-1964: the close kept together */
.pd .end { break-inside: avoid }
.pd .close { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12pt; margin-top: 20pt; break-inside: avoid }
.pd .end h2 + .close { margin-top: 0 }
.pd .act { display: flex; gap: 12pt; align-items: center; background: none; border: 1px solid var(--hr); border-radius: 6pt; padding: 11pt 13pt }
.pd .act svg, .pd .act img { width: 62pt; height: 62pt; flex: none; border-radius: 0 }
.pd .act b { font-size: 9pt; color: var(--i) } .pd .act span { display: block; margin-top: 2pt; font-size: 7.6pt; color: var(--i2) }
.pd .act u { color: var(--n); font-weight: 600 }
.pd .war { display: grid; gap: 5pt; align-content: center; padding: 4pt 0 }
.pd .war div { display: grid; grid-template-columns: 9pt minmax(0, 1fr); gap: 6pt; font-size: 7.6pt; color: var(--i2) }
.pd .war div::before { content: ''; width: 5pt; height: 3pt; margin-top: 3.2pt; border-left: 1.1pt solid var(--ok2); border-bottom: 1.1pt solid var(--ok2); transform: rotate(-45deg) }
.pd .war b { color: var(--i) }
.pd .thanks { display: grid; gap: 3pt; align-content: center; font-size: 7.8pt; color: var(--i2); padding-left: 4pt } .pd .thanks b { font-size: 9pt; color: var(--i) }
.pd .end .sgn { margin-top: 14pt; grid-template-columns: 1fr }
.pd .sgn > div { border: 0; border-radius: 0; padding: 0 }
.pd .sgn small { font-size: 7pt; font-weight: 500 }
.pd .sgn .ln { grid-template-columns: 1.4fr 1fr .7fr; gap: 18pt; margin-top: 10pt }
.pd .sgn i { height: 22pt; border-bottom: 1px solid var(--i); margin: 0 0 4pt }
.pd .sgn .lab { margin: 0; font-size: 7pt; color: var(--m) }
.pd .offered { margin: 8pt 0 0; font-size: 7.2pt; color: var(--m) }
.pd .tm h2 { margin-top: 26pt }
.pd .terms { column-gap: 22pt; font-size: 7.2pt; line-height: 1.55 } .pd .terms p { margin: 0 0 7pt } .pd .terms b { color: var(--i) }
.pd .notice { border-radius: 4pt; padding: 7pt 9pt; margin-top: 10pt }
.pd div.cw, .pd p.chn { text-align: right; margin-left: auto; width: 2.6in }
.pd .tt { column-gap: 0; row-gap: 0 }
.pd .tt dt.b, .pd .tt dd.b { margin: 4pt 0 0; border-radius: 0 }

/* 24 Oct 2026 (the tester's fourth check): a photo that did not load. */
.img-gone { position: relative; background: var(--t, #F1F4F8) !important; min-height: 64px }
.img-gone::after { content: "Photo unavailable"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: #5A6573; text-align: center }
.sigbox.img-gone::after { content: "Signature on file" }

/* 24 Oct 2026 (the tester's fifth check): a choice's price after the discount on the client page too, what it took off under it. */
.d .chc .choff { display: block; margin: -2px 0 6px; text-align: right; font-size: 12.5px; color: var(--mute) }

/* Round 229 (Q-2310 A, [10]): one disclosure for the whole page — a chevron before the words, turned by the open state. */
.d details > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px }
.d details > summary::-webkit-details-marker { display: none }
.d details > summary::before { content: ""; flex: none; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .15s }
.d details[open] > summary::before { transform: rotate(45deg) }
.d .terms summary, .d .how summary, .d .cpn summary { color: var(--navy) }
.d .tfold summary { display: flex }

/* Round 229 (Q-2310 A): a long description drawn as sections — a heading and its lines. */
.d .dsx { max-width: 64ch }
.d .dsh { margin: 12px 0 0; font-size: 13.5px; font-weight: 650; color: var(--ink) } .d .dsx > .dsh:first-child { margin-top: 8px }
.d .dshp { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink2) }
.d .dshu { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: var(--ink2) } .d .dshu li::marker { color: var(--mute) }
.d .incl.scope { margin-top: 10px }
.d .incl.scope > summary { font-size: 13.5px; font-weight: 600; color: var(--navy) }
.d .chc .dsx, .d .chc .incl { margin-top: 8px }
.d .btn.flat { box-shadow: none }
.d .card .left { margin: 8px 0 0; text-align: center; font-size: 14px; color: var(--mute) }
.pd .dsec { margin-top: 3pt } .pd .dsec:first-child { margin-top: 0 }
.pd h4.pdh { margin: 3pt 0 0; font-size: 7.8pt; font-weight: 650; color: var(--i); line-height: 1.4 }
.pd p.pdhp { margin: 1pt 0 0; font-size: 7.6pt; line-height: 1.5; color: var(--i2) }
.pd ul.pdhu { columns: 1; margin: 1pt 0 0; padding: 0; font-size: 7.6pt; line-height: 1.5; color: var(--i2); list-style: none }
.pd ul.pdhu li { position: relative; padding-left: 9pt; break-inside: avoid } .pd ul.pdhu li::before { content: ""; position: absolute; left: 0; top: 5pt; width: 3pt; height: 3pt; border-radius: 50%; background: #9AA6B6 }
.pd .hero h1 { text-wrap: balance }

/* Round 229: on a phone a signed quote's option (its tag, its words, its price) was three squeezed columns — the tag and the
   price share the first line and the words take the whole width under them. */
@media (max-width: 560px) {
  .d .alt.decided { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px }
  .d .alt.decided > .chip { grid-column: 1; grid-row: 1; justify-self: start }
  .d .alt.decided > .amt { grid-column: 2; grid-row: 1; align-self: center }
  .d .alt.decided > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2 }
}


/* Round 229 (records pass) — the client's page. */
/* one photo is a larger tile, not a small one lost in an empty row */
.d .photos:has(> figure:only-child) { grid-template-columns: minmax(0, 460px) }
/* beside the rail, the bar does not say again what the rail says: its call and PDF buttons, and the number the head already carries */
@media (min-width: 840px) {
  .d:has(.contact-card) .appbar a.ghost[href^="tel"] { display: none }
  .d:has(.rail a[href*="/pdf"]) .appbar #fd-pdf { display: none }
  .d .appbar .who span { display: none }
}
/* the paper's preview on a screen keeps its own bottom margin, as the printed page does */
@media screen { .pd { padding-bottom: 0.5in } }

/* a button of the top bar is a 44-pixel target on a phone, whatever it holds */
@media (max-width: 640px) { .d .appbar .ghost { min-height: 44px; min-width: 44px; justify-content: center } }