/* Hammer & Pixel, the proof block and the Calendly block.
   Markup from scripts/proof-block.mjs (SPEC-proof-round-2026-10-29.md,
   sections 4 and 5). Linked after style.css on every page that shows either.
   Every rule is scoped under .proof or .cal so nothing leaks. The tokens are
   the trade-pages.css ones, with fallbacks for pages that do not load it.
   British English. No long dashes in this file. */

.proof{
  --pf-ink:var(--i-ink,#181818);
  --pf-ink-2:var(--i-ink-2,#54524e);
  --pf-accent:var(--i-accent-text,#8a5200);
  --pf-hair:var(--i-hair,rgba(24,24,24,.12));
  --pf-card:var(--card,#fcfcfb);
  --pf-r:var(--r,14px);
}

.proof .proof-two{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1rem,2.4vw,1.6rem);
  margin-top:1.7rem;align-items:start;
}
.proof .pf-card{
  background:var(--pf-card);border:1px solid var(--pf-hair);border-radius:var(--pf-r);
  padding:clamp(1.1rem,2.2vw,1.6rem);display:flex;flex-direction:column;min-width:0;
}
.proof .tag-live{align-self:flex-start}
/* The layout (Boss, 30 October 2026, option 2): the score card a slim
   strip across the top, then the results card with the four figures down
   the left and the two charts, as big as they will go, on the right. Below
   901px the wrappers step aside (display:contents) and every piece stacks in
   the order the phone rules below set. /scorecard/ has no score card, so
   there the results card stands alone. */
@media (min-width:901px){
  .proof .proof-score{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
    column-gap:clamp(1.2rem,2.4vw,1.8rem);row-gap:.9rem;
  }
  .proof .proof-score .tag-live{grid-column:1/-1;justify-self:start}
  .proof .proof-score .score-panel{margin-top:0}
  .proof .proof-score .proof-line{margin-top:0}
  .proof .proof-score .btn-row,.proof .proof-score .proof-checks{margin-top:0}
  .proof .pf-grid{
    display:grid;grid-template-columns:minmax(230px,3fr) minmax(0,9fr);
    gap:clamp(1rem,2vw,1.4rem);align-items:start;margin-top:.2rem;
  }
  .proof .pf-charts{grid-column:2;grid-row:1;min-width:0}
  .proof .pf-nums{grid-column:1;grid-row:1;min-width:0}
  .proof .pf-nums .proof-figs{grid-template-columns:minmax(0,1fr);margin-top:0}
}
@media (max-width:900px){
  .proof .pf-grid,.proof .pf-charts,.proof .pf-nums{display:contents}
}

/* The score, a slim dark strip (Boss, 29 Oct: slimmed, above all on phones). */
.proof .score-panel{
  display:flex;align-items:center;justify-content:center;gap:clamp(1rem,4vw,1.8rem);
  background:#181818;color:#fff;border-radius:var(--pf-r);padding:.9rem 1.1rem;
  margin-top:.2rem;
}
.proof .sp-num{font-size:clamp(2.4rem,2rem + 1.6vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.proof .sp-num small{font-size:1rem;font-weight:600;color:#b9b9b9;letter-spacing:0}
.proof .sp-new{color:#f5c842}
.proof .sp-col{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.proof .sp-label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#b9b9b9}
.proof .sp-label-new{color:#f5c842}
.proof .sp-arrow{color:#8a8a8a;display:flex;align-self:flex-end;padding-bottom:.35rem}
.proof .proof-line{margin-top:1.1rem;color:var(--pf-ink-2);line-height:1.55;max-width:44ch}
.proof .proof-score .btn-row{margin-top:1.3rem}
.proof .proof-checks{margin-top:.9rem;font-weight:640}
.proof .proof-checks a{color:var(--pf-accent);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:.6rem 0;margin:-.6rem 0}

/* The results: the two Search Console captures, then the four figures. */
.proof .proof-shot{margin:0 0 .9rem}
.proof .proof-shot a{display:block;border:1px solid var(--pf-hair);border-radius:10px;overflow:hidden;background:#fff}
.proof .proof-shot img{display:block;width:100%;height:auto}
.proof .proof-shot figcaption{margin-top:.45rem;font-size:.82rem;color:var(--pf-ink-2)}
.proof .proof-figs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin-top:1rem;
  list-style:none;padding:0;
}
.proof .proof-figs li{
  display:flex;flex-direction:column;gap:.25rem;padding:.75rem .8rem;
  border-radius:10px;background:rgba(245,200,66,.16);
}
.proof .proof-figs b{font-size:1.18rem;font-weight:800;letter-spacing:-.01em;color:var(--pf-ink);line-height:1.15}
.proof .proof-figs span{font-size:.86rem;color:var(--pf-ink-2);line-height:1.4}
.proof .proof-def{margin-top:.9rem;font-size:.9rem;color:var(--pf-ink);line-height:1.5}
.proof .proof-src{margin-top:.5rem;font-size:.84rem;color:var(--pf-ink-2);line-height:1.5}
.proof .proof-live{margin-top:.9rem;font-size:1.02rem;color:var(--pf-ink);line-height:1.5}
.proof .proof-live a{
  color:var(--pf-accent);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;padding:.6rem 0;margin:-.6rem 0;
}

/* The client quote and the offer to put a prospect in touch. */
.proof .proof-quote{
  margin:clamp(1.4rem,3vw,2rem) 0 0;padding:clamp(1.2rem,2.6vw,1.7rem) clamp(1.2rem,2.6vw,1.8rem);
  background:var(--pf-card);border:1px solid var(--pf-hair);border-left:4px solid #f5c842;border-radius:var(--pf-r);
}
.proof .proof-quote blockquote{margin:0}
.proof .proof-quote p{
  font-size:clamp(1.25rem,1rem + 1vw,1.6rem);font-weight:650;letter-spacing:-.01em;line-height:1.35;
  color:var(--pf-ink);max-width:40ch;
}
.proof .proof-quote figcaption{margin-top:.7rem;font-size:.9rem;font-weight:700;color:var(--pf-accent)}
.proof .proof-ask{margin-top:1rem;color:var(--pf-ink-2);line-height:1.55}
.proof .proof-ask a{
  color:var(--pf-accent);font-weight:700;text-decoration:underline;text-underline-offset:3px;
  display:inline-block;padding:.6rem 0;margin:-.6rem 0;
}

@media (max-width:900px){
  .proof .proof-two{grid-template-columns:1fr}
  .proof .proof-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* On a phone the four figures come before the two screenshots, which follow
   as the evidence to tap (Boss, 29 October 2026). */
@media (max-width:700px){
  .proof .proof-results .proof-figs{order:1;margin-top:.2rem}
  .proof .proof-results .proof-shot{order:2;margin-top:.9rem;margin-bottom:0}
  .proof .proof-results .proof-def{order:3}
  .proof .proof-results .proof-src{order:4}
  .proof .proof-results .proof-live{order:5}
}

/* ---------- Calendly, click to load ---------- */
.cal{
  margin-top:1.8rem;scroll-margin-top:6rem;padding-top:1.5rem;border-top:1px solid var(--i-hair-soft,rgba(24,24,24,.07));
}
.cal .cal-lede{font-weight:700;font-size:1.08rem;color:var(--i-ink,#181818);margin-bottom:.8rem}
.cal .cal-open{min-height:46px}
.cal .cal-note{margin-top:.7rem;font-size:.86rem;color:var(--i-ink-2,#54524e)}
.cal .cal-alt{margin-top:.6rem;font-size:.86rem}
.cal .cal-alt a{color:var(--i-accent-text,#8a5200);font-weight:640;display:inline-block;padding:.6rem 0;margin:-.6rem 0}
.cal .cal-frame{
  display:block;width:100%;height:700px;border:1px solid var(--i-hair,rgba(24,24,24,.12));
  border-radius:var(--r,14px);background:#fff;
}

/* ---------- the screenshot window (/assets/lightbox.js) ---------- */
.lb{
  width:min(96vw,1500px);max-width:none;max-height:92vh;padding:0;border:0;border-radius:14px;
  background:#fcfcfb;color:#181818;box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden;
}
.lb::backdrop{background:rgba(12,12,12,.78)}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .6rem .5rem 1rem;border-bottom:1px solid rgba(24,24,24,.1)}
.lb-cap{font-size:.9rem;font-weight:650;color:#181818;margin:0}
.lb-close{
  min-height:44px;min-width:44px;padding:0 1rem;border-radius:999px;border:1px solid rgba(24,24,24,.18);
  background:#181818;color:#fff;font:inherit;font-weight:700;cursor:pointer;flex:none;
}
.lb-close:focus-visible{outline:2px solid #8a5200;outline-offset:3px}
.lb-tabs{display:flex;gap:.5rem;padding:.6rem 1rem 0}
.lb-tabs[hidden]{display:none}
.lb-tab{
  min-height:44px;padding:0 1.1rem;border-radius:999px;border:1px solid rgba(24,24,24,.18);
  background:#fff;color:#181818;font:inherit;font-weight:700;cursor:pointer;
}
.lb-tab[aria-pressed="true"]{background:#f5c842;border-color:#f5c842}
.lb-tab:focus-visible{outline:2px solid #8a5200;outline-offset:3px}
.lb-scroll{overflow:auto;-webkit-overflow-scrolling:touch;margin-top:.6rem}
/* The whole chart always shows, first day to last: fitted to the width, and
   to the height on a phone turned sideways. */
.lb-scroll img{display:block;width:100%;height:auto;max-height:calc(92vh - 8rem);object-fit:contain}
.lb-hint{display:none;margin:0;padding:.55rem 1rem .7rem;font-size:.84rem;color:#54524e}
@media (max-width:700px) and (orientation:portrait){
  .lb-hint{display:block}
}