/* =============================================================================
   CustomGPT Site Header
   Scoped to #cgpt-header — no selectors escape this root.
   Design tokens extracted from Elementor template 59911 / post-5991.css.
   ============================================================================= */

/* ── CSS custom properties (tokens) ─────────────────────────────────────── */
#cgpt-header {
	--cgpt-purple:       #602FFC;
	--cgpt-purple-hover: #7B54F7;
	--cgpt-link-blue:    #6D7CFF;
	--cgpt-link-hover:   #8475FD;
	--cgpt-text:         #595959;
	--cgpt-text-dark:    #141414;
	--cgpt-border:       #CCCCCC;
	--cgpt-rule:         #E5E5E5;
	--cgpt-separator:    #E5E5E5;
	--cgpt-bg-hover:     #F7F7F7;
	--cgpt-enterprise:   #3C2979;
	--cgpt-sparkle:      #FF51FF;
	--cgpt-max-w:        1350px;
	--cgpt-radius-pill:  100px;
	--cgpt-radius-panel: 20px;
	--cgpt-admin-top:    0px;
}

/* ── Base reset (scoped) ─────────────────────────────────────────────────── */
#cgpt-header,
#cgpt-header * {
	box-sizing: border-box;
}

#cgpt-header ul,
#cgpt-header li {
	list-style: none;
	margin:     0;
	padding:    0;
}

#cgpt-header button {
	background: none;
	border:     none;
	cursor:     pointer;
	font:       inherit;
	padding:    0;
}

/* Neutralise Elementor Kit global button colour overrides (they target button:hover/focus
   with color:#fff which makes nav/mobile trigger labels invisible on white backgrounds).
   Only apply color:inherit on interaction states — not on the base state, which would
   override .cgpt-nav-trigger { color: var(--cgpt-text) } and make dropdowns black. */
#cgpt-header button:not(.cgpt-hamburger) {
	border:      none !important;
	box-shadow:  none !important;
	outline:     none !important;
}
#cgpt-header button:not(.cgpt-hamburger):hover,
#cgpt-header button:not(.cgpt-hamburger):focus,
#cgpt-header button:not(.cgpt-hamburger):active {
	color:       inherit !important;
	border:      none !important;
	box-shadow:  none !important;
	outline:     none !important;
}

#cgpt-header a {
	text-decoration: none;
	color:           var(--cgpt-text-dark);
}

#cgpt-header img {
	display: block;
	max-width: 100%;
}

/* ── Hide the parent theme's built-in nav (we replace it entirely) ──────── */
#wrapper > .main-menu-wrapper,
#elementor-header.main-menu-wrapper {
	display: none !important;
}

/* ── Header shell ────────────────────────────────────────────────────────── */
#cgpt-header {
	position:    fixed;
	top:         var(--cgpt-fixed-top, 0px) !important;
	left:        0;
	width:       100%;
	z-index:     9999;
	background:  transparent;
	transition:  background 0.3s, box-shadow 0.3s;
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Glassmorphism once the user has scrolled — blur on ::before avoids stacking context */
#cgpt-header.is-scrolled {
	background: transparent;
	box-shadow: 0 1px 24px rgba(96, 47, 252, 0.07);
}

/* Main header should stay solid white at top (non-scrolled state). */
#cgpt-header.cgpt-header--main:not(.is-scrolled) {
	background: #FFFFFF;
}

#cgpt-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.78);
	opacity: 0;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transition: opacity 0.3s ease;
}

#cgpt-header.is-scrolled::before {
	opacity: 1;
}

/* =============================================================================
   Header Variants (desktop)
   ============================================================================= */
#cgpt-header.cgpt-header--light-purple {
	--cgpt-variant-bg:      #F0EDFF;
	--cgpt-separator:       #D8D0F2;
	--cgpt-variant-text:    #141414;
	--cgpt-variant-hover:   rgba(96, 47, 252, 0.10);
	--cgpt-variant-outline: #6D7CFF;
}

#cgpt-header.cgpt-header--dark-purple {
	--cgpt-variant-bg:      #3C2979;
	--cgpt-separator:       rgba(255, 255, 255, 0.55);
	--cgpt-variant-text:    #FFFFFF;
	--cgpt-variant-hover:   rgba(255, 255, 255, 0.16);
	--cgpt-variant-outline: #6D7CFF;
}

#cgpt-header.cgpt-header--campaign-dark {
	--cgpt-variant-bg:      #3C2979;
	--cgpt-separator:       transparent;
	--cgpt-variant-text:    #FFFFFF;
	--cgpt-variant-outline: #6D7CFF;
}

#cgpt-header.cgpt-header--light-purple,
#cgpt-header.cgpt-header--light-purple.is-scrolled,
#cgpt-header.cgpt-header--dark-purple,
#cgpt-header.cgpt-header--dark-purple.is-scrolled,
#cgpt-header.cgpt-header--campaign-dark,
#cgpt-header.cgpt-header--campaign-dark.is-scrolled {
	background: var(--cgpt-variant-bg);
	box-shadow: none;
}

#cgpt-header.cgpt-header--light-purple::before,
#cgpt-header.cgpt-header--dark-purple::before,
#cgpt-header.cgpt-header--campaign-dark::before {
	display: none;
}

#cgpt-header.cgpt-header--campaign-dark .cgpt-topbar,
#cgpt-header.cgpt-header--campaign-dark .cgpt-panel,
#cgpt-header.cgpt-header--campaign-dark #cgpt-mobile-panel,
#cgpt-header.cgpt-header--campaign-dark .cgpt-overlay,
#cgpt-header.cgpt-header--campaign-dark #cgpt-mobile-scrim {
	display: none !important;
}

#cgpt-header.cgpt-header--campaign-dark .cgpt-mainbar {
	border-top: 0;
}

#cgpt-header.cgpt-header--campaign-dark .cgpt-mainbar-inner--campaign {
	display:               grid;
	grid-template-columns: auto 1fr auto;
	align-items:           center;
	gap:                   28px;
	min-height:            86px;
	padding-top:           16px;
	padding-bottom:        16px;
}

#cgpt-header.cgpt-header--campaign-dark .cgpt-logo {
	margin-right: 0;
}

#cgpt-header.cgpt-header--campaign-dark .cgpt-logo-image--inverted {
	filter: brightness(0) invert(1);
}

#cgpt-header.cgpt-header--campaign-dark .cgpt-campaign-copy {
	margin:      0;
	color:       #FFFFFF;
	font-size:   clamp(1rem, 1.1vw, 1.4rem);
	line-height: 1.2;
	font-weight: 600;
	text-align:  center;
	white-space: nowrap;
}

#cgpt-header.cgpt-header--campaign-dark .cgpt-mainbar-ctas--campaign {
	display:     flex;
	align-items: center;
}

#cgpt-header.cgpt-header--campaign-dark .cgpt-btn--campaign {
	background-image: linear-gradient(100deg, #D95AF7 0%, #7583FF 100%);
	background-color: transparent;
	color: #FFFFFF !important;
	padding: 12px 28px;
	font-size: 1rem;
	font-weight: 500;
	box-shadow: 0 8px 18px rgba(117, 131, 255, 0.28);
	transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#cgpt-header.cgpt-header--campaign-dark .cgpt-btn--campaign:hover,
#cgpt-header.cgpt-header--campaign-dark .cgpt-btn--campaign:focus-visible {
	filter: brightness(1.08);
	transform: translateY(-1px);
	box-shadow: 0 12px 24px rgba(117, 131, 255, 0.36);
}

#cgpt-header.cgpt-header--campaign-dark .cgpt-btn--campaign:active {
	filter: brightness(1.03);
	transform: translateY(0);
}

#cgpt-header.cgpt-header--light-purple .cgpt-nav-trigger,
#cgpt-header.cgpt-header--light-purple .cgpt-nav-link,
#cgpt-header.cgpt-header--light-purple .cgpt-topbar-link,
#cgpt-header.cgpt-header--dark-purple .cgpt-nav-trigger,
#cgpt-header.cgpt-header--dark-purple .cgpt-nav-link,
#cgpt-header.cgpt-header--dark-purple .cgpt-topbar-link {
	color: var(--cgpt-variant-text);
}

#cgpt-header.cgpt-header--light-purple .cgpt-chevron,
#cgpt-header.cgpt-header--dark-purple .cgpt-chevron {
	color: var(--cgpt-variant-text);
}

#cgpt-header.cgpt-header--light-purple .cgpt-nav-trigger:hover,
#cgpt-header.cgpt-header--light-purple .cgpt-nav-trigger.is-active,
#cgpt-header.cgpt-header--light-purple .cgpt-nav-item:hover > .cgpt-nav-trigger,
#cgpt-header.cgpt-header--light-purple .cgpt-nav-link:hover,
#cgpt-header.cgpt-header--dark-purple .cgpt-nav-trigger:hover,
#cgpt-header.cgpt-header--dark-purple .cgpt-nav-trigger.is-active,
#cgpt-header.cgpt-header--dark-purple .cgpt-nav-item:hover > .cgpt-nav-trigger,
#cgpt-header.cgpt-header--dark-purple .cgpt-nav-link:hover {
	background: var(--cgpt-variant-hover);
	color: var(--cgpt-variant-text);
}

#cgpt-header.cgpt-header--light-purple .cgpt-nav-trigger.is-current,
#cgpt-header.cgpt-header--light-purple .cgpt-nav-link.is-current {
	background: rgba(96, 47, 252, 0.14);
	color: var(--cgpt-purple);
}

#cgpt-header.cgpt-header--dark-purple .cgpt-nav-trigger.is-current,
#cgpt-header.cgpt-header--dark-purple .cgpt-nav-link.is-current {
	background: rgba(255, 255, 255, 0.20);
	color: #FFFFFF;
}

#cgpt-header.cgpt-header--light-purple .cgpt-btn--primary,
#cgpt-header.cgpt-header--dark-purple .cgpt-btn--primary {
	background-image: linear-gradient(100deg, #D95AF7 0%, #7583FF 100%);
	background-color: transparent;
	color: #FFFFFF !important;
}

#cgpt-header.cgpt-header--light-purple .cgpt-btn--primary:hover,
#cgpt-header.cgpt-header--dark-purple .cgpt-btn--primary:hover {
	filter: brightness(1.05);
}

#cgpt-header.cgpt-header--light-purple .cgpt-btn--outline,
#cgpt-header.cgpt-header--dark-purple .cgpt-btn--outline {
	color: var(--cgpt-variant-outline) !important;
	border-color: var(--cgpt-variant-outline) !important;
}

#cgpt-header.cgpt-header--dark-purple .cgpt-btn--outline {
	background: rgba(60, 41, 121, 0.35);
}

#cgpt-header.cgpt-header--dark-purple .cgpt-btn--outline:hover {
	background: rgba(109, 124, 255, 0.14);
}

/* Keep dark variant dropdown trigger text white on all hover/active paths */
#cgpt-header.cgpt-header--dark-purple .cgpt-nav-trigger,
#cgpt-header.cgpt-header--dark-purple .cgpt-nav-trigger:hover,
#cgpt-header.cgpt-header--dark-purple .cgpt-nav-trigger.is-active,
#cgpt-header.cgpt-header--dark-purple .cgpt-nav-item:hover > .cgpt-nav-trigger,
#cgpt-header.cgpt-header--dark-purple:not(.is-scrolled) .cgpt-nav-trigger:hover,
#cgpt-header.cgpt-header--dark-purple:not(.is-scrolled) .cgpt-nav-trigger.is-active,
#cgpt-header.cgpt-header--dark-purple:not(.is-scrolled) .cgpt-nav-item:hover > .cgpt-nav-trigger {
	color: #FFFFFF !important;
}

/* Push header below WP admin bar when logged in */
body.admin-bar #cgpt-header {
	--cgpt-admin-top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar #cgpt-header {
		--cgpt-admin-top: 46px;
	}
}

/* ── Container ────────────────────────────────────────────────────────────── */
#cgpt-header .cgpt-container {
	max-width:    var(--cgpt-max-w);
	margin-left:  auto;
	margin-right: auto;
	padding-left:  20px;
	padding-right: 20px;
}

/* =============================================================================
   TOPBAR
   ============================================================================= */
.cgpt-topbar {
	transition:    border-color 0.3s;
	position:      relative;
	z-index:       1000;  /* stay above overlay (998) so nav triggers are always hoverable */
}

.cgpt-topbar-inner {
	display:         flex;
	align-items:     center;
	justify-content: flex-end;
	height:          44px;
	gap:             4px;
	border-bottom:   1px solid var(--cgpt-separator);
}

/* Topbar nav list */
.cgpt-topbar-nav {
	display:     flex;
	align-items: center;
	gap:         4px;
}

/* Nav item (shared topbar + mainnav) */
#cgpt-header .cgpt-nav-item {
	position: relative;
}

/* Nav trigger button (dropdown opener) */
#cgpt-header .cgpt-nav-trigger {
	display:      inline-flex;
	align-items:  center;
	gap:          5px;
	padding:      8px 12px;
	font-size:    1rem;
	font-weight:  400;
	color:        var(--cgpt-text-dark);
	border-radius: 6px;
	transition:   color 0.15s, background 0.15s;
	white-space:  nowrap;
}

#cgpt-header .cgpt-nav-trigger:hover,
#cgpt-header .cgpt-nav-trigger.is-active,
#cgpt-header .cgpt-nav-item:hover > .cgpt-nav-trigger {
	color:      var(--cgpt-text-dark);
	background: var(--cgpt-bg-hover);
}

#cgpt-header:not(.is-scrolled) .cgpt-nav-trigger:hover,
#cgpt-header:not(.is-scrolled) .cgpt-nav-trigger.is-active,
#cgpt-header:not(.is-scrolled) .cgpt-nav-item:hover > .cgpt-nav-trigger {
	background: rgba(255, 255, 255, 0.2);
}

/* Plain nav link (non-dropdown) */
#cgpt-header .cgpt-nav-link {
	display:       inline-flex;
	align-items:   center;
	padding:       8px 12px;
	font-size:     1rem;
	font-weight:   400;
	color:         var(--cgpt-text-dark);
	border-radius: 6px;
	transition:    color 0.15s, background 0.15s;
}

#cgpt-header .cgpt-nav-link:hover {
	color:      var(--cgpt-text-dark);
	background: var(--cgpt-bg-hover);
}

#cgpt-header:not(.is-scrolled) .cgpt-nav-link:hover {
	background: rgba(255, 255, 255, 0.2);
}

/* Active page indicator — filled pill on current section */
#cgpt-header .cgpt-nav-trigger.is-current,
#cgpt-header .cgpt-nav-link.is-current {
	background: rgba(96, 47, 252, 0.08);
	color:       var(--cgpt-purple);
	border-radius: 6px;
}

#cgpt-header:not(.is-scrolled) .cgpt-nav-trigger.is-current,
#cgpt-header:not(.is-scrolled) .cgpt-nav-link.is-current {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

/* Chevron */
.cgpt-chevron {
	flex-shrink: 0;
	color:       var(--cgpt-sparkle);
	transition:  transform 0.2s;
}

.cgpt-nav-trigger[aria-expanded="true"] .cgpt-chevron,
.cgpt-mobile-trigger[aria-expanded="true"] .cgpt-chevron {
	transform: rotate(180deg);
}

/* Topbar right CTAs */
.cgpt-topbar-ctas {
	display:     flex;
	align-items: center;
	gap:         12px;
	flex-shrink: 0;
}

.cgpt-topbar-link {
	font-size:   0.875rem;
	font-weight: 400;
	color:       var(--cgpt-text);
	padding:     8px 4px;
	transition:  color 0.15s;
}

.cgpt-topbar-link:hover {
	color: var(--cgpt-text-dark);
}

/* =============================================================================
   BUTTONS (shared across topbar + mainbar + panels)
   ============================================================================= */
#cgpt-header .cgpt-btn {
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	border-radius: var(--cgpt-radius-pill);
	font-weight:   500;
	font-size:     0.9rem;
	line-height:   1;
	white-space:   nowrap;
	transition:    background-color 0.15s, background-image 0.15s, border-color 0.15s;
	text-decoration: none;
}

/* Primary — purple filled */
#cgpt-header .cgpt-btn--primary {
	background-color: var(--cgpt-purple);
	color:            #fff !important;
	padding:          13px 28px;
}

#cgpt-header .cgpt-btn--primary:hover {
	background-color: var(--cgpt-purple-hover);
}

/* Outline — ghost */
#cgpt-header .cgpt-btn--outline {
	background-color:   transparent;
	background-image:   none;
	color:              var(--cgpt-link-blue) !important;
	border:             1px solid var(--cgpt-link-blue) !important;
	padding:            12px 22px;
	transition:         color 0.3s, border-color 0.3s, background 0.15s;
}

#cgpt-header .cgpt-btn--outline:hover {
	background-image: linear-gradient(110deg, #EB57FD1A 20%, #8475FD29 80%);
	border-color:     var(--cgpt-link-hover);
}

/* Note: no white-on-transparent rule for .cgpt-btn--outline.
   The header is transparent and overlays the hero — keeping the button blue
   ensures it is legible against both purple hero and white backgrounds. */

/* Enterprise CTA — inside dark panel */
#cgpt-header .cgpt-btn--enterprise {
	background:    linear-gradient(110deg, var(--cgpt-sparkle) 0%, var(--cgpt-sparkle) 100%);
	color:         #fff !important;
	border-radius: 10px;
	padding:       10px 20px;
	font-size:     1.1rem;
	font-weight:   500;
	margin-top:    1rem;
	width:         100%;
	justify-content: center;
}

#cgpt-header .cgpt-btn--enterprise:hover {
	opacity: 0.9;
}

/* Full-width variant (mobile CTAs) */
#cgpt-header .cgpt-btn--full {
	width:           100%;
	justify-content: center;
	border-radius:   10px;
}

/* =============================================================================
   MAINBAR
   ============================================================================= */
.cgpt-mainbar {
	border-top: 0;
	position:   relative;
	z-index:    1000;  /* stay above overlay (998) */
}

#cgpt-header.is-scrolled .cgpt-mainbar {
	border-top: 0;
}

.cgpt-mainbar-inner {
	display:          flex;
	align-items:      center;
	justify-content:  space-between;
	gap:              8px;
	padding-top:      17px;
	padding-bottom:   17px;
}

/* Logo */
.cgpt-logo {
	flex-shrink: 0;
	margin-right: 8px;
}

.cgpt-logo img {
	width:  192px;
	height: auto;
}

/* Mainnav */
.cgpt-mainnav {
	flex:            1;
	display:         flex;
	justify-content: center;
}

.cgpt-mainnav ul {
	display:     flex;
	align-items: center;
	gap:         2px;
}

/* Hide last 3 items on desktop (Company, Resources, Login live in topbar) */
@media (min-width: 769px) {
	.cgpt-desktop-hide {
		display: none;
	}
}

/* Mainbar CTAs */
.cgpt-mainbar-ctas {
	display:     flex;
	align-items: center;
	gap:         10px;
	flex-shrink: 0;
}

/* Hamburger */
.cgpt-hamburger {
	display:         none;  /* shown via media query */
	align-items:     center;
	justify-content: center;
	width:           40px;
	height:          40px;
	border-radius:   50%;
	color:           var(--cgpt-sparkle);
	background:      rgba(0, 0, 0, 0.05);
	transition:      background 0.15s;
	padding:         0;
	flex-shrink:     0;
}

/* Ensure icon spans don't add line-height offset */
.cgpt-hamburger .cgpt-icon-open,
.cgpt-hamburger .cgpt-icon-close {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	height:          100%;
}

/* Respect hidden attribute — CSS display overrides it otherwise */
.cgpt-hamburger [hidden] {
	display: none !important;
}

/* High specificity to beat Elementor Kit global button styles */
#cgpt-header button.cgpt-hamburger,
#cgpt-header button.cgpt-hamburger:focus {
	color:       var(--cgpt-sparkle) !important;
	background:  rgba(0, 0, 0, 0.05) !important;
	border:      none !important;
	outline:     none !important;
	box-shadow:  none !important;
}

#cgpt-header button.cgpt-hamburger:hover {
	background: rgba(0, 0, 0, 0.1) !important;
}

/* =============================================================================
   DROPDOWN PANELS
   ============================================================================= */
.cgpt-panel {
	display:  none;
	position: absolute;
	top:      100%;
	left:     0;
	right:    0;
	z-index:  999;
	padding:  12px 0 20px;
}

.cgpt-panel.is-open {
	display: block;
}

/* Common panel inner layout */
.cgpt-panel .cgpt-panel-inner {
	display:        flex;
	align-items:    stretch;
	border-radius:  var(--cgpt-radius-panel);
	overflow:       hidden;
	margin-inline:  auto;
	/* Individual panels override background/border/shadow below */
}

/* Panel section headings */
#cgpt-header .cgpt-panel-heading {
	font-family:   Inter, sans-serif;
	font-size:     1.1rem;
	font-weight:   700;
	color:         var(--cgpt-text-dark);
	margin:        16px 0 8px;
	padding:       0 16px;
	line-height:   1.2;
}

/* Panel links */
#cgpt-header .cgpt-panel-link {
	display:       flex;
	align-items:   center;
	padding:       10px 16px;
	font-size:     0.875rem;
	font-weight:   400;
	color:         var(--cgpt-text);
	border-radius: 6px;
	transition:    background 0.12s, color 0.12s;
	line-height:   1.3;
}

#cgpt-header .cgpt-panel-link:hover {
	background: var(--cgpt-bg-hover);
	color:      var(--cgpt-text-dark);
}

#cgpt-header .cgpt-panel-link.is-current {
	background: rgba(96, 47, 252, 0.12);
	color: var(--cgpt-purple);
	font-weight: 600;
}

/* ── PLATFORM panel ─────────────────────────────────────────────────────── */
.cgpt-panel--platform .cgpt-panel-inner {
	border:     1px solid var(--cgpt-border);
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
	max-width:  1000px;
}

/* Left white area (2 columns) */
.cgpt-platform-left {
	flex:             0 0 50%;
	display:          flex;
	gap:              0;
	background:       #fff;
	border-radius:    var(--cgpt-radius-panel) 0 0 var(--cgpt-radius-panel);
	padding:          0.5rem 0 1.5rem;
}

.cgpt-platform-left .cgpt-panel-col {
	flex: 1;
	min-width: 0;
}

/* Right dark Enterprise area */
.cgpt-platform-right {
	flex:          0 0 50%;
	background:    var(--cgpt-enterprise);
	border-radius: 0 var(--cgpt-radius-panel) var(--cgpt-radius-panel) 0;
	padding:       1.25rem 1.5rem;
	box-shadow:    0 0 15px rgba(0, 0, 0, 0.5);
	display:       flex;
	flex-direction: column;
}

.cgpt-enterprise-heading {
	display:     flex;
	align-items: center;
	gap:         8px;
	font-size:   1.25rem;
	font-weight: 700;
	color:       #fff;
	margin:      0 0 0.75rem;
}

.cgpt-sparkle {
	flex-shrink: 0;
}

.cgpt-enterprise-desc {
	font-size:   0.9rem;
	color:       rgba(255, 255, 255, 0.85);
	line-height: 1.55;
	margin:      0 0 1rem;
}

.cgpt-enterprise-features {
	display:        flex;
	flex-direction: column;
	gap:            6px;
	margin-bottom:  auto;
}

.cgpt-enterprise-features li {
	font-size:   0.875rem;
	color:       rgba(255, 255, 255, 0.9);
	padding-left: 20px;
	position:    relative;
}

.cgpt-enterprise-features li::before {
	content:  '✓';
	position: absolute;
	left:     0;
	color:    var(--cgpt-sparkle);
	font-weight: 700;
}

/* ── SOLUTIONS panel ────────────────────────────────────────────────────── */
.cgpt-panel--solutions .cgpt-panel-inner {
	background:    linear-gradient(97deg, #FFFFFF 88%, #602FFC 100%);
	border:        1px solid var(--cgpt-border);
	border-radius: var(--cgpt-radius-panel);
	box-shadow:    0 0 15px rgba(0, 0, 0, 0.2);
	padding:       0.5rem 0 1.5rem;
	align-items:   center;
	max-width:     1000px;
}

.cgpt-solutions-cols {
	display: flex;
	flex:    0 0 50%;
}

.cgpt-solutions-cols .cgpt-panel-col {
	flex: 1;
	min-width: 0;
}

.cgpt-solutions-image {
	flex:           0 0 50%;
	display:        flex;
	align-items:    center;
	justify-content: center;
	padding:        1rem;
}

.cgpt-solutions-image img {
	max-width:    280px;
	border-radius: 12px;
	object-fit:   contain;
}

/* ── COMPANY panel ──────────────────────────────────────────────────────── */
.cgpt-panel--company .cgpt-panel-inner {
	background:    linear-gradient(97deg, #FFFFFF 88%, #7E76FF 100%);
	border:        1px solid var(--cgpt-border);
	border-radius: var(--cgpt-radius-panel);
	box-shadow:    0 0 15px rgba(0, 0, 0, 0.2);
	padding:       0.5rem 0 1.5rem;
	max-width:     1000px;
}

.cgpt-panel--company .cgpt-panel-col {
	flex: 1;
	min-width: 0;
}

/* ── RESOURCES panel ────────────────────────────────────────────────────── */
.cgpt-panel--resources .cgpt-panel-inner {
	background:    linear-gradient(97deg, #FFFFFF 88%, #EE55FF 100%);
	border:        1px solid var(--cgpt-border);
	border-radius: var(--cgpt-radius-panel);
	box-shadow:    0 0 15px rgba(0, 0, 0, 0.2);
	padding:       0.5rem 0 1.5rem;
	max-width:     1000px;
}

.cgpt-panel--resources .cgpt-panel-col {
	flex: 1;
	min-width: 0;
}

/* External link icon alignment */
#cgpt-header .cgpt-link-external {
	display:     flex;
	align-items: center;
	gap:         5px;
}

/* Dev resources gray box */
.cgpt-dev-box {
	background:    #EEEEEE;
	border:        1px solid var(--cgpt-border);
	border-radius: var(--cgpt-radius-panel);
	padding:       10px;
	margin:        8px 16px 0;
}

.cgpt-dev-box .cgpt-panel-link {
	border-radius: 8px;
}

/* =============================================================================
   OVERLAY (click-outside dismiss)
   ============================================================================= */
.cgpt-overlay {
	display:    none;
	position:   fixed;
	inset:      0;
	z-index:    998;
	background: rgba(0, 0, 0, 0.25);
}

.cgpt-overlay.is-visible {
	display: block;
}

/* Mobile panel + scrim — hidden on desktop (intentionally outside media query) */
#cgpt-mobile-panel {
	display: none;
}

#cgpt-mobile-scrim {
	display: none;
}

/* =============================================================================
   MOBILE PANEL
   ============================================================================= */

.cgpt-mobile-nav {
	margin-top: 8px;
}

.cgpt-mobile-item {
	border-bottom: 1px solid var(--cgpt-rule);
}

.cgpt-mobile-trigger,
.cgpt-mobile-link {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	width:           100%;
	padding:         14px 4px !important;
	font-size:       1rem;
	font-weight:     500;
	color:           var(--cgpt-text-dark) !important;
	text-align:      left;
	background:      none;
	border:          none;
	cursor:          pointer;
}

.cgpt-mobile-link {
	text-decoration: none;
}

.cgpt-mobile-link.is-current {
	color: var(--cgpt-purple) !important;
}

.cgpt-mobile-trigger .cgpt-chevron {
	flex-shrink: 0;
	color:       var(--cgpt-sparkle);
}

.cgpt-mobile-sub {
	padding-bottom: 8px;
}

/* ── Rich mobile sub-panels ──────────────────────────────────────────────── */

.cgpt-mobile-rich-sub {
	padding: 4px 0 12px;
}

.cgpt-mobile-section {
	padding:       10px 0 12px;
	border-bottom: 1px solid var(--cgpt-rule);
	margin:        0 4px;
}

.cgpt-mobile-section:last-child {
	border-bottom: none;
}

.cgpt-mobile-section-heading {
	font-size:      0.7rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color:          var(--cgpt-text) !important;
	opacity:        0.55;
	padding:        6px 12px 2px;
	margin:         0;
}

.cgpt-mobile-rich-sub a {
	display:         flex;
	align-items:     center;
	padding:         9px 12px;
	font-size:       0.9rem;
	font-weight:     400;
	color:           var(--cgpt-text) !important;
	border-radius:   6px;
	transition:      background 0.12s;
	text-decoration: none;
}

.cgpt-mobile-rich-sub a:hover {
	background: var(--cgpt-bg-hover);
	color:      var(--cgpt-text-dark) !important;
}

.cgpt-mobile-rich-sub a.is-current,
.cgpt-mobile-sub li a.is-current {
	background: rgba(96, 47, 252, 0.12);
	color: var(--cgpt-purple) !important;
	font-weight: 600;
}

/* Enterprise box */
.cgpt-mobile-enterprise-box {
	background:    var(--cgpt-enterprise);
	border-radius: 16px;
	padding:       16px;
	margin:        10px 0 4px;
}

.cgpt-mobile-enterprise-box .cgpt-enterprise-heading {
	font-size:   1rem;
	font-weight: 700;
	color:       #fff;
	margin:      0 0 8px;
}

.cgpt-mobile-enterprise-box .cgpt-enterprise-desc {
	font-size:   0.85rem;
	color:       rgba(255, 255, 255, 0.85);
	line-height: 1.5;
	margin:      0 0 12px;
}

/* Dev resources box */
.cgpt-mobile-dev-box {
	background:    #EEEEEE;
	border:        1px solid var(--cgpt-border);
	border-radius: 12px;
	padding:       6px;
	margin-top:    4px;
}

.cgpt-mobile-dev-box a {
	border-radius: 8px;
}

.cgpt-mobile-sub li a {
	display:       block;
	padding:       10px 12px;
	font-size:     0.9rem;
	color:         var(--cgpt-text) !important;
	border-radius: 6px;
	transition:    background 0.12s, color 0.12s;
	text-decoration: none;
}

.cgpt-mobile-sub li a:hover {
	background: var(--cgpt-bg-hover);
	color:      var(--cgpt-text-dark);
}

.cgpt-mobile-ctas {
	display:        flex;
	flex-direction: column;
	gap:            10px;
	margin-top:     20px;
}

.cgpt-mobile-ctas .cgpt-btn--full {
	border-radius: 10px;
}

/* Mobile CTAs always use brand colours — never the transparent-header white */
#cgpt-header .cgpt-mobile-ctas .cgpt-btn--outline,
#cgpt-header:not(.is-scrolled) .cgpt-mobile-ctas .cgpt-btn--outline {
	color:        var(--cgpt-link-blue) !important;
	border-color: var(--cgpt-link-blue) !important;
}

/* Final desktop variant overrides (keep after base rules) */
#cgpt-header.cgpt-header--light-purple .cgpt-nav-trigger,
#cgpt-header.cgpt-header--light-purple .cgpt-nav-link,
#cgpt-header.cgpt-header--light-purple .cgpt-topbar-link,
#cgpt-header.cgpt-header--dark-purple .cgpt-nav-trigger,
#cgpt-header.cgpt-header--dark-purple .cgpt-nav-link,
#cgpt-header.cgpt-header--dark-purple .cgpt-topbar-link {
	color: var(--cgpt-variant-text);
}

#cgpt-header.cgpt-header--light-purple .cgpt-nav-trigger:hover,
#cgpt-header.cgpt-header--light-purple .cgpt-nav-trigger.is-active,
#cgpt-header.cgpt-header--light-purple .cgpt-nav-item:hover > .cgpt-nav-trigger,
#cgpt-header.cgpt-header--light-purple .cgpt-nav-link:hover,
#cgpt-header.cgpt-header--dark-purple .cgpt-nav-trigger:hover,
#cgpt-header.cgpt-header--dark-purple .cgpt-nav-trigger.is-active,
#cgpt-header.cgpt-header--dark-purple .cgpt-nav-item:hover > .cgpt-nav-trigger,
#cgpt-header.cgpt-header--dark-purple .cgpt-nav-link:hover {
	background: var(--cgpt-variant-hover);
	color: var(--cgpt-variant-text);
}

#cgpt-header.cgpt-header--light-purple .cgpt-btn--primary,
#cgpt-header.cgpt-header--dark-purple .cgpt-btn--primary {
	background-image: linear-gradient(100deg, #D95AF7 0%, #7583FF 100%);
	background-color: transparent;
}

#cgpt-header.cgpt-header--light-purple .cgpt-btn--outline,
#cgpt-header.cgpt-header--dark-purple .cgpt-btn--outline {
	color: var(--cgpt-variant-outline) !important;
	border-color: var(--cgpt-variant-outline) !important;
}

#cgpt-header.cgpt-header--dark-purple .cgpt-btn--outline {
	background: rgba(60, 41, 121, 0.35);
}

#cgpt-header.cgpt-header--dark-purple .cgpt-btn--outline:hover {
	background: rgba(109, 124, 255, 0.14);
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

/* ── ≤1024px: switch to mobile layout ───────────────────────────────────── */
@media (max-width: 1024px) {

	#cgpt-header.cgpt-header--campaign-dark {
		background: #3C2979 !important;
		box-shadow: none !important;
	}

	#cgpt-header.cgpt-header--campaign-dark .cgpt-mainbar-inner--campaign {
		grid-template-columns: 1fr auto;
		gap: 12px;
		min-height: 72px;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	#cgpt-header.cgpt-header--campaign-dark .cgpt-campaign-copy {
		display: none;
	}

	#cgpt-header.cgpt-header--campaign-dark .cgpt-logo img {
		width: 168px;
	}

	#cgpt-header.cgpt-header--campaign-dark .cgpt-btn--campaign {
		font-size: 1rem;
		padding: 10px 18px;
	}


	/* Always white on mobile — transparent only makes sense over the hero on desktop */
	#cgpt-header {
		background: #fff !important;
		box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08) !important;
	}

	#cgpt-header::before {
		display: none;
	}

	/* Restore button/link colours that were overridden for transparent state */
	#cgpt-header .cgpt-btn--outline {
		color:        var(--cgpt-link-blue) !important;
		border-color: var(--cgpt-link-blue) !important;
	}

	/* Hide topbar entirely */
	.cgpt-topbar {
		display: none;
	}

	/* Hide desktop nav — hamburger takes over */
	.cgpt-mainnav {
		display: none;
	}

	/* Show hamburger */
	.cgpt-hamburger {
		display: flex;
	}

	/* Shrink both CTA buttons in mainbar */
	#cgpt-header .cgpt-mainbar-ctas .cgpt-btn--primary,
	#cgpt-header .cgpt-mainbar-ctas .cgpt-btn--outline {
		padding:   10px 16px;
		font-size: 0.875rem;
	}

	/* Icon size — smaller than button so circle has breathing room */
	.cgpt-hamburger svg {
		width:  20px;
		height: 20px;
	}

	/* Keep mainbar (hamburger) above the slide-in panel within header's stacking context */
	.cgpt-mainbar {
		position: relative;
		z-index:  9999;
	}

	/* Mobile panel — fixed slide-in from right */
	#cgpt-mobile-panel {
		display:                    block;
		position:                   fixed;
		top:                        calc(var(--cgpt-fixed-top, 0px) + var(--cgpt-panel-top, 70px));
		right:                      0;
		bottom:                     auto;
		width:                      82%;
		max-width:                  360px;
		height:                     auto;
		max-height:                 min(75dvh, calc(100dvh - (var(--cgpt-fixed-top, 0px) + var(--cgpt-panel-top, 70px))));
		background:                 #fff;
		z-index:                    9998;
		overflow-y:                 auto;
		-webkit-overflow-scrolling: touch;
		transform:                  translateX(100%);
		transition:                 transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
		padding-top:                16px;
		padding-left:               16px;
		padding-right:              16px;
		padding-bottom:             32px;
		border-radius:              0 0 0 16px;
	}

	#cgpt-mobile-panel.is-open {
		transform: translateX(0);
	}

	/* Scrim fades in behind slide-in panel */
	#cgpt-mobile-scrim {
		display:        block;
		position:       fixed;
		top:            calc(var(--cgpt-fixed-top, 0px) + var(--cgpt-panel-top, 70px));
		left:           0;
		right:          0;
		bottom:         0;
		z-index:        9997;
		background:     rgba(0, 0, 0, 0.4);
		opacity:        0;
		pointer-events: none;
		transition:     opacity 0.28s ease;
	}

	#cgpt-mobile-scrim.is-visible {
		opacity:        1;
		pointer-events: auto;
	}

	/* Disable desktop dropdown panels */
	.cgpt-panel {
		display: none !important;
	}

}

/* ── ≤768px: mobile ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {

	/* Logo smaller */
	.cgpt-logo img {
		width: 150px;
	}

	/* Logo left, hamburger right — simple space-between */
	.cgpt-mainbar-inner {
		justify-content: space-between;
		padding-top:     14px;
		padding-bottom:  14px;
	}

	/* Hide mainnav, primary CTA, and Talk to sales */
	.cgpt-mainnav {
		display: none;
	}

	#cgpt-header:not(.cgpt-header--campaign-dark) .cgpt-mainbar-ctas .cgpt-btn--primary,
	#cgpt-header:not(.cgpt-header--campaign-dark) .cgpt-mainbar-ctas .cgpt-btn--outline {
		display: none;
	}

	#cgpt-header.cgpt-header--campaign-dark .cgpt-mainbar-ctas--campaign .cgpt-btn--campaign {
		display: inline-flex;
	}

	/* Reset ctas positioning — just the hamburger floats naturally to the right */
	.cgpt-mainbar-ctas {
		position:    static;
		margin-left: auto;
	}

	/* Hamburger touch target */
	.cgpt-hamburger {
		width:  44px;
		height: 44px;
	}

	.cgpt-hamburger svg {
		width:  20px;
		height: 20px;
	}

}

/* ── ≥1025px: restore desktop dropdown behaviour ────────────────────────── */
@media (min-width: 1025px) {

	.cgpt-panel {
		display: none; /* JS controls .is-open; ensure reset */
	}

	.cgpt-panel.is-open {
		display: block;
	}

}