/* ============================================================
   CMO Council page — scoped to .cmo-council-page
   Hand-ported from the React source + Figma JPGs.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&display=swap");

.cmo-council-page {
    --cmo-bg:        #f5f2eb;
    --cmo-card:      #ffffff;
    --cmo-text:      #1a1f1a;
    --cmo-muted:     #6b6f6a;
    --cmo-border:    #e5e1d6;
    --cmo-blue:      #5a89c3;
    --cmo-blue-dark: #3f6298;
    --cmo-tan:       #efe9d8;
    --cmo-dark-bg:   #1a2419;
    --cmo-dark-card: #2a352a;
    --cmo-dark-text: #f5f2eb;
    --cmo-tint:      #efe9d8;

    background: var(--cmo-bg);
    color: var(--cmo-text);
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}
.cmo-council-page * { box-sizing: border-box; }
.cmo-council-page a { color: inherit; text-decoration: none; }
.cmo-council-page img { display: block; max-width: 100%; }

/* Section + container ---------------------------------------- */
.cmo-council-page .cmo-section { padding: 5rem 0; }
.cmo-council-page .cmo-section--tint { background: var(--cmo-tint); }
.cmo-council-page .cmo-section--dark { background: var(--cmo-dark-bg); color: var(--cmo-dark-text); }
.cmo-council-page .cmo-container {
    width: min(100%, 1280px);
    margin-inline: auto;
    padding-inline: 1.5rem;
}
@media (min-width: 768px) {
    .cmo-council-page .cmo-section { padding: 6rem 0; }
}

/* Typography -------------------------------------------------- */
.cmo-council-page .cmo-eyebrow {
    color: var(--cmo-blue-dark);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 1.25rem;
}
.cmo-council-page .cmo-eyebrow--small { font-size: 0.6875rem; }

.cmo-council-page .cmo-h1 {
    font-family: 'Instrument Serif', 'Manrope', serif;
    font-weight: 400;
    font-size: clamp(2.5rem, 4.5vw, 4rem);
    line-height: 1.05;
    margin: 0 0 1.5rem;
}
.cmo-council-page .cmo-h1 em {
    font-style: italic;
    color: var(--cmo-blue);
}
.cmo-council-page .cmo-h2 {
    font-family: 'Instrument Serif', 'Manrope', serif;
    font-weight: 400;
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1.1;
    margin: 0 0 1.5rem;
}
.cmo-council-page .cmo-h3 {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 1.375rem;
    line-height: 1.3;
    margin: 0 0 1rem;
}
.cmo-council-page .cmo-h4 {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.3;
    margin: 0 0 1rem;
}
.cmo-council-page .cmo-lede {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--cmo-muted);
    margin: 0 0 1.5rem;
}
.cmo-council-page .cmo-section--dark .cmo-lede { color: rgba(245, 242, 235, 0.78); }
.cmo-council-page .cmo-section--dark .cmo-eyebrow { color: #8fb8e8; }
.cmo-council-page .cmo-blue-text { color: var(--cmo-blue); }
.cmo-council-page .cmo-body {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--cmo-text);
}
.cmo-council-page .cmo-section--dark .cmo-body { color: rgba(245, 242, 235, 0.78); }

/* Hero -------------------------------------------------------- */
.cmo-council-page .cmo-hero {
    padding: 2.5rem 0 5rem;
}
.cmo-council-page .cmo-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .cmo-council-page .cmo-hero__grid {
        grid-template-columns: 1fr 1fr;
    }
}
.cmo-council-page .cmo-hero__stats {
    display: flex;
    gap: 3rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}
.cmo-council-page .cmo-hero__stat-number {
    font-family: 'Instrument Serif', serif;
    font-size: 2.5rem;
    line-height: 1.1;
    margin: 0 0 0.25rem;
}
.cmo-council-page .cmo-hero__stat-label {
    font-size: 0.875rem;
    color: var(--cmo-muted);
}

/* Buttons ----------------------------------------------------- */
.cmo-council-page .cmo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: opacity 150ms, background 150ms;
}
.cmo-council-page .cmo-btn--black { background: var(--cmo-text); color: var(--cmo-bg); }
.cmo-council-page .cmo-btn--black:hover { opacity: 0.9; }
.cmo-council-page .cmo-btn--white { background: var(--cmo-bg); color: var(--cmo-text); }
.cmo-council-page .cmo-btn--white:hover { opacity: 0.9; }
.cmo-council-page .cmo-btn--blue { background: var(--cmo-blue-dark); color: #fff; }
.cmo-council-page .cmo-btn--blue:hover { opacity: 0.9; }

/* Cards ------------------------------------------------------- */
.cmo-council-page .cmo-card {
    background: var(--cmo-card);
    border: 1px solid var(--cmo-border);
    border-radius: 0.75rem;
    padding: 2rem;
}
.cmo-council-page .cmo-card--feature {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 100%;
}
.cmo-council-page .cmo-card-icon {
    width: 2rem;
    height: 2rem;
    margin-bottom: 1rem;
    object-fit: contain;
}
.cmo-council-page .cmo-quote {
    background: var(--cmo-tan);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--cmo-text);
    margin-top: 1rem;
}

/* Dark cards (Slack / different sections) -------------------- */
.cmo-council-page .cmo-dark-card {
    background: var(--cmo-dark-card);
    color: var(--cmo-dark-text);
    border-radius: 0.75rem;
    padding: 2rem;
}

/* Grid layouts ----------------------------------------------- */
.cmo-council-page .cmo-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .cmo-council-page .cmo-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cmo-council-page .cmo-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px)  { .cmo-council-page .cmo-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cmo-council-page .cmo-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cmo-council-page .cmo-grid-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px)  { .cmo-council-page .cmo-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .cmo-council-page .cmo-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Peer groups split section ---------------------------------- */
.cmo-council-page .cmo-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (min-width: 1024px) {
    .cmo-council-page .cmo-split { grid-template-columns: 1fr 1fr; }
}
.cmo-council-page .cmo-split__image {
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--cmo-tan);
    aspect-ratio: 4 / 3;
}
.cmo-council-page .cmo-split__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Numbered (01 02 03) ---------------------------------------- */
.cmo-council-page .cmo-number {
    font-family: 'Instrument Serif', serif;
    font-size: 3rem;
    line-height: 1;
    color: var(--cmo-blue);
    margin-bottom: 1rem;
    display: block;
}

/* Pillbox topics --------------------------------------------- */
.cmo-council-page .cmo-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-bottom: 1.5rem;
}
.cmo-council-page .cmo-pill {
    background: rgba(245, 242, 235, 0.08);
    color: rgba(245, 242, 235, 0.9);
    border: 1px solid rgba(245, 242, 235, 0.15);
    padding: 0.5rem 0.875rem;
    border-radius: 999px;
    font-size: 0.8125rem;
}

/* Checklist (peer matching, in-person highlights) ------------ */
.cmo-council-page .cmo-checklist {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: flex;
    flex-direction: column;
}
.cmo-council-page .cmo-checklist__item {
    padding: 0.875rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.9375rem;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.cmo-council-page .cmo-checklist__item::before {
    content: '◆';
    color: var(--cmo-blue);
    font-size: 0.625rem;
    flex-shrink: 0;
    margin-top: 0.5rem;
}
.cmo-council-page .cmo-section--dark .cmo-checklist__item { border-top-color: rgba(245, 242, 235, 0.12); }

/* Video / iframe wrappers ------------------------------------ */
.cmo-council-page .cmo-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 1rem;
}
.cmo-council-page .cmo-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Event card with image -------------------------------------- */
.cmo-council-page .cmo-event-card {
    background: var(--cmo-card);
    border-radius: 0.75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.cmo-council-page .cmo-event-card__image {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    height: auto;
}
.cmo-council-page .cmo-event-card__body { padding: 1.5rem 2rem 2rem; }

/* Big stat box ------------------------------------------------ */
.cmo-council-page .cmo-stat-box {
    background: var(--cmo-card);
    border-radius: 0.75rem;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 100%;
}
.cmo-council-page .cmo-stat-box__number {
    font-family: 'Instrument Serif', serif;
    font-size: 4rem;
    line-height: 1;
    color: var(--cmo-blue);
    margin-bottom: 1rem;
}

/* FAQ accordion ---------------------------------------------- */
.cmo-council-page .cmo-faq__item {
    border-top: 1px solid var(--cmo-border);
}
.cmo-council-page .cmo-faq__item:last-child {
    border-bottom: 1px solid var(--cmo-border);
}
.cmo-council-page .cmo-faq__question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0;
    background: transparent;
    border: 0;
    text-align: left;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--cmo-text);
    cursor: pointer;
}
.cmo-council-page .cmo-faq__plus {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--cmo-blue);
    transition: transform 200ms ease;
}
.cmo-council-page .cmo-faq__item.is-open .cmo-faq__plus { transform: rotate(45deg); }
.cmo-council-page .cmo-faq__answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 220ms ease;
}
.cmo-council-page .cmo-faq__item.is-open .cmo-faq__answer { max-height: 800px; }
.cmo-council-page .cmo-faq__answer p {
    margin: 0;
    padding: 0 0 1.5rem;
    color: var(--cmo-muted);
    font-size: 1rem;
    line-height: 1.6;
}

/* Final CTA --------------------------------------------------- */
.cmo-council-page .cmo-final-cta {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
}

/* Centered headings ------------------------------------------ */
.cmo-council-page .cmo-center { text-align: center; }
.cmo-council-page .cmo-center .cmo-h1,
.cmo-council-page .cmo-center .cmo-h2 { margin-inline: auto; }