/* ========== Chat Genius Custom Module Styles ========== */

/* --- Header --- */
.cg-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(5, 19, 41, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(214, 227, 255, 0.06);
}

.cg-header-inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.125rem 2.5rem;
    gap: 2rem;
}

.cg-header-logo img {
    height: 32px;
    width: auto;
}

.cg-header-nav {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.cg-nav-link {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(214, 227, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s;
    padding-bottom: 4px;
}

.cg-nav-link:hover {
    color: #73ffe3;
}

.cg-nav-link.cg-nav-active {
    color: #73ffe3;
    border-bottom: 2px solid #73ffe3;
    font-weight: 700;
}

.cg-header-cta {
    padding: 10px 24px !important;
    font-size: 0.8125rem !important;
}

.cg-mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--cg-on-surface);
    cursor: pointer;
    padding: 0.5rem;
}

.cg-mobile-menu {
    display: none;
    flex-direction: column;
    padding: 1rem 2rem 2rem;
    gap: 1rem;
    background: var(--cg-surface-container-lowest);
}

.cg-mobile-menu.cg-mobile-open {
    display: flex;
}

/* Header scroll states */
.cg-header-scrolled {
    background: rgba(5, 19, 41, 0.96) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.cg-header-scrolled .cg-header-inner {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.cg-header-hidden {
    transform: translateY(-100%);
}

.cg-header {
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.cg-header-inner {
    transition: padding 0.3s ease;
}

/* Mobile menu: when open it's part of the page flow and pushes content down */

/* Mobile-only line breaks: hidden on desktop, visible on mobile */
br.cg-mobile-only-br { display: none; }
/* Desktop-only line breaks: visible on desktop, hidden on mobile */
br.cg-desktop-only-br { display: inline; }
@media (max-width: 768px) {
    br.cg-desktop-only-br { display: none !important; }
}

@media (max-width: 768px) {
    br.cg-mobile-only-br { display: inline !important; }
    .cg-header-nav { display: none; }
    .cg-header-cta { display: none; }
    .cg-mobile-toggle { display: block; }

    /* On mobile keep the header the same size when scrolled — the default
       .cg-header-scrolled rule shrinks padding from 1.125rem to 0.625rem,
       making the header ~16px shorter than body.cg-has-header padding-top (72px)
       and producing a visible gap above the mobile menu / content on scroll. */
    .cg-header.cg-header-scrolled .cg-header-inner {
        padding: 1.125rem 2.5rem !important;
    }
    .cg-mobile-menu {
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        z-index: 9998;
        max-height: calc(100vh - 72px);
        overflow-y: auto;
        background: var(--cg-surface-container-lowest);
        padding: 1.25rem 1.5rem 1.5rem;
        flex-direction: column;
        gap: 0;
        border-bottom: 1px solid rgba(68, 71, 77, 0.15);
    }

    .cg-mobile-menu .cg-nav-link {
        display: block;
        padding: 0.7rem 0;
        font-size: 0.875rem;
        border-bottom: 1px solid rgba(68, 71, 77, 0.15);
    }

    .cg-mobile-menu .cg-nav-link.cg-nav-active {
        border-bottom-color: var(--cg-primary);
    }
}

/* --- Hero Grid --- */
.cg-hero-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
    align-items: center;
}
/* For-events page only: narrower right column for the stats card */
.page-id-35 .cg-hero-grid {
    grid-template-columns: 2fr 1fr;
}
.page-id-35 .cg-hero-aside {
    margin-left: auto;
    width: 100%;
}
/* Reset default paragraph margins inside the stats card so top/bottom padding look equal */
.cg-hero-aside .cg-card p {
    margin: 0;
}
.cg-hero-aside .cg-card > div > p.cg-label {
    margin-bottom: 0.25rem;
}

.cg-hero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.cg-hero-full {
    width: 100%;
}

.cg-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.125rem;
    background: rgba(74, 220, 194, 0.08);
    border: 1px solid rgba(74, 220, 194, 0.2);
    border-radius: 9999px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.cg-status-pill-vertical {
    display: block;
    border-radius: 1rem;
    padding: 1.5rem 1.75rem;
    background: rgba(74, 220, 194, 0.06);
    border: 1px solid rgba(74, 220, 194, 0.18);
    max-width: 320px;
    margin-left: auto;
}

.cg-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4adcc2;
    box-shadow: 0 0 10px rgba(74, 220, 194, 0.6);
    animation: cg-pulse-anim 2s infinite;
    flex-shrink: 0;
}

.cg-status-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(214, 227, 255, 0.7);
}

.cg-status-divider {
    width: 1px;
    height: 12px;
    background: rgba(214, 227, 255, 0.2);
}

.cg-status-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #4adcc2;
}

.cg-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

/* WordPress wpautop drops stray <br> between flex-column stacked buttons — kill them everywhere */
section.cg-section [style*="display:flex"][style*="flex-direction:column"][style*="gap:0.5rem"] > br,
section.cg-section [style*="display:flex"][style*="flex-direction:column"] > a + br {
    display: none !important;
}

@media (max-width: 768px) {
    .cg-hero-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .cg-status-pill {
        padding: 0.5rem 1rem;
    }
}

@media (max-width: 1024px) {
    .cg-hero-grid {
        grid-template-columns: 1fr;
    }
    .cg-hero-aside {
        order: -1;
    }
}

/* CTA titles (Home/Events/Locations) — use the same scaled size on all three so
   the layout is consistent, while still fitting the longest ("YOUR VENUE DESERVES
   A CONCIERGE") on one line next to the buttons column. */
section.cg-section div[style*="border-left:3px solid var(--cg-primary)"] h2.cg-display-md {
    font-size: clamp(1.875rem, 3.75vw, 3rem);
}
/* Replace the full-height inline border-left with a shorter pseudo-element divider */
section.cg-section div[style*="border-left:3px solid var(--cg-primary)"] {
    border-left: 0 !important;
    position: relative;
}
/* CTA buttons column: don't stretch to column width — use natural (classic) size */
section.cg-section div[style*="border-left:3px solid var(--cg-primary)"] div[style*="flex-direction:column"][style*="gap:0.75rem"] {
    align-items: flex-start !important;
}
section.cg-section div[style*="border-left:3px solid var(--cg-primary)"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2.6rem;
    bottom: 2.4rem;
    width: 3px;
    background: var(--cg-primary);
}

/* Friction Paradox cards (For Events): tighter vertical gap on desktop */
.page-id-35 .cg-opp-cards[style*="gap:1.25rem"] {
    gap: 0.75rem !important;
}

/* --- Mobile-only refinements --- */
@media (max-width: 768px) {
    /* Tighten top + bottom spacing for the hero section only.
       (Not `.cg-section:first-of-type` — that matches every section because each
       .cg-section sits alone inside its own Divi wrapper, i.e. always :first-of-type.) */
    .cg-hero.cg-section {
        padding-top: 20px !important;
        padding-bottom: 30px !important;
    }
    .et_pb_section.et_pb_section_0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    /* Hero h1: 3 lines on small phones, 2 lines on wider mobiles */
    .cg-hero-content h1.cg-display-lg {
        max-width: 100%;
    }
    /* Force "SLEEPS." onto a third line */
    .cg-hero-content h1.cg-display-lg .cg-gradient-text {
        display: inline-block;
        max-width: 11ch;
    }
    /* Tighter gap between status pill and hero content on mobile */
    .cg-hero-grid { gap: 0.5rem !important; }
    /* Status pill "READY FOR DEPLOYMENT" — hidden on mobile to save space above title.
       The other pill styling rules below are kept so they still apply on pages where
       .cg-hero-aside contains other content (e.g. stats card on For Events). */
    .cg-status-pill-vertical {
        display: none !important;
    }
    .cg-hero-aside {
        display: flex !important;
        justify-content: flex-end !important;
    }
    .cg-status-pill-vertical--disabled {
        display: inline-flex;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 0.15rem !important;
        padding: 0.35rem 0.625rem !important;
        max-width: fit-content;
        margin-left: auto;
        border-radius: 12px;
    }
    .cg-status-pill-vertical > div[style] {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.3rem !important;
        margin-bottom: 0 !important;
    }
    .cg-status-pill-vertical .cg-status-value[style] {
        font-size: 0.625rem !important;
        display: block !important;
    }
    .cg-status-pill-vertical .cg-status-label {
        font-size: 0.5625rem !important;
    }
    .cg-status-pill-vertical .cg-status-dot {
        width: 5px !important;
        height: 5px !important;
    }
    /* For-events hero stats card: no left constraints, full width */
    .page-id-35 .cg-hero-aside,
    .page-id-35 .cg-hero-aside > div {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
    }
    /* Friction Paradox 2-col flex → stack, no forced max-width */
    .cg-opp-grid:has(.cg-fp-row) {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    /* Friction Paradox cards (cg-opp-cards) — tighter inline gap:1.25rem */
    .page-id-35 .cg-opp-cards[style*="gap:1.25rem"] {
        gap: 0.75rem !important;
    }
    /* Friction Paradox card inner: less top padding + tighter left offset */
    .page-id-35 .cg-opp-cards > .cg-card[style*="padding:1.25rem 0 0 1.5rem"] {
        padding: 0.5rem 5px 0 5px !important;
        gap: 0.5rem !important;
    }
    .page-id-35 .cg-opp-cards > .cg-card[style*="padding:1.25rem 0 0 1.5rem"] > span.material-symbols-outlined {
        width: 1.25rem !important;
    }
    /* Friction Paradox cards: paragraph justified on mobile */
    .page-id-35 .cg-opp-cards > .cg-card p {
        text-align: justify !important;
    }
    .cg-opp-grid:has(.cg-fp-row) > .cg-opp-sticky {
        align-self: stretch;
        max-width: 100%;
        margin: 0;
    }
    .cg-fp-row {
        max-width: 100%;
        margin: 0;
        align-self: stretch;
        padding: 1rem 0.75rem !important;
    }
    /* CTA cards (Home/Events/Locations): 2-col flex → stack, drop absolute teal line */
    section.cg-section [style*="display:flex"][style*="position:relative"] {
        flex-direction: column !important;
        gap: 0 !important;
        padding: 1.5rem 1rem 1.5rem 1.25rem !important;
        margin: 0 !important;
    }
    /* Show the inline absolute teal line (shorter via top/bottom %) instead of a full-height border */
    section.cg-section [style*="display:flex"][style*="position:relative"] > div[style*="position:absolute;left:0"] {
        display: block !important;
    }
    /* Kill any bottom margin/padding on text column and any flex item above buttons */
    section.cg-section [style*="display:flex"][style*="position:relative"] > div {
        margin: 0 !important;
        flex: 0 1 auto !important;  /* override inline flex:1 1 420px → don't stretch to 420px height in column mode */
        min-height: 0 !important;
    }
    /* Reduce align-items: flex's center alignment can leave empty vertical space when the button column is short — pin all items to the top */
    section.cg-section [style*="display:flex"][style*="position:relative"] {
        align-items: stretch !important;
        justify-content: flex-start !important;
    }
    /* No extra gap between text col and buttons col */
    section.cg-section [style*="display:flex"][style*="position:relative"] > div[style*="flex:0 0 auto"] {
        margin-top: 0 !important;
    }
    /* Kill any stray <br> between text column and buttons column that wpautop inserts */
    section.cg-section [style*="display:flex"][style*="position:relative"] > br { display: none !important; }
    /* Buttons on one row, classic size (override inline flex-direction:column) */
    section.cg-section [style*="display:flex"][style*="flex-direction:column"][style*="gap:0.5rem"] {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 0.75rem !important;
        margin-top: 0 !important;
    }
    /* WordPress wpautop drops a <br> between stacked buttons — kill it */
    section.cg-section [style*="display:flex"][style*="flex-direction:column"][style*="gap:0.5rem"] > br {
        display: none !important;
    }
    /* Typography: scale down display/title sizes on phones */
    .cg-display-lg { font-size: 2.25rem !important; line-height: 1.05 !important; }
    .cg-display-md { font-size: 1.75rem !important; line-height: 1.1 !important; }
    .cg-display-sm { font-size: 1.5rem !important; line-height: 1.15 !important; }
    .cg-title-lg   { font-size: 1.25rem !important; }
    .cg-title-md   { font-size: 1.0625rem !important; }
    /* Body text — slightly smaller for mobile, with extra line-height so paragraphs breathe */
    .cg-body-lg { font-size: 1rem !important; line-height: 1.75 !important; }
    /* Hero paragraph specifically: 10% smaller than default body-lg.
       Keep left-aligned on mobile so the forced <br class="cg-mobile-only-br">
       inside the sentence doesn't create awkward stretched spacing on the line
       above (which is what text-align:justify would do). */
    .cg-hero-content p.cg-body-lg,
    .cg-hero p.cg-body-lg {
        font-size: 0.9rem !important;
        text-align: left !important;
    }
    .cg-body-md { font-size: 0.9375rem !important; line-height: 1.75 !important; }
    .cg-body-sm { font-size: 0.875rem !important; line-height: 1.75 !important; }
    /* Reduce icon sizes that are set huge inline */
    .cg-section .material-symbols-outlined[style*="font-size:2.5rem"] {
        font-size: 1.75rem !important;
    }
    .cg-section .material-symbols-outlined[style*="font-size:3rem"] {
        font-size: 2rem !important;
    }
    /* Events hero: force flex column so the stats card can be placed AFTER the buttons */
    .page-id-35 .cg-hero-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.75rem !important;
    }
    .page-id-35 .cg-hero-content { order: 0 !important; }
    .page-id-35 .cg-hero-aside { order: 2 !important; margin-top: 0.5rem; }
    /* Stats card compact + horizontal (3 items side-by-side) on mobile */
    .page-id-35 .cg-hero-aside .cg-card {
        flex-direction: row !important;
        justify-content: space-around;
        align-items: stretch;
        padding: 1rem 0.75rem !important;
        gap: 0 !important;
    }
    .page-id-35 .cg-hero-aside .cg-card > div {
        flex: 1 1 0;
        min-width: 0;
        text-align: center;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: flex-end;
        padding: 0 0.5rem;
        border-right: 1px solid rgba(74, 220, 194, 0.15);
    }
    .page-id-35 .cg-hero-aside .cg-card > div:last-child { border-right: none; }
    .page-id-35 .cg-hero-aside .cg-card > div p.cg-label {
        font-size: 0.5625rem !important;
        letter-spacing: 0.08em !important;
        margin: 0.375rem 0 0 !important;
        line-height: 1.25 !important;
    }
    .page-id-35 .cg-hero-aside p.cg-headline[style*="2.5rem"] {
        font-size: 1.5rem !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
    /* Events hero inner paragraph tighter and narrower */
    .page-id-35 .cg-hero-content p {
        max-width: 100% !important;
        margin-bottom: 1.5rem !important;
    }
    /* Hero grid gap tighter on phone */
    .page-id-35 .cg-hero-grid { gap: 1.75rem !important; }
    /* The Intelligence Pivot card (Friction Paradox): tighter padding, left-aligned */
    .cg-opp-sticky .cg-card-glass,
    .cg-opp-sticky > .cg-card.cg-border-l-primary {
        padding: 1.25rem 1.25rem !important;
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .cg-opp-sticky .cg-card-glass h3,
    .cg-opp-sticky > .cg-card.cg-border-l-primary h3 {
        margin-bottom: 0.35rem !important;
        font-size: 1rem !important;
    }
    .cg-opp-sticky .cg-card-glass p,
    .cg-opp-sticky > .cg-card.cg-border-l-primary p { margin: 0 !important; font-size: 0.8125rem !important; }
    /* The Friction Paradox h2: collapse its forced <br> so the title sits on one line */
    .cg-opp-sticky h2 br { display: none; }
    /* Friction Paradox: smaller title, paragraph, and row content */
    .cg-opp-sticky > h2 {
        font-size: 1.375rem !important;
        margin-top: 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    .cg-opp-sticky > p {
        font-size: 0.9375rem !important;
        line-height: 1.5 !important;
        text-align: justify !important;
    }
    .cg-fp-row h4 { font-size: 0.8125rem !important; }
    .cg-fp-row p { font-size: 0.75rem !important; line-height: 1.75 !important; }
    /* Friction Paradox: align container to the left on mobile (kill desktop 25% offset) */
    .page-id-35 .cg-section div[style*="margin-left:25%"] {
        margin-left: 0 !important;
    }
    /* USE CASES BY EVENT TYPE header: on mobile put "Verified Deployments"
       ABOVE the h2 and left-align both (column-direction cross-axis is horizontal). */
    .page-id-35 .cg-section div[style*="align-items:flex-end"][style*="justify-content:space-between"] {
        flex-direction: column-reverse !important;
        align-items: flex-start !important;
    }
    /* The thin olive line under "Verified Deployments" is right-aligned via margin-left:auto
       inline. Kill that on mobile so the line sits against the left edge. */
    .page-id-35 .cg-section .cg-text-tertiary > div[style*="background:var(--cg-tertiary)"][style*="margin-left:auto"] {
        margin-left: 0 !important;
    }
    .cg-fp-row .material-symbols-outlined { font-size: 1.125rem !important; }
    /* USE CASES BY EVENT TYPE: smaller title/subtitle and card text */
    .cg-section h2.cg-display-sm { font-size: 1.375rem !important; }
    .cg-grid-3 > .cg-card h4,
    .cg-grid-4 > .cg-card h4 { font-size: 0.875rem !important; margin-bottom: 0.4rem !important; }
    .cg-grid-3 > .cg-card p,
    .cg-grid-4 > .cg-card p { font-size: 0.75rem !important; line-height: 1.75 !important; }
    .cg-grid-3 > .cg-card,
    .cg-grid-4 > .cg-card { padding: 1rem 1rem !important; }
    /* CTA (Home/Events/Locations) on mobile:
       - teal divider ONLY alongside the text column (h2+p), not the buttons
       - buttons in a horizontal row, not stacked vertically */
    section.cg-section div[style*="border-left:3px solid var(--cg-primary)"] {
        padding: 1rem 0 1rem 0 !important;
    }
    section.cg-section div[style*="border-left:3px solid var(--cg-primary)"]::before {
        display: none !important;
    }
    section.cg-section div[style*="border-left:3px solid var(--cg-primary)"] > div[style*="display:flex"][style*="gap:3rem"] {
        gap: 1.7rem !important;
    }
    section.cg-section div[style*="border-left:3px solid var(--cg-primary)"] > div[style*="display:flex"][style*="gap:3rem"] > div[style*="flex:1 1 420px"] {
        border-left: 3px solid var(--cg-primary) !important;
        padding-left: 1rem !important;
        padding-bottom: 0 !important;
        flex: 0 0 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Zero margin below paragraph so border-left stops at the text, not below it */
    section.cg-section div[style*="border-left:3px solid var(--cg-primary)"] > div[style*="display:flex"][style*="gap:3rem"] > div[style*="flex:1 1 420px"] > p:last-child {
        margin-bottom: 0 !important;
    }
    section.cg-section div[style*="border-left:3px solid var(--cg-primary)"] > div[style*="display:flex"][style*="gap:3rem"] > div[style*="flex-direction:column"][style*="gap:0.75rem"] {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center !important;
        align-self: center !important;
        gap: 10px !important;
        margin-top: 0 !important;
        width: 100% !important;
    }
    /* CTA cards text refinements */
    section.cg-section [style*="display:flex"][style*="position:relative"] h2,
    section.cg-section div[style*="border-left:3px solid var(--cg-primary)"] h2.cg-display-md {
        font-size: 1.75rem !important;
        line-height: 1.1 !important;
        margin: 0 !important;
    }
    section.cg-section [style*="display:flex"][style*="position:relative"] p,
    section.cg-section div[style*="border-left:3px solid var(--cg-primary)"] p.cg-body-lg {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        margin: 0.75rem 0 1.25rem !important;
    }
    /* Drop <br> inside paragraph on mobile so the text flows naturally */
    section.cg-section [style*="display:flex"][style*="position:relative"] p br,
    section.cg-section div[style*="border-left:3px solid var(--cg-primary)"] p br { display: none !important; }
    /* Tight heading spacing for bento-style sections (PROPRIETARY PROTOCOLS, etc.) */
    #features h2,
    .cg-section h2.cg-label {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    .cg-bento { margin-top: 0 !important; }
    .cg-opp-cards { margin-top: 0 !important; }
    /* Card-grid sections: 30px space between the section heading and
       the cards below, matching the 30px section padding. Applies to heading wrappers
       as well as plain h2 / p elements that use inline margin-bottom:3rem. */
    .cg-section-inner > div[style*="margin-bottom:3rem"],
    .cg-section-inner > h2[style*="margin-bottom:3rem"],
    .cg-section-inner > p[style*="margin-bottom:3rem"] {
        margin-bottom: 30px !important;
    }
    .cg-opp-sticky { text-align: center !important; }
    .cg-opp-sticky > p {
        text-align: center !important;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .cg-opp-sticky > h2[style],
    .cg-opp-sticky h2.cg-display-sm[style] { margin-bottom: 1rem !important; font-size: 1.7rem !important; }
    /* Reduce gap between intro text and cards on mobile */
    .cg-opp-grid { gap: 1.75rem !important; }
    .cg-opp-sticky > p.cg-body-lg[style] { margin-bottom: 0.5rem !important; }
    .cg-opp-sticky > p:last-child { margin-bottom: 0 !important; }
    .cg-opp-sticky > p.cg-body-md { font-size: 0.875rem !important; }
    /* THE OPPORTUNITY cards (.cg-opp-cards): smaller on mobile */
    .cg-opp-cards > .cg-card {
        padding: 0.875rem 0.875rem !important;
    }
    .cg-opp-cards > .cg-card .material-symbols-outlined {
        font-size: 1.25rem !important;
        margin-bottom: 0.4rem !important;
    }
    .cg-opp-cards > .cg-card h4 {
        font-size: 0.8125rem !important;
        margin-bottom: 0.3rem !important;
        line-height: 1.25 !important;
    }
    .cg-opp-cards > .cg-card p {
        font-size: 0.75rem !important;
        line-height: 1.75 !important;
        text-align: justify !important;
    }
    .cg-opp-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    /* EVERYTHING INCLUDED cards (olive-cards): smaller on mobile */
    .cg-olive-cards > .cg-card,
    .cg-grid-3.cg-olive-cards > .cg-card {
        padding: 0.875rem 0.875rem !important;
    }
    .cg-olive-cards > .cg-card .material-symbols-outlined {
        font-size: 1.25rem !important;
        margin-bottom: 0.4rem !important;
    }
    .cg-olive-cards > .cg-card h4 {
        font-size: 0.8125rem !important;
        margin-bottom: 0.3rem !important;
    }
    .cg-olive-cards > .cg-card p {
        font-size: 0.75rem !important;
        line-height: 1.75 !important;
    }
    .cg-grid-3.cg-olive-cards {
        gap: 0.75rem !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Transparent card with uniform subtle border on mobile */
    .cg-grid-3.cg-olive-cards > .cg-card {
        background: transparent !important;
        border: 1px solid rgba(74,220,194,0.25) !important;
        border-top: 1px solid rgba(74,220,194,0.25) !important;
        border-radius: 0.75rem;
    }
    /* Request Demo page: tighter hero intro + 3 feature cards (kept stacked). */
    .page-id-37 .cg-demo-left > p.cg-body-lg {
        font-size: 0.9rem !important;
        line-height: 1.75 !important;
    }
    .page-id-37 .cg-card.cg-border-l-primary {
        padding: 0.875rem !important;
        gap: 0.625rem !important;
    }
    .page-id-37 .cg-card.cg-border-l-primary .material-symbols-outlined {
        font-size: 1.25rem !important;
    }
    .page-id-37 .cg-card.cg-border-l-primary h3 {
        font-size: 0.8125rem !important;
    }
    .page-id-37 .cg-card.cg-border-l-primary p {
        font-size: 0.75rem !important;
        line-height: 1.75 !important;
    }
    /* Consent label smaller on mobile so the long privacy/terms disclaimer is less overwhelming */
    .cg-form .gfield_consent_label {
        font-size: 0.5rem !important;
        line-height: 1.4 !important;
    }
    /* Form card inner padding: reduce horizontal ~30% on mobile so the form
       content has more room to breathe within the narrow viewport. */
    .page-id-37 .cg-demo-right > div > div[style*="padding:2rem 2.5rem"] {
        padding: 1.65rem 1.375rem !important;
    }
    /* Stats strip (15m / 99.9% / 24/7): force 3 columns on mobile so they stay
       horizontal regardless of narrow viewport. */
    .page-id-37 .cg-grid-3 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
    }
    .page-id-37 .cg-grid-3 > div {
        padding: 0.75rem 0.5rem !important;
    }
    .page-id-37 .cg-grid-3 > div > div.cg-headline {
        font-size: 0.875rem !important;
    }
    .page-id-37 .cg-grid-3 > div > div.cg-label {
        font-size: 0.5625rem !important;
    }
    /* WHO THIS IS FOR (Build For) cards: tighter on mobile */
    .cg-flex-3 > .cg-card {
        padding: 1.125rem 1rem !important;
        gap: 0.75rem !important;
    }
    .cg-flex-3 > .cg-card .material-symbols-outlined {
        font-size: 1.25rem !important;
    }
    .cg-flex-3 > .cg-card h4 {
        font-size: 0.9375rem !important;
        margin-bottom: 0.35rem !important;
    }
    .cg-flex-3 > .cg-card p {
        font-size: 0.8125rem !important;
        line-height: 1.75 !important;
        text-align: justify !important;
    }
    /* Grid-3/Grid-4 use-cases cards: justify text */
    .cg-grid-3 > .cg-card p,
    .cg-grid-4 > .cg-card p {
        text-align: justify !important;
    }
    .cg-flex-3 > .cg-card [style*="padding:0.75rem"] {
        padding: 0.625rem !important;
    }
    .cg-flex-3 > .cg-card .cg-body-sm {
        font-size: 0.75rem !important;
        line-height: 1.65 !important;
    }
    .cg-flex-3 { gap: 1.0625rem !important; }
    /* Home hero stats grid (Uptime Reliability / Resolution Rate / Response Latency) — compact */
    .cg-stats-grid {
        margin-top: 2rem !important;
        gap: 0.5rem !important;
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .cg-stats-grid .cg-stat-item {
        padding: 0.75rem 0.5rem !important;
        text-align: center;
    }
    .cg-stats-grid .cg-stat-label {
        font-size: 0.5625rem !important;
        letter-spacing: 0.06em !important;
    }
    .cg-stats-grid .cg-stat-number {
        font-size: 1.125rem !important;
        line-height: 1.1 !important;
        margin: 0.25rem 0 !important;
    }
    .cg-stats-grid p {
        font-size: 0.625rem !important;
        line-height: 1.35 !important;
        margin: 0 !important;
    }
    /* Default bento: stack one-below-the-other on mobile, smaller cards */
    .cg-bento {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    .cg-bento > .cg-card {
        grid-column: auto !important;
        padding: 0.875rem 0.875rem !important;
    }
    .cg-bento > .cg-card .material-symbols-outlined {
        font-size: 1.25rem !important;
        margin-bottom: 0.4rem !important;
    }
    .cg-bento > .cg-card h3,
    .cg-bento > .cg-card h4 {
        font-size: 0.8125rem !important;
        margin-bottom: 0.3rem !important;
        margin-top: 0.3rem !important;
        line-height: 1.25 !important;
    }
    /* Choose Your Control Level: more space between card title and the bullet list */
    .cg-bento > .cg-card > ul[style*="list-style:none"] {
        margin-top: 0.9rem !important;
    }
    .cg-bento > .cg-card p {
        font-size: 0.75rem !important;
        line-height: 1.75 !important;
        text-align: justify !important;
        margin-top: 0 !important;
    }
    .cg-bento > .cg-card .cg-step-number {
        font-size: 0.9375rem !important;
    }
    /* Equalize all inner text inside HOW IT WORKS / bento cards to keep typography uniform */
    .cg-bento > .cg-card span.cg-headline,
    .cg-bento > .cg-card [style*="font-size:0.875rem"],
    .cg-bento > .cg-card [style*="font-size:1.125rem"] {
        font-size: 0.6875rem !important;
    }
    /* Tighter gap between the step label (01 / INGESTION) and the card title */
    .cg-bento > .cg-card [style*="margin-bottom:1.5rem"][style*="color:var(--cg-primary)"] {
        margin-bottom: 1.08rem !important;
    }
    /* WHAT MAKES THIS DIFFERENT only: icon + title inline on mobile.
       Card parent is display:flex/column — override to block so inline children
       can share a line. */
    .cg-bento.cg-bento-12:not(.cg-bento-row-auto) > .cg-card {
        display: block !important;
    }
    .cg-bento.cg-bento-12:not(.cg-bento-row-auto) > .cg-card > span.material-symbols-outlined[style*="font-size:2.5rem"] {
        display: inline-block !important;
        vertical-align: middle !important;
        margin-bottom: 0 !important;
        margin-right: 0.5rem !important;
        font-size: 1.25rem !important;
        line-height: 1 !important;
    }
    .cg-bento.cg-bento-12:not(.cg-bento-row-auto) > .cg-card > span.material-symbols-outlined[style*="font-size:2.5rem"] + h3 {
        display: inline !important;
        vertical-align: middle !important;
        line-height: 1 !important;
        margin-bottom: 0 !important;
    }
    /* Space between title+icon row and paragraph, matching HOW IT WORKS
       step-label → title gap (1.08rem) */
    .cg-bento.cg-bento-12:not(.cg-bento-row-auto) > .cg-card > h3 + p {
        margin-top: 1.08rem !important;
    }
    .cg-bento > .cg-card .cg-label,
    .cg-bento > .cg-card li .cg-label,
    .cg-bento > .cg-card ul span {
        font-size: 0.6875rem !important;
        line-height: 1.75 !important;
    }
    .cg-bento > .cg-card [style*="font-size:0.6875rem"] {
        font-size: 0.6rem !important;
    }
    /* Tighten list spacing inside bento cards so it matches paragraph flow */
    .cg-bento > .cg-card ul {
        margin: 0 !important;
        padding: 0 !important;
    }
    .cg-bento > .cg-card li {
        margin-bottom: 0.25rem !important;
        gap: 0.5rem !important;
    }
    .cg-bento > .cg-card li:last-child {
        margin-bottom: 0 !important;
    }
    /* PROPRIETARY PROTOCOLS (features) only: keep 2×2 grid with small text */
    #features .cg-bento {
        grid-template-columns: 1fr 1fr !important;
    }
    #features .cg-bento > .cg-card {
        padding: 0.875rem 0.875rem !important;
    }
    #features .cg-bento > .cg-card .material-symbols-outlined {
        font-size: 1.25rem !important;
        margin-bottom: 0.35rem !important;
    }
    #features .cg-bento > .cg-card h3,
    #features .cg-bento > .cg-card h4 {
        font-size: 0.75rem !important;
        margin-bottom: 0.3rem !important;
        line-height: 1.2 !important;
    }
    #features .cg-bento > .cg-card p {
        font-size: 0.75rem !important;
        line-height: 1.75 !important;
        margin: 0 !important;
    }
    /* Smaller buttons on mobile */
    .cg-btn-primary {
        padding: 12px 22px !important;
        font-size: 0.8125rem !important;
    }
    .cg-btn-secondary {
        padding: 11px 20px !important;
        font-size: 0.8125rem !important;
    }
    .cg-btn-dark {
        padding: 13px 24px !important;
        font-size: 0.8125rem !important;
    }
}

/* --- Opportunity Grid --- */
.cg-opp-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    align-items: start;
}

/* How It Works grid */
.cg-how-grid {
    gap: 1.5rem !important;
}
.cg-how-grid > .cg-card {
    padding: 2rem !important;
}
.cg-how-step-head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cg-how-step-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: #4adcc2;
    letter-spacing: -0.02em;
}
.cg-how-step-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(214, 227, 255, 0.5);
}
.cg-how-primary .cg-how-step-head {
    border-bottom-color: rgba(0, 56, 47, 0.15);
}

.cg-opp-sticky {
    position: static;
}

.cg-opp-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.cg-opp-cards > .cg-card {
    height: 100%;
}
@media (max-width: 768px) {
    .cg-opp-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .cg-opp-grid {
        grid-template-columns: 1fr;
    }
    .cg-opp-sticky {
        position: static;
    }
    .cg-opp-cards {
        grid-template-columns: 1fr;
    }
    /* Platform Integrations: 4 items on one row */
    .cg-platforms-grid {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
    }
    .cg-platform-item {
        flex: 0 0 auto;
        gap: 0.4rem !important;
    }
    .cg-platform-icon {
        width: 44px !important;
        height: 44px !important;
        border-radius: 0.5rem !important;
    }
    .cg-platform-icon .material-symbols-outlined {
        font-size: 1.125rem !important;
    }
    .cg-platform-icon svg {
        width: 20px !important;
        height: 20px !important;
    }
    .cg-platform-item .cg-label {
        font-size: 0.5rem !important;
        letter-spacing: 0.05em !important;
    }
}

/* --- Platform Icons Grid --- */
.cg-platforms-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.cg-platform-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    cursor: default;
}

.cg-platform-icon {
    width: 96px;
    height: 96px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.cg-platform-icon .material-symbols-outlined {
    font-size: 2.5rem;
    transition: color 0.3s;
}

.cg-platform-item:hover .cg-platform-icon {
    background: rgba(74, 220, 194, 0.2) !important;
}

.cg-platform-item:hover .material-symbols-outlined {
    color: var(--cg-primary);
}

/* --- Demo Form Grid --- */
.cg-demo-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 4rem;
    align-items: start;
}

.cg-demo-left {
    padding-top: 2rem;
}

@media (max-width: 1024px) {
    .cg-demo-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Footer Grid --- */
.cg-footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.cg-footer-links-group {
    display: flex;
    gap: 4rem;
}

.cg-footer-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cg-footer-col a {
    font-size: 0.875rem;
    font-family: 'Manrope', sans-serif;
}

.cg-footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(68, 71, 77, 0.1);
    text-align: center;
}

@media (max-width: 768px) {
    /* Remove double horizontal padding (.cg-footer 2.5rem + .cg-section-inner 1.5rem)
       so the 3 cols have the full mobile viewport to spread across. */
    .cg-footer {
        padding: 3rem 0 2rem !important;
    }
    .cg-footer .cg-section-inner {
        padding: 0 1.625rem !important;
    }
    /* Keep 3-column footer on mobile: brand | Platform | Legal.
       The two link cols are nested inside .cg-footer-links-group — use
       display:contents to flatten it into the parent flex so all 3 cols
       become direct flex items. */
    .cg-footer-grid {
        flex-wrap: nowrap;
        gap: 1rem;
        align-items: flex-start;
        justify-content: space-between;
    }
    .cg-footer-links-group {
        display: contents;
    }
    .cg-footer-brand {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 40% !important;
    }
    .cg-footer-col {
        flex: 0 0 auto;
        gap: 0.6rem;
    }
    /* Push Platform (first link col) hard to the right so there's a big gap
       between Brand (left) and Platform. Legal follows Platform via flex gap. */
    .cg-footer-links-group > .cg-footer-col:first-child {
        margin-left: auto;
    }
    .cg-footer-brand img {
        height: 22px !important;
    }
    .cg-footer-brand p {
        font-size: 0.75rem !important;
    }
    .cg-footer-col a {
        font-size: 0.75rem !important;
    }
    .cg-footer-col .cg-label-sm {
        font-size: 0.6875rem !important;
        margin-bottom: 0.75rem !important;
    }
}


/* --- Ensure body padding for fixed header --- */
body.cg-has-header {
    padding-top: 80px;
}

/* Hide default Divi header/footer - we use custom template parts */
#main-header,
#top-header,
.et-fixed-header,
#main-footer,
#footer-bottom {
    display: none !important;
}

/* Ensure page container starts after our custom header */
#page-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.cg-has-header {
    padding-top: 72px;
}

/* Ensure et_pb_section uses full width */
.et_pb_section.et_pb_fullwidth_section {
    padding: 0 !important;
}

.et_pb_fullwidth_code {
    width: 100%;
    max-width: 100%;
}

/* --- Divi Builder Integration --- */
/* Remove extra spacing from Divi sections containing our modules */
.et_pb_section .cg-hero,
.et_pb_section .cg-opportunity,
.et_pb_section .cg-section {
    margin: 0;
}

/* Ensure our full-width sections work in Divi rows */
.et_pb_row .cg_site_header,
.et_pb_row .cg_site_footer,
.et_pb_row .cg_hero_section,
.et_pb_row .cg_opportunity_section,
.et_pb_row .cg_how_it_works,
.et_pb_row .cg_differentiator,
.et_pb_row .cg_platform_integrations,
.et_pb_row .cg_who_this_is_for,
.et_pb_row .cg_cta_banner,
.et_pb_row .cg_feature_grid,
.et_pb_row .cg_events_hero,
.et_pb_row .cg_events_opportunity,
.et_pb_row .cg_events_bento,
.et_pb_row .cg_events_use_cases,
.et_pb_row .cg_locations_hero,
.et_pb_row .cg_locations_how_it_works,
.et_pb_row .cg_locations_map,
.et_pb_row .cg_locations_use_cases,
.et_pb_row .cg_demo_form {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* --- Mobile landscape: desktop-like layout, scaled down --- */
/* Only true landscape phones (height ≤ 450px), not near-square screens */
@media (max-width: 768px) and (orientation: landscape) and (max-height: 450px) {
    /* Hero padding tighter */
    body.cg-has-header .cg-section:first-of-type,
    .et_pb_section:first-of-type .cg-hero,
    .cg-hero.cg-section {
        padding-top: 12px !important;
        padding-bottom: 20px !important;
    }

    /* Restore 2-column grid like desktop */
    .cg-hero-grid {
        display: grid !important;
        grid-template-columns: 1.5fr 1fr !important;
        gap: 2rem !important;
        align-items: center !important;
    }
    /* Reset mobile order overrides */
    .cg-hero-aside {
        order: 0 !important;
        display: block !important;
        justify-content: initial !important;
    }
    .cg-hero-content { order: 0 !important; }

    /* Status pill: inline like a button, right-aligned */
    .cg-hero-aside {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
    }
    .cg-status-pill-vertical {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0.375rem 0.625rem !important;
        max-width: fit-content !important;
        margin-left: auto !important;
        border-radius: 9999px;
    }
    .cg-status-pill-vertical > div[style] {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
        margin-bottom: 0 !important;
    }
    .cg-status-pill-vertical .cg-status-label {
        font-size: 0.4375rem !important;
    }
    .cg-status-pill-vertical .cg-status-value[style] {
        font-size: 0.4375rem !important;
        display: inline !important;
    }
    .cg-status-pill-vertical .cg-status-dot {
        width: 4px !important;
        height: 4px !important;
    }

    /* Typography: ~50% of desktop */
    .cg-display-lg { font-size: 1.25rem !important; line-height: 1.1 !important; }
    .cg-display-md { font-size: 1rem !important; }
    .cg-display-sm { font-size: 0.875rem !important; }
    .cg-title-lg   { font-size: 0.8125rem !important; }
    .cg-body-lg { font-size: 0.5625rem !important; line-height: 1.55 !important; }
    .cg-hero-content p.cg-body-lg,
    .cg-hero p.cg-body-lg {
        font-size: 0.5625rem !important;
        margin-bottom: 0.75rem !important;
    }
    .cg-label-sm { font-size: 0.4375rem !important; letter-spacing: 0.25em !important; margin-bottom: 0.375rem !important; }

    /* Buttons: ~50% */
    .cg-btn-primary { padding: 5px 12px !important; font-size: 0.5625rem !important; }
    .cg-btn-secondary { padding: 4px 10px !important; font-size: 0.5625rem !important; }
    .cg-hero-buttons { gap: 0.375rem !important; }

    /* Stats grid: ~50% */
    .cg-stats-grid {
        margin-top: 0.5rem !important;
        gap: 0.25rem !important;
    }
    .cg-stat-item {
        padding: 0.25rem 0.25rem !important;
        text-align: center;
    }
    .cg-stat-number { font-size: 0.75rem !important; margin: 0.1rem 0 !important; }
    .cg-stat-label { font-size: 0.375rem !important; }
    .cg-stat-item .cg-body-sm { font-size: 0.4375rem !important; line-height: 1.2 !important; }

    /* Section 2 bento: 2x2 grid like desktop */
    .cg-bento {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.625rem !important;
    }
    .cg-bento > .cg-card {
        padding: 0.75rem !important;
    }
    .cg-bento > .cg-card .material-symbols-outlined {
        font-size: 1.125rem !important;
        margin-bottom: 0.25rem !important;
    }
    .cg-bento > .cg-card h3,
    .cg-bento > .cg-card h4 {
        font-size: 0.6875rem !important;
        margin-bottom: 0.2rem !important;
        line-height: 1.2 !important;
    }
    .cg-bento > .cg-card p {
        font-size: 0.625rem !important;
        line-height: 1.6 !important;
    }

    /* Section 3 (WHAT MAKES THIS DIFFERENT) cards: tighter */
    .cg-opp-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    .cg-opp-cards > .cg-card {
        padding: 0.625rem !important;
    }
    .cg-opp-cards > .cg-card .material-symbols-outlined {
        font-size: 1rem !important;
        margin-bottom: 0.2rem !important;
    }
    .cg-opp-cards > .cg-card h4 {
        font-size: 0.625rem !important;
        margin-bottom: 0.15rem !important;
    }
    .cg-opp-cards > .cg-card p {
        font-size: 0.5625rem !important;
        line-height: 1.5 !important;
    }
    .cg-opp-sticky .cg-card-glass {
        padding: 0.875rem !important;
    }
    .cg-opp-sticky .cg-card-glass h3 {
        font-size: 0.875rem !important;
    }
    .cg-opp-sticky .cg-card-glass p {
        font-size: 0.6875rem !important;
    }

    /* Section 4 (WHO THIS IS FOR / Build For) cards: tighter */
    .cg-flex-3 {
        gap: 0.5rem !important;
    }
    .cg-flex-3 > .cg-card {
        padding: 0.625rem !important;
        gap: 0.375rem !important;
    }
    .cg-flex-3 > .cg-card .material-symbols-outlined {
        font-size: 1rem !important;
    }
    .cg-flex-3 > .cg-card h4 {
        font-size: 0.625rem !important;
    }
    .cg-flex-3 > .cg-card p {
        font-size: 0.5625rem !important;
        line-height: 1.5 !important;
    }
    .cg-flex-3 > .cg-card .cg-body-sm {
        font-size: 0.5625rem !important;
    }
    .cg-flex-3 > .cg-card [style*="padding:0.75rem"] {
        padding: 0.375rem !important;
    }
}