/* The problem pages (components/problem/ProblemPage): a sheet hero with the question, sheet sections below. Tokens only; the real before/after side by side from 700px, stacked on a phone. */
main[data-page^="problem-"] .lead { font-size: 18px; max-width: 46rem; }
main[data-page^="problem-"] code { font-family: var(--vit-f-mono); direction: ltr; unicode-bidi: isolate; }
main[data-page^="problem-"] .ba-pair { display: grid; grid-template-columns: 1fr; gap: var(--vit-space-4); margin: var(--vit-space-4) 0; }
@media (min-width: 700px) { main[data-page^="problem-"] .ba-pair { grid-template-columns: 1fr 1fr; } }
main[data-page^="problem-"] .ba-pair figure { margin: 0; border: 1.5px solid var(--vit-ink); background: var(--vit-paper); }
main[data-page^="problem-"] .ba-pair img { display: block; width: 100%; height: auto; }
main[data-page^="problem-"] .ba-pair figcaption { padding: 6px var(--vit-space-3); border-top: 1.5px solid var(--vit-ink); font-family: var(--vit-f-heb); font-size: 14px; font-weight: 500; background: var(--vit-paper-2); }
main[data-page^="problem-"] .amount { font-family: var(--vit-f-display); font-size: clamp(36px, 6vw, 52px); line-height: 1.05; margin: 0; }
main[data-page^="problem-"] .amount [data-price] { font-size: inherit; }
main[data-page^="problem-"] .solo-name { margin: var(--vit-space-2) 0 var(--vit-space-3); color: var(--vit-ink-2); }
main[data-page^="problem-"] .actions { display: flex; flex-wrap: wrap; gap: var(--vit-space-3); align-items: center; margin: var(--vit-space-3) 0; }
main[data-page^="problem-"] .actions [data-cta] { margin: 0; }
main[data-page^="problem-"] .related { margin: 0; padding-inline-start: 1.2em; }

/* the merged "why a manual fix doesn't last" section: three short blocks, each keeps its own anchor id */
.sub-block + .sub-block { margin-top: var(--vit-space-4); }
.sub-block > h3 { margin: 0 0 var(--vit-space-1); font-size: 1.05rem; }