/* g-proof — Proof category (stats | testimonial). v3.41.0.
   Dual skeleton: CSS shows only the layout matching the projected
   `ssla-g-proof--layout-{value}` wrapper class; default (no class) = stats.
   Squared UI (no border-radius) per the suite design rule. */

.ssla-g-proof {
  background: var(--g-proof-bg, var(--shell-bg, #ffffff));
  color: var(--g-proof-fg, var(--shell-fg, #1a1a1a));
  padding: var(--g-proof-section-padding, 72px 24px);
}
.ssla-g-proof-inner {
  max-width: var(--g-proof-content-max-width, 1080px);
  margin: 0 auto;
}

/* ── Layout gating ── */
.ssla-g-proof-testimonial { display: none; }
.ssla-g-proof--layout-testimonial .ssla-g-proof-stats { display: none; }
.ssla-g-proof--layout-testimonial .ssla-g-proof-testimonial { display: block; }

/* ── Stats layout ── */
.ssla-g-proof-head { text-align: center; margin-bottom: 40px; }
.ssla-g-proof-eyebrow {
  display: block;
  font: 700 11px/1.2 var(--g-proof-body-family, var(--shell-bf, system-ui));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--g-proof-eyebrow, var(--brand-accent, #b01e1e));
  margin-bottom: 8px;
}
.ssla-g-proof-eyebrow:empty, .ssla-g-proof-heading:empty { display: none; }
.ssla-g-proof-heading {
  font: 600 clamp(24px, 3vw, 34px)/1.2 var(--g-proof-heading-family, var(--shell-hf, system-ui));
  color: var(--g-proof-heading, inherit);
  margin: 0;
}
.ssla-g-proof-grid {
  display: grid;
  gap: var(--g-proof-gap, 32px);
  grid-template-columns: repeat(4, 1fr);
}
.ssla-g-proof--count-three .ssla-g-proof-grid { grid-template-columns: repeat(3, 1fr); }
.ssla-g-proof--count-five  .ssla-g-proof-grid { grid-template-columns: repeat(5, 1fr); }
/* v3.41.10 (PL008) — show exactly the active count of stats; extras from a later
   count-decrease hide non-destructively so the editor updates live (no reload).
   Default = four. */
.ssla-g-proof-grid > .ssla-g-proof-cell:nth-child(n+5) { display: none; }
.ssla-g-proof--count-three .ssla-g-proof-grid > .ssla-g-proof-cell:nth-child(n+4) { display: none; }
.ssla-g-proof--count-five  .ssla-g-proof-grid > .ssla-g-proof-cell:nth-child(5) { display: block; }
@media (max-width: 720px) { .ssla-g-proof-grid { grid-template-columns: repeat(2, 1fr); } }
.ssla-g-proof-cell { text-align: center; }
.ssla-g-proof-value {
  font: 700 var(--g-proof-value-size, 44px)/1 var(--g-proof-heading-family, var(--shell-hf, system-ui));
  color: var(--g-proof-value, inherit);
}
.ssla-g-proof-label {
  font: 600 15px/1.3 var(--g-proof-body-family, var(--shell-bf, system-ui));
  color: var(--g-proof-label, inherit);
  margin-top: 8px;
}
.ssla-g-proof-caption {
  font: 400 13px/1.4 var(--g-proof-body-family, var(--shell-bf, system-ui));
  opacity: 0.7;
  margin-top: 4px;
}
.ssla-g-proof-caption:empty { display: none; }

/* ── Testimonial layout ── */
.ssla-g-proof-testimonial { text-align: center; max-width: 760px; margin: 0 auto; }
.ssla-g-proof-avatar {
  width: 64px; height: 64px;
  margin: 0 auto 20px;
  overflow: hidden; /* squared — no border-radius */
}
.ssla-g-proof-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ssla-g-proof-avatar:empty { display: none; }
.ssla-g-proof-quote {
  font: 400 clamp(20px, 2.6vw, 28px)/1.4 var(--g-proof-quote-family, var(--shell-hf, system-ui));
  color: var(--g-proof-quote, inherit);
  margin: 0 0 20px;
}
.ssla-g-proof-attrib { font: 400 15px/1.5 var(--g-proof-body-family, var(--shell-bf, system-ui)); }
.ssla-g-proof-author { font-weight: 700; color: var(--g-proof-author, inherit); }
.ssla-g-proof-role::before, .ssla-g-proof-company::before { content: " · "; opacity: 0.5; }
.ssla-g-proof-role:empty, .ssla-g-proof-company:empty { display: none; }
.ssla-g-proof-role:empty::before, .ssla-g-proof-company:empty::before { content: ""; }

/* ── Tone ── */
/* v3.41.09 — tone-light (the DEFAULT) must set --g-proof-bg explicitly. Like
   g-hero, g-proof drives its surface from its own --g-proof-bg with a --shell-bg
   fallback; without a light-tone rule the default fell back to --shell-bg, which
   flips to a dark value inside a dark-shell scope → a light-tone proof section
   rendered dark. Every tone now pins its own surface (parity with g-hero .05). */
.ssla-g-proof--tone-light { --g-proof-bg: #ffffff; --g-proof-fg: #1a1a1a; }
.ssla-g-proof--tone-dark  { --g-proof-bg: #1a1a1a; --g-proof-fg: #f5f5f5; }
.ssla-g-proof--tone-accent { --g-proof-bg: var(--preset-accent-surface, #f7f3ec); }

/* ── Format (density) — minimal strips secondary elements, standard = base (all
   visible), rich amplifies. Applies across both layouts. ── */
.ssla-g-proof--density-minimal .ssla-g-proof-eyebrow,
.ssla-g-proof--density-minimal .ssla-g-proof-caption,
.ssla-g-proof--density-minimal .ssla-g-proof-avatar,
.ssla-g-proof--density-minimal .ssla-g-proof-role,
.ssla-g-proof--density-minimal .ssla-g-proof-company { display: none; }
.ssla-g-proof--density-rich .ssla-g-proof-value { --g-proof-value-size: 56px; }
.ssla-g-proof--density-rich .ssla-g-proof-grid  { --g-proof-gap: 48px; }
.ssla-g-proof--density-rich .ssla-g-proof-quote { font-size: clamp(24px, 3vw, 34px); }