/* Question pages (/claude-code-sales-systems/, /call-scoring/, /crm-cleanup/, /pipedrive-consultant/,
   /fractional-revops-san-diego/). Each answers one buyer question in its first paragraph, shows the
   work in one visual (that page's own CSS), proves it with ledger numbers, then ends on the wall.
   Loads after site.css. */
.ans { padding-top: clamp(104px, 14vh, 150px); }
.kicker { display: block; margin: 0 0 18px; }
.sec-h { margin: 0 0 22px; font: 700 1.25rem/1.25 "Bricolage Grotesque", sans-serif; color: var(--text-primary); }

/* Hero: the statement and the answer. .split puts the visual beside it on wide screens. */
.ans-hero .statement > span { display: block; }
.ans-hero .lede { margin-top: 22px; max-width: 50ch; font-size: 1.12rem; color: var(--text-primary); opacity: .9; }
.ans-hero.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; }

/* The visual: one per page. Its caption is small mono under it. */
.show { margin-top: clamp(56px, 9vh, 104px); }
.show figcaption, .cap { margin-top: 16px; }

/* Proof: big numbers with their labels, About's stat band */
.proofs-sec { margin-top: clamp(64px, 10vh, 112px); }
.proofs { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pf { padding: 28px 24px 26px 0; }
.pf + .pf { padding-left: 24px; border-left: 1px solid var(--line-dim); }
.pf b { display: block; font: 800 clamp(2.6rem, 4.2vw, 4.2rem)/.9 "Big Shoulders", sans-serif; font-variation-settings: "opsz" 72; color: var(--text-primary); white-space: nowrap; }
.pf span { display: block; margin-top: 12px; font-size: .92rem; line-height: 1.45; color: var(--text-secondary); max-width: 32ch; }
.pf a { display: inline-block; margin-top: 12px; font: 600 .88rem/1 "Instrument Sans", sans-serif; color: var(--text-primary); text-decoration: none; }
.pf a::after { content: " \2192"; }
.pf a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* How it works: 3 steps, one line each */
.how { margin-top: clamp(64px, 10vh, 112px); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.steps li { border: 1px solid var(--line); border-radius: 8px; padding: 22px 22px 24px; }
.steps .n { font: 700 .78rem/1 "JetBrains Mono", monospace; color: var(--text-muted); }
.steps strong { display: block; margin: 18px 0 6px; font: 700 1.1rem/1.3 "Bricolage Grotesque", sans-serif; color: var(--text-primary); }
.steps p { margin: 0; color: var(--text-secondary); line-height: 1.5; }

.ans-next { padding-top: clamp(72px, 12vh, 128px); --wall-h: clamp(420px, 60vh, 620px); }

@media (max-width: 960px) {
  .ans-hero.split { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .proofs { grid-template-columns: 1fr; }
  .pf, .pf + .pf { padding: 22px 0; border-left: 0; }
  .pf + .pf { border-top: 1px solid var(--line-dim); }
  .pf b { font-size: 2.6rem; }
  .ans-next { --wall-h: 560px; }
}