/* ==========================================================================
   CER DESIGN TOKENS — single source of truth
   --------------------------------------------------------------------------
   Added in the cleanup pass. Values below deliberately MATCH the current
   rendered design; this layer exists so the scattered literals throughout
   this file can be replaced token-by-token without visual drift.

   Audit that motivated this layer:
     - 34 distinct font-sizes (incl. 10 bespoke clamp() curves), only 20
       line-heights for 80 font-size declarations
     - no font-weight below 600 anywhere on the page
     - 13 distinct border-radius values, 30 distinct box-shadows
     - 52 distinct padding declarations, 19 gap values, mixed px/rem
     - all 24 transitions on the browser-default `ease`, 7 duration values
     - zero prefers-reduced-motion handling
   ========================================================================== */

.cer-event-page {
    --cer-brand-color-1: #ff8c00;
    --cer-brand-color-2: #800080;
    --cer-event-background-image: url(../../../../uploads/2026/10/png-bg.png);
    /* --- Type scale — 8 steps, every step pairs size + leading + tracking --- */
    --cer-fs-display: clamp(2.5rem, 5vw, 4rem);
    --cer-lh-display: 1.05;
    --cer-tr-display: -0.02em;

    --cer-fs-h1: clamp(2rem, 4vw, 3rem);
    --cer-lh-h1: 1.1;
    --cer-tr-h1: -0.02em;

    --cer-fs-h2: clamp(1.6rem, 2.6vw, 2.25rem);
    --cer-lh-h2: 1.2;
    --cer-tr-h2: -0.01em;

    --cer-fs-h3: clamp(1.15rem, 1.6vw, 1.4rem);
    --cer-lh-h3: 1.3;

    --cer-fs-lead: 1.0625rem;
    --cer-lh-lead: 1.55;

    --cer-fs-body: 1rem;
    --cer-lh-body: 1.6;

    --cer-fs-sm: 0.875rem;
    --cer-lh-sm: 1.5;

    --cer-fs-xs: 0.75rem;
    --cer-lh-xs: 1.4;

    /* Weights — 400/500 were absent entirely; hierarchy needs them */
    --cer-fw-regular: 400;
    --cer-fw-medium: 500;
    --cer-fw-semibold: 600;
    --cer-fw-bold: 700;
    --cer-fw-black: 800;

    /* --- Spacing — 4px base, replaces 52 ad-hoc padding declarations --- */
    --cer-space-1: 0.25rem;
    --cer-space-2: 0.5rem;
    --cer-space-3: 0.75rem;
    --cer-space-4: 1rem;
    --cer-space-5: 1.5rem;
    --cer-space-6: 2rem;
    --cer-space-7: 3rem;
    --cer-space-8: 4rem;

    /* Card padding — benchmark sites sit at 1.25–1.5rem; this page was at 2rem */
    --cer-card-pad: 1.5rem;
    --cer-card-pad-lg: 2rem;
    --cer-grid-gap: 1.25rem;

    /* Single horizontal inset for EVERY section. The alignment defect this
       fixes: hero/main used margin 1rem + padding 2.5rem, speakers/pillars
       were overridden to padding 0, and the four "additive" sections
       (objectives, summit-structure, partners, faq) had no rule at all —
       so cards did not share a left edge down the page. */
    --cer-section-inset: 1rem;
    --cer-section-gap: 1rem;

    /* --- Radius — was 13 distinct values --- */
    --cer-radius-sm: 8px;
    --cer-radius-md: 12px;
    --cer-radius-lg: 16px;
    --cer-radius-xl: 24px;
    --cer-radius-full: 999px;

    /* --- Elevation — was 30 distinct shadows --- */
    --cer-shadow-sm: 0 1px 2px rgba(16, 35, 63, 0.06);
    --cer-shadow-md: 0 8px 24px rgba(16, 35, 63, 0.08);
    --cer-shadow-lg: 0 10px 36px rgba(0, 0, 0, 0.12);

    /* --- Motion ---------------------------------------------------------
       Durations and easing lifted from the primary benchmark
       (summit.health.go.ke), which ships NO animation library — all
       hand-rolled keyframes on cubic-bezier(.4,0,.2,1) at .15s / .3s.
       This page currently uses the browser-default `ease` for all 24
       transitions across 7 unrelated durations. */
    --cer-dur-micro: 150ms;   /* hover, focus, button states */
    --cer-dur-base: 250ms;    /* accordions, toggles, expands */
    --cer-dur-enter: 500ms;   /* scroll entrances */
    --cer-dur-ambient: 6s;    /* hero float / gradient drift */

    --cer-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
    --cer-ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
    --cer-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --cer-stagger: 60ms;

    /* --- Glass ----------------------------------------------------------
       The glass stays. Tokenised so opacity/blur can be tuned in one place
       once a hero image sits behind it — at present the cards blur a flat
       #f5f7fa page background, so the effect is not actually visible. */
    --cer-glass-bg: rgba(255, 255, 255, 0.42);
    --cer-glass-bg-hover: rgba(255, 255, 255, 0.52);
    --cer-glass-border: rgba(255, 255, 255, 0.5);
    --cer-glass-blur: 16px;
}
/* ==========================================================================
   MOTION PRIMITIVES
   Contents-only by design. Never animate transform/opacity on an element
   that also carries backdrop-filter — the blur is recomposited every frame
   and Safari drops or flickers it. Entrance classes below are applied to
   card CONTENTS, never to the glass containers themselves.
   ========================================================================== */

@keyframes cer-fade-in-up {
    from { opacity: 0; transform: translate3d(0, 16px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes cer-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes cer-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -12px, 0); }
}

@keyframes cer-gradient-drift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

@keyframes cer-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* Scroll reveal, gated on `html.cer-js` which the script sets only once JS and
   IntersectionObserver are both confirmed. Ungated, the pillars and speakers
   sat at opacity:0 whenever the observer did not run and the sections rendered
   completely empty. Content must never depend on JS to become visible. */
html.cer-js .cer-reveal {
    opacity: 0;
}

html.cer-js .cer-reveal.is-visible {
    animation: cer-fade-in-up var(--cer-dur-enter) var(--cer-ease-out) both;
    animation-delay: var(--cer-reveal-delay, 0ms);
}

/* ==========================================================================
   REDUCED MOTION — was entirely absent across all four plugin stylesheets.
   This site runs a UserWay accessibility widget and serves a GBV/health
   audience; vestibular safety is not optional here.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .cer-event-page *,
    .cer-event-page *::before,
    .cer-event-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html.cer-js .cer-reveal,
    html.cer-js .cer-reveal.is-visible {
        opacity: 1;
        animation: none;
    }
}

body:has(.cer-event-page) .page-title.page-bread-cumb {
    display: none !important;
}

.cer-share-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    margin-left: auto;
    width: 100%;
}

.cer-share-label {
    color: #44516b;
    font-size: 0.85rem;
    font-weight: 700;
    margin-right: 2px;
}

.cer-form-message-pending::before {
    content: '';
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -0.12em;
    animation: cer-payment-spin 700ms linear infinite;
    pointer-events: none;
}

@keyframes cer-payment-spin {
    to { transform: rotate(360deg); }
}

.cer-share-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(0, 110, 172, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #FAA41A;
    text-decoration: none;
    transition: color var(--cer-dur-micro) var(--cer-ease-out), background-color var(--cer-dur-micro) var(--cer-ease-out), transform var(--cer-dur-micro) var(--cer-ease-out);
}

.cer-share-bar a:hover,
.cer-share-bar a:focus {
    background: #800080;
    color: #fff;
    outline: none;
    transform: translateY(-1px);
}

.cer-share-bar .dashicons {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.cer-share-brand-icon {
    display: block;
    font-size: 20px;
    line-height: 1;
}

.cer-share-x-icon {
    width: 18px;
    height: 18px;
}



.cer-event-shell > section {
  padding-top: 20px;
}

.cer-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 14px;
    border: none;
    background-color: var(--theme-color);
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.cer-primary-button:hover {
    background-color: #d0511a;
}

.cer-event-app {
    background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 18%, #ffffff 100%);
    color: #233047;
    min-height: 100vh;
}

.cer-event-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(0, 110, 172, 0.08);
    backdrop-filter: blur(16px);
}

.cer-event-header__inner,
.cer-event-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.cer-event-brand,
.cer-event-brand--text {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.cer-event-brand img {
    display: block;
    max-height: 52px;
    width: auto;
}

.cer-event-brand__text {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #10233f;
}

.cer-event-nav {
    flex: 1;
}

.cer-event-nav__list,
.cer-event-footer__list {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.cer-event-nav__list a,
.cer-event-footer__list a {
    color: #44516b;
    text-decoration: none;
    font-weight: 600;
}

.cer-event-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.cer-event-header__link,
.cer-event-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.82rem 1.1rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
}

.cer-event-header__link {
    color: #006eac;
    border: 1px solid rgba(0, 110, 172, 0.18);
    background: rgba(0, 110, 172, 0.04);
}

.cer-event-header__cta {
    color: #ffffff;
    background: #faa41a;
}

.cer-event-main {
    display: block;
}

.cer-event-footer {
    border-top: 1px solid rgba(0, 110, 172, 0.08);
    background: #ffffff;
}

.cer-event-footer__inner {
    flex-wrap: wrap;
}

.cer-event-footer__brand {
    display: grid;
    gap: 0.4rem;
    max-width: 28rem;
}

.cer-event-footer__title {
    font-size: 1rem;
    font-weight: 800;
    color: #10233f;
}

.cer-event-footer__brand p,
.cer-event-footer__copyright {
    color: #5c667f;
    margin: 0;
}

.cer-event-footer__nav {
    flex: 1;
}

.cer-hero-section {
    background: linear-gradient(180deg, rgba(2, 192, 109, 0.08) 0%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: 32px;
}

.cer-hero-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1.75fr 1fr;
    align-items: stretch;
}

.cer-hero-copy h1 {
    font-size: clamp(2rem, 3vw, 3.25rem);
    line-height: 1.05;
    color: #1f254d;
    margin: 1rem 0;
}

.cer-hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 0.8rem;
    color: #02c06d;
}

.cer-hero-text {
    max-width: 680px;
    color: #44475a;
}

.cer-hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.15rem;
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    color: #1f254d;
}

.cer-hero-features li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    border: 1px solid #e8edf5;
    background: rgba(255, 255, 255, 0.78);
    font-weight: 600;
}

.cer-hero-features .material-symbols-outlined {
    font-size: 1rem;
    color: #02c06d;
}

.cer-hero-meta {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.cer-hero-meta div {
    padding: 1rem 1.2rem;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e8edf5;
}

.cer-hero-meta-label {
    display: block;
    font-size: 0.8rem;
    color: #6e748d;
    margin-bottom: 0.5rem;
}

.cer-hero-card {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cer-card-inner {
    background: #ffffff;
    border: 1px solid #e6edf8;
    border-radius: 28px;
    padding: 2rem;
    width: 100%;
    box-shadow: 0 24px 60px rgba(32, 45, 84, 0.08);
}

.cer-card-heading {
    font-size: 1rem;
    font-weight: 700;
    color: #032d5c;
    margin-bottom: 1rem;
}

.cer-card-list {
    list-style: disc;
    padding-left: 1.4rem;
    color: #4d5671;
}

.cer-info-section {
    overflow: hidden;
}

.cer-info-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1.5fr 1fr;
}

.cer-info-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 2rem;
    border: 1px solid #e8edf5;
}

.cer-info-card h2,
.cer-info-card h3 {
    color: #032d5c;
    margin-bottom: 1rem;
}

.cer-info-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    color: #515670;
}

.cer-info-list li {
    margin-bottom: 0.85rem;
}

.cer-speakers-section {
    text-align: center;
}

.cer-section-heading {
    font-size: clamp(2rem, 2.7vw, 2.5rem);
    color: #032d5c;
    margin-bottom: 1.75rem;
}

.cer-speaker-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cer-speaker-card {
    border-radius: 22px;
    padding: 2rem;
    background: #ffffff;
    border: 1px solid #e8edf5;
    min-height: 260px;
}

.cer-speaker-avatar {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: linear-gradient(135deg, #02c06d 0%, #18bec2 100%);
    margin-bottom: 1.25rem;
}

.cer-speaker-card h4 {
    font-size: 1.05rem;
    color: #032d5c;
    margin-bottom: 0.45rem;
}

.cer-speaker-card p {
    color: #5c667f;
    line-height: 1.8;
}

.cer-registration-section {
    overflow: hidden;
}

.cer-registration-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1.35fr 0.85fr;
    align-items: start;
}

.cer-registration-copy h2 {
    color: #032d5c;
    margin-bottom: 1rem;
}

.cer-payment-summary {
    position: sticky;
    top: 2rem;
}

.cer-summary-card {
    background: #f8fafc;
    border-radius: 24px;
    padding: 2rem;
    border: 1px solid #e8edf5;
}

.cer-summary-card h3 {
    margin-bottom: 1.5rem;
    color: #032d5c;
}

.cer-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cer-summary-row span {
    color: #8189a0;
}

.cer-summary-row strong {
    color: #1f254d;
}

.cer-summary-note {
    margin-top: 1.5rem;
    color: #5c667f;
    font-size: 0.95rem;
}

.cer-sponsorship-section {
    overflow: hidden;
}

.cer-section-header {
    max-width: 760px;
    margin: 0 auto 2rem;
    text-align: center;
}

.cer-sponsor-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cer-sponsor-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 1.75rem;
    border: 1px solid #e8edf5;
}

.cer-sponsor-card h3 {
    margin-bottom: 0.75rem;
    color: #032d5c;
}

.cer-sponsor-card ul {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 1rem 0;
    color: #5c667f;
}

/* Modern KAMGC layout integrated with the theme header/footer */
.cer-event-page {
    --cer-icrblue: var(--cer-brand-color-1);
    --cer-icrorange: var(--cer-brand-color-1);
    --cer-surface: #FFFFFF;
    --cer-surface-low: #F8F9FA;
    --cer-text-main: #333333;
    --cer-text-muted: #666666;
    --cer-outline: #DEE2E6;
    --cer-success: #8CC63F;
    --cer-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
    width: 100%;
    margin: 0;
    background: var(--cer-surface-low);
    color: var(--cer-text-main);
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    overflow-x: clip;
    box-sizing: border-box;
}

.material-symbols-outlined,
.cer-event-badge .material-symbols-outlined,
.cer-event-meta .material-symbols-outlined,
.cer-event-callout-icon .material-symbols-outlined,
.cer-event-features .material-symbols-outlined,
.cer-sponsor-badge,
.cer-security-pill .material-symbols-outlined,
.cer-modal__hero-icon,
.cer-modal__close .material-symbols-outlined,
.cer-modal__state--success .material-symbols-outlined {
    font-family: 'Material Symbols Outlined', 'Material Symbols Outlined', sans-serif;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    font-style: normal;
    line-height: 1;
}

.cer-event-page *,
.cer-event-page *::before,
.cer-event-page *::after {
    box-sizing: border-box;
}

.cer-event-shell {
    width: 100%;
    max-width: 1400px;
    min-height: 100vh;
    margin: 0 auto;
    background: var(--cer-surface);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.04);
    overflow-x: clip;
}

.cer-event-shell > section {
    border-bottom: 1px solid var(--cer-outline);
}

.cer-event-hero {
    width: 100%;
    padding: 4rem 2.5rem 3rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
}

.cer-event-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 auto 2rem;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(250, 164, 26, 0.7);
    border-radius: 999px;
    background: rgba(250, 164, 26, 0.08);
    color: var(--cer-icrorange);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cer-event-badge .material-symbols-outlined {
    font-size: 1rem;
}

.cer-event-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(260px, 0.9fr);
    gap: 2rem;
    align-items: center;
}

.cer-event-hero-copy {
    text-align: center;
}

.cer-event-hero-copy h1 {
    margin: 0 0 1rem;
    color: var(--cer-text-main);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.25rem, 4vw, 4rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.cer-event-hero-copy h1 span {
    color: var(--cer-icrblue);
}

.cer-event-subtitle {
    margin: 0 0 1.5rem;
    color: var(--cer-text-muted);
    font-size: clamp(1.1rem, 2vw, 1.7rem);
    font-weight: 600;
}

.cer-event-intro {
    max-width: 60rem;
    margin: 0 auto 1.1rem;
    color: var(--cer-text-muted);
    font-size: 1.05rem;
    line-height: 1.8;
}

.cer-event-features {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.5rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
    color: var(--cer-text-main);
    font-weight: 600;
}

.cer-event-features li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.cer-event-features .material-symbols-outlined {
    color: var(--cer-success);
    font-size: 1.1rem;
}

.cer-event-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2rem;
    margin-bottom: 1.25rem;
    color: var(--cer-icrblue);
    font-size: 1.05rem;
    font-weight: 600;
}

.cer-event-meta div {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.cer-event-meta .material-symbols-outlined {
    font-size: 1.2rem;
}

.cer-event-convened-by {
    margin-bottom: 2rem;
    color: var(--cer-text-muted);
    font-size: 1.05rem;
}

.cer-event-convened-label {
    font-weight: 700;
    color: var(--cer-text-main);
}

.cer-event-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.5rem;
}

.cer-primary-action,
.cer-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 56px;
    padding: 1rem 2rem;
    border-radius: 0;
    border: 2px solid transparent;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
    transition: all var(--cer-dur-base) var(--cer-ease-out);
}

.cer-primary-action {
    background: var(--cer-icrorange);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(250, 164, 26, 0.2);
}

.cer-primary-action:hover {
    background: #e08d00;
    color: #ffffff;
    text-decoration: none;
}

.cer-secondary-action {
    border-color: var(--cer-icrblue);
    color: var(--cer-icrblue);
    background: transparent;
}

.cer-secondary-action:hover {
    background: var(--cer-surface-low);
    text-decoration: none;
}

.cer-event-side-panel {
    display: flex;
    justify-content: center;
}

.cer-event-side-panel-inner {
    width: 100%;
    padding: 2rem;
    border: 1px solid var(--cer-outline);
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: var(--cer-shadow);
}

.cer-panel-kicker {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--cer-icrblue);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cer-event-side-panel-inner h2 {
    margin: 0 0 1rem;
    color: var(--cer-text-main);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
}

.cer-event-side-panel-inner p {
    margin: 0 0 1.5rem;
    color: var(--cer-text-muted);
}

.cer-panel-list {
    display: grid;
    gap: 0.8rem;
}

.cer-panel-list div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--cer-outline);
    color: var(--cer-text-muted);
}

.cer-panel-list strong {
    color: var(--cer-text-main);
    text-align: right;
}

.cer-event-content {
    padding: 4rem 2.5rem;
}

.cer-event-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(290px, 0.8fr);
    gap: 2rem;
    align-items: start;
}

.cer-event-main-column,
.cer-event-sidebar-column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.cer-event-card {
    padding: 2rem;
    background: var(--cer-surface);
    border: 1px solid var(--cer-outline);
}

.cer-event-card h2,
.cer-event-card h3,
.cer-event-card h4 {
    margin: 0 0 1rem;
    color: var(--cer-icrblue);
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.03em;
}

.cer-event-card h2 {
    font-size: clamp(2rem, 2vw, 2.5rem);
}

.cer-event-card h3 {
    font-size: 2rem;
}

.cer-event-card p {
    color: var(--cer-text-muted);
    line-height: 1.8;
}

.cer-event-copy-stack {
    display: grid;
    gap: 1.25rem;
}

.cer-event-callout {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--cer-surface-low);
    border: 1px solid var(--cer-outline);
}

.cer-event-callout-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--cer-icrblue);
    margin-top: 0.1rem;
}

.cer-event-callout h4 {
    margin-bottom: 0.5rem;
    color: var(--cer-text-main);
    font-size: 1.25rem;
}

.cer-event-card.cer-form-card {
    padding-bottom: 1.5rem;
}

.cer-event-form-intro {
    margin-bottom: 1.5rem;
}

.cer-registration-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cer-registration-form.cer-card-selected .cer-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cer-registration-form.cer-card-selected .cer-email-group {
    grid-column: 1 / -1;
}

.cer-registration-form.cer-card-selected .cer-full-name-group {
    display: none;
}

.cer-payment-toggle {
    display: flex;
    width: 100%;
    max-width: 28rem;
    padding: 0.3rem;
    background: var(--cer-surface-low);
    border: 1px solid var(--cer-outline);
}

.cer-payment-toggle-btn {
    flex: 1;
    min-height: 48px;
    border: none;
    background: transparent;
    color: var(--cer-text-muted);
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
}

.cer-card-payment-label {
    margin: 0;
    color: var(--cer-text);
    font-weight: 700;
}

.cer-payment-toggle-btn.is-active {
    background: var(--cer-icrblue);
    color: #ffffff;
}

.cer-payment-panel {
    display: block;
}

.cer-payment-panel.cer-modal-hidden {
    display: none;
}

.cer-card-panel {
    border: 1px solid var(--cer-outline);
    border-radius: 18px;
    padding: 1.25rem;
    background: rgba(0, 110, 172, 0.02);
}

.cer-card-flow-note {
    margin: 1rem 0 0;
    color: var(--cer-text-muted);
    font-size: 0.92rem;
}

.cer-card-submit {
    margin-top: 1.25rem;
}

.cer-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.cer-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cer-field-group.cer-span-2,
.payment-field.md\:col-span-2 {
    grid-column: 1 / -1;
}

.cer-field-group label {
    color: var(--cer-text-main);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
}

.cer-field-group input,
.cer-field-group textarea,
.cer-field-group select {
    width: 100%;
    min-height: 52px;
    padding: 0.85rem 1rem;
    border: 1px solid var(--cer-outline);
    background: var(--cer-surface);
    color: var(--cer-text-main);
    font: inherit;
    box-sizing: border-box;
}

.cer-field-group input:focus,
.cer-field-group textarea:focus,
.cer-field-group select:focus {
    border-color: var(--cer-icrblue);
    outline: none;
    box-shadow: 0 0 0 1px rgba(0, 110, 172, 0.18);
}

.cer-phone-field {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--cer-outline);
    background: var(--cer-surface);
}

.cer-phone-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 0 0.9rem;
    background: var(--cer-surface-low);
    border-right: 1px solid var(--cer-outline);
    font-weight: 700;
}

.cer-phone-field input {
    border: none !important;
    min-height: 52px;
}

.cer-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.hidden {
    display: none !important;
}

.block {
    display: block !important;
}

.cer-form-footnote {
    color: var(--cer-text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
}

.cer-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    border: none;
    background: var(--cer-icrorange);
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.cer-primary-button:hover {
    background: #e08d00;
}

.cer-primary-button:disabled {
    cursor: not-allowed;
    opacity: 0.75;
}

.cer-sponsor-panel {
    padding-bottom: 1.5rem;
}

.cer-sponsor-list {
    display: grid;
    gap: 0.8rem;
    margin: 1.5rem 0 1.25rem;
    padding: 0;
    list-style: none;
}

.cer-sponsor-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--cer-outline);
    background: var(--cer-surface-low);
    font-weight: 700;
    color: var(--cer-text-main);
}

.cer-sponsor-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(250, 164, 26, 0.7);
    color: var(--cer-icrorange);
    font-size: 0.8rem;
    font-weight: 800;
    background: rgba(250, 164, 26, 0.06);
}

.cer-sponsorship-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    border: 2px solid var(--cer-icrblue);
    color: var(--cer-icrblue);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    text-decoration: none;
}

.cer-sponsorship-link:hover {
    background: var(--cer-surface-low);
    text-decoration: none;
}

.cer-summary-panel {
    position: sticky;
    top: 2rem;
    background: var(--cer-surface-low);
}

.cer-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--cer-outline);
    color: var(--cer-text-muted);
    font-weight: 600;
}

.cer-summary-row strong {
    max-width: 60%;
    color: var(--cer-text-main);
    text-align: right;
}

.cer-summary-total {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-bottom: none;
    color: var(--cer-text-main);
}

.cer-summary-total strong {
    color: var(--cer-icrorange);
    font-size: 1.4rem;
    font-family: 'Montserrat', sans-serif;
}

.cer-summary-note {
    margin-top: 1.5rem;
    font-size: 0.92rem;
}

.cer-security-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    color: var(--cer-success);
    font-weight: 700;
    font-size: 0.9rem;
}

.cer-event-speakers,
.cer-event-pillars {
    padding: 4rem 2.5rem;
}

.cer-event-section-heading {
    text-align: center;
    margin-bottom: 2.5rem;
}

.cer-event-section-heading h2 {
    margin: 0 0 0.7rem;
    color: var(--cer-icrblue);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.3rem, 3vw, 3rem);
}

.cer-event-section-heading-left {
    text-align: left;
    max-width: 48rem;
    margin-bottom: 2rem;
}

.cer-event-section-heading-left p {
    color: var(--cer-text-muted);
    margin: 0;
}

.cer-event-divider {
    width: 5.5rem;
    height: 0.25rem;
    margin: 0 auto;
    background: var(--cer-icrorange);
}

.cer-speaker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.cer-speaker-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem;
    text-align: center;
    background: var(--cer-surface);
    border: 1px solid var(--cer-outline);
}

.cer-speaker-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12rem;
    height: 12rem;
    overflow: hidden;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    border: 4px solid var(--cer-outline);
    background: var(--cer-surface-low);
}

.cer-speaker-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cer-speaker-avatar .material-symbols-outlined {
    font-size: 4rem;
    color: var(--cer-icrblue);
}

.cer-speaker-card h3 {
    margin: 0 0 0.4rem;
    color: var(--cer-text-main);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
}

.cer-speaker-role {
    margin: 0 0 0.8rem;
    color: var(--cer-icrorange);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cer-speaker-card p:last-child {
    margin: 0;
}

.cer-pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.cer-pillar-card {
    position: relative;
    min-height: 16rem;
    overflow: hidden;
    background: var(--cer-surface);
    border: 1px solid var(--cer-outline);
    cursor: pointer;
}

.cer-pillar-front,
.cer-pillar-back {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform var(--cer-dur-enter) var(--cer-ease-out);
    padding: 1.5rem;
}

.cer-pillar-front {
    background: var(--cer-surface);
    transform: translateY(0);
}

.cer-pillar-back {
    background: var(--cer-icrblue);
    color: #ffffff;
    transform: translateY(105%);
}

.cer-pillar-card:hover .cer-pillar-front {
    transform: translateY(-150%);
}

.cer-pillar-card:hover .cer-pillar-back {
    transform: translateY(0);
}

.cer-pillar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.2rem;
    border-radius: 50%;
    background: var(--cer-surface-low);
    border: 1px solid var(--cer-outline);
    color: var(--cer-icrblue);
}

.cer-pillar-front h3 {
    margin: 0;
    color: var(--cer-icrblue);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    text-align: center;
}

.cer-pillar-back p {
    margin: 0;
    color: #ffffff;
    text-align: center;
    line-height: 1.7;
}

.cer-empty-state {
    padding: 5rem 2rem;
    text-align: center;
}

.cer-empty-state h1 {
    margin-bottom: 1rem;
    color: var(--cer-icrblue);
    font-family: 'Montserrat', sans-serif;
}

.cer-empty-state p {
    color: var(--cer-text-muted);
}



@media (min-width: 1024px) and (max-width: 1279px) {
    .cer-event-hero-inner,
    .cer-event-content-grid {
        gap: 1.5rem;
    }
}

@media (max-width: 1023px) {
    .cer-event-hero,
    .cer-event-content,
    .cer-event-speakers,
    .cer-event-pillars {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .cer-event-hero-inner,
    .cer-event-content-grid,
    .cer-speaker-grid,
    .cer-pillar-grid {
        grid-template-columns: 1fr;
    }

    .cer-event-shell {
        box-shadow: none;
    }

    .cer-summary-panel {
        position: static;
    }
}

@media (max-width: 767px) {
    .cer-event-badge {
        text-align: center;
        font-size: 0.72rem;
        letter-spacing: 0.06em;
    }

    .cer-event-meta {
        flex-direction: column;
        gap: 0.75rem;
    }

    .cer-event-actions {
        flex-direction: column;
    }

    .cer-primary-action,
    .cer-secondary-action {
        width: 100%;
    }

    .cer-form-grid,
    .cer-card-grid {
        grid-template-columns: 1fr;
    }

    .cer-event-card,
    .cer-event-side-panel-inner {
        padding: 1.25rem;
    }

    .cer-event-hero-copy h1 {
        font-size: 2.3rem;
    }
}

@media print {
    .cer-accessibility-button {
        display: none;
    }
}

.cer-sponsor-link {
    display: inline-block;
    margin-top: 1rem;
    text-decoration: none;
    color: #02c06d;
    font-weight: 700;
}

.cer-whatsapp-button {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: #25d366;
    color: #ffffff;
    border-radius: 999px;
    padding: 0.95rem 1.2rem;
    box-shadow: 0 24px 55px rgba(37, 211, 102, 0.18);
    z-index: 99;
    text-decoration: none;
}

.cer-whatsapp-icon {
    display: inline-flex;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.18);
    font-weight: 700;
}

.cer-form-message {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 16px;
    background: #f8fafc;
    color: #0f172a;
    min-height: 3rem;
}

.cer-error-box {
    padding: 1.2rem;
    background: #fff1f0;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 16px;
}

@media (max-width: 1024px) {
    .cer-hero-grid,
    .cer-info-grid,
    .cer-registration-grid,
    .cer-sponsor-grid {
        grid-template-columns: 1fr;
    }

    .cer-speaker-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cer-payment-summary {
        position: static;
    }
}

@media (max-width: 900px) {
    .cer-speaker-grid,
    .cer-sponsor-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .auto-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .cer-hero-section,
    .cer-info-card,
    .cer-card-inner,
    .cer-summary-card,
    .cer-sponsor-card {
        border-radius: 20px;
    }

    .cer-whatsapp-button {
        right: 1rem;
        bottom: 1rem;
        padding: 0.85rem 1rem;
    }
}

.cer-event-page {
    position: relative;
    background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 18%, #ffffff 100%);
    color: #233047;
}

.cer-top-glass-backdrop {
    width: 100%;
    min-height: 10rem;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-top: 0;
    border-radius: 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;

}

.cer-event-page .site-header,
.cer-event-page .site-header nav,
.cer-event-page .main-navigation,
.cer-event-page .navbar {
    position: relative;
    z-index: 10;
}

.cer-event-shell {
    padding: 1 0 1.5rem;
}

.cer-hero-section,
.cer-info-section,
.cer-speakers-section,
.cer-pillars-section {
    margin-bottom: 3.5rem;
}

.cer-hero-section {
    display: grid;
    gap: 1.25rem;
    padding: 2rem;
    border-radius: 32px;
    background: radial-gradient(circle at top left, rgba(0, 110, 172, 0.12), transparent 42%), linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(0, 110, 172, 0.08);
    box-shadow: 0 24px 70px rgba(23, 42, 69, 0.08);
}

.cer-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(250, 164, 26, 0.35);
    color: #c97200;
    background: rgba(250, 164, 26, 0.08);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    font-weight: 700;
  }

.cer-hero-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.9fr);
    align-items: stretch;
}

.cer-hero-copy h1 {
    margin: 0.9rem 0 0.75rem;
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    line-height: 0.98;
    color: #10233f;
    letter-spacing: -0.04em;
}

.cer-hero-subtitle {
    margin: 0 0 1.1rem;
    color: #006eac;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.82rem;
}

.cer-hero-text {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #51607a;
    max-width: 44rem;
}

.cer-hero-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.cer-hero-meta > div,
.cer-panel-list > div,
.cer-inline-meta > div,
.cer-summary-row,
.cer-card,
.cer-hero-panel-inner,
.cer-sponsor-card,
.cer-speaker-card,
.cer-pillar-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.cer-hero-meta > div {
    padding: 1rem;
    border-radius: 18px;
}

.cer-meta-label,
.cer-panel-list span,
.cer-inline-meta span,
.cer-summary-row span {
    display: block;
    color: #6c7487;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
}

.cer-hero-meta strong,
.cer-panel-list strong,
.cer-inline-meta strong,
.cer-summary-row strong {
    color: #12233d;
    font-size: 1rem;
}

.cer-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1.7rem;
}

.cer-primary-action,
.cer-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0.95rem 1.35rem;
    border-radius: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: transform var(--cer-dur-micro) var(--cer-ease-out), box-shadow var(--cer-dur-micro) var(--cer-ease-out), background-color var(--cer-dur-micro) var(--cer-ease-out);
}

.cer-primary-action {
    background: #faa41a;
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(250, 164, 26, 0.22);
}

.cer-secondary-action {
    border: 2px solid #006eac;
    color: #006eac;
    background: #ffffff;
}

.cer-primary-action:hover,
.cer-secondary-action:hover,
.cer-sponsor-card a:hover {
    transform: translateY(-1px);
}

.cer-hero-panel {
    display: flex;
}

.cer-hero-panel-inner {
    width: 100%;
    padding: 1.7rem;
    border-radius: 26px;
    box-shadow: 0 24px 56px rgba(16, 35, 63, 0.08);
}

.cer-panel-kicker {
    display: inline-flex;
    margin-bottom: 0.8rem;
    color: #faa41a;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cer-hero-panel-inner h2,
.cer-card h2,
.cer-card h3,
.cer-section-head h2 {
    margin: 0 0 0.8rem;
    color: #006eac;
}

.cer-hero-panel-inner p,
.cer-card p,
.cer-sponsor-card p,
.cer-speaker-card p,
.cer-pillar-back p {
    color: #51607a;
    line-height: 1.8;
}

.cer-panel-list {
    display: grid;
    gap: 0.85rem;
    margin-top: 1.25rem;
}

.cer-panel-list > div {
    padding: 0.9rem 1rem;
    border-radius: 16px;
}

.cer-info-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.9fr);
}

.cer-info-main,
.cer-info-sidebar {
    display: grid;
    gap: 1.25rem;
}

.cer-card {
    border-radius: 26px;
    padding: 1.75rem;
    box-shadow: 0 18px 50px rgba(20, 37, 67, 0.06);
}

.cer-callout {
    margin-top: 1.2rem;
    padding: 1rem 1rem 1rem 1.1rem;
    border-left: 4px solid #8cc63f;
    background: #f6fbef;
    border-radius: 16px;
}

.cer-callout strong {
    display: block;
    margin-bottom: 0.35rem;
    color: #10233f;
}

.cer-inline-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.cer-form-card p {
    margin-bottom: 1rem;
}

.cer-registration-form {
    margin-top: 1.1rem;
}

.cer-payment-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 0.4rem;
    border: 1px solid rgba(0, 110, 172, 0.12);
    background: #f5f8fc;
    border-radius: 18px;
    margin-bottom: 1.25rem;
}

.cer-payment-toggle-btn {
    min-height: 48px;
    border-radius: 14px;
    background: transparent;
    color: #6c7487;
    font-weight: 700;
    transition: background-color var(--cer-dur-micro) var(--cer-ease-out), color var(--cer-dur-micro) var(--cer-ease-out), box-shadow var(--cer-dur-micro) var(--cer-ease-out);
}

.cer-payment-toggle-btn.is-active {
    background: #006eac;
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(0, 110, 172, 0.22);
}

.cer-form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cer-span-2 {
    grid-column: 1 / -1;
}

.cer-field-group {
    display: grid;
    gap: 0.55rem;
}

.cer-field-group label {
    font-weight: 700;
    color: #10233f;
}

.cer-field-group input,
.cer-field-group select,
.cer-field-group textarea {
    width: 100%;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    background: #ffffff;
    color: #12233d;
    transition: border-color var(--cer-dur-micro) var(--cer-ease-out), box-shadow var(--cer-dur-micro) var(--cer-ease-out);
}

.cer-field-group input:focus,
.cer-field-group select:focus,
.cer-field-group textarea:focus {
    border-color: #006eac;
    box-shadow: 0 0 0 4px rgba(0, 110, 172, 0.08);
}

.cer-phone-field {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #ffffff;
}

.cer-phone-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 1rem;
    background: #f5f7fb;
    color: #10233f;
    font-weight: 700;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.cer-phone-field input {
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
}

.payment-field.hidden {
    display: none !important;
}

.payment-field.block {
    display: block;
}

.cer-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.cer-form-footnote {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0.95rem 1rem;
    border-radius: 14px;
    background: #f7fafd;
    color: #51607a;
    border: 1px solid rgba(0, 110, 172, 0.08);
}

.cer-form-message {
    margin-top: 1rem;
    padding: 0.95rem 1rem;
    border-radius: 14px;
    min-height: 3rem;
    background: #f7fafd;
    color: #51607a;
}

.cer-form-message-info {
    background: #eef6fc;
    color: #215b83;
}

.cer-form-message-success {
    background: #eff8e6;
    color: #4d7d13;
}

.cer-form-message-error {
    background: #fff1f0;
    color: #b42318;
}

.cer-summary-row {
    padding: 1rem 1rem 0.95rem;
    border-radius: 18px;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.cer-summary-total {
    background: linear-gradient(135deg, rgba(0, 110, 172, 0.06), rgba(250, 164, 26, 0.08));
}

.cer-summary-note {
    margin-top: 1rem;
    color: #51607a;
    line-height: 1.7;
}

.cer-security-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.95rem;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    background: rgba(140, 198, 63, 0.12);
    color: #5b8f16;
    font-weight: 700;
}

.cer-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.cer-modal-hidden {
    display: none !important;
}

.cer-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.cer-modal__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 30rem);
    background: #ffffff;
    border-radius: 28px;
    box-shadow: 0 32px 80px rgba(18, 31, 54, 0.28);
    overflow: hidden;
}

.cer-modal__panel--mpesa .cer-modal__hero {
    background: #8cc63f;
    color: #ffffff;
}

.cer-modal__hero,
.cer-modal__header {
    position: relative;
    padding: 1.5rem;
}

.cer-modal__hero {
    text-align: center;
}

.cer-modal__hero h3,
.cer-modal__header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: inherit;
}

.cer-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.cer-modal__header h3 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #006eac;
}

.cer-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: transparent;
    color: inherit;
}

.cer-modal__close--muted {
    position: static;
    color: #596579;
}

.cer-modal__hero-icon {
    display: inline-flex;
    margin-bottom: 0.5rem;
    font-size: 3rem;
    font-variation-settings: 'FILL' 1;
}

.cer-modal__body {
    display: grid;
    gap: 1.2rem;
    padding: 1.75rem;
}

.cer-modal__body--centered {
    justify-items: center;
    text-align: center;
}

.cer-modal__body p {
    margin: 0;
    color: #22324c;
}

.cer-modal__summary {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 16px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
}

.cer-modal__summary div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: #56637b;
}

.cer-modal__summary strong {
    color: #10233f;
}

.cer-modal__state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: #6a7588;
    font-weight: 700;
}

.cer-modal__state--success {
    color: #5b8f16;
}

.cer-modal__state--success .material-symbols-outlined {
    font-size: 3rem;
}

.cer-modal__spinner {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 4px solid #dee2e6;
    border-top-color: #8cc63f;
    animation: cer-spin 0.9s linear infinite;
}

.cer-modal__spinner--large {
    width: 4rem;
    height: 4rem;
    border-top-color: #006eac;
}

@keyframes cer-spin {
    to {
        transform: rotate(360deg);
    }
}

.cer-sponsor-list {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.cer-sponsor-card {
    border-radius: 22px;
    padding: 1.2rem;
    box-shadow: 0 16px 40px rgba(16, 35, 63, 0.05);
    border: 1px solid rgba(16, 35, 63, 0.06);
}

.cer-sponsor-card summary {
    cursor: pointer;
    list-style: none;
    font-size: 1.05rem;
    font-weight: 700;
    color: #10233f;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.cer-sponsor-card summary::-webkit-details-marker {
    display: none;
}

.cer-sponsor-card summary::after {
    content: '+';
    color: #006eac;
    font-size: 1.2rem;
    line-height: 1;
}

.cer-sponsor-card[open] summary::after {
    content: '−';
}

.cer-sponsor-body {
    margin-top: 0.9rem;
}

.cer-sponsor-card h4,
.cer-speaker-card h3,
.cer-pillar-front h3 {
    margin: 0 0 0.65rem;
    color: #10233f;
}

.cer-sponsor-body ul {
    margin: 0.9rem 0 0;
    padding-left: 1rem;
    color: #51607a;
}

.cer-sponsor-body a,
.cer-sponsor-card a {
    display: inline-flex;
    margin-top: 0.9rem;
    color: #006eac;
    font-weight: 700;
    text-decoration: none;
}

.cer-section-head {
    text-align: center;
    margin-bottom: 1.8rem;
}

.cer-section-head-left {
    text-align: left;
}

.cer-divider {
    width: 88px;
    height: 4px;
    margin: 0.85rem auto 0;
    background: #faa41a;
    border-radius: 999px;
}

.cer-section-head-left .cer-divider {
    margin-left: 0;
}

.cer-speaker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.cer-speaker-card {
    padding: 1.6rem;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(20, 37, 67, 0.06);
}

.cer-speaker-avatar {
    width: 132px;
    height: 132px;
    margin: 0 auto 1rem;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 110, 172, 0.08), rgba(250, 164, 26, 0.18));
}

.cer-speaker-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cer-speaker-role {
    color: #faa41a;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    font-weight: 700;
}

.cer-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.cer-pillar-card {
    position: relative;
    min-height: 260px;
    border-radius: 26px;
    overflow: hidden;
    perspective: 1200px;
    box-shadow: 0 18px 50px rgba(20, 37, 67, 0.06);
}

.cer-pillar-front,
.cer-pillar-back {
    position: absolute;
    inset: 0;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform var(--cer-dur-enter) var(--cer-ease-out), opacity var(--cer-dur-enter) var(--cer-ease-out);
}

.cer-pillar-front {
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}

.cer-pillar-back {
    background: linear-gradient(135deg, #006eac 0%, #00507d 100%);
    color: #ffffff;
    transform: translateY(100%);
}

.cer-pillar-card:hover .cer-pillar-front {
    transform: translateY(-100%);
}

.cer-pillar-card:hover .cer-pillar-back {
    transform: translateY(0);
}

.cer-pillar-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 1rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 110, 172, 0.08);
    color: #006eac;
}

.cer-pillar-back p {
    color: rgba(255, 255, 255, 0.92);
}

.cer-empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    border-radius: 26px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 18px 50px rgba(20, 37, 67, 0.06);
}

.cer-empty-state h1 {
    margin-bottom: 0.75rem;
    color: #006eac;
}



@media (max-width: 1200px) {
    .cer-hero-grid,
    .cer-info-grid {
        grid-template-columns: 1fr;
    }

    .cer-speaker-grid,
    .cer-pillars-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.cer-kamgc-page {
    background: #f5f7fa;
    color: #1d2a39;
    font-family: 'Open Sans', sans-serif;
}

.cer-kamgc-shell {
    max-width: 1280px;
    margin: 0 auto;
    background: #ffffff;
    box-shadow: 0 18px 60px rgba(15, 23, 42, 0.06);
}

.cer-kamgc-hero {
    padding: 3rem 2.5rem 2.5rem;
    background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
}

.cer-kamgc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(250, 164, 26, 0.6);
    background: rgba(250, 164, 26, 0.08);
    color: #d57c00;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.cer-kamgc-badge .material-symbols-outlined {
    font-size: 1rem;
}

.cer-kamgc-hero-inner {
    display: block;
    margin-top: 2rem;
}

.cer-kamgc-hero-copy {
    text-align: center;
}

.cer-kamgc-hero-copy h1 {
    margin: 0 0 0.9rem;
    color: #192838;
    font-family: 'Montserrat', 'Open Sans', sans-serif;
    font-size: clamp(2.5rem, 4vw, 4.5rem);
    line-height: 1.06;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.cer-kamgc-hero-copy h1 span {
    color: #006eac;
}

.cer-kamgc-subtitle {
    margin: 0 0 1.6rem;
    color: #4d5d74;
    font-size: clamp(1.05rem, 1.8vw, 1.4rem);
    font-weight: 600;
}

.cer-kamgc-meta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.8rem 1.3rem;
    margin-bottom: 1.25rem;
    color: #1b2f45;
    font-size: 1rem;
    font-weight: 700;
}

.cer-kamgc-meta-row > div {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.cer-kamgc-divider {
    width: 1px;
    height: 18px;
    background: rgba(25, 40, 56, 0.2);
}

.cer-kamgc-convened-by {
    margin: 0 0 1.25rem;
    color: #5a6477;
    font-size: 1.05rem;
}

.cer-kamgc-convened-by span {
    color: #1d2a39;
    font-weight: 800;
}

.cer-kamgc-feature-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.5rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    color: #1b2f45;
    font-weight: 700;
}

.cer-kamgc-feature-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.text-success {
    color: #8cc63f !important;
}

.cer-kamgc-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.2rem;
}

.cer-kamgc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 54px;
    padding: 0.95rem 1.6rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 0.02em;
    transition: transform var(--cer-dur-base) var(--cer-ease-out), box-shadow var(--cer-dur-base) var(--cer-ease-out);
}

.cer-kamgc-button:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.cer-kamgc-button-primary {
    background: #faa41a;
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(250, 164, 26, 0.18);
}

.cer-kamgc-button-secondary {
    background: transparent;
    border: 2px solid #006eac;
    color: #006eac;
}

.cer-kamgc-main {
    padding: 0 2.5rem 2rem;
}

.cer-kamgc-two-col {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
    gap: 2rem;
}

.cer-kamgc-main-column {
    display: grid;
    gap: 1.5rem;
}

.cer-kamgc-sidebar-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}

.cer-kamgc-sidebar-column > * {
    flex-shrink: 0;
}

.cer-kamgc-card,
.cer-kamgc-sponsor-box,
.cer-kamgc-summary-box,
.cer-kamgc-speaker-card,
.cer-kamgc-pillars-card {
    background: #ffffff;
    border: 1px solid #e7edf5;
    border-radius: 24px;
    box-shadow: 0 20px 45px rgba(18, 33, 53, 0.04);
}

.cer-kamgc-card {
    /* was 2rem — benchmark sites sit at 1.25–1.5rem; this was the single
       biggest contributor to the "cards too large" note */
    padding: var(--cer-card-pad);
}

.cer-kamgc-card h2,
.cer-kamgc-sponsor-box h3,
.cer-kamgc-summary-box h3,
.cer-kamgc-section-title h2,
.cer-kamgc-pillar-header h2 {
    margin: 0 0 1rem;
    color: #10233f;
    font-family: 'Montserrat', 'Open Sans', sans-serif;
}

.cer-kamgc-copy-stack {
    display: grid;
    gap: 1rem;
}

.cer-kamgc-copy-stack p,
.cer-kamgc-callout p,
.cer-kamgc-form-intro,
.cer-kamgc-sponsor-box p,
.cer-kamgc-summary-box p,
.cer-kamgc-speaker-card p,
.cer-kamgc-pillar-header p,
.cer-kamgc-pillars-back p {
    margin: 0;
    color: #58667d;
    line-height: 1.8;
}

.cer-kamgc-callout {
    display: flex;
    gap: 1rem;
    margin-top: 1.4rem;
    padding: 1.15rem 1.1rem;
    border-radius: 18px;
    background: #f7fafc;
    border: 1px solid #edf2f8;
}

.cer-kamgc-callout-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 110, 172, 0.08);
    color: #006eac;
}

.cer-kamgc-callout h4 {
    margin: 0 0 0.4rem;
    color: #10233f;
    font-weight: 800;
}

.cer-payment-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.2rem;
}

.cer-payment-toggle-btn {
    min-height: 48px;
    border: 1px solid #dfeaf4;
    border-radius: 12px;
    background: #f9fbfd;
    color: #35506d;
    font-weight: 700;
    cursor: pointer;
}

/*.cer-payment-toggle-btn.is-active {*/
/*    background: #006eac;*/
/*    border-color: #006eac;*/
/*    color: #ffffff;*/
/*}*/

.cer-registration-form {
    display: block;
}

.cer-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.1rem;
}

.cer-field-group {
    display: grid;
    gap: 0.45rem;
}

.cer-field-group label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #2a3b4d;
}

.cer-field-group input,
.cer-field-group select,
.cer-field-group textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.8rem 0.95rem;
    border: 1px solid #dfeaf2;
    border-radius: 12px;
    background: #ffffff;
    color: #1b2f45;
    font: inherit;
}

.cer-field-group textarea {
    min-height: 100px;
    resize: vertical;
}

.cer-span-2 {
    grid-column: span 2;
}

.cer-phone-field {
    display: flex;
    align-items: center;
    border: 1px solid #dfeaf2;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
}

.cer-phone-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    min-height: 48px;
    padding: 0 0.8rem;
    background: #f4f7fa;
    color: #1b2f45;
    font-weight: 700;
    border-right: 1px solid #dfeaf2;
}

.cer-phone-field input {
    border: 0;
    border-radius: 0;
    min-height: 48px;
}

.cer-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.cer-primary-button {
    margin-top: 1rem;
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 14px;
    background: #faa41a;
    color: #ffffff;
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.cer-kamgc-sponsor-box,
.cer-kamgc-summary-box {
    padding: 1.5rem;
}

.cer-kamgc-sponsor-list {
    list-style: none;
    margin: 1rem 0 1.2rem;
    padding: 0;
    display: grid;
    gap: 0.8rem;
}

.cer-kamgc-sponsor-list li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #24364e;
    font-weight: 700;
}

.cer-kamgc-sponsor-badge {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #006eac;
    color: #ffffff;
    font-weight: 800;
}

.cer-kamgc-sponsor-badge-muted {
    background: #6b7d95;
}

.cer-kamgc-sponsor-badge-bronze {
    background: #c67a1d;
}

.cer-kamgc-inline-button {
    width: 100%;
    min-height: 46px;
    border: 1px solid #dfeaf2;
    border-radius: 12px;
    background: #fff;
    color: #006eac;
    font-weight: 800;
    cursor: pointer;
}

.cer-kamgc-summary-box {
    display: grid;
    gap: 0.9rem;
    position: sticky;
    top: 128px;
}

.cer-kamgc-summary-row,
.cer-kamgc-summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.7rem;
    border-top: 1px solid #edf2f8;
    color: #617085;
}

.cer-kamgc-summary-total {
    font-weight: 800;
    color: #10233f;
}

.cer-kamgc-summary-box strong {
    color: #10233f;
}

.cer-kamgc-security {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    background: rgba(140, 198, 63, 0.08);
    color: #5b8a13;
    font-weight: 700;
}

.cer-kamgc-speakers,
.cer-kamgc-pillars {
    padding: 0 2.5rem 2.5rem;
}

.cer-kamgc-section-title,
.cer-kamgc-pillar-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.cer-kamgc-divider-center {
    width: 120px;
    height: 4px;
    margin: 0.8rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #006eac, #faa41a);
}

.cer-kamgc-speaker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
    justify-content: center;
    gap: var(--cer-grid-gap);
}

.cer-kamgc-speaker-card {
    padding: 2rem 1.5rem;
    text-align: left;
    background: rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.cer-kamgc-speaker-card:hover {
    background: rgba(255, 255, 255, 0.78);
}

.cer-kamgc-speaker-avatar {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #006eac 0%, #0db7a3 100%);
    color: #ffffff;
}

.cer-kamgc-speaker-card h3 {
    margin: 0 0 0.3rem;
    color: #10233f;
    font-size: 1.25rem;
}

.cer-kamgc-speaker-role {
    margin-bottom: 0.75rem !important;
    color: #006eac !important;
    font-weight: 800;
}

/* SCALABILITY — capped tracks + centred, so a section holding one item reads
   as an intentional single card rather than one stretched full-width band.
   Live content today: 5 pillars, 3 speakers, 1 objective, 1 summit step,
   1 FAQ, 0 partners — every grid has to survive n=1. */
.cer-kamgc-pillar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
    justify-content: center;
    gap: var(--cer-grid-gap);
}

/* PILLAR CARDS — expand-in-place, replacing the previous hover-only 3D
   rotateY flip. Three reasons the flip had to go:
     1. :hover with no click/focus handler meant the descriptions were
        completely unreachable on touch devices.
     2. A 3D transform on a child of a backdrop-filter container is the
        classic compositing conflict — Safari drops or flickers the blur.
     3. The brief asks for "one card with an expandable body", which is the
        same pattern the FAQ <details> already uses successfully on this page.
   Height is animated via grid-template-rows 0fr->1fr, which animates
   cleanly without needing a hardcoded max-height. */
.cer-kamgc-pillars-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--cer-radius-lg);
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--cer-shadow-md);
    transition: box-shadow var(--cer-dur-micro) var(--cer-ease-out),
                border-color var(--cer-dur-micro) var(--cer-ease-out);
}

.cer-kamgc-pillars-card:hover,
.cer-kamgc-pillars-card:focus-within {
    box-shadow: var(--cer-shadow-lg);
    border-color: rgba(255, 255, 255, 0.9);
}

.cer-kamgc-pillars-front {
    display: flex;
    flex-direction: column;
    gap: var(--cer-space-3);
    padding: var(--cer-card-pad);
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.cer-kamgc-pillars-front:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
    border-radius: var(--cer-radius-lg);
}

/* Collapsed -> expanded. 0fr/1fr keeps the transition height-agnostic. */
.cer-kamgc-pillars-back {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    transition: grid-template-rows var(--cer-dur-base) var(--cer-ease-out);
}

.cer-kamgc-pillars-card.is-open .cer-kamgc-pillars-back {
    grid-template-rows: minmax(0, 1fr);
}

.cer-kamgc-pillars-back > * {
    overflow: hidden;
    min-height: 0;
}

.cer-kamgc-pillars-back p {
    margin: 0;
    padding: 0 var(--cer-card-pad) var(--cer-card-pad);
    font-size: var(--cer-fs-sm);
    line-height: var(--cer-lh-sm);
    font-weight: var(--cer-fw-regular);
}

/* Affordance chevron, rotates on open */
.cer-kamgc-pillars-front::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    line-height: 1;
    position: absolute;
    top: var(--cer-card-pad);
    right: var(--cer-card-pad);
    opacity: 0.5;
    transition: transform var(--cer-dur-base) var(--cer-ease-out);
}

.cer-kamgc-pillars-card.is-open .cer-kamgc-pillars-front::after {
    transform: rotate(180deg);
}

.cer-kamgc-pillars-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(250, 164, 26, 0.12);
    color: #d57c00;
}

.cer-kamgc-pillars-card h3 {
    margin: 0;
    color: #10233f;
    font-size: 1.2rem;
}

.cer-kamgc-pillars-card-large {
    grid-column: span 2;
}

@media (max-width: 1024px) {
    .cer-kamgc-two-col,
    .cer-kamgc-speaker-grid,
    .cer-kamgc-pillar-grid {
        grid-template-columns: 1fr;
    }

    .cer-kamgc-pillars-card-large {
        grid-column: span 1;
    }

    .cer-kamgc-summary-box {
        position: static;
    }
}

@media (max-width: 820px) {
    .cer-kamgc-hero,
    .cer-kamgc-main,
    .cer-kamgc-speakers,
    .cer-kamgc-pillars {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .cer-kamgc-card,
    .cer-kamgc-sponsor-box,
    .cer-kamgc-summary-box,
    .cer-kamgc-speaker-card {
        border-radius: 18px;
    }

    .cer-form-grid,
    .cer-card-grid,
    .cer-payment-toggle {
        grid-template-columns: 1fr;
    }

    .cer-span-2 {
        grid-column: auto;
    }

    .cer-kamgc-meta-row {
        flex-direction: column;
        gap: 0.6rem;
    }

    .cer-kamgc-divider {
        display: none;
    }
}

/* =====================================================================
   KITENGE background + glassmorphism layer
   Additive only — no existing rule above this point is modified.
   Layer 1: full-page background image + dark tint (legibility overlay),
            applied to <body> so it sits behind everything on the page.
   Layer 2: glassmorphism applied to the event page's content containers
            (main shell, hero/main sections, cards, sidebar boxes,
            header/footer), which previously had solid/opaque backgrounds.
   ===================================================================== */

/* Layer 1: background image  */
body:has(.cer-event-page) {
    background-image: var(--cer-event-background-image);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

/* Let the background image show through the plugin's stacked page wrappers
   instead of their previous solid/opaque backgrounds */
.cer-event-page,
.cer-event-shell,
.cer-kamgc-page,
.cer-kamgc-shell {
    background: transparent;
    box-shadow: none;
}

.cer-event-page {
    background-image: var(--cer-event-background-image);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

/* Widen the shell so glass panels cover far more of the viewport, leaving much less bg exposed on the sides */
.cer-kamgc-shell {
    width: 94%;
    max-width: 1840px;
}

/* ALIGNMENT FIX — every section now shares one horizontal inset.
   Previously: hero/main sat at margin 1rem + padding 2.5rem; speakers/pillars
   were reset to padding 0; and objectives, summit-structure, partners and faq
   (added later, in the "Additive sections" block) had no section-level rule at
   all. Three different left edges down one page. */
.cer-kamgc-speakers,
.cer-kamgc-pillars,
.cer-kamgc-objectives,
.cer-kamgc-summit-structure,
.cer-kamgc-partners,
.cer-kamgc-faq {
    padding: 0;
}

/* Layer 2: glassmorphism on the visible content containers */
.cer-kamgc-hero,
.cer-kamgc-main,
.cer-kamgc-card,
.cer-kamgc-sponsor-box,
.cer-kamgc-summary-box,
.cer-kamgc-speakers-card,
.cer-kamgc-pillars-card-wrapper,
.cer-empty-state,
.cer-event-header,
.cer-event-footer {
    background: var(--cer-glass-bg);
    -webkit-backdrop-filter: blur(var(--cer-glass-blur));
    backdrop-filter: blur(var(--cer-glass-blur));
    border: 1px solid var(--cer-glass-border);
    border-radius: var(--cer-radius-xl);
    box-shadow: var(--cer-shadow-lg);
    transition: box-shadow var(--cer-dur-base) var(--cer-ease-out),
                background-color var(--cer-dur-base) var(--cer-ease-out);
}

.cer-kamgc-hero,
.cer-kamgc-main,
.cer-kamgc-speakers,
.cer-kamgc-pillars,
.cer-kamgc-objectives,
.cer-kamgc-summit-structure,
.cer-kamgc-partners,
.cer-kamgc-faq {
    margin: var(--cer-section-gap) var(--cer-section-inset);
}

.cer-kamgc-hero:hover,
.cer-kamgc-card:hover,
.cer-kamgc-sponsor-box:hover,
.cer-kamgc-summary-box:hover,
.cer-kamgc-speakers-card:hover,
.cer-kamgc-pillars-card-wrapper:hover {
    background-color: var(--cer-glass-bg-hover);
    box-shadow: 0 14px 44px 0 rgba(0, 0, 0, 0.18);
}

/* Tighten grid gaps so focus stays on the glass content rather than the bg showing through between cards */
.cer-kamgc-two-col {
    gap: 1.25rem;
}

.cer-kamgc-speaker-grid,
.cer-kamgc-pillar-grid {
    gap: 1rem;
}

@media (max-width: 640px) {
    .cer-kamgc-hero,
    .cer-kamgc-main,
    .cer-kamgc-speakers,
    .cer-kamgc-pillars {
        margin: 0.75rem;
    }
}

/* ---------------------------------------------------------------------- */
/* Additive sections: Secondary logo, Objectives, Summit Structure,       */
/* Partners, FAQ accordion, floating map widget. Brand accents: orange &  */
/* #800080 purple. Does not alter existing glassmorphism rules above.     */
/* ---------------------------------------------------------------------- */

.cer-kamgc-hero {
    position: relative;
}

.cer-kamgc-hero-secondary-logo {
    position: absolute;
    top: 1.5rem;
    right: 1.75rem;
    z-index: 2;
    max-width: 130px;
}

.cer-kamgc-hero-secondary-logo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

@media (max-width: 640px) {
    .cer-kamgc-hero-secondary-logo {
        position: static;
        max-width: 90px;
        margin: 0 auto 1rem;
    }
}

.cer-kamgc-meta-row a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cer-kamgc-section-title p {
    color: #58667d;
    margin: 0.4rem 0 0;
}

.cer-kamgc-compact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
    justify-content: center;
    gap: var(--cer-grid-gap);
}

.cer-kamgc-compact-card {
    padding: 1.35rem;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e7edf5;
    border-top: 3px solid var(--cer-brand-color-1);
    box-shadow: 0 12px 30px rgba(18, 33, 53, 0.05);
}

.cer-kamgc-compact-card:nth-child(3n+2) {
    border-top-color: var(--cer-brand-color-2);
}

.cer-kamgc-compact-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    background: rgba(255, 140, 0, 0.12);
    color: #ff8c00;
}

.cer-kamgc-compact-card:nth-child(3n+2) .cer-kamgc-compact-icon {
    background: rgba(128, 0, 128, 0.12);
    color: var(--cer-brand-color-2);
}

.cer-kamgc-compact-card h3 {
    margin: 0 0 0.4rem;
    color: #10233f;
    font-size: 1.05rem;
}

.cer-kamgc-compact-card p {
    margin: 0;
    color: #58667d;
    line-height: 1.7;
}

.cer-kamgc-partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 200px));
    justify-content: center;
    gap: var(--cer-grid-gap);
}

.cer-kamgc-partner-card {
    display: flex;
    align-items: center;
    text-transform: capitalize;
    justify-content: center;
    min-height: 90px;
    padding: 1rem;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e7edf5;
    text-decoration: none;
    color: #800080;
    font-weight: 700;
    gap: 0.5rem;
    transition: border-color var(--cer-dur-base) var(--cer-ease-out), box-shadow var(--cer-dur-base) var(--cer-ease-out);
}

.cer-kamgc-partner-card:hover {
    border-color: var(--cer-brand-color-1);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--cer-brand-color-1) 16%, transparent);
}

.cer-kamgc-partner-card img {
    max-width: 100%;
    max-height: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.cer-kamgc-faq-accordion {
    display: grid;
    gap: 0.75rem;
}

.cer-kamgc-faq-item {
    border: 1px solid #e7edf5;
    border-left: 3px solid #800080;
    border-radius: 12px;
    background: #ffffff;
    padding: 0.2rem 1.1rem;
}

.cer-kamgc-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    cursor: pointer;
    list-style: none;
    color: #10233f;
    font-weight: 700;
}

.cer-kamgc-faq-item summary::-webkit-details-marker {
    display: none;
}

.cer-kamgc-faq-caret {
    color: #ff8c00;
    transition: transform var(--cer-dur-base) var(--cer-ease-out);
    flex-shrink: 0;
}

.cer-kamgc-faq-item[open] .cer-kamgc-faq-caret {
    transform: rotate(180deg);
}

.cer-kamgc-faq-answer {
    padding: 0 0 1rem;
    color: #58667d;
    line-height: 1.7;
}

.cer-kamgc-map-widget {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 9999;
}

.cer-kamgc-map-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #800080;
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(128, 0, 128, 0.35);
    cursor: pointer;
}

.cer-kamgc-map-toggle:hover {
    background: #ff8c00;
}

.cer-kamgc-map-panel {
    position: absolute;
    right: 0;
    bottom: 68px;
    width: min(320px, calc(100vw - 2.5rem));
    padding: 1rem;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e7edf5;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.cer-kamgc-map-panel[hidden] {
    display: none;
}

.cer-kamgc-map-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    color: #10233f;
}

.cer-kamgc-map-close {
    border: none;
    background: transparent;
    color: #58667d;
    cursor: pointer;
    flex-shrink: 0;
}

.cer-kamgc-map-embed {
    width: 100%;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0.85rem;
}

.cer-kamgc-map-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.cer-kamgc-map-panel .cer-kamgc-button {
    width: 100%;
    min-height: 44px;
}

@media (max-width: 640px) {
    .cer-kamgc-map-widget {
        right: 1rem;
        bottom: 1rem;
    }
}

/* KAMGC reference layout refinements. The translucent glass layer above remains intact. */
.cer-kamgc-page {
    --kamgc-navy: #0f172a;
    --kamgc-body: #475569;
    --kamgc-blue: var(--cer-brand-color-2);
    --kamgc-orang: var(--cer-brand-color-1);
    --kamgc-blue-dark: var(--cer-brand-color-2);
    font-family: 'Plus Jakarta Sans', 'Open Sans', sans-serif;
}

.cer-kamgc-shell {
    display: flex;
    flex-direction: column;
}

.cer-kamgc-hero { order: 1; }
.cer-kamgc-main { order: 8; }
.cer-kamgc-speakers { order: 3; }
.cer-kamgc-pillars { order: 4; }
.cer-kamgc-objectives { order: 5; }
.cer-kamgc-summit-structure { order: 6; }
.cer-kamgc-partners { order: 7; }
.cer-kamgc-faq { order: 9; }
.cer-kamgc-map-widget { order: 10; }

.cer-kamgc-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.8fr);
    gap: 3rem;
    align-items: center;
}

.cer-kamgc-hero-copy {
    text-align: left;
}

.cer-kamgc-hero-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.cer-kamgc-emblem-badge,
.cer-kamgc-convening-badge,
.cer-kamgc-activism-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.66);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.cer-kamgc-emblem-badge {
    padding: 0.45rem 0.8rem 0.45rem 0.45rem;
    border-radius: 18px;
}

.cer-kamgc-emblem-badge img {
    width: 68px;
    height: 68px;
    object-fit: contain;
    border-radius: 50%;
}

.cer-kamgc-emblem-badge div {
    display: grid;
    gap: 0.15rem;
}

.cer-kamgc-emblem-badge strong,
.cer-kamgc-emblem-badge span,
.cer-kamgc-emblem-badge small {
    display: block;
}

.cer-kamgc-emblem-badge strong {
    color: #581c87;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cer-kamgc-emblem-badge span {
    color: #b45309;
    font-size: 0.72rem;
    font-weight: 800;
}

.cer-kamgc-emblem-badge small {
    color: var(--kamgc-body);
    font-size: 0.64rem;
}

.cer-kamgc-convening-badge,
.cer-kamgc-activism-badge {
    padding: 0.7rem 0.9rem;
    border-radius: 999px;
    color: #581c87;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cer-kamgc-convening-badge .material-symbols-outlined {
    color: #7e22ce;
}

.cer-kamgc-activism-badge {
    margin-bottom: 1.15rem;
    border-color: #fcd34d;
    background: rgba(254, 243, 199, 0.74);
    color: #92400e;
}

.cer-kamgc-activism-badge .material-symbols-outlined {
    color: #d97706;
}

.cer-kamgc-hero-copy h1,
.cer-kamgc-card h2,
.cer-kamgc-section-title h2,
.cer-kamgc-pillar-header h2 {
    color: var(--kamgc-navy);
    letter-spacing: -0.02em;
}

.cer-kamgc-hero-copy h1 {
    font-size: clamp(2.35rem, 4.2vw, 4.4rem);
}

.cer-kamgc-hero-copy h1 span {
    color: var(--kamgc-blue);
}

.cer-kamgc-hero-description,
.cer-kamgc-copy-stack p,
.cer-kamgc-form-intro,
.cer-kamgc-sponsor-box p,
.cer-kamgc-summary-box p,
.cer-kamgc-speaker-card p,
.cer-kamgc-section-title p,
.cer-kamgc-pillar-header p {
    color: var(--kamgc-body);
}

.cer-kamgc-hero-description {
    max-width: 44rem;
    margin: 0 0 1.25rem;
    font-size: 1rem;
    line-height: 1.75;
}

.cer-kamgc-hero-summary {
    position: static;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.58);
}

.cer-kamgc-hero-summary h3,
.cer-kamgc-summary-box h3 {
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
    color: var(--kamgc-body);
    font-size: 0.72rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.cer-kamgc-summary-metadata {
    display: grid;
    gap: 0.8rem;
}

.cer-kamgc-summary-metadata > div {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.48);
}

.cer-kamgc-summary-metadata > div > span:last-child {
    display: grid;
    gap: 0.2rem;
}

.cer-kamgc-summary-metadata small {
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 700;
}

.cer-kamgc-summary-metadata strong {
    color: var(--kamgc-navy);
    font-size: 0.82rem;
}

.cer-kamgc-summary-metadata a {
    color: var(--kamgc-orang);
}

.cer-kamgc-summary-metadata a:hover{
    color: #800080 !important;
}

.cer-kamgc-metadata-icon,
.cer-kamgc-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--kamgc-orang);
}

.cer-kamgc-heading-with-icon {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cer-kamgc-heading-with-icon h2 {
    margin: 0;
}

.cer-kamgc-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
}

.cer-kamgc-stats-grid > div {
    padding: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.52);
}

.cer-kamgc-stats-grid strong,
.cer-kamgc-stats-grid span {
    display: block;
}

.cer-kamgc-stats-grid strong {
    margin-bottom: 0.25rem;
    color: var(--kamgc-blue-dark);
    font-size: 1.35rem;
}

.cer-kamgc-stats-grid span {
    color: var(--kamgc-body);
    font-size: 0.68rem;
    line-height: 1.45;
}

.cer-kamgc-button-primary,
.cer-primary-button {
    background: var(--kamgc-blue);
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.2);
}

.cer-kamgc-button-primary:hover,
.cer-primary-button:hover,
.cer-payment-toggle-btn.is-active {
    background: var(--kamgc-blue-dark);
}

.cer-kamgc-button-secondary {
    border-color: var(--kamgc-blue);
    color: var(--kamgc-blue-dark);
}

.cer-kamgc-section-title::before,
.cer-kamgc-pillar-header::before {
    content: 'Featured leaders';
    display: block;
    margin-bottom: 0.4rem;
    color: var(--kamgc-blue-dark);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.cer-kamgc-pillar-header::before {
    content: 'Framework';
    color: #b45309;
}

.cer-kamgc-main > .cer-kamgc-two-col > .cer-kamgc-main-column > .cer-kamgc-card:nth-child(2) h2::before {
    content: 'Registration portal';
    display: block;
    margin-bottom: 0.45rem;
    color: var(--kamgc-blue-dark);
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

@media (max-width: 1024px) {
    .cer-kamgc-hero-inner {
        grid-template-columns: 1fr;
    }

    .cer-kamgc-hero-copy {
        text-align: center;
    }

    .cer-kamgc-hero-badges,
    .cer-kamgc-actions {
        justify-content: center;
    }

    .cer-kamgc-hero-description {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 640px) {
    .cer-kamgc-stats-grid {
        grid-template-columns: 1fr;
    }

    .cer-kamgc-emblem-badge {
        width: 100%;
        justify-content: flex-start;
    }
}
/* ==========================================================================
   SECTION EYEBROWS — one label per section, not "Featured leaders" everywhere
   `.cer-kamgc-section-title::before` hard-codes `content: 'Featured leaders'`
   and five sections use that class, so Objectives, Summit Structure, Partners
   and the FAQ were all labelled "Featured leaders". An eyebrow is a structural
   device: it should name the section it sits above, or not exist.

   NOTE: no background scrim is added here. Production (icrhk.nyimuki.com)
   renders the kitenge at full saturation with glass at rgba(255,255,255,.42)
   and blur(16px) and NO body::before overlay. A scrim was tried locally and
   desaturated the whole page away from the live look — do not reintroduce one.
   ========================================================================== */

.cer-kamgc-objectives .cer-kamgc-section-title::before {
    content: 'What we aim to achieve';
}

.cer-kamgc-summit-structure .cer-kamgc-section-title::before {
    content: 'How the three days run';
}

.cer-kamgc-partners .cer-kamgc-section-title::before {
    content: 'Convened with';
}

.cer-kamgc-faq .cer-kamgc-section-title::before {
    content: 'Before you register';
}

.cer-kamgc-pillars .cer-kamgc-pillar-header::before {
    content: 'Conference framework';
}

.cer-kamgc-speakers .cer-kamgc-section-title::before {
    content: 'Featured leaders';
}

/* ==========================================================================
   SCALE + DENSITY PASS
   --------------------------------------------------------------------------
   Reported: hero type and buttons too large, cards oversized, and large empty
   gaps down the page. Measured against the client's reference composition, the
   hero h1 ran to 4.4–4.5rem and the CTAs to a 54px min-height with 0.95rem
   padding, which pushed the summary card and everything below it down.

   Everything here is size and spacing only. No glass property is touched:
   background, backdrop-filter, border and radius on the glass containers are
   deliberately absent from this block.
   ========================================================================== */

/* --- Hero type: down roughly a third at the top end, and it now scales from
       the container rather than jumping between two hard-coded clamps. ---- */
.cer-kamgc-hero-copy h1 {
    font-size: clamp(1.75rem, 2.9vw, 2.9rem) !important;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 0.7rem;
    text-wrap: balance;
}

.cer-kamgc-hero-description {
    font-size: clamp(0.9rem, 1vw, 1rem) !important;
    line-height: 1.55;
    max-width: 62ch;
    margin-bottom: 0.9rem;
}

.cer-kamgc-hero {
    padding: clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.4vw, 2rem) !important;
}

.cer-kamgc-hero-inner {
    gap: clamp(1.25rem, 2.4vw, 2rem);
}

/* --- Buttons: relative, not fixed. 54px min-height on a 0.95rem/1.6rem pad
       made the CTAs read as panel-sized rather than button-sized. --------- */
.cer-kamgc-button {
    min-height: 0 !important;
    padding: 0.62em 1.35em !important;
    font-size: clamp(0.85rem, 0.95vw, 0.95rem) !important;
    gap: 0.45rem;
    border-radius: 999px;
}

.cer-kamgc-actions {
    gap: 0.6rem;
    margin-top: 0.25rem;
}

/* --- Summary card: same information, less air. ------------------------- */
.cer-kamgc-summary-metadata > div {
    padding: 0.55rem 0.7rem;
    gap: 0.6rem;
}

.cer-kamgc-summary-metadata small {
    font-size: 0.68rem;
}

.cer-kamgc-summary-metadata strong {
    font-size: 0.9rem;
}

.cer-kamgc-metadata-icon {
    width: 34px;
    height: 34px;
    font-size: 18px;
}

/* --- Speaker cards: were ~430x350 for a name and two short lines. ------- */
.cer-kamgc-speaker-card {
    padding: 1.1rem !important;
}

.cer-kamgc-speaker-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px;
    margin-bottom: 0.7rem;
}

.cer-kamgc-speaker-card h3 {
    font-size: 1rem !important;
    line-height: 1.25;
    margin: 0 0 0.15rem;
}

.cer-kamgc-speaker-card .cer-kamgc-speaker-role {
    font-size: 0.82rem !important;
    margin: 0 0 0.3rem;
}

.cer-kamgc-speaker-card p {
    font-size: 0.82rem !important;
    line-height: 1.45;
    margin: 0;
}

/* --- Section rhythm: the gaps between glass panels were doing the work
       that padding inside them should. Tighten both ends. ---------------- */
.cer-event-shell > section {
    padding-top: 0 !important;
}

.cer-kamgc-hero,
.cer-kamgc-main,
.cer-kamgc-speakers,
.cer-kamgc-pillars,
.cer-kamgc-objectives,
.cer-kamgc-summit-structure,
.cer-kamgc-partners,
.cer-kamgc-faq {
    margin-block: 0.6rem !important;
}

.cer-kamgc-card {
    padding: clamp(1.1rem, 1.8vw, 1.5rem) !important;
}

.cer-kamgc-section-title {
    margin-bottom: 1rem;
}

.cer-kamgc-section-title h2,
.cer-kamgc-pillar-header h2 {
    font-size: clamp(1.15rem, 1.7vw, 1.5rem) !important;
    margin-bottom: 0.35rem;
}

/* --- Emblem badge: sized for the hero corner, not the page. ------------ */
.cer-kamgc-emblem-badge img {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: contain;
    background: #231f20;
}

/* ==========================================================================
   MOTION
   --------------------------------------------------------------------------
   Hard rule for this page: never animate transform or opacity on an element
   that carries backdrop-filter. The blur is recomposited every frame and
   Safari drops it. So nothing below targets .cer-kamgc-hero, .cer-kamgc-main,
   .cer-kamgc-card or any other glass container — only their CONTENTS.

   No animation library: this page already loads GSAP 2, wow.js (never
   initialised), appear.js and three copies of animate.css via the theme.
   ========================================================================== */

@keyframes cer-rise {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes cer-emblem-in {
    from { opacity: 0; transform: scale(.86) rotate(-6deg); }
    to   { opacity: 1; transform: none; }
}

/* Hero load sequence — staggered, runs once, contents only. */
html.cer-js .cer-kamgc-hero-badges,
html.cer-js .cer-kamgc-activism-badge,
html.cer-js .cer-kamgc-hero-copy h1,
html.cer-js .cer-kamgc-hero-description,
html.cer-js .cer-kamgc-convened-by,
html.cer-js .cer-kamgc-actions,
html.cer-js .cer-kamgc-hero-summary > * {
    animation: cer-rise var(--cer-dur-enter) var(--cer-ease-out) both;
}

html.cer-js .cer-kamgc-hero-badges      { animation-delay: 40ms; }
html.cer-js .cer-kamgc-activism-badge   { animation-delay: 100ms; }
html.cer-js .cer-kamgc-hero-copy h1     { animation-delay: 160ms; }
html.cer-js .cer-kamgc-hero-description { animation-delay: 220ms; }
html.cer-js .cer-kamgc-convened-by      { animation-delay: 280ms; }
html.cer-js .cer-kamgc-actions          { animation-delay: 340ms; }

html.cer-js .cer-kamgc-emblem-badge img {
    animation: cer-emblem-in 620ms var(--cer-ease-spring) both;
    animation-delay: 80ms;
}

/* Micro-interactions — 150ms, transform-safe (none of these are glass). */
.cer-kamgc-button,
.cer-kamgc-speaker-card,
.cer-kamgc-compact-card,
.cer-kamgc-partner-card {
    transition: transform var(--cer-dur-micro) var(--cer-ease-out),
                box-shadow var(--cer-dur-micro) var(--cer-ease-out),
                border-color var(--cer-dur-micro) var(--cer-ease-out);
}

.cer-kamgc-button:hover,
.cer-kamgc-button:focus-visible {
    transform: translateY(-2px);
}

.cer-kamgc-speaker-card:hover,
.cer-kamgc-compact-card:hover,
.cer-kamgc-partner-card:hover {
    transform: translateY(-2px);
}

/* Arrow nudge on the primary CTA. */
.cer-kamgc-button-primary .material-symbols-outlined {
    transition: transform var(--cer-dur-micro) var(--cer-ease-out);
}

.cer-kamgc-button-primary:hover .material-symbols-outlined {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    html.cer-js .cer-kamgc-hero-badges,
    html.cer-js .cer-kamgc-activism-badge,
    html.cer-js .cer-kamgc-hero-copy h1,
    html.cer-js .cer-kamgc-hero-description,
    html.cer-js .cer-kamgc-convened-by,
    html.cer-js .cer-kamgc-actions,
    html.cer-js .cer-kamgc-hero-summary > *,
    html.cer-js .cer-kamgc-emblem-badge img {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   REVIEW FIXES — buttons, borders, alignment, select, pillar tooltips
   Nothing here touches a glass container's background, backdrop-filter,
   border or radius.
   ========================================================================== */

/* --- 1. Register Now was unreadable on hover -------------------------------
   `.cer-kamgc-button-primary { color:#fff }` is (0,1,0). The theme's generic
   `a:hover { color: … }` is (0,1,1) and therefore wins, so the label went dark
   blue on a blue fill. Pinned explicitly for every state.
   The fill also returns to the KAMGC brand orange #FAA41A — the emblem's own
   colour sheet and production both use orange here; the #2563eb it had drifted
   to is a stray Tailwind blue. */
.cer-kamgc-button-primary,
.cer-kamgc-button-primary:link,
.cer-kamgc-button-primary:visited,
.cer-kamgc-button-primary:hover,
.cer-kamgc-button-primary:focus,
.cer-kamgc-button-primary:focus-visible,
.cer-kamgc-button-primary:active {
    background: #faa41a !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(250, 164, 26, .26);
}

.cer-kamgc-button-primary:hover,
.cer-kamgc-button-primary:focus-visible {
    background: #e8940c !important;
}

.cer-kamgc-button-primary .material-symbols-outlined {
    color: #ffffff !important;
}

/* --- 2. Inner cards were competing with the glass --------------------------
   Panels inside a glass container had their own near-white fill plus a border,
   so they read as cards stacked on cards. Inside glass, separation should come
   from a hairline and a whisper of tint — not a second opaque surface. */
.cer-kamgc-card .cer-kamgc-callout,
.cer-kamgc-sponsor-box,
.cer-kamgc-summary-box,
.cer-kamgc-summary-metadata > div {
    background: rgba(255, 255, 255, .34) !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    box-shadow: none !important;
}

/* --- 3. Metrics band: give the three figures real edges ------------------- */
.cer-kamgc-stats-grid > div {
    padding: 0.85rem 1rem;
    border: 1px solid rgba(0, 110, 172, .16);
    border-radius: var(--cer-radius-md);
    background: rgba(255, 255, 255, .40);
    border-top: 3px solid #faa41a;
    transition: border-color var(--cer-dur-micro) var(--cer-ease-out),
                background-color var(--cer-dur-micro) var(--cer-ease-out);
}

.cer-kamgc-stats-grid > div:hover {
    background: rgba(255, 255, 255, .58);
    border-color: rgba(0, 110, 172, .34);
    border-top-color: #faa41a;
}

.cer-kamgc-stats-grid > div strong {
    display: block;
    margin-bottom: .2rem;
}

/* --- 4. Objectives / Summit Structure: align from the left ---------------- */
.cer-kamgc-objectives .cer-kamgc-compact-grid,
.cer-kamgc-summit-structure .cer-kamgc-compact-grid {
    justify-content: start !important;
    justify-items: stretch;
}

/* --- 5. Ticket select: style the control itself --------------------------- */
.cer-kamgc-card select,
select#cer-ticket-type {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    padding: .7rem 2.4rem .7rem .9rem;
    border: 1px solid rgba(0, 110, 172, .22);
    border-radius: var(--cer-radius-md);
    background-color: rgba(255, 255, 255, .72);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%230d6ea9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    font: inherit;
    font-size: .92rem;
    color: var(--cer-text-main);
    cursor: pointer;
    transition: border-color var(--cer-dur-micro) var(--cer-ease-out),
                box-shadow var(--cer-dur-micro) var(--cer-ease-out);
}

.cer-kamgc-card select:focus-visible,
select#cer-ticket-type:focus-visible {
    outline: none;
    border-color: #0d6ea9;
    box-shadow: 0 0 0 3px rgba(13, 110, 169, .16);
}

/* --- 6. Pillars as tooltips, not accordions ------------------------------
   The chevron/expand pattern is replaced with a popover on hover and focus.
   The panel keeps its id and stays associated with the trigger, so screen
   readers still reach the description; only the presentation changes.
   DESKTOP-ONLY: below 1025px the pillars use an overlay "flip" card instead. */
@media (min-width: 1025px) {
.cer-kamgc-pillars-card {
    overflow: visible !important;
    position: relative;
}

.cer-kamgc-pillars-front::after {
    content: none !important;
}

.cer-kamgc-pillars-front {
    cursor: default;
    padding-right: var(--cer-card-pad) !important;
}

.cer-kamgc-pillars-back {
    display: block !important;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translate(-50%, 4px);
    width: min(280px, 88vw);
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: #14202b;
    border-radius: var(--cer-radius-md);
    box-shadow: 0 14px 34px rgba(9, 18, 30, .30);
    transition: opacity var(--cer-dur-micro) var(--cer-ease-out),
                transform var(--cer-dur-micro) var(--cer-ease-out),
                visibility var(--cer-dur-micro);
}

.cer-kamgc-pillars-back::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #14202b;
}

.cer-kamgc-pillars-back p {
    margin: 0;
    padding: .7rem .85rem;
    color: #ffffff;
    font-size: .82rem;
    line-height: 1.5;
    font-weight: var(--cer-fw-regular);
}

.cer-kamgc-pillars-card:hover .cer-kamgc-pillars-back,
.cer-kamgc-pillars-card:focus-within .cer-kamgc-pillars-back,
.cer-kamgc-pillars-card.is-open .cer-kamgc-pillars-back {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
}

@media (prefers-reduced-motion: reduce) {
    .cer-kamgc-pillars-back { transition: none; }
}

/* ==========================================================================
   SPEAKER CARD ALIGNMENT · TOOLTIP COLOUR · SCROLL REVEAL
   ========================================================================== */

/* --- Speaker cards: equal height, one shared top edge, centred content ----
   The three cards were sitting on a slight diagonal (tops at 210 / 214 / 216)
   because each sized itself independently. Stretching them in the grid gives
   one top edge and one baseline for every card. */
.cer-kamgc-speaker-grid {
    align-items: stretch;
}

.cer-kamgc-speaker-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

.cer-kamgc-speaker-avatar {
    margin-inline: auto;
}

.cer-kamgc-speaker-card h3,
.cer-kamgc-speaker-card .cer-kamgc-speaker-role,
.cer-kamgc-speaker-card p {
    width: 100%;
    text-align: center;
}

/* Role sits last and is pushed to the bottom so every card's final line shares
   a baseline regardless of how long the name wraps. */
.cer-kamgc-speaker-card p {
    margin-top: auto;
    padding-top: .5rem;
}

/* --- Tooltip: brand yellow ground, white label ---------------------------- */
.cer-kamgc-pillars-back {
    background: #faa41a !important;
    box-shadow: 0 12px 28px rgba(250, 164, 26, .34) !important;
}

.cer-kamgc-pillars-back::after {
    border-top-color: #faa41a !important;
}

.cer-kamgc-pillars-back p {
    color: #ffffff !important;
    font-weight: var(--cer-fw-medium);
}

/* --- Animate on scroll ---------------------------------------------------
   Section contents rise in once as they enter the viewport. Applied to card
   CONTENTS only — never to a glass container, because animating transform on
   an element carrying backdrop-filter makes Safari drop the blur.
   `.cer-reveal` is added by JS and only hides under html.cer-js, so with no JS
   everything is visible from the start. */
html.cer-js .cer-reveal {
    opacity: 0;
}

html.cer-js .cer-reveal.is-visible {
    animation: cer-rise var(--cer-dur-enter) var(--cer-ease-out) both;
    animation-delay: var(--cer-reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    html.cer-js .cer-reveal,
    html.cer-js .cer-reveal.is-visible {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   RESPONSIVE PASS — 360px to 1920px
   --------------------------------------------------------------------------
   Measured across 360 / 390 / 430 / 768 / 1024 / 1280 / 1536 / 1920:
   scrollWidth === clientWidth at every width, so there is no horizontal
   overflow to fix. What follows corrects typography scale and spacing.
   ========================================================================== */

/* --- Body copy floor. The hero description computed to 14.4px on every
       mobile width. 16px is the readable minimum, and inputs below 16px make
       iOS Safari zoom the viewport on focus. ------------------------------ */
@media (max-width: 767px) {
    .cer-kamgc-hero-description,
    .cer-kamgc-copy-stack p,
    .cer-kamgc-card p,
    .cer-kamgc-form-intro,
    .cer-kamgc-sponsor-box p {
        font-size: 1rem !important;
        line-height: 1.6;
    }

    /* iOS zooms any focused control under 16px. */
    .cer-kamgc-card input,
    .cer-kamgc-card select,
    .cer-kamgc-card textarea,
    #cer-registration-form input,
    #cer-registration-form select {
        font-size: 16px !important;
    }
}

/* --- The pale band above the hero on small screens.
       `.cer-top-glass-backdrop` reserves min-height:10rem — 160px of empty
       frosted panel that reads as a rendering fault on a phone. It has no
       content, so it collapses below the desktop breakpoint. ------------- */
@media (max-width: 1024px) {
    .cer-top-glass-backdrop {
        display: none !important;
    }
}

/* --- Hero alignment. Badges sat left while the heading, description, byline
       and CTAs were centred, so nothing shared an edge. Left-aligned
       throughout, matching desktop. -------------------------------------- */
@media (max-width: 767px) {
    .cer-kamgc-hero-copy,
    .cer-kamgc-hero-copy h1,
    .cer-kamgc-hero-description,
    .cer-kamgc-convened-by,
    .cer-kamgc-actions,
    .cer-share-bar {
        text-align: left !important;
        justify-content: flex-start !important;
        margin-inline: 0 !important;
    }

    .cer-kamgc-hero-copy h1 {
        font-size: clamp(1.6rem, 7.4vw, 2rem) !important;
        line-height: 1.14;
    }

    .cer-kamgc-hero-badges {
        flex-wrap: wrap;
        gap: .5rem;
    }

    /* Full-width CTAs are easier to hit than side-by-side pills at 360px. */
    .cer-kamgc-actions {
        flex-direction: column;
        align-items: stretch;
        gap: .55rem;
    }

    .cer-kamgc-button {
        width: 100%;
        min-height: 46px !important;
    }
}

/* --- Touch targets. Anything tappable clears 44px below the desktop
       breakpoint. --------------------------------------------------------- */
@media (max-width: 1024px) {
    .cer-share-bar a,
    .cer-kamgc-payment-toggle button,
    .cer-payment-toggle-btn,
    .cer-kamgc-faq-item summary {
        min-height: 44px;
    }

    .cer-share-bar a {
        width: 44px;
        height: 44px;
    }
}

/* --- Section rhythm on small screens: the panel margins that read as
       generous at 1440 become wasted space at 390. ----------------------- */
@media (max-width: 767px) {
    .cer-kamgc-hero,
    .cer-kamgc-main,
    .cer-kamgc-speakers,
    .cer-kamgc-pillars,
    .cer-kamgc-objectives,
    .cer-kamgc-summit-structure,
    .cer-kamgc-partners,
    .cer-kamgc-faq {
        margin-block: .45rem !important;
        margin-inline: .5rem !important;
    }

    .cer-kamgc-hero {
        padding: 1.25rem 1rem 1.5rem !important;
    }

    .cer-kamgc-card {
        padding: 1.1rem !important;
    }

    .cer-kamgc-shell {
        width: 100%;
    }

    /* Single column everywhere — capped tracks would otherwise leave a lone
       centred card with dead space either side. */
    .cer-kamgc-compact-grid,
    .cer-kamgc-speaker-grid,
    .cer-kamgc-pillar-grid,
    .cer-kamgc-stats-grid {
        grid-template-columns: 1fr !important;
        justify-content: stretch !important;
    }

    .cer-kamgc-two-col {
        grid-template-columns: 1fr !important;
    }
}

/* --- Summary metadata rows: label and value were not sharing a left edge
       with the icon on narrow screens. ----------------------------------- */
@media (max-width: 767px) {
    .cer-kamgc-summary-metadata > div {
        display: flex;
        align-items: center;
        gap: .7rem;
    }

    .cer-kamgc-summary-metadata > div > span:last-child {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
}

/* --- Tooltips become inline panels below 1024px. A hover popover is not a
       usable pattern on touch, and an absolutely-positioned one can sit off
       the viewport edge on a narrow screen. ------------------------------ */
@media (max-width: 1024px) {
    .cer-kamgc-pillars-back {
        position: static !important;
        transform: none !important;
        width: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        margin: 0 var(--cer-card-pad) var(--cer-card-pad);
        border-radius: var(--cer-radius-sm);
        box-shadow: none !important;
    }

    .cer-kamgc-pillars-back::after {
        display: none !important;
    }
}

/* --- 2xl and up: stop the measure running away on very wide screens. ---- */
@media (min-width: 1536px) {
    .cer-kamgc-hero-description,
    .cer-kamgc-copy-stack p {
        max-width: 68ch;
    }

    .cer-kamgc-shell {
        max-width: 1600px;
    }
}

/* --- Hero top padding.
   An earlier density rule zeroed `.cer-event-shell > section { padding-top }`
   to close the gaps between panels. The hero is itself such a section, so it
   lost its internal top padding too and the emblem badge sat hard against the
   panel edge. Restore it on the hero only. ------------------------------- */
.cer-event-shell > section.cer-kamgc-hero,
.cer-kamgc-hero {
    padding-top: clamp(1.25rem, 2.2vw, 2rem) !important;
}

.cer-event-shell > section.cer-kamgc-main,
.cer-kamgc-main {
    padding-top: clamp(1.25rem, 2.2vw, 2rem) !important;
}

/* --- Body copy floor for tablet and desktop.
   14.4px held from 768px all the way to 1280px, which is small for running
   text at those widths. Scale it with the viewport instead. -------------- */
@media (min-width: 768px) {
    .cer-kamgc-hero-description,
    .cer-kamgc-copy-stack p,
    .cer-kamgc-card p,
    .cer-kamgc-form-intro {
        font-size: clamp(0.95rem, 0.55vw + 0.72rem, 1.0625rem) !important;
        line-height: 1.6;
    }
}

/* ==========================================================================
   REVIEW FIXES — hero badges, hosted payment height, speaker cards on mobile
   ========================================================================== */

/* --- 1. Hero badges: one shared left edge -------------------------------
   The emblem badge, the convening chip and the activism chip each sat at a
   different inset (48 / 82 / 44px) because the row centres its items. Aligned
   to the start so all three share the heading's left edge. */
.cer-kamgc-hero-badges {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    margin-inline: 0 !important;
}

.cer-kamgc-hero-badges > *,
.cer-kamgc-activism-badge {
    margin-inline: 0 !important;
    align-self: flex-start !important;
}

@media (max-width: 767px) {
    .cer-kamgc-hero-badges {
        flex-direction: column;
        gap: .5rem;
    }

    .cer-kamgc-hero-badges > *,
    .cer-kamgc-activism-badge {
        width: auto;
        max-width: 100%;
    }
}

/* --- 3. Speaker cards on mobile -----------------------------------------
   The desktop rule pushes the last line to the card bottom with margin-top
   auto so baselines line up across a row. In a single-column stack there is
   no row to align to, so that just inflated every card to ~285px. */
@media (max-width: 767px) {
    .cer-kamgc-speaker-card {
        height: auto;
        padding: .9rem 1rem !important;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: .85rem;
    }

    .cer-kamgc-speaker-card p {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .cer-kamgc-speaker-avatar {
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        flex: none;
    }

    .cer-kamgc-speaker-card > *:not(.cer-kamgc-speaker-avatar) {
        text-align: left !important;
    }

    /* Name, role and title stack beside the avatar. */
    .cer-kamgc-speaker-card h3,
    .cer-kamgc-speaker-card .cer-kamgc-speaker-role,
    .cer-kamgc-speaker-card p {
        width: auto;
        margin-block: 0;
    }
}

/* ==========================================================================
   DESIGN-FILE PASS  —  design.html
   --------------------------------------------------------------------------
   Purple and orange are the only accent colours inside the page CONTENT.
   The page chrome is untouched: kitenge ground, glass panels, their
   backdrop-filter, borders and radii are all left exactly as they are.
   ========================================================================== */

.cer-kamgc-page {
    --k-purple: #5A2A8C;
    --k-purple-l: #7B4BAE;
    --k-purple-tint: rgba(90, 42, 140, .10);
    --k-orange: #F0761E;
    --k-orange-l: #FFB454;
    --k-orange-tint: rgba(240, 118, 30, .12);
    --k-ink: #14202b;
    --k-muted: #647082;
}

/* --- Section eyebrow + rule in brand accents ---------------------------- */
.cer-kamgc-section-title::before,
.cer-kamgc-pillar-header::before {
    color: var(--k-orange) !important;
}

.cer-kamgc-divider-center {
    background: linear-gradient(90deg, var(--k-purple), var(--k-orange)) !important;
    height: 3px !important;
    border-radius: 2px;
}

/* ==========================================================================
   1. KEYNOTE SPEAKERS — minimal, per design.html
   No card, no border, no fill. Avatar tile left, name/role/title right,
   three evenly spaced across one row.
   ========================================================================== */

.cer-kamgc-speaker-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    justify-content: start !important;
    gap: 1.75rem 2rem !important;
    align-items: start;
}

.cer-kamgc-speaker-card {
    display: grid !important;
    grid-template-columns: 60px minmax(0, 1fr) !important;
    align-items: center;
    gap: 1rem !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    text-align: left !important;
    transform: none;
}

.cer-kamgc-speaker-card:hover {
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.cer-kamgc-speaker-avatar {
    grid-row: span 3;
    width: 60px !important;
    height: 60px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(140deg, var(--k-purple), var(--k-purple-l)) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.cer-kamgc-speaker-avatar .material-symbols-outlined { font-size: 26px; }
.cer-kamgc-speaker-avatar img { border-radius: 14px; object-fit: cover; width: 100%; height: 100%; }

.cer-kamgc-speaker-card h3 {
    text-align: left !important;
    font-size: .98rem !important;
    font-weight: 700;
    color: var(--k-ink) !important;
    margin: 0 !important;
    line-height: 1.25;
}

.cer-kamgc-speaker-card .cer-kamgc-speaker-role {
    text-align: left !important;
    font-size: .82rem !important;
    font-weight: 700;
    color: var(--k-orange) !important;
    margin: .1rem 0 0 !important;
}

.cer-kamgc-speaker-card p {
    text-align: left !important;
    font-size: .82rem !important;
    color: var(--k-muted) !important;
    margin: .05rem 0 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   2. THEMATIC PILLARS — one horizontal scrolling line
   Cards become rail items: coloured icon tile above a centred label, matching
   design.html. Icons alternate purple / orange.
   ========================================================================== */

.cer-kamgc-pillar-grid {
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: flex-start !important;
    gap: 1.25rem !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding: .25rem .25rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--k-purple) transparent;
}

.cer-kamgc-pillar-grid::-webkit-scrollbar { height: 6px; }
.cer-kamgc-pillar-grid::-webkit-scrollbar-track { background: rgba(20,32,43,.06); border-radius: 999px; }
.cer-kamgc-pillar-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--k-purple), var(--k-orange));
    border-radius: 999px;
}

.cer-kamgc-pillars-card {
    flex: 0 0 180px !important;
    scroll-snap-align: start;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    text-align: center;
}

.cer-kamgc-pillars-card:hover,
.cer-kamgc-pillars-card:focus-within {
    box-shadow: none !important;
    border: 0 !important;
}

.cer-kamgc-pillars-front {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    padding: .25rem !important;
    background: none;
    border: 0;
    width: 100%;
    cursor: pointer;
}

.cer-kamgc-pillars-icon {
    width: 62px !important;
    height: 62px !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: var(--k-orange-tint) !important;
    color: var(--k-orange) !important;
    transition: transform var(--cer-dur-micro) var(--cer-ease-out),
                background-color var(--cer-dur-micro) var(--cer-ease-out);
}

/* Alternate the two brand colours down the rail. */
.cer-kamgc-pillars-card:nth-child(even) .cer-kamgc-pillars-icon {
    background: var(--k-purple-tint) !important;
    color: var(--k-purple) !important;
}

.cer-kamgc-pillars-card:hover .cer-kamgc-pillars-icon,
.cer-kamgc-pillars-card:focus-within .cer-kamgc-pillars-icon {
    transform: translateY(-3px) scale(1.04);
}

.cer-kamgc-pillars-icon .material-symbols-outlined { font-size: 28px; }

.cer-kamgc-pillars-card h3 {
    font-size: .84rem !important;
    line-height: 1.35;
    font-weight: 700;
    color: var(--k-ink) !important;
    margin: 0 !important;
    text-align: center;
}

/* Description expands beneath the label. An absolutely-positioned tooltip
   would be clipped by the rail's overflow-x, so it is an in-flow caption. */
.cer-kamgc-pillars-back {
    position: static !important;
    transform: none !important;
    width: auto !important;
    background: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: grid !important;
    grid-template-rows: minmax(0, 0fr);
    transition: grid-template-rows var(--cer-dur-base) var(--cer-ease-out);
}

.cer-kamgc-pillars-back::after { display: none !important; }

.cer-kamgc-pillars-card:hover .cer-kamgc-pillars-back,
.cer-kamgc-pillars-card:focus-within .cer-kamgc-pillars-back,
.cer-kamgc-pillars-card.is-open .cer-kamgc-pillars-back {
    grid-template-rows: minmax(0, 1fr);
}

.cer-kamgc-pillars-back > * { overflow: hidden; min-height: 0; }

.cer-kamgc-pillars-back p {
    color: var(--k-muted) !important;
    font-size: .76rem !important;
    line-height: 1.45;
    text-align: center;
    padding: .5rem .25rem 0 !important;
    margin: 0 !important;
    font-weight: 400;
}

/* ==========================================================================
   3. OUR OBJECTIVES — outlined numerals
   Objectives are a set, not a sequence, so the numeral is a marker rather than
   a step: large, outlined, in brand orange, with the copy beside it. Distinct
   from both the pillar rail and the summit steps below.
   ========================================================================== */

.cer-kamgc-objectives .cer-kamgc-compact-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    justify-content: start !important;
    gap: 1.1rem !important;
    counter-reset: objective;
}

.cer-kamgc-objectives .cer-kamgc-compact-card {
    counter-increment: objective;
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
    padding: 1.1rem 1.2rem !important;
    background: rgba(255, 255, 255, .40) !important;
    border: 1px solid rgba(240, 118, 30, .28) !important;
    border-top: 3px solid var(--k-orange) !important;
    border-radius: 14px !important;
    transition: border-color var(--cer-dur-micro) var(--cer-ease-out),
                background-color var(--cer-dur-micro) var(--cer-ease-out);
}

.cer-kamgc-objectives .cer-kamgc-compact-card:hover {
    background: rgba(255, 255, 255, .60) !important;
    border-color: rgba(240, 118, 30, .55) !important;
}

.cer-kamgc-objectives .cer-kamgc-compact-card::before {
    content: counter(objective, decimal-leading-zero);
    grid-row: span 2;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--k-orange);
    letter-spacing: -.04em;
}

/* The stock icon tile is redundant beside a numeral. */
.cer-kamgc-objectives .cer-kamgc-compact-icon { display: none !important; }

.cer-kamgc-objectives .cer-kamgc-compact-card h3 {
    font-size: .98rem !important;
    color: var(--k-ink) !important;
    margin: 0 0 .25rem !important;
    line-height: 1.3;
}

.cer-kamgc-objectives .cer-kamgc-compact-card p {
    font-size: .84rem !important;
    color: var(--k-muted) !important;
    margin: 0 !important;
    line-height: 1.5;
}

/* ==========================================================================
   4. SUMMIT STRUCTURE — stepped rail
   This one IS a sequence (the days of the convening run in order), so numbered
   nodes on a connecting line are truthful rather than decorative. The pattern
   follows the milestone treatment on summit.health.go.ke.
   ========================================================================== */

.cer-kamgc-summit-structure .cer-kamgc-compact-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    justify-content: start !important;
    gap: 0 !important;
    counter-reset: step;
    position: relative;
}

.cer-kamgc-summit-structure .cer-kamgc-compact-card {
    counter-increment: step;
    position: relative;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 3.1rem 1rem 0 !important;
    text-align: left;
}

/* Connector line between nodes. */
.cer-kamgc-summit-structure .cer-kamgc-compact-card::after {
    content: "";
    position: absolute;
    top: 21px;
    left: calc(50% + 22px);
    right: calc(-50% + 22px);
    height: 2px;
    background: linear-gradient(90deg, var(--k-purple), var(--k-orange));
    opacity: .35;
}

.cer-kamgc-summit-structure .cer-kamgc-compact-card:last-child::after { display: none; }

/* Numbered node. */
.cer-kamgc-summit-structure .cer-kamgc-compact-card::before {
    content: counter(step);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--k-purple);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 6px 16px rgba(90, 42, 140, .30);
    transition: transform var(--cer-dur-micro) var(--cer-ease-out);
}

.cer-kamgc-summit-structure .cer-kamgc-compact-card:hover::before {
    transform: translateX(-50%) translateY(-3px);
}

.cer-kamgc-summit-structure .cer-kamgc-compact-icon { display: none !important; }

.cer-kamgc-summit-structure .cer-kamgc-compact-card h3,
.cer-kamgc-summit-structure .cer-kamgc-compact-card p {
    text-align: center;
}

.cer-kamgc-summit-structure .cer-kamgc-compact-card h3 {
    font-size: .95rem !important;
    color: var(--k-ink) !important;
    margin: 0 0 .3rem !important;
}

.cer-kamgc-summit-structure .cer-kamgc-compact-card p {
    font-size: .82rem !important;
    color: var(--k-muted) !important;
    margin: 0 !important;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .cer-kamgc-summit-structure .cer-kamgc-compact-card::after { display: none; }
    .cer-kamgc-summit-structure .cer-kamgc-compact-card {
        padding: 3.1rem 0 1.5rem !important;
    }
}

/* ==========================================================================
   5. SECURE YOUR PLACE — registration, per design.html
   Purple is the committed/active state, orange is the single primary action.
   ========================================================================== */

.cer-kamgc-card .cer-kamgc-form-intro { color: var(--k-muted) !important; }

/* Payment method toggle — pill track, solid purple on the active side. */
.cer-payment-toggle {
    background: rgba(90, 42, 140, .07) !important;
    border-radius: 999px !important;
    padding: 5px !important;
    gap: 4px !important;
    border: 1px solid rgba(90, 42, 140, .14) !important;
}

.cer-payment-toggle-btn {
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: .85rem !important;
    color: var(--k-muted) !important;
    background: transparent !important;
    transition: background-color var(--cer-dur-micro) var(--cer-ease-out),
                color var(--cer-dur-micro) var(--cer-ease-out);
}

.cer-payment-toggle-btn.is-active {
    background: var(--k-purple) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(90, 42, 140, .26);
}

.cer-payment-toggle-btn:hover:not(.is-active) {
    background: rgba(90, 42, 140, .10) !important;
    color: var(--k-purple) !important;
}

/* Fields */
.cer-field-group label {
    font-size: .78rem !important;
    font-weight: 700 !important;
    color: var(--k-ink) !important;
    letter-spacing: .01em;
}

.cer-registration-form input,
.cer-registration-form select,
.cer-kamgc-card input,
.cer-kamgc-card select {
    border: 1px solid rgba(90, 42, 140, .20) !important;
    border-radius: 12px !important;
    background-color: rgba(255, 255, 255, .70) !important;
    transition: border-color var(--cer-dur-micro) var(--cer-ease-out),
                box-shadow var(--cer-dur-micro) var(--cer-ease-out);
}

.cer-registration-form input:focus,
.cer-registration-form select:focus,
.cer-kamgc-card input:focus,
.cer-kamgc-card select:focus {
    outline: none;
    border-color: var(--k-purple) !important;
    box-shadow: 0 0 0 3px rgba(90, 42, 140, .15) !important;
}

.cer-phone-prefix {
    background: rgba(90, 42, 140, .08) !important;
    border-color: rgba(90, 42, 140, .20) !important;
    color: var(--k-purple) !important;
    font-weight: 700;
}

/* Uniform field height/alignment: the phone input inherited its own border from
   the generic input rule above, doubling up with the wrapper's border. */
.cer-registration-form .cer-field-group input,
.cer-registration-form .cer-field-group select,
.cer-registration-form .cer-phone-field {
    height: 52px;
    min-height: 52px;
    box-sizing: border-box;
}

/* Keep each label/field row at its natural size instead of letting the grid's
   default stretch unevenly split leftover row height between columns. */
.cer-registration-form .cer-field-group {
    align-content: start;
}

.cer-registration-form .cer-phone-field {
    align-items: stretch;
}

.cer-registration-form .cer-phone-field input {
    border: none !important;
    height: auto;
    min-height: 0;
}

.cer-registration-form .cer-phone-prefix {
    box-sizing: border-box;
}

/* Card mode: don't force the phone/ticket pair into 2 cramped columns on
   narrow screens — stack them like every other breakpoint does. */
@media (max-width: 767px) {
    .cer-registration-form.cer-card-selected .cer-form-grid {
        grid-template-columns: 1fr;
    }

    .cer-registration-form.cer-card-selected .cer-email-group {
        grid-column: auto;
    }
}

/* Primary submit — the one orange action on the page. */
.cer-primary-button,
.cer-card-submit .cer-primary-button {
    background: var(--k-orange) !important;
    border-color: var(--k-orange) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 24px rgba(240, 118, 30, .28) !important;
    transition: background-color var(--cer-dur-micro) var(--cer-ease-out),
                transform var(--cer-dur-micro) var(--cer-ease-out);
}

.cer-primary-button:hover,
.cer-primary-button:focus-visible {
    background: #e0680f !important;
    transform: translateY(-2px);
}

/* Payment summary panel */
.cer-kamgc-summary-box h3 {
    color: var(--k-ink) !important;
    letter-spacing: .12em;
}

.cer-kamgc-summary-row {
    border-bottom: 1px solid rgba(90, 42, 140, .12);
    padding-block: .55rem;
}

.cer-kamgc-summary-row span { color: var(--k-muted) !important; }
.cer-kamgc-summary-row strong { color: var(--k-ink) !important; }

.cer-kamgc-summary-total {
    border-top: 2px solid rgba(90, 42, 140, .18);
    margin-top: .4rem;
    padding-top: .8rem;
}

.cer-kamgc-summary-total strong {
    color: var(--k-purple) !important;
    font-size: 1.35rem !important;
    font-variant-numeric: tabular-nums;
}

.cer-kamgc-security {
    background: rgba(90, 42, 140, .08) !important;
    color: var(--k-purple) !important;
    border-radius: 999px;
    padding: .5rem .9rem;
    font-weight: 700;
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* Sponsor tier badges */
.cer-kamgc-sponsor-badge {
    background: linear-gradient(140deg, var(--k-purple), var(--k-purple-l)) !important;
    color: #fff !important;
    border-radius: 12px !important;
}

.cer-kamgc-inline-button {
    border: 1px solid var(--k-purple) !important;
    color: var(--k-purple) !important;
    border-radius: 999px !important;
    font-weight: 700;
    transition: background-color var(--cer-dur-micro) var(--cer-ease-out),
                color var(--cer-dur-micro) var(--cer-ease-out);
}

.cer-kamgc-inline-button:hover {
    background: var(--k-purple) !important;
    color: #fff !important;
}

/* Stats band + info callout in brand accents */
.cer-kamgc-stats-grid > div {
    border-top-color: var(--k-orange) !important;
    border-color: rgba(90, 42, 140, .16) !important;
}

.cer-kamgc-stats-grid > div strong { color: var(--k-purple) !important; }

.cer-kamgc-callout-icon,
.cer-kamgc-heading-icon {
    background: var(--k-purple-tint) !important;
    color: var(--k-purple) !important;
}

/* FAQ accents */
.cer-kamgc-faq-item summary { color: var(--k-ink) !important; }
.cer-kamgc-faq-item[open] summary { color: var(--k-purple) !important; }
.cer-kamgc-faq-caret { color: var(--k-orange) !important; }

/* --- Flatten the inner items -------------------------------------------
   The pillar and speaker items still carried their own backdrop-filter from
   the earlier card treatment, so each sat on a frosted panel. design.html has
   them flat — tile plus label, nothing behind.

   This is the ITEM level only. The section panels around them keep their
   glass: .cer-kamgc-hero, .cer-kamgc-main, .cer-kamgc-card,
   .cer-kamgc-speakers-card and .cer-kamgc-pillars-card-wrapper are all
   untouched. */
.cer-kamgc-pillars-card,
.cer-kamgc-speaker-card,
.cer-kamgc-pillars-front {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Objectives: a single card should not stretch the full panel width. */
.cer-kamgc-objectives .cer-kamgc-compact-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 440px)) !important;
}

/* Pillar icons read stronger against the kitenge once the panel is gone. */
.cer-kamgc-pillars-icon {
    background: rgba(240, 118, 30, .18) !important;
    box-shadow: 0 4px 14px rgba(240, 118, 30, .16);
}

.cer-kamgc-pillars-card:nth-child(even) .cer-kamgc-pillars-icon {
    background: rgba(90, 42, 140, .16) !important;
    box-shadow: 0 4px 14px rgba(90, 42, 140, .16);
}

/* ==========================================================================
   CORRECTIONS — speakers spacing, pillar tooltip restored
   ========================================================================== */

/* --- Keynote Speakers, matched to design.html ---------------------------
   Design markup:
     .glass-card.rounded-2xl.p-6.border.border-white/80  flex items-center gap-5
       > 64px rounded-2xl gradient tile (flex-shrink-0)
       > div > h3 text-base leading-tight
             > p text-xs font-bold mt-1
             > p text-xs font-medium        (no top margin)

   The previous version used a 3-row grid with the avatar spanning all three,
   which forced the rows to equal height and pushed the name, role and title
   far apart. Flex with a tight text stack is what the design actually does. */
.cer-kamgc-speaker-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.25rem !important;            /* gap-5 */
    padding: 1.5rem !important;          /* p-6  */
    border-radius: 16px !important;      /* rounded-2xl */
    background: rgba(255, 255, 255, .42) !important;
    -webkit-backdrop-filter: blur(var(--cer-glass-blur)) !important;
    backdrop-filter: blur(var(--cer-glass-blur)) !important;
    border: 1px solid rgba(255, 255, 255, .80) !important;
    box-shadow: none !important;
    text-align: left !important;
    height: auto !important;
    transition: box-shadow var(--cer-dur-micro) var(--cer-ease-out);
}

.cer-kamgc-speaker-card:hover {
    box-shadow: 0 10px 24px rgba(20, 32, 43, .10) !important;
}

.cer-kamgc-speaker-avatar {
    width: 64px !important;              /* w-16 */
    height: 64px !important;
    border-radius: 16px !important;
    flex: 0 0 64px !important;
    margin: 0 !important;
    background: linear-gradient(140deg, var(--k-purple), var(--k-purple-l)) !important;
    box-shadow: 0 4px 10px rgba(90, 42, 140, .24);
}

.cer-kamgc-speaker-avatar .material-symbols-outlined { font-size: 26px; }

/* The three text lines sit in the card's flex flow, so they need to wrap in
   their own column and stay tight against each other. */
.cer-kamgc-speaker-card h3 {
    font-size: 1rem !important;          /* text-base */
    line-height: 1.2 !important;         /* leading-tight */
    font-weight: 800 !important;
    margin: 0 !important;
    width: auto !important;
}

.cer-kamgc-speaker-card .cer-kamgc-speaker-role {
    font-size: .75rem !important;        /* text-xs */
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: .25rem 0 0 !important;       /* mt-1 */
    padding: 0 !important;
    width: auto !important;
}

.cer-kamgc-speaker-card p {
    font-size: .75rem !important;        /* text-xs */
    font-weight: 500 !important;
    line-height: 1.3 !important;
    margin: 0 !important;                /* no gap under the role */
    padding: 0 !important;
    width: auto !important;
}

/* Keep name/role/title as one block beside the avatar. */
.cer-kamgc-speaker-card > h3,
.cer-kamgc-speaker-card > .cer-kamgc-speaker-role,
.cer-kamgc-speaker-card > p {
    flex-basis: 100%;
}

.cer-kamgc-speaker-card {
    flex-wrap: wrap;
}

.cer-kamgc-speaker-avatar { align-self: center; }

/* --- Thematic Pillars: hover tooltip restored ---------------------------
   Reverts the in-flow caption back to a popover. A scroll rail clips
   absolutely-positioned children, so the rail carries top padding equal to the
   tooltip's height — the popover then sits inside the scroll box and is not
   cut off. */
.cer-kamgc-pillar-grid {
    padding-top: 132px !important;
    align-items: start;
}

/* Desktop-only orange tooltip (parity popup). Below 1025px the pillars use the
   overlay "flip" card defined in the mobile block, so this is scoped up. */
@media (min-width: 1025px) {
.cer-kamgc-pillars-back {
    position: absolute !important;
    left: 50% !important;
    bottom: calc(100% + 12px) !important;
    transform: translate(-50%, 4px) !important;
    width: min(240px, 70vw) !important;
    display: block !important;
    grid-template-rows: none !important;
    z-index: 40;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    background: var(--k-orange) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 26px rgba(240, 118, 30, .32) !important;
    transition: opacity var(--cer-dur-micro) var(--cer-ease-out),
                transform var(--cer-dur-micro) var(--cer-ease-out),
                visibility var(--cer-dur-micro) !important;
}

.cer-kamgc-pillars-back::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: var(--k-orange);
}

.cer-kamgc-pillars-back > * { overflow: visible; }

.cer-kamgc-pillars-back p {
    color: #ffffff !important;
    font-size: .78rem !important;
    line-height: 1.45;
    font-weight: 500;
    padding: .7rem .85rem !important;
    margin: 0 !important;
    text-align: left;
}

.cer-kamgc-pillars-card:hover .cer-kamgc-pillars-back,
.cer-kamgc-pillars-card:focus-within .cer-kamgc-pillars-back,
.cer-kamgc-pillars-card.is-open .cer-kamgc-pillars-back {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important;
}
}

/* Tooltips need a positioning context that is not the scroll container. */
.cer-kamgc-pillars-card { position: relative !important; }

@media (max-width: 1024px) {
    /* Touch: no hover, so the description sits in the flow instead. */
    .cer-kamgc-pillar-grid { padding-top: .25rem !important; }
    .cer-kamgc-pillars-back {
        position: static !important;
        transform: none !important;
        width: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: none !important;
        box-shadow: none !important;
        margin-top: .4rem;
    }
    .cer-kamgc-pillars-back::after { display: none !important; }
    .cer-kamgc-pillars-back p {
        color: var(--k-muted) !important;
        text-align: center;
        padding: 0 !important;
    }
}

/* --- Speakers: tight text stack -----------------------------------------
   The renderer emits h3, .cer-kamgc-speaker-role and p as SIBLINGS of the
   avatar — there is no wrapper div as there is in design.html. Flex-wrap made
   each line its own full-width flex row, which is why the three lines sat 43px
   and 36px apart instead of the design's 4px and 0.

   A 2-column grid with the avatar spanning all rows, `align-content: center`
   and `row-gap: 0` reproduces the design's nested-div stack without needing
   the markup changed. */
.cer-kamgc-speaker-card {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    justify-content: start !important;
    column-gap: 1.25rem !important;
    row-gap: 0 !important;
    flex-wrap: nowrap !important;
}

.cer-kamgc-speaker-avatar {
    grid-column: 1 !important;
    grid-row: 1 / -1 !important;
    align-self: center !important;
}

.cer-kamgc-speaker-card > h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    flex-basis: auto !important;
}

.cer-kamgc-speaker-card > .cer-kamgc-speaker-role {
    grid-column: 2 !important;
    grid-row: 2 !important;
    flex-basis: auto !important;
    margin: .25rem 0 0 !important;
}

.cer-kamgc-speaker-card > p {
    grid-column: 2 !important;
    grid-row: 3 !important;
    flex-basis: auto !important;
    margin: 0 !important;
}

/* --- Pillar rail: normal height, tooltip on top -------------------------
   The previous revision padded the rail 132px to stop `overflow-x: auto`
   clipping the popover. That worked but left an obvious empty band above the
   icons.

   z-index alone cannot fix this: `overflow-x: auto` forces overflow-y to
   auto as well, so anything outside the box is clipped regardless of stacking
   order. The scroll container itself has to go.

   At desktop the five pillars fit comfortably, so the rail does not need to
   scroll — it lays out normally with `overflow: visible`, and the tooltip
   simply sits above everything on a high z-index. Horizontal scrolling is
   kept below 1024px, where the description is already an in-flow caption and
   nothing needs to escape the box. */
@media (min-width: 1025px) {
    .cer-kamgc-pillar-grid {
        padding-top: .25rem !important;
        overflow: visible !important;
        flex-wrap: wrap;
        justify-content: center !important;
        row-gap: 1.5rem !important;
    }

    .cer-kamgc-pillars-card { overflow: visible !important; }

    .cer-kamgc-pillars-back { z-index: 999 !important; }
}

/* The section panel must not clip the popover either. */
.cer-kamgc-pillars,
.cer-kamgc-pillars-card-wrapper {
    overflow: visible !important;
}

/* Final section-scoped layout corrections. */
.cer-kamgc-objectives .cer-kamgc-compact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.cer-kamgc-summit-structure .cer-kamgc-compact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
}

.cer-kamgc-summit-structure .cer-kamgc-compact-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
    padding: 24px !important;
}

.cer-kamgc-summit-structure .cer-kamgc-compact-card::before {
    position: static;
    grid-row: span 2;
    transform: none;
}

.cer-kamgc-summit-structure .cer-kamgc-compact-card:hover::before {
    transform: translateY(-3px);
}

.cer-kamgc-summit-structure .cer-kamgc-compact-card h3,
.cer-kamgc-summit-structure .cer-kamgc-compact-card p {
    text-align: left;
}

.cer-kamgc-summit-structure .cer-kamgc-compact-card::after {
    display: none !important;
}

.cer-kamgc-summit-structure .cer-kamgc-compact-card h3::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 0.5rem;
    background: linear-gradient(90deg, var(--k-purple), var(--k-orange));
    opacity: 0.7;
}

@media (max-width: 767px) {
    .cer-kamgc-objectives .cer-kamgc-compact-grid,
    .cer-kamgc-summit-structure .cer-kamgc-compact-grid {
        grid-template-columns: 1fr !important;
    }

}

/* Final hero action and brand-color corrections. */
.cer-kamgc-page {
    --kamgc-blue: #006eac;
    --kamgc-blue-dark: #006eac;
}

.cer-kamgc-actions,
.cer-share-bar {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.cer-kamgc-page .cer-kamgc-button-primary,
.cer-kamgc-page .cer-primary-button,
.cer-kamgc-page .cer-kamgc-button-primary:hover,
.cer-kamgc-page .cer-primary-button:hover,
.cer-kamgc-page .cer-payment-toggle-btn.is-active {
    background: #800080 !important;
}

.cer-kamgc-button-secondary {
    border-color: #FAA41A !important;
    color: #FAA41A !important;
}

/* ==========================================================================
   FINAL UX CORRECTIONS — map widget, pillar single-open, hero summary list
   ========================================================================== */

/* --- Floating map widget: the purple toggle opens the map iframe itself,
   not a custom card with address text and a directions button. ---------- */
.cer-kamgc-map-panel {
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible;
    width: min(340px, calc(100vw - 2.5rem));
}

.cer-kamgc-map-iframe {
    display: block;
    width: 100%;
    height: 280px;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    background: #e7edf5;
}

.cer-kamgc-map-close {
    position: absolute;
    top: -12px;
    right: -12px;
    z-index: 2;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: #800080;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(128, 0, 128, 0.4);
}

.cer-kamgc-map-close:hover {
    background: #ff8c00;
}

/* --- Hero feature bullets now live inside the Conference Summary card,
   stacked under the metadata rows instead of centred above the CTA. ----- */
.cer-kamgc-hero-summary .cer-kamgc-feature-list {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.55rem;
    margin: 1rem 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
}

.cer-kamgc-hero-summary .cer-kamgc-feature-list li {
    width: 100%;
    align-items: flex-start;
}

.cer-kamgc-hero-summary .cer-kamgc-feature-list .material-symbols-outlined {
    font-size: 18px;
    line-height: 1.4;
}

/* --- Thematic pillars on touch/small screens: descriptions must start
   collapsed and open one at a time on tap (JS manages .is-open). Earlier
   rules forced every description visible below 1024px, which read as
   "modals open by default" and broke the mobile layout. Selector mirrors
   the earlier hover/focus rules so cascade order decides. -------------- */
@media (max-width: 1024px) {
    .cer-kamgc-pillars-back,
    .cer-kamgc-pillars-card:hover .cer-kamgc-pillars-back,
    .cer-kamgc-pillars-card:focus-within .cer-kamgc-pillars-back {
        display: grid !important;
        grid-template-rows: minmax(0, 0fr) !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin: 0 !important;
        transition: grid-template-rows var(--cer-dur-base) var(--cer-ease-out) !important;
    }

    .cer-kamgc-pillars-back > * {
        overflow: hidden !important;
        min-height: 0 !important;
    }

    .cer-kamgc-pillars-card.is-open .cer-kamgc-pillars-back {
        grid-template-rows: minmax(0, 1fr) !important;
        margin: 0.4rem 0 0 !important;
    }
}

/* --- Pillar popover close affordance ---------------------------------------
   A small × sits inside the open popover so the click-opened tooltip is no
   longer "stuck" on desktop. It floats top-right on the tooltip, and tucks to
   the top-right of the inline caption on smaller screens. JS handles the
   actual close (also re-click trigger / Escape / click-outside). ---------- */
.cer-kamgc-pillars-back {
    position: relative;
}

.cer-kamgc-pillars-close {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.16);
    color: #ffffff;
    cursor: pointer;
    line-height: 1;
    transition: background var(--cer-dur-micro) var(--cer-ease-out);
}

.cer-kamgc-pillars-close .material-symbols-outlined {
    font-size: 15px;
    line-height: 1;
}

.cer-kamgc-pillars-close:hover,
.cer-kamgc-pillars-close:focus-visible {
    background: rgba(0, 0, 0, 0.34);
}

/* Keep the tooltip/inline copy clear of the corner button. */
.cer-kamgc-pillars-back p {
    padding-right: 1.6rem !important;
}

/* Mobile inline caption: the popover has a light ground there, so the close
   button switches to a muted dark chip that reads against it. */
@media (max-width: 1024px) {
    .cer-kamgc-pillars-close {
        background: rgba(20, 32, 43, 0.12);
        color: var(--k-ink);
    }

    .cer-kamgc-pillars-close:hover,
    .cer-kamgc-pillars-close:focus-visible {
        background: rgba(20, 32, 43, 0.22);
    }
}

/* ==========================================================================
   HERO ALIGNMENT — feature bullets and share bar
   ========================================================================== */

/* --- Feature bullets. The list is the third child of the hero grid, so the
   base centred flex-wrap rule left every row starting at a different x and,
   on mobile, staggered the icons down the middle. Pin it to the copy column
   and give each row a fixed icon column so the ticks share one edge. ----- */
.cer-kamgc-hero-inner > .cer-kamgc-feature-list {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: start;
    justify-items: start;
    align-items: start;
    gap: 0.85rem 2rem;
    margin: 1.5rem 0 0;
    padding: 0;
    text-align: left;
}

.cer-kamgc-hero-inner > .cer-kamgc-feature-list li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
}

.cer-kamgc-hero-inner > .cer-kamgc-feature-list li .material-symbols-outlined {
    font-size: 20px;
    line-height: 1.45;
}

@media (max-width: 1024px) {
    .cer-kamgc-hero-inner > .cer-kamgc-feature-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.7rem;
        margin-top: 1.25rem;
    }
}

/* --- Share bar. Label and icons hold one line and share a centre line. -- */
.cer-kamgc-hero-copy .cer-share-bar {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    width: auto;
}

.cer-kamgc-hero-copy .cer-share-label {
    flex: 0 0 auto;
    margin-right: 0.25rem;
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 400px) {
    .cer-kamgc-hero-copy .cer-share-bar {
        gap: 0.35rem;
    }
}

/* --- Desktop hero: the four bullets read as one full-width row under the
   share bar, spanning both grid columns so they run to the end of the hero.
   Equal columns left a dead gap after the shortest bullet, so the row is
   auto-sized and spread instead, and the row clears "Share event:" above and
   the panel edge below without the hero grid's full row gap. ------------ */
@media (min-width: 1025px) {
    .cer-kamgc-hero-inner {
        row-gap: 0.25rem;
    }

    .cer-kamgc-hero-inner > .cer-kamgc-feature-list {
        grid-column: 1 / -1;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        grid-template-columns: none;
        justify-content: space-between;
        gap: 0 1.5rem;
        margin: 1rem 0 0.85rem;
        font-size: 0.9rem;
    }

    .cer-kamgc-hero-inner > .cer-kamgc-feature-list li {
        white-space: nowrap;
    }
}

/* ==========================================================================
   THEMATIC PILLARS — mobile layout
   ========================================================================== */

/* --- The rail stays a horizontal scroller on touch. It read as broken
   because 180px cards on a 390px screen left a second card sliced flat
   against the panel edge with no sense that it could move. Sizing cards to
   the viewport shows a deliberate peek of the next one, and snapping makes
   the swipe land cleanly. ------------------------------------------------ */
@media (max-width: 1024px) {
    .cer-kamgc-pillar-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory !important;
        scroll-padding-left: 0.25rem;
        -webkit-overflow-scrolling: touch;
        gap: 1rem !important;
        padding: 0.25rem 0.25rem 1rem !important;
        align-items: start;
    }

    .cer-kamgc-pillar-grid > .cer-kamgc-pillars-card {
        flex: 0 0 clamp(150px, 42vw, 200px) !important;
        scroll-snap-align: start;
    }

    /* The close button is absolutely positioned, so it escaped the collapsed
       0fr caption and floated between the cards while everything was shut.
       It belongs to the open state only. */
    .cer-kamgc-pillars-close {
        display: none !important;
    }

    .cer-kamgc-pillars-card.is-open .cer-kamgc-pillars-close {
        display: inline-flex !important;
    }

    .cer-kamgc-pillars-front::after {
        content: none !important;
    }
}

/* ==========================================================================
   OUR OBJECTIVES — card copy runs the full card width (<=1024px only)
   ========================================================================== */

/* --- On a narrow card the numeral spanning both rows stranded the
   description in the right-hand column behind an empty 54px gutter, so below
   1025px the numeral marks the title row only and the description runs edge
   to edge. Desktop keeps the original indent — the description starts on the
   heading's left edge — which reads correctly at three columns wide. ----- */
@media (max-width: 1024px) {
    .cer-kamgc-objectives .cer-kamgc-compact-card {
        grid-template-columns: 44px minmax(0, 1fr) !important;
        gap: 0.6rem 0.75rem !important;
        align-items: center;
    }

    .cer-kamgc-objectives .cer-kamgc-compact-card::before {
        grid-row: 1 !important;
        grid-column: 1 !important;
        align-self: center;
    }

    .cer-kamgc-objectives .cer-kamgc-compact-card h3 {
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        align-self: center;
    }

    .cer-kamgc-objectives .cer-kamgc-compact-card p {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }
}

/* ==========================================================================
   SUMMIT STRUCTURE — mobile spacing
   ========================================================================== */

/* --- Two rules were stacking on each other below 768px: the original rail
   treatment still padded each card 3.1rem at the top to clear an absolutely
   positioned node, while the later grid treatment had already moved that node
   into the flow. The result was ~50px of dead space above every step, plus
   the node column holding an empty gutter beside the description. --------- */
@media (max-width: 767px) {
    .cer-kamgc-summit-structure .cer-kamgc-compact-grid {
        gap: 1.25rem !important;
    }

    .cer-kamgc-summit-structure .cer-kamgc-compact-card {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 0.5rem 0.7rem;
        padding: 0 !important;
        align-items: center;
    }

    .cer-kamgc-summit-structure .cer-kamgc-compact-card::before {
        grid-row: 1;
        grid-column: 1;
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
        align-self: center;
    }

    .cer-kamgc-summit-structure .cer-kamgc-compact-card h3 {
        grid-column: 2;
        grid-row: 1;
        margin: 0 !important;
    }

    .cer-kamgc-summit-structure .cer-kamgc-compact-card h3::after {
        margin-top: 0.35rem;
    }

    .cer-kamgc-summit-structure .cer-kamgc-compact-card p {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* --- Payment toggle when it stacks. Below 820px the two tabs drop to a single
   column, but the track kept its 999px pill radius — on a two-row box that
   renders as a squashed ellipse with the active tab appearing to spill out of
   its sides. Stacked, it needs rectangle geometry. ----------------------- */
@media (max-width: 820px) {
    .cer-payment-toggle {
        border-radius: 14px !important;
        padding: 6px !important;
        gap: 6px !important;
    }

    .cer-payment-toggle-btn {
        width: 100%;
        border-radius: 10px !important;
    }
}

/* ==========================================================================
   THEMATIC PILLARS — small-screen popup (<=1024px)
   --------------------------------------------------------------------------
   A centred popup in the brand orange with its own cancel button, not an
   inline expansion. JS moves the panel out of its card into this body-level
   fixed host while it is open, so the card keeps its height and the document
   never reflows; the page is scroll-locked behind it. The portal is necessary
   rather than a fixed-in-place panel: `.cer-kamgc-pillars-card-wrapper`
   carries backdrop-filter and therefore becomes the containing block for any
   fixed descendant, and the rail's overflow-x would clip an absolute one.
   Desktop (>=1025px) keeps its own hover tooltip untouched.
   ========================================================================== */
.cer-pillar-pop,
.cer-pillar-pop-backdrop {
    /* Both hosts live on <body>, outside .cer-event-page/.cer-kamgc-page, so
       the page's design tokens do not reach them. Restate the few needed. */
    --k-orange: #F0761E;
    --cer-radius-xl: 24px;
    --cer-dur-micro: 150ms;
    --cer-dur-base: 250ms;
    --cer-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
}

.cer-pillar-pop-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(11, 20, 28, 0.5);
    opacity: 0;
    transition: opacity var(--cer-dur-base) var(--cer-ease-out);
}

.cer-pillar-pop-backdrop.is-visible {
    opacity: 1;
}

.cer-pillar-pop {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100001;
    width: min(340px, calc(100vw - 2.5rem));
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
    padding: 1.35rem 1.25rem 1.35rem;
    background: var(--k-orange);
    color: #ffffff;
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(240, 118, 30, 0.36);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
    transition: opacity var(--cer-dur-base) var(--cer-ease-out),
                transform var(--cer-dur-base) var(--cer-ease-out);
}

.cer-pillar-pop.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.cer-pillar-pop-cancel {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.18);
    color: #ffffff;
    cursor: pointer;
    transition: background var(--cer-dur-micro) var(--cer-ease-out);
}

.cer-pillar-pop-cancel:hover,
.cer-pillar-pop-cancel:focus-visible {
    background: rgba(0, 0, 0, 0.34);
}

.cer-pillar-pop-cancel .material-symbols-outlined {
    font-size: 19px;
    line-height: 1;
}

.cer-pillar-pop-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cer-pillar-pop-title {
    margin: 0 2rem 0.5rem 0 !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    text-align: left !important;
}

/* The portalled panel is no longer a collapsible row inside a card: reset the
   0fr/1fr machinery and every tooltip artefact it carries — the host owns the
   chrome now. */
.cer-pillar-pop .cer-kamgc-pillars-back {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    transform: none !important;
    grid-template-rows: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: none !important;
}

/* Kill the tooltip arrow and the panel's own corner ×; the host has a cancel
   button of its own. */
.cer-pillar-pop .cer-kamgc-pillars-back::before,
.cer-pillar-pop .cer-kamgc-pillars-back::after,
.cer-pillar-pop .cer-kamgc-pillars-close {
    display: none !important;
}

.cer-pillar-pop .cer-kamgc-pillars-back > * {
    overflow: visible !important;
    min-height: 0 !important;
}

.cer-pillar-pop .cer-kamgc-pillars-back p {
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    text-align: left !important;
}

/* No page scroll while the popup is open. */
body.cer-pillar-pop-lock {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .cer-pillar-pop,
    .cer-pillar-pop-backdrop {
        transition: none !important;
    }
}

/* Desktop keeps the in-card tooltip; these hosts are never used there. */
@media (min-width: 1025px) {
    .cer-pillar-pop,
    .cer-pillar-pop-backdrop {
        display: none !important;
    }
}

/* ==========================================================================
   PAYMENT TOGGLE — side by side below 1025px
   --------------------------------------------------------------------------
   The two tabs dropped to a single column below 820px, which pushed the form
   down and read as two unrelated buttons rather than one switch. They stay
   side by side at every width now; "Credit/Debit Card" is too long for half a
   phone width, so it shortens to "Card" and the full name returns on desktop.
   ========================================================================== */

/* Short label is desktop-hidden; the pair swaps at the breakpoint. */
.cer-toggle-label-short {
    display: none;
}

@media (max-width: 1024px) {
    .cer-payment-toggle {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        /* Back to the pill track — the rectangle geometry below only existed
           to serve the stacked layout. */
        border-radius: 999px !important;
        padding: 5px !important;
        gap: 4px !important;
    }

    .cer-payment-toggle-btn {
        width: 100%;
        border-radius: 999px !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        white-space: nowrap;
    }

    .cer-toggle-label-full {
        display: none;
    }

    .cer-toggle-label-short {
        display: inline;
    }
}

/* ==========================================================================
   HERO COUNTDOWN — inside the Conference Summary card
   --------------------------------------------------------------------------
   Sits between the card heading and the Starts / Ends rows, so the dates and
   the time left to them read as one block. Tiles reuse the summary rows'
   white-on-glass fill and 14px radius; digits use the hero heading's
   Montserrat 800. Every rule is qualified through .cer-kamgc-countdown so
   the card's generic `strong` / `p` rules cannot restyle it. The block is a
   direct child of the hero summary, so it already joins the hero load
   sequence and that sequence's reduced-motion override.
   ========================================================================== */
.cer-kamgc-countdown {
    display: grid;
    gap: 0.65rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.cer-kamgc-countdown .cer-kamgc-countdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.cer-kamgc-countdown .cer-kamgc-countdown-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Plus Jakarta Sans', 'Open Sans', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--k-purple, #5A2A8C);
}

.cer-kamgc-countdown .cer-kamgc-countdown-label::before,
.cer-kamgc-countdown .cer-kamgc-countdown-pill::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--k-orange, #F0761E);
    animation: cer-countdown-beat 2s ease-in-out infinite;
}

.cer-kamgc-countdown .cer-kamgc-countdown-tz {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #6b7683;
}

/* auto-fit, not a fixed four: in the final 24 hours the Days tile drops out
   and the remaining three share the row. Four 54px tiles fit the ~254px the
   card has at 390px. */
.cer-kamgc-countdown .cer-kamgc-countdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
    gap: 0.5rem;
}

.cer-kamgc-countdown .cer-kamgc-countdown-unit {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    padding: 0.75rem 0.25rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.62);
}

.cer-kamgc-countdown .cer-kamgc-countdown-unit b {
    font-family: 'Montserrat', 'Open Sans', sans-serif;
    font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.75rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
}

.cer-kamgc-countdown .cer-kamgc-countdown-unit span {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6b7683;
}

/* Final 24 hours: days are always zero, so the tile goes and the digits
   take the orange accent. #C8590A rather than the brand orange keeps the
   large digits above 3:1 on the white glass. */
.cer-kamgc-countdown[data-state="final"] .cer-kamgc-countdown-unit[data-unit="days"] {
    display: none;
}

.cer-kamgc-countdown[data-state="final"] .cer-kamgc-countdown-unit b {
    color: #C8590A;
}

/* One state visible at a time; data-state is printed by PHP and kept
   current by cer-registration.js. */
.cer-kamgc-countdown .cer-kamgc-countdown-live,
.cer-kamgc-countdown .cer-kamgc-countdown-done {
    display: none;
}

.cer-kamgc-countdown[data-state="live"] .cer-kamgc-countdown-live,
.cer-kamgc-countdown[data-state="done"] .cer-kamgc-countdown-done {
    display: grid;
    gap: 0.55rem;
}

.cer-kamgc-countdown[data-state="live"] .cer-kamgc-countdown-head,
.cer-kamgc-countdown[data-state="live"] .cer-kamgc-countdown-grid,
.cer-kamgc-countdown[data-state="done"] .cer-kamgc-countdown-head,
.cer-kamgc-countdown[data-state="done"] .cer-kamgc-countdown-grid {
    display: none;
}

.cer-kamgc-countdown .cer-kamgc-countdown-pill {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--k-orange-tint, rgba(240, 118, 30, 0.12));
    color: #9C4308;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cer-kamgc-countdown .cer-kamgc-countdown-pill::before {
    animation-duration: 1.4s;
}

.cer-kamgc-countdown .cer-kamgc-countdown-day {
    font-family: 'Montserrat', 'Open Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: #0f172a;
}

.cer-kamgc-countdown .cer-kamgc-countdown-days {
    display: grid;
    grid-template-columns: repeat(var(--cer-day-count, 3), minmax(0, 1fr));
    gap: 0.4rem;
}

.cer-kamgc-countdown .cer-kamgc-countdown-segment {
    display: grid;
    gap: 0.35rem;
}

/* Fill is a scaleX, not a width, so the per-second update never triggers
   layout. */
.cer-kamgc-countdown .cer-kamgc-countdown-segment i {
    position: relative;
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(20, 32, 43, 0.1);
}

.cer-kamgc-countdown .cer-kamgc-countdown-segment i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--k-purple, #5A2A8C), var(--k-orange, #F0761E));
    transform: scaleX(var(--cer-fill, 0));
    transform-origin: left;
}

.cer-kamgc-countdown .cer-kamgc-countdown-segment small {
    font-size: 0.66rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #6b7683;
}

.cer-kamgc-countdown .cer-kamgc-countdown-note {
    font-size: 0.8rem;
    color: var(--kamgc-body, #475467);
}

.cer-kamgc-countdown .cer-kamgc-countdown-done-title {
    font-family: 'Montserrat', 'Open Sans', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;
    color: #0f172a;
}

@keyframes cer-countdown-beat {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
    .cer-kamgc-countdown .cer-kamgc-countdown-label::before,
    .cer-kamgc-countdown .cer-kamgc-countdown-pill::before {
        animation: none;
    }
}

/* ==========================================================================
   COLOUR LAYERS — alternating brand-colour sections over the pattern
   --------------------------------------------------------------------------
   Client review: the page read as one washed-out surface. Every panel was
   the same 42% white glass, the pattern showed only as a 14–20px line between
   them, and a 1400px cap left wide screens mostly background.

   - Panels run to within one thin strip of the screen edge on every side.
     Content inside stays centred at a readable width.
   - Sections alternate: Hero, Pillars, Summit Structure and FAQ stay glass;
     Speakers, Objectives and Registration become solid KAMGC blue.
   - Cards use the logo's colours (KAMGC Color Codes): blue #006EAC with white
     text, orange #FAA41A with dark text, and white. Purple and #F0761E remain
     small accents only.

   Everything is scoped through `body .cer-kamgc-page` with !important because
   earlier passes pin most of these properties with !important. Deleting this
   block reverts the page.
   ========================================================================== */
.cer-kamgc-page {
    --cl-blue: purple;
    --cl-orange: var(--cer-brand-color-1);
    --cl-ink: #14202B;
    --cl-body: #3F4B59;
    --cl-muted: #6B7683;
    --cl-line: #E3E9EF;
    --cl-strip: clamp(14px, 1.8vw, 28px);
    --cl-content: 1240px;
    --cl-pad-block: clamp(22px, 4vw, 48px);
    --cl-pad-inline: max(clamp(18px, 4vw, 48px), calc((100% - var(--cl-content)) / 2));
    --cl-radius: 28px;
    --cl-card-radius: 18px;
    --cl-shadow-card: 0 14px 30px rgba(0, 40, 70, .22);
}

@media (max-width: 767px) {
    .cer-kamgc-page { --cl-radius: 20px; }
}

/* --- Full-width layout with one thin strip of pattern ------------------- */
body .cer-event-page .cer-event-shell {
    max-width: none !important;
}

body .cer-kamgc-page .cer-kamgc-shell {
    width: 100% !important;
    max-width: none !important;
    padding: var(--cl-strip) !important;
    gap: var(--cl-strip) !important;
}

body .cer-kamgc-page .cer-event-shell > section,
body .cer-kamgc-page .cer-kamgc-shell > section {
    margin: 0 !important;
    border-bottom: 0 !important;
}

/* Hero and Registration carry their surface on the section itself; the other
   sections carry it on their single inner card. */
body .cer-kamgc-page .cer-kamgc-hero,
body .cer-kamgc-page .cer-kamgc-main,
body .cer-kamgc-page .cer-kamgc-speakers-card,
body .cer-kamgc-page .cer-kamgc-pillars-card-wrapper,
body .cer-kamgc-page .cer-kamgc-objectives-card,
body .cer-kamgc-page .cer-kamgc-summit-structure-card,
body .cer-kamgc-page .cer-kamgc-partners-card,
body .cer-kamgc-page .cer-kamgc-faq-card {
    border-radius: var(--cl-radius) !important;
    padding: var(--cl-pad-block) var(--cl-pad-inline) !important;
}

/* --- Solid blue sections ------------------------------------------------- */
body .cer-kamgc-page .cer-kamgc-main,
body .cer-kamgc-page .cer-kamgc-speakers-card,
body .cer-kamgc-page .cer-kamgc-objectives-card,
body .cer-kamgc-page .cer-kamgc-main:hover,
body .cer-kamgc-page .cer-kamgc-speakers-card:hover,
body .cer-kamgc-page .cer-kamgc-objectives-card:hover {
    background: var(--cl-blue) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: 0 22px 60px rgba(0, 86, 136, .35) !important;
}

body .cer-kamgc-page .cer-kamgc-speakers-card .cer-kamgc-section-title h2,
body .cer-kamgc-page .cer-kamgc-objectives-card .cer-kamgc-section-title h2 {
    color: #fff !important;
}

body .cer-kamgc-page .cer-kamgc-speakers-card .cer-kamgc-section-title p,
body .cer-kamgc-page .cer-kamgc-objectives-card .cer-kamgc-section-title p {
    color: rgba(255, 255, 255, .86) !important;
}

body .cer-kamgc-page .cer-kamgc-speakers-card .cer-kamgc-section-title::before,
body .cer-kamgc-page .cer-kamgc-objectives-card .cer-kamgc-section-title::before {
    color: var(--cl-orange) !important;
}

body .cer-kamgc-page .cer-kamgc-speakers-card .cer-kamgc-divider-center,
body .cer-kamgc-page .cer-kamgc-objectives-card .cer-kamgc-divider-center {
    background: var(--cl-orange) !important;
}

/* --- Hero (glass): white summary card, blue countdown, brand badges ----- */
body .cer-kamgc-page .cer-kamgc-hero-summary,
body .cer-kamgc-page .cer-kamgc-hero-summary:hover {
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    border-radius: var(--cl-card-radius) !important;
    box-shadow: 0 20px 44px rgba(15, 23, 42, .14) !important;
}

body .cer-kamgc-page .cer-kamgc-hero-summary .cer-kamgc-summary-metadata {
    gap: 0 !important;
}

body .cer-kamgc-page .cer-kamgc-hero-summary .cer-kamgc-summary-metadata > div {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--cl-line) !important;
    border-radius: 0 !important;
    padding: 12px 2px !important;
}

body .cer-kamgc-page .cer-kamgc-hero-summary .cer-kamgc-summary-metadata > div:first-child {
    border-top: 0 !important;
}

body .cer-kamgc-page .cer-kamgc-countdown {
    background: var(--cl-blue);
    border-radius: 14px;
    padding: 14px !important;
    border-bottom: 0 !important;
}

body .cer-kamgc-page .cer-kamgc-countdown .cer-kamgc-countdown-label { color: #fff; }
body .cer-kamgc-page .cer-kamgc-countdown .cer-kamgc-countdown-label::before { background: var(--cl-orange); }
body .cer-kamgc-page .cer-kamgc-countdown .cer-kamgc-countdown-tz { color: rgba(255, 255, 255, .72); }

body .cer-kamgc-page .cer-kamgc-countdown .cer-kamgc-countdown-unit {
    background: #fff;
    border: 0;
    border-radius: 12px;
}

body .cer-kamgc-page .cer-kamgc-countdown .cer-kamgc-countdown-unit b { color: var(--cl-ink); }
body .cer-kamgc-page .cer-kamgc-countdown[data-state="final"] .cer-kamgc-countdown-unit b { color: #C8590A; }
body .cer-kamgc-page .cer-kamgc-countdown .cer-kamgc-countdown-pill { background: rgba(255, 255, 255, .18); color: #fff; }
body .cer-kamgc-page .cer-kamgc-countdown .cer-kamgc-countdown-day,
body .cer-kamgc-page .cer-kamgc-countdown .cer-kamgc-countdown-done-title { color: #fff; }
body .cer-kamgc-page .cer-kamgc-countdown .cer-kamgc-countdown-note,
body .cer-kamgc-page .cer-kamgc-countdown .cer-kamgc-countdown-segment small { color: rgba(255, 255, 255, .85); }
body .cer-kamgc-page .cer-kamgc-countdown .cer-kamgc-countdown-segment i { background: rgba(255, 255, 255, .25); }
body .cer-kamgc-page .cer-kamgc-countdown .cer-kamgc-countdown-segment i::after { background: var(--cl-orange); }

body .cer-kamgc-page .cer-kamgc-emblem-badge,
body .cer-kamgc-page .cer-kamgc-convening-badge {
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
}

body .cer-kamgc-page .cer-kamgc-activism-badge {
    background: var(--cl-orange) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    color: var(--cl-ink) !important;
}

body .cer-kamgc-page .cer-kamgc-activism-badge .material-symbols-outlined { color: var(--cl-ink) !important; }

/* --- Speakers: white cards on blue ------------------------------------- */
body .cer-kamgc-page .cer-kamgc-speaker-card,
body .cer-kamgc-page .cer-kamgc-speaker-card:hover {
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    border-radius: var(--cl-card-radius) !important;
    box-shadow: var(--cl-shadow-card) !important;
}

body .cer-kamgc-page .cer-kamgc-speaker-avatar {
    background: var(--cl-orange) !important;
    color: var(--cl-ink) !important;
    box-shadow: none !important;
}

body .cer-kamgc-page .cer-kamgc-speaker-avatar .material-symbols-outlined { color: var(--cl-ink) !important; }
body .cer-kamgc-page .cer-kamgc-speaker-card h3 { color: var(--cl-ink) !important; }
body .cer-kamgc-page .cer-kamgc-speaker-card .cer-kamgc-speaker-role { color: var(--cl-blue) !important; }

/* --- Objectives: white cards on blue, icon tile instead of a numeral ---- */
body .cer-kamgc-page .cer-kamgc-objectives .cer-kamgc-compact-card,
body .cer-kamgc-page .cer-kamgc-objectives .cer-kamgc-compact-card:hover {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    /* First row is the icon's height, so every title centres on its icon. */
    grid-template-rows: minmax(48px, auto) auto !important;
    column-gap: 14px !important;
    row-gap: 8px !important;
    align-items: start !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: var(--cl-card-radius) !important;
    box-shadow: var(--cl-shadow-card) !important;
    padding: 22px !important;
}

body .cer-kamgc-page .cer-kamgc-objectives .cer-kamgc-compact-card::before { display: none !important; }

body .cer-kamgc-page .cer-kamgc-objectives .cer-kamgc-compact-icon {
    display: grid !important;
    place-items: center;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    background: var(--cl-orange) !important;
    color: var(--cl-ink) !important;
    box-shadow: none !important;
}

body .cer-kamgc-page .cer-kamgc-objectives .cer-kamgc-compact-icon .material-symbols-outlined { font-size: 26px; color: var(--cl-ink) !important; }

body .cer-kamgc-page .cer-kamgc-objectives .cer-kamgc-compact-card h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center;
    color: var(--cl-ink) !important;
}

body .cer-kamgc-page .cer-kamgc-objectives .cer-kamgc-compact-card p {
    grid-column: 2 !important;
    grid-row: 2 !important;
    color: var(--cl-body) !important;
}

/* --- Pillars (glass): brand-coloured cards; description stays a popover
       (hover tooltip on desktop, centred popup below 1025px) ------------- */
body .cer-kamgc-page .cer-kamgc-pillars-card-wrapper,
body .cer-kamgc-page .cer-kamgc-pillar-grid {
    overflow: visible !important;
}

body .cer-kamgc-page .cer-kamgc-pillar-grid {
    display: grid !important;
    /* Dynamically stretches items up to a maximum of 5 columns */
    grid-template-columns: repeat(auto-fit, minmax(max(180px, calc((100% - 64px) / 5)), 1fr)) !important;
    gap: 16px !important;
    padding: 0 !important;
    align-items: stretch !important;
}
body .cer-kamgc-page .cer-kamgc-pillar-grid > .cer-kamgc-pillars-card {
    flex: none !important;
    display: grid !important;
}

body .cer-kamgc-page .cer-kamgc-pillars-front {
    display: grid !important;
    align-content: start !important;
    justify-items: start !important;
    gap: 14px !important;
    width: 100% !important;
    height: 100% !important;
    padding: 18px !important;
    text-align: left !important;
    border-radius: var(--cl-card-radius) !important;
    background: var(--cl-orange) !important;
    color: var(--cl-ink) !important;
    box-shadow: 0 14px 28px rgba(180, 100, 0, .22) !important;
    transition: transform var(--cer-dur-micro) var(--cer-ease-out) !important;
}

body .cer-kamgc-page .cer-kamgc-pillars-card:nth-child(even) .cer-kamgc-pillars-front {
    background: var(--cl-blue) !important;
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(0, 86, 136, .26) !important;
}

body .cer-kamgc-page .cer-kamgc-pillars-card:hover .cer-kamgc-pillars-front,
body .cer-kamgc-page .cer-kamgc-pillars-card:focus-within .cer-kamgc-pillars-front,
body .cer-kamgc-page .cer-kamgc-pillars-card.is-open .cer-kamgc-pillars-front {
    transform: translateY(-3px);
}

body .cer-kamgc-page .cer-kamgc-pillars-front::after { content: none !important; }

body .cer-kamgc-page .cer-kamgc-pillars-icon,
body .cer-kamgc-page .cer-kamgc-pillars-card:nth-child(even) .cer-kamgc-pillars-icon {
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: var(--cl-ink) !important;
    box-shadow: none !important;
    transform: none !important;
}

body .cer-kamgc-page .cer-kamgc-pillars-icon .material-symbols-outlined { font-size: 26px !important; color: var(--cl-ink) !important; }
body .cer-kamgc-page .cer-kamgc-pillars-card:nth-child(even) .cer-kamgc-pillars-icon .material-symbols-outlined { color: var(--cl-blue) !important; }

body .cer-kamgc-page .cer-kamgc-pillars-card h3 {
    margin: 0 !important;
    font-family: 'Montserrat', 'Open Sans', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    color: inherit !important;
}

body .cer-kamgc-page .cer-kamgc-pillars-hint {
    font-size: .78rem;
    font-weight: 700;
    opacity: .8;
}

@media (max-width: 1024px) {
    body .cer-kamgc-page .cer-kamgc-pillar-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)) !important;
    }
}

/* --- Summit structure (glass): blue cards, orange step numbers ---------- */
body .cer-kamgc-page .cer-kamgc-summit-structure .cer-kamgc-compact-card,
body .cer-kamgc-page .cer-kamgc-summit-structure .cer-kamgc-compact-card:hover {
    background: var(--cl-blue) !important;
    border: 0 !important;
    border-radius: var(--cl-card-radius) !important;
    box-shadow: 0 14px 30px rgba(0, 86, 136, .26) !important;
    padding: 22px !important;
}

body .cer-kamgc-page .cer-kamgc-summit-structure .cer-kamgc-compact-card::before {
    background: var(--cl-orange) !important;
    color: var(--cl-ink) !important;
    box-shadow: none !important;
}

body .cer-kamgc-page .cer-kamgc-summit-structure .cer-kamgc-compact-card h3 { color: #fff !important; border-bottom: 2px solid orange; padding-bottom: 8px; }
body .cer-kamgc-page .cer-kamgc-summit-structure .cer-kamgc-compact-card h3::after { display: none !important; }
body .cer-kamgc-page .cer-kamgc-summit-structure .cer-kamgc-compact-card p { color: rgba(255, 255, 255, .88) !important; }

/* --- Registration (blue): white cards ----------------------------------- */
body .cer-kamgc-page .cer-kamgc-main .cer-kamgc-card,
body .cer-kamgc-page .cer-kamgc-main .cer-kamgc-card:hover,
body .cer-kamgc-page .cer-kamgc-main .cer-kamgc-sponsor-box,
body .cer-kamgc-page .cer-kamgc-main .cer-kamgc-sponsor-box:hover,
body .cer-kamgc-page .cer-kamgc-main .cer-kamgc-summary-box,
body .cer-kamgc-page .cer-kamgc-main .cer-kamgc-summary-box:hover {
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    border-radius: var(--cl-card-radius) !important;
    box-shadow: var(--cl-shadow-card) !important;
}

body .cer-kamgc-page .cer-kamgc-main .cer-kamgc-card h2 { color: var(--cl-ink) !important; }

body .cer-kamgc-page .cer-kamgc-stats-grid > div {
    background: var(--cl-orange) !important;
    border: 0 !important;
}

body .cer-kamgc-page .cer-kamgc-stats-grid > div strong,
body .cer-kamgc-page .cer-kamgc-stats-grid > div span { color: var(--cl-ink) !important; }

body .cer-kamgc-page .cer-kamgc-stats-grid > div:nth-child(2) { background: var(--cl-blue) !important; }
body .cer-kamgc-page .cer-kamgc-stats-grid > div:nth-child(2) strong { color: #fff !important; }
body .cer-kamgc-page .cer-kamgc-stats-grid > div:nth-child(2) span { color: rgba(255, 255, 255, .88) !important; }

body .cer-kamgc-page .cer-primary-button,
body .cer-kamgc-page .cer-card-submit .cer-primary-button {
    background: var(--cl-orange) !important;
    border-color: var(--cl-orange) !important;
    color: var(--cl-ink) !important;
    box-shadow: 0 12px 26px rgba(180, 100, 0, .28) !important;
}

body .cer-kamgc-page .cer-primary-button:hover,
body .cer-kamgc-page .cer-primary-button:focus-visible {
    background: #EE9A0E !important;
}

/* --- FAQ (glass): white rows in two independent columns ----------------- */
body .cer-kamgc-page .cer-kamgc-faq-accordion {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 18px !important;
    align-items: start !important;
}

body .cer-kamgc-page .cer-kamgc-faq-column {
    display: grid;
    gap: 12px;
    align-content: start;
}

@media (max-width: 860px) {
    body .cer-kamgc-page .cer-kamgc-faq-accordion { grid-template-columns: 1fr !important; }
}

body .cer-kamgc-page .cer-kamgc-faq-item {
    background: #fff !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .08) !important;
    overflow: hidden;
    transition: box-shadow var(--cer-dur-micro) var(--cer-ease-out);
}

body .cer-kamgc-page .cer-kamgc-faq-item:hover { box-shadow: 0 12px 26px rgba(15, 23, 42, .13) !important; }
body .cer-kamgc-page .cer-kamgc-faq-item[open] { box-shadow: 0 12px 26px rgba(15, 23, 42, .12), inset 0 3px 0 var(--cl-orange) !important; }

body .cer-kamgc-page .cer-kamgc-faq-item summary,
body .cer-kamgc-page .cer-kamgc-faq-item[open] summary {
    color: var(--cl-ink) !important;
    min-height: 60px;
}

body .cer-kamgc-page .cer-kamgc-faq-caret {
    flex: none;
    display: inline-grid !important;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 110, 172, .1);
    color: var(--cl-blue) !important;
    transition: transform var(--cer-dur-base) var(--cer-ease-out), background-color var(--cer-dur-micro) var(--cer-ease-out);
}

body .cer-kamgc-page .cer-kamgc-faq-item[open] .cer-kamgc-faq-caret {
    background: var(--cl-orange);
    color: var(--cl-ink) !important;
    transform: rotate(180deg);
}

/* --- Pillar tooltip: never covered by a neighbouring section ------------
   The tooltip sits above the card, so it reaches into the section above.
   Sections paint in flex `order`, and a solid section that comes later would
   cover it. Lifting the section and the open card while a tooltip is showing
   keeps it on top wherever it lands. */
body .cer-kamgc-page .cer-kamgc-pillars {
    position: relative;
    z-index: 1;
}

body .cer-kamgc-page .cer-kamgc-pillars:has(.cer-kamgc-pillars-card:hover),
body .cer-kamgc-page .cer-kamgc-pillars:has(.cer-kamgc-pillars-card:focus-within),
body .cer-kamgc-page .cer-kamgc-pillars:has(.cer-kamgc-pillars-card.is-open) {
    z-index: 60;
}

body .cer-kamgc-page .cer-kamgc-pillars-card:hover,
body .cer-kamgc-page .cer-kamgc-pillars-card:focus-within,
body .cer-kamgc-page .cer-kamgc-pillars-card.is-open {
    z-index: 61;
}

body .cer-kamgc-page .cer-kamgc-pillars-back { z-index: 62 !important; }

/* --- Objectives on phones: the description ran in a ~220px column beside
   the icon, wrapping into six short lines. Icon and title keep the top row;
   the description runs the full card width underneath. ------------------- */
@media (max-width: 600px) {
    body .cer-kamgc-page .cer-kamgc-objectives .cer-kamgc-compact-card p {
        grid-column: 1 / -1 !important;
    }
}


/* ==========================================================================
   BLOBS — orange shapes behind the solid colour sections
   --------------------------------------------------------------------------
   Client review: the blue bands read as plain slabs. Three KAMGC-orange blobs
   at 22% drift slowly behind the cards on each solid section.

   The blobs live in their own absolutely-positioned layer with overflow
   hidden, so they cannot spill onto the patterned background — and the
   section itself keeps its overflow visible, so AOS entrances (which start a
   card 100px away from its place) are never clipped.
   ========================================================================== */
.cer-kamgc-page {
    --cl-blob: 250, 164, 26;   /* #FAA41A, so the alpha stays tunable */
    --cl-blob-a: .45;
}

body .cer-kamgc-page .cer-kamgc-speakers-card,
body .cer-kamgc-page .cer-kamgc-objectives-card,
body .cer-kamgc-page .cer-kamgc-main {
    position: relative;
}

body .cer-kamgc-page .cer-kamgc-blobs {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

/* When the layer starts below a heading, its top edge sits mid-section: no
   rounded corners there, and the blobs fade in rather than being cut by a
   hard line. */
body .cer-kamgc-page .cer-kamgc-blobs.is-offset {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 72px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 72px);
}

/* Everything else in the section paints above the blob layer. */
body .cer-kamgc-page .cer-kamgc-speakers-card > *:not(.cer-kamgc-blobs),
body .cer-kamgc-page .cer-kamgc-objectives-card > *:not(.cer-kamgc-blobs),
body .cer-kamgc-page .cer-kamgc-main > *:not(.cer-kamgc-blobs) {
    position: relative;
    z-index: 1;
}

body .cer-kamgc-page .cer-kamgc-blobs i {
    position: absolute;
    display: block;
    background: rgba(var(--cl-blob), var(--cl-blob-a));
    filter: blur(8px);
    will-change: transform;
}

/* Eight shapes per section, spread top to bottom so a tall section on a
   phone has blobs the whole way down. Positions are percentages of the blob
   layer, which starts below the section heading (set in JS) so white heading
   text never sits on an 80% orange shape. Lopsided radii make them read as
   blobs rather than ellipses. */
body .cer-kamgc-page .cer-kamgc-blobs i:nth-child(1) { width: min(32vw, 300px); aspect-ratio: 1.15; left: -6%;  top: -4%; border-radius: 58% 42% 47% 53% / 44% 56% 44% 56%; animation: cer-blob-drift-a 26s cubic-bezier(.22, .8, .26, 1) infinite alternate; }
body .cer-kamgc-page .cer-kamgc-blobs i:nth-child(2) { width: min(24vw, 230px); aspect-ratio: 1;    right: -4%; top: 6%;  border-radius: 41% 59% 62% 38% / 54% 38% 62% 46%; animation: cer-blob-drift-b 30s cubic-bezier(.22, .8, .26, 1) infinite alternate; }
body .cer-kamgc-page .cer-kamgc-blobs i:nth-child(3) { width: min(14vw, 130px); aspect-ratio: 1.1;  left: 40%;  top: 20%; border-radius: 63% 37% 38% 62% / 47% 58% 42% 53%; animation: cer-blob-drift-a 20s cubic-bezier(.22, .8, .26, 1) infinite alternate-reverse; }
body .cer-kamgc-page .cer-kamgc-blobs i:nth-child(4) { width: min(26vw, 250px); aspect-ratio: 1.2;  left: -8%;  top: 36%; border-radius: 52% 48% 38% 62% / 61% 43% 57% 39%; animation: cer-blob-drift-b 34s cubic-bezier(.22, .8, .26, 1) infinite alternate-reverse; }
body .cer-kamgc-page .cer-kamgc-blobs i:nth-child(5) { width: min(18vw, 180px); aspect-ratio: 1;    right: 4%;  top: 46%; border-radius: 45% 55% 60% 40% / 40% 52% 48% 60%; animation: cer-blob-drift-a 24s cubic-bezier(.22, .8, .26, 1) infinite alternate; }
body .cer-kamgc-page .cer-kamgc-blobs i:nth-child(6) { width: min(20vw, 200px); aspect-ratio: 1.1;  left: 20%;  top: 62%; border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; animation: cer-blob-drift-b 28s cubic-bezier(.22, .8, .26, 1) infinite alternate; }
body .cer-kamgc-page .cer-kamgc-blobs i:nth-child(7) { width: min(30vw, 290px); aspect-ratio: 1.05; right: -7%; top: 72%; border-radius: 38% 62% 44% 56% / 58% 46% 54% 42%; animation: cer-blob-drift-a 32s cubic-bezier(.22, .8, .26, 1) infinite alternate-reverse; }
body .cer-kamgc-page .cer-kamgc-blobs i:nth-child(8) { width: min(22vw, 210px); aspect-ratio: 1.15; left: 46%;  top: 86%; border-radius: 55% 45% 42% 58% / 46% 54% 46% 54%; animation: cer-blob-drift-b 22s cubic-bezier(.22, .8, .26, 1) infinite alternate; }

/* Phones: vw-based sizes shrink to specks at 390px, so size up. */
@media (max-width: 767px) {
    /* Keynote Speakers on phones: the desktop placement parks one blob above
       the section and one below it, which is out of view once the three cards
       stack into a tall column. Spread them down the section instead, sized to
       peek out around the cards. */
    body .cer-kamgc-page .cer-kamgc-speakers-card .cer-kamgc-blobs i:nth-child(1) { width: 62vw !important; left: -20% !important; right: auto !important; top: 4% !important; bottom: auto !important; }
    body .cer-kamgc-page .cer-kamgc-speakers-card .cer-kamgc-blobs i:nth-child(2) { width: 58vw !important; left: auto !important; right: -22% !important; top: 38% !important; bottom: auto !important; }
    body .cer-kamgc-page .cer-kamgc-speakers-card .cer-kamgc-blobs i:nth-child(3) { width: 54vw !important; left: -16% !important; right: auto !important; top: 70% !important; bottom: auto !important; opacity: 1 !important; }
    body .cer-kamgc-page .cer-kamgc-blobs i:nth-child(1) { width: 58vw; }
    body .cer-kamgc-page .cer-kamgc-blobs i:nth-child(2) { width: 44vw; }
    body .cer-kamgc-page .cer-kamgc-blobs i:nth-child(3) { width: 30vw; }
    body .cer-kamgc-page .cer-kamgc-blobs i:nth-child(4) { width: 50vw; }
    body .cer-kamgc-page .cer-kamgc-blobs i:nth-child(5) { width: 38vw; }
    body .cer-kamgc-page .cer-kamgc-blobs i:nth-child(6) { width: 42vw; }
    body .cer-kamgc-page .cer-kamgc-blobs i:nth-child(7) { width: 54vw; }
    body .cer-kamgc-page .cer-kamgc-blobs i:nth-child(8) { width: 44vw; }
}

/* Keynote Speakers keeps its original treatment: three soft shapes at 32%
   across the full section. The fuller, blurred set is for Our Objectives and
   Registration only. */
body .cer-kamgc-page .cer-kamgc-speakers-card .cer-kamgc-blobs i {
    background: rgba(var(--cl-blob), .32);
    filter: blur(2px);
}

body .cer-kamgc-page .cer-kamgc-speakers-card .cer-kamgc-blobs i:nth-child(1) {
    width: min(46vw, 420px); aspect-ratio: 1.15; left: -7%; right: auto; top: -28%; bottom: auto;
    border-radius: 58% 42% 47% 53% / 44% 56% 44% 56%;
    animation: cer-blob-drift-a 26s cubic-bezier(.22, .8, .26, 1) infinite alternate;
}

body .cer-kamgc-page .cer-kamgc-speakers-card .cer-kamgc-blobs i:nth-child(2) {
    width: min(34vw, 320px); aspect-ratio: 1; left: auto; right: 4%; top: auto; bottom: -32%;
    border-radius: 41% 59% 62% 38% / 54% 38% 62% 46%;
    animation: cer-blob-drift-b 32s cubic-bezier(.22, .8, .26, 1) infinite alternate;
}

body .cer-kamgc-page .cer-kamgc-speakers-card .cer-kamgc-blobs i:nth-child(3) {
    width: min(18vw, 170px); aspect-ratio: 1.1; left: auto; right: 26%; top: -14%; bottom: auto;
    opacity: .7;
    border-radius: 63% 37% 38% 62% / 47% 58% 42% 53%;
    animation: cer-blob-drift-a 22s cubic-bezier(.22, .8, .26, 1) infinite alternate-reverse;
}

/* Transform only — no layout, no paint of the section behind it. */
@keyframes cer-blob-drift-a {
    from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    to   { transform: translate3d(4%, 6%, 0) rotate(18deg) scale(1.08); }
}

@keyframes cer-blob-drift-b {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to   { transform: translate3d(-5%, -7%, 0) rotate(-22deg); }
}

@media (prefers-reduced-motion: reduce) {
    body .cer-kamgc-page .cer-kamgc-blobs i { animation: none !important; }
}

/* --- Partner footer carousel ------------------------------------------- */
body .cer-kamgc-page .cer-kamgc-partners {
    order: 11;
    background: #fff !important;
    color: var(--cl-ink);
}

body .cer-kamgc-page .cer-kamgc-partners-card,
body .cer-kamgc-page .cer-kamgc-partners-card:hover {
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body .cer-kamgc-page .cer-kamgc-partners-card .cer-kamgc-section-title h2 { color: var(--cl-ink) !important; }
body .cer-kamgc-page .cer-kamgc-partners-card .cer-kamgc-section-title p { color: var(--cl-body) !important; }

body .cer-kamgc-page .cer-kamgc-partner-grid {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 1rem !important;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--cl-blue) rgba(0, 40, 70, .1);
    scrollbar-width: thin;
}

body .cer-kamgc-page .cer-kamgc-partner-grid::-webkit-scrollbar { height: 6px; }
body .cer-kamgc-page .cer-kamgc-partner-grid::-webkit-scrollbar-track { background: rgba(0, 40, 70, .1); }
body .cer-kamgc-page .cer-kamgc-partner-grid::-webkit-scrollbar-thumb { background: var(--cl-blue); border-radius: 999px; }

body .cer-kamgc-page .cer-kamgc-partner-card,
body .cer-kamgc-page .cer-kamgc-partner-card:hover {
    position: relative;
    flex: 0 0 33.333%;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .45rem;
    padding: 1rem 2rem 1.25rem;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    color: var(--cl-ink) !important;
    text-align: center;
    scroll-snap-align: start;
}

body .cer-kamgc-page .cer-kamgc-partner-card:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 10%;
    right: 0;
    width: 1px;
    height: 80%;
    background: rgba(0, 40, 70, .18);
}

body .cer-kamgc-page .cer-kamgc-partner-logo {
    display: grid;
    place-items: center;
    width: 100%;
    height: 142px;
    margin-bottom: .45rem;
}

body .cer-kamgc-page .cer-kamgc-partner-logo img {
    display: block;
    max-width: 150px;
    max-height: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
}

body .cer-kamgc-page .cer-kamgc-partner-logo .material-symbols-outlined {
    color: var(--cl-orange);
    font-size: 42px;
}

body .cer-kamgc-page .cer-kamgc-partner-card h3 {
    width: 100%;
    margin: 0;
    color: var(--cl-ink) !important;
    font-size: 1rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

body .cer-kamgc-page .cer-kamgc-partner-detail {
    display: block;
    max-width: 100%;
    margin: 0;
    color: var(--cl-body) !important;
    font-size: 1rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    text-decoration: none;
}

body .cer-kamgc-page .cer-kamgc-partner-card h3 {
    font-size: 1.4rem !important;
}

body .cer-kamgc-page .cer-kamgc-partner-detail {
    font-size: 0.8rem !important;
}

body .cer-kamgc-page a.cer-kamgc-partner-detail:hover,
body .cer-kamgc-page a.cer-kamgc-partner-detail:focus-visible {
    color: var(--cl-blue) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 900px) {
    body .cer-kamgc-page .cer-kamgc-partner-card { flex-basis: 50%; }
}

@media (max-width: 640px) {
    body .cer-kamgc-page .cer-kamgc-partners-card { padding-inline: 1rem !important; }
    body .cer-kamgc-page .cer-kamgc-partner-card {
        flex-basis: 100%;
        min-height: 230px;
        padding-inline: 1.5rem;
    }
}



footer.elementor-location-footer > .elementor-element-1dc9942 {
    display: none;
}

/* Ensure the copyright section remains visible */
footer.elementor-location-footer > .elementor-element-3be4cff {
    display: block; /* or your preferred layout display */
}
/* Organiser logo strip */
body .cer-kamgc-page .cer-kamgc-organisers {
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 3vw, 2.5rem);
    border-radius: var(--cl-card-radius, 18px);
    background: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .12);
}

body .cer-kamgc-page .cer-kamgc-organiser-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    align-items: center;
    justify-items: center;
    gap: 1.1rem clamp(1.5rem, 4vw, 3.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

body .cer-kamgc-page .cer-kamgc-organiser {
    display: grid;
    place-items: center;
    margin: 0;
}

body .cer-kamgc-page .cer-kamgc-organiser img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 56px;
    object-fit: contain;
}

body .cer-kamgc-page .cer-kamgc-organiser img[alt="Council of Governors"] {
    max-height: 72px;
}

@media (max-width: 560px) {
    body .cer-kamgc-page .cer-kamgc-organisers {
        padding: 1rem;
    }

    body .cer-kamgc-page .cer-kamgc-organiser-list {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    body .cer-kamgc-page .cer-kamgc-organiser {
        width: 100%;
        min-height: 76px;
        padding: 0.75rem 1rem;
        border: 1px solid var(--cl-line, #E3E9EF);
        border-radius: 12px;
        background: #FCFDFE;
    }

    body .cer-kamgc-page .cer-kamgc-organiser img {
        max-height: 44px;
        max-width: 100%;
    }

    body .cer-kamgc-page .cer-kamgc-organiser img[alt="Council of Governors"] {
        max-height: 56px;
    }
}