/* Subpage hero proof card: the page's hero text on the left, a card on the
 * right with pages from the sample report (img/hero/, rendered by
 * scripts/gen-report-thumbs.py) and the signed-report line. Mirrors the
 * homepage .proof-card. Below 1100px the card drops under the CTAs, compact.
 * Uses the design tokens each page defines in :root. */
.page-hero .wrap.hv { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 3.5rem; align-items: center; }
/* The text column is ~760px instead of the full wrap: scale the h1 to keep it to three lines. */
.page-hero .wrap.hv h1.page-h1 { font-size: clamp(2.4rem, 4.2vw, 3.5rem); }
.hv-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem 1.75rem; display: flex; flex-direction: column; box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
.hv-k { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .2rem; }
.hv-report, .hv-row { text-decoration: none; color: var(--text-mid); font-size: .85rem; line-height: 1.5; border-bottom: 1px solid var(--border); }
.hv-report { display: block; padding-bottom: 1rem; }
.hv-report img { display: block; width: 100%; height: auto; margin-bottom: .75rem; transition: transform .2s; }
.hv-report:hover img { transform: translateY(-2px); }
.hv-row { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem 0 0; border-bottom: none; }
.hv-row > svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: .1rem; }
.hv-report:hover .hv-cap, .hv-row:hover > span { color: var(--accent); }

/* Code variant (vibe-coded pages): a request and its leaking response. */
.hv-code { margin: 0 0 .75rem; background: var(--ink); color: #e8e6e0; border-radius: 10px; padding: 1rem 1.1rem; font-family: var(--mono); font-size: .68rem; line-height: 1.65; white-space: pre-wrap; word-break: break-word; overflow: hidden; }
.hv-code .m { color: #8fa6ff; }
.hv-code .ok { color: #6fd08c; }
.hv-code .dim { color: #8a887f; }
.hv-code .leak { color: #ff8a7a; }

@media (max-width: 1100px) {
  .page-hero .wrap.hv { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hv-card { max-width: 560px; padding: 1.25rem; }
  .hv-report { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 1rem; align-items: center; }
  .hv-cap { hyphens: auto; overflow-wrap: break-word; }
  .hv-report img { margin-bottom: 0; }
  .hv-report.hv-coded { display: block; }
  .hv-report.hv-coded .hv-code { margin-bottom: .75rem; }
}