/* Proof cards (proof-row.js): real screenshots, every card visible, tap to enlarge. Money Magnets tokens. */
.pr-row { --pr-ink: var(--ink, #141412); --pr-mute: var(--muted, #5e5d59); --pr-line: var(--line, #dad6ce); --pr-o: var(--o60, #c2541d); }
.pr-h { font-weight: 800; font-size: 17px; line-height: 1.3; margin: 0 0 10px; color: var(--pr-ink); }
.pr-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pr-line); border-radius: 12px; overflow: hidden; color: var(--pr-ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.pr-card:hover, .pr-card:focus-visible { border-color: var(--pr-o); }
.pr-card:focus-visible { outline: 2px solid var(--pr-o); outline-offset: 2px; }
.pr-shot { position: relative; display: block; aspect-ratio: 16 / 10; background: #f4f2ee; border-bottom: 1px solid var(--pr-line); }
.pr-shot picture, .pr-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pr-zoom { position: absolute; right: 6px; bottom: 6px; font: 600 11px/1 var(--font, system-ui); background: rgba(20,20,18,.78); color: #fff; padding: 5px 8px; border-radius: 999px; }
.pr-txt { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px 11px; }
.pr-txt b { font-size: 19px; line-height: 1.15; font-weight: 900; letter-spacing: -.01em; }
.pr-txt span { font-size: 13.5px; line-height: 1.35; color: var(--pr-ink); }
.pr-txt small { font: 500 10.5px/1.3 var(--mono, ui-monospace, monospace); letter-spacing: .04em; text-transform: uppercase; color: var(--pr-o); margin-top: 4px; }
@media (min-width: 900px) {
  .pr-grid.pr-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pr-grid.pr-n5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pr-wide .pr-grid.pr-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pr-wide .pr-grid.pr-n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .pr-txt { padding: 7px 9px 9px; }
  .pr-txt b { font-size: 16px; }
  .pr-txt span { font-size: 12.5px; }
  .pr-zoom { font-size: 10px; padding: 4px 6px; }
}
/* The viewer */
.pr-view { border: 0; padding: 0; max-width: min(1100px, 96vw); width: 96vw; max-height: 92vh; background: #fff; border-radius: 14px; color: #141412; }
.pr-view::backdrop { background: rgba(20,20,18,.82); }
.pr-view .pv-in { padding: 14px; overflow: auto; max-height: 92vh; }
.pr-view .pv-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.pr-view .pv-note { margin: 0; font-size: 16px; line-height: 1.45; font-weight: 600; }
.pr-view .pv-x { flex: none; border: 1px solid #dad6ce; background: #f3eee6; border-radius: 999px; padding: 8px 14px; font-weight: 700; cursor: pointer; }
.pr-view img { display: block; width: 100%; height: auto; border: 1px solid #dad6ce; border-radius: 10px; margin-top: 10px; }
/* /build: the cards sit under the headline (left column on desktop, before the form on phones). */
.bl > .pr-row { margin: 0; }
@media (min-width: 900px) {
  .bl:has(> .pr-row) { grid-template-rows: auto auto auto 1fr; }
  .bl > .pr-row { grid-column: 1; }
  .bl:has(> .pr-row) > .form { grid-row: 1 / span 4; }
}
/* /workbook: straight under the form on phones (its first field stays above the fold, VERIFY 33); beside the form, under the mock-up, on desktop. */
body.has-hero .optin > .pr-row { grid-area: proof; margin: 0; }
body.has-hero .optin:has(> .pr-row) { grid-template-areas: "mock" "form" "proof" "pitch"; }
@media (min-width: 900px) {
  body.has-hero .optin:has(> .pr-row) { grid-template-areas: "mock form" "proof form" "pitch form"; grid-template-rows: auto auto 1fr; }
}
/* /scorecard: under the start card; gone once the quiz starts and on result pages. */
.pr-sc { max-width: 1080px; margin: 18px auto 40px; }
#start[style*="none"] ~ .pr-sc, body.result-mode .pr-sc { display: none; }
@media (max-width: 899px) {
  .pr-grid.pr-n3 > .pr-card:last-child, .pr-grid.pr-n5 > .pr-card:last-child { grid-column: 1 / -1; }
  .pr-grid.pr-n3 > .pr-card:last-child .pr-shot, .pr-grid.pr-n5 > .pr-card:last-child .pr-shot { aspect-ratio: 16 / 7; }
}
@media (min-width: 900px) {
  .pr-wb .pr-txt b { font-size: 16px; }
  .pr-wb .pr-txt span { font-size: 12.5px; }
}