/* =========================================================================
   cisos.css — CISOs Connect web layout
   Loaded alongside /css/system/design-tokens.css to get the production
   palette (cover purple #211047, teal #00D4AA, Inter / Source Serif 4 /
   JetBrains Mono). Page-specific overrides allowed; new components
   should be promoted here, not inlined.

   Visual posture: "serious research, calm authority."
   Editorial, restrained, near-square corners, generous whitespace.
   ========================================================================= */

/* CISOs-scoped WCAG AA fix (T7a QA gate, TD-CISOS-ACCENT-INK-CONTRAST-001).
   The shared --color-accent-ink (#008E72, design-tokens.css) measures 4.11:1
   on white -- fails AA's 4.5:1 for the sub-14px text it's used at here
   (eyebrows, small links, form status). Rather than changing the SHARED
   token (used sitewide beyond CISOs, a brand-color call out of this
   campaign's scope), this CISOs-only override darkens it to 5.31:1 while
   staying in the same teal hue family. Swap-back is a one-line revert if a
   future brand pass wants a per-context size/weight fix instead. */
:root { --cc-accent-ink-aa: #007A61; }
/* Same fix, second shared token: --color-ink-subtle (#718096, 4.02:1 on
   white -- fails AA at the 11-12px sizes it's used at for footnotes/meta
   text here). cisos.css loads after design-tokens.css so this :root
   override wins the cascade on CISOs pages only, without touching the
   shared file or any non-CISOs consumer of it. */
:root { --color-ink-subtle: #5A6779; }

/* ---- 1. RESET & BASE ---------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-ink, #0A1628);
  background: var(--color-surface, #FFFFFF);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; display: block; }
a {
  color: var(--cc-accent-ink-aa, #007A61);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
a:hover { border-bottom-color: var(--cc-accent-ink-aa, #007A61); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans, "Inter", sans-serif);
  color: var(--color-primary, #211047);
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-weight: 600;
}

/* ---- 2. LAYOUT PRIMITIVES ---------------------------------------------- */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

.container--narrow { max-width: 880px; }

.band {
  padding: 96px 0;
}
.band--alt { background: var(--color-surface-alt, #F7FAFC); }
.band--dark {
  background: var(--color-primary, #211047);
  color: var(--color-primary-on, #FFFFFF);
}
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 {
  color: var(--color-primary-on, #FFFFFF);
}
/* T4e — dark-shell content overrides. Everything below fixes real contrast
   failures against the #211047 band, not just style preference: the base
   .section-header p (#4A5568, 2.27:1), .cc-form label (#211047, 1:1 —
   invisible), .cc-form__status--pending/error (3.59:1 / 2.61:1) and the
   default link/card colors all fail WCAG AA on a dark band without this. */
.band--dark .section-header h2 + p,
.band--dark .prose,
.band--dark p { color: rgba(255,255,255,0.85); }
.band--dark .prose a,
.band--dark a:not(.btn) { color: var(--color-accent, #00D4AA); border-bottom-color: transparent; }
.band--dark .prose a:hover,
.band--dark a:not(.btn):hover { border-bottom-color: var(--color-accent, #00D4AA); }
.band--dark .cc-form label { color: rgba(255,255,255,0.85); }
.band--dark .cc-form__status--pending { color: rgba(255,255,255,0.65); }
.band--dark .cc-form__status--success { color: var(--color-accent, #00D4AA); }
.band--dark .cc-form__status--error { color: #FF6B5E; }
.band--dark .card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15); }
.band--dark .card h3 { color: #FFFFFF; }
.band--dark .card__eyebrow { color: var(--color-accent, #00D4AA); }
.band--dark .card__footer a { color: var(--color-accent, #00D4AA); border-bottom-color: var(--color-accent, #00D4AA); }
/* T7a QA gate: .card__footer's plain text (not the link) still inherited
   the base --color-ink-subtle, which the CISOs :root override above tuned
   for LIGHT surfaces -- on a dark card that pairing drops to 2.6:1. */
.band--dark .card__footer { color: rgba(255,255,255,0.65); }
.band--tight { padding: 56px 0; }

@media (max-width: 720px) {
  .band { padding: 64px 0; }
  .band--tight { padding: 40px 0; }
}

/* ---- 3. EYEBROWS & SECTION HEADERS ------------------------------------- */

.eyebrow {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--cc-accent-ink-aa, #007A61);
}
.band--dark .eyebrow { color: var(--color-accent, #00D4AA); }

.section-header {
  margin-bottom: 56px;
  max-width: 760px;
}
.section-header .eyebrow { display: block; margin-bottom: 14px; }
.section-header h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  margin-bottom: 18px;
}
.section-header h2 + p {
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--color-ink-muted, #4A5568);
}

/* ---- 4. NAVIGATION ----------------------------------------------------- */

.cc-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface, #FFFFFF);
  border-bottom: 1px solid var(--color-rule, #E2E8F0);
}
.cc-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}
.cc-nav__brand {
  display: flex;
  align-items: center;
  color: var(--color-primary, #211047);
}
.cc-nav__brand:hover { border-bottom-color: transparent; }
/* Typographic SVG wordmark (D2) -- single canonical source at
   assets/logos/cisos-connect-wordmark.svg; inlined per-instance below so it
   can pick up currentColor from .cc-nav__brand / .cc-footer__brand. */
.cc-brand-svg { height: 30px; width: auto; display: block; color: inherit; }
.cc-footer__brand .cc-brand-svg { height: 26px; }
.cc-nav__tm {
  font-size: 0.6em;
  vertical-align: super;
  color: var(--color-ink-muted, #4A5568);
  margin-left: 2px;
}
.cc-nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}
.cc-nav__links a {
  color: var(--color-ink, #0A1628);
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 0.95rem;
  font-weight: 500;
  border-bottom-color: transparent;
}
.cc-nav__links a:hover { color: var(--cc-accent-ink-aa, #007A61); border-bottom-color: transparent; }
.cc-nav__links a[aria-current="page"] {
  color: var(--color-primary, #211047);
  border-bottom: 2px solid var(--color-accent, #00D4AA);
  padding-bottom: 2px;
}
.cc-nav__parent {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-ink-subtle, #718096);
  border-bottom: none;
}
.cc-nav__parent:hover { color: var(--color-ink-muted, #4A5568); border-bottom: none; }

.cc-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.cc-nav__toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-primary, #211047);
  position: relative;
  transition: background 0.15s ease;
}
.cc-nav__toggle-bar::before,
.cc-nav__toggle-bar::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--color-primary, #211047);
  transition: transform 0.15s ease;
}
.cc-nav__toggle-bar::before { top: -7px; }
.cc-nav__toggle-bar::after { top: 7px; }
.cc-nav--open .cc-nav__toggle-bar { background: transparent; }
.cc-nav--open .cc-nav__toggle-bar::before { transform: translateY(7px) rotate(45deg); }
.cc-nav--open .cc-nav__toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .cc-nav__toggle { display: flex; }
  .cc-nav__inner { padding: 14px 0; position: relative; }
  .cc-nav__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface, #FFFFFF);
    border-bottom: 1px solid var(--color-rule, #E2E8F0);
    padding: 8px 20px 20px;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: max-height 0.2s ease, opacity 0.15s ease, visibility 0s linear 0.2s;
  }
  .cc-nav__links a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--color-rule, #E2E8F0); }
  .cc-nav__links li:last-child a { border-bottom: none; }
  .cc-nav--open .cc-nav__links {
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    visibility: visible;
    opacity: 1;
    transition: max-height 0.2s ease, opacity 0.15s ease;
  }
}

/* ---- 5. BUTTONS -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 2px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-align: center;
}
.btn:hover { border-bottom-color: transparent; }
.btn--primary {
  background: var(--color-accent, #00D4AA);
  color: var(--color-primary, #211047);
}
.btn--primary:hover { background: #00BF99; }
.btn--secondary {
  background: transparent;
  color: var(--color-primary, #211047);
  border-color: var(--color-primary, #211047);
}
.btn--secondary:hover { background: var(--color-primary, #211047); color: var(--color-primary-on, #FFFFFF); }
.btn--ghost-on-dark {
  background: transparent;
  color: var(--color-primary-on, #FFFFFF);
  border-color: rgba(255,255,255,0.4);
}
.btn--ghost-on-dark:hover { background: rgba(255,255,255,0.08); border-color: var(--color-accent, #00D4AA); color: var(--color-accent, #00D4AA); }
.btn--lg { padding: 16px 34px; font-size: 1.05rem; }

/* ---- 6. HERO ----------------------------------------------------------- */

.cc-hero {
  background: var(--color-primary, #211047);
  color: var(--color-primary-on, #FFFFFF);
  padding: 120px 0 110px;
  position: relative;
  overflow: hidden;
}
.cc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(0, 212, 170, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(107, 47, 160, 0.25) 0%, transparent 50%);
  pointer-events: none;
}
.cc-hero__inner { position: relative; z-index: 1; max-width: 820px; }
.cc-hero__eyebrow {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent, #00D4AA);
  margin-bottom: 22px;
}
.cc-hero h1 {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--color-primary-on, #FFFFFF);
  margin-bottom: 26px;
  font-weight: 700;
}
.cc-hero h1 .accent { color: var(--color-accent, #00D4AA); }
.cc-hero__lede {
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif);
  font-size: clamp(1.125rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  max-width: 640px;
  margin-bottom: 38px;
}
.cc-hero__rule {
  width: 64px;
  height: 3px;
  background: var(--color-accent, #00D4AA);
  border: none;
  margin: 0 0 26px;
}
.cc-hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.cc-hero--compact { padding: 80px 0 70px; }
.cc-hero--compact h1 { font-size: clamp(2rem, 4vw, 2.75rem); }

/* ---- 7. STAT BAR (web variant of the report component) ----------------- */

.cc-stat-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--color-primary, #211047);
  color: var(--color-primary-on, #FFFFFF);
}
.cc-stat-bar__item {
  padding: 32px 24px;
  border-right: 1px solid rgba(255,255,255,0.1);
  text-align: left;
}
.cc-stat-bar__item:last-child { border-right: none; }
.cc-stat-bar__num {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-accent, #00D4AA);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.cc-stat-bar__unit {
  font-size: 0.55em;
  font-weight: 500;
  margin-left: 3px;
  color: var(--color-accent, #00D4AA);
}
.cc-stat-bar__label {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
}

@media (max-width: 820px) {
  .cc-stat-bar { grid-template-columns: 1fr 1fr; }
  .cc-stat-bar__item:nth-child(2) { border-right: none; }
  .cc-stat-bar__item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.1); }
}

/* ---- 8. CARD GRID ------------------------------------------------------ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1000px) {
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .card-grid--4, .card-grid--3, .card-grid--2 { grid-template-columns: 1fr; }
}

.card {
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-rule, #E2E8F0);
  padding: 32px 28px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover { border-color: var(--color-accent, #00D4AA); }
.card__eyebrow {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cc-accent-ink-aa, #007A61);
  margin-bottom: 14px;
}
.card h3 {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-primary, #211047);
  margin-bottom: 12px;
  line-height: 1.25;
}
.card__body {
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif);
  font-size: 0.975rem;
  line-height: 1.55;
  color: var(--color-ink-muted, #4A5568);
  flex: 1;
}
/* T7a QA gate: in-text links here inherit the base at-rest-no-underline `a`
   rule, which axe flags as color-only against this muted prose color --
   same fix already applied to .prose a. */
.card__body a { border-bottom-color: var(--cc-accent-ink-aa, #007A61); }
.card__footer {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--color-rule, #E2E8F0);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-subtle, #718096);
}
.card__footer a {
  color: var(--cc-accent-ink-aa, #007A61);
  border-bottom: 1px solid transparent;
}
.card__footer a:hover { border-bottom-color: var(--cc-accent-ink-aa, #007A61); }

.card--feature {
  grid-column: span 2;
  padding: 44px 40px;
  background: var(--color-surface-tint, #EEF5FB);
  border: none;
  border-left: 3px solid var(--color-accent, #00D4AA);
}
.card--feature h3 { font-size: 1.625rem; line-height: 1.2; }
.card--feature .card__body { font-size: 1.05rem; }

@media (max-width: 1000px) {
  .card--feature { grid-column: span 1; padding: 32px 28px; }
}

/* ---- 9. PROGRAM CARDS (variant) --------------------------------------- */

.program-card {
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-rule, #E2E8F0);
  padding: 36px 28px;
  position: relative;
}
.program-card__code {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 2.5rem;
  font-weight: 700;
  /* T7a QA gate: raw --color-accent (#00D4AA) measures 1.9:1 on white,
     violating this project's own brand rule (raw teal never body-text-on-
     white) and WCAG AA. Same AA-safe swap as --cc-accent-ink-aa above. */
  color: var(--cc-accent-ink-aa, #007A61);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.program-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-primary, #211047);
  margin-bottom: 10px;
}
.program-card p {
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-ink-muted, #4A5568);
}
/* T7a QA gate: same at-rest-underline fix as .card__body a / .prose a. */
.program-card p a { border-bottom-color: var(--cc-accent-ink-aa, #007A61); }

/* ---- 10. CALLOUT / PULL QUOTE ------------------------------------------ */

.cc-callout {
  background: var(--color-surface-tint, #EEF5FB);
  border-left: 3px solid var(--color-accent, #00D4AA);
  padding: 28px 32px;
  margin: 0;
  max-width: 760px;
}
.cc-callout__label {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cc-accent-ink-aa, #007A61);
  margin-bottom: 10px;
}
.cc-callout p {
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-ink, #0A1628);
}

.cc-quote {
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--color-primary, #211047);
  border-left: 3px solid var(--color-accent, #00D4AA);
  padding: 14px 0 14px 28px;
  margin: 24px 0;
  max-width: 760px;
}
.cc-quote cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-subtle, #718096);
}

/* ---- 11. FILTER PILLS -------------------------------------------------- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 32px 0 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-rule, #E2E8F0);
}
.filter-pill {
  display: inline-block;
  padding: 8px 16px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-ink-muted, #4A5568);
  background: transparent;
  border: 1px solid var(--color-rule-strong, #CBD5E0);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.filter-pill:hover {
  border-color: var(--cc-accent-ink-aa, #007A61);
  color: var(--cc-accent-ink-aa, #007A61);
  border-bottom-color: var(--cc-accent-ink-aa, #007A61);
}
.filter-pill[aria-pressed="true"], .filter-pill--active {
  background: var(--color-primary, #211047);
  color: var(--color-primary-on, #FFFFFF);
  border-color: var(--color-primary, #211047);
}

/* ---- 12. FOOTER -------------------------------------------------------- */

.cc-footer {
  background: var(--color-primary, #211047);
  color: rgba(255,255,255,0.75);
  padding: 72px 0 40px;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 0.9rem;
}
.cc-footer__cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
@media (max-width: 800px) {
  .cc-footer__cols { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 480px) {
  .cc-footer__cols { grid-template-columns: 1fr; }
}
.cc-footer__brand {
  display: flex;
  color: var(--color-primary-on, #FFFFFF);
  margin-bottom: 16px;
}
.cc-footer__col h4 {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--color-accent, #00D4AA);
  margin-bottom: 16px;
}
.cc-footer__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cc-footer__col a {
  color: rgba(255,255,255,0.75);
  border-bottom-color: transparent;
}
.cc-footer__col a:hover { color: var(--color-accent, #00D4AA); border-bottom-color: transparent; }
.cc-footer__legal {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}
/* T7a QA gate: underline at rest -- rgba(255,255,255,0.65) vs the
   surrounding rgba(255,255,255,0.55) is a color-only cue axe correctly
   flags as indistinguishable (link-in-text-block). */
.cc-footer__legal a { color: rgba(255,255,255,0.65); border-bottom: none; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.35); }
.cc-footer__legal a:hover { color: var(--color-accent, #00D4AA); }

/* ---- 13. PROSE BLOCKS (article-grade body copy) ------------------------ */

.prose {
  max-width: 720px;
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-ink, #0A1628);
}
.prose p { margin-bottom: 1.1em; }
.prose h2 {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-primary, #211047);
  margin: 2.2em 0 0.6em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--color-rule, #E2E8F0);
}
.prose h3 {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-primary, #211047);
  margin: 1.8em 0 0.4em;
}
.prose ul, .prose ol { margin: 0 0 1.1em 1.4em; }
.prose li { margin-bottom: 0.4em; }
.prose a { border-bottom: 1px solid var(--color-accent, #00D4AA); }
.prose a:hover { background: rgba(0,212,170,0.08); }

/* ---- 14. MEMBER GATE BANNER ------------------------------------------- */

.cc-gate-banner {
  background: var(--color-primary-deep, #14072E);
  color: var(--color-accent, #00D4AA);
  padding: 14px 0;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-align: center;
}
.cc-gate-banner__inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cc-gate-banner__lock { font-size: 13px; line-height: 1; }

/* ---- 15. FORMS --------------------------------------------------------- */

.cc-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 560px;
}
.cc-form label {
  display: block;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-primary, #211047);
  margin-bottom: 6px;
}
.cc-form input, .cc-form textarea, .cc-form select {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 0.95rem;
  color: var(--color-ink, #0A1628);
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-rule-strong, #CBD5E0);
  border-radius: 2px;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}
.cc-form input:focus, .cc-form textarea:focus, .cc-form select:focus {
  outline: none;
  border-color: var(--cc-accent-ink-aa, #007A61);
}
.cc-form textarea { min-height: 140px; resize: vertical; }
.cc-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.cc-form__status {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 0.9rem;
  margin: 0;
  min-height: 1.2em;
}
.cc-form__status--pending { color: var(--color-ink-subtle, #64748B); }
.cc-form__status--success { color: var(--cc-accent-ink-aa, #007A61); font-weight: 500; }
.cc-form__status--error { color: #B3261E; font-weight: 500; }

.cc-search {
  max-width: 480px;
  margin: 0 0 28px;
}
.cc-search .pagefind-ui__search-input {
  font-family: var(--font-sans, "Inter", sans-serif);
  border-radius: 2px;
}
.cc-search .pagefind-ui__result-link {
  color: var(--color-primary, #211047);
}

/* ---- 16. UTILITY ------------------------------------------------------- */

.text-center { text-align: center; }
.flow > * + * { margin-top: 1em; }
.flow-lg > * + * { margin-top: 1.5em; }
.mt-7 { margin-top: 48px; }
.mt-6 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.tm { font-size: 0.55em; vertical-align: super; color: var(--color-ink-subtle, #718096); margin-left: 1px; font-weight: 400; }
.band--dark .tm { color: rgba(255,255,255,0.5); }

/* ---- 17. LEADERSHIP CARDS --------------------------------------------- */

.leader-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 36px;
}
.leader-card {
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-rule, #E2E8F0);
  border-left: 3px solid var(--color-secondary, #6B2FA0);
  padding: 28px 26px;
}
.leader-card__name {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-primary, #211047);
  margin-bottom: 4px;
}
.leader-card__role {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cc-accent-ink-aa, #007A61);
  margin-bottom: 14px;
}
.leader-card__bio {
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-ink-muted, #4A5568);
}

/* ---- 18. AUTH-STATE NAV TOGGLE ---------------------------------------- */
/* Driven by /js/auth-state.js — fetches /cdn-cgi/access/get-identity
   and adds `cc-signed-in` or `cc-signed-out` class to <body>.
   Default state (no class yet OR `cc-signed-out`): show Sign in + Apply,
     hide Leadership + Sign out.
   Authenticated (`cc-signed-in`): hide Sign in + Apply, show Leadership
     + Sign out.
   The default uses CSS `:not()` so the public state renders correctly
   before JS runs (or if JS fails). */

.cc-nav__links .nav-leadership,
.cc-nav__links .nav-signed-in {
  display: none;
}
body.cc-signed-in .cc-nav__links .nav-signed-out {
  display: none;
}
body.cc-signed-in .cc-nav__links .nav-leadership,
body.cc-signed-in .cc-nav__links .nav-signed-in {
  display: list-item;
}

/* ---- 18. PAST-WINNERS WALL (T2e) --------------------------------------- */
/* Populated at runtime by /js/past-winners.js from
   /data/content-inventory.json (T1 asset-harvest output). */

.winner-wall__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.winner-wall__tab {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--color-rule, #E2E8F0);
  color: var(--color-ink-muted, #4A5568);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.winner-wall__tab:hover { border-color: var(--color-accent, #00D4AA); color: var(--color-primary, #211047); }
.winner-wall__tab.is-active {
  background: var(--color-primary, #211047);
  border-color: var(--color-primary, #211047);
  color: #FFFFFF;
}
.winner-wall__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px;
  background: var(--color-rule, #E2E8F0);
  border: 1px solid var(--color-rule, #E2E8F0);
}
.winner-card {
  background: var(--color-surface, #FFFFFF);
  padding: 14px 16px;
}
.winner-card__name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-primary, #211047);
  line-height: 1.3;
}
.winner-card__company {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  /* var(--color-ink-subtle) is 4.02:1 on white -- fails WCAG AA (4.5:1) at
     this size (T3 axe-core sweep); ink-muted clears it at 7.5:1. */
  color: var(--color-ink-muted, #4A5568);
  margin-top: 4px;
  line-height: 1.4;
}
.winner-wall__toggle {
  display: block;
  margin: 28px auto 0;
  background: none;
  border: none;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-accent-ink-aa, #007A61);
  cursor: pointer;
  padding: 8px;
}
.winner-wall__toggle:hover { text-decoration: underline; }
.winner-wall__empty {
  color: var(--color-ink-subtle, #718096);
  font-style: italic;
}

/* ---- 19. HERO — GATE (T3, full-viewport dark cinematic register) ------ */
/* R1/R2: the homepage compresses to gate -> proof band -> three doors ->
   footer, full-viewport on first load so the "invitation-only" register
   reads immediately. */

.cc-hero--gate {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 140px 0 96px;
}
.cc-hero--gate::before {
  background:
    radial-gradient(circle at 12% 18%, rgba(0, 212, 170, 0.22) 0%, transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(107, 47, 160, 0.28) 0%, transparent 48%),
    radial-gradient(circle at 78% 90%, rgba(0, 212, 170, 0.12) 0%, transparent 40%);
}
.cc-hero--gate .cc-hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.cc-hero--gate h1 {
  font-weight: 200;
  font-size: clamp(2.75rem, 7vw, 5rem);
}
.cc-hero--gate .cc-hero__lede { font-weight: 300; }
.cc-hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .cc-hero__scroll-cue { animation: cc-scroll-cue-bob 2.2s ease-in-out infinite; }
}
@keyframes cc-scroll-cue-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}
@media (max-width: 720px) {
  .cc-hero--gate { padding: 120px 0 80px; }
}

/* ---- 20. PILL CTAs — dark-surface only (D5 brand-standard amendment) --- */
/* World 50 adaptation: teal pill-outline buttons for dark hero / proof-band
   CTAs. Light editorial surfaces + print/report components KEEP the 2px
   near-square .btn rule above (unchanged) — this variant is additive and
   dark-only. Formal BRAND_STANDARD.md amendment write-up lands with T4. */

.btn--pill {
  border-radius: 999px;
  padding: 15px 32px;
  background: transparent;
  color: var(--color-accent, #00D4AA);
  border: 1.5px solid var(--color-accent, #00D4AA);
}
.btn--pill:hover { background: rgba(0,212,170,0.1); }
.btn--pill-ghost {
  border-radius: 999px;
  padding: 15px 28px;
  background: transparent;
  color: rgba(255,255,255,0.85);
  border: 1.5px solid rgba(255,255,255,0.35);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.btn--pill-ghost:hover { border-color: var(--color-accent, #00D4AA); color: var(--color-accent, #00D4AA); }
.btn--pill-ghost .lock-glyph { flex-shrink: 0; }

/* ---- 21. QUALIFICATION MODAL (T3) -------------------------------------- */

.cc-modal { position: fixed; inset: 0; z-index: 1000; }
.cc-modal[hidden] { display: none; }
.cc-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10,4,26,0.72);
}
.cc-modal__panel {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 6vh auto;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--color-surface, #FFFFFF);
  padding: 40px 36px 36px;
  border-top: 3px solid var(--color-accent, #00D4AA);
}
.cc-modal__panel h2 { margin: 8px 0 10px; font-size: 1.5rem; }
.cc-modal__lede {
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif);
  color: var(--color-ink-muted, #4A5568);
  font-size: 0.98rem;
  line-height: 1.5;
  margin-bottom: 26px;
}
.cc-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-ink-subtle, #718096);
  cursor: pointer;
  padding: 4px 8px;
}
.cc-modal__close:hover { color: var(--color-primary, #211047); }
body.cc-modal-open { overflow: hidden; }
@media (max-width: 600px) {
  .cc-modal__panel { margin: 0; max-height: 100vh; min-height: 100vh; border-top: none; border-left: 3px solid var(--color-accent, #00D4AA); }
}

/* ---- 22. PROOF BAND (T3) ------------------------------------------------ */

.cc-winner-highlight__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px;
  background: var(--color-rule, #E2E8F0);
  border: 1px solid var(--color-rule, #E2E8F0);
  margin-top: 32px;
}
.cc-event-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 8px;
}
.cc-event-strip__item { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.cc-event-strip__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-event-strip__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  background: linear-gradient(0deg, rgba(20,7,46,0.88) 0%, transparent 100%);
  color: #fff;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .cc-event-strip { grid-template-columns: 1fr; }
}

.cc-testimonial-section[hidden] { display: none; }
.cc-testimonial-carousel__track .cc-quote { display: none; margin: 0 auto; }
.cc-testimonial-carousel__track .cc-quote.is-active { display: block; }

.cc-doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 800px) { .cc-doors { grid-template-columns: 1fr; } }
.cc-door {
  padding: 30px 26px;
  border: 1px solid var(--color-rule, #E2E8F0);
  transition: border-color 0.15s ease;
}
.cc-door:hover { border-color: var(--color-accent, #00D4AA); }
.cc-door h3 { font-size: 1.15rem; margin-bottom: 8px; }
.cc-door p {
  font-family: var(--font-serif, "Source Serif 4", Georgia, serif);
  color: var(--color-ink-muted, #4A5568);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 16px;
}