/* =========================================================
   COOL AI Challenge — Header / Nav
   Location: coolmedia-child-theme/cool-ai-challenge.css
   (root level, sibling to style.css — no assets/ folder)
   Scoped to page-template cool-ai-challenge.php only.

   NOTE: mega-menu / sub-menu dropdown styling (dark card,
   columns, mobile accordion, etc.) is intentionally NOT
   duplicated here. Our markup keeps the shared "header-navbar"
   class (see template), so it automatically inherits the
   live site's existing global rules in style.css — matching
   your instruction that submenus stay identical to the live
   site. Only the top-level nav bar itself is re-skinned below
   for the white/light background.
   ========================================================= */

   .cai-page {
	font-family: Axiforma, sans-serif;
	color: #000;
}

body.cai-no-scroll,
html.cai-no-scroll {
	overflow: hidden;
}

/* ---- Header shell ---- */
.cai-header {
	position: relative;
	width: 100%;
	background: transparent;
	z-index: 20;
}

.cai-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1440px;
	margin: 0 auto;
	padding: 38px 80px;
	box-sizing: border-box;
	gap: 20px;
}

.cai-header__logo img {
	height: 50px;
	width: auto;
	display: block;
}

/* ---- Right-side group: nav drawer + CTA + toggle.
        Always visible in the header bar — only .cai-header-navbar
        (the drawer) moves off-screen at mobile widths. ---- */
.cai-header__right {
	display: flex;
	align-items: center;
	gap: 60px;
}

/* .cai-header-navbar (the drawer) is position:fixed with its own
   z-index — as a positioned element it paints above non-positioned
   siblings regardless of the parent .cai-header's z-index. Without
   its own stacking, the toggle would render underneath the opened
   drawer even though .cai-header sits "above" it numerically. Only
   the toggle needs this — the CTA can sit underneath the open drawer. */
.cai-menu-toggle {
	position: relative;
	z-index: 41;
}

.cai-header-navbar {
	display: flex;
	align-items: center;
}

/* Top-level menu items — dark-on-white (inverse of live dark header) */
.cai-menu {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cai-menu > li {
	position: relative;
}

.cai-menu > li > a,
.cai-menu > li > .nav-parent-label {
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 100%;
	color: #000 !important;
	text-decoration: none;
	cursor: pointer;
}

.cai-menu > li > a:hover,
.cai-menu > li.menu-item-has-children:hover > a,
.cai-menu > li.menu-item-has-children:hover > .nav-parent-label {
	color: #219f9e !important;
}

/* ---- CTA button (Figma "Contact Us" pill — intentionally its own
        style, not the live dark header-main-btn skin) ---- */
.cai-header__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	height: 50px;
	padding: 16px 20px 12px;
	box-sizing: border-box;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: #000;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.cai-header__cta:hover {
	opacity: 0.8;
	color: #219f9e !important;
	text-decoration: none !important;
}

/* ── Fix Platform mega-menu gap ──
   The shared rule (header .menu-item-has-children .mega-menu-wrapper)
   uses position:fixed with top driven by a JS-measured --header-height
   var (two separate scripts race to set it). Under our header that was
   leaving too large a gap below the nav item, breaking :hover before
   the pointer reached the dropdown. Anchoring it to the nav item itself
   sidesteps the JS timing dependency entirely and matches the live
   site's tight spacing. Only scoped to the mega-menu — the regular
   Solutions/About dropdown already gets its horizontal position set
   correctly via JS (itemRect.left) and isn't touched here. */
.cai-header .mega-menu-wrapper {
	position: absolute !important;
	top: calc(100% + 10px) !important;
	left: 0;
}

/* Same fix, same reason, for the regular Solutions/About dropdown.
   navigation.js also sets an inline "left" on this element (computed
   for the old position:fixed/viewport-relative context via
   itemRect.left) — !important here overrides that inline value so it
   doesn't fight with the new absolute-to-nav-item positioning. */
.cai-header .sub-menu-wrapper {
	position: absolute !important;
	top: calc(100% + 10px) !important;
	left: 0 !important;
}

/* ---- Mobile toggle icon ---- */
.cai-menu-toggle {
	display: none;
	cursor: pointer;
}
.cai-menu-close {
	display: none;
}

/* =========================================================
   Responsive — matches existing breakpoint convention
   ========================================================= */

@media (max-width: 1199px) {
	.cai-header__inner {
		padding: 0 40px; /*28px 40px*/
	}

    .cai-header__right {
        gap: 20px;
    }

	.cai-menu-toggle {
		display: block;
	}

	/* Header bar sits above the full-screen drawer once open (z-index),
	   and switches to a dark background + inverted logo/icon so there's
	   no light strip showing above the dark overlay. Toggled via JS
	   (.is-open class on .cai-header). */
	.cai-header {
		z-index: 45;
		transition: background 0.2s ease;
	}
	.cai-header.is-open {
		background: #0d0d0d;
	}
	.cai-header.is-open .cai-menu-open {
		display: none;
	}
	.cai-header.is-open .cai-menu-close {
		display: block;
	}
	.cai-header.is-open .cai-header__logo img {
		filter: brightness(0) invert(1);
	}
	.cai-header.is-open .cai-menu-open path,
	.cai-header.is-open .cai-menu-close path {
		fill: #fff;
	}

	/* Full-screen dark overlay — matches the live site's mobile nav.
	   Only the nav links live here, so CTA + toggle in .cai-header__right
	   stay visible/clickable in the header bar regardless of open state.
	   Dropdown/mega-menu content inside inherits the live site's
	   dark-card accordion styling automatically via the shared classes. */
	.cai-header-navbar {
		position: fixed;
		top: 0;
		right: -100%;
		width: 100%;
		height: 100vh;
		background: #0d0d0d;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		padding: 120px 32px 40px;
		box-sizing: border-box;
		gap: 0;
		transition: right 0.3s ease;
		overflow-y: auto;
		z-index: 40;
	}

	.cai-header-navbar.active {
		right: 0;
	}

	.cai-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.cai-menu > li {
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.cai-header-navbar .cai-menu > li > a,
	.cai-header-navbar .cai-menu > li > .nav-parent-label {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 20px 0;
		color: #fff !important;
		font-size: 18px;
		font-weight: 600;
	}

	.cai-header-navbar .cai-menu > li > a:hover,
	.cai-header-navbar .cai-menu > li.menu-item-has-children:hover > a,
	.cai-header-navbar .cai-menu > li.menu-item-has-children:hover > .nav-parent-label {
		color: #fff !important;
	}

	/* The chevron arrow itself is inherited from the live site's
	   .menu-item-has-children::after — its "top" was tuned for the
	   live site's own row height/padding, which differs from ours,
	   so it renders top-aligned instead of centered here. Overriding
	   just the vertical position (not touching rotation/content, in
	   case the live site animates it on .active) fixes that without
	   affecting the desktop nav, which uses this same markup but
	   isn't inside .cai-header-navbar at that width. */
	.cai-header-navbar .cai-menu > li.menu-item-has-children::after {
		top: 50% !important;
		transform: translateY(-50%) !important;
		transition: none !important;
	}

	.cai-header-navbar .menu-item-has-children.active::after {
		display: none !important;
	}
}

@media (max-width: 991px) {
	.cai-header__inner {
		padding: 0 32px; /*24px 32px*/
	}
}

@media (max-width: 767px) {
	.cai-header__inner {
		padding: 0 24px; /*20px 24px*/
	}
	.cai-header__logo img {
		height: 36px;
	}
}

@media (max-width: 479px) {
	.cai-header__inner {
		padding: 0 20px; /*16px 20px*/
	}
	.cai-header-navbar {
		width: 100%;
		max-width: 100%;
	}
}

/* =========================================================
   Hero — background wrapper (header + hero title/tagline)
   One shared background so it reads as a continuous gradient
   behind both the nav and the hero text, instead of two
   separately-positioned backgrounds that could seam/misalign.
   ========================================================= */

.cai-hero-bg {
	width: 100%;
	background-image: url('https://cool.co/wp-content/uploads/2026/07/hero-background-image-scaled.jpg');
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	padding-bottom: 320px; /* extends gradient further down so the hero visual overlaps more of it, not plain white */
}

.cai-hero__inner {
	position: relative;
	max-width: 779px;
	margin: 0 auto;
	padding: 68px 24px 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
	z-index: 3;
}

.cai-hero__title {
	margin: 0;
	font-size: 72px;
	font-weight: 900;
	line-height: 69px;
	letter-spacing: -1px;
    text-align: center;
}

/* Beat the sitewide "h1, h1 span" rule (3.125rem font-size, 4rem
   line-height, drop-shadow — meant for headlines over the dark video
   hero elsewhere on the site). ID specificity wins regardless of
   source order; !important matches the specificity of the global rule. */
#cai-hero-title,
#cai-hero-title * {
	filter: none !important;
}
#cai-hero-title {
	font-size: 72px !important;
	line-height: 69px !important;
	text-align: center !important; /* beats the sitewide "h1 { text-align: left }" media-query rule */
}

.cai-hero__title-line {
	display: block;
	color: #000;
	line-height: 1.05;
}

.cai-hero__title-line--gradient {
	margin-top: 12px;
	padding-bottom: 0.15em; /* room for descenders (e.g. "g") under the gradient paint box */
	line-height: 1.2;
	background: linear-gradient(90deg, #44bdb6, #6d49d4 50%, #ff5522);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.cai-hero__tagline {
	max-width: 641px;
	margin: 0;
	font-size: 24px;
	line-height: 34px;
	font-weight: 500;
	color: #000;
}

.cai-hero__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 50px;
	margin-top: 8px;
	padding: 16px 20px 12px;
	border-radius: 12px;
	box-sizing: border-box;
	background: none;
	color: #000;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

/* Gradient border ring, sitting behind the text/icon — true transparent
   center (shows whatever's behind, e.g. the hero's gradient background)
   without the two-layer background trick's bleed-through problem, and
   without affecting the button's own children (mask on the button itself
   would mask the text/icon too; masking this separate pseudo-element
   instead avoids that). */
.cai-hero__cta::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 12px;
	padding: 2px;
	background: linear-gradient(90deg, #44bdb6, #6d49d4 50%, #ff5522);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

.cai-hero__cta:hover {
	color: #fff !important;
	text-decoration: none !important;
	background: linear-gradient(90deg, #44bdb6, #6d49d4 50%, #ff5522);
}

.cai-hero__cta:hover::before {
	display: none;
}

.cai-hero__cta:hover svg path {
	stroke: #fff;
}

@media (max-width: 1199px) {
	#cai-hero-title {
		font-size: 56px !important;
		line-height: 56px !important;
	}
	.cai-hero__tagline {
		font-size: 20px;
		line-height: 28px;
	}
}

@media (max-width: 991px) {
	.cai-hero__inner {
		padding: 40px 24px 80px;
	}
	#cai-hero-title {
		font-size: 44px !important;
		line-height: 46px !important;
	}
}

@media (max-width: 767px) {
	#cai-hero-title {
		font-size: 34px !important;
		line-height: 38px !important;
	}
	.cai-hero__tagline {
		font-size: 18px;
		line-height: 26px;
	}
}

@media (max-width: 479px) {
	.cai-hero__inner {
		padding: 32px 20px 60px;
		gap: 16px;
	}
	#cai-hero-title {
		font-size: 28px !important;
		line-height: 32px !important;
	}
	.cai-hero__title-line--gradient {
		margin-top: 6px;
	}
}

/* =========================================================
   Hero visual — browser mockup collage
   Single flattened image (per Figma's floating card + glow
   already baked in). Pulled up with a negative margin at every
   breakpoint so it overlaps the gradient background, matching
   the mockup — margin-top values below are tuned to close the
   gap under the copy; .cai-hero-bg's padding-bottom (which
   controls how far the gradient itself extends) is untouched.
   ========================================================= */

.cai-hero-visual {
	max-width: 1464px;
	margin: -530px auto 0;
	padding: 0 24px;
	position: relative;
	z-index: 2;
}

.cai-hero-visual__img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 1199px) {
	.cai-hero-bg {
		padding-bottom: 220px;
	}
	.cai-hero-visual {
		margin-top: -24em;
		padding-bottom: 0;
	}
}

@media (max-width: 991px) {
	.cai-hero-bg {
		padding-bottom: 150px;
	}
	.cai-hero-visual {
		margin-top: -18em;
		padding-bottom: 0;
	}
}

@media (max-width: 767px) {
	.cai-hero-bg {
		padding-bottom: 90px;
	}
	.cai-hero-visual {
		margin-top: -13em;
		padding: 0 16px;
	}
}

@media (max-width: 479px) {
	.cai-hero-bg {
		padding-bottom: 60px;
	}
	.cai-hero-visual {
		margin-top: -8em;
		padding: 0 12px;
	}
}
/* =========================================================
   Intro text — "Everyone is talking about AI..." + body copy
   ========================================================= */

.cai-intro {
	max-width: 999px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
}

.cai-intro__eyebrow {
	margin: 0;
	font-size: 40px;
	line-height: 52px;
}

.cai-intro__eyebrow-img {
	display: block;
	max-width: 520px; /* @2x asset — this caps display width; adjust once you see actual proportions live */
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.cai-intro__eyebrow-bold {
	display: block;
	font-family: Axiforma, sans-serif;
	font-weight: 900;
	font-size: 40px;
	line-height: 52px;
	color: #000;
}

.cai-intro__body {
	max-width: 795px;
	margin: 0;
	font-size: 20px;
	line-height: 30px;
	color: #000;
}

.cai-intro__body strong {
	font-weight: 700;
}

@media (max-width: 1199px) {
	.cai-intro__eyebrow-img {
		max-width: 380px;
	}
	.cai-intro__eyebrow-bold {
		font-size: 32px;
		line-height: 40px;
	}
	.cai-intro__body {
		font-size: 18px;
		line-height: 26px;
	}
}

@media (max-width: 767px) {
	.cai-intro {
		padding: 40px 20px 0;
		gap: 16px;
	}
	.cai-intro__eyebrow-img {
		max-width: 280px;
	}
	.cai-intro__eyebrow-bold {
		font-size: 24px;
		line-height: 32px;
	}
	.cai-intro__body {
		font-size: 16px;
		line-height: 24px;
	}
}

/* =========================================================
   Guess correctly / Guess wrong split
   Image placeholders mark graphics not present in the Figma
   export (gift card, "OR" divider, ice bucket) — swap the
   .cai-guess__img-placeholder divs for <img> tags once assets
   are provided.
   ========================================================= */

.cai-guess {
	max-width: 1100px;
	margin: 0 auto;
	padding: 80px 24px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: auto auto;
	align-items: start; /* top-align images in row 1, regardless of their differing intrinsic heights */
	column-gap: 40px;
	row-gap: 0;
}

/* Column wrapper disappears from layout — its children (image,
   text-group) become direct grid items sharing the parent's row
   tracks. This is what guarantees both text-groups start on the
   exact same row line, so the two h3s align regardless of how
   tall each image renders. */
.cai-guess__col {
	display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    margin: 0 auto;
}

.cai-guess__col:first-child .cai-guess__img {
	grid-column: 1;
	grid-row: 1;
	justify-self: center;
}
.cai-guess__col:first-child .cai-guess__text-group {
	grid-column: 1;
	grid-row: 2;
}
.cai-guess__col:last-child .cai-guess__img {
	grid-column: 3;
	grid-row: 1;
	justify-self: center;
}
.cai-guess__col:last-child .cai-guess__text-group {
	grid-column: 3;
	grid-row: 2;
}

.cai-guess__img {
	width: 100%;
	max-width: 280px;
	height: auto;
	margin-bottom: 24px;
	display: block;
}

.cai-guess__text-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
}

.cai-guess__title {
	margin: 0;
	font-size: 1.5em;
	line-height: 1.2;
	font-weight: 900;
}

.cai-guess__title--win {
	color: #44bdb6;
}

.cai-guess__title--lose {
	color: #ff5522;
}

.cai-guess__text {
	margin: 0;
	font-size: 20px;
	line-height: 30px;
	color: #000;
}

.cai-guess__divider {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	justify-self: center;
	width: 140px;
	height: auto;
}

@media (max-width: 991px) {
	.cai-guess {
		display: flex;
		flex-direction: column;
		gap: 32px;
		padding: 60px 24px;
	}
	.cai-guess__col {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.cai-guess__divider {
		order: 2;
		width: 60px;
	}
	.cai-guess__col:last-child {
		order: 3;
	}
}

@media (max-width: 479px) {
	.cai-guess__title {
		font-size: 28px;
	}
	.cai-guess__text {
		font-size: 15px;
		line-height: 26px;
	}
}

/* =========================================================
   Large video section
   Dot-pattern background adapted from the live site's
   .cs-quote::before (case study "quote" section) — pure CSS
   radial-gradient, no image asset needed. This section holds
   the single featured video (the ice-bucket clip); the
   "Results are In" text + 2x2 video grid come next, below this.
   ========================================================= */

.cai-video {
	position: relative;
	overflow: hidden;
	padding: 0 24px 100px;
}

.cai-video::before {
	content: '';
	position: absolute;
	top: 58px; /* starts roughly at the video's top edge instead of surrounding it — nudge to taste once live */
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 100%;
	background-image: radial-gradient(circle, #636363 1px, transparent 1px);
	background-size: 15px 15px;
	opacity: 0.6;
	z-index: 0;
    height: 29em;
}

.cai-video__frame {
	position: relative;
	z-index: 1;
	max-width: 1049px;
	margin: 0 auto;
	padding: 40px;
	background-color: #fff;
	border-radius: 28px;
}

.cai-video__player {
	position: relative;
	max-width: 969px;
	margin: 0 auto;
	aspect-ratio: 969 / 483;
	border-radius: 20px;
	background-color: #000;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cai-video__el {
	width: 100%;
	height: auto;
	max-height: 100%;
	aspect-ratio: 16 / 9; /* standard horizontal ratio — adjust once you confirm the actual file's dimensions */
	object-fit: cover;
	display: block;
	background-color: #1a1a1a;
}

@media (max-width: 1199px) {
    .cai-video::before {
        height: 33em;
    }
}

@media (max-width: 767px) {
	.cai-video {
		padding: 0 20px 60px;
	}
	.cai-video::before {
		top: 40px; /* scaled down proportionally from desktop's 58px */
		height: 28em; /* scaled down from 29em — at mobile widths the video
		                 itself renders much shorter (aspect-ratio 969/483
		                 against a narrow viewport), so 29em would stretch
		                 the pattern well past the video into excess
		                 whitespace; this keeps it roughly matched to the
		                 video's actual mobile height */
	}
	.cai-video__frame {
		padding: 20px;
		border-radius: 20px;
	}
}

@media (max-width: 479px) {
    .cai-video::before {
        height: 16em;
    }
}
/* =========================================================
   Results text + video grid
   Follows directly after the large video section above
   (which owns the dot-pattern background — not repeated here).
   ========================================================= */

.cai-results {
	padding: 80px 24px 120px;
}

.cai-results__inner {
	max-width: 1050px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
}

.cai-results__eyebrow {
	margin: 0;
	font-size: 2.02em;
	font-weight: 900;
	line-height: 1.1;
	background: linear-gradient(90deg, #44bdb6, #6d49d4 50%, #ff5522);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	padding-bottom: 0;
}

.cai-results__heading {
	margin: 0;
	font-size: 40px;
	font-weight: 900;
	line-height: 1.1;
	color: #000;
}

.cai-results__body {
	max-width: 1072px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 8px;
}

.cai-results__body p {
	margin: 0;
	font-size: 20px;
	line-height: 1.5;
	color: #000;
}

.cai-results__script-img {
	display: block;
	max-width: 480px;
	width: 100%;
	height: auto;
	margin: 10px auto 0;
}

/* ---- Video grid ---- */
.cai-results__videos {
	max-width: 1000px;
	margin: 64px auto 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

/* Auto-reflow to 3 columns (single row) if only 3 video blocks are
   present in the markup — just delete the 4th .cai-results__video
   div in the PHP when you only have 3 sources; no other changes
   needed. :has() checks whether the 3rd child is also the last
   child (i.e. exactly 3 children total). Scoped to desktop widths
   only — this selector is more specific than the mobile single-
   column rule below, so without this media query it would
   incorrectly override mobile stacking too. */
@media (min-width: 768px) {
	.cai-results__videos:has(.cai-results__video:nth-child(3):last-child) {
		grid-template-columns: repeat(3, 1fr);
		max-width: 1300px; /* a bit wider so 3 columns don't feel cramped at the original 2-column width */
	}
}

.cai-results__video {
	position: relative;
	aspect-ratio: 419 / 235; /*472 / 235*/
	border-radius: 20px;
	background-color: #ededed;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cai-results__video--featured {
	box-shadow: 0 0 50px 10px rgba(68, 189, 182, 0.15);
}

.cai-results__video-el {
	width: 100%;
	height: auto;
	border-radius: 15px; /* slightly less than the container's 20px so the 5px white border still shows evenly */
	object-fit: cover;
	display: block;
	background-color: #1a1a1a;
}

@media (max-width: 1199px) {
	.cai-results__eyebrow {
		font-size: 1.9em;
	}
	.cai-results__heading {
		font-size: 32px;
	}
	.cai-results__body p {
		font-size: 18px;
	}
	.cai-results__script-img {
		max-width: 480px;
	}
}

@media (max-width: 767px) {
	.cai-results__videos {
		grid-template-columns: 1fr;
		max-width: 969px; /* matches .cai-video__player's max-width so single-column cards aren't wider than the main video */
		margin-top: 40px;
		gap: 16px;
		padding: 0 20px;
	}
	.cai-results {
		padding: 60px 20px 96px;
	}
	.cai-results__eyebrow {
		font-size: 1.65em;
	}
	.cai-results__heading {
		font-size: 26px;
	}
	.cai-results__body p {
		font-size: 16px;
	}
	.cai-results__script-img {
		max-width: 480px;
	}
}
/* =========================================================
   Experience it for Yourself / Take the Challenge
   Black background + real <img> pattern anchored to the top
   (not a CSS background-image) so it keeps its natural
   proportions instead of guessing a background-size/height.
   Ad-thumbnail scrolling strip not built yet — see note above
   the section in the template.
   ========================================================= */

.cai-experience {
	position: relative;
	background-color: #000;
	overflow: hidden;
	padding: 100px 0 0;
}

.cai-experience__pattern {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 0;
	pointer-events: none;
}

.cai-experience__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
}

.cai-experience__eyebrow {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
	background: linear-gradient(90deg, #44bdb6, #6d49d4 50%, #ff5522);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	padding-bottom: 0.15em; /* room for descenders, same fix as elsewhere */
}

.cai-experience__heading {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
}

.cai-experience__body {
	max-width: 780px;
	margin: 8px 0 0;
	font-size: 20px;
	line-height: 1.55;
	color: #fff;
}

.cai-experience__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 50px;
	margin-top: 16px;
	padding: 16px 20px 12px;
	border-radius: 12px;
	border: 2px solid transparent;
	box-sizing: border-box;
	/* gradient border, transparent-over-black fill: two stacked backgrounds */
	background: linear-gradient(#000, #000) padding-box, linear-gradient(90deg, #44bdb6, #6d49d4 50%, #ff5522) border-box;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

/* Same global a:hover bleed-through fixed on the header CTA earlier —
   guarding here too so hover doesn't turn this blue/underlined. */
.cai-experience__cta:hover {
	color: #fff !important;
	text-decoration: none !important;
	background: linear-gradient(90deg, #44bdb6, #6d49d4 50%, #ff5522);
	background-origin: border-box;
	background-clip: border-box;
	border-color: transparent;
}

@media (max-width: 1199px) {
	.cai-experience__eyebrow,
	.cai-experience__heading {
		font-size: 32px;
	}
	.cai-experience__body {
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	.cai-experience {
		padding: 60px 0 0;
	}
	.cai-experience__eyebrow,
	.cai-experience__heading {
		font-size: 26px;
	}
}

/* ---- Ad thumbnail strip ---- */
.cai-experience__strip {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 22em; /* sized to fit the tallest (large) images without cropping — adjust once you see the actual assets */
	margin: 80px auto 0;
	display: flex;
	justify-content: center;
	gap: 8px;
	overflow: hidden;
}

.cai-experience__col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 297px;
	height: 100%;
	flex-shrink: 0;
}

.cai-experience__col img {
	display: block;
	width: 100%;
	flex: 1 1 0;
	min-height: 0;
	object-fit: cover;
	border-radius: 4px;
}

/* Edge fade — same effect as the Figma export's two gradient overlay
   divs (the-ultimate-ad-monetization-t-child/-item), rebuilt as
   pseudo-elements so the strip can just be a plain flex row underneath. */
.cai-experience__strip::before,
.cai-experience__strip::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 160px;
	z-index: 2;
	pointer-events: none;
}
.cai-experience__strip::before {
	left: 0;
	background: linear-gradient(90deg, #000, transparent);
}
.cai-experience__strip::after {
	right: 0;
}

/* ---- Bottom gradient bar ---- */
.cai-experience__bar {
	position: relative;
	z-index: 1;
	height: 10px;
	background: linear-gradient(90deg, #44bdb6, #6d49d4 50%, #ff5522);
}

@media (max-width: 991px) {
	.cai-experience__strip {
		height: 16.5em;
		margin-top: 56px;
	}
	.cai-experience__col {
		width: 220px;
	}
	.cai-experience__strip::before,
	.cai-experience__strip::after {
		width: 100px;
	}
}

@media (max-width: 767px) {
	.cai-experience__strip {
		height: 13.2em;
		margin-top: 40px;
		overflow-x: auto;
		justify-content: flex-end;
	}
}
/* =========================================================
   AI-Scale Optimization / Breakthrough Performance stats
   Figma export note: the "STEP 3" badge, the 3-item checklist,
   and a 4th "Geographic Reach" stat are all display:none in
   this frame (unused leftover components) — only the heading,
   paragraph, CTA, and 3 stats below are actually visible.
   ========================================================= */

.cai-stats {
	max-width: 1225px;
	margin: 0 auto;
	padding: 140px 24px 200px;
	display: flex;
	flex-wrap: wrap;
	gap: 100px;
}

.cai-stats__content {
	flex: 1 1 520px;
	max-width: 622px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.cai-stats__heading {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
}

.cai-stats__heading-line {
	display: block;
	color: #000;
}

.cai-stats__heading-line--gradient {
	margin-top: 8px;
	padding-bottom: 0.15em; /* room for descenders, same fix as elsewhere */
	background: linear-gradient(90deg, #44bdb6, #6d49d4 50%, #ff5522);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.cai-stats__body {
	margin: 0;
	font-size: 20px;
	line-height: 1.6;
	color: #000;
}

.cai-stats__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 50px;
	padding: 16px 20px 12px;
	border-radius: 12px;
	border: 2px solid transparent;
	box-sizing: border-box;
	background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #44bdb6, #6d49d4 50%, #ff5522) border-box;
	color: #000;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.cai-stats__cta:hover {
	color: #fff !important;
	text-decoration: none !important;
	background: linear-gradient(90deg, #44bdb6, #6d49d4 50%, #ff5522);
	background-origin: border-box;
	background-clip: border-box;
	border-color: transparent;
}

.cai-stats__cta:hover svg path {
	stroke: #fff;
}

/* ---- Stats list ---- */
.cai-stats__list {
	flex: 1 1 400px;
	max-width: 516px;
	display: flex;
	flex-direction: column;
}

.cai-stats__item {
	padding: 40px 0;
	border-bottom: 2px dashed #d1d1d1;
}

.cai-stats__item:first-child {
	padding-top: 0;
}

.cai-stats__item--last {
	border-bottom: none;
	padding-bottom: 0;
}

.cai-stats__row {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.cai-stats__number {
	font-size: 82px;
	font-weight: 300;
	letter-spacing: 2px;
	line-height: 1;
	color: #160828;
}

.cai-stats__arrow {
	width: 70px;
	height: 70px;
	flex-shrink: 0;
}

.cai-stats__label {
	margin: 12px 0 0;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.4px;
	color: #160828;
}

@media (max-width: 1199px) {
	.cai-stats {
		gap: 67px;
	}
	.cai-stats__heading {
		font-size: 32px;
	}
	.cai-stats__number {
		font-size: 64px;
	}
	.cai-stats__arrow {
		width: 56px;
		height: 56px;
	}
	.cai-stats__label {
		font-size: 20px;
	}
}

@media (max-width: 1034px) {
	.cai-stats__list {
		max-width: none;
		width: 100%;
		padding-top: 40px;
	}
}

@media (max-width: 991px) {
    .cai-stats {
        padding: 140px 24px 0;
    }
}

@media (max-width: 767px) {
	.cai-stats {
		padding: 84px 20px 0;
		gap: 53px;
	}
	.cai-stats__list {
		padding-top: 24px; /* scaled down from the 1034px breakpoint's 40px */
	}
	.cai-stats__heading {
		font-size: 26px;
	}
	.cai-stats__item {
		padding: 28px 0;
	}
	.cai-stats__number {
		font-size: 48px;
	}
	.cai-stats__arrow {
		width: 42px;
		height: 42px;
	}
	.cai-stats__label {
		font-size: 18px;
	}
}


/* =========================================================
   Final CTA background override
   .cta-footer-banner is the live site's shared/global class —
   scoping this override to .cai-page so it only affects our
   template, not that class anywhere else on the live site.
   ========================================================= */

.cai-page .cta-footer-banner {
	height: 350px; /* without this, the section's own height collapses close to zero since the card's negative margin-top cancels out most of its normal-flow height, leaving barely any visible area for the background image */
	background-image: url('https://cool.co/wp-content/uploads/2026/07/section7-background-image-scaled.jpg');
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
}

@media (max-width: 991px) {
	.cai-page .cta-footer-banner {
		height: 380px;
	}
}

@media (max-width: 767px) {
	.cai-page .cta-footer-banner {
		height: 480px;
	}
}
/* =========================================================
   Final CTA — icon/text/button content styling
   Restored to the original custom treatment (larger gradient
   heading, separate body paragraph, two-layer-gradient-border
   button) — everything else (card shell, offset border,
   placement, background) stays on the shared .cta-footer-banner
   classes from style.css, untouched.
   ========================================================= */

.cai-cta__icons {
	width: 130px;
	height: 130px;
	flex-shrink: 0;
}

.cai-cta__content {
	flex: 1;
}

.cai-cta__heading {
	margin: 0 0 8px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	background: linear-gradient(90deg, #44bdb6, #6d49d4 50%, #ff5522);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	padding-bottom: 0.15em; /* room for descenders, same fix as elsewhere */
    width: 70%;
}

.cai-cta__body {
	margin: 0;
	font-size: 20px;
	line-height: 1.6;
	color: #000;
}

.cai-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 50px;
	flex-shrink: 0;
	padding: 0 20px;
	border-radius: 8px;
	border: 2px solid transparent;
	box-sizing: border-box;
	background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #44bdb6, #6d49d4 50%, #ff5522) border-box;
	color: #000;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.cai-cta__button:hover {
	color: #fff !important;
	text-decoration: none !important;
	background: linear-gradient(90deg, #44bdb6, #6d49d4 50%, #ff5522);
	background-origin: border-box;
	background-clip: border-box;
	border-color: transparent;
}

.cai-cta__button:hover svg path {
	stroke: #fff;
}

@media (max-width: 991px) {
	.cai-cta__icons {
		width: 100px;
		height: 100px;
	}
	.cai-cta__heading {
		font-size: 22px;
	}
	.cai-cta__body {
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	.cai-cta__icons {
		width: 80px;
		height: 80px;
	}
	.cai-cta__heading {
		font-size: 20px;
		margin: 10px auto;
	}
	.cai-cta__body {
		font-size: 16px;
	}
	.cai-cta__button {
		width: auto;
	}
}
/* =========================================================
   Final CTA — gradient outline border
   .cta-footer-banner__outline-border is shared/global (scoped
   to .cai-page so it only affects our template). Its solid
   orange border is swapped for a gradient ring — plain CSS
   border can't take a gradient directly, and border-image
   (the usual workaround) ignores border-radius in most
   browsers, which would square off the rounded corners. This
   mask-based technique fills the box with the gradient, then
   punches out the interior, leaving a gradient ring that still
   respects the shared class's border-radius correctly.
   ========================================================= */

.cai-page .cta-footer-banner__outline-border {
	border: none;
	padding: 2px; /* ring thickness, matches the original 2px border width */
	box-sizing: border-box;
	background: linear-gradient(90deg, #44bdb6, #6d49d4 50%, #ff5522);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
}