/* Hero-only CEO proof surface (toggle via .hero[data-surface="ceo"]) */

.hero[data-surface="ceo"] {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  padding-inline: max(var(--space-lg), calc((100% - var(--max-width)) / 2));
  box-sizing: border-box;
  background: var(--dark-section-bg, var(--ink));
  color: var(--on-dark, #f0ece2);
  border-bottom-color: var(--on-dark-border, rgba(255, 255, 255, 0.14));
}

@media (max-width: 640px) {
  .hero[data-surface="ceo"] {
    padding: var(--space-lg) var(--page-margin-mobile);
  }
}

.hero[data-surface="ceo"] .eyebrow {
  color: var(--on-dark-faint, rgba(255, 255, 255, 0.52));
}

.hero[data-surface="ceo"] .eyebrow-rule {
  background: var(--gold);
}

.hero[data-surface="ceo"] .h1,
.hero[data-surface="ceo"] .hero-display {
  color: var(--on-dark, #f0ece2);
}

.hero[data-surface="ceo"] .hero-display em {
  color: inherit;
}

.hero[data-surface="ceo"] .hsub {
  color: var(--on-dark-muted, rgba(240, 236, 226, 0.78));
}

.hero[data-surface="ceo"] .btn-dark {
  background: var(--surface-cta-bg, var(--gold));
  color: var(--surface-cta-fg, var(--dark-section-bg, var(--ink)));
}

.hero[data-surface="ceo"] .venn,
.hero[data-surface="ceo"] .framework-venn {
  --venn-ink: var(--on-dark, #f0ece2);
  --venn-muted: var(--on-dark-faint, rgba(255, 255, 255, 0.52));
  --venn-ink-inv: var(--dark-section-bg, var(--ink));
}

.hero[data-surface="ceo"] .venn .lbl,
.hero[data-surface="ceo"] .framework-venn .lbl {
  fill: var(--on-dark, #f0ece2);
}

.hero[data-surface="ceo"] .venn .ctr,
.hero[data-surface="ceo"] .framework-venn .ctr {
  fill: var(--on-dark-faint, rgba(255, 255, 255, 0.52));
}

.hero[data-surface="ceo"] .venn .lbl-inv,
.hero[data-surface="ceo"] .framework-venn .lbl-inv {
  fill: var(--dark-section-bg, var(--ink));
}

.hero[data-surface="ceo"] .venn .ctr-inv,
.hero[data-surface="ceo"] .framework-venn .ctr-inv {
  fill: var(--dark-section-bg, var(--ink));
}