/*
 * SHARED PAGE STYLE — Construction Profit Recovery
 * Built 2026-08-17. Mobile first (rule P-2: read at 6 a.m. on a phone).
 * Same palette as the calculator so the letter, the PURL and the diagnostic
 * look like one company rather than three.
 */
:root{
  /* PALETTE: green, grey, orange (owner decision, 19.08.2026).
     Green carries structure and the guarantee, grey carries everything
     secondary, and orange is reserved for one thing only — the next action.
     A colour that appears in two roles stops meaning either of them, which is
     why nothing else on the page is allowed to be orange. */
  --bg:#fff; --fg:#111820; --mut:#5c6672; --line:#e2e6eb; --soft:#f6f8f7;
  --acc:#14603f; --acc-d:#0f4a30;
  --low:#1d7a4c; --mod:#8a6100; --high:#a8480d; --crit:#a01c1c;
  /* Call to action. Orange because it is the one colour on the page that is
     not already carrying a meaning — the blue is structure, the green is the
     guarantee, the red is the draft banner. Contrast against white text is
     4.55:1 — still over the 4.5:1 WCAG AA floor, but only just, so this is
     as light as it can go while staying readable on a phone in daylight. Lighter
     oranges (#f97316, #ea580c) look better on a monitor and fail on a phone in
     daylight, which is where rule P-2 says this gets read. */
  --cta:#d04807; --cta-d:#b03d05;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
 font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 -webkit-text-size-adjust:100%}
.wrap{max-width:720px;margin:0 auto;padding:24px 18px 80px}

.staging{background:#fff5f5;border-bottom:2px solid #a01c1c;color:#6d1a1a;
 font-size:.82rem;padding:10px 0}
.staging .wrap{padding:0 18px}

header{padding:26px 0 20px;border-bottom:1px solid var(--line)}
.eyebrow{margin:0 0 8px;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
 color:var(--mut);font-weight:700}
h1{font-size:1.55rem;line-height:1.24;margin:0 0 12px;letter-spacing:-.015em}
h2{font-size:1.05rem;margin:0 0 10px;letter-spacing:-.005em}
.sub{color:var(--mut);margin:0;font-size:1.02rem}

.block{padding:24px 0;border-bottom:1px solid var(--line)}
.block p{margin:0 0 12px}
.block p:last-child{margin-bottom:0}
.src{color:var(--mut);font-size:.83rem;word-break:break-word}
.honest{background:var(--soft);border-left:3px solid var(--acc);padding:18px 16px;
 border-bottom:0;margin:24px 0 0}
.privacy{background:var(--soft);padding:18px 16px;border-bottom:0;margin:18px 0 0;
 border-radius:10px}

ul.plain{margin:0 0 18px;padding:0 0 0 20px}
ul.plain li{margin:0 0 8px}

.cta-block{padding:24px 0;border-bottom:1px solid var(--line)}
.btn{display:block;width:100%;text-align:center;padding:16px 20px;border:0;border-radius:9px;
 background:var(--cta);color:#fff;font-size:1.06rem;font-weight:700;cursor:pointer;
 text-decoration:none;box-shadow:0 1px 2px rgba(17,24,32,.18)}
.btn:hover{background:var(--cta-d)}
.btn.secondary{background:#fff;color:var(--acc);border:1px solid var(--acc);margin-top:10px}
.btn.secondary:hover{background:var(--soft)}
/* The disabled button keeps its orange (owner decision, 19.08.2026).
   Earlier versions faded it to 55% — which read as a badly chosen colour — and
   then greyed it, which read as broken. It now looks exactly like the live
   button, and the line underneath carries the "not live yet" information
   instead. That is safe while the page is an internal draft behind a noindex
   and a draft banner; it must be revisited before anything is published, since
   a full-strength button nobody can press is misleading to a real visitor. */
.btn[disabled],.btn.off{cursor:not-allowed;pointer-events:none}

footer{margin:40px 0 0;padding-top:16px;border-top:1px solid var(--line);
 color:var(--mut);font-size:.85rem}
footer p{margin:0 0 8px}

@media (min-width:620px){ h1{font-size:1.95rem} .wrap{padding:28px 20px 90px} }