/* The proof page: what is built, what is tested, and what is not.
   Its job is to be checkable, so it leans on the mono face and keeps the
   test output verbatim rather than paraphrasing it into marketing. */

.pf-head { background: var(--band); color: var(--on-band); padding: 52px 0 60px; }
.pf-in { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.pf-head .k { color: var(--accent-lift); }
.pf-head h1 {
  margin: 14px 0 0; font-size: clamp(34px, 5vw, 54px); line-height: 1.04;
  letter-spacing: -.035em; font-weight: 700;
}
.pf-head p { margin: 16px 0 0; max-width: 60ch; color: var(--on-band-2); font-size: 17px; line-height: 1.6; }

/* the count, stated before the detail */
.pf-figs {
  max-width: var(--wrap); margin: -30px auto 0; padding: 0 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.pf-fig {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px;
}
.pf-fig b { display: block; font-size: 26px; letter-spacing: -.03em; color: var(--ink); }
.pf-fig span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.pf-fig.is-zero b { color: var(--down); }

.pf-body { max-width: var(--wrap); margin: 0 auto; padding: 56px 24px 72px; }
.pf-sec + .pf-sec { margin-top: 52px; }
.pf-sec > h2 {
  margin: 0 0 6px; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.03em; color: var(--ink);
}
.pf-sec > p.pf-lead { margin: 0 0 22px; color: var(--muted); font-size: 16px; line-height: 1.65; max-width: 68ch; }

/* one claim, and the assertions that hold it */
.pf-claim {
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  overflow: hidden;
}
.pf-claim + .pf-claim { margin-top: 12px; }
.pf-claim-h { padding: 18px 20px 14px; }
.pf-claim-n {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.pf-claim-h h3 { margin: 7px 0 0; font-size: 18.5px; letter-spacing: -.02em; color: var(--ink); }
.pf-claim-h p { margin: 8px 0 0; color: var(--muted); font-size: 14.6px; line-height: 1.6; max-width: 70ch; }

/* the output, unedited */
.pf-out {
  margin: 0; padding: 14px 20px 16px; border-top: 1px dashed var(--dash);
  background: var(--bg);
  font-family: var(--mono); font-size: 12.1px; line-height: 1.85; color: var(--ink);
  overflow-x: auto; white-space: pre;
}
.pf-out .ok { color: #2E7D54; }
.pf-out .dim { color: var(--dim); }
.pf-file {
  display: block; margin-top: 10px; font-family: var(--mono); font-size: 11.4px;
  color: var(--dim); letter-spacing: .02em;
}

/* the honest column */
.pf-not { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 6px 20px; }
.pf-not li { list-style: none; padding: 14px 0; border-bottom: 1px dashed var(--dash); }
.pf-not li:last-child { border-bottom: 0; }
.pf-not b { display: block; font-size: 15.5px; color: var(--ink); }
.pf-not span { display: block; margin-top: 4px; font-size: 14.2px; color: var(--muted); line-height: 1.6; }
.pf-not .pf-tag {
  display: inline-block; margin-bottom: 7px; padding: 2px 8px; border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  background: #F6DEDC; color: #8A2B22; border: 1px solid #ECC7C3;
}

.pf-run {
  background: var(--band); color: var(--on-band); border-radius: 14px; padding: 22px 24px;
}
.pf-run h3 { margin: 0 0 4px; font-size: 17px; letter-spacing: -.02em; }
.pf-run p { margin: 0 0 14px; color: var(--on-band-2); font-size: 14.4px; }
.pf-run pre {
  margin: 0; padding: 14px 16px; border-radius: 10px; overflow-x: auto;
  background: rgba(0,0,0,.22); border: 1px solid var(--band-line);
  font-family: var(--mono); font-size: 12.4px; line-height: 1.9; color: var(--on-band);
}
.pf-run pre .c { color: var(--on-band-2); }

@media (max-width: 860px) {
  .pf-figs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .pf-out { font-size: 11.2px; }
}